“Using CF to Feed Flash”

Kevin Towes, Creative and Technical Director,

Pangaea NewMedia, Inc. Toronto, Canada

<Certified Cold Fusion Professional><Manager, CFUGToronto><Professor, Ryerson University; School of Image Arts,

Toronto>

ktowes@PangaeaNewMedia.cahttp://www.PangaeaNewMedia.ca

Some recent Projects PNM has completed using CFML and

FlashImported Artists Film Production Company

http://www.ImportedArtists.com/

CHUMFM Radio Toronto: Sopranos Featurehttp://www.CHUMFM.com/go/Sopranos/

Interdocs, Inc.http://www.Interdocs.net/

Acsys Biometricshttp://www.AcsysBiometrics.com/

The Idea

+

Cold Fusion is the Glue that holds it all together

- Ben Forta

Graphical Overview

USER INTERFACE (GUI) DATA MANAGEMENT SYSTEM

XML

CF will Assemble the Data

USER INTERFACE DATA MANAGEMENT

XML

1: Request Data

USER INTERFACE DATA MANAGEMENT

REQUEST DATA USING LoadVariables()

XML

2: Making the Request

(Flash 5.0 Actions that will publish Flash 4.0 SWF Files)

loadVariables (_level0/:ServerDomain add "GetContentObject.cfm?GetFile=News.Introduction&GetVar=IntroductionText", "");

