Using frames with layers in the timeline

• Create this frame by frame animation using this project file for your movie.

1. Open your project movie called dolphin.fla.

2. Open the layers palette. Notice the 3 layers.

• The bottom layer is labeled background. This has the background gradient fill that spans the entire stage. Flash can not set a background color as a gradient, but you can set one by using a rectangle with your gradient as fill. This layer is locked so it can not be manipulated beyond adding frames to the current key frame.
• The Dolphin layer is editable. There is one dolphin in this layer. Notice if you click on this layer a square forms around the dolphin. The dolphin is grouped into a symbol so it will be easy to move and manipulate its position and rotation in the frames.
• The water layer is only half the screen and is also locked. If you move the dolphin up and down you will see the upper edge of the water layer is at about halfway down the stage. The upper edge of the water is semi transparent.

3. Click someone off the stage where there is no contents. Open your properties inspector. The movie is sized to 700 pixels wide by 120 pixels high. The background is green-blue. The frame rate is set to 12 frames per second, which is about the minimum for online viewing. While we wont change the frame rate for now, bear in mind that movies at the theater play at about 24 frames per second and the average computer would cough at 30 frames per second so we build low and increase if need be.

4. Since the frame rate is 12 frames per second, we will build a movie that is 5 seconds long. 12 frames per seocnd times 5 seconds gives us 60 frames.

Click in frame 60 of the background layer and hit your F5 key to extend the frames to 60.
Click in frame 60 of the water layer and Hit your F5 key to extend the frames to 60. Notice how you can extend the keyframe when the layer is locked. You can also make new keyframes, however, a new keyframe would tell the program a change was there, and it would render that part as new, making the movie bigger. When possible, identical frames should stay as one keyframe for best optimization.

5. Click back on frame 1 of the dolphin layer. Select your transform tool (q) from the toolbox. Handles will form on your dolphin symbol box. Zoom in so you can see the dolphin above the waterline and an equal distance below the water line.  Locate the center point. Drag it to the right of the symbol and down below the lower right corner handle. This is the point of rotation when you rotate the dolphin. Moving the center point will make the rotation and positioning easier so the dolphin will make a nice arc.

6. Click on frame 2. Hit F6 to insert a new keyframe. Make sure your transform tool is still selected.. Notice we did not change tools when creating the key frame so we can see the bounding boxes with handles and centers right away. Mouse over a corner handle and rotate the dolphin counter clockwise so it is about 1/2 under the water. At this point you may want to turn onion skin to track the frame by frame animation. modify Onion Marker to 5 frames or Onion 5

8. Click on frame 3 of the dolphin layer. Hit F6 to insert a keyframe. This keyframe will be identical to the one just to its left, the eighth rotated dolphin.   The center point is exactly where we left it. Mouse over the corner handle until you see the bend double headed arrow and rotate another eighth of a circle so that the tail is just showing above the water.

9. Click in frame 4 and hit F6 to insert a new keyframe. on this frame, the dolphin at that location will disappear. A new one should appear elsewhere at the surface. First use your transform tool to rotate the dolphin around so the bottlenose just beaks the surface. Then select your move tool, and while holding the shift key drag the dolphin left across the stage to a new location to start his jump. The shift key will constrain his vertical position so that it as long as you are near the water's surface, the dolphin should be in a position to start a jump.

10. Click in frame 5 and hit F6. Reselect your transform tool. Rotate your dolphin about an eighth of a rotation clockwise so you see the dolphin coming up out of the water. Continue inserting keyframes and rotating until your dolphin is nearly gone. Below you see a progression across frames 4-10.

11. Repeat 9 and 10 again but this time moving your dolphin to a new location on the waterline, filling in frames 11-17; repeat again for frames 18-24, repeat again for frames 25-31; repeat again for 32-38, 39-45; 46-52; 53-59.

12. Click back on frame 1 of your dolphin layer. Hit your F5 key to extend the frame one frame. Then hit your F6 to make hte second frame a new keyframe. Click back on frame 1. Rotate your dolphin clockwise so the tail dissappears to the right of the stage. Make sureyou can still see the head some.

You can vary when you add the dophin, and even flip him horizontally by clicking in your first frame of the series by clicking modify=> adjust=> flip horizontal. Then continue rotating in the reverse order.Lock the dolphin layer.

Livening up your movie: the splash

13 Right click on the dolphin layer. Select insert layer. A blank layer will appear above the dolphin called layer 4. Double click the name layer4 to edit the name. Call it splash. Notice there is one very long blank keyframe in splash by default. USe your move tool to grab the splash layer and drag it above the water layer so it will sit on top of all the layers.

14. Click in frame 4 of splash and hit F6. Notice how this keyframe 4 extends for nearly the full length of the movie. DOn't worry. We will take care of that shortly. Select your brush tool set to a small round brush. Set the fill to #339999 blue.

Sketch some drops of a splash around the tail on frame 4.

15. Click in frame 5 to highlight it and hit your F6 key to insert a keyframe. Automatically the fill from frame 4 is copied into 4 and highlighted. GO to your mixer panel and select your paint bucket or fill color. Set the alpha value to 30% by clicking the fly out menu and dragging the slider down to 30. You may want to change or enlarge this splash here from the frame before.

16. Click in frame 6 of the splash layer. Right click and select Insert=> blank keyframe.

17. Repeat 15 and 16 again but this time adding a keyframe  to 11; placing the splash over the visible tail in frame 11, then duplicating the frame for frame 12, and alpha the fill.

Repeat 15 and 16 again for the following frames 25; 32; 39; 46; 53, 60.

18. The splash of frame 60 will need to be repeated in frame 1 to complete the splash method. Right click on frame keyframe 60 of the splash layer and select copy frames. Clickon frame 2 of splash and insert a keyframe by hitting F6, thereby inserting a blank keyframe in 2, coming from the blank keyframe in 1. Click in frame 1, right click and select paste frames. Set the  fill on the color mixer to alpha 30%.

19. If you have any frames paste from 60 you need to delete these so the movie will automatically return to the first frame without pause. Use your cursor to drag over them. When you have them highlighted, just right click and select remove frames.

20. Click file save. Then click file=> publish. The movie and your html file will be in the same fild as your project fla file.

* You may find the movie is too fast at 12 frames per second. We can speed the movie up with framerate, but it is not recomended you go under 12 frames per second to slow it down. You may want to space them out, or elongate their jumps. Click on every third frame of the timeline right on the timeline, not the layer. Hit f5 to elongate all the layers at that frame.