You are currently browsing the archive for the tutorial category.

I originally posted this tutorial on how to do time saving tweens on another blog for a class, but I thought it would be helpful if I reposted it here.

It seems that whenever I mention to someone that I do most of my work primarily in Flash, their response is something along the lines of:

“Oh, I want to learn flash…but it’s so complicated”

And I guess this is true, but it’s not unlike other mediums where it takes time to really master the craft. You just need to start off simple, and work your way up to becoming a true FLASHMASTER.

I remember having an early version of flash on my computer that just sat and intimidated me for a few months. After a few false starts, I’d finally gotten my feet off the ground and was making some very basic (and crude) stuff. But the main thing I remember thinking was to challenge myself a little more each time. Eventually, the flash files started becoming more complex and everything just started to click. What makes Flash such a popular program is that it offers the ability to save time on projects by doing things like reusing symbols. I picked up a lot of little tricks along the way, and now it’s time to share my vast compendium of knowledge.

So here’s what you look at when you finally have enough courage to double-click on the program. For reference, this i Flash 8 Professional. At the time the time it published by Macromedia, but it was subsequently eaten by Adobe. Anyhow, here’s the parts that are well important. I don’t know how different this is from the newer version, CS3, but I’d like to think this is the superior version for particular reason.


  1. The Stage – This is where all the action takes place. Whatever occupies the white space will essentially be what is in the “camera’s” frame. Unfortunately, the camera is fixed into that space and can’t be moved around. There is, however, a free open-source camera made out of actionscript that is super awesome, but we’ll get into that later.
  2. Properties – This bar down here houses the properties, filters, etc. If you have nothing selected then it will default to the movie properties. More importantly, you can (and should!) change the size of the stage and the frame rate of your flash. As an artist, you shouldn’t let the default size dictate how your movie looks…take control! You can change it to whatever size you want, but be mindful that larger areas can cause performance issues in the playback. You may also want to keep in mind that if you ever plan on having your flash shown on tv, you’ll need for it to follow certain guidelines. The standard TV Aspect Ratio is 4:3 and the HD ratio is 16:9. Framerate is also something to consider. The lower the framerate, the less frames you have in your timeline, but the choppier your animation will look. And the inverse is true for the higher your frame rate. The default is 12, but generally people generally work at either 24 or 30. For all intensive purposes, we’ll be working on a 480×360 surface at 30fps.
  3. The Library – This is where you keep all of your symbols/media files/meats/cheeses. It’s advisable to get into a habit of keeping your symbols in some kind of order. Even if you’re working on something small, you never know when you may want to pull a symbol you did from an earlier work.
  4. The Timeline – This is where you control the animation. Back in the day, animators had to draw everything by hand and they had to adhere to these rigid timesheets that dictated what frames went where and whatnot. This is similar, but a whole lot more friendly and flexible. We create a keyframe for each point in where the action changes and layers for the different pieces of our movies.
  5. Tools – Here’s where all the tools are kept. We’re going to want to focus on two of them now. The pencil and the brush create the two different types of vector and those are lines and fills, respectively. Explaining it is a little weird until you can actually see how they both work, but basically you create the lines with the pencil, and these lines look crisp and can be manipulated rather easily. The brush offers a more expressive way of creating lines. The caveat though is that fills can not be as easily manipulated as the line.

So enough of that junk, let’s get to the good stuff.

The first thing we’re going to do is jump right into the fray and make a character. It doesn’t have to be anything fancy, or complex. In fact, the simpler it is, the easier it will be for you to animate it.

What I’ve done is just create a simple little creature and I’ve converted it into a symbol. You can do that by going to Modify -> Convert to Symbol or just by simply pressing f8. Give your person a name and make sure that ‘graphic’ is checked. I’ll get into the differences between graphics and movieclips later.

After you’ve accomplished that monumental feat, double click on your new symbol and you’ll enter in the symbol editing mode. You’ll notice that the symbol has a timeline of its own, this is well important.

