Written by: Metrov [Fine Art Web Design]
Time: Less than an hour
Difficulty Level: Beginner
Requirements: Flash 5 [Will also work in F4, but the commands and scripts may be slightly different.]
Assumed Knowledge: Basic understanding of Flash procedures.

Download FLA here (zip format)

1) Begin a new Flash movie. Create a new Symbol [Ctrl + F8], Name it 'Circle' and give it the behavior of 'Graphic'. Flash will bring you to a new editing area.

2) Choose your Stroke color, Stroke width and Fill color.

3) Select the 'Oval Tool', then, holding down the Shift key, draw a perfect circle about the size of the one above.

4) When you've got your circle just the way you want it, highlight the whole thing. [Either encompass it with your pointer, or simply select the keyframe it resides in.] Then hit F8, name the symbol 'Circle Inner', and give it the behavior of 'Graphic'. If you ever need to change the colors or other attributes of your circle, you can do it in Circle Inner. But for now, leave it be.

5) Using the 'align' tool, select your Circle symbol, and position it in the center of the stage. [I always make a habit of 'centering' almost everything. It's very helpful down the road when you start compiling graphical elements. You always know their exact relationship to each other when everything is centered.]

6) Name the first layer, 'Circle', then create a new layer, and name it 'Buttons'. It's a good idea to always name your layers. It will help later on when you need to quickly locate elements of your MC.

7) With the Buttons layer selected, create a smaller circle in a different color anywhere in the work area. Highlight it, hit F8, name it Button 1, and give it the behavior of 'Button'.

8) The button you just made will appear in your library. Double-Click to open the button in its own editing area, and create a different color for the Over state. Also make sure to include a 'hit' area, then save.

9) Returning to the library, Right Click/Duplicate the Button Symbol, naming the second button 'Button 2'. Repeat this procedure for as many buttons as you want.

10) After you've created duplicates of your original button, they will all have consistant colors for the Up and Over states. You can then go back and create different text for each button, in this case 1, 2, 3, 4.

11) Now Double-Click the Circle symbol in the library to return to the Circle symbol editing area. Highlight the Buttons layer, drag your buttons from the library, and position them where you want them on the Circle. [Again, you can use the 'align' tool to center each button, then use the 'arrow' keys to move them the same number of spaces in each direction. This way, you can easily position them rather precisely. You can also use the 'Scale and Rotate' panel to turn them to the proper angle.]

12) Once you've got all your buttons in place, Right Click the first button, and select Actions, to open the Actions editor. Create the following code, beginning by Double-Clicking 'On Mouse Event', the last choice in the Basic Actions section:

on (rollOver) {
        stop ();
}
on (rollOut) {
        play ();
}
on (release) {
        tellTarget ("_root.MenuMovie") {
                gotoAndStop (2);
        }
}

13) Give all the buttons the same 'rollOver' and 'rollOut' actions. But with each subsequent button, create the respective 'release' action of gotoAndStop (3), (4), (5). I will explain the actions at the end of the tutorial.

14) Next create a new symbol [Ctrl + F8], name it 'Circle Movie' and give it the behavior of 'Movie Clip'.

15) In the Circle Movie editing area, select the first keyframe in the first layer, then drag the Circle Symbol from your library onto the stage. Position in the center using the 'align' tool. Then add 100 frames to that layer.

16) Create a 'motion tween' in the same layer, then add a keyframe in the last frame.

17) Now select the very first keyframe, and open the 'Frame' editing panel. Choose 'Rotate', CCW, (1) time. Now play the tween using the 'controller, and the circle should make one full rotation by the time the play head reaches the end of the timeline. If you want the circle to turn slower, add more frames. But keep in mind, longer tweens add greatly to your .swf file size.

18) Now return to the Main Timeline, and drag the Circle Movie onto the stage, placing it in the first keyframe of the first layer. Name the layer, 'Circle Movie'.

19) Add a 2nd layer above the first, and name it Menu Movie. Select the layer, then, hitting Ctrl + F8, create a new MC, naming it, you guessed, it 'Menu Movie'.

20) In the Menu Movie editing area, create five adjacent keyframes in the first layer. Name the layer 'text'.

21) Leave the first keyframe blank, then in each successive keyframe, type a different word, and center it. In this case we use, 'I', 'Love', 'My', 'Flash'. Don't forget to 'save'. In fact, save often. After a certain number of computer crashes, I have become obsessive about saving, and usually save after almost every single action I make.

22) Now, create a new layer above the first one, and name the layer 'actions'. Create five successive keyframes directly above the first ones, and give each one a 'stop' action.



23) Return to the main stage. Select the Menu Movie layer, and drag the Menu Movie onto the stage. Center it, and give it the 'instance' name of 'MenuMovie' (no spacing). Know how to do it? Select the keyframe that holds the Menu Movie, then open the 'Instance' panel. It should say 'Menu Movie', then below that in the 'Behavior' window: Movie Clip, then in the window below that where it says 'Name:', type in 'MenuMovie'. SAVE.

24) Now go to 'Control/Test Movie' and have the time of your life! OR, if it doesn't work, take a deep breath and retrace your steps. OR, grumble nasty things about me for leaving out a step, but hopefully I haven't.

To explain the actions.

1 -- Rollover/Stop, stops the MC, 'Circle Movie' from turning.
2 -- RollOut/Play, lets it rotate again.
3 -- Release/tellTarget _root.MenuMovie tells the 'instance' 'MenuMovie' on the Main Stage [_root] to gotoAndStop on the respective frame number.

Your Circle Movie can be any MC with a looping motion, up, down, sideways, or as in this case, around. Your Menu Movie can be much more complex and elaborate than the one in this tutorial, so be creative, and try to come up with something that no one's ever done before.

email Metrov