• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 23. Learning How to Learn Flash > Task: Build “Circle, Line, Square”

Task: Build “Circle, Line, Square”

Draw a large box, remove its fill, and then select it and choose Insert, Convert to Symbol. Name the symbol “Content” and make sure it has Movie Clip behavior.

Double-click the instance onstage (to edit the contents).

Inside the Content Movie Clip, at frame 4 select Insert, Frame (press F5). Then create a new layer called “Graphics”. Insert a keyframe (press F6) in frame 2 of Graphics and draw a circle. Insert a blank keyframe (press F7) in frame 3 of Graphics and draw a line. Insert a blank keyframe (press F7) in frame 4 of Graphics and draw a square. All three shapes should reside within the confines of the other layer's box. The result should look like Figure 23.7.

Figure 23.7. The Movie Clip you build has three frames with the three shapes.

In the first frame of the Content Movie Clip, insert a Stop Action (it doesn't matter which layer).

Return to the main scene and select the clip. Using the Properties panel, give it an instance name of “theContent”.

Draw a rectangle. Select the rectangle and select Insert, Convert to Symbol. Call it “MyButton” and make sure it's a button.

Copy and paste two more instances of MyButton. You can create text blocks to cover each button with the labels “Circle”, “Line”, and “Square”, respectively.

Select the button for “Circle”, open the Actions panel, and make sure it's set to Normal mode. While the button's still selected, insert an evaluate Action (plus button, Actions, Miscellaneous Actions) with the following expression: theContent.gotoAndStop(2). Make sure the uppercase/lowercase matches what is shown.

Test the movie. It should work for the Circle button only. Now attach an evaluate Action on the Line button that says theContent.gotoAndStop(3). The Square button should say theContent.gotoAndStop(4). Naturally, because these are buttons, the script has to be contained within an “on” event. However, this is created automatically when the Actions panel is in Normal mode.

You can enhance the usability of this design by drawing a highlight (such as a non-filled circle) around the currently selected button (see Figure 23.8). Although there are many solutions to this, one way would be to just draw the highlight in frames 2, 3, and 4 of the Content clip.

Figure 23.8. Circle, Line, Square is a classic exercise to keep revisiting. Here, a highlight shows the current selection.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint