NOTE: This guide explains "essential" concepts, common problems, some tricks, and style, and it will grow as I think of stuff. For ActionScript or specific guides, try Kirupa.com.

----- INDEX -----
Intro | The Guide | Style & Story | Tips & Tricks | Glitches & Debugging

Flash Tools

For some reason I thought the easiest way to go through the tools would be in a video.
Here's part 1:

And part 2:


This Page Is Long, Eh?

This might sound like a mouthful, but the "basics" are actually most of what you need to know from a technical standpoint. Anything else is style, tricks, and experience. Learning several concepts at the same time might seem confusing, but they're simpler than they sound, and 90% of any movie is composed of just these basics. Technically, 90% of any movie is composed of about 10% of these basics.. there's more than you need to know here. Although, to be fare, 37% of statistics are made up on the spot.

Also, no one said making Flash movies was easy. In fact.. it's not easy. There was a time when it simply was not possible for one person to create a movie (or game) on their own (unless you devoted your entire existance to it). Now, with programs like Flash (not that I know of any other ones), it is possible. Just because it's possible doesn't mean it's walk in the park. But neither is anything in life.*

*..except for walking in parks. But parks are filled with bees, terrorists, and terrorist bees, or so I'm told.

The most important concepts below are Symbols, Key Frames, and Motion Tweens. This is the basis of Flash.

Your Friend: Undo + Redo

One of the most important things to know is the "undo" command; Ctrl + Z . You can undo dozens of actions in a row. To redo (if you went too far back), press Ctrl + Y . Note that if you undo, and then do something new (like draw something), you will no longer be able to redo.

Save! (and backup)

SAVE! Save save save save save SAVE save SAAAAVE. Save.
...save.

In the name of all that is holy, save your ****ing project.

..Just to be clear, you should save often. If Flash crashes, or your computer freezes, you'll be slightly less filled with rage. I've heard of someone working on a project for 10 hours without ever having saved, and then the computer crashes. That can't be good. Personally I save obsessive compulsively - at least once a minute. Just press Ctrl + S.

If you're working on a "real project" and not just learning / messing around, I'd also recommend backing up your file to a remote source, such as another computer, backup drive, server, etc. It will seem like a waste of time if you're planning for your computer to always work, but planning for luck is not reccomended. (I've lost more than one file from neglecting to make backups). Speaking of backups, it can also help to save different versions of your file as you go along, in case you suddenly realize that you deleted something important, or some other unforseen reason.

The Stage

Exercise: If you haven't done so, open Flash, and choose "File -> New", and create a new Flash Document, or click the shortcut on the "welcome screen" if there is one.

The "stage" is that big central area where you can draw stuff, and by default, the background colour is white. The area outside the stage is always grey. Anything drawn or placed "outside" the stage will not be visible to the viewer under normal circumstances. This is where you put things which should "come on" to screen, instead of magically appearing for no reason.

(Flash stage)

The Timeline & frames

The timeline consists of all the frames in your movie. There are only 2 types of frames - Key Frames, and "in-between" frames.

Key Frames are where everything changes. The "in-between" frames will only show whatever is on the previous Key Frame. If you draw or change anything on an "in-between" frame, you will actually be changing the previous Key Frame.

