For this tutorial we'll just duplicate the above movie.
It goes without saying but to be thorough... open Flash 5. Create a new movie 200 x 200, 15fps. We'll start by creating most of the symbols necessary to complete the project. To apply this menu technique in a real project you may have to go about creating pieces as you go.
- Create a new Button symbol and name it "Center". (This will serve to activate the menu.)
- Create two layers, "Dot" & "Text" with the "Dot" layer on top.
- In the "Up" frame of the "Dot" layer, create a circle 20 x 20, filled and stroked with black and center it by selecting the center square in the right hand section of the Info panel.
- On the same layer with the single keyframe in the "Up" frame selected,
click in the "Hit" FRAME (not the label) and press
F5. You should now see a continuous grey bar from the "Up" frame to the "Hit" frame.
- Again, on the same layer in the "Over" frame create a new Keyframe by pressing F6. Fill the circle with a different color. This will allow for a color change to reinforce the fact that the button is actually active when rolling over it with the cursor.
- In the "Over" frame of the "Text" layer create a new keyframe by selecting that frame and pressing F6.
- In the same frame and layer place a text label on screen to appear centered and directly under the dot.
- With the same frame selected click in the next frame over and press F5. Your text will now appear during the "Over" and "Down" states of your button. Do not allow the text to appear in the Hit frame of your button unless you specifically want the text to act as an activation point for your button. Use of text in this manner usually results in a strobe effect. If you want the text to serve as an activation point for your button create a box the size of your text block and place the box in the Hit frame.
- In the Library palette duplicate the "Center" Button symbol 4 times and rename each one differently. (I used "Circle 1", "Circle 2", etc.)
- In each new Button symbol change the circle shape fill color in the "Up" and "Over" frames as well as changing the label name in on the "Text" layer in the "Over" and "Down" frames. (I made each fill in the "Up" frame of each symbol different to make it bluntly obvious which button I was dealing with.)
- Go back to the "Center" Button symbol and open the symbol for editing.
- Double-click the circle graphic in the "Up" frame. (Double-clicking ensures you've selected the fill and outline of a shape.)
- Select "Convert to Symbol" from the "Insert" menu or press F8. You should see a new Graphic symbol appear in the Library. Name it "Dot" and ensure it's centered by again selecting the center square in the right hand portion of the Info panel.
- Create a new Graphic symbol in the Library and name it "Background". Open the symbol for editing.
- Create a circle. Select and delete the outline. Using the "Info" panel, select the shape, resize it to 150 x 150 and center it. Fill the circle with a dark blue. Close the symbol and return to "Scene 1".
- Again, create a new Graphic symbol in the Library and name it "Mask". Open the symbol for editing. (We're going to make the "net" that catches mouse roll over/roll out events which in turn will deactivate the menu.) (Follow these next steps very carefully!)
- Create a square shape. Select and delete the outline. Again, using the "Object" palette, select the shape and resize it to match the window size of your movie (in this case it's 200 x 200). With the center point option enabled in the Info panel as before, position the shape centered on the "X" axis and slightly below on the "Y" axis. (Mine is set to X:-100, Y:-85.) Fill the shape with a neutral color like gray.
- Open the symbol "Background", select the circle shape and copy it.
- Open the symbol "Mask" and "Paste in Place" the circle shape over the top of the gray square shape.
- With the symbol "Mask" still open, deselect the circle shape by clicking in the area around the two shapes now on screen.
- Reselect the circle shape and delete it. We've now punched an exact hole through our "net". I'll explain the madness later.
|» Level Intermediate|
Rating: 8 Votes: 129
|Jason Lampitt is an Interactive Developer for a major media development firm in Englewood, Colorado. He has a background in fine art as well as graphic design and has been developing multimedia titles for the past 6 years. Jason has a passion for bringing design to life through multimedia and helping others to understand the sometimes complex and confusing world of interactive development. In his spare time Jason is an active outdoorsman, mountain biker and family man.|
|Download the files used in this tutorial.|
|Download (42 kb)|
|More help? Search our boards for quick answers!|