Week 15

Monday May 16

Tuesday May 17

Continue using flash to finish your Circles and Diamonds assignments

When these are finished complete the following:

Frame-by-Frame Animation

With frame-by-frame animation, you actually create a new image for each frame, and then the frames are played back quickly at a preset frame rate to give the illusion of movement. This concept is easily seen in the real world if you've ever seen a flipbook. When you draw a slightly different image on each page of a flipbook and then flip through the pages quickly, you are given the illusion that the drawing is moving. The same principle is used when doing frame-by-frame animation in Flash. We draw each frame separately and then run through them quickly to give the illusion of animation and movement.

Let's create some artwork to animate. You need to begin with a new file open and no previous artwork on your Stage. Now we'll begin by using the Paintbrush to add a single dot to the center of the Stage. Let's make our brush size a little smaller so that we can draw with it without crowding our Stage. After adding the dot, you'll of course notice that our first frame has become a keyframe. To animate this dot from this point using frame-by-frame animation, we'll need a fresh new keyframe that is empty, much like a new piece of paper in our flipbook. To create this new empty keyframe, simply press F7 on your keyboard or Insert > Blank Keyframe on the menu bar. You'll notice that our dot has disappeared. Well, it hasn't actually been deleted; it is just hidden from view. If you look at your Timeline now, you'll see that on frame 1 we still have our keyframe that was created when we added the dot, and now on frame 2 we have an empty keyframe that we just added to the Timeline. Frame 2 has become our new empty frame. If you'd like to see what you've created on frame 1, you can always grab the pink slider and move it to the frame you'd like to view. The problem that we face now is that we need to continue making slight changes to our dot for each new frame that we create, but we can see only one frame at a time. There is a really cool Flash Timeline feature that allows us to see multiple frames at the same time and thus solve our problem while doing frame-by-frame animations: Onion Skinning .

Fig. 5.1. Onion Skinning button

Go ahead and click the Onion Skinning button as shown in figure 5.1, and you'll see something quite interesting. You'll see the artwork that you've just created on frame 1, even though the slider is on frame 2. The only difference is it's slightly faded. This is to tell you that what you're seeing doesn't actually exist on the frame you're on. Now let's look at our Timeline. You'll notice that two black braces have appeared just above our frames (see figure 5.2).

Fig. 5.2. Onion Skinning frames along the Timeline

These braces represent the range of the Onion Skinning. You can extend or reduce the range depending on how much of your Timeline you'd like to see in Onion Skinning mode. We'll look at how to do that in just a moment, but first let's continue with our animation.

I'm going to continue by drawing on frame 2 a small circle that goes around the dot we drew on frame 1. Make sure you are on frame 2 while drawing this, or else you'll be adding more artwork to whatever frame you're on. The result should look something like that shown in figure 5.3.

Fig. 5.3. Using the Paintbrush tool, frame 2, outer circle

Now we'll repeat this process, beginning with using the F7 key to insert a new blank keyframe, and add a circle slightly bigger than the previous one on each keyframe. Let's repeat this until the last circle is on frame 5 of our Timeline. Your results with Onion Skinning still on should look something like the image in figure 5.4.

Fig. 5.4. Using the Paintbrush tool, frame 5, outer circle

You may also notice that your Onion Skinning braces, mentioned before, have moved slightly and don't extend from frame 1 to frame 5. This means that the only frames visible to you are the frames within the braces. If you want to see all five frames at once, you may simply grab the tiny circle in the middle of the left brace and drag the brace back to frame 1 and do the same with the right brace, dragging it to frame 5. For larger animations, you may have to adjust these braces throughout your work.

Now let's see what our animation looks like without the Onion Skinning. Remember, Onion Skinning is simply a visual tool, and your final animation will not reflect the visual effects you see while using it. That being said, turn off the feature by pressing the Onion Skinning button again. Now you can preview your animation by pressing ENTER (Windows) or RETURN (Mac) on your keyboard.

Congratulations! You've just created your first animation in Flash. It is just like the flipbook: We created a different piece of artwork on each frame and then pressed ENTER / RETURN to play the frames back at a fast enough rate to trick our eyes into seeing movement.

