“using cf to feed flash” kevin towes, creative and technical director, pangaea newmedia, inc....
TRANSCRIPT
“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>
[email protected]://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– [email protected]– User1_Biography=Blahh Blahh Blahh– User2_UserID=4– User2_Fname=Ben– User2_Lname=Forta– [email protected]– 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>
[email protected]://www.PangaeaNewMedia.ca