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.


Arrow.png
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.

Continue