While this is an effective and necessary form of animation, there are some obvious drawbacks to doing things this way. Clearly the amount of time it would take for a complex animation would be hard to imagine. And unless you are a professional animator, your animations will likely end up choppy and inconsistent. For example, let's say you want to simply move the circle we have on frame 5 to the corner of the Stage. That could take the better part of an hour, and it would look anything but smooth. Luckily, Flash has other methods of animating the artwork that we've created. One of these methods is a process called tweening . To put it simply, all tweening requires of you is that you define an original object and a final object, and then give Flash some frames in the middle, and Flash will animate everything in between. It may sound a little obscure right now, so let's look at how it's done.

There are two different kinds of tweening in Flash: shape tweening and motion tweening. The difference is simple: If you are animating a shape or any raw artwork, you use a shape tween; and if you're animating a symbol or a group, you use a motion tween.

We already have on frame 5 a shape that we have created, so let's begin by using a shape tween. As we said before, what if we wanted to move our circle to the upper-right corner of the Stage? Shape tweening makes it easy. For any kind of tweening, we need a starting point and an ending point. We already have the starting point (keyframe on frame 5), so let's add the ending point. We need to keep in mind that our animations are time-based, which means a five-frame animation, like the one we just created, on a Timeline running at 12 fps, like ours is, will play in a little under half of a second. That's fine for what we just did, because there's not a lot of movement. However, when we move our circle to the edge of the Stage, there will be much more movement, so we want to do this so that our audience can keep up with the animation. Therefore, let's put our ending point on frame 15 of our Timeline by adding a keyframe ( F6 ) on frame 15 (see figure 5.5). This will give the animation plenty of time to execute and give us a nice, smooth motion.

Fig. 5.5. Adding a keyframe on frame 15

Currently, if you play the animation it looks just as it did before. There is no change in movement from adding the keyframe on frame 15. That is because we haven't defined a change on frame 15. So let's do that now. On frame 15 we want to place our circle in the upper-right corner of the Stage. Remember that when moving shapes, you must select them first and then move them. Otherwise, they will just bend when you click and drag. Okay, we've moved the circle, but if you play back the animation, it just jumps from the center of the Stage to where we just put it when it hits frame 15. That's certainly not animated. We must first tell Flash to animate (tween) between these two keyframes. To do this, select any frame between frames 5 and 15 (excluding frame 15). Now let's take a look at our Property inspector. Once again, the Property inspector changes when we select a frame on the timeline so that we have some options we can set for frames. If your Property inspector isn't already visible to you, simply go to the Window menu and select Properties from the dropdown list.

You must have a frame selected to see the frame specific properties show up in the Property inspector. One of these new properties is Tween. Currently it has a default setting of None . Click this dropdown menu and choose Shape from the list. You'll notice that once this selection is made there are two Shape tween modifiers that become active in the Property inspector; Easing and Blend. Let's take a moment to explain how these two modifiers affect your animation. Easing is an option that allows you to control your animation s acceleration and deceleration. Setting the Easing value to a positive number between 1 and 100 will cause your animation to start quickly and finish slowly, whereas a negative Easing value will cause your animation to begin slowly and then speed up. By default, Flash will play any animation at a constant speed.

The second modifier for the shape tween is a little more obscure, and judging how to use it becomes slightly more subjective. A shape tween is a way of animating between two shapes, and the Blend option is a setting to let Flash know how you'd like it to create these animations. Setting Blend to Distributive , which is the default, will cause the animation to create smoother and more-irregular shapes during the animation. However, choosing Angular blend will preserve apparent corners and straight lines, which makes it the better choice for blending shapes with sharp corners and straight lines. Remember that tweening requires only that you set the starting point and ending point, and Flash handles what happens in between. Of course if you just move the shape, as we have done in our example, then the Blend modifier has no effect. The only time these settings have an effect that you can see is when the shapes at the start and end of your tween are different and require Flash to morph from one shape to another. That last part sounded interesting, didn't it? Well, let's take a look now at how we can use Flash and shape tweening to morph from one shape to another. But first, if you haven't done so, take a look at your current animation by pressing ENTER / RETURN on your keyboard. You'll see that our frame-by-frame animation runs seamlessly into our shape tween.

Note: You'll notice that there is an arrow and the frames are shaded light green. The light-green color represents the shape tween, and the arrow across all of the frames of our animation represents a working tween, meaning Flash is not having any issues with the animation we've created. We'll see some other indicators here in the future.

