The aim of the tutorial is to learn how to use actionscript to display the Frame number from the Timeline.

 

Example: Download the Flash file Beg 017a

 

Example of frame number being displayed.

Step One: Document Setup

The number of frames per second is controlled by the default setup. You cannot have one part of a movie playing at 12 frames pre second and another playing at 8 frames per second. To change the default setup:

1. Go to: Modify > Document

2. You will see: Frame rate: 12 fps
   or something similar. The movie above is set at: 12 fps (frames per second).
3. If you wish change the setting. This will slow down or speed up the play rate of your movie.
4. Click: OK

Note: Remember that you can change the frame rate at any time.

5. With the Arrow Tool go to frame 50 in the time line and right click (Mac: Ctrl click) and select: Insert Frame

   
   The time line with 50 frames.

Step Two: Display Text Box

You need a text box on stage so that the number can be displayed.

1. With the text tool selected, drag on stage to create an empty text box.

2. If the Property panel is closed, open it: Window > Properties
3. In the drop down menu select: Dynamic Text

   

4. For Variable name type: displayNumber

   
   Do not get confused with instance name. If you type the name in the wrong box it will not work!

5. In the Property panel select a Font and Font colour.
   
   Tip: As soon as you have finished with the Text tool always go straight back to the Arrow tool . This stops you typing on stage by mistake.

Step Three: ActionScript

1. Right click on frame one and select: Actions

2. The Actions panel go to the View Options button and select: Expert Mode
3. Type the following code:

   onEnterFrame=function(){
       _root.displayNumber=_root._currentframe;
   }

4. Test your movie. To do this go to: Control > Test Movie

   Your movie should display the current frame number.

Note: If you do not want to display the frame number of the main time line but the frame number of a movie clip, give the movie clip an instance name and change the second line of script to:

_root.displayNumber=_root.myInstanceName._currentframe;

Example: Download the Flash file Beg 017b

 

Example of frame number being taken from the Timeline inside a Movie Clip.

 

… Read More of this tutorial at WebWasp.co.uk Tutorials

The aim of the tutorial is to learn how to create a drop down menu that will allow you to create a navigation system. This can be used to move from one part of a Flash movie to another, or to different web pages.

 

Example: Download the Flash file Beg 012b

 

Example of a simple drop-down menu.

Step One: Creating a Button

You will only need one button. Each instance of the button will have different text on top of the same original symbol. You will need your button to be in your Library. To do this:

1. Go to: Insert > New Symbol
2. For Name type: My Button
3. For Behavior select: Button
4. Click: OK
5. With the Rectangle tool draw a: Rectangle
6. If the Property Inspector is closed, open it: Window > Properties
7. With the Selection tool double click on the rectangle.
8. In the Property Inspector select any fill colour you may want: Fill Colour
9. Select any: Stroke colour
10. Select any: Stroke width
11. For W (width) type: 120
12. For H (height) type: 27
13. For X position type: 0
14. For Y position type: 0

    
    Settings in the Property Inspector for the rectangle in the Up frame.

15. In the Timeline right click (Mac: Ctrl click) in the Over frame and select: Insert keyframe
16. With the Selection tool double click on the rectangle.
17. In the Property Inspector select a new: Fill colour

    
    The Over frame.
    

Step Two: Creating a Symbol to Contain the Menu - Menu Button - Frame 1

It is best to have the menu inside a symbol, as it makes the menu much more flexible. Then you can have the menu on stage and move from frame to frame within the movie and the menu stays intact. You can also copy and paste the menu to a completely different movie and reuse it. If you build the menu on the main stage you have to re-build it for every new frame that you wish to use it in.

1. Go to: Insert > New Symbol
2. Type the name: Menu
3. Click: OK
4. For behavior select: Movie Clip
5. If your Library is not open, open it: Window > Library
6. Drag onto the stage: My button
7. In Property Inspector position the button at X: 0
8. In Property Inspector position the button at Y: 0
9. With the text tool , type on top of My Button: Menu
10. Open the Actions panel (Window > Actions) and attach the following actionscript to : My Button

    on (release) {
        gotoAndStop(2);
    }

    Note: Make sure you select gotoAndStop(2) notgotoAndPlay(2)

11. Attach the following actionscript to: frame 1

    stop();

    
    Frame 1 of the Menu symbol

Step Three: The Menu - Frame 2

1. Go to frame 2 and right click and select: Insert Keyframe
2. Attach the following actionscript to the Menu button in frame 2:

   on (release) {
       gotoAndStop(1);
   }

   Note: This button will now take you back to frame 1, the button in frame 1 takes you forward to frame 2.

3. Double click on the word Menu and type: Close Menu
4. When you have finished typing return to the Selection tool:

   
   Close Menu Button in Frame 2.

5. Drag out three (or more) buttons from the Library and place them in a column next to the menu button.
6. Open the Align panel: Window > Design Panels > Align (ctrl+k)
7. Select all three buttons (use shift click to select multiple objects).
8. Deselect the Align to stage button (if it is selected):
9. Use the Align panel to get the distance between the buttons the same:
10. Use the Align panel to get the buttons in a straight line:
11. For X position type: 130
12. For Y position type: 0

    
    The three new buttons correctly aligned.

