1 / 44

“Using CF to Feed Flash”

“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.ca

evette
Download Presentation

“Using CF to Feed Flash”

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. “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.ca http://www.PangaeaNewMedia.ca

  2. Some recent Projects PNM has completed using CFML and Flash Imported Artists Film Production Company http://www.ImportedArtists.com/ CHUMFM Radio Toronto: Sopranos Feature http://www.CHUMFM.com/go/Sopranos/ Interdocs, Inc. http://www.Interdocs.net/ Acsys Biometrics http://www.AcsysBiometrics.com/

  3. The Idea + Cold Fusion is the Glue that holds it all together - Ben Forta

  4. XML Graphical Overview USER INTERFACE (GUI) DATA MANAGEMENT SYSTEM

  5. XML CF will Assemble the Data USER INTERFACE DATA MANAGEMENT

  6. XML 1: Request Data USER INTERFACE DATA MANAGEMENT REQUEST DATA USING LoadVariables()

  7. 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", "");

  8. XML 3: What CFML Will Do USER INTERFACE DATA MANAGEMENT Use CFML Script to assemble the requested data

  9. XML 4: Return the Requested Data USER INTERFACE DATA MANAGEMENT The Data can be returned as: URLENCODED TEXT (FL4+) / XML(FL5) / HTML(FL5)

  10. 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.

  11. Generator Product Info From the Generator FAQ online at Macromedia.com: GENERATOR2 provides: Custom Graphics Personalization Real-time Graphical Content Delivery A Scalable Architecture

  12. Flash and External Variables Syntax for Flash to receive Variables &VariableName=URLFormatted Content RULES OF ENGAGEMENT • Variable Names are Case INSENSITIVE • Variable Names MUST be preceded by the Ampersand (&) • Variable content must be URL Encoded • Spaces are interpreted LITERALLY (similar concept as text within a <PRE> tag)

  13. Setting the CF Application NOTES YOU SHOULD CONSIDER: • Use <CFSETTING>within your Application.cfmto eliminate ALL White Spaces • Data will only be displayed between <CFOUTPUT>’s • Set a the URL Access Point as a Variable for reuse in Flash • Use the URLEncodedFormat() Function for ALL Data sent to Flash

  14. The Application.CFM File

  15. 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>

  16. 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

  17. 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

  18. The Output From your Script (This is NOT What Flash Sees) “Mubashir Abbas” is output as: “Mubashir%20Abbas%0D” <CFOUTPUT Query="GetUsers"> #URLENCODEDFORMAT(Trim(FullName))#%0D </CFOUTPUT> Note: In the CFML Script, We placed a %0D code to instruct a line break After each name

  19. What Flash Sees (Yikes!) Flash Sees the HTML Source Code that was generated. THIS IS IMPORTANT!

  20. What Flash Will Display The Published File with Content The Flash Window

  21. 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!

  22. Building a Wait LoopWHY BOTHER? … The Internet… That’s why. • 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

  23. 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)

  24. Get on with it! A Basic Wait Loop • onPlay(): • Play Label: Loader, then Label: Introduction • Play Label: Query1 • Label: Query1 will make the LoadVariables Request • Reset a timer, and the trigger, then jump to Label: Wait1 • Play Label: Wait1 • Play 4-5 frames, then Challenge a trigger in an Action Script, • IF: Trigger is True(1), Play Label: BEGIN, • ELSE: Trigger is NotTrue(0), Play label: WAIT1

  25. “Place your Order”FRAME Script: “QUERY1” Sends a Request to CFML Script • Make the HTTP Request to your COLD FUSION Script for Data • Reset Variables: IsComplete and WaitState • Go To Label: WAIT1 on the Timeline and Play • NOTE: “IsComplete” will only change when • the CFML page is completely retrieved!

  26. “The Breakpoint” FRAME Script: Beyond Wait1 TIMER About 4-5 Frames following the WAIT1 Label…  Challenge the IsComplete Variable for TRUE (=1)  TRUE FALSE • Increment Waitstate(Timer) • Challenge the Waitstate for a specified count • If WaitState is GT Count (11), then RETRY HTTP Request (Go to Frame “Query1”) BREAK the Loop and Continue on the Timeline

  27. 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.

  28. Shameless Plug Find your place in the ColdFusion Universe! http://www.Allaire.com/UserGroups

  29. 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

  30. Displaying a RecordSet DATASET 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

  31. 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

  32. 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>

  33. 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>

  34. 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>

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

  36. 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

  37. Assemble the Pieces in Flash • Create a New Symbol, Behavior: BUTTON • Create a Text Field on the button • Create a HIT State • Create a New Symbol, behavior: Movie Clip • Place that New Button on this ownMovie Clip • Create a New Symbol, behavior: Movie Clip • Place the Button’s Movie Clip onthe 2nd Movie Clip and give it an instance Namecalled “Record” • Place the 2nd Movie Clip on the Main Stageafter your HTTP Request Frame and give it an Instance Name called “RecordSet”

  38. Show the Window

  39. Place the Button on its own Movie Clip This is the 2nd Movie Clip with the Button’s MovieClip on its Stage The Movie Clip Containing the MC(Below), this is on the main timeline The Movie Clip we will duplicate (it contains the button) The Button that contains the Last Name

  40. 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: • TotalUsers: the total records that were pulled from the Query • The Data:UserX_UserID, UserX_Fname, UserX_Lname, UserX_Email, UserX_Company

  41. The Magic Dynamically Create a New Name for the MC Move the New MC Down to NewY Send the Data To the Button!

  42. 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:/:VariableName To Read or Set Variables from Movie Clips, we use their Instance Name: /:InstanceName/VariableName

  43. Other Tips • The LoadVariablesCommand 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!!)

  44. 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.ca http://www.PangaeaNewMedia.ca

More Related