Part of Lesson Plan: Buttons 1: Pyramid

Activity Overview / Details

1.            Making new background and content frames

The first step is to make the new keyframes for both layers. Select Frame 2 on each layer by clicking and dragging so that they’re both highlighted. Go to Insert à Timeline à Keyframe. You will see that there is now another frame in your timeline, in both layers.

2.            Inserting a new background image

Open the file named "pyramid_2.jpg" and copy the image. Add it to your Library and paste it in Frame 2 of your Background layer. This image is the same as the first image, only slightly zoomed in. As before, put the image in the center of your project by setting the x and y properties of the picture both to 0. If it’s too small for the stage, set the Width to 550 and Height to 400.

3.            Draw the chambers of the pyramid

In Frame 2 of the Content Layer, select and delete the text elements and button. Using the drawing tools explained earlier, draw these chambers on the Content layer of the pyramid.

4.            Write the names of the different chambers

Now, using the text tool and the rectangle tool, write the names of the chambers as in this example. HINT: create the text first, then create the rectangles to match.

5.            Make the names into button symbols

Select each of the rectangles & names and group them, then convert each to button symbols. Converting them to symbols will allow you to add actions to the buttons later.

6.            Link each of the buttons to a frame

Using the same script that you used for the start button earlier set the buttons to go to the following frames. Frame 3 for the King's Chamber, frame 4 for the Grand Gallery, frame 5 for the Queen's Chamber, and frame 6 for the Subterranean Chamber.

7.            Make a new frame

Now, make a new blank frame by clicking and selecting Frame 2 on both layers in the timeline and pressing F7 on your keyboard OR go to Insert-- Timeline-- Blank Keyframe. This is where you will make a zoomed in version of each room. In this new frame, draw a larger version of the king's chamber in the content layer, and make a large, colored rectangle on the background layer. The third frame should look like this. Then, draw a back arrow on the background layer and convert it into a button symbol. Script the Back button to return to the 2nd frame.

8.            Making the Other Rooms

Now, click on the last frame of the content layer and press F7 (or Insert-- Timeline-- Blank Keyframe) 3 times to create new keyframes for each of the remaining rooms. This should also extend your Background layer automatically with the colored rectangle you used for Frame 3. (If it didn’t, go to Frame 3 of the Background layer and press F5 three times)  Notice that it does not actually make 3 new keyframes, instead, it expands the existing keyframe. Now, just make enlarged versions of each of the rooms in this order: Grand Gallery, Queen's Chamber, and Subterranean Chamber. Don’t forget to add Back buttons in each new frame, to return to Frame 2. You can do this easily by going to Frame 2, selecting your Back button and make a copy (EditàCopy). Then go to the new frame and do Edit--Paste in Place.

9.            Congratulations, You Are Done!

Congratulations, you have completed this tutorial. You now have a basic understanding of Actionscripting buttons and navigating from one frame to another. Press Control-- Test Movie to view your flash movie. Be sure to SAVE your finished Pyramid Tour!