loadVariables (“URL To Request Variables From", "");

3: What CFML Will Do

USER INTERFACE DATA MANAGEMENT

Use CFML Script to assemble the requested data

XML

4: Return the Requested Data

USER INTERFACE DATA MANAGEMENT

The Data can be returned as:URLENCODED TEXT (FL4+) / XML(FL5) / HTML(FL5)

XML

Just The TEXT, Please

• This solution is for ASCII-Based Content ONLY!

• If you need to dynamically place IMAGE content, you should consider using Macromedia Generator.

Generator Product Info

From the Generator FAQ online at Macromedia.com:

GENERATOR2 provides: Custom Graphics Personalization Real-time Graphical Content Delivery A Scalable Architecture

Flash and External Variables

Syntax for Flash to receive Variables

&VariableName=URLFormatted Content

RULES OF ENGAGEMENT

1. Variable Names are Case INSENSITIVE2. Variable Names MUST be preceded by the Ampersand (&)3. Variable content must be URL Encoded4. Spaces are interpreted LITERALLY

(similar concept as text within a <PRE> tag)

Setting the CF Application

NOTES YOU SHOULD CONSIDER:1. Use <CFSETTING> within your Application.cfm

to eliminate ALL White Spaces

2. Data will only be displayed between <CFOUTPUT>’s

3. Set a the URL Access Point as a Variable for reuse in Flash

4. Use the URLEncodedFormat() Function for ALL Data sent to Flash

The Application.CFM File

Application.CFM Tags

<CFSETTING ENABLECFOUTPUTONLY="Yes“ SHOWDEBUGOUTPUT="No">

<CFPARAM NAME="APPLICATION.URLPath" DEFAULT="http://192.168.200.209/

FlashTalk/">

<CFOUTPUT>&ServerDomain=#APPLICATION.URLPath#&IPAddress=192.168.200.218</CFOUTPUT>

Requesting the CFML Script

• This file will run when requested by the LoadVariables Command. It will also run when requested by a regular browser.

• Any CFML Template can receive FLASH Variables in FORM (POST) or URL (GET) scoped variables.

• The CF File can also receive manually set variables through the URL String

Your Request, Sir!

• After receiving the HTTP Request, Your CFML Script will respond and sent back the formatted data (as you have designed it)

<CFOUTPUT Query="GetUsers">#URLENCODEDFORMAT(Trim(FullName))#%0D

</CFOUTPUT>

Variables Sent TO Flash: TotalUsers, EOF, UserData, IsComplete

The Output From your Script (This is NOT What Flash Sees)

Note: In the CFML Script, We placed a %0D code to instruct a line break After each name

<CFOUTPUT Query="GetUsers">#URLENCODEDFORMAT(Trim(FullName))#%0D</CFOUTPUT>

“Mubashir Abbas” is output as: “Mubashir%20Abbas%0D”

What Flash Sees (Yikes!)

Flash Sees the HTML Source Code that was generated.

THIS IS IMPORTANT!

What Flash Will Display

The Flash Window

The Published File with Content

Setting up the Text Areas in Flash

Dynamic Text Areas will immediately be populated by the content of its variable name!DON’T FORGET TO EMBED THE FONT SET!

Building a Wait LoopWHY BOTHER?

… The Internet… That’s why.

1. You have no control over the time it takes the client to receive data

2. You have no control over the client’s Internet Connection

Building a Wait Loop

A Wait Loop will:– Allow your application to “stall” until the required data

is returned from the request

– Ensure that all text components are populated (sans les holes)

– Ensure the integrity of your application

– Allow you to challenge a “Net Request”

– Simulate the “OnNetDone()” Command in Director (Shockwave)

Get on with it!

onPlay():1. Play Label: Loader, then Label: Introduction2. Play Label: Query1

1. Label: Query1 will make the LoadVariables Request2. Reset a timer, and the trigger, then jump to Label: Wait1

3. Play Label: Wait14. Play 4-5 frames, then Challenge a trigger in an Action Script,5. IF: Trigger is True(1), Play Label: BEGIN,

ELSE: Trigger is NotTrue(0), Play label: WAIT1

A Basic Wait Loop

“Place your Order”FRAME Script: “QUERY1” Sends a Request to CFML Script

1. Make the HTTP Request to your COLD FUSION Script for Data

2. Reset Variables: IsComplete and WaitState3. Go To Label: WAIT1 on the Timeline and Play

NOTE: “IsComplete” will only change when the CFML page is completely

retrieved!

“The Breakpoint” FRAME Script: Beyond Wait1

About 4-5 Frames following the WAIT1 Label… Challenge the IsComplete Variable for TRUE (=1)

TRUE FALSE

BREAK the Loop andContinue on the Timeline

1. Increment Waitstate(Timer)2. Challenge the Waitstate for a specified count3. If WaitState is GT Count (11),

then RETRY HTTP Request (Go to Frame “Query1”)

TIMER

Notes about the CFML Template and IsComplete

• Place the IsComplete Variable in your CFML Template AT THE BOTTOM!

• This will ensure that the Flash Timeline will not continue until after the FULL page has been received by flash.

• Placing this at the top of the template, or in the Application.cfm file will cause the timeline to continue before all data is received, and may cause some headaches.

• NOTE: if you are making Multiple requests from Flash, you must decide which template will have the Breakpoint trigger.

Shameless Plug

Find your place in the ColdFusion Universe!

http://www.Allaire.com/UserGroups

Displaying a RecordSet

• All procedures used when importing a variable are the same. This time, there are just more variables – A LOT MORE!

• Situation: We need to be able to perform a mouse action (Click or Rollover) on a user, to display the proper data.

• Imported Artists (DIRECTORS) example

• For an object respond to a Mouse Event in flash, the symbol on the Flash stage MUST Be a button behavior

• A Button Instance MUST be placed within its own Movie Clip

Displaying a RecordSetDATASET MODEL (Returned Fields):

– UserID– Fname– Lname– Email– Biography

Design a schematic for Variable Names (in CFML) For Example:– User1_UserID=3– User1_Fname=Kevin– User1_Lname=Towes– User1_Email=ktowes@PangaeaNewMedia.ca– User1_Biography=Blahh Blahh Blahh– User2_UserID=4– User2_Fname=Ben– User2_Lname=Forta– User2_Email=Ben@Forta.com– User2_Biography=Blahh Blahh

Designing the CFML Output• Use the Cold Fusion QUERY Variables:

RecordCountCurrentRow

• RecordCount: will tell Flash how many times to DUPLICATE the Button

• CurrentRow: will be used to create unique variables for Flash

Output Results (temporary)<CFOUTPUT Query="GetUsers">

User#CurrentRow#_UserID=#UserID#

User#CurrentRow#_Fname=#Fname#

User#CurrentRow#_Lname=#Lname#

User#CurrentRow#_Email=#Email#

User#CurrentRow#_Company=#Company#

</CFOUTPUT>

Add the URLEncodedFormats and the TRIMs

<CFOUTPUT Query="GetUsers">

User#CurrentRow#_UserID=#UserID#

User#CurrentRow#_Fname=#URLEncodedFormat(Trim(Fname))#

User#CurrentRow#_Lname=# URLEncodedFormat(Trim( Lname))#

User#CurrentRow#_Email=# URLEncodedFormat(Trim( Email))#

User#CurrentRow#_Company=# URLEncodedFormat(Trim( Company))#

</CFOUTPUT>

Remove all White Spaces Between <CFOUTPUT>s

<CFOUTPUTQuery="GetUsers">&User#CurrentRow#_UserID=#UserID#&User#CurrentRow#_Fname=#URLEncodedFormat(Trim(Fname))#&User#CurrentRow#_Lname=# URLEncodedFormat(Trim(Lname))#&User#CurrentRow#_Email=# URLEncodedFormat(Trim(Email))#&User#CurrentRow#_Company=# URLEncodedFormat(Trim(Company))#</CFOUTPUT>

That’s it for the CFML…Now, On to the Flash

Setting up Flash

• INGREDIENTS– 1 Button– 2 Movie Clips– 1 Main Timeline– ½ Cup of Sugar– Pinch of Salt

• (some) Action Scripts:– DuplicateMovieClip– SetProperty– GetProperty– Tell Target

Assemble the Pieces in Flash1. Create a New Symbol, Behavior: BUTTON2. Create a Text Field on the button3. Create a HIT State

4. Create a New Symbol, behavior: Movie Clip5. Place that New Button on this own

Movie Clip

6. Create a New Symbol, behavior: Movie Clip

7. Place the Button’s Movie Clip onthe 2nd Movie Clip and give it an instance Namecalled “Record”

8. Place the 2nd Movie Clip on the Main Stageafter your HTTP Request Frame and give it an Instance Name called “RecordSet”

Show the Window

Place the Button on its own Movie Clip

This is the 2nd Movie Clip with the Button’s MovieClip on its Stage

The Button that contains the Last Name

The Movie Clip we will duplicate (it contains the button)

The Movie Clip Containing the MC(Below), this is on the main timeline

Now, We make Sheep…

READY> Remember the Variables that we have received from Cold Fusion:

So, we have the following variables to work with inside Flash:1. TotalUsers: the total records that were pulled from the Query2. The Data:

UserX_UserID, UserX_Fname, UserX_Lname, UserX_Email, UserX_Company

Dynamically Create a New Name for the MC

Move the New MC Down to NewY Send the Data

To the Button!

The Magic

The Magic – Explained

What is actually happening here?• The instance of MC “CreateRecordSet” is duplicating

the instance of MC “MyButton” which contains the “MyButton” Button. Each Duplicated MCwas named according to its current row. We keptduplicating until CurrentRow GT TotalUsers,(Simulating a CFOUTPUT Query Loop)

• The Variables that were loaded on the main timeline were sent to the duplicated MCs NOTE: Buttons always inherit the Variablesthat exist on that timeline. MC’s do not.

• New MC #1 received User1_LNAME data, New MC #2 receivedUser2_Fname, and so on and so on.

• NOTES: To Read or Set Variables from the “ROOT” Timeline, we must use:/:VariableNameTo Read or Set Variables from Movie Clips, we use their Instance

Name:/:InstanceName/VariableName

Other Tips

The LoadVariables Command allows you to SEND data back and forth to CFML Templates. Think of what you can now do:

Have a Flash-Based Login Form

Have a Flash-Based Email Form

Have any Flash Based Forms

Perform a Dynamic SQL Query based on Variables that are sent to the template! (Like a UserID Number… Hmmmm.. Where’s the Coffee!!)

Using CF to Feed Flash

Kevin Towes, Creative and Technical Director,

Pangaea NewMedia, Inc. Toronto, Canada

<Certified Cold Fusion Professional><Manager, CFUGToronto><Professor, Ryerson University; School of Image Arts,

Toronto>

ktowes@PangaeaNewMedia.cahttp://www.PangaeaNewMedia.ca