g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Adding Navigation To Your Flash Portfolio

In this tutorial, you will add the navigation buttons to the portfolio movie that is part of the larger Flash website that we are creating. The buttons will be made from the image of a small arrow. Once we import the image and convert it to a symbol, we will be able to add the ActionScript that will make the buttons work. If you prefer to make your own image for the button, it should be in PNG format and about 40 pixels wide and 30 pixels high. This will be a good size for placing the buttons under the portfolio images. If you don't have your own image, you can right click on the image below and save it to the images folder for your website. Open your Portfolio.fla file into Flash.

Right Click To Downloaded

Step 1. Import the Arrow.png image. Click on Frame 1 of the Background layer in the Timeline. To import the image, click File > Import > Import To Stage. The new image will be in the upper left corner of the Stage and in the Library Panel. With the Selection Tool, click and drag the image to the lower right corner of the Stage. With the image still selected, make a note of the Y location from the Property Inspector.

Step 2. Second arrow. Now we will add a second instance of the image to the Stage. Go to the Library Panel and drag another instance of the Arrow.png image to the lower left corner of the Stage. Set the Y location in the Property Inspector to the same number as for the other button.

Finally, we need to point this second button in the other direction. From the Menubar, click Modify > Transform > Flip Horizontal.

Step 3. Add actions for keyframes. We will create another layer in the Timeline to hold the stop(); ActionScript code for the keyframes. Without this stop action code, the Portfolio movie will display all the images without stopping. To see how this happens, click on the Ctrl and Enter buttons on your computer keyboard to open a preview of your movie. Notice that the movie displays the images in your Portfolio in sequence without stopping long enough to view each image. Therefore, we will add a stop(); code to tell Flash to display the image for each keyframe and then stop and wait for instructions.

Insert Layer Button
Let's add an Actions layer above the Content layer in the Timeline. Select the Content layer and then click the Insert Layer button. Rename the new layer Actions. Click on Frame 1 on the Actions layer. Go to the Actions Panel and click Global Functions > Timeline Control > stop. The stop(); code should appear in the Actions Panel.

Step 4. Add behaviors to the navigation buttons. We are ready to add the forward and back behaviors to the navigation arrows. But first we need to convert each instance of the arrow to a symbol. Click on Frame 1 in the Background layer and then click off the Stage to deselect. Now, right click on the right arrow image and choose Convert To Symbol from the drop-down menu. Set the following values in the Convert To Symbol dialog box.

Name: Next_Arrow
Behavior: Button
Registration: Centered

The Property Inspector should change to reflect the new Button symbol. Set the <Instance Name> to Next.

Type the following code in the Actions Panel.

on (release) { nextFrame(); }

Step 5. Back button. Repeat the previous step for the left arrow. This time in the Convert To Symbol dialog box name the symbol Previous_Arrow. In the Property Inspector set the <Instance Name> to Previous. Add the following code to the Actions Panel.

on (release) { prevFrame (); }

Step 6. Test your movie. Click on Frame 1 to move the Playhead back to the beginning. Now press the Ctrl and Enter key on your keyboard to preview your Portfolio movie.

Step 7. Save your movie. You can now save the changes to your Porfolio.fla file.

Macromedia Flash MX 2004 Workspace

Add Adding+Navigation+To+Your+Flash+Portfolio to Twitter Add Adding+Navigation+To+Your+Flash+Portfolio to Facebook Add Adding+Navigation+To+Your+Flash+Portfolio to MySpace Add Adding+Navigation+To+Your+Flash+Portfolio to Del.icio.us Digg Adding+Navigation+To+Your+Flash+Portfolio Add Adding+Navigation+To+Your+Flash+Portfolio to Yahoo My Web Add Adding+Navigation+To+Your+Flash+Portfolio to Google Bookmarks Add Adding+Navigation+To+Your+Flash+Portfolio to Stumbleupon Add Adding+Navigation+To+Your+Flash+Portfolio to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor