Webforumz Newsletter - October 2007
Tutorials
Pulling Dynamic Information from a web page into Flash
This tutorial is designed to showcase how flash can interact with a webpage or webpages dynamically. You can use the following techniques to use the same published .swf file on every page of your website, but based on the code of the webpage, it allows you to load in different content with very little work. For this example we will use some Football (Soccer) teams throughout the world to populate their team seal and location. For purposes of this tutorial, all of the information is "hardcoded" into the web page. But the examples being used allow for the insertion of variables through ASP/PHP/CF right into the code and flash will recognize them! Here are 3 examples of what you will produce even though the information in each of these flash files is different; this is the exact same published .swf file.
This tutorial uses something called FLASHVARS to talk between the web page code and the flash ActionScript.
The first step is to set up our dynamic text field that will populate the city name based on the website that the fan goes to.
- Set the stage of your flash file to 400px x 250px.
- Create 3 layers in your flash file, named as follows: txt, image and Actions
- On the txt layer create a dynamic text field 215x34px in dimensions.
Figure 1.1
- Use the font of Verdana and a size of 25 for this example.
Figure 1.2
- Give the text field an instance name of "city" we will use this later in our ActionScript (AS) to fill in the dynamic text field with the name of the city, based on the website.
Figure 1.3
The next step will be to build the image hold MovieClip(MC) that will hold the team logos. I have 3 logos in total for this example, and you'll need to think about your naming conventions when you make your own, for mine I did: Colorado.png, Newcastle.png and Manchester.png. It is important to have a good naming convention in place for your content before you move on to creating your ActionScript.
- On the images layer use the Rectangle Tool(R) to draw a border or bounding box around your flash project, use any color and shape you want.
Figure 1.4
- Press CTRL-F8 to create a MC and give it a name of "img_holder" it will now show in your library.
Figure 1.5
- Drag the MC from the library onto the stage and give the empty MC an instance name of "img_holder"
Figure 1.6
The next step will be to add our code to the flash document to dynamically populate the dynamic text field and the empty movieclip on the stage.
- Copy this code onto the actions layer, and we'll break down what the code does below:
var identifier:String = _level0.identifier;
loadMovie(identifier + ".jpg", _root.img_holder);
var City_line:String = identifier;
city.text = City_line;
Figure 1.7
- Ok, so what does this all mean? Glad you asked!
- var identifier:String = _level0.identifier;
This code declares a variable named identifier that will be housed both in the flash file and within the embed code of the web page(s). The _level0.identifier is grabbing the variable values from the embeded code of the actual web page.
- loadMovie(identifier + ".jpg", _root.img_holder);
This bit of fun loads in the value of identifier and adds .jpg to the end of that value. (i.e. If the identifier value is Newcastle the code changes it to "newcastle.jpg") It then loads that value(a picture) into the maintimlines object named img_holder, which is the empty MC we set up.
- city.text = identifier;
This sets the dynamic text field value that we created with the name of "city" to the value of identifier from the embed code on the web page. Now, time to publish the flash project and adjust the code on the actual .html page. Press CTRL-Enter to publish your movie and html. You'll notice the flash movie is blank, and the text field is displaying "undefined" where the team name should be located. It is empty because we haven't declared the values in the html page yet. Your published .html will look something like this.
<object type="application/x-shockwave-flash"_ data="dynamic-flash/tutorial.swf" width="400" height="250"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="dynamic-flash/tutorial.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="FlashVars" value="identifier=colorado" /> <img src="dynamic-flash/colorado.jpg" alt="Colorado" width="400"_ height="250" /> </object> - The first step in this process is to create another parameter within the .html code. Copy and paste the following code into your .html.
<param name="FlashVars" value="identifier=colorado" />This declares the new FlashVars Parameter and sets the value of it to the variable "indentifier" which we set up in our flash document. I then hardcoded the value of "Colorado" into this example. Where the "colorado" is written, this is where you can put your ASP/PHP/CF page variables to pull in the dynamic content.
- Now, in the embed code add this piece of code.
FlashVars="identifier=colorado"This tells the .html to add the parameters/variables declared above to be embedded with the flash file. As mentioned in step 14. If you are using an ASP/PHP/CF variable, enter that again where it says "Colorado"
- The finished .html will look like this:
<object type="application/x-shockwave-flash"_ data="dynamic-flash/tutorial.swf" width="400" height="250"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="dynamic-flash/tutorial.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="FlashVars" value="identifier=colorado" /> <img src="dynamic-flash/colorado.jpg" alt="Colorado" width="400"_ height="250" /> </object>
Open your .html file in a browser window and you will see the Colorado team seal, and the name "Colorado" show up in your flash file! If it doesn't, you missed a step!
To view the other teams, change the information on the html page to Manchester and Newcastle to see what happens.
Enjoy!