In this document, I’m going to show you how simple it is to create the illusion of depth in a Flash animation using nothing more than the Timeline palette and the Oval tool — without a hint of ActionScript code. Mind you, most professional Flash animators do rely on (rather complex) ActionScript for their animation effects, but we’ll work up to that later.
This blog post is also available in PDF form as a TechRepublic download, which includes a sample Flash file created using the technique described.
If you don’t own a copy of Flash CS3, you can download a fully functioning 30-day trial.
Creating a file
Let’s start by opening Flash CS3 and creating a new file. From the File menu, select the New option. In the dialog box that appears, select Type: Flash File ActionScript 3.0. Even though we won’t be using ActionScript at all in this example, let’s keep the file compatible with the most recent iteration.
Your layout should look like Figure A.
Figure A
The default layout of the Flash CS3 workspace
Lots of animation tutorials get you started by having you animate a bouncing ball, but we’ll go a little farther than that. We’re going to animate a moon coming out from behind a planet, revolving around to the front, and then disappearing behind the planet — while increasing and decreasing in size as it comes toward and moves away from the camera on its orbit.
The orbiting idea came from a TechRepublic member who is trying to perform the same function using JavaScript. Can you describe how to accomplish this animation using JavaScript? Submit your answer using our new Blog Submission Tool.
Start by saving your file. It’s always a good idea to save your file as soon as you create it, because as you work and save every few minutes, a fast hit on [Ctrl]+[S] will be a habit that you’ll form quickly.
Let’s start by changing the color of the stage to black so that our planet and moon will be living in outer space instead of on a boring whiteboard.
Go to the bottom of the screen and in the Properties palette, click the Background color box and choose a black swatch. While you’re in the Properties palette, click in the field labeled Frame Rate and change the number from 12 to 24. Since most film animation displays 24 frames per second, this setting will look much more pleasing to the viewer. Refer to Figure B to see how these changes should appear.
Figure B
Making the background of the Flash movie black and changing the Frame Rate to 24 frames per second (FPS)
Next, go to the Layers palette at the top of the screen. It’s tied directly to the Timeline window, so as you add layers to your file, you add layers to the working Timeline. Double-click the first layer and rename it “Planet.” Click the Insert Layer button again and rename the new layer you create “Moon.” Finally, click the Insert Layer button one more time and name the third layer “Mask.” Your Layers palette should resemble Figure C.
Figure C
Creating the layers for the animation
Now let’s get drawing.
Start by selecting the layer named Planet in the Layers palette to ensure that the planet you’re about to draw is on the correct layer. Then, select the Oval tool from the Toolbox on the far left, and for the Fill color, choose a pleasant blue. Also, make sure that no Stroke option is selected; otherwise, when you draw the planet on the stage, it will have a line around it. Refer to Figure D if you are unfamiliar with the Toolbox.
Figure D
Selecting the Oval tool with a blue fill and no stroke in the Toolbox
Go to the Black stage and while holding down the [Shift] key (to constrain our Oval tool into drawing a circle), click and drag to draw a circle on the stage that will represent our planet. Don’t draw the planet too large, or there will not be enough room to animate the moon in orbit.
Next, lock the Planet and Mask layers and select the Moon layer in the Layers palette.
This step is important!
The Timeline can animate only one object on a layer, and it will be much easier for you to create your animations if you keep all of your stage objects on separate layers. Figure E shows you how to lock a layer.
Figure E
Locking the Planet and Mask layers and selecting the Moon layer
Now, go back to the Toolbox and select the Oval tool again. For the fill color, choose an orange-yellow hue. Then, go back to the stage and draw a smaller circle that will represent the moon. Your stage should look like Figure F.
Figure F
The stage with the planet and moon in place
The planet and moon are on the stage, so it’s time to animate the moon. Flash can put an object in motion only if it exists as a Symbol. So before we can put the moon in orbit, we have to turn it into a Symbol.
Click on the moon to select it, then right-click on it to bring up a contextual menu. From that menu, choose Convert To Symbol. A dialog box will appear, as shown in Figure G. Give the Symbol a name of (you guessed it — Moon) and select the Movie Clip option. Click OK to return to the stage, where you’ll notice that the moon has a blue bounding box around it.
Figure G
Converting the Moon object to a Symbol
Rather than painstakingly animating the moon in orbit by hand, you’re going to rely on Flash’s Motion Guides and keyframes to do all of the heavy lifting.
A Motion Guide is exactly what it sounds like: a line that will guide a symbol about the stage. Keyframes are specific frames in the Timeline in which you can change the position or properties of a symbol and have Flash animate the transitions between the frames.
Right-click on the Moon layer and from the contextual menu, select Add Motion Guide. Click on the Motion Guide layer to select it, as shown in Figure H.
Figure H
Selecting the new Motion Guide layer for the Moon layer
The Motion Guide layer is where you will create your orbit path for the moon. Select the Oval tool from the Toolbox again, but this time, select a White stroke and no fill. Then, go back to the Stage and draw a narrow, horizontal oval around the center of the planet, as shown in Figure I.
Figure I
Creating the Motion Guide for the moon’s orbit
Motion Guides work best when they have a beginning point and an end point, but right now our orbit is a closed circle. Choose the Selection tool from the Toolbox and click and drag to select a small segment of the orbit path near the top center. Press the [Backspace] key to delete it. Your Motion Guide should look like Figure J.
Figure J
Breaking the oval to give the Motion Guide a beginning and ending point
Select the Moon Symbol and place it at the left-hand open end of the Motion Guide. It should snap into position via an anchor point in the center of the Moon Symbol. Then, choose the Free Transform tool from the Toolbox and reduce the size of the Moon Symbol to about half of its current size. Your stage should look like Figure K.
Figure K
Reducing the size of the moon and placing it at the start of the Motion Guide
Here’s where keyframes come into play. Go up to the Timeline and click and place your mouse into the 48th frame at the top layer (the one labeled Mask). Click and drag straight down to the bottom layer to select the frame across all four layers. Then, right-click in the selection and from the pop-up menu, choose the Insert Keyframe. Your Timeline palette should look like Figure L.
Figure L
Inserting keyframes at the end of the animation
Now, go back to the Stage and select the Moon symbol. Click and drag it to the opposite end of the Motion Guide, allowing it to snap into place, as shown in Figure M.
Figure M
The Moon at the ending position of the animation
Here is where the magic happens. Go back to the Timeline and select Frame 1 of the Moon layer. Right-click the frame and choose Create Motion Tween. The Moon layer will turn blue, with an arrow leading from keyframe 1 to keyframe 48. If you press the [Enter] key, you will get a preview of the animation, as the moon revolves around the planet.
But our animation lacks depth. Let’s start by making the moon appear bigger as it revolves toward us. Use your mouse to select Frame 24 in the Moon layer and right-click on it. Select Insert Keyframe again, making your Timeline look like the example in Figure N.
Figure N
Inserting a new Keyframe into the middle of the timeline
Now, select the moon on the stage and choose the Free Transform tool from the Toolbox again. This time, increase the size of the moon by about 100 percent (Figure O). Hit [Enter] again to preview the animation and see the moon increase and decrease in size as it moves to and from the camera.
Figure O
Increasing the size of the moon at the new Keyframe
We’re almost there. All we need to do now is make it look as if the moon disappears behind the planet at the back of its orbit.
Lock the Moon layer and the Motion Guide layer and then unlock the Planet layer and the Mask layer. Select the planet and copy it to the Clipboard. Go back to the Timeline and just as you did before, select Frame 6 of the Mask layer and insert a Keyframe. Then, in the same layer, insert another Keyframe at Frame 43. Your Timeline should look like Figure P.
Figure P
Inserting new Keyframes in the Mask layer
Select Frame 1 of the Timeline in the Mask layer. From the Edit menu, choose Paste In Place to drop a copy of the planet in the exact position as it exists on the Planet layer. Repeat this process at Keyframe 43 of the Mask layer. Finally, select Keyframe 48 of the Mask layer, right-click and then select Clear Keyframe to remove the empty Keyframe and extend the mask to the end of the movie.
Press [Ctrl]+[Enter] to test your movie. You’ll see that the Guide layer is not visible in the final SWF file.
That’s all there is to creating an animated 3-D effect with 2-D objects in Flash. Keep the Flash Timeline in mind the next time you need to quickly create a simple, attention-grabbing animation.
Isn't it easy???
Posts
No comments:
Post a Comment