Making a button

In this tutorial we will make a button that connects to a given URL.

Five easy steps

Step 1. This is important: Create a new layer by selecting Insert+Layer.

Step 2. Select the circle tool and draw a small circle on the stage. The size if available in the info panel. About 15 pixels will do it. But size doesn't matter at this point. Also the color doesn't matter. In the illustration below, I've shown a green circle with a black border placed to the left of the first fraction on my stage.

Step 3. Choose the Arrow tool and draw an imaginary rectangle around the circle. You should see the whole button highlighted as show below in first two images two images below.

Circle as drawn

Circle selected

Converted to button

With the circle selected choose Insert+Convert and select the Button button - as shown to the right. You can give it any name, but that feature will not be used in this example. You can place the registration point at the top-left or center, but that is not to be used here either.

Step 4a. Deselect and then select the button again. Open the Actions panel (F9). It should look like this:

Step 4b. Choose + from the actions menu () and then select Actions+Movie Control+on as shown

When you release this you should select the "Release" option. This gives the left image below. Now select Actions+Browser/Network+getURL. You will see the right image below.

Three arguments are allowed, but not all three are required. Only the url is required.

• url The URL from which to obtain the document.
• window An optional parameter specifying the window or HTML frame that the document should load into. You can enter the name of a specific window or choose from the following reserved target names:
  • _self specifies the current frame in the current window.
  • _blank specifies a new window.
  • _parent specifies the parent of the current frame.
  • _top specifies the top-level frame in the current window.
• method A GET or POST method for sending variables. If there are no variables, omit this parameter.
  

In the following example the branch is to the home page of the University of Wisconsin, where it will open the URL on a new page. Note the use of quotes; they are required.

Step 5. Test the button by selecting Control+Test Movie. If it works, and it should, publish the movie. But first you need to scale back the size. Do this by selecting Modify+Document. Select the size to have the same simensions as the button you made. Don't forget to move the button to the upper left corner of the (white) stage area. You will see that the button completely covers the stage area. If this button is to be placed in a page with a colored background you can change the background color in the Modify+Document menu, as well.

Step 6. Before you publish the movie, save the Flash file in the usual way. (File+Save) Now publish the movie. Do this by selecting by selecting the Flash and Html check boxes and then chose Publish.

Now you have an HTML page with the correct encoding to represent this button. Place this in your HTML page where required. The code example looks like this.

You don't have to do anything to this code and it is best not to. Here's the example we just made

Tip: If you have the HTML editor Dreamweaver, it contains a feature to automatically embed a Flash movie. It is a considerable time saver.

A roll-over button

After you have made the button, you can double click on it to invoke the rollover functionality With this functionality you can make the button change colors on the mouse action. To be brief in the following

In turn place

1. A keyframe in the Over position (press F6), make a color change to the button. When the mouse is rolled over the button it will change to the color selected. (See above).
2. A keyframe in the Down position (press F6), make a color change to the button. When the mouse is pressed will change to the color selected.

   Repeat the testing, saving and publishing procedures given in Step 6 above. Here is the result: Note the slight flaw in the button. The size of the movie was just a bit too small for the button, thus chopping it at the left and top. You will not notice such flaws when testing.