Exercise: Your new movie starts at 1 frame long. It is a Key Frame, and it is blank (there's no drawing or anything on it). To extend the length of your timeline, right click on frame 20 (for example) and select "insert frame". Your movie is now 20 frames long, and frame 20 is selected. (the pink line)

(Flash timeline - Inserting a frame)

Now select your first frame (click on it) and draw something on the stage - anything - a squiggle. (Use the pencil tool on the left)

(image of filled-in frames)

The Key Frame is now filled in (The empty circle is black) and the in-between frames are darker. Select different frames, and you'll notice that your squiggle "exists" on all of them.

Properties Panel

The properties panel should normally be open. You'll use it a lot for both movies and games, and in this guide. It's probably under "Windows -> Properties".

With nothing selected (click the stage), you can change the movie properties, such as width, height, and background colour, etc. The default size (550/400) is a good all around size, and it's pretty much "standard" for Flash movies.

Optional Flash Setting: You can make a shortcut to open and close properties under "Edit -> Keyboard Shortcuts". I use "ctrl + Q" for properties and "ctrl + W" for the timeline, as by default, these easy-to-press shortcuts are assigned to closing Flash and closing your current file.. not only useless, but rather annoying if you press them by accident.

Symbols

Symbols are re-useable objects in Flash, and are one of the main reasons why Flash files can be so small. If you have 10 copies of a symbol on the stage, they are all the same "object", and if you edit one of them, you edit all of them.

To create a symbol, select something (by clicking + dragging over it with the selection tool), and then press F8 (or right-click on it and choose "convert to symbol"). The way symbols work is likely the most confusing part to explain, although the concept is simple when you understand it. (see exercise, below)

Exercise: Highlight something you've drawn (such as the squiggle), and press F8 to get the Convert to Symbol dialogue box.

(The dialogue box)

Select "Movie Clip" or "Graphic" - I'll explain each symbol type later. Name it whatever you want, and press "OK". Now you have a symbol. Select it (click it) and you'll notice that it now has a blue outline, and it is one solid object. If you have the properties panel open, it will say "Instance of:" followed by whatever you named it.

(The symbol and the properties panel)

Before you do anything else: copy and paste this symbol at least once. Select it (click it), press ctrl + c to copy, and ctrl + v to paste. If you press ctrl + v several times but only see one copy, that's because they're on top of each other. Drag the top one off with the selection tool.

Now that you have at least 2 of them, double click on one of them to edit it. It doesn't matter which one; remember, they're all the same object.

(editing a symbol in Flash)

Notice that at the top of the screen, it now says the name of your symbol next to "Scene 1". Also notice that everyhing else on your stage (if there was anything else) has been faded out, and you can't edit it. That's because you're now "inside" your symbol, so you can edit it, but nothing else. To "leave" your symbol and go back to the "main" timeline, double click outside your object. To go back into your object, double click it. You get the idea.

If you're not "inside" your symbol, double click it. Now, edit it in any way. Draw something new or tug at the lines with the selection tool. Notice how your other object in the background changed! That's because, as should be clear by now, they're the same symbol.

(Two symbols)

Note about the concept of being "inside" the object: Okay, you're not literally "inside" the object. You're sitting in front of your computer, and your perspective is (arguably) inside it.. Right now it might be easier to think of it as just "editing the object", but personally I find the concept of objects being "inside" other objects easier to understand. For example, if you create a symbol, and then turn THAT into a symbol, you will now have 2 symbols "iniside" of each other. If you move the outer most symbol around the stage, the inner ones will move as well. You can put as many symbols inside other symbols as you want. Try playing around with it. Note: When animated, having rediculous numbers of symbols inside of each other can slow the animation down, so don't go nuts. :)

Instances

You'll hear the word "instance" a lot when working with Flash. When you have an object selected, it will say "Instance of: (the name)" in the properties box. Instances are just the name used to refer to individual symbols on the stage, so it's clear that you're not talking about all versions of the symbol. For example, deleting all of the "instances" off the stage will not delete the symbol, which still exists in the library. (I haven't covered the library yet) If you delete the actual symbol itself from the library, all of it's isntances will be deleted too.

Types of Symbols

There are 3 types of symbols, which you can select when you create your symbol. Also, in the properties box, you can change an instance of a symbol to be a different type, without effecting the rest.

MovieClip: The name "MovieClip" is just what it implies.. it has it's own timeline which plays independantly from the main movie. So, for example, you could create a MovieClip called "plane", and on the timeline inside the movie clip, you would create a symbol called "propeller", which you could animate on that timeline. (In fact, if you pause the main movie, the MovieClip will continue to play, which might not be a good thing) MovieClips can also be affected by code, so anyone making games in Flash will use a lot of MovieClips.. a lot of MovieClips, inside of other MovieClips, and so forth. In Flash 8+, MovieClips can have "filters" applied to them, such as blurring or drop shadow, etc... but don't overdo it.

Graphic: Contrary to (somewhat) popular belief, graphics have their own timelines too! The difference is that graphics will ONLY play when the main movie is playing. Also, graphics can not be controlled with code (although you can put graphics inside of a MovieClip, which can be controlled with code). Personally I find graphics much more conveniant for movies, especially if the user can pause the movie. In the properties box, you can tell a graphic which frame to start on, and if it should loop, play once, or be static. Also, perhaps most importantly, you don't have to actually export your movie for an animated graphic to play; the animation will actually be visible within Flash, from the main timeline. Unlike the other 2 symbol types, sounds placed inside of a graphic will NOT play in your final movie. (sounds are mentioned later)

