Learn Flash Lesson 1 : Lets Get Started

Last Updated on Wednesday, 7 October 2009 09:43 Written by Admin Wednesday, 7 October 2009 09:43

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,

Page Layout

Page Layout

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.

FLA file loaded

FLA file loaded

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

Text Tool

Text Tool

When you have draw the boxes your screen should look something like this.

Text Boxes

Text Boxes

You need to make sure the Text box is of type input text, as show

Instance Name and Type

Instance Name and Type

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

Button

Button

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.

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FlashLession1</title>
<script language="JavaScript" type="text/JavaScript">
function getFlashMovie(movieName) {
     var isIE = navigator.appName.indexOf("Microsoft") != -1;
     return (isIE) ? window[movieName] : document[movieName];
} 
function formSend() {
     var text = document.htmlForm.sendField.value;
     getFlashMovie("FlashLession1").sendTextToFlash(text);
}   
function getTextFromFlash(str) {
     document.htmlForm.receivedField.value = "From Flash: " + str;
     return str + " received";
}
</script>
</head>

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.

<!--url's used in the movie-->
<!--text used in the movie-->
<!--
<p align="center"></p>
-->
<!-- saved from url=(0013)about:internet -->
<script language="JavaScript" type="text/JavaScript">
 AC_FL_RunContent(
  'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
  'width', '550',
  'height', '400',
  'src', 'FlashLession1',
  'quality', 'high',
  'pluginspage', 'http://www.adobe.com/go/getflashplayer',
  'align', 'middle',
  'play', 'true',
  'loop', 'true',
  'scale', 'showall',
  'wmode', 'window',
  'devicefont', 'false',
  'id', 'FlashLession1',
  'bgcolor', '#ffffff',
  'name', 'FlashLession1',
  'menu', 'true',
  'allowFullScreen', 'false',
  'allowScriptAccess','sameDomain',
  'movie', 'FlashLession1',
  'salign', ''
  ); //end AC code
</script>
<noscript>

and also removed the remaining

</noscript>

which means that we end up with

<body bgcolor="#ffffff">
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     codebase="<a href="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0">

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0</a>"

     width="550" height="400" id="FlashLession1" align="middle">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="allowFullScreen" value="false" />
 <param name="movie" value="FlashLession1.swf" /><param name="quality"
  value="high" /><param name="bgcolor" value="#ffffff" /> <
  embed src="FlashLession1.swf" quality="high" bgcolor="#ffffff" width="550" 
  height="400" name="FlashLession1" align="middle" allowScriptAccess="sameDomain"
  allowFullScreen="false" type="application/x-shockwave-flash"
  pluginspage="<a href="http://www.adobe.com/go/getflashplayer">
     http://www.adobe.com/go/getflashplayer</a>" />
 </object>
</body>
</html>

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.

 <param name="allowScriptAccess" value="sameDomain" />
 ....
 allowScriptAccess="sameDomain"

to

 <param name="allowScriptAccess" value="always" />
 ....
 allowScriptAccess="always"

The very last thing we need to do is to in-between the and the tags, add the following

<form name="htmlForm" method="POST" action="javascript:formSend();">
Sending to ActionScript:<br />  <input type="text" name="sendField" value="" /><br />
  <input type="submit" value="Send" /><br />  <br />
Received from ActionScript:<br />
<input type="text" name="receivedField">
</form>
</body>
</html>

once you have the html in place and it is all correct you will need to run the html file. You will not be able to run the file by double clicking on it you will have to make sure you run it from a machine that has IIS on it. Copy your 3 files to your C:Inetpubwwwroot directory or make a virtual directory to the location where you saved your files. If all is ok , when you run your page in your browser , you will see the following screen.

Web Page

Web Page

 

If you enter some text into the “Sending to ActionScript” box and hit send you will see it appear in the flash  object

Send text to flash

Send text to flash

and if you do the reverse and enter some text in the flash object where the text box and click enter you will see it appear in the “Received from action Script” text box.

Send text to html from flash

Send text to html from flash

And there you have it, we have created a flash object and connected it to an html page and passed information back and forth. In the next article we will see how to create the Data collection survey & template that will hold these objects and figure out the JavaScript required to submit the page.

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

2 Comments

  1. Kevin   |  Friday, 09 October 2009 at 7:58 am

    You need to be very careful here. It seems that you are suggesting that the Flash should be hard-coded into the HTML. This is generally a bad idea. Since Microsoft lost the legal case in 2006 around embedding through the object tag it is now necessary to “click to activate” objects built this way.

    Look at swfObject this will provide a javascript based technique for embedding the Flash into the HTML that gets around this issue. swfObject is now the accepted way of building Flash into HTML.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Smarter Dimensions   |  Tuesday, 13 October 2009 at 6:25 am

    Thanks for the comment Kevin. The Embed code is what is produced from CS4 Professional so we assumed it was ok. One thing we did change was the allowScriptAccess=”sameDomain” to allowScriptAccess=”always” which got rid of the click to activate in studio , so this might be enough. When we can, we will test in Data Collection Server and see if anything else is required. We will look into the “swfObject” and perhaps write an article on that also.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Reply