Druplash
Drupal + Flash = Druplex
backend  frontend
About me

 Peter Arato
 http://drupal.org/user/428960
 Work at: Pronovix
 Drupal developer (from Hungary)
 Interested in t...
?



How many of you like Flash?
?


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


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

 Flash technology
 Flex framework
 SWF container (small file size)
 ActionScript 3
 AIR, Flash player
Why we use Flash?

 Animation
 3D
 Sound
 Effect
 Timeline
 Modularity (component)
 Multi platform (almost)
 Information
?



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

            SEO
            bad URLs
            slow
            problems in Unix / OS...
Definitions
What is Druplash?
                Frontend: Flash
                Backend: Drupal

 Communication            Ajax - RCP - ...
Communication: Flash <-> JavaScript
Actionscript




JavaScript
Communication - Flash <HTTP> server
Actionscript
Communication - Flash <RCP> server
Actionscript
Graceful degradation
Deep linking
Modules
Communication layer
Services     Easy to extend
             Authentication (Session +
             Key)

AMFPHP       Tra...
Druplash process
The process - 1st request

  Loading original non-Flash content       example.com/news

  Redirect to basePath            ...
The process - navigation

  Send request for a page (click)   example.com/#/news

  Flash notifies SWFAddress         (Fla...
Implementation
Server side
PHP
Server side
Actionscript
Client side - Flash
JavaScript
Client side - JavaScript
DEMO
Examples

 http://www.stevenmerrilltenor.com/
 http://www.ilovetechno.be/
 http://www.bobdylan.com/
 http://hyperblaster.o...
Upcoming SlideShare
Loading in …5
×

How to build a Druplash site?

2,726 views

Published on

Brief introduction of a Druplash site.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,726
On SlideShare
0
From Embeds
0
Number of Embeds
174
Actions
Shares
0
Downloads
35
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

How to build a Druplash site?

  1. 1. Druplash Drupal + Flash = Druplex backend frontend
  2. 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. 3. ? How many of you like Flash?
  4. 4. ? How many of you have built a Drupal site that contained Flash?
  5. 5. ? How many of you want to build a Flash - Drupal site, but have no experience?
  6. 6. About Flash Flash technology Flex framework SWF container (small file size) ActionScript 3 AIR, Flash player
  7. 7. Why we use Flash? Animation 3D Sound Effect Timeline Modularity (component) Multi platform (almost) Information
  8. 8. ? Why are we afraid of using Flash (sites)?
  9. 9. Why are we afraid of using Flash? SEO bad URLs slow problems in Unix / OS-X
  10. 10. Definitions
  11. 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. 12. Communication: Flash <-> JavaScript
  13. 13. Actionscript JavaScript
  14. 14. Communication - Flash <HTTP> server
  15. 15. Actionscript
  16. 16. Communication - Flash <RCP> server
  17. 17. Actionscript
  18. 18. Graceful degradation
  19. 19. Deep linking
  20. 20. Modules
  21. 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. 22. Druplash process
  23. 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. 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. 25. Implementation
  26. 26. Server side
  27. 27. PHP Server side
  28. 28. Actionscript Client side - Flash
  29. 29. JavaScript Client side - JavaScript
  30. 30. DEMO
  31. 31. Examples http://www.stevenmerrilltenor.com/ http://www.ilovetechno.be/ http://www.bobdylan.com/ http://hyperblaster.org/ http://www.martin-eng.com/

×