First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: JLampitt | Website: http://www.geocities.com/jlampitt

Section 1 Layer:

Pay particular attention to the instructions for this layer. From it you can build the other three button layers and their motion guide layers that you will need to complete this tutorial.

  1. Create a new layer below the previous and name it "Section 1".
  2. Place a Blank Keyframe at Frames 3 and 22.
  3. Select Frame 3 and place the Button symbol "Circle 1" (or whatever you've named your first button) in that Keyframe. In this case we will not center the button. It needs to be off to the side. However, with the center point option enabled in the Info panel, place the symbol instance at X:62.5, Y:0.
  4. Open the Instance panel and ensure that the Behavior is set to "Button" and Options is set to "Track as Menu Item".
  5. Place a Keyframe (F6) at Frames 6, 9, 12, 15, 18 and 21.
  6. Select Frame 3. Open "Effect" panel (a tab in the Instance panel), choose the "Alpha" effect from the drop down menu and give the setting a value of 0.
  7. Select Frame 6. With the center point option enabled in the Info panel, Position the symbol at X:0, Y:62.5.
  8. Select Frame 9. With the center point option enabled in the Info panel, Position the symbol at X:-62.5, Y:0.
  9. Select Frame 12. With the center point option enabled in the Info panel, Position the symbol at X:0, Y-62.5
  10. Select Frame 21. Open the Effect panel, choose the "Alpha" effect and give it a value of 0.
  11. Tween frames 3 - 15 and Frames 18 - 21. The result for Frames 3 - 15 should be the symbol moving in a clockwise diamond shaped fashion returning to it's point of origin and it should fade up as it travels between the first two Keyframes. For Frames 18 - 21 the symbol should just fade out. This looks good but let's give it a little more polished look by adding a motion guide.
  12. Select the layer and add a motion guide by going to the "Insert" menu (Ctrl+click on Mac and PC).
  13. On the new layer insert a Blank Keyframe (F7) at Frames 3 and 16.
  14. Select Frame 3 and create a circular path. (You can do this by creating a circle and deleting it's fill.)
  15. With the "Use Center Point" option checked, center the path and give it a dimension of 125 x 125.
  16. Click and drag the playback head over frames 3 - 15. Your button should now follow a circular path. To make the motion path invisible just turn that layers' visibility off.
  17. Now, lets set up the button so it will actually navigate! Select the object in Frame 15 of layer "Section 1" (select the item on the stage not in the timeline) and assign the following.
    on (release) {

    playClip(_level0.navitation0); references the custom function we set up in frame one of the layer "Frame Actions & Labels". By placing the function in frame one we can access that function from anywhere in this timeline or by referencing this timeline from others within a project. The argument (stuff in parenthesis) tells Flash which timeline to play. In this case that timeline is "Navigation". Remember, we stopped playing this timeline at Frame 16 when the Stop action was issued from the "Frame Actions & Labels" layer.

    _level0.gotoAndPlay("Nav1"); tells the referenced timeline (in this case the top level timeline "_level0") to jump to a specified label. We haven't created this label or the timeline it exists in yet so don't think you've missed something.

You can follow these same steps for the remaining buttons remembering that your other buttons don't need to make the trip all the way around thus you won't have as many Keyframes. Don't forget to apply the same "on (release)" Action to the Button symbol instance in the Frame 15 Keyframe for each button. You'll only need to change the label in the "_level0.gotoAndPlay" command line.

When finished your timeline should look like this...

There are a couple of things to mention. Notice you can't see that an Action has been assigned to the Button symbols in Frame 15 (Hint: look at the keyframe for layers "Section 1", "Section 2", etc. in Frame 15. There are Actions assigned to Button symbol instances... not frames.). Also remember that this timeline stops at Frame 16 because of the assigned Frame Action in the layer "Frame Actions & Labels. This allows the user to make a selection from the menu that has just been animated onto the screen. The timeline continues to play when we access our custom function by releasing the mouse on one of our Button symbol instances. Our custom function then issues a "play();" command on the timeline we've specified. Once the playback head reaches Frame 25 it encounters a Frame Action that tells Flash to go back to and play Frame 1 where a "stop();" action is then encountered. This timeline then waits to play again until the playback head is instructed to move to the frame labeled "Activate Nav".

You may have also noticed that I only have one motion path for all four buttons. You can have individual motion paths or a single one like in this example.

» Level Intermediate

Added: 2001-01-16
Rating: 8 Votes: 129
(10 being the highest)
» Author
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
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.