Let's see what happens when we let Flash not only move our shape but also change the shape itself. Let's begin by adding a keyframe on frame 25 of our Timeline. This gives our next animation an ending point, and we already have a starting point (the keyframe on frame 15). Now we'll need to make some changes to the circle on keyframe 25. Let's select frame 25, delete the circle that already exists, and replace the circle with an arrow that we'll draw by hand with the Paintbrush tool again (see figure 5.7).

Fig. 5.7. Drawing an arrow with the Paintbrush tool

All we have to do now to animate between our circle and the new arrow is add our shape tween as we did before, by selecting one of the frames between 15 and 25 and selecting Shape from the Tween drop-down list in the Frame panel. Instantly Flash has done the animating work for us between these two keyframes. To see your new animation, press ENTER / RETURN .

Note: You can add the shape tween before or after you make the desired changes on keyframe 25.

As you can see, shape tweening works quite nicely when we want to smoothly animate between two shapes and move a shape across our Stage. However, shape tweening does have its limitations. For example, if we wanted to simply rotate our arrow so that it were facing upward, we would run into some problems. When using a shape tween, Flash will see the downward-pointing arrow and the upward-pointing arrow as two different shapes and, as it did for us a moment ago, would morph between the two shapes instead of actually rotating the arrow, which is what we intended.

Shape tweening is generally used for morphing shapes or creating certain effects as we've just seen. Any other animation can be done with motion tweening, which is what we'll be using to actually rotate the arrow that we've drawn.

Motion tweening is the other type of tweening commonly used in Flash. It is used to animate groups, symbols, and type as opposed to shapes. The use of a motion tween comes in quite handy for us at this point, because we want to rotate our arrow. First let's add a keyframe on frame 35 of our Timeline as the ending point of our new animation, which will rotate the arrow. The rest of the process is very similar to using a shape tween. First we make the desired changes on frame 35. Go to frame 35, and here we are going to rotate your arrow so that it's facing upward.

To rotate the arrow, simply select the arrow by clicking it with the Arrow tool, and then click the Rotate modifier, which appears while using the Arrow tool (as mentioned in lesson 2). By doing this, you'll notice the eight circles that appear around the shape that you have selected (see figure 5.8).

Fig. 5.8. Rotating the arrow at frame 35

These are handles that allow you to rotate the arrow with your mouse by grabbing one of them and rotating the arrow to the desired direction. For our purposes, we're going to grab one of the corner handles and rotate the arrow until it's pointing upward (see figure 5.9).

Fig. 5.9. Finished rotation (180°) at frame 35

After making the desired changes on frame 35, we're now ready to add our motion tween. Let's do so by going to our Frame panel, and this time select Motion instead of Shape from the Tween drop-down menu. Once you have applied the motion tween, you'll notice that the Timeline adjusted to show the new animation much in the same way as when we applied our shape tweens. However, instead of a light-green color, representing a shape tween, we see a light-blue color, which represents a motion tween. And remember the solid arrow we had over our animation for the shape tweens? It's not there for this tween. Instead, we have a dotted line between our two keyframes. This dotted line represents a problem with the tween. Now look back to the Frame panel, and you'll see a caution button displayed below the options for your motion tween. If you click this caution sign, you'll see the issue that Flash is having with your tween. In our case, it's simple: We are trying to apply a motion tween to two shapes. The first shape is the downward-pointing arrow on frame 25, and the second shape is the upward-pointing arrow on frame 35. Remember, motion tweens work only for groups, symbols, and text, so we have a problem.

Of course we have created this problem for us on purpose. The purpose is to illustrate the differences between a properly working tween and one that has problems or isn't correctly set up. We can leave most of our Timeline in place while we make the appropriate corrections. The first thing we need to address is the issue of having shapes on either end of a motion tween. To correct this issue, we must convert our arrow into a symbol. The details of this process were covered in an earlier lesson, so let's move quickly through this. We need to have the same symbol on the first keyframe of our animation that we do on the last, so let's start by converting the downward-pointing arrow on frame 25 to a symbol. Remember, select the shape on that keyframe, and press F8 ; or select Convert To Symbol on the Insert menu to convert the selected shape(s) to a symbol. In this case, we'll convert the arrow to a graphic symbol and give it a name that makes sense, such as arrow .