Note: Debugging Graphics: If you have, for example, a 10 frame graphic, and your movie is 5 frames, than only the first 5 frames of the graphic will play. This is because graphics play along with the movie. You will likely come into a problem where you put an animated graphic inside of a single-frame symbol (of any type) and wonder why it's not playing. It's because although your animated graphic is, for example, 20 frames, the symbol it's inside is only 1 frame, so the "inner" graphic will also stay on the first frame. Basically, the "containing" symbol must be at least as many frames as the (animated) graphic it contains.
Button: Buttons are a special-purpose symbol. They allow basic interaction with the movie, such as creating a menu screen or "replay" button. There are plenty of guides to explain the basic use of buttons.. here's one.

Exporting Your Movie

When you save your file (as you should do frequently, in case Flash crashes), it saves as a ".FLA" file. This is your work version. It's very large; not a final viewable version. The exported version is is called ".SWF" which stands for "Small Web File", but normally people just call them "SWFs", sometimes pronounced "swiffs".

Every time you "test" your movie within Flash (press CTRL + ENTER or choose Control --> Test Movie), a SWF file is created in the same folder you saved your FLA file. Under File --> Publish Settings, you can change the options. The SWF file can be inbedded in webpages and viewed online. Most of the file size will be the music, depending on the options you choose. I normally aim for a final file no more than about 2mb size, with an absolute max of about 5mb. You'll rarely find anything larger than this on the internet.

Previewing Within Flash

If you want to "play" your movie within Flash, press "Enter" to play from your currently selected frame. Moveclips will not play, and code will not be executed. It will also likely play a lot slower than the actual frame rate, depending on how complicated your movie is.

The Library

The library is a list of all your symbols, and any other resources you've imported into your document (images, sounds, etc). As I said earlier, if you delete all the symbols off of your stage, they still exist. Well, this is where they exist. To open your library, press F11, or choose Window --> Library. (Just so that I'd have more than one symbol in the library, I selected both objects on the stage, and converted them to a symbol. Remember, you can put symbols inside other symbols.)

(Flash library)

To add something from the library to your document, click + drag it from the library on to the stage.

More info: To rename a symbol, double click it's name. To change it's type, right click and choose "type" (This will NOT change the instances already on the stage, as you can manually set each instance in properties). For sounds and images, you can right-click and choose "properties" to change the quality, although it's sometimes more conveniant to just go to the publish settings (File --> Publsih Settings), set a sound quality, and check off "override sounds settings".
Do unused items in my library contribute to the SWF file size?: NO! In case you were wondering, only symbols, sounds etc that you actually use in your movie will increase the SWF file size.

Naming Convention

Libraries will grow to hundreds of items faster than you think.

To easily find symbols in your library, it is useful to name your objects so that they are easy to find. Since it is arranged alphabetically, you should start with the "broadest" term in the name, and narrow it down.. for example, if you have charecters named "Jim" and "Bob" with seperate body parts to animate, you might name them as follows:

jim_part_arm
jim_part_hand
jim_part_head_frowning
jim_part_head_smiling
bob_part_arm
bob_part_hand
(etc)

This is how they would be arranged in your library. If you started with the body part and ended with the owner, for example, your library might be a bit confusing:

arm_jim
bentArm_bob
head_jim
head_bob
zee_other_hand_of_jim
(you get the picture)

Library Tip: To jump to a library item starting with a specific letter, hold down the "SHIFT" key while pressing the letter. (Without pressing "SHIFT", the keyboard letters are used as shortcuts for different Flash tools)

Duplicate Symbols

You know how all the instances of symbols are the same, right? So if you change one, you change them all. Well what if, for example, you've drawn a "red" something, and now you want a "blue" version? You could redraw the entire thing, and make the new one blue. Or, just take one of "red" instances, right click it, and choose duplicate symbol. Name it something else, make sure you're actually working with the new version (check it's name in properties), and edit it however you want.

Layers

Layers are a simple but important concept. Basically, layers allow you to draw on different.. layers. In traditional animation, parts of a scene drawn on trasparant backgrounds would literally be layered on top of each each other. For example, you might draw a tree on one layer, and on a layer "behind it" you'd put a hill, behind that some clouds, theny the sun, and the sky. In Flash, it's much (much) simpler. Since each object is on it's own layer, they can be animated seperately, and layers are easy to rearrange. In fact, every animated symbol (which I'll mention after this) MUST be on it's own layer.

Exercise: So far, you've been working on just one layer. Notice in the top left where it says "Layer 1"? Under that, click the button circled below to create a new layer. To select a layer, click on it. If you draw something now, it will appear on that layer, and not interfere with anything on any other layer.

