Flash Tutorial (2)
Let’s create a slide show using four jpgs: Boats.jpg, palm.jpg, town.jpg, and waterfall.jpg should be on the desktop.
1. Open a new Flash file.
2. Stage dimensions = 700 px x 500 px
3. Background = white
4. Frame rate = 15 fps
5. Make sure your Library and Properties windows are open. (To open them, select Library and Properties from the Window menu.)
Import jpgs into Flash
1. Choose: File > Import to Stage. Browse to and select the images, then click on “Open” to import them. They pop up on the Stage, but you only see one, because this photo is hiding all the other photos that are tucked into this same layer.
- Choose View > Grid > Edit Grid. Make the grid 50 px by 50 px, and select “Show Grid”.
- Click and drag the stack of photos so that they’re 50 px in from the left side, and 100 pixels down from the top margin of the Stage.
- Make sure you’ve selected the frame that holds the photos and choose Modify> Timeline > Distribute to Layers. Each photo is put into its own layer, and each layer has the name of the jpg photo.
Now you need to rearrange the order of the layers by clicking to the left on the name of a layer and moving it up or down. Move the first jpg – boats – to the bottom layer, palm to the second layer above it, then town above that, then waterfall to the top layer.
- Save your file.
Change the Images to Symbols
6. Click on the first layer, boats.jpg. Choose Modify>Convert to Symbol. An good shortcut is F8 (Function key 8). In the highlighted box, type boats (and make sure graphic is selected).
- Do the same with the next three jpgs, naming the symbol the same as the jpg – palm, town and waterfall.
- Look in the Library window: you’ll see the list of jpgs and symbols.
- Save your file.
Insert the Keyframes
10. By this time, all your image symbols (let’s just call them images from now on) should be piled on top of one another on the Stage, and the Timeline has four layers with black dots in the first frame of each.
- To make sure all the images are in the right position, click on the red bar at the top of Frame 1 in the Timeline. Select Apple Key > All. All the keyframes – the frames with the black dots in them – should turn black (because they’re highlighted). Look in your Info window at the X and Y coordinates. X should be “50”, since it’s 50 pixels horizontally from the left margin. Y should be “100”, since it’s 100 pixels vertically from the top margin.
- Now…highlight all the layers in Frame 30 by shift-clicking on the first one and shift-clicking on the last one.
- Choose Insert > Timeline > Keyframe. A good shortcut is to click on one of the highlighted frames, hold the mouse down, and select “Keyframe” from the menu that appears. Or click on a highlighted frame and choose F6.
- Highlight all the layers in Frame 31.
- Choose Insert > Timeline > Blank Keyframe (this is very important later, as it designates the end of the layer’s content and prevents Flash from filling in frames when you’re copying layers). A good shortcut is to click on one of the highlighted frames, hold the mouse down, and select “Blank Keyframe” from the menu that appears. Or click on a highlighted frame and choose F7.
- Highlight all the layers in Frame 10 by clicking on the first one and shift-clicking on the last.
- Choose Insert > Timeline > Keyframe. Or select “Keyframe” from the shortcut menu. Or hit F6.
- Highlight all the layers in Frame 20.
- Choose Insert > Timeline > Keyframe. Or select “Keyframe” from the shortcut menu.
- Save your file.
Set the pattern of the fade
21. In the next steps, you’re going to set the pattern of fading in and out. Move the red bar to Frame 1 in the Timeline. Activate the Stage by clicking on the image.
- Choose Edit > Select All. This selects all of the layers (and their symbols).
- In the Properties window, find Color. From the pull-down menu, choose Alpha, and set it to “1 percent”. All the images disappear.
- Move the red bar timeline indicator to Frame 10 of the Timeline. Choose Edit > Select All. This selects all of the symbols on the Stage.
- In the Properties window, pull down Alpha in the Color window, and set it to “99 percent”. All the images appear. [You can check each one by hiding the other layers – select the dot under the “eye” located at the top of the column of layers.]
- Move the red bar timeline indicator to Frame 20 of the Timeline. Choose Edit > Select All. This selects all of the symbols on the Stage.
- In the Properties window, pull down Alpha in the Color window, and set it to “99 percent”.
- Move the red bar timeline indicator to Frame 30 of the Timeline. Choose Edit > Select All. This selects all of the symbols on the Stage.
- In the Properties window, pull down Alpha in the Color window, and set it to “1 percent”.
- Save your file.
Set the tweens
31. Highlight Frame 1 of all the layers — click on the first one and shift-click on the last one. Then click and hold. In the menu that pops up, select Create Motion Tween.
- Highlight Frame 20 of all the layers. Then click and hold OR click on the first one and shift-click on the last one. In the menu that pops up, select Create Motion Tween.
- Save your file.
Move the frames to create the show
34. At this point, all of the images are piled on top of one another, moving in lock step. Now you want to separate them so that each one fades to the next. We’ll do this by moving the images in the layers as blocks to spread them out.
So, click on the first frame (frame 1) of the palm layer, hold down the shift key and and then click on the last frame (frame 31) of the waterfall layer. That will highlight the frames in all three of the top layers and allow you to move them as a single block.
Then click in the highlighted area and drag all the highlighted frames in all three layers as a block to the right until the first keyframe of the block starts at frame 20. That is just above the keyframe in the boats layer where the boats photo starts fading out. Thus as the boats layer starts to fade out at frame 20, the layers above start to fade in.
- Next, click on frame 20 of the town layer and shift-click on the last frame (frame 51) of the waterfall layer. That will highlight the frames in the top two layers and allow you to move them as a single block.
Then click in the highlighted area and drag all the highlighted frames in the two layers to the right so that the first keyframe of the block starts at frame 40. That is just above the keyframe in the palm layer where the palm photo starts fading out. Thus as the palm layer starts to fade out at frame 40, the two layers above start to fade in.
- Next, click on frame 40 of the waterfall layer and shift-click on the last frame (frame 71) of the waterfall layer. That will highlight the frames in the waterfall layer and allow you to move them as a single block.
Then click in the highlighted area and drag all the highilghted frames in the waterfall layer to the right so that the first keyframe of the waterfall layer starts at frame 60. That is just above the keyframe in the town layer where the town photo starts fading out. Thus as the town layer starts to fade out at frame 60, the waterfall layer above start to fade in.
- Play your movie! And, if it works, save it.
Stop the Movie from Looping
At this point, if you exported or published your movie it would loop – that is it would play over and over again continuously without stopping.
If you want your movie to loop like this, then you’re all set and you don’t need to take the following steps.
If you don’t want your movie to loop and instead want it to stop playing when it reaches the end, then take these additional steps:
- Add a layer at the top of your Flash file, and name it Actionstop.
- On this new layer in the last frame (the same number frame as the last frame of the picture you want to see displayed at the end of your movie), insert a keyframe.
- Open the “Actions” Window by selecting in the menu Window > Development Panel > Actions. In this window, you’ll see something like “Actionstop: Frame 91 “.
“Actionstop” refers to the name of the new layer you just created. The frame number refers to the frame where you inserted your keyframe on this layer.
- On the left go to Global Functions > Timeline Control > Stop and double-click on Stop. (or drag the Stop icon over to the open screen of the Actions window on the right.) Close the Actions Window.
You now should see a tiny a (which stands for Actionscript) in Frame 87 of the Actionstop layer (or the frame number where you inserted the keyframe on this new layer). That’s it!
Testing Your Movie
You can test your movie by selecting in the menu Control > Test Movie (or press Apple key > Return key. Make sure when this test movie opens that you’ve deselected Loop in the test movie’s Control > Loop.
Frames in the Timeline
When the Timeline opens:
- It displays one layer with hundreds of little boxes.
- Each box corresponds to a single frame.
- You can make those frames bigger or smaller by clicking the pop-up box at the end of the line of frame numbers (it has what looks like a little Frankenstein scar).
- In the single layer, the first box is outlined in black and contains an empty circle. That first box is a blank keyframe.
- The rest of the boxes are outlined in gray. Boxes with gray outlines are called “protoframes” – they’re placeholders. Every fifth protoframe is tinted gray; the rest are white.
- A frame with an empty circle means it is a blank keyframe with nothing in it. Put something in it, and the empty circle changes to a black circle, which indicates a keyframe.
An exercise that explains this:
1. Open a new Flash document. This default Timeline appears – one layer and one blank keyframe in Frame 1.
- Click on the gray protoframe for Frame 10.
- From the Insert menu, choose Timeline > Blank Keyframe (or hold down the mouse and select Blank Keyframe from the menu). An empty rectangle appears in Frame 9, and a black line separates Frame 9 from Frame 10. The rectangle indicates the last frame of content for the previous keyframe, and the black line shows where content from one keyframe ends and another begins. Notice that the gray-outlined protoframes 2 through 9 have been replaced with gray tick marks, and all the frames are white.
- Click on Frame 1 and, on the Stage, draw a ball (in the tools bar, select the circle tool). Notice that the empty circle in Frame 1 changes to a black circle, and Frames 1 through 9 – the in-between frames – are tinted gray. This means that Frame 1 has a keyframe with content, and the shading means that the content appears in all the frames from Frame 1 through Frame 9. The empty rectangle signals the last frame that displays Frame 1’s content. Frame 10 still has a blank keyframe that indicates it’s empty. Click on it to see what happens on the Stage.
- Now, click on Frame 5 and insert a Blank Keyframe. This removes all the content from that frame, and all the frames in-between Frame 5 and Frame 10. This shows that when you insert a keyframe, you’re changing what comes before and what comes after, not just the individual frame that you’ve clicked on.
Note: There are two commands for creating keyframes. When you Insert a Blank Keyframe, you make a keyframe that’s empty so that you can change the contents of the Stage completely. When you insert a Keyframe, it duplicates the content of the preceding keyframe.
- Click on Frame 3 and choose Insert > Timeline > Keyframe. The contents of Frame 1 are duplicated in Frame 3. The empty rectangle in Frame 4 signals that it’s the last frame in which the content from the previous keyframe in Frame 3 appears.
- Click on Frame 1 and delete the ball.
- Click on Frame 3. The ball’s there. When you create a new keyframe as you did in Frame 3, the content becomes completely separate from the previous keyframe’s content. What you do in Frame 1 does not affect the content in Frame 3.
How to Add Frames
It’s easy – and depends on whether you want to add a few frames, or a whole bunch of frames.
An Exercise that explains this:
1. Open a new Flash file.
- Insert a Keyframe in Frame 10. (Flash automatically inserts a Blank Keyframe, because there’s no content in Frame 1.)
- Click on Frame 1, and draw a ball on the Stage.
- You want to increase this movie by one frame, so click on your arrow tool and then click on one of the in-between grey frames, and choose Insert > Timeline > Frame. The empty rectangle moves to Frame 10, and the empty circle moves to Frame 11, indicating that this movie clip grew by one frame. A short-cut is to hit F5 as many times as you want frames.
- Another way [useful for increasing a span by many frames at a time – say 10 or more — rather than just a few]: Say you wanted this span to grow by five more frames. Click and drag five in-between frames (DON’T include a keyframe or blank keyframe).
- Choose Edit > Timeline > Copy Frames.
- Click outside the frames on the Timeline to deselect the frames you copied.
- Click on one of the in-between frames. Choose Edit > Timeline > Paste Frames. The span of in-between frames is increased by five frames. If you want to add five more, just Edit > Timeline > Paste again. If you did this to one of a series of spans, for example, all the other spans would be pushed along the timeline. In other words, making one span grow doesn’t decrease the length of the others…it just shoves them along the timeline.
- Flash automatically inserts a keyframe at the insert point. If you don’t want it, click on it and choose Modify > Timeline > Clear Keyframes.
How to Delete Frames
Note: Flash has two ways to delete frames – Clear Keyframe and Remove Frames. They’re a little confusing. The way to figure out which one to use is to ask yourself why you want to eliminate a frame.
If you want to eliminate a frame because you want to reduce the length of the movie, then select a frame, and choose Edit > Timeline > Remove Frames, or Shift-F5.
If you want to remove the status of a keyframe (and therefore, its content), and keep the movie the same length, then select a keyframe or blank keyframe and choose Modify > Timeline > Clear Keyframe (or hold down the mouse and select Clear Keyframe from the menu).
Clear Keyframe changes a keyframe or a blank keyframe into an in-between keyframe. It removes the content it contained. The new in-between frame displays the content of the previous keyframe.
An Exercise that explains this:
1. Open a new Flash file.
- Insert a Keyframe in Frame 10.
- Click on Frame 1 and draw a ball on the Stage. All the frames between Frame 1 and 9 contain the ball.
- Click on Frame 5 and insert a blank keyframe. Only the frames between Frame 1 and Frame 4 contain the ball now.
- With Frame 5 still selected, draw a square on the Stage. Play the movie, and see a ball in the first four frames, and a square in the next five frames.
- But you’ve decided that you don’t want that square after all. You only want the ball to appear in all the frames. Click on Frame 5, then choose Edit > Timeline > Remove Frames. The keyframe doesn’t disappear; the movie clip just shortens by one frame.
- So, click on Frame 5, then choose Modify > Timeline > Clear Keyframe (or hold down the mouse and select Clear Keyframe from the menu that appears)_. The keyframe and its content disappear, the frame becomes an ordinary in-between frame again, and picks up the content from the previous keyframe (Frame 1).
You can, of course shorten a movie clip by removing several frames at once by clicking and dragging over the in-between frames to be deleted, then choosing Edit > Timeline > Remove Frames. (You can’t do this by choosing Edit > Cut Frames – that just inserts a blank keyframe and a bunch of empty frames.)
You can also eliminate a particular graphic or image altogether by including the keyframe and all of its associated in-between frames by selecting them all and choosing Edit > Timeline > Remove Frames.
Adding Text to a Slideshow
The two most important things to remember about adding text to a slide show are:
1. To put each text block on a separate layer.
2. To make sure each text block is a symbol.
Make a Layer for Text
3. Open the file in which you made your slide show.
- Above the first layer that holds the first image, put another layer by clicking the layer icon at the bottom left of the Timeline window, and name it “Tocean“.
Make a Symbol for Text
5. Choose Insert > New Symbol (or Apple-F8). The symbol-editing area opens and a property box opens. Name the symbol “Tocean“, select “graphic” for behavior, and click “OK”.
- Choose the text tool (A) from the Tool Bar.
- Click on the symbol-editing area and start typing. You can change the color, font and size in the Properties window.
- If you want to import a block of text from a text-editing program, such as Word, here’s how. Make sure you save the Word file (or whatever text-editing software you’re using) as a Rich Text Format. Then copy the text.
- Before you paste the text into the Flash text symbol, position your cursor over the tiny round handle on the text field box. Then drag it sideways to an appropriate width. The tiny round handle turns into a tiny square. That means you’re ready to paste in the text you’ve copied from the text-editing program. So, just click inside the text field box and copy!
Put Text into the Slide Show
10. When you’re finished, just click on Scene 1 at the top left of the Timeline, and you’ll go back to the main Stage. From the Tool Bar, choose the Selection tool (the arrow at the top left).
- When presenting photos and text in a story, it’s more dynamic and easier to follow the story thread if you have the photos and text appearing sequentially. So, instead of putting the text in keyframes that match the photo’s keyframes, the text will start about 10 frames after the photo appears. In the layer you created for the text – Tocean – click Frame 10 and insert a keyframe. Click on Frame 70 and insert a keyframe. Click back into Frame 10, go into the Library and drag your Tocean text symbol onto the Stage. You can move it around by clicking on the symbol icon (a small circle in the middle of the text symbol) and dragging, or by using the arrow buttons on your keyboard.
- Using the same techniques you learned in creating a slideshow, add keyframes and adjust the alpha to make it fade in and out.
Adjust the Timing of the Fade-In
13. You can adjust the timing of the fade-ins and -outs several ways. You can click on the first frame of the text layer and shift-click on the last to select the entire span. Then drag it to the right or left and release it.
- You can also click and drag the keyframes at the ends of spans to make them longer or shorter.
- You can also make segments longer by clicking into the segment you want to extend and pressing F5.
- You can make segments shorter by clicking into the segment you want to shrink and pressing Shift-F5.
Add Audio to a Slide Show
In Two Easy Steps
Flash can import .aif, .wav, or mp3 digital audio files. Flash can do some editing, but it’s best if you’ve edited the audio in Pro Tools or some other audio editing program before importing it. You can do some basic audio editing in iMovie and export the files as .aif files.
If you import a large audio file, only use part of it and mute the rest, the exported Flash movie will still contain the entire audio file that you put there. That will make your exported Flash movie huge. Since you’ll sometimes use sound from a video-editing program like Adobe Premiere, iMovie, or Final Cut Pro, you can export only the audio from those files, and import them into Flash.
In this step, you’ll learn how to import an audio file and do simple editing.
- Find a 10-second audio file.
- Open a new Flash file.
- From the menu, choose File > Import to Library. Find your audio file and click OK.
- Add a new layer under your Actionstop layer. [It’s usually best to put your audio files at the top of the stack of layers.] Name it Asound_ or whatever suits the audio file you chosen.
- Highlight Frame 1, and drag the .aif file onto the Stage or into the frame. The audio pattern will show up as a long waveform in the A_sound layer.
- In this layer, put key frames at the beginning and end of the audio file. In this case, there’s already a keyframe in Frame 1, so put a key frame at around 147 seconds.
- In the Property Inspector, note that when the A_sound layer is selected, the name of the audio file appears in the Sound box. Make sure that “stream” is selected in the Sync box. For sounds that play throughout a Flash movie that will appear on the Web, select stream. [Event sounds are usually short and accompany a button.] The file begins streaming right away instead of having to download completely before starting. Note also, at the bottom of the Property Inspector details about the audio file: It’s 22 kHz Mono 16 Bit 9.3 s 412.2 kB. [s = seconds, and the last number is the file size]
- With the Asound layer selected, go into the Property Inspector and take a look at Effect. Fade Left to Right means that the sounds seems to move from the left to the right speaker; Fade Right to Left, the opposite. We’re going to customize this audio, so select Custom. You can also click on Edit next to the Effect drop-down menu. The audio wave forms pop up in a separate window.
- At the bottom right, near the Help button, are four symbols. The first two are zoom in and zoom out. The second two provide two different ways of looking at the waveform — seconds or frames. Choose the frames button. The numbers in between the two waveforms will change.
- You’re going to change the volume of the audio so that, at about two seconds in, it decreases. It stays at decreased volume for a couple of seconds, and then increases until about two seconds from the end, where it begins to fade out. So, first scroll until you see frame 30.
- At Frame 30, click on the thin straight line at the top of top waveform. An empty square box will appear on the lines in both waveforms.
- At Frame 32, click on the thin straight line again until a box appears, and drag it down below the top waveform. Because this is stereo, you’ll have to do the same for the bottom waveform. [If you didn’t click on Frame 32, you’d have a gradual fade out from the beginning of the audio file to this point. Setting markers on Frame 32 decreases the audio volume over two frames.
- At Frame 60, click on one of the thin lines until boxes appear on both lines.
- At Frame 62, click on the top thin line until the box appears and drag the line back up to the top. Test the audio changes by hitting the arrow at the lower left corner of the audio edit window.
- At Frame 115, click on the top thin line until boxes appear on both wave-form audio volume lines.
- At Frame 117, click on the top thin line until a box appears, and drag it down to the bottom of the wave form. Do the same for the other wave form.
- Test the changes by hitting the arrow button. If they’re OK, close the window, click on Control > Rewind if the red bar isn’t at Frame 1, and check out how the audio works with the images. Save your file.
- Note: You can only put in eight of these boxes, or audio changes. So, if you want more, it’s best to edit the file in Pro Tools or some other audio editing file before importing it into Flash.
Important Note: If you have a human voice in your Flash movie, when you export it, do the following: In the Export Flash Player window that pops up after you choose Export, find Audio Stream. There’s a small “Set” button to the right of the export details. Click on it, and a Sound Settings window pops up. In the Bit Rate pull-down menu, choose 24 or 32 kbps. If you use the regular settings, the voices will come out tinny and weak. This increases your file size a tiny bit.
The same improvement can be obtained by selecting “Speech” from the Compression drop-down menu. But this increases the file size more.
In this tutorial, you’ll learn how to integrate a video clip into the linear timeline of a Flash movie.
Create and save a video clip
- Keep the clip size small – no larger than 400 x 300. Smaller sizes won’t pixelate so much.
- Keep it short – no more than 20 to 30 seconds, more if REALLY compelling.
- Flash supports QuickTime, MPEG, AVI and DV formats.
- Create a new layer, and name it Vshark. Insert a keyframe where you want the video to start, and make sure it’s selected before you import your video.
Import the video
- From the File menu, choose Import Video. The Import Video dialogue box appears.
- Click CHOOSE to help you locate the clip.
- Click on the file once you’ve found it.
- Click CONTINUE once you have found it
- At Deployment screen
- Choose EMBED VIDEO IN SWF AND PLAY IN TIMELINE
- Click Continue
- At Embedding screen
- Choose EMBEDDED VIDEO
- Audio track INTEGRATED
- Click PLACE INSTANCE ON STAGE
- Click EXPAND TIMELINE IF NECESSARY
- Click EMBED THE ENTIRE VIDEO
- Click CONTINUE
- At Encoding Screen
- Choose FLASH 7 HIGH QUALITY
- Choose SHOW ADVANCED SETTINGS
- Choose Sorenson Spark
- At Frame Rate, double-click on SAME AS FLA
- At Data Rate, choose 48 kbs
- At Finish Video Import screen, choose FINISH
- Click on the video and choose FUNCTION > F8 to convert it to a symbol.
- When it asks you to name it, it’s best to put a V before the name so you know it is video.
- A dialog bopx will open asking whether it’s okay to add sufficient frames for the video. Make a note of the number of frames. Click Yes.
Test the video
- If your video has audio, you won’t hear it in the .fla file. If you want to hear it, do a text export — choose Control > Test Movie (or Apple > Return). If you have a human voice in the audio, it may sound tinny. When you export or publish the Flash movie, you can choose audio settings to accommodate human speech.
Export a FileIn Three Easy Steps
Since your primary goal is to publish your Flash movies on the Web, you’ll transform your .fla file to a .swf file. This compresses your .fla file, including any audio or video.
Set Publish settings:
1. Open the Flash file you want to publish.
- In the File menu, choose Publish Settings.
- At the top, click the Formats tab.
- Choose Flash (.swf) – and deselect any others that are selected (if you don’t need html).
- Click the Flash tab.
- At Version, choose Flash 7.
- At Load order – choose Bottom Up
- At ActionScript version, choose ActionScript 2.0
- Check Compress Movie.
- Don’t worry about the JPEG Quality bar.
- At Audio Stream, click the small Set button to the right of Audio stream: MP3, 16 kbps, Mono.
- In the Sound Settings dialogue box that opens…
- at Compression, leave in MP3
- at Preprocessing, check Convert stereo to mono
- at Bit Rate, choose 48 kbps
- at Quality, choose FAST
- if your audio is mostly human voices, and the audio isn’t very good, in Compression, choose SPEECH
- click OK
- Back in the Publish Settings dialogue box, click OK.
- Click Publish, and your .fla file will be compressed into a .swf file and put in the same folder as your .fla file.