Week 7 Topics

Chapter 9 - Buttons

In web pages, it is relatively common for a link to change appearance when the user mouses over the link and change appearance again when the user clicks on the link. The former is called a rollover, and both provide an interactive, responsive feel to the web page. Where the links are closely spaced together, such rollovers also tell the user which link they are over. The interactive menus on DVDs (Play, Scenes, Special Features, etc.) are another use of rollovers and appearance-changing clicks.

Button symbols provide this capability in Flash. Just like graphic symbols, buttons symbols have their own timeline. In a Button symbol, the timeline has four frames: Up (when the mouse is not over the button), Over (when the mouse is over the button), Down (when the button is clicked), and Hit. The first three determine the appearance of the button during various kinds of mouse interactions whereas the last determines the clickable area of the button.

Exercise 1 - Rollover Buttons (using rollOverButton.fla) - A rollover button has different content in the Up frame than in the Over frame.

  1. Open the file.Choose Insert>New Symbol to create a new button symbol. Choose button as the type and name the button btnRollol. One advantage of using a uniform naming convention where there the name of the button begins with an abbreviation for the type of the button is that you can then sort the symbols in the library and have the button symbols grouped together.
  2. The button timeline has four frames - these frames do not automatically play as the main Timeline does or as the timeline for a graphic symbol does. Instead, the button remains in the first frame until the cursor comes in contact with the button.
  3. Choose View>Grid>Show Grid. The grid will not be visible in the movie. Select the Line tool and set the Stroke color to black and draw a triangle where the right point of the triangle is at the center of the Stage. You may want to change the view to 200% to draw the triangle.
  4. Select the Paint Bucket tool and set the Fill Color to the fourth color down in the first column (#999999). Click inside the triangle to fill it.
  5. Select the Arrow tool, move the cursor over one of the line segments of the triangle, and double click to select all of them. Press delete to delete all of them.
  6. Press F6 to add a keyframe, which copies the content over into the Over frame. Select the Paint Bucket tool again, and this time fill it with white.
  7. Press F6 to add a keyframe, and this time use the same gray fill color that you started with. Move the Playhead to see all the states of the button.
  8. Press F6 to add a keyframe to the Hit section of the button. The button is now complete, with the clickable area being the entire triangle.
  9. Click on Scene 1 of the Main Timeline and then press F11 to open the library. You can test the button by pressing the Play button at the top right of the library.
  10. Hide the grid and drag an instance of the button onto the stage. Choose Control>Enable Simple Buttons. This allows you to test the button right on the Stage. Test the button and then turn off the feature. Choose Control>Test Movie and test the button here. Save the file.

Exercise 2 - Rollover Buttons with Text

  1. Save the previous file as textButton.fla. In the library, double click on the Button symbols icon to open the button's Timeline. Rename the layer to triangle and lock it.
  2. Click the Insert Layer button to add a new layer and rename it text. In the Toolbox, select the Text tool and choose Verdana, 16 pt., with white text. Type BACKGROUND in capital letters.
  3. Press F6 to add a keyframe to the over state of the button. Select the text block, click on the Text Color box in the Property Inspector and choose the dark gray, three from the top. Choose Control>Test Movie. Notice that the Hit state for the text is uncertain, because it depends whether you are over the solid part of a letter.
  4. To change the Hit state, move the Playhead to the Hit frame and drag down to select both layers. Right click and choose Remove Frames to remove both keyframes. Lock the text layer and click the Insert Layer button, drag the new layer below the triangle layer, and name it hit. Click on the hit frame on the hit layer and press F7 to insert a blank keyframe.
  5. Unlock all the layers and select the Onion Skin button so that you will be able to see the content of the other states of the button. Select the Rectangle tool and and draw a rectangle that covers both the triangle and the text. Deselect the onion skin button. You have now defined a new hit area; it doesn't matter what color it is. Click on Scene 1 in the Information bar. Note: (a) no frame or keyframe in the hit state means that the currently displayed frame will work as the hit state. (b) frame in the hit state mans that the previous frame will be used as the hit state, and (c) blank keyframe means no rollover.
  6. Choose Control>Enable Simple Buttons to test the button on the stage. Test the button and then turn this feature off. Save and close the file.

Exercise 3 - Duplicating and Aligning Buttons (using duplicateAlign.fla)

  1. Open the file and press F11 to open the Library. Choose File>Open As Library and select the file from the previous exercise. This opens only the Library from this file.
  2. Insert a new layer and name it buttons. Drag an instance of the btnRollo onto the Stage, and place it over the gray box onthe left hand side of the Stage. This places this symbol in the library for this file as well. In this library, right-click on the button and choose Duplicate from the drop down menu, and name it btnSafety and double click in the Library to open it.
  3. Lock the triangle and hit layers. In the text layer, click on Frame 1 and double click on the text block and then type SAFETY to replace the existing text. Repeat this for frame 2. Click on Scene 1
  4. Drag an instance of the new button onto the Stage just below the other button. Control>Enable Simple Buttons to test it and then disable this feature. Create three more buttons in this manner- btnLearning, btnGear, and btnWhatsNew with the corresponding text inside the button. Click on Scene 1 and click the collapse arrow (immediately to the left of the word Library) and then drag down on the right corner of the library so you can see all the buttons.
  5. You can close the other library by clicking on the dots in the upper left hand corner to undock the library and then click the x in the upper right hand corner to close it.
  6. Press Ctrl+A to select all five buttons on the Stage. Open the align panel by Window>Align and make usre the "To Stage" button isn't pressed. Select Align Left Edge and Distribute Vertical Center to make all the buttons aligned left and be spaced evenly vertically. Using the right arrow, reposition all the buttons so that the left hand side of each button is flush with the grey background. Chose Control>Test Movie and save the file.

Exercise 4 - Adding Sound to Buttons (using soundz.fla)

  1. With the file from the previous exercise, choose File>Open as Library and select soundz.fla. In the other library, double click the btnGear to open it. Click the Insert Layer button to add a new layer and name it sound. Make sure it is the top most layer.
  2. Press F7 in the over frame to add a blank keyframe. In the soundz library, select the miko2 sound file and preview it by clicking the Play button in the Library Preview window.
  3. Collape the duplicateAlign Library window. With the over frame selected in the sound layer, drag an instance of miko2 onto the Stage. Click on Scene 1 to return to the main Timeline.
  4. Choose Control>Enable Simple Buttons. When you mouseover the btnGear button, you should hear the sound.
  5. In the Library panel, double click on btnWhatsNew. Lock the text layer and insert a new layer and call it sound. Press F7 to add a blank keyframe in the Down frame. With the Down frame selected, drag an instance of miko4 onto the Stage. Choose Control>Test Movie to test your buttons. Save and close the file.

Exercise 5 - Invisible Buttons (using invisButtonFinal.fla and invisible.fla) - You can use the hit state to create invisible buttons where there is no visible display of the button till the user passes the mouseover this area.

  1. Open the final version of the file and preview it by choosing Control>Test Movie. Move your cursor over the lodges and notice that descriptions appear. Close the file and open the other file.
  2. Choose Control>Test Movie to preview the buttons. Open the Library (F11) and double click the alpine button's icon to open it and scrub the Playhead to preview it.
  3. Shift click or drag through the first two frames of the text and shape layers and drag them one frame to the right. This creates an empty up state which makes the instance of the button invisible until the mouse moves over it. In the Information bar, click on Scene 1 to return to the main Timeline. Flash displays the shape of the hit frame in a transparent blue color as visual feedback for where the button is located. [If one had used a shape with a transparent fill for the Up state, it would work but wouldn't show up in the work area.
  4. Choose Control>Test Movie to test the invisible button. Repeat the steps for the other two buttons, preview the movie and save and close the file.

Revised: February 27, 2006. Comments to William Pegram, wpegram@nvcc.edu