Learn Flash Lesson 4 : Generic Flash Example

In this article we will take what we have learnt so far and explore one concept in making our flash object generic. The idea here will be to pass something into the flash object that set’s it up and then the flash object returns the selected result. This object could then be used in multiple positions throughout our survey to collect data.

First off we need a cool flash object. In this example we searched around and came across this article & object. This was perfect for our example. Download the fla and set it up for you so that it works in Flash CS4 Professional. Once you have copied the TweenMax for AS3 folder into your working flash directory all you will need to do is to change the xmlPath string from

var xmlPath:String = "http://tutorials.flashmymind.com/XML/carousel-menu.xml";

to

var xmlPath:String = "D://DATA//SD//Flash//FlashLesson4//questions.xml";

You will need to edit the questions.xml file to make it look like this,



 
 
 {35}
 
 
 
 {36}
 
 
 
 {37}
 
 
 
 {38}
 
 
 
 {36}
 

We also renamed the fla file to FlashLesson4.fla. Once we knew everything was working we then created our mdd file which looked like this..

Metadata(en-AU, Question, Label)
FLash_Answer "Please enter your Answer"
    text;
    Q1 "Please select one item that you own."
    categorical [1..1]
    {
        Car "Car",
        Boat "Boat",
        House "House",
        Dog "Dog",
        Cat "Cat"
    };
    Q2 "Is this Example Cool?"
    categorical [1..1]
    {
        Yes "Yes",
        No "No",
        MayBe " May Be"
    };
End Metadata

and then the routing

Routing(Web)
' Make First Question
FLash_Answer.LayoutTemplate = "Flash_Q1.html"
FLash_Answer.ask()
Q1 = CCategorical(FLash_Answer)
Q1.Show()
' Make Second Question
FLash_Answer.LayoutTemplate = "Flash_Q2.html"
FLash_Answer.ask()
Q2 = CCategorical(FLash_Answer)
Q2.Show()

End Routing

To create the Flash_Q1 & Flash_Q2 templates take the flash.html file and rename them, don’t forget to change all occurrences of FlashLesson3 to FlashLesson4. When that is done you should end up with something like this.


 
  My first Dimensions Template

 
 
 
            http://www.adobe.com/go/getflashplayer" />  
       

With all of the above setup you should be able to run your survey in Professional and see the flash file come up on question one. You won’t be able to move to the next question as this bit of code is missing. To add the code to move onto the next page we need to add the SendIt Text box back onto the stage and the make the following changes to our action script.

//Import TweenMax
import gs.*;
import flash.external.ExternalInterface;
import flash.events.Event;
//The path to the XML file (use your own here)
var xmlPath:String = "";
//We'll store the loaded XML to this variable
var xml:XML;
//Create a loader and load the XML. Call the function "xmlLoaded" when done.
var loader = new URLLoader();
function getTextFromJavaScript(str:String):void
 {
 xmlPath = str;
 loader.load(new URLRequest(xmlPath));
 loader.addEventListener(Event.COMPLETE, xmlLoaded);
 }
 ExternalInterface.addCallback("sendTextToFlash", getTextFromJavaScript);

The rest of code continues and then at the very end we need to modify the itemClicked function to not jump to a new webpage , but do a submit page for us.

//This function is called when an item is clicked
function itemClicked(e:Event):void {
//Navigate to the URL that's assigned to the menu item
 //var urlRequest:URLRequest=new URLRequest(e.target.linkTo);
 //navigateToURL(urlRequest);
 SendIt.text = e.target.linkTo;
 var result:Object = ExternalInterface.call("getTextFromFlash", SendIt.text);
}

So the idea is that we will get the html template to pass the location of the XML file to the flash object, the flash object will then render the screen, allow the user to interact with it and when an option is chosen move onto the next question. Next we have to publish our flash object and make sure that we don’t have any errors. When this is done we can modify the html template to pass in the location of the xml file. To start with we will use the xml file provided with the flash example. so we change

