As promised here are our articles on integrating flash and data collection server. We started learning FLASH about 3 days ago and we now believe that we have found enough information to get something working. To get going with this , we downloaded the latest version of “Adobe Flash CS4 Professional” which gave us a 30 day trial. This has been more than enough time for us to get things working.
The first thing we need to do , after downloading and installing Adobe Professional is figure out how we are going to get an flash file to display and interact with interviewer server. The first thing we did to get going with all this was to come up with a list of things we thought we would have to do, after some quick researching we came up with the following.
Interviewer Server:
1: Display a swf file in a survey.
2: Design a template / page layout that has a question on it to store an answer.
3: find some JavaScript that will allow us to submit the page.
Flash file:
1: Learn how to create one.
2: Learn how to add an item to the flash stage item and make it do something.
3: Get flash to pass information to an HTML page.
4: Get flash to read information from an HMTL page.
Our plan is to have our data collection screen setup something like the following,
Once we have the list , we need to decided how we will start all this. So , let’s just in plain HTML first, try and get a FLASH object to write something into a text box in an html page. Once we have done this we can take things further. So we need a flash object, how do we create one, well start up Adobe Professional and create a new “Flash File ( ActionScript 3.0 ) , call it FlashLession1 and save it in a directory with the same name. You should end up with something like this.
make sure you have the fla file selected and then draw two boxes on the screen with the text tool that should be found on the right hand of the screen and it has the following icon
When you have draw the boxes your screen should look something like this.
You need to make sure the Text box is of type input text, as show
In the instance name of the box’s call one of them “SendIt” and the Other “ReceiveIt”. Next we want to add a button to our object, to do this go up to the window menu item and look for “Common Libraries” when you find it , click buttons and drag a button onto the flash object and give it an instance name of “GoButton”. You should end up with the following
Next we need to add some “Action Script” to allow us to get the flash object to accept and pass information to a html page. We will be using the following code.
import flash.external.ExternalInterface; import flash.events.Event; function getTextFromJavaScript(str:String):void { ReceiveIt.text = "From JavaScript: " + str; }
ExternalInterface.addCallback("sendTextToFlash", getTextFromJavaScript);
function clickSend(event:Event):void { var jsArgument:String = SendIt.text; var result:Object = ExternalInterface.call("getTextFromFlash", jsArgument); ReceiveIt.text = "Returned: " + result; }
GoButton.addEventListener("click", clickSend);
Before we discover where to put this code , lets explain what is happening. The first two lines make our object aware of all the code that is required to do what we want to ,next we have a function called ‘getTextFromJavaScript’ that is not returning anything ( Void ) , but is just setting the “text” value of the “ReceiveIt” object to the passed in value “str”.
Next we have a command “ExternalInterface.addCallback” that makes the function just mentioned available to programs outside of the object itself.
Next we have a function that will , again return nothing ( Void ), take the value that is stored in the text box “SendIt”, link to a JavaScript function found in the html template called “getTextFromFlash” , passing in the value “jsArgument” which is now the value of the SendIt text box, and captures any return result into an object called result.
And finally we have the command that links the just mentioned function ( clicksend ) to the “GoButton” item that we placed in our flash object.
When we have all this in place we need to go to “file” and click publish. Once complete we need to look into the directory where we saved our FlashLession1.fla file and we should see that we now have three files. The three files are “FlashLession1.fla”,”FlashLession1.swf” and “FlashLession1.html” , next we need to take a copy of the HTML file and call it something else. We called our new html file “Lesson1.html” and added modified the top part of it to look like this.
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">FlashLession1
What we have done is to add 3 javascript functions into out template. The first one gets "getFlashMovie" is used to return the name of the movie file. The second "formSend" is the function that is used to send text to the Flash object and the third "getTextFromFlash" is used to retreive text from the flash object. Next we deleted the following code from the html file.
and also removed the remaining
which means that we end up with
Your classid will be different from ours , but just so that you know this is the id given to the object via flash. Next we need to change all the param statements that look like this.
.... allowScriptAccess="sameDomain"
to
.... allowScriptAccess="always"
The very last thing we need to do is to in-between the and the