select frame 4 and the go to insert -> timeline -> blank keyframe or you could just press f7, so much easier. Repeat this step another three times, and now you should have 4 blank keyframes. Now we’re going to want to create a simple walk cycle for this little guy. There’s a little button below the timeline that allows you to onion skin the animation. What this does is create a visual aid of a faded image of what is before and after the current keyframe you’re on. It’s a very handy tool that you can use instead of moving back and forth between frames. Note though that the onion skins only show up on the timeline, and will not be visible when you play back your animation

So now you’re going to want to redraw the character in the blank keyframes. For now, you should just be drawing the outline of the character. Coloring your figures after every frame certainly isn’t illegal, but you’ll really be wasting a lot of time. I guess I shouldn’t assume that people reading this know exactly how people walk. I mean, it’s simple enough to walk, yeah. But have you ever really studied how people walk?

Here’s the cycle that I’ve done. It’s not a true walk cycle since the first frame in the resting position, which means that when this thing is looped, it gives the illusion of walking and stopping. One handy thing you can do is copy the first frame and paste it after the last frame, and that way you can make a smoother loop. This is what’s going on in that image above.

After you’re done drawing the outlines, you’ll want to give the character some sort of mass, so we’re going to want to fill in the blank areas. The paint tool looks like a paint bucket, and it’s right under the brush. Don’t forget to fill in gaps that may not be connected to the main area, such as the right foot in the image above. Also, be mindful of areas that you will want to fill in as white since the background it also set as white. You may want to choose an off-white color for the eyes. It’s an easy fix, and it may make you look like a genius.

After you’re done coloring in all the bits, return to the main timeline. You can do this by clicking on the scene name (which in this case is scene 1) or by simply double clicking any area that is outside your symbol. By weary that you haven’t accidentally double-clicked at some point and have been working on the main timeline this whole time. Now, if you take your mouse, click 0n the first frame of the animation, and drag it all the way to the end. You should see your animation move in place. (If it doesn’t, you need to go to properties and select ‘loop’ from the dropdown menu next to where you see the ‘swap’ button.) So our little guy has a hot date tonight and he needs to get across the stage. We can totally help him out. We’re going to want to create two keyframes: one where he begins the walk cycle, and another as soon as he stops. If you’re looking at the image above, I’ve done just that. With the second keyframe selected, I’ve also moved our character a little to the left. If you run your mouse over the timeline again, you’ll see that the animation now runs in place, and then jumps a little to the left. This is where our friend, the tween, comes in handy.

Tweening fills in the difference between a symbol on a timeline. It’s basically filling in all the positions inbetween my two keyframes so that I don’t have to. It’s important to note though, that you can only tween one symbol per layer. If we were to have two symbols on one layer and then try to tween them, it would cause a mess. To work around this, people have created vast networks of layers for each of the different parts of their characters so that they could tween each individual part. Personally, I think that takes up way to much time. Not only that, but it looks incredibly cheesy and stale. So tweens are great in moderation. Ok, so where was I? Oh yeah, we’re going to tween the two keyframes we created. To do that, you click on the first keyframe you made and either select ‘motion tween’ from the dropdown box that has appeared in the properties menu, OR just right click on the keyframe and select ‘motion tween’. If you did it correctly, the space between your keyframes should be shaded blue and there should be a line running through it. Now the little guy should be able to get to his hot date. You can repeat this a few more until he gets all the way across, for practice, if you want.

So here's the final product. It may not look like much, but what we've essentially just done is cut out hours and hours of tedious work. We've learned how to create a symbol, put a simple animation inside of it, and then tween that symbol: Totally Bradical, Dude!

So, I hope this was at least somewhat informative. I don't know, I tend to ramble sometimes, or make huge oversights. I'll probably find one later and then scold myself for such a dishonorable act. Here's the source file. You can look at it, pick it apart, deface it, or whatever. Just don't publish it somewhere and claim it as your own, although that should be pretty obvious.

Download the .FLA file (flash mx or higher)