(Creating a Flash Layer)

Here's an example: 3 vehicles are driving across the screen. Each vehicle is a MovieClip (which contains it's own layers, timeline, and driving animation), and you can clearly see which one is "on top" of the others. The arrows point to the vehicle on layers #1, 2, and 3. The road, sidewalk, and store are all part of the same graphic, on layer #4. In the very back, on layer #5, we have a city background. (This is a graphic composed of 2 layers in itself - the city and the sky)

(Example of Flash layers)

Your average character will be broken up into layers as well; head, body, arms, hands... depending on how many parts they have. The character themself will of course also be "above" or "below" other elements, such as backgrounds, props, or other characters.

Notes: Click any frame on a given layer to select that layer. Clicking an object from a layer you're not on will select that layer. You will probably end up accidentally drawing half an image on one layer, and the other half on the other layer. To prevent this, it helps to lock and/or hide the layers you're not working on. To do so, click the little dots under the "lock" or "eye" symbols, above the layer name. (Clicking the lock or eye itself will lock or hide ALL layers)

(Flash layer info - button shortcuts)

You can also click + drag a layer (click the area with the layer name) to rearrange them. Double click the name to rename it. Click the little square to the right to view the layer as an outline. If you accidentally set your layer to a guide, a mask, or masked, than double-click the little paper symbol on the left of the layer to open layer properties, and change the layer type back to "normal". (This tutorial does not currently discuss either guides or masks)

Motion Tweens, and What Makes an "Animation"

FINALLY! Some freaking animation. You know how I said that "key frames" are the frames where everything changes, where as the "in between" frames only show what was on the last "key frame"? While, that is the genious of "motion tweens". The word "tween" is short for "in between". That's because "motion tweens" calculate the position of an object "in between" two key frames. So you start your object in position A, end it in position B, and Flash figures where it should move in between. Sort of like this:

The ability to "tween" is one of the main factors that allows Flash movies to be made by one person in a week, instead of a small army of people over a month. BUT WAIT! Before I get carried away with complimenting tweens, allow me to quote "The Art of Cartooning With Flash":

Moving Stuff Around is not Animation

Let's say it again. Making cartoons with solid character animation is neither quick nor easy. Of course, if you just want to move stuff around the screen, you can do that in a few minutes. You can then have some business cards made that say you're an animator, hang out your shingle, and wait for the business to not roll in.
    It cannot be stressed enough that moving stuff around the screen is not an animation. Anyone can do that, and who cares about what anyone can do? Animation is about bringing characters to life - characters that feel, think, act, and react. With any luck, those characters will, in turn, make your audience feel, think, act, and react.

-The Art of Cartooning With Flash

Now, that's not to say motion tweens are the enemy.. far from it. It's hard to explain the difference between "just moving stuff around the screen", and an actual animation, but watch some animations of various qualities, and you'll see. If you get discouraged by experienced animators, look at my first animation ever. It was entirely "moving stuff around" with tweens, and it wasn't very.. umm.. pretty. Also, look at non-Flash animations, 3D animations, movies, and real life to get a sense of what you're trying to mimic. Don't just copy "Flash stuff", or you'll fall into the endless circle of copying a copy. (This should probably be in the "style" section.. but it kind of overlapped.)

Whether you're just learning (as you probably are, if you're reading this), or you just want to casually "play around" with Flash, then don't worry about complicated animation for now. It took me half a dozen movies before I tried to go beyond "moving stuff around the screen".

Just to Sidetrack : Inserting Keyframes

Refresher: Keyframes are your only "real" frames. The "in between" frames simply take on the properties of the previous keyframe. That being said, if you insert a keyframe (Right Click --> Insert Keyframe), the keyframe by default will take on the properties of your previous keyframe. If don't want anything on your next keyframe, choose "Insert Blank Keyframe" instead. (Or just insert a keyframe, and delete anything on it.) Oh yeah, back to motion tweens..

Motion Tweens: How to Actually Make Them

Despite the giant rant above, motion tweens are actually extreemy simple. It involves right-clicking.

How to: Either create a new movie, or a new layer with nothing on it so you're starting from a blank slate. If it's only one frame long, right click on frame 20 and choose "insert frame". You can see that it's now 20 frames long. (You did this earlier)

For future refference: In case you've accidentally inserted extra keyframes, right click on them and choose "Clear Keyframe". You can also select multiple frames by clicking + dragging. If you click a frame you've already selected, and then drag it, you will move it.

(Clearing a keyframe in Flash)

