Dreamweaver Article

Create Your Own Macromedia Flash-Based Buttons

One of the features added in Dreamweaver MX was the concept of a Macromedia Flash button. This is a Flash template that lets you add text and links to it, and then it creates functional Macromedia Flash files, which function as links to other pages or sites.

While Dreamweaver contains a useful set of pre-built Macromedia Flash buttons, you may encounter a situation where these pre-built buttons don’t fit your site design. Or, you may want the button to accept dynamic input, such as a series of links to content contained in a database.

In this article, I will show you how to create custom buttons in Macromedia Flash and how to modify the code written by Dreamweaver to pass values to them through the Flashvars parameter.

Requirements

To complete this tutorial, install the following software and files:

Dreamweaver MX or MX 2004

• Try
• Buy

Macromedia Flash MX or MX 2004

• Try
• Buy

Macromedia Flash Player 6 or higher

• Download

Level of Experience

To complete this article, you should be familiar with the Macromedia Flash and Dreamweaver environments and have a basic understanding of ActionScript.

Creating Custom Flash Buttons

1. Open Macromedia Flash, create a new movie, and set the Stage to the size that you want the button to appear. Ensure that the background color of the movie matches the color of the page that that you will place the button upon.

2. Create a new symbol and select the button option. Once the symbol Timeline has opened, create two layers. Name the top layer text and bottom layer box as shown in Figure 1.

   

   Figure 1. Naming the layers of the button

3. With the box layer selected, create the shape of the button. Then create the rollover, down, and hit states in the other three frames.

4. With the text layer selected, create a text box. In the Property inspector, set its property to Dynamic Text. You can give it an instance name if you like, but this is not necessary. In the Var field, enter the name passText and deselect the Selectable option (See figure 2).

   Note: If you leave the text value selectable, the area occupied by the text block on the button will not react to the mouse.

   

   Figure 2. Ensuring the selectable text property is disabled in the Property inspector

   Note: In the example I have shown, I only change the background color of the button in the over, down, and hit states of the box layer. So, the text layer only contains a single keyframe. If you want the text to change with the button, create keyframes in the other states of the text layer and change the color of the text if you wish.

5. Go back to the main Timeline. Drag an instance of the button onto the Stage and give it an instance name of press_btn.

6. Create another layer and call it actions. In Frame 1, add the following ActionScript.

   ActionScript Version 1.0	ActionScript Version 2.0
   var passText = "myButton"; var passURL = "mypage.htm";	var passText:String = "myButton"; var passURL:String = "mypage.htm";

   Note: While it is possible to attach the code to the button itself, I prefer to centralize all my ActionScript in Frame 1 to make it easier to locate the ActionScript if I wish to edit it later or copy it to an external AS file.

7. This defines two variables and gives them an initial value. Obviously, change mypage.htm to a valid page name on your site.

8. Test your movie. If the variable names are exactly the same letter case, a clickable button with the text "myButton" appears.

   Note: When you pass variables between applications, you should check them at each stage to ensure they are working properly. This saves you time later trying to sort out what part of the application is not performing.

9. Add the following code below the code you entered earlier. This ActionScript processes the redirect for the button.

   ActionScript Version 1.0	ActionScript Version 2.0
   press_btn.onRelease = function() { var urlString = passURL; getURL(urlString,""); }	press_btn.onRelease = function() { var urlString:String = passURL; getURL(urlString,""); }

   In this code, you create another variable, called urlString, and you assign it the value of the variable that will be passed from the HTML. In a simple site, this may represent an extra step, because you could eliminate the line:

   var urlString:String = passURL;

   And simply type the getURL line as follows:

   getURL(passURL,"");

   The reason I create a separate variable is that it makes it easier if I wish to pass more than a simple page address, such as when I want to pass part of a query string to a database record.

10. Test the movie again. This time the text appears and when you click the button, the page redirects to the correct page. If this does not work, ensure that you have typed the variable names correctly.
11. Comment out the first two lines of the ActionScript where the values of the variables were fixed, and then publish the movie.
12. Save the file and publish it.

Given that the variables no longer have defined values assigned to them, you may wonder where Flash is going to get the variable values. You must use of the flashvars parameter. I’ll cover that in the next section. Put simply, flashvars is a method that you use to pass variables from a web page to a Flash movie in matched pairs.

View a RoboDemo demo of creating Flash buttons.

Passing Text and URL Parameters to the Flash Buttons within Dreamweaver Pages

In the example, I want to pass two values to the Flash movie. The first is passText, which holds the text that will appear on the button. The other is passURL, which is the URL of the page that the button links to. Use the following steps to do this:

1. Open Dreamweaver and create a new page. Insert the Flash button at the point where you want the button to appear (Insert > Media > Flash). Or, copy the code from the page that Flash created when you published the movie.

2. Switch into Code view and locate the code that Dreamweaver wrote when you inserted the Flash movie. The standard code will look like this:

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="105" height="25">
   <param name="movie" value="/button.swf" />
   <param name="quality" value="high" />
   <embed src="/button.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="105" height="25"></embed>
   </object>
   
   

3. You need to pass the parameters in two places. First, add the following line above the embed tag.

   <param name="flashvars" value="passText=submit&passURL=myPage.htm" />

   Internet Explorer and any other browser that uses an ActiveX control to handle Flash will recognize this code.

4. Inside the final closing (>) tag at the end of the embed tag, add the following code:

   flashvars="passText=submit&passURL=myPage.htm"

   This passes the parameters to browsers, such as Netscape, that use a plug-in to display Macromedia Flash content.

That's all there is to it. In the flashvars, we have told the browser to pass two variables to the Macromedia Flash player. Each variable is defined in name value pairs:

variablename=value to be passed

Use the "&" to add additional variables.

View a RoboDemo demo on passing text and URL parameters to Flash buttons within Dreamweaver pages.

Going Dynamic

While the example so far has been for a single button, you can use the same technique to create a range of buttons that get their values from a database. All you need to do is replace the section of the Flash code to reference the database element.

For example in ASP, you would use the following code:

<param name="flashvars" value="passText=<%=recordset.fields.item("textField").value%>&passURL=<%=recordset.fields.item("URLField").value%>">

Wrap all of the Flash code in a repeat region and you have a list of graphical buttons that don’t have to be created individually.

Note: If you are using ColdFusion, you must use a double ## in the generated Flash code.

About the author