Creating Buttons with Flash

Objectives

Types of symbol: graphics, buttons and movie clips

During the last exercise to create keyframe text animation you converted each piece of text into a symbol. Then you accepted the default type of graphic.But there are two other types: button and movie clip.

A button is a special type of construction that allows you to specify different images for the normal, rollover and down states of the button as well as defining how large the hot spot area will be.

A movie clip is a self contained looping animation that can be added to the main timeline. (imagine a loop of a walking figure or a bird flapping its wings - you could animate this looping movie clip by getting it to move across your main movie stage by creating a couple of keyframes)

The parts of a button

When you create a button-symbol you are presented with a mini- timeline with just four ready-named frames. These represent the up, over and down states of the button and also the hit (hotspot) area. These states are created just as you create animation on the main timeline: if you want something to be different to the previous frame, you create a keyframe. If you want it to be the same as the previous frame, insert a frame.

Creating a button

Choose Insert/New Symbol and select button. Call it "simple button ".

Import the image wom1.png. Don't choose to load it as part of a sequence at this stage. The image appears in the 'Up' frame of the button. As this is a bitmap (examine its size in the library palette)we can probably save some space by converting to vectors - do Modify/Trace Bitmap.

Note that it is possible to extract even further savings by optimising the shapes with Modify/Optimize and see how much space you can save while retaining acceptable image definition.

 

 

 

Now make the "over" (rollover) state differ from the up-state by creating a blank keyframe in the over cell. (click in the over-cell and choose Insert/Blank Keyframe or press F7)

Import the image Wom2.png and again don't accept it as part of a sequence. Trace bitmap as before to convert it to vectors. To position the second image correctly relative to the first, switch on the onion skinning feature. This shows a feint view of the previous frame to help you align the images. Reposition the 'over' image so that it lines up correctly.

 

Create the down state by adding a keyframe in the down cell (with F7) and importing the image wom3.png. Convert to vectors (trace bitmap) and use the onion skin feature to align this image with the others.

 

Complete the button by defining the size of the hotspot area. Add a blank keyframe in the hit frame and use the rectangle tool to draw a filled rectangle. This defines the active hotspot area for the button.

If you don't define a hit area, your button will never be activated!

 

Testing the button

 

 

Return to the main timeline by pressing the Scene1 tab.

All symbols are stored in the library. Open the library with Window/library or Control-L. Note that the library contains a thumbnail of each symbol that you have created. Drag the simple_button symbol from the library and drop it onto your main timeline.

Test the button by selecting Control/Test Movie.

Note that as you move your cursor over the button it changes and when you click it it changes again.

Try modifying your button by changing the colour of the image in each frame of the button. Edit the simple_button symbol and use the bucket fill tool to change the colour of each frame. Try adding an outline to each image in the button - use the ink bottle tool in conjunction with the stroke panel to set the outline width and colour.

Creating a movie clip

A movie clip is like a self contained mini-timeline that can contain any kind of animation. It can then be placed onto the main timeline or into a button state. We will create a smooth waving figure animation and add this to the over state of the simple button.

 

Create a new movie clip symbol with insert/New Symbol and choose Movie Clip. Call it "waving". Import the file Wom1.png. This is part of a numbered sequence - accept this this time.This should fill up four frames of the movie clip with images from an animation. (you could draw the images by hand but this method is quicker!). Trace bitmap for each image and drag a copy of your waving movie clip symbol onto the main timeline. It should look like this->

 

Adding the movie clip to a button

Edit the simple_button movie clip by double-clicking its entry in the library. (open the library with Window/Library or Control-L)

Select the "over" frame and delete the image that is there. Drag the waving movie clip symbol (the movie clip you just created) from the library and onto the button stage area. Use the onion skin feature to align the parts.

Test the movie again (control/Test movie) and note that character animates when you roll over the button.

 

Note that movie clip continues to play as long as the cursor is over the button. If you only want the clip to play once then you can add a stop action to the movie clip.

Open waving movie clip symbol, add a layer and call it actions. Add a blank keyframe in the last frame and open the actions window.

Select the stop action. The animation now only plays once and stops when you rollover the button.
Note that you can use multiple instances of the same button symbol without adding much to the file size. Each instance can be varied in a number of ways, including a tint colour. Select the Effect tab and set tint and choose a tint colour from the colour picker.

Adding text to the button

One way to add text to the buttons would be to add it into the original button symbol. Unfortunately this would give us the same text in each button - not very useful.

We could duplicate the button a couple of times and edit each copy, but this would cause the same images to be repeated wasting disk space. To prevent this we can go back to the button symbol and change the images in the up and down frames to be symbols. (select them and Insert/convert to symbol or F8). The button is now simply a shell that refers to other symbols but doesn't actually contain them directly. Duplicating the button now doesn't add anything significant to the file size.

Create a new graphic symbol and add some text for England. Center it, make a copy and break apart. Create a new movie clip symbol and add a couple of keyframes 5 frames apart. Add the England symbol and make it fade in.

Add the England graphic symbol into the Down state and use the onion skin feature to align it. You now have a working England button which has a text caption that fades up on rollover.

Duplicating the button

Our England button now contains an England-specific movie clip of the text fade in the over frame, and an England specific still graphic symbol of the text in the down frame. To create the alternative country versions we need to first create a duplicate of the simple England graphic symbol and alter the wording and break it apart. Then we duplicate the fading text movie clip and substitute our new text symbol. Finally we duplicate the entire England button and substitute our new movie clip and still graphic!

Notice that the file size for the 3-button version is nearly as small as the 1-button version. (4kb in this case)

 

Adding sound to the button

You can add a sound effect to one of the frames of each button. For example, to add a sound effect when a button is clicked you add the sound to the down frame:

Import a sound into Flash using File/Import-it appears in the library.

Select the keyframe in the down frame of the chosen button and open the sound panel.

Choose the sound from the pull down list and set Start in the sync box.

 

Getting the buttons to do something when clicked

The button panel will eventually be built into an html frameset as shown left. When clicked each button will plot an html page in the right frame called mainframe.

To do this, select one of the buttons on the main timeline. Open the actions window and

In the actions panel, click the plus button to add a new action. Select get URL.

 

In the URL panel, type the name of the document that you will link to: call it routers.htm.

In the window panel, (this is the same as target in html) type mainframe.

 

  Test your movie with Control/Test Movie. This creates a swf file which can be imported into a Dreamweaver page.

Integrating the buttons into html frames

  In Dreamweaver set up a new project in your folder. Create a new document and establish the frameset. Save the frameset, the menu page and the main page. Create pages for england.htm,australia.htm and indonesia.htm. To add your swf to the menu document in Dreamweaver select Insert/Media/Flash.

Getting the buttons to animate on

 

 

Arrange for each button to be on a layer of its own:

  • Create new layers by choosing insert/layer.
  • Name the layers appropriately.
  • Transfer the buttons from the original layer to the correct one by selecting and cutting from the original layer selecting the new destination layer
  • then choosing edit/paste in place. Now animate each button on by adding a second keyframe on each layer (F6) and nudging the first keyframe off screen or scaling it to 10%.

Add tweening to each layer. (right-click mid way betwen the two keyframes and select create motion tween)

Adjust the timing by offsetting the start and end keys for each layer in time. Add additional frames to each layer as necessary (f5) to ensure that the buttons all stay on screen after they have finished animating

To stop the animation from repeating add a new layer, call it actions and insert a keyframe at the end of the sequence. Add a stop action in the actions panel.