How to build a Druplash site?

Drupal + Flash = frontendbackend

DruplashDruplex

About me

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

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 technologyFlex frameworkSWF container (small file size)ActionScript 3AIR, Flash player

Why we use Flash?

Animation3DSoundEffectTimelineModularity (component)Multi platform (almost)Information

Why are we afraid of using Flash (sites)?

?

Why are we afraid of using Flash?

SEObad URLsslowproblems in Unix / OS-X

Definitions

What is Druplash?

Communication

Graceful degradation

Dynamic content change

Deep linking

Ajax - RCP - HTTP - Services

Disabled browsers

History - URL

Frontend: FlashBackend: Drupal

Communication: Flash <-> JavaScript

JavaScript

Actionscript

Communication - Flash <HTTP> server

Actionscript

Communication - Flash <RCP> server

Actionscript

Graceful degradation

Deep linking

Modules

Services AMFPHP SWFAddressSWFObject Ajax Load

Communication layerEasy to extendAuthentication (Session + Key)

Transfers native ActionScript2/3 variable types Binary format

Embedding (= replace content to) SWF objectsDeep linking supportInitial variables to Flash

Dynamic JavaScript / CSS loading

Druplash process

The process - 1st request

Loading original non-Flash content

Redirect to basePath

Loading content of the given url

Replace content with Flash

Notify Flash about the state (news)

Flash changes it's state (if it wants)

example.com/news example.com/#/news (Ajax)

The process - navigation

Send request for a page (click)

Flash notifies SWFAddress

SWFAddress state changed

Ajax request to the server

Content elements recieved

Put content to the right place

example.com/#/news

(Flash -> JS)

example.com/#/about_us (Ajax) (JSON)

Implementation

Server side

Server side PHP

Client side - Flash Actionscript

Client side - JavaScript JavaScript

DEMO

Examples

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