Embeding Flash with Swfobject using Flashvars AS3

Using SWFobject can be a little confusing if you are implementing it for the first time. I know, I have been in the same situation. That is why I have written this tutorial to get you started. I will show you how you can embed your SWF file and then adjust stage size and pass some variables through it. We will use Animated Gradient Buttons that we have created in previous tutorial. Colors for gradient will be passed through swfobject so you don’t have to open your flash to edit it.

[download id=”20″]

[h3]…TUTORIAL ASSETS…[/h3]

• Animated Gradient Buttons
• swfobject

First go to Google code repository and download file swfobject_2_2.zip. Uninstall it and copy files swfobject.js and expressInstall.swf to the directory where you have placed your animated buttons. Now it is time to build a HTML file that will display your SWF file. Any text editor will do (Notepad++ is a great one).

Copy following code and save the file as gradient.html:

At this point it should already be working. Open gradient.html in your favourite browser and see the result. Now it is time to explain step by step how implementation is done. Line

imports the neccessary class. Please make sure the path to js file is correct otherwise swfobject will not work. Our embeding is done with line:

First parameter represents the name of the SWF file. Second parameter is the name of ID that you specify later with a DIV element.  Next two settings are defining width and height of swf file’s stage and are one of the most convenient settings since it allows you to change dimensions of stage without actually opening the flash source file.

[h3]…PARAMETERS…[/h3]
Parameters define basic setting of swf file. Here you can set background color (set it in hexadecimal format, for instance 000000 is black and FFFFFF is white). Alignment can be set with params.salign (tl – top left and so on). Below is the list of all parameters that you can specify via params element:

• play
• loop
• menu
• quality
• scale
• salign
• wmode
• bgcolor
• base
• swliveconnect
• flashvars
• devicefont
• allowscriptaccess
• seamlesstabbing
• allowfullscreen
• allownetworking

You can find more information here.
[h3]…FLASHVARS…[/h3]

We have saved the best for last. Flashvars allows you to pass variables to your swf file through swfobject. That means you can set certain variables without opening source file. This is very convenient since it allows dynamic changes when you use javascript or php. For instance we can have more widgets in WordPress that use the same swf file as their output. If we wish to have different settings for each widget we have to pass variables dynamiclly with flashvars.

In our example we will pass two colors via flashvars and build our gradient with it. We will do that for all five animated buttons. Our flashvars parameter that was empty in the above implementation of swf object now looks like this:

Please refer to colorPicker to choose appropriate color. We also have to make some changes in our source file so SWF file knows how to read variables. We will add following code at the start of source file (.fla):

This way we tell Flash to read variables for our colors through swfobject. Please refer to source file that is available for download to see how it is implemented.

Thank you for reading our tutorial. If you have any further questions feel free to ask them in our comments section.