Presentation on theme: "“Using CF to Feed Flash” Kevin Towes, Creative and Technical Director, Pangaea NewMedia, Inc. Toronto, Canada"— Presentation transcript:
“Using CF to Feed Flash” Kevin Towes, Creative and Technical Director, Pangaea NewMedia, Inc. Toronto, Canada
Some recent Projects PNM has completed using CFML and Flash Imported Artists Film Production Company CHUMFM Radio Toronto: Sopranos Feature Interdocs, Inc. Acsys Biometrics
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 INSENSITIVE 2.Variable Names MUST be preceded by the Ampersand (&) 3.Variable content must be URL Encoded 4.Spaces are interpreted LITERALLY (similar concept as text within a tag)
Setting the CF Application NOTES YOU SHOULD CONSIDER: 1.Use within your Application.cfm to eliminate ALL White Spaces 2.Data will only be displayed between ’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
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) #URLENCODEDFORMAT(Trim(FullName))#%0D 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 #URLENCODEDFORMAT(Trim(FullName))#%0D “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 Loop WHY 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: Introduction 2.Play Label: Query1 1.Label: Query1 will make the LoadVariables Request 2.Reset a timer, and the trigger, then jump to Label: Wait1 3.Play Label: Wait1 4.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 WaitState 3.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) TRUEFALSE BREAK the Loop and Continue on the Timeline 1.Increment Waitstate(Timer) 2.Challenge the Waitstate for a specified count 3.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!
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 RecordSet DATASET MODEL (Returned Fields): –UserID –Fname –Lname – –Biography Design a schematic for Variable Names (in CFML) For Example: –User1_UserID=3 –User1_Fname=Kevin –User1_Lname=Towes –User1_Biography=Blahh Blahh Blahh –User2_UserID=4 –User2_Fname=Ben –User2_Lname=Forta –User2_Biography=Blahh Blahh
Designing the CFML Output Use the Cold Fusion QUERY Variables: RecordCount CurrentRow RecordCount: will tell Flash how many times to DUPLICATE the Button CurrentRow: will be used to create unique variables for Flash
Add the URLEncodedFormats and the TRIMs User#CurrentRow#_UserID=#UserID# User#CurrentRow#_Fname=#URLEncodedFormat(Trim(Fname))# User#CurrentRow#_Lname=# URLEncodedFormat(Trim( Lname))# User#CurrentRow#_ =# URLEncodedFormat(Trim( ))# User#CurrentRow#_Company=# URLEncodedFormat(Trim( Company))#
Remove all White Spaces Between s &User#CurrentRow#_UserID=#UserID#&User#CurrentRo w#_Fname=#URLEncodedFormat(Trim(Fname))#&User#CurrentRow#_Lname= # URLEncodedFormat(Trim(Lname))#&User#CurrentRow#_ =# URLEncodedFormat(Trim( ))#&User#CurrentRow#_Company=# URLEncodedFormat(Trim(Company))#
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 Flash 1.Create a New Symbol, Behavior: BUTTON 2.Create a Text Field on the button 3.Create a HIT State 4.Create a New Symbol, behavior: Movie Clip 5.Place that New Button on this own Movie Clip 6.Create a New Symbol, behavior: Movie Clip 7.Place the Button’s Movie Clip on the 2 nd Movie Clip and give it an instance Name called “Record” 8.Place the 2 nd Movie Clip on the Main Stage after 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 2 nd 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 Query 2.The Data: UserX_UserID, UserX_Fname, UserX_Lname, UserX_ , 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 MC was named according to its current row. We kept duplicating 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 Variables that exist on that timeline. MC’s do not. New MC #1 received User1_LNAME data, New MC #2 received User2_Fname, and so on and so on. NOTES: To Read or Set Variables from the “ROOT” Timeline, we must use: /:VariableName To 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 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