Using CF to Feed Flash

1
Using CF to Feed Flash

• Kevin Towes,
• Creative and Technical Director, Pangaea
  NewMedia, Inc. Toronto, Canada
• ltCertified Cold Fusion Professionalgt
• ltManager, CFUGTorontogt
• ltProfessor, Ryerson University School of Image
  Arts, Torontogt
• ktowes_at_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
Graphical Overview
USER INTERFACE (GUI)
DATA MANAGEMENT SYSTEM
5
CF will Assemble the Data
USER INTERFACE
DATA MANAGEMENT
6
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?GetFileNews.IntroductionGe
tVarIntroductionText", "")
loadVariables (URL To Request Variables From",
"")
8
3 What CFML Will Do
USER INTERFACE
DATA MANAGEMENT
Use CFML Script to assemble the requested data
9
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
• VariableNameURLFormatted 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 ltPREgt tag)

13
Setting the CF Application

• NOTES YOU SHOULD CONSIDER
• Use ltCFSETTINGgt within your Application.cfm to
  eliminate ALL White Spaces
• Data will only be displayed between ltCFOUTPUTgts
• 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

• ltCFSETTING ENABLECFOUTPUTONLY"Yes
  SHOWDEBUGOUTPUT"No"gt
• ltCFPARAM NAME"APPLICATION.URLPath"
• DEFAULT"http//192.168.200.209/FlashTalk/"gt
• ltCFOUTPUTgtServerDomainAPPLICATION.URLPathIPAd
  dress192.168.200.218lt/CFOUTPUTgt

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)

ltCFOUTPUT Query"GetUsers"gt URLENCODEDFORMAT(Tri
m(FullName))0D lt/CFOUTPUTgt
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
Mubashir20Abbas0D
ltCFOUTPUT Query"GetUsers"gt URLENCODEDFORMAT(Trim
(FullName))0D lt/CFOUTPUTgt
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! DONT FORGET
TO EMBED THE FONT SET!
22
Building a Wait LoopWHY BOTHER?
The Internet Thats why.

• You have no control over the time it takes the
  client to receive data
• 2. You have no control over the clients 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 OrderFRAME 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_UserID3
• User1_FnameKevin
• User1_LnameTowes
• User1_Emailktowes_at_PangaeaNewMedia.ca
• User1_BiographyBlahh Blahh Blahh
• User2_UserID4
• User2_FnameBen
• User2_LnameForta
• User2_EmailBen_at_Forta.com
• User2_BiographyBlahh Blahh

31
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

32
Output Results (temporary)
ltCFOUTPUT Query"GetUsers"gt UserCurrentRow_UserI
DUserID UserCurrentRow_FnameFname UserCur
rentRow_LnameLname UserCurrentRow_EmailEma
il UserCurrentRow_CompanyCompany lt/CFOUTPUTgt
33
Add the URLEncodedFormats and the TRIMs
ltCFOUTPUT Query"GetUsers"gt UserCurrentRow_UserI
DUserID UserCurrentRow_FnameURLEncodedForma
t(Trim(Fname)) UserCurrentRow_Lname
URLEncodedFormat(Trim( Lname)) UserCurrentRow_E
mail URLEncodedFormat(Trim( Email)) UserCurren
tRow_Company URLEncodedFormat(Trim(
Company)) lt/CFOUTPUTgt
34
Remove all White Spaces Between ltCFOUTPUTgts
ltCFOUTPUTQuery"GetUsers"gtUserCurrentRow_UserI
DUserIDUserCurrentRow_FnameURLEncodedForma
t(Trim(Fname))UserCurrentRow_Lname
URLEncodedFormat(Trim(Lname))UserCurrentRow_Em
ail URLEncodedFormat(Trim(Email))UserCurrentR
ow_Company URLEncodedFormat(Trim(Company))lt/CF
OUTPUTgt
35
Thats it for the CFMLNow, 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 Buttons 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 Buttons
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

• READYgt 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. MCs 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 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.. Wheres the Coffee!!)

44
Using CF to Feed Flash

• Kevin Towes,
• Creative and Technical Director, Pangaea
  NewMedia, Inc. Toronto, Canada
• ltCertified Cold Fusion Professionalgt
• ltManager, CFUGTorontogt
• ltProfessor, Ryerson University School of Image
  Arts, Torontogt
• ktowes_at_PangaeaNewMedia.ca
• http//www.PangaeaNewMedia.ca