The frames are currently white - because there is not anything there. Draw something (such as a square) on this layer and convert it into a smybol. (Remember that no matter what frame you "draw on", you're actually drawing on the previous Keyframe, of which there is only 1 right now.) Now that something exists, all the frames on which it exists have been darkened. Dark frames means something is there.

(Preparing a motion tween)

Right click on frame 20, choose "Insert Keyframe", and then move your square (click + drag the quare with the selection tool). If you select different frames, you'll see that the square has only "moved" on the 2nd keyframe. It seems to stay in one location for the first 20 frames, and then suddenly "pop" to a new location in frame 20. This is where motion tweens come in... to fill in those "in between" frames. Here's how: Just right click somewhere between the first and second keyframe, and choose "Create Motion Tween".

(Right click - create motion tween)

The frames are now blue, with an arrow. This means there's a motion tween between them. Click between the frames to see that the square in fact "moves" between these two keyframes.

(motion tween)

You can no longer click on the square to move it or alter it between these 2 frames, because the alteration between keyframe 1 and 2 is being handled by Flash. If you want to edit it on keyframe 1 or 2, select the keyframe itself, and then click the square.

Notes: Notice that you can use the Free Transform tool to alter your square on one of the keyframes, and the alteration will be "tweened" as well. To "reset" the transformation of your square on any given frame, choose "Modify --> Transform --> Remove Transform" from the menus at the top of the screen. If you open the "properties" box and have your square selected (on one of the keyframes), and then click the little drop-down menu next to "color" (in properties) , you can tween other properties as well. For example, set the "alpha" (transparency) to 0% on the first frame, and 100% on the last frame for it to "fade in". You can also rotate or resize it, which might cause you to run into a problem I'll mention next. First, play around with motion tweens unless you understand them already.

The Rules: Only symbols can be motion tweened. One symbol, on it's own layer. For example if you have a layer called "Sun", in which you have the sun moving across the screen until it's off screen, you can't just delete the sun and put something else on the same layer afterwards. This can cause errors or other annoyances. It's pretty simple; one tweened symbol per layer. If you draw something without making it a symbol and choose "create motion tween", it will be automatically saved as a symbol called something like "Tween 1". Again, if you have multiple symbols on one layer, and you choose "Create Motion Tween", they will also be made into a symbol, which contains the origincal symbols. If you have a keyframe with one symbol, and the next keyframe contains a different symbol (or none it all), the frames will turn blue but instead of an arrow, there will be a dotted line. This is a "broken tween", which means there is not the same symbol on each end. The same thing happens if after a making a motion tween, you add a new symbol or drawing to one of the keyframes.

"Registration Point"

The regestration point is essentially the official "center" of the object. When you rotate an object (with the Free Transform tool), it rotates "around" this point. It will normally appear as a small hollow circle. If you select the Free Transform Tool, it will appear as a white circle.

(Regestration Point)

You can now click + drag the regestration point somewhere else. In general, the default registration point is not desired. For a solid object like a vehicle or other prop, you'd probably put the regestration point at the center of gravity, or whereever you think the object would rotate from. For a limb (an arm or leg etc), you'd put the regestration point on the joint, so it bends properly. Not doing this can make animation tedious, or just look really weird, as you'll probably find out eventually.

Tween Warning: Make sure that you edit the location of your registration point before you start making additional keyframes. For some reason, the regestration point saves it's position on each keyframe, instead of just for the object. So, if it started in the middle, and you move it to the top left, it will still be in the middle for any keyframes you already made while it was in the middle. This can lead to some pretty "wonky" animation. Your object will move or rotate properly, but on the next keyframe, it will suddenly "pop" to a different location. This is because the location of the point is not tweened - it stays in the location on one keyframe until the next keyframe comes along. Long story short.. if you create a motion tween and find your object "popping" around when it gets to the 2nd keyframe, clear the 2nd keyframe (right click --> Clear Keyframe) and recreate it. (As usual, it will take on the properties of the previous keyframe, including the location of the regestration point)

What's that little "+"?

When you create a symbol, you can select the default location for the regestration point. That's what the "+" shows (see images, above). Pressing Ctrl + clicking on the regestration point will reset it to the location of the "+". This "+" can not be moved, but if you want, you can go into your symbol and just move the contents of the symbol around.

Shape Tweens

Shape tweens aren't used often, and can be confusing / annoying, so you might want to skip them for now. Basically they're like the opposite of a motion tween... your object can not be a symbol or group, it must just be a drawing directly on the stage. Draw something on one frame, insert a keyframe a few frames later, morph things around with the selection tool, and then select a frame between the two keyframes (like for making a motion tween). There's no shortcut to create a shape tween, so in properties, under the "tween" dropdown, change it from "none" to "shape". Your shape will (hopefully) now "morph" between one shape and another, and the frames on the timeline will turn green. The problem is, Flash is sometimes not too bright at figuring out how to tween the shape, and the more complicated your image, and the more it changes between the keyframes, the crazier the morph can be. It's especially bad at dealing with lines. I guarantee some crazy horrible effects when you first play around with this. At the time of writing this, I've only used shape tweens for some blowing blades of grass, from what I remember, although I've seen more creative uses.

Frame-By-Frame Animation

Frame by frame ("FBF") is "old school" animation, but that doesn't mean you should completely ignore it. I know some Flash artists who use FBF almost exclusively, or simply a lot. Personally I disagree with this level of usage, as I think it undermines the basic fundamental of what makes Flash a good tool, IE it doesn't take forever to make an animation. Also you'll notice that FBF animations usually have significantly less detail than non-FBF or partial-FBF, since you have to redraw everything all the time. My personal recomondation would be to use a mixture of tweening and FBF, for a nice blend of style and the ability to actually create something in a normal amount of time. How much of each to use where is up to you. Experiment.

How do you do it? Well, insert a blank keyframe. Draw something. Insert another blank keyframe. Draw something else. Repeat. Basically, you just draw something on each frame. It's that simple. (Simple does not mean easy)

You can also make small, looping FBF animation. For example, for a fire, you could create a 5 frame MovieClip called "fire". On each frame, you'd insert a blank keyframe. (Or click + drag to select multiple frames, right click, and "Convert to Blank Keyframes") On each frame, you'd draw a different image of the fire. And there you have a looping FBF image of fire. Or whatever you want.

It is also possible to use FBF for certain "key elements" in an otherwise non-FBF movie. For example: Liquids, fire, coats flapping, hair, crumbling structures, and other stuff I can't think of. Also, in games, it's a lot easier, since games are essentaily composed of small looping animations. (And loads of code.. which I'm not teaching.)

Easing

This guide contains quite a lot of confusing extra stuff which you really don't need as far as basics go. Here's some more!

When you have the properties panel open with a tween selected, you'll see an option for "easing". This adjusts the acceleration of the tween. Normally it's set to 0, so the animation is constant. Click the little arrow and drag the slider down to the limit, which is -100. At this value, your tween will "ease in" very dramatically. Your object will still take the same amount of total time to complete it's tween, but instead of a smooth transition, it will accelerate - it will start out very slowly, and speed up towards the end. If you drag the slider the other direction (to 100), it will now "easy out" very dramatically - starting fast, it will slow down to a halt.

It looks kind of weird if you use easing for every single animation, and easing also takes more processing power. In many cases, it's not even that noticeable. Personally, I mostly use it for obvious slowing down / speeding up objects, for example: something such as a car slowing down against a force such as friction, or something reversing direction due to gravity or another force, which would look strange without easing. (see example, below)

Smoothing / Snap to Objects

I guess I missed these two functions when I went through the basic tools. When you have selected a line or shape with the selection tool, you'll see some options at the bottom of the tool box.

(smooth button)

Pressing "smooth" will attempt to simplify your line or shape, eliminating or smoothing out any extra points. Pressing "straighten" (to the right) will also simplify your shape, only with jagged edges instead of curves. Pressing any of these buttons multiple times in a row may suddenly smooth much more than you expected. Smoothing helps make an object easier to manage/morph due to having less points, and/or look better, and a slightly smaller file size. (It might make it look worse though.. you'll know when to use it with some experience.)

The "Snap to Objects" button doesn't do anything to your selected object.. it's justs a toggle switch. When it's on (down), and you drag something, or draw something, your curser will "snap" to nearby objects. Personally I find this really annoying so I usually keep it off, but it's up to personal oppinion.

Onion Skinning

Onion skinning is a feature which lets you see future and previous frames. This is mostly useful for FBF animation, but also for regular tweening. To turn on onion skinning, press the button shown below.

(onion skin)

The button to the right is "onion skin outlines", which instead shows just the outlines for other frames. You can click and drag those little "tabs" you see above your frame selection marker, to select how many frames are shown, forward and backward. Frequently you'll only want it to show 1 frame forwad or backward, for example if you're animating fire and just trying to make sure you don't draw fire in the exact same place as last frame.

Motion Guides

A motion guide is a path for a motion tweened object to follow. Create a new layer, 20 frames long, with just one symbol on it. To add a motion guide to your currently selected layer, press the button between "new layer" and "new folder" (below).

(Adding a motion guide)

Motion guides are just lines, normally drawn with the pencil tool. The line will NOT Show up in your export of the movie. (although you can always hide it if it's in the way) It must be one, solid line.You should draw your motion guide before you create a motion tween, or it might not work. Draw an unbroken line on the "motion guide" layer. It doesn't have to overlap your object. As soon as you go to the layer with your object, and choose "create motion tween", the object should immediately "snap" to the motion guide. The object will "attach" at it's registration point. If you drag the object around, it should only be able to move along the guide.

(motion guide)

Motion guides frequently require some debugging:
1) Most commonly, you've created your 2nd keyframe before creating the motion tween, so the 2nd keyframe is "not tweened". Right click the 2nd keyframe and choose "create motion tween". It should now snap on the 2nd keyframe as well, and thus, along the entire tween.
2) Make sure there is no break in the line.
3) Try "smoothing" the line (see 2 topics up),
4) Clear your 2nd keyframe and remove the motion tween, and then recreate it.
5) Your guide must be an ungrouped non-symbol.. just a line.

