Like conventional animations, computer animations are sequences of changing still images called frames that are displayed rapidly enough to be perceived as continuous motion. Many animations are composed by creating each frame: one-by-one, and adding it to the sequence. This is a reliable method, but can be very laborious. Fortunately, you can exploit the computer's processing powers to help create frames in certain types of animations. The result is less work for you and more reliable finished product. Some animated sequences contain regular, predictable kinds of changes. For example, linear movement of an object; gradual changes in the scale or size of an object (as it comes closer or recedes from view). These and similar types of animations are based on predictable, gradual or incremental changes from one frame to the next. Thus, the computer can be enlisted to help us by composing some of these frames automatically.
The technique is called "in-betweening." The term is borrowed from traditional cartooning. The starting and stopping positions for a short animated sequence were created as key frames by a principal character artist. One key frame displayed how the object or character appeared at the beginning of the sequence; the latter displayed how it looked at the end of that same sequence. Teams of in-betweeners would draw and paint the frames that would be inserted in between these two key frames. Hence, the term, "in-betweening" (OR as Flash calls it, "tweening.") Using Flash, you can define objects or symbols as key frames. The frames in-between them can be geerated automatically and accurately by computer system.
In this activity, you will create a text object (your name, perhaps) that will appear as a banner across a Web page. The text banner will appear to grow in scene. As it zooms into view, it will also change colors for an added special effect. As a final test of the animation, you will be asked to export or convert the Macromedia Flash file (or movie) to a more general format, an animated GIF. Animated GIFs are streaming graphic media that display animations as a sequence of frames from a single initial image file. The data is streamed because the animation will ofen commence before the entire sequence of frames have been downloaded or fetched. Animated GIFs are common on Web pages and most browsers do not require any special plug-ins to display them. Flash movies, on the other hand, do require a special plug-in. Fortunately, Flash makes it very easy to export its movies to other formats. To view a specimen of the finished product for the first portion of the activity, inspect the Web page, sample.htm.
As mentioned, Flash calls our featured technique, "tweening." And, for Flash, there are two specific types of tweening: motion and shape. Motion tweening involves the translation or movement of a figure over a prescibed line or curve. Motion tweening can involve other kinds of changes to the size or look of the object. For example, growing or shrinking in size are candidates for motion tweening. Technically speaking, a few other effects also qualify. To be specific, you will employ color changes in this activity as another instance of motion tweening. In the first part of the activity, you will create an animation incorporating simple linear motion along with size and color change. The second part is an exercise that features adding a motion guide to create a more complex movement.
The basic technique involves these stages.
• create or place the object on the stage in the starting keyframe and convert the object to a symbol. The object should exist in a separate layer from other objects on the stage.
• insert a keyframe in the timeline where you want the animation to end. While the keyframe is active, move the object to its ending position. (You may also modify the size and color of the object in the ending keyframe.)
• select the keyframe and change the frame properties to motion tween.
• test and save the results.
Part One
1. Open a New movie document and select Frame 1 in the Timeline. Save it as Text. (Flash will add a fla extension,)At this point, you will create a large text banner with a drop shadow. This is done by composing two graphic text layers to look like a text banner with a shadow.
2. Click the Text tool (marked "A" in the toolbar) and choose Font from the Text menu. (Hereafter, we will indicate menu choices like this one by the sequence Text/Font for convenience.) Pick an appropriate size from the same menu(i.e., Text/Size), for example, 24 pts. or smaller.
3. Notice that the mouse pointer converts to a cross-hair figure. Click the text pointer inside the Stage area and type out your message. (For example, the banner could be your name.) With the default settings, the text will be black. This will serve as our background or shadow for the colored text layer.
Next, you will create a new layer with the same text, but of a different shade or color.
4. Choose Insert/Layer. This will create a new layer, initially called "Layer 2." Layer 2 sits atop the previous layer, so you can create the colored text for the banner in this layer. Choose the text tool again, but this time select a different color. Click on the color chip on the right side of the workspace to reveal the color palette. Select a suitable shade and type in the same text as before.
5. With the Arrow tool, select the new layer text. Move it into position just below and to the left of the original darker text. (NOTE: You may use the arrow keys for finer grade movements.) Position the two layers as shown in Figure 1.
Figure 1. Creating a drop shadow effect. The colored text is moved into position on top of the darker text.
TIP: To make the layers easier to use, change their names for better identification. Here's how. Double-click the layer name in the Timeline window. You can now edit the name as desired. In this instance, use a color word to distinguish layers--such as "black" and "gold."
6. Select both layers. (Using the Arrow tool, press and drag a large rectangle around the two text objects.) Boxes will form around the text objects. Drag the combined objects to the top and center of the Stage area.
7. While both layers in Frame 1 are selected, choose Insert/Create Motion Tween. Flash turns both objects into symbols.
ASIDE: Symbols in Flash are objects that have a prescribed behavior for a specific number of frames. For example, a symbol may be animated. Symbols may also be reused elsewhere in the same movie or other movies.
8. Now select both layer positions in Frame 5 in the Timeline window. Choose Insert/Keyframe. Flash duplicates the symbol across the intervening frames.
Figure 2. The objects in Frame 1 - 5 are converted to symbols which may be animated.
To create the animation, you must change last key frame. Flash will automatically create the intervening frames using in-betweening. In this instance, you will modify both its scale and position to make the text banner appear to zoom in the foreground.
9. With Frame 5 as the current frame, choose Modify/Transform/Scale. Handles will appear on the outline for the grouped objects. Click and drag the corner handles until the text is enlarged to the full width of the Stage area. Also, you may want to move the text to the middle and center of the Stage.
At this point, you may test your animation. Select Frame 1. Choose Controls/Play to see it displayed frame-by-frame. Finally, you will add a special effect of color change to complete the animation.
10. With Frame 5 as the current frame, select the bright color layer only in Frame10. Again, choose Insert/Keyframe. This will create a new sequence of frames from frames 6 through 10.
11. While Frame 10 is the current frame and the colored text object is selected, consult the Properties Inspector. Click the down arrow next to the Color list box. Choose Tint from the drop-down list. Choose a new color swatch (from the drop-down menu next to the Color list box). In the sample version, fo example, a special effect was chosen to morph the colors from gold to blue.
12. (Deselect the colored layer.) Select the black layer in Frame 10 in the Timeline. Again, choose Insert/Keyframe. This will copy the shadow layer from frames 6 through 10. (This layer does not need to be altered, because it remains the same in the sequence.)
You may test the finished animation as before: select Frame 1 and choose Controls/Play. As a last stage for the project, you will convert the Flash movie to an animated GIF. The latter can be employed on most browsers without the addition of a Flash plug-in.
13. Choose File/Export Movie. A dialog box will appear asking you to specify a name and file type for the movie. Enter a suitable filename. Choose Animated GIF from the pull-down menu below the file name box. Press Save. Flash will display one more dialog box to find out what settings you wish for the subsequent animated GIF image file. Enter 1 in the box for the number of repetitions. (This will cause the animation to play once. The value of "0" creates continuous repetition or an infinite loop.) Press OK.
14. Finally, to test your new animated GIF, create an HTML file and post the image on the page. When you view the page through a browser, you should see your animated text banner come to life.
This completes the first portion of the activity.
Exercise
Create an animated GIF for a web page similiar to the version ladybug.html.
Open the file bug.fla. It contains a simple graphic of a ladybug. Save the file as ladybug.fla. Select the entire figure. Convert the graphic to a symbol (Choose Insert/Convert to Symbol. Make sure that graphic check box is selected.) Converting it to a symbol will consolidate the figure into a single. Find the layer and rename it "ladybug."
Select the ladybug layer. Resize and scale the graphic as shown in Figure 3.
Figure 3. The Motion Guide Path is shown here. The graphic symbol is aligned on the path in Frame 1.
Create a motion guide layer above the ladybug layer. (Select Insert/Motion Guide.)
Using the pencil tool (with the smoothing effect), draw a path similar to the one shown in Figure 3.
With Frame 1 in the ladybug layer selected, position the graphic center directly over the start of the line.
Click Frame 36 in the same row containing the symbol (i.e., the ladybug layer just below the Guide
layer). Choose Insert/Keyframe. With the Arrow tool, drag and center the graphic over the end point
of the path as shown in Figure 4. Likewise, rotate the graphic so that it is aligned with the path as shown in Figure 4.
Figure 4. In Frame 36' the graphic symbol is realigned to the endpoint of the Motion Guide path.
Select Frame 1 for the ladybug layer and choose Insert/Create Motion Tween. In the Properties Inspector, check the Orient to Path box. (The latter will cause the graphic to bend and swerve along the path.)
Turn the path layer off. (With the Guide layer selected, click the dot in the Eye column. When it turns to an "X", the path disappears.)
Save and test the animation. Export it as animated GIF and install the image on a Web page similar to the example. Be sure that it includes your name at the bottom of the page.
( sources : http://cs.furman.edu )