Graphics in Flash

Adding Interactivity to the Slide Show

With the interface constructed, you can now turn your attention to making the movie interactive. The plan is rather simple: Click one of the thumbnails on the Button layer and the image and text will change.

In this exercise, we will use the five images in the Images folder in the library and put each one on a different frame. This means when you click a button, the playback head will move to the frame containing the image and descriptive text. This will be accomplished by adding both frames and keyframes to the Timeline. Being able to distinguish the difference between a frame and a keyframe is important.

Frames are added to layers where content doesn’t change. For example if you were to add a frame to Frame 10 of the Logo layer, the logo will appear in Frames 1 to 10. The Timeline will have a dot in Frame 1 (a keyframe indicator), and Frames 2 to 9 will appear to be blank. Frame 10 will contain a square that tells you where the last frame is located.

Keyframes are used where things change on the Stage. You would put a keyframe in Frame 2 of this movie because the image and the text will be different from that in Frame 1. Keyframes on the Timeline are indicated with a solid dot.

There is another type of keyframe called a blank keyframe. Blank keyframes are used when objects in a layer need to be visible for a specific number of frames. Let’s assume that the logo in Frame 1 only needs to be visible in Frame 1. If you add a blank keyframe in Frame 2 of the Logo layer, the logo won’t be visible in Frames 2 to 10. The icon for a blank keyframe is a hollow dot in the frame.

After the keyframes and the extra frames have been created, you can then add the ActionScript that will drive the movie.

1. Open the slide show and add a frame to Frame 5 of the Logo layer.

There are three ways to do this. The first is to click on Frame 5 and press F5. The second is to select Insert > Timeline > Frame. The third is to right-click (PC) or Control-click (Mac) on Frame 5 and select Insert Frame from the context menu. Insert a frame at Frame 5 of each of the remaining layers.

Doing that last step six more times is a bit tedious. A faster way is to click Frame 5 of the Actions layer and Shift-click Frame 5 of the Title layer. With all these frames selected, press F5, and the frame is added to all of the layers.

2. Add keyframes in Frames 2, 3, 4, and 5 of the Image and Text layers.

A keyframe is added by selecting the frame and pressing F5. In this case, you can select Frame 2 of the Images layer and with the Shift key held down, select Frame 5 of the Text layer. If you press the F5 key, keyframes are added to all of the selected frames.

3. Select Frame 2 of the Images layer, delete the image, and replace it with Image02.jpg from the Images folder in the library.

The image in the frame is located in a keyframe, so deleting the image won’t delete the one in Frame 1. When you replace the image, it is critical that it have the same Stage coordinates (x:0, y:65) as the image being replaced. If it is not exact, the image will appear to jump as you move from frame to frame.

4. Replace the images in Frames 3, 4, and 5 with their counterparts in the Images folder. Save the file.
5. Select the text in Frame 2 and replace it with the following text:

The regular rainfall results in a lush growth of the vegetation in the forest.

Again, the keyframe makes this possible. Changing this text won’t change the text in the previous frame. Replace the text in the remaining frames with the following:

• Frame 3: The moisture in the rain forest is also due to the regular fog that rolls in from the Pacific Ocean.
• Frame 4: The fog makes for a sense of mystery on the beach.
• Frame 5: Trees grow to amazing heights and sizes in the rain forest.

The text in Frame 3 is fairly long and will wrap to a second line. If this happens, reduce the width of the text box by selecting the text box and dragging a handle to the left. As the edge of the box touches a word, the word will move down to the next line.

6. Save the file.

An alternate method of reducing the size of a text box is to click inside the Text Box with the Text Tool. A white handle will appear in the upper right corner of the text box. Drag that handle to the left.

... NEXT

Who is tom green?

Teacher, author, raconteur. Here's a run down of what I have been up to over the past few years. My Bio.

Classes

• The Flash interface:
  Week 1
• ActionScript basics:
  Week 2
• Working with graphics:
  Week 3,4
• Working with text:
  Week 5
  
• Working with audio:
  Week 6,7
• Animation basics:
  Week 8
• Video basics:
  Week 9,10
• Building Stuff:
  Week 12,13,14

Class Project 1