13. With the Text tool , type on top of the buttons: Home, Next Page, webwasp

    
    Your stage should look similar to this.

14. Place the following actions onto the: Home Button

    on (release) {
        _root.gotoAndStop(10);
    }

    Note: You need to type _root so that the button refers back to the main stage and not to frame 10 in the menu Symbol.

15. Place the following actions onto the: Next Page Button

    on (release) {
        _root.gotoAndStop(20);
    }

    Note: Takes you to frame 20 of the main stage.

16. Place the following actions onto the: webwasp Button

    on (release) {
        getURL(“http://www.webwasp.co.uk”);
    }

    Note: Takes you to a new web page.

Step Four: The Main Stage

1. If your Edit Bar is closed, open it: Window > Tool Bars > Edit Bar
2. Click on the Scene 1 button:

Note: This will take you back to the main stage. At this point your main stage should still be empty.

3. Attach the following actionscript to: frame 1

       stop();

4. In the timeline right click on frame 10 and select: Insert Keyframe
5. Type on stage Home and place any other content you may wish to have.
6. Go to frame 20 in the time line, right click and select: Insert Keyframe
7. Remove the word Home and replace it with something else (such as Frame 20). If you do not do this, you cannot see the difference between frame 10 and 20.
8. In the Timeline click on the Insert New Layer button:
9. In the Timeline click in frame 1 of this new layer. Select: Frame 1
10. If your Library is closed, open it: Window > Library
11. Drag onto stage the symbol: Menu

    Hey presto you”ve finished your movie! So now it”s time to test.

12. Go to: Control > Test Movie

Step Five: Auto Retract the Menu - Layer 2

This is an section is an added feature. If you wish you can get the menu to auto-retract:

Example: Download the Flash file Beg 012c

 

This Menu has an auto retract. Click on Menu then move the mouse to the right of the movie. The menu should close automatically.

1. Right click on the Menu button and select: Edit in Place

   
   You can see the Menu tab at the top in the Edit Bar.

2. Double click on Layer 1 and re-name it to: Menu
3. In the timeline add a new Layer by clicking on the Insert Layer button:
4. Re-name this new Layer to: Retract
5. Drag the Retract Layer so that it is under the Menu Layer.
6. Right click on frame 2 of the Retract Layer and select: Insert Blank Keyframe
7. With the Brush tool draw a thick line right around the buttons. Make sure the brush marks do not touch the buttons or come too close to them.

   
   Gray brush stroke going all the way around the buttons.

• Make sure the line is not too close to the buttons.
• Make sure the line does not touch the buttons.
8. Continue to brush in the area between the line and the edge of stage.

   
   Brush marks go right up to the edge of stage.

9. Return to the Selection tool:
10. Right click the brush mark and select: Convert to Symbol
11. For Name type: Retract Button
12. For Behavior select: Button
13. Click: OK
14. Right click on this new Retract button and select: Edit in Place

    Note: This will enable you to edit the new button.

15. In the Timeline right click the Hit frame and select: Insert Keyframe

    Note: This makes a copy of the brush strokes in the hit area.

    
    The hit area is now ready.

16. Click on the Keyframe (black dot) in the Up frame.
17. This should not only move you to the Up frame but select the brush stoke on stage. If it is not selected click on it to select it.
18. Delete the brush stroke from this frame by going to your keyboard and pressing: Delete

    
    The Up frame is now empty.

19. We have now finished editing the button. Click on the at the top to return to editing the Menu.

    
    The brush mark should now be a aqua blue.

    Note: The aqua blue is transparent in the Movie

20. Attach the following actionscript to Retract button:

        on (rollOver){
            gotoAndStop(1);
        }

    What this does is on roll-over go back to frame 1. This means that the movie will move automatically to frame 1 and the menu is closed in frame 1. Try it

21. Go to: Control > Test Movie

Alternative

Example: Download the Flash file Beg 012d

This has a tweened drop down that is masked.

The menu above is identical to the previous example except that the drop down section opens with a tween. The first part of the tween is masked so that the menu appears to come out of nowhere.

Cross Ref: To learn how to create a Tween see beginners tutorial: 02 Tweening

Cross Ref: To learn how to create a Mask see beginners tutorial: 06 Masks

Other Flash Menus Systems on this site

Sliding Menu: An Intermediate level tutorial on how to build a very flexible menu system based on actionscript. This is the menu system used on the webwasp home page. I used this as it is allows you to pull any menu, or several menus, on and off stage at once. You can also use the same actionscript to move other objects around the stage.

Swinging Menu: An Intermediate level tutorial for a menu that bounces on and off stage and looks great. Built with actionscript.

Scrolling Menus: An Intermediate level tutorial for a menu that scrolls.

 

… Read More of this tutorial at WebWasp.co.uk Tutorials