Creating Reusable Flash Buttons Controlled by HTML

By Blue_Chi | Flash | Intermediate

Introduction:

This tutorial will teach you how to create a flash button that could be reused as many times as you wish in a single HTML page to load different links each time. Using a single SWF for all your buttons will not only make the loading process of your content much faster, but it will also make the updating process much easier as you can edit the text and the URL of your flash button the HTML page that displays the button rather than going back to the FLA each time you want to edit or create a new button.

All the following buttons use are generated using a single SWF file:

     

 

All these buttons are the same exact SWF file (you can even check the page source if you don't believe me!). Not only that each button has a different title, but each button links to a different page. The trick behind this SWF is that this webpage you are now viewing sends different variables to each SWF file. Each button receives two variables, the button text and the button link. This tutorial will teach you how to create your reusable Flash button and how to transfer your variables through HTML.

Making the SWF file:

- Create a new FLA, set the canvas size to 100x20, white background, and use the 'rectangle tool' to draw a rectangle that almost fills the whole canvas.

- Convert the rectangle to a Button Symbol. (Ctrl+A first to select it, then F8 to convert it to a symbol.) The name of the symbol does not matter, you can just put MyButton for the sake of this tutorial. Make sure the symbol behaviour is set to BUTTON.

- While your button symbol is still selected, access the properties inspector to give your button the instance name MyButton_btn. Instance names are used as a reference for an object to be controlled via ActionScript.

- While you are still on the main timeline, double click the main rectangle on the stage to edit the button's timeline. On the Button Timeline, insert a Keyframe in the "Over" state button.

- Click once on the "Over" frame to edit its content. Here you would have to change the colour fill of the rectangle to a different colour so that our button is coloured when we place our mouse over it.

- Go back to the main timeline, you do that by clicking on Scene link above the Timeline. Once your there, use the Text tool to draw a text field over your button. Make sure that it horizontaly fits the button. Now using the property inspector, change the text type to Dynamic and then give your text the variable name myText. Obviously you would also then want to change the font type, center the text, and change the colour.

If you are using a special font you will have to embed the characters of that font in the movie. To do that click on the "Character" button in the inspecter panel, and then select the required characters. Hold "Shift" to select multiple character collections.

- The final step in preparing the SWF file is coding the ActionScript. We will control the button by attaching code the Frame containing the button. Click on the Frame once then press F9 to access the ActionScript panel. (Or alternatively go to "Window>Development Panels>Actions"). Paste this code in the ActionPanel:

MyButton_btn.onRelease = function (){
getURL(myLink);
}

The code is very simple, our button is told to get the URL "myLink", which is the variable that we are going to pass to the movie from the HTML code that we are going to write in our next step. Save your file, then go to File>Publish to generate the HTML and SWF files required to do the trick. You will find these in the same folder of your saved FLA file.

Editing the HTML file:

Open your HTML file using a notepad and examine the object code of the SWF file

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100" height="20" id="reusable" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="reusable.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="reusable.swf" quality="high" bgcolor="#ffffff" width="100" height="20" name="reusable" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

To load variables into the SWF file, you will have to use the LoadVars parameter. All loaded variables are accessable directly from the main timeline of the movie. You separate different variables using the & sign. To add the required variables for our movie simply add the following code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100" height="20" id="reusable" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="reusable.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="myText=HOME&myLink=http:\\www.republicofcode.com"/>
<embed src="reusable.swf" quality="high" bgcolor="#ffffff" width="100" height="20" name="reusable" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

To guarantee browser compatibilty it is recommended that you also add the FlashVars to your <embed> code as well, which in this case can be added by adding the following:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100" height="20" id="reusable" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="reusable.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="myText=HOME&myLink=http:\\www.republicofcode.com"/>
<embed src="reusable.swf" FlashVars="myText=HOME&myLink=http:\\www.republicofcode.com" quality="high" bgcolor="#ffffff" width="100" height="20" name="reusable" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

The variable myText and myLink can be changed for each SWF so that each button has a different label and different text. This tutorial used a very simple button effect, while in reality it is possible to create much more interesting and complex button animations. You can view an example in our other tutorial at this link.

-End of tutorial

x