Using Macromedia Flash for Animation
Before we begin, let's discuss how Flash works. Flash uses a technology called Vector Animation. A vector is just an area. Flash records data about chunks (vectors) of your animation, such as color, size, and shape, then records how that vector changes over time. Because of this technology, Flash can crunch a lot of animation into a very small file size. Flash really creates two files, the .fla file and the .swf file. The .fla file is the file that is used in creating your animation. It can be very large in file size and contains all of the elements (sounds, images, shapes, colors) that are being used in your animation. The .fla is like the library that you can use to create the animation. The .swf (Shockwave Flash) file is the file that you put on the Internet for everyone to see. It is created by taking the necessary elements from the .fla file and compacting them into one .swf file. You cannot directly edit a .swf file. You must edit the .fla file, then export the .swf file for use on the web. For this reason, you cannot take somebody else's Flash animation from the web and make changes to it. To edit a .swf file, you must have its associated .fla file.
Because Flash uses vector animation, there are a couple of suggestions that can help your file be much smaller in size:
OK, let's create some animation. I am assuming that you have a basic understanding of the Flash toolbar and some of the menus as we begin these examples.
Before You Begin
Before you begin your animation, you should decide what you want the animation to do. Sketch it out if you need to. Also, determine a frame rate before you even begin. Changing the frame rate after you start drawing can really mess things up. Change the frame rate in the Modify...Movie.. menu. The default is 12 frames per second, which is probably great for most animation. Also set the dimensions of the movie and the default foreground and background colors before you start adding things to the movie. The default is 550 X 400. This is an excellent size for movies that will fill the browser window. Colors and size are also changed in the Modify...Movie...menu. OK, let's start animating. FOR THE NEXT LITTLE WHILE, YOU WILL WANT TO FOLLOW MY DIRECTIONS EXACTLY OR I PROMISE THAT YOUR ANIMATION WILL NOT WORK THE WAY IT IS SUPPOSED TO.
Motion Tweens and a bunch of terminology
Don't be confused by the word tween. It just means animation or a change over time. Motion tweens are the most common type of animation. Begin by opening a new, blank movie - File...New. The new movie will have one layer and one frame. A frame is one chunk of time. The ruler (timeline) across the top of the window measures frames. A Keyframe is a special frame that defines any change in the contents of that layer. So, if we want to add something to our movie, we must change it, so we're going to need a keyframe. To add a keyframe to the first frame of the first layer, place you mouse there and either Right Click and Select Insert Keyframe or press F6.
Now that we have a keyframe, we can add something to this movie. Select
the Oval tool (looks like a circle) from the toolbox. Use
the modifiers (found below the toolbox) to change the border color
(first modifier) to blue and the fill color (bottom modifier) to red. Now click
and drag to draw an oval on the stage. The size doesn't really matter,
but try to make it an oval that is not a true circle (like an egg). It should
look something like this:
Once a keyframe is defined, the contents of that keyframe will continue to appear in the movie until the movie ends or another keyframe takes its place. In other words, this keyframe really places the oval into the movie until there is another keyframe in the same layer that has different contents. Before we can make an animation involving the oval, we must make the oval into a symbol. A symbol is an element that can be acted upon and can be used over and over again. To change the oval into a symbol, make sure that it is selected (if its not, select the arrow tool and click and drag over the entire oval - be sure to get the border of the oval also, it's really a separate element) and press F8 or click the Insert menu...Convert to Symbol. Flash will ask you what you want to name the symbol, call it Oval and hit OK. See how the oval now becomes an independent element in the movie.
Now click on frame number 20 in the timeline. Be sure to click within Layer 1. Notice that nothing happened. The keyframes contents (the oval) continue to display in frame twenty. Create a keyframe at frame number 20 by pressing F6 when frame 20 is selected. Notice that the oval symbol is still there, but it is now selected. When a keyframe is created, it automatically contains the same contents as the previous keyframe. Remember that keyframes indicate a place where change is going to occur in the movie, so lets make some change. While still in the keyframe at frame 20, select the Oval symbol and drag it to another location on the stage.
Now go to frame number 1 and hit the Enter key to watch your movie. Enter will play the movie in the stage the same way it will display when you put it online. Notice that the oval displays for the first 19 frames in the original location, then it jumps to its new location in frame 20. Because you have only defined up to frame 20, the movie stops there.
To create the motion tween between keyframe one and keyframe 20, click anywhere between frame 1 and 20 and select Insert...Create Motion Tween or right click and select Create Motion Tween. See the purple background and the arrow between the two keyframes, this indicates a motion tween. Go to frame 1 and hit Enter.
Your movie should look something like this:
Press the Play button to watch the movie.
Variations on a Motion Tween
There are many other things that you can do with motion tweens. One is to tween
the color effect. To make a color effect tween, you must change the color of
one of the keyframes in your animation. Select frame
number 20. Notice that the oval symbol is automatically selected.
Now double click the oval on the stage.
This opens the Instance Properties box. An instance is an occurance of
a symbol in your movie. Make sure that the Definition tab is selected at the
top of the Instance Properties window. Here you can edit the symbol itself.
If you decided that you wanted the oval to be green rather than red, you could
simply edit the symbol by selecting the Oval symbol, right clicking and selecting
Edit Symbol or Edit Symbol In Place, then using the paint bucket tool to change
the colors. EDITING THE SYMBOL WILL CHANGE ALL INSTANCES OF THAT SYMBOL.
We don't want to change all instances of the symbol, only the instance found
at keyframe 20. Select the Color Effect tab in the
Instance Properties box. This allows you to change several of the
color characteristics of the instance of the oval symbol at keyframe 20, but
nowhere else. Select Alpha from the Color
Effect drop down box. Change the Alpha value to around
30%. Click OK. Go
back to frame one and hit Enter to see how the motion tween now includes
the change in color effect between the two keyframes. It should look something
like this:
If you want to change the actual color within a motion tween, then you will need to use the color effect tab in the Instance Properties box, or you can tween colors using a shape tween, which we will cover in a few minutes.
To add a rotation to the tween, double click on keyframe
1. To modify a tween, you must double click on the keyframe where
the tween begins. This opens the Frame Properties window. Select
the Tweening tab across the top. You can add rotation to the tween
by selecting clockwise or counterclockwise and the number of times you want
symbol to rotate. Change Rotate to Clockwise and the
number of times to 2. Click OK and go to frame one and hit Enter.
The movie now includes the motion tween, the color effect tween, and the rotation.
What is really cool is that this animation is less than 1 Kilobyte or approximately the same size as a webpage with one paragraph of text. In fact, if I were to convert one frame of this animation to a gif, the gif would be bigger than all of the frames of this animation put together. Vector animation is awesome for compression.
If you want to change the size or rotation of the motion tween, just make the
change at either or both of the keyframes. Select Keyframe
1. Click the scale button (below
the toolbox). The arrow tool in the toolbox must be selected before you can
select the scale button. Using the symbols resize handles, resize
this instance of the symbol until it is approximately twice as big
as before. Select the rotate button (next to the scale button) and rotate the
instance slightly. Hit Enter to see the animation.
See how the oval gets smaller.
A few hints about motion tweans.
Shape Tweening
Shape tweening allows you to twean from one shape to another shape. Shape tweaning does not work on symbols, only on shapes that have been broke apart. Using the methods above allows you to make a lot of changes during the animation of one symbol. Shape tweening is used for very different shapes and colors. Instead of creating a new movie with a shape tween, let's add the motion tween to our existing movie. Remember, you can only tween one symbol per layer, so we will need to create a new layer.
To the right of the timeline is a label that says Layer 1. Click on that label. Right click, and select Insert Layer. A new layer, Layer 2, appears above Layer 1. Click in frame 20 of Layer 2. Create a keyframe (F6).
First of all, Shape Tweening only works on shapes that have been broke apart. You cannot shape tween text, symbols, or grouped shapes.
Notice that the new keyframe is displayed with a hollow circle, this indicates an empty keyframe. Select one of the drawing tools (line, oval, rectangle, pencil, or brush) and draw a shape at the new keyframe. Don't use the text tool yet. Make sure you are drawing in the correct layer, Layer 2 (it will be highlighted). Draw any shape that you want to. Notice that once the shape is drawn that it can be selected with the arrow tool. If you used one of the tools listed above, then the shape is already broke apart or displayed pixel by pixel, rather than as a symbol or grouped shape.
Go to keyframe 40 and create a new keyframe in layer 2. See how the shape from the previous keyframe is automatically selected. With frame 40 selected, hit the delete key to delete the shape that was previously drawn. If you play the movie, the shape will display from frame 20 until frame 39, then disappear. The keyframe at frame 40 is empty. We are going to shape tween the shape in frame 20 to some text in frame 40.
Select keyframe 40 in Layer 2. Select the text tool from the toolbox. You can use the modifiers to adjust the color and size. Now type your name in approximately the same place that you drew the shape in frame 20. Remember that text cannot be used in a shape tween unless it is broken apart. Click on the Modify menu...Break Apart. The text is now broken apart or displayed pixel by pixel. Once text is broken apart, it can not be put back together and edited, so make sure everthing is exactly how you want it before you break it apart.
Now that we have the two keyframes that will be used in the shape tween, let's tell Flash to do the tween. To create a shape tween, you must double click the first keyframe involved in the tween. Double click the keyframe in Layer 2 at frame 20. Select the Tweening tab in the frame properties box. Change the tweening drop down box to display Shape and press OK. Notice the green background indicating a shape tween in the timeline. Now go to the beginning and play the movie.
To further modify the shape tween, you can edit either of the shapes in the two keyframes. Try moving them or resizing them or painting them a different color. You can also use the Frame Properties box to set Easing. Easing In will make the shape tween start slowly and finish faster. Easing Out tweens rapidly at the beginning of the tween and slows down toward the end. You can literally shape tween anything. The only trick is that the shapes be broken apart at both ends of the tween. If you want to shape tween an existing symbol, you must break it apart first (Modify...Break Apart). You can also use shape hints to guide how the shape tweens. Refer to Flash's help for information on shape hints.
ACTIONS
Actions control how the movie flows. You can only add actions to keyframes. To add an action, double click on a keyframe, select the Actions tab of the Frame Properties box, and use the + button to add an action. The most common buttons are Go To, Play, and Stop. Go To allows you to make the movie jump to any other frame in the movie. By default, Go To will go to the frame and stop, if you want the movie to continue playing at the selected frame, then be sure to check the Go To and Play checkbox. You will also notice the ability to Go To other scenes. You can have multiple scenes in the same movie and seamlessly link them together. Multiple scenes make creating and editing lengthy or complex movies much easier.
Play is typically used with buttons, which we'll discuss next week.
Stop allows you to stop your animation. You probably noticed that your movie, when previewed will loop over and over again. Add a keyframe at the end of your movie and give it a Stop action. The movie will only play one time then stop. Stop is also commonly used with buttons.
PRELOADERS
Because long and complex movies can take some time to download on slow Internet connections, you may want to add a preloader to your movie. With very fast Internet connections, preloaders have little effect. With slow Internet connections, often movies will play at a faster rate than they can be loaded. This causes the movie to stop or be very jumbled. Preloaders are an easy way to remedy this problem. A preloader uses actions so that the movie will not play until a certain amount of the movie is loaded.
A simple preloader uses three keyframes, each with different actions. The preloader should be the first several frames of your movie. First, create a shape, text, or animation that tells the viewer that the movie is loading. Try to make this preloader message simple and no more than 20 or so frames in length. Typically preloaders will just display the word "Loading". At the end of this preloader message, insert two keyframes. The first of these keyframes will contain two actions. The first action is the If Frame Is Loaded action. This action tells Flash that if a specified frame of the animation has been downloaded to the browser to do the next action, if not, keep playing the movie. Once the If Frame Is Loaded action is added, add a Go To action. This action will only be used if the frame in the If Frame Is Loaded action has been downloaded. If that frame has yet to be loaded, then the Go To action is ignored and the movie goes to the next frame and continues to play. The Go To action should be set to go to the beginning of the movie, typically two frames beyond the current keyframe. It usually is set to Go To and Play by checking the appropriate check box in the Actions window.
The second of the two keyframes will also contain a Go To action and will be set to Go To and Play Frame 1. This action will make the movie start at the beginning again. However, if the If Frame Is Loaded action indicates that the specified frame is actually loaded, then this Frame will be skipped.
The third keyframe will be empty, so that the preloaded message will no longer display. This third keyframe usually is in the same frame number as the beginning of the body of the movie. Here's an example.
This Preloader is 11 Frames long. In Frame 10, I placed the If Frame 50 is Loaded action. If frame 50 is indeed loaded, then the movie will Go to and Play frame 12, skipping frame 11. Frame 11 contains a Go to and Play frame 1 action - starting the movie from the beginning. Frames 1 throught 11 will repeat until Frame 50 of the movie is loaded, at which point, the repeat action in frame 11 is skipped and the movie begins playing at frame 12. Pretty cool, eh? Here is what it will look like (I have placed a button at frame one to keep the movie from looping):
In this example, the preloader (frames 1 - 11) will only play once, because the movie is very small. If this were a long movie, I would set the If Frame Is Loaded to a frame near or at the end of the movie. Usually you want to set your preloaders to accomodate the slowest Internet connections. As a rule, you typically want 80 to 90 percent of the movie loaded before jumping out of the preloader. More advanced Flash programmers will add more than one preloader in a movie, to ensure that the movie is amply loaded before continuing. For those of us (...or I should say you) with fast connections, you probably will never know the difference.
Exporting Movies and Embedding in Webpages
Remember that Flash uses two files - the .fla file is the one used to create the animation, the .swf file is the animation that is added to the website. The fla file will be used to create the swf file. In Flash, you export a movie to create the smaller swf file. Go to File...Export Movie. (Notice that you can also import things like images, sounds, other movies, etc. and can export images or snap shots of your movie.) Flash will then ask you for the name of the swf file you want to save and where you want to save it. The Export Flash Player window then appears. This allows you to specify certain settings of the swf file. Load Order should be set to Bottom up or from first to last. The four check boxes allow you to set security and sound settings. Protect from import and Omit Trace actions stop others from using your movie, but also increase the file size slightly. The JPEG Quality will set the quality of all the drawings in your movie. The higher the quality, the higher the file size of the swf file. 50 is usually plenty, and even less is usually best. Most Flash animations do not use multi-colored, detailed drawings and setting this to 20 or 30 will have no effect except in reducing the movies file size. If your movie has sound, you can set the quality (and size) of the sounds. The Version window allows you to specify the version of Flash player that will be required to view the animation. I would suggest setting this to Flash 3, unless you are using features that are only available in Flash 4. Many viewers have not yet downloaded the new Flash 4 player and may not want to. Setting version to Flash 3 will typically have no effect on you movie, but will allow more people to view it without upgrading their Flash player plugin. Click OK when you have
Once you have exported the movie, you now only need to add it to a webpage. There are two ways to do this.
First, you can Publish the HTML required for the animation directly from within Flash. File...Publish will create an HTML file,which contains the proper coding for the movie to play in the same directory that the fla file is saved in (be sure the fla file is saved before publishing). File...Publish Settings allows you to change some of the settings used in the Publish feature. The Publish feature will create a webpage that contains only the movie. It uses the EMBED and/or OBJECT tags to place the movie in the page.
A second and even easier way to create the HTML for the animation is to use Dreamweaver. In Dreamweaver, select Insert...Media...Flash, then browse to the swf file. By using Dreamweaver, you can easily change setting for the animation, such as quality (works best if set to AutoHigh), size, borders, and so forth. Dreamweaver even has the Flash Plugin built in, so you can preview the animation right in Dreamweaver.
If you don't have Dreamweaver and want more than just the animation in the web page, I suggest Publishing the HTML from Flash, opening that HTML file in a text or HTML editor, then copying the HTML coding for the animation (usually the EMBED tag) and pasting it in another HTML file that you can then edit and add to.
Well, hopefully that's enough to get you excited about Flash. We'll discuss some advanced features of Flash next week.
Return to Class Homepage.