Masks

Masks are fun. Masks allow you to hide everything except for what you've masked. It's like "drawing a hole".. sort of.

To create a mask, double-click the little "paper" icon on the left of a layer. This opens the layer properties. Change the layer type from "normal" to "mask", and press OK. The layer is now a mask.

(setting a layer as a mask)

Now you have a mask layer, but it's not masking anything. Create a new layer. Click it, and drag it "under" the mask. It should now be a "masked" layer.

(masked layer)

Now you have a mask, and a masked layer.. but there's nothing on them. To see how it actually works.. draw something on the masked layer (the lower one), such as some text. On the mask layer (upper one), draw something solid, such as a rectangle or odd shape. Make sure that it overlaps the masked layer, but not completely, or you won't notice any difference. To actually see what it looks like, either lock both layers, or export your movie (Ctrl + Enter).

Flash Mask

As you can (hopefully) see, only the areas that you've filled in on the "mask" layer can be see on the "masked" layer. The "non hidden" areas are hidden. You draw on what you don't want to hide.

Masks can be useful for various visual effects. I find the easiest way to work with them is to lock the mask, and set it as an outline (press the little coloured square button on the right of the layer). To see what it actually looks like masked, just lock the masked layer as well.

Note: The mask, and the layer being masked, can both be animated.

