Posts Tagged ‘flash’

Reading XML Using Flash

Tuesday, October 7th, 2008

Today I will be switching gears from some of my previous posts.  Today I will talk about creating Flash that is customizable to the end user.  I have to admit that I am not too much of a flash guru, but I do know enough to have it do what I need.  We all know one of the biggest problems of flash is that for the most part we create it in an IDE (Adobe Flash CS3) and then put it on the website; never to be touched again.

The problem with this is that when something even as small as a spelling mistake needs to corrected; we need to go back in the IDE and change it.  We developers and designers know that we don’t want to be bothered with this type of stuff, so we give the client the power to easily change the flash components.

How do we do this you ask?  We can use an XML file that flash reads in and changes in whichever way we have programmed it too.  In the near future, I will use the information I provide you today to create a fully featured customizable Flash Image Slideshow.

First of all let’s create a flashconfig.xml file which will hold variables that we will then use in our flash.

< ?xml version="1.0" encoding="UTF-8"?>
<flashconfig>
<bgcolor>cccccc</bgcolor>
</flashconfig>

This is pretty simple XML.  You will need to keep the tags well-formed to make your XML file readable.  This means that each opening tag must be closed.  We could nest tags within each other to make this more complicated but for right now this is good.

We will now create a bgcolor.fla file (ActionScript 2.0) which will read in the above value of <bgcolor> and change the background color of our movie.  Open up your flash editor and create the file in the same folder as the above XML file.  Now draw a rectangle that covers up your entire canvas with the rectangle tool.  Now turn it into a Movie Clip by selecting the rectangle and pressing F8.  Call it bg, and export it for ActionScript.  Now in the properties window give it an instance of bg.

Now for the ActionScript magic.  Create a new Layer above the current one, and call it actions.  Click on the first frame and press F9.  Type in the following code:

// XML object
var imagesXML = new XML();
imagesXML.ignoreWhite = true;  // need this to eliminate tabs, and whitespace
imagesXML.onLoad = function()
{
var flashconfig = this.firstChild;   // <flashconfig> tag
var bgcolor = '0x'+flashconfig.firstChild.childNodes; // <bgcolor> value

// change background color of bg movieclip
var change_color = new Color(_root.bg);
change_color.setRGB(bgcolor);
}
imagesXML.load("flashconfig.xml");

Now press CTRL-ENTER and see that your movie background has now been changed to grey.  Now go back to your XML file and change the cccccc to ff0000 and then play your movie again.  What happened?  The background has now changed to a bright red with little effort.  You would not need to go into the IDE just to change the background color.  You could just change a value in the XML file.

Download tutorial files

Tags: , ,
Posted in Web Programming | No Comments »

 
connect with me!