drupalcon 2009 flash and drupal

Flash with Drupal

Travis Tidwelltravist@tmtdigital.com

TMT Digital

DrupalCon 2009 – Washington DC

Agenda

• Why Flash and Drupal?• How Flash and Drupal Communicate• Web Services in Drupal• Asynchronous Programming• Building a real Flash application for Drupal

Why Flash with Drupal?

Why Flash with Drupal?

• Flash is like …

Why Flash with Drupal?

• Flash is like … my wife

Why Flash with Drupal?

• Flash is like … my wife– It’s pretty.

Why Flash with Drupal?

• Flash is like … my wife– It’s pretty.– What you see is what you get.

Why Flash with Drupal?

• Flash is like … my wife– It’s pretty.– What you see is what you get. (WYSIWYG)

Why Flash with Drupal?

• Flash is like … my wife– It’s pretty.– What you see is what you get. (WYSIWYG)

• Drupal is like …

Why Flash with Drupal?

• Flash is like … my wife– It’s pretty.– What you see is what you get. (WYSIWYG)

• Drupal is like … me!

Why Flash with Drupal?

• Flash is like … my wife– It’s pretty.– What you see is what you get. (WYSIWYG)

• Drupal is like … me!– It’s nerdy.

Why Flash with Drupal?

• Flash is like … my wife– It’s pretty.– What you see is what you get. (WYSIWYG)

• Drupal is like … me!– It’s nerdy.– Complicated

Why Flash with Drupal?

• Flash is like … my wife– It’s pretty.– What you see is what you get. (WYSIWYG)

• Drupal is like … me!– It’s nerdy.– Complicated– but totally awesome!

Combine Beauty with Power and you get…

Combine Beauty with Power and you get…

Combine Beauty with Power and you get…

How Flash and Drupal communicate

How Flash and Drupal communicate

• Remote Function Calls (RPC)– Uses XML to call a remote function– AMF ( ActionScript Message Format )

How Flash and Drupal communicate

• Remote Function Calls (RPC)– Uses XML to call a remote function– AMF ( ActionScript Message Format )

How Flash and Drupal communicate

• Remote Function Calls (RPC)– Uses XML to call a remote function– AMF ( ActionScript Message Format )

<function>getHello</function>

How Flash and Drupal communicate

• Remote Function Calls (RPC)– Uses XML to call a remote function– AMF ( ActionScript Message Format )

<function>getHello</function>

“Hello World!”

How Drupal handles Flash RPC…

How Drupal handles Flash RPC…

• Services Module

How Drupal handles Flash RPC…

• Services Module• AMFPHP Module

How Drupal handles Flash RPC…

• Services Module• AMFPHP Module• AMFPHP ( http://www.amfphp.org )

How Drupal handles Flash RPC…

How Drupal handles Flash RPC…

• Services module comes with “external” API’s so that Flash can get Drupal data.

How Drupal handles Flash RPC…

• Services module comes with “external” API’s so that Flash can get Drupal data.– node.get– node.save– views.get– etc…

Connecting to Drupal

• Flash must first establish a connection with Drupal.

• Drupal manages the Flash connection using Session ID’s

Session Handling

Session Handling

• Flash calls “system.connect”

Session Handling

• Flash calls “system.connect”• Drupal returns a valid Session ID to Flash

Session Handling

• Flash calls “system.connect”• Drupal returns a valid Session ID to Flash• Flash stores the session ID, then uses it for all

other calls to Drupal.

On the Flash Side…

On the Flash Side…

• Uses NetConnection to connect to flash

On the Flash Side…

• Uses NetConnection to connect to flash

• Create responder to handle callbacks

On the Flash Side…

• Uses NetConnection to connect to flash

• Create responder to handle callbacks

• Make the Service Call

Drupals response is handled using callback functions

Asynchronous Programming

Asynchronous Programming• Flash triggers actions based on events ( Event

Driven )• Events move the system along

Asynchronous Programming• Flash triggers actions based on events ( Event

Driven )• Events move the system along

Asynchronous Programming• Flash triggers actions based on events ( Event

Driven )• Events move the system along

Register for event

Asynchronous Programming• Flash triggers actions based on events ( Event

Driven )• Events move the system along

Register for event

Make the call…

Asynchronous Programming• Flash triggers actions based on events ( Event

Driven )• Events move the system along

Register for event

Make the call…

Twiddle your thumbs…

Asynchronous Programming• Flash triggers actions based on events ( Event

Driven )• Events move the system along

Register for event

Make the call…

Twiddle your thumbs…

An event! Let’s do something!

Let’s build something!

Let’s build something!

Meet my wife…

Let’s build something!

Meet my wife…

Let’s build something!

Meet my wife… She is Flash…

Let’s build something!

Meet me…

Let’s build something!

Meet me…

Let’s build something!

Meet me… I am Drupal…

Demo Time!

For more information…• “Flash with Drupal” Book– Author: Travis Tidwell (me)– Packt Publishing– Due July this year

• Topics covered• Build a Flash recipe viewer• Build a media player using Nodes and Views• Build a Flash Five Star voter• A bunch of other good stuff…

Questions?