Break Apart

To "ungroup" or "un-symbol" an object, select it and press Ctrl + B to break it into it's components. (This will only effect the one instance) Each time you press Ctrl + B, another another "level" of the symbol will be broken apart (assuming you have a symbol composed of other symbols). You'll probably do this by accident when trying to paste something (Ctrl + V).. remember the most useful shortcut; undo (Ctrl + Z).

Frame Rate

You can change the frame rate in the properties panel when you have nothing selected (click outside of any object, such as on the stage). By default Flash is 12 frames per second (FPS), but that looks rather "jerky". Personally I use 24 FPS. 12 is fine too, for some applications. 12 FPS works better on slower computers, but make sure you don't change frame rate half way through a project... everything will suddenly be moving too slow or too fast. Anything over 30 FPS is not really distinguishable to the human eye, so it's a waste. Higher frame rates increase the files size slightly, as you will have more frames for the same length of movie, but more importantly, higher frame rates + fancy movies (lots of moving objects, symbols inside each other, crazy effects) can be processor intensive, and not work properly for some people. In Flash, you have to walk the line between making something look cool, and actually work.

Selecting / Moving Frames

You can select frames by clicking them, or clicking + dragging to select multpiple frames. Note that if you click + drag a frame (or several frames) which are already selected, you will just move them. You can also click a frame, hold Shift, and click another frame to select all the frames in between. Furthermore, you can copy and paste selected frames by right clicking on them.

Importing to Library

You can import images, sounds, etc to your library. To do so, go "File -> Import -> Import to Library". Images etc can be dragged onto your stage from the library, the same as any symbol. Flash isn't too great at resizing images, so try to keep them at their original size, and don't rotate them unless you have to. (It just makes them look somewhat pixelated)

Sounds

Once a sound has been imported to your library (see above), the best way to add it to your movie is with the properties panel. Sound is put "on" a keyframe, so that it starts playing when that keyframe is reached.