Now we have a symbol on frame 25, but we still have a shape on frame 35. To correct this, we must go to frame 35 and start by deleting the upward-pointing arrow. However, we're not going to delete only the artwork off of the Stage. We're going to clear the keyframe on frame 35 altogether. To do that, select the keyframe on frame 35 in your Timeline, and press SHIFT + F6 or Insert > Clear Keyframe . Now we have a motion tween that is open-ended, meaning it doesn't have a final keyframe and is therefore incomplete. To correct this, we can simply add a new keyframe in place of the one we just cleared, by pressing F6 . Remember, when you add a keyframe, it makes an exact copy of the previous keyframe in the Timeline (in this case, the arrow symbol on frame 25), which gives us our final keyframe, which is a symbol.

Now you'll notice that the motion tween no longer has a dotted line, representing our animation, but does have a solid arrow, telling us that everything should be working properly. However, we have lost the rotation of the arrow, which we applied to the shape on frame 35 because we deleted the shape and replaced it with a symbol instance. To correct this, all we have to do is rotate the symbol instance just as we did with the arrow as a shape earlier in this chapter. Now we can play our Timeline and see the results of adding our rotation via the motion tween, and we can see a large gap in the animation where there is nothing on the Stage at all.

This gap happens from frame 15 to frame 24, and the reason for it is that we begin our shape tween on frame 15 with a shape, but we end it with a symbol on frame 25 where we converted the shape that was there to a symbol. Because a shape tween requires two shapes to animate between, Flash has decided to show nothing to let us know that there's a problem. To fix this, we'll need to make sure that there is a shape at the end of this shape tween. Obviously we don't want to reverse what we just did with the motion tween, or else we would re-create the other problem we were having. Instead, we'll fix both issues with two simple steps.

First go to frame 26 and add a keyframe by pressing F6 . The next step is to select the arrow symbol instance on frame 25 and break it apart by using CTRL / COMMAND + B or by selecting Modify > Break Apart . The Break Apart command converts the selected symbol, text block, or group back to its original objects. In this case, the original object is the arrow shape that we drew before. Now we have our needed shape on frame 25, and we have a symbol, which we need for the motion tween to work, on frame 26. Run your Timeline again to see that all of our issues have been resolved.

Let's add one more useful bit of animation to finish off our Timeline and give it a pleasant ending. Right now if we were to test our animation ( CTRL / COMMAND + ENTER / RETURN ), we would see that our animation begins nicely, ends rather abruptly, and then starts over. We can give it a nicer ending by simply fading out our final frame. We discussed adjusting properties of symbols in an earlier lesson, and we have of course already done one motion tween, so all we need to do to fade out our arrow symbol instance is to put these two techniques together.

Let's begin by adding a keyframe to frame 40 on our Timeline. As you can see, this adds a motion tween for us. Flash does this because of the way we added that final keyframe on frame 35. Remember, we added it after a motion tween was already put on frame 25, and anytime we add a keyframe it copies the previous keyframe exactly. This copy includes any tweening settings that the keyframe has (in this case, a motion tween). What a convenient little snafu for us. Our motion tween is already set up, and we are animating between two symbol instances. Therefore, all we have to do is change the properties of the instance on frame 40 to what we want, and Flash will do the rest. In this case, we want Flash to fade out our arrow, so all we have to do is change the alpha property of the instance on frame 40 to 0. To do that, select the instance on frame 40, go to the Property Inspector, and choose Alpha from the Color dropdown menu. Now simply set the alpha value to 0. Run your animation again, and you'll see that we have a nice little conclusion to the entire set of animations we've created.

Keep in mind that the length of the tweens that we have created is completely subjective. That is to say, they could be longer or shorter depending on how quickly you'd like your animations to run. If you'd like to make an animation longer, simply add frames between the beginning and ending keyframes (using F5 ). Of course, the opposite is also true. If you'd like to make your animations quicker, remove frames from them. Always remember that animations in Flash are completely dependent on the number of frames they are given and on the frame rate that your Flash movie is set to. Our Timeline is forty frames long and runs at 12 fps. This means that our entire movie will run in approximately 3.5 seconds. If we add frames to any of these tweens, it will take the movie longer to run, and our animations will run slower. The best way to get a handle on the concept of animation and timing is to practice, practice, practice.

We know what you're saying right now: "What about the tweening options that you mentioned?" Unfortunately the other options will be explained in the next lesson, where they are appropriately used.

Tuesday May 17

Begin creating a frame by frame animation of your choice.  Make sure that it is school appropriate (no blowing up or shooting school, me, teachers you know what I mean).  Try to do more than stick figures.