1 Creating Hyperlinks and Buttons with Flash MX Introduction

Creating Hyperlinks and Buttons with Flash MX

Introduction (Preparing the Stage)

Movie Property Definitions:

· Go to the “Properties” panel at the bottom of the window to choose the frame rate, width, height, and background color of the stage as shown below.

Exercise- Creating Hyperlinks and Buttons

The Toolbar:

· If your toolbar is not on the desktop, go to “Window” on the menu bar and choose “Tools”. · Click on the oval tool. It’s the one that the mouse is pointing to in the screen shot below.

· Click on the “Line Color” tool. It’s the one that the mouse is pointing to in the screen shot below. The line color tool designates the outline color of your button.

· Click on the “Fill Color” tool. It’s the one that the mouse is pointing to in the screen shot below. It’s below the “Line Color” tool. The “Fill Color” tool determines your buttons internal color.

· Both tools contain the below pull-down menu of color choices. Click on the tool to reveal the palette. Click on the color to select the one that you want to use.

· Click on the “Oval Tool” and then click on the stage, hold down your mouse, and pull out to create a button.

Keyframes:

Look at the timeline. Within the first frame, there is a box with a black dot in it. You’ve created a keyframe. It is a representation of the button that you created on the stage as seen within the timeline. If you click on the keyframe to make it active, you’ll notice that the word on the stage is highlighted to show the relationship between the keyframe and the text.

Symbols:

Next, you’ll transform the text that you placed on the stage into a symbol. A symbol is an object that can be used over and over within your Flash movie. It’s a character that can be called onto the stage from its storage place in the library at any time. · Highlight the keyframe by clicking on it as in the above image. · Go to “Insert” on the menu bar and choose “Convert to Symbol.” Be sure that the “Behavior” is defined as “Button” as in the below image.

· You can see your newly created symbol in the Library window. If your “Library” is not on the desktop, go to “Window” à “Library” on the menu bar and open it.

(Aside: Symbols can be accessed from the library by clicking and dragging them from the Library onto the stage.)

Creating the Hyperlink:

· Right click on the button on the stage and choose “Actions”.

· This will open the “Actions” panel at the bottom of the screen. (Double- Click on the gray area to open the panel if it is not viewable.)

· Making sure that your button is highlighted on the stage, choose “Get URL” from “Actions” menu as shown below.

· Type in the URL that you want the button to link to in the “URL” window (as shown below).

· Double-click on the button symbol on the stage (as shown below) to activate the “Butto n State”.

· You will see each of the possible button states as shown below: “Up”, “Over”, “Down”, and “Hit”.

· Insert a keyframe in each of the possible button states (as shown below) by highlighting the button state and choosing “Insert” à “Keyframe” from the menu bar.

· Next, highlight the “Over” keyframe and change the appearance of the button (as shown below). You can alter the button’s color, shape, size, or any other attribute that you’d like.

· Do the same for each of the button states.

Congratulations! Your button is ready for publishing!

Publishing the Movie:

· Go to the menu bar and choose “File” à “Publish Settings”. · Click on the “HTML” tab and change the settings to match the ones in the screen shot below.

· Click the “Publish” button and then click “OK”.

Flash creates three files when you publish the movie: a Flash file (.fla), a Shockwave file (.swf), and an HTML file (.html).

Saving the Movie:

· Go to the menu bar and choose “File” à “Save As.” · Name your movie and save it to the desktop, and FTP the files into your public_html folder. Be sure to include the editable .fla file and don’t put spaces in the filename.

Congratulations on the creation of your Flash movie!