Exercise: Locate a sound file on your computer (such as an .mp3 or .wav) and import it to the library (File -> Import to Libary). Create a new layer called "sound", insert a keyframe somewhere, and select the keyframe. Open the properties panel (if it's not already open) and you should see a drop down menu next to the word "sound". Select the sound you imported. You should be able to "see" the sound on the timeline now. It will play when Flash gets to this keyframe.

Flash Sound

The "Effect" dropdown has some mostly useless default volume effects, IE fading in, out, and left to right etc. If you press the "Edit" button, you can create your own variations. The points represent the volume at those points. Click points to drag them around, or click between points to add more (max of 8). Click a point and it off to remove it. For some reason you're stuck editing in stereo.. there's no way to make the points in the left and right volume channel match up. Just do it manually. At the bottom left you can test your sound by playing or stopping it. At the bottom right, you can "zoom" in or out on your sound. You can also change the view from "frames" or "time". I find "frames" is more useful. If your sound sync is set to streaming (mentioned next), you can even see keyframes on this view, represented as vertical black lines.

Sync: The sync (synchronization) options are rather important for sounds. There is basically "streaming" and "non-streaming", with the "non-streaming" options having 2 varieties.

Event: The default sync option, event sounds will play as soon as the frame is reached. If the user has a slow computer or your animation is complicated, event sounds will seem to play too early, because the animation is running slower than the sound. This is not a good choice for speech or sound effects, but it's perfect for button sounds and in games.

Start: The only difference between "Event" and "Start" is that sounds set to "Start" can not overlap. So, if you "Start" a sound which is already playing, nothing will happen.

Stop: Just as it sounds, "Stop" doesn't actually play the selected sound. However, if the selected (non-streaming) sound is currently playing, it will stop it from playing. Often at the end of a movie there's an option to replay, but there might still be non-streaming music playing. To prevent the music from overlapping itself or another piece of music when the movie starts again, it's useful to "Stop" all music on the first frame, or on the menu, if applicable.

Streaming: The animator's friend. Streaming sounds will attempt to play along with the movie. If the user has a slow computer, frames of animation will be skipped to keep the sound in sync. This is practically essential for voices, or music which needs to be in time. If you just have one looping track of music for the entire movie, it's best to just use "Start" instead of streaming, and set it to loop.

Unlike the other sync options, streaming sounds increase the file size each time they're used. If you only use half a music track which is set to streaming, only the used half of it will be "saved" to your file. If you loop the song 3 times, it will be "saved" 3 times, increasing file size.

Also, streaming sounds must not be interrupted by keyframes. If you place a keyframe in the middle of a streaming sound (you can see the waveform on the timeline), then the sound will stop at that keyframe. If you have multiple scenes in your movie (scenes are mentioned next), streaming sounds will stop at the scene change, which is something to keep in mind.

Furthermore, do you remember how you can set the quality of each sound in the library? (double-click it) Well, you can't for streaming sounds. The sound quality for streaming sound will always be overridden by the setting in "publish settings", whether or not you select "Override Sound Settings". By default it's probably set to something horrible like 16kb/s. I normally use 24kb/s, but try different options, and check the effect on your SWF file size.

Code: You can also play sounds using code, which is useful for games, or if you want the volume to be adjustable. (just so you're aware)

File Types: There seems to be a weird occasional error where .wav files are sped up or slowed down in Flash. I normally try to save files as .mp3 if possible just to be safe (I use the audio program Goldwave to record, edit and save audio). If you already have a .wav file and imported it into Flash, and it hasn't been messed up, you may as well just leave it like that. I stress, this is an occasional error, and I just save as .mp3 when recording my own audio, to be safe. (Also, Flash converts all audio to .mp3 in the final export anyway)

Scenes

By default you only have one "scene", and it's called "Scene 1". Scenes help you to organize different.. scenes. Every scene has it's own set of layers, which helps when you have a long movie, with dozens of layers.

To create new scenes or move them around, press Shift + F2 for the scene manager. Be careful of that "delete" button.

Flash Scene Manager

To change which scene you're in, press the scene button at the top right.

Flash Scenes Shortcut

(Note that streaming sounds will not continue from one scene to another.)

The Important Parts

The most important parts above were symbols, key frames, and motion tweens.

Back to the Menu, @ the Top

 

© 2011 Helmi Bastami
Flash content (games, movies, and site navigation) require the Flash Player plugin.
| Contact Info | Terms of Use | Privacy |

Powered by killer bunnies.