Learn Flash Lesson 2 : Pass it back to Data Collection Server

Last Updated on Wednesday, 14 October 2009 05:24 Written by Admin Wednesday, 14 October 2009 05:24

In our previous article on flash we discovered how to create a flash object with two text boxes on it and a  button that could interact with an html page via JavaScript. In this article we will discover how to add all  this code into a html file that can be used with a Data Collection Server survey.

Now that we have our three files , “FlashLesson1.fla”, “FlashLesson1.swf” and “Lesson1.html” we will rename  them to “FlashLesson2.fla”, “FlashLesson2.swf” and “Flash.html” and store them in a directory call  “FlashLesson2″. Once we have done that we will need to create a MDD file with the following metadata and  routing.

Metadata(en-AU, Question, Label)
Name "Please enter your name"
    text;

Q1 "Next Question"
    categorical [1..1]
    {
        A,B,C
    };
End Metadata

and routing

Routing(Web)
Name.LayoutTemplate = "Flash.html"
name.ask()
Q1.ask()
End Routing

What we plan to do is to modify our flash object and template to allow us to enter some text and ensure that  it gets passed to the Data Collection Survey. We will need to modify our template produced in lession one to  look like this one.

<html>
 <head>
  <title>My first Dimensions Template</title>
<script language="JavaScript" type="text/javascript">
 function getFlashMovie(movieName) {
     var isIE = navigator.appName.indexOf("Microsoft") != -1;
     return (isIE) ? window.document.mrForm[movieName] : document.mrForm[movieName];
}
function formSend() {
     var text = document.mrForm._Q0.value;
     getFlashMovie("FlashLesson2").sendTextToFlash(text);
}   
function getTextFromFlash(str) {
     document.mrForm._Q0.value = "" + str;
}
</script>
 </head>
 <mrPage IncludeElementIDs = "true" ></mrPage>
 <body>
<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="FlashLesson2"
    align="middle">
 <param name="allowScriptAccess" value="always" />
 <param name="allowFullScreen" value="false" />
 <param name="movie" value="D:DATASDFlashFlashLesson2FlashLesson2.swf" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#ffffff" />
  <embed src="FlashLesson2.swf"
                 quality="high"
                 bgcolor="#ffffff"
                 width="550"
                 height="400"
                 name="FlashLesson2"
                 align="middle"
                 allowScriptAccess="always"
                 allowFullScreen="false"
                 type="application/x-shockwave-flash"
                 pluginspage="<a href="http://www.adobe.com/go/getflashplayer">http://www.adobe.com/go/getflashplayer</a>" />
 </object>
 <mrData />
 <mrNavBar />
 </body>
</html>

Next we need to edit our flash object to make it look more like a survey question. We will move the enter  button down to the bottom of the flash object and change the text of it to say next. We will also add some  text and a border to the text box that we wish the user to enter their name in. To do all this start Adobe  Professional and load up the flash file “FlashLesson2.fla”.

Firstly we will put a boarder around the text box we want to use and put some text about it. To add a  boarder make sure you are on the selection tool and select the top text box, then on properties click the  board icon

Text Box Border

Text Box Border

Next move the “Enter” button down to the right hand corner of the flash object and double click it, you  should see something like this appear

Modify Text Steo 1

Modify Text Step 1

you should notice that the first item in you button is a text layer and it has a crossed out pen and a  padlock on it. If you single click the padlock then single click the button and you should see that you text  around your button image gets a blue box around it. This means that it can be edited double click on it and  you should see only that layer in the timeline pane, but you should be able to edit the text on the button  also.

Next Text

Next Text

Edit the word “enter” to say “Next” with the selection tool , double click any of the white area a few times  and you will see the screens close until you get back to the main layer.

Final lookl

Final look

Next we want to add some text to our flash object so with the text tool add the words, “Please enter your name” Feel free to play around with the font and style etc, as you would have already guessed , these  article are not about making things looking pretty, just the raw functionality required.

Next we are going to modify the action script to be more in line with what we want. Modify the  “getTextFromJavaScript” function to look like this,

import flash.external.ExternalInterface;
import flash.events.Event;
function getTextFromJavaScript(str:String):void
 {
 SendIt.text = "" + str;
 }

The reason we need to do this is we need to consider what happens when someone hits the previous button ( we  want our flash image to have the saved answers in it ). Next we need to edit the “clickSend” function

 function clickSend(event:Event):void
 {
 var jsArgument:String = SendIt.text;
 var result:Object = ExternalInterface.call("getTextFromFlash", jsArgument);
 }

once we have done this we can export our movie again and then test our changes. We should end up with  something like this.

Added to Data Collection Template

Added to Data Collection Template

when we enter stuff now into the flash object we will see it appear in the survey box, then next thing we need  to do is to get the flash object to submit the page. This is easily done by adding the following code into  the getTextFromFlash function

function getTextFromFlash(str) { 
     document.mrForm._Q0.value = "" + str; 
     document.mrForm.submit();
}

Next when we know the results are being stored in data collection server we need to hide a few things on the  page. To do this add the following

tag to our template.

<div style="visibility:hidden;">
 <mrData />
 <mrNavBar />
 </div>

Finally we will need to deal with the previous button being hit. At this point in time , if we have navigated  away from the flash question and we are back in the normal survey, if we hit the previous button the flash  object will be empty.

<body onload="javascript:formSend();">

However if we enter the following code into the onload event of the body tag, our previous answers will be  pushed back to the flash object. When this is done what we should end up with is something like the  following.

Final Page

Final Page

after we enter some text and hit the next button we will be moved onto the next question. If we then hit the  previous button we will see the results back in our flash object. And there you have it we have successfully created a flash object that will talk to a  Data collection survey.

At this stage we hope you can see the proc ess that one might take to integrate flash into Data Collection, basically you have a flash object that  sends something ( the answer ) to the html page. In our example the answer is stored in a text question, and I am sure you will be thinking , well how would I report on this, in our next article we will begin to address this and a few other issues.

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

Leave a Reply