Brief introduction of a Druplash site.

1. Druplash
Drupal + Flash = Druplex
backend frontend

2. About me
Peter Arato
http://drupal.org/user/428960
Work at: Pronovix
Drupal developer (from Hungary)
Interested in tech
Like Flash/Flex/AIR

3. ?
How many of you like Flash?

4. ?
How many of you have built a
Drupal site that contained
Flash?

5. ?
How many of you want to build a
Flash - Drupal site, but have no
experience?

6. About Flash
Flash technology
Flex framework
SWF container (small file size)
ActionScript 3
AIR, Flash player

7. Why we use Flash?
Animation
3D
Sound
Effect
Timeline
Modularity (component)
Multi platform (almost)
Information

8. ?
Why are we afraid of using Flash (sites)?

9. Why are we afraid of using Flash?
SEO
bad URLs
slow
problems in Unix / OS-X

10. Definitions

11. What is Druplash?
Frontend: Flash
Backend: Drupal
Communication Ajax - RCP - HTTP - Services
Graceful degradation Disabled browsers
Dynamic content change
Deep linking History - URL

12. Communication: Flash <-> JavaScript

13. Actionscript
JavaScript

14. Communication - Flash <HTTP> server

15. Actionscript

16. Communication - Flash <RCP> server

17. Actionscript

18. Graceful degradation

19. Deep linking

20. Modules

21. Communication layer
Services Easy to extend
Authentication (Session +
Key)
AMFPHP Transfers native
ActionScript2/3 variable
types
Binary format
SWFAddress Embedding (= replace
content to) SWF objects
SWFObject Deep linking support
Initial variables to Flash
Ajax Load Dynamic JavaScript / CSS
loading

22. Druplash process

23. The process - 1st request
Loading original non-Flash content example.com/news
Redirect to basePath example.com/#/news
Loading content of the given url (Ajax)
Replace content with Flash
Notify Flash about the state (news)
Flash changes it's state (if it wants)

24. The process - navigation
Send request for a page (click) example.com/#/news
Flash notifies SWFAddress (Flash -> JS)
SWFAddress state changed example.com/#/about_us
Ajax request to the server (Ajax)
Content elements recieved (JSON)
Put content to the right place

25. Implementation

26. Server side

27. PHP
Server side

28. Actionscript
Client side - Flash

29. JavaScript
Client side - JavaScript

30. DEMO

31. Examples
http://www.stevenmerrilltenor.com/
http://www.ilovetechno.be/
http://www.bobdylan.com/
http://hyperblaster.org/
http://www.martin-eng.com/