function formSend() {
    var text = document.mrForm._Q0.value;
    getFlashMovie("FlashLesson4").sendTextToFlash(text);
}

to

function formSend() {
    getFlashMovie("FlashLesson4").sendTextToFlash("
                D://DATA//SD//Flash//FlashLesson4//questions.xml");
} 

in both the html template files “Flash_Q1.html” & “Flash_Q2.html”. If you have done this correctly then when you run your Professional survey the first question should work correctly bit the second fail , as we are not using the same responses.

Next we need to add some code to our survey to generate the questions.xml file on the fly. This will then mean that if we change our MDD file the flash file will be able to cope. Now it should be mentioned at this stage that this example will only work with a single response style question but you should be able to see how it could be adapted to work with other question types. Anyway … back to this example  .. To create the questions.xml file on the file we will create a function that read the question categories and values and writes them to a text file in the format of an XML file. This is the code.

Sub MakeFile(oQuestion,sFile)
Dim oFSO, oFile, oCat
Set oFSO = CreateObject("Scripting.FileSystemObject")
If oFSO.FileExists(sFile) = true Then
  ' Dont make the file
else
Set oFile = oFSO.CreateTextFile(sFile, True)
oFile.WriteLine("")
  For each oCat in oQuestion.Categories
             oFile.WriteLine("")
              oFile.WriteLine("")
             oFile.WriteLine("" + CTEXT(oCat.Value)  + "")
              oFile.WriteLine("")
   Next
   oFile.WriteLine("")
  oFile.Close()
 End If
Set oFSO = Null
End Sub

Once we have create the subroutine we will then need to make a few changes to the way we ask the questions so update your code to look like this.

' Make First Question
MakeFile(Q1,"D:DATASDFlashFlashLesson4Responses_Q1.xml")
FLash_Answer.LayoutTemplate = "Flash_Q1.html"
FLash_Answer.ask()
Q1 = CCategorical(FLash_Answer)
Q1.Show()
' Make Second Question
MakeFile(Q2,"D:DATASDFlashFlashLesson4Responses_Q2.xml")
FLash_Answer.LayoutTemplate = "Flash_Q2.html"
FLash_Answer.ask()
Q2 = CCategorical(FLash_Answer)
Q2.Show()

When all of this is done , you should be able run your survey and see that the single flash object can be used to show different categorical questions. We are not going to show you how but it would be possible to create one flash object that was manipulated by your survey for all question types. And just one last thing, for those of you that are in the know, it would be feasible to create your own Data Collection Player that fed the flash object without the use of any intermediate files.

In the final article on FLASH we will cover what we have already done and show you how to get it working in your server environment.

3 thoughts on “Learn Flash Lesson 4 : Generic Flash Example”

  1. When I run the survey I’m getting a blank page. I worked a lot on this and found that the xmlPath variable value is blank. The variable value is not getting set. The external interface is not working in this example. In debug mode I got the following error: “Error #2067: The ExternalInterface is not available in this container. ExternalInterface requires Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime.
    at Error$/throwError()
    at flash.external::ExternalInterface$/addCallback()”.

    Please let me know what this means. I’m unable to understand because externalinterface is working correctly for other flash examples.

  2. Thanks a lot for the response. First of all I would love to congratulate you on the tremendous job you are doing by imparting knowledge through Smarter Dimensions. The lessons of Flash helped me to move ahead as far as creating generic questions in multi select & grid as well. The credit goes to Smarter Dimensions Team.

    Now moving on to the problem I faced, it was due to a silly mistake of mine. I had deleted the id=”FlashLesson4″ in the template, as I found that it was absent in the code displayed on the site. Hence there was no communication between the actionscript and javascript, which resulted in xmlPath value to be null.

    Once again I thank the Smarter Dimension team for the help. Your initial lessons are enough to ignite a spark to move ahead.

Leave a Comment

%d bloggers like this: