Flashvars and actionscript 3! Flashvar is a way that in your html embed codes (object tags) you can send variables and values into your swf file. These variables can then be grabbed internally and used your programming! Examples of these could be images that you want to use in your swf but don’t want to import or hardcode them into the flash file or paths to xml or flv files to use as well. Actionscript 3 has a different procedure than as2 did as to how you read these flashvars from the actionscript side. The embed codes and html side of things are still the same, but in case your new to actionscript altogether, I’ll give an example of the html as well.
In actionscript 3 we use the loaderInfo object to access the flashvars. The parameters Object of the loaderInfo will contain all the flashvar variables and values.
As an example of something that is visual I’ve created this little app to read some options from flashvars about colors. An app that will read a list of colors and update a box that is on the stage already to those colors with the specified delay. I always have fun with randomness so I threw in the option for random colors as well. This file looks for certain flashvars: color, loop, delay and random. These are the keys or names of the variables and they are followed by the values you want them to hold. Note that flashvars can be set in any order, so you don’t have to start with color and end with random.
In this example I’m looking for 4 flashvars specifically (in any order):
- colors:String – a comma delimited list of hex colors or simply a string “random” for randomly generated colors (the hex for black #000000 needs to be 0×000000 in flash) (default is random)
- loop:Boolean – whether or not to repeat these colors (default is true)
- delay:Number – the delay between colors (in seconds). (default is 1 second)
- random:Boolean – determines whether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)
This is much more than is required for this example, but I was having fun playing with random colors and timing and options. I figured it diesn’t hurt to show the effect you can have with a couple different variables on one file. Here is an example using the object tags above:
And here are some more (please don’t have a seizure!)
Here’s the full source if you’re interested:
circlecube.com
App to demonstrate the process of getting flashvars from embed code to actionscript (as3)
Displays colors specified.
looking for 4 flashvars specifically (in any order):
colors:String - a comma delimited list of hex colors or simply a string "random" for randomly generated colors (the hex for black #000000 needs to be 0x000000) (default is random)
loop:Boolean - wether or not to repeat these colors (default is true)
delay:Number - the delay between colors (in seconds). (default is 1 second)
random:Boolean - determines wether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)
*/
//initialize vars
var myflashvars:Object = new Object()
var myColors:Array = new Array("random");
var myLoop:Boolean = true;
var myDelay:Number = 1;
var randomOrder:Boolean = false;
var allRandom:Boolean = false;
//read flashvars in actionscript3
//if colors flashvars doesn't exist use these defaults
if (!this.loaderInfo.parameters.colors){
myflashvars = {colors: "random", delay: 1};
}
else{
myflashvars = this.loaderInfo.parameters;
}
//assign flashvars to variables within flash
for (var item:String in myflashvars) {
trace(item + ":\t" + myflashvars[item]);
if (item == "colors"){
myColors = myflashvars[item].split(',');
}
else if(item == "loop"){
myLoop = parseBoolean(myflashvars[item]);
}
else if(item == "delay"){
myDelay = myflashvars[item];
}
else if(item == "random"){
randomOrder = parseBoolean(myflashvars[item]);
}
}
//use my variables!
if (myColors[0] == "random"){
allRandom = true;
}
var counter:Timer = new Timer(myDelay * 1000);
counter.addEventListener(TimerEvent.TIMER, nextColor);
trace ("color number: 0", "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);
counter.start();
stop();
function nextColor(e:Event):void{
//cycle through colors
if (!allRandom && !randomOrder){
if (counter.currentCount+2 > myColors.length){
if (myLoop == true || myLoop == "true"){
counter.reset();
counter.start();
}
else{
counter.stop();
}
}
trace ("color number: "+counter.currentCount, "color hex: "+myColors[counter.currentCount]);
setColor(myBox, myColors[counter.currentCount - 1]);
}
//randomly select a color from the myColors array
else if (!allRandom && randomOrder){
var randomColor = Math.floor(Math.random() * myColors.length);
trace ("random number: "+randomColor, "color hex: "+myColors[randomColor]);
setColor(myBox, myColors[randomColor]);
}
//randomly create colors
else{
trace ("number: "+counter.currentCount, "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);
}
}
function setColor(item:DisplayObject, col):void{
if (col == "random"){
setRandomColor(item);
}
else{
setHexColor(item, col);
}
}
function setHexColor(item:DisplayObject, col:Number):void {
var myColor:ColorTransform = item.transform.colorTransform;
//check color bounds
if (col > 16777215) col = 16777215;
else if (col < 0) col = 0;
myColor.color = col;
item.transform.colorTransform = myColor;
}
function setRandomColor(item:DisplayObject):void{
setColor(item, (Math.floor(Math.random() * 16777215)));
}
function parseBoolean(str:String):Boolean
{
switch(str.toLowerCase())
{
// Check for true values
case "1":
case "true":
case "yes":
return true;
// Check for false values
case "0":
case "false":
case "no":
return false;
// If all else fails cast string
default:
return Boolean(str);
}
}
10 Comments
very interesting article. is there a flashvars_as3.fla file to look at?
There is no fla file to download, but all it is is the actionscript included here. as I said it’s the full source. Of course to actually use it you must embed it into some html including the flashvars.
Hey there. I am trying to use this tutorial and I get parser errors over parseBoolean. Any advice? Also had problems with myBox but figured out that I needed a box with that name in the fla.
I am really new to AS so any suggestions would be very much appreciated.
thanks this was what i was looking for! Great stuff!
When you write a tutorial, write it in its simplest form. There is no way I am going to try to follow this because it is too long, and not useful for what I am trying to do. You should have written a small tutorial “How to use FlashVars”. Lay out the HTML part of it, then lay out the AS3 part of it, to pass a simple “Hello World” message. This is too complicated the way you have it now.
@ugh – Well, go ahead and figure it out and write that tutorial for the community. If you’re going to go around and criticize people for not providing something to your understanding, take a minute and read the guarantee I didn’t post. Here’s a good place to start with a basic tut: http://tinyurl.com/24tbzes
@ugh – I couldn’t disagree more. This is just what I was looking for – clear and to the point. Thanks Evan.
Actually I agree with “ugh”. Tutorials should explain something in it’s simplest form. Why overcomplicate something that is so simple? While I appreciate the time people take to write tutorials (I write many myself), if your going to do something, do it right.
Found some FlashVar code I could just paste into my editor at http://www.justthecodeplease.com. Not as comprehensive in explaining it as this, though.
thanks! awesome tutorial that helped me finally get flashvars.