FLASH Buttons - Part I

You might have seen ‘Mouse Hover Buttons’ built in JavaScript while surfing the web. What are Mouse Hover Buttons? Mouse Hover Buttons are used to create interactivity in web pages. They have different images at different mouse positions. For example, mostly these buttons have three images displayed on mouse Up, mouse Over and mouse Down positions. What is the difference between Hyperlink and a Button? The function of both is the same. The button is nothing but a link. We use buttons to give interactivity to links. It’s enough; let’s learn how we can create Mouse Hover Button in Flash.

Buttons

Mouse Hover Buttons built in JavaScript need complex coding but in Flash we can do that in just a simple and quickest way. The button images displayed at different mouse positions are called states of the button. The states are Up, Over, Down and Hit. Up state occurs when mouse is away from the button. Over state occurs when mouse is on the button. Down state occurs when button is clicked. Hit state defines the area of the button that is sensitive to the mouse. Above is a button shown created using Flash. Roll your mouse over this button to see its different states. Remember! You must have a Flash 5 plug-in installed in your browser to view this button. Recall that in the previous article ‘Symbols & Instances’, three types of symbols are discussed, i.e. Movie Clip, Button and Graphic. It means button is a symbol. Follow steps one by one.

STEP 1:

Click Insert > New Symbol or press Ctrl+F8 keys combination. In the Name: type Test. Choose Button from the Behavior and click OK.

On clicking OK, the Flash will go in the button-editing mode. Now look at the timeline, quite different from the movie timeline. Buttons have a special type of timeline but the logic behind it is the same. Here you must recall all concepts that have been taught in the first two articles. Here one layer is shown with four frames marked as Up, Over, Down and Hit. The Playhead is now on the Up frame.

STEP 2:

Draw an image of Up state using different tools like shown in the figure.

STEP 3:

Select the second frame labeled as Over in the Timeline and choose Insert > Keyframe or press F6. What is the function of Keyframe? Flash copies the previous Up state image into the new frame. First click outside the button to deselect it and then use tools to change the Over state image as shown in the above figure.

Go To Page: 1 2

Articles in this Topic    Discussions in this Topic