Interface

The interface for Adobe Flash can be a bit awkward if you're already used to to the Photoshop interface. Many of the quirks and qualities within Flash are still held over from many years prior when it was first developed by Macromedia.

The main differences are as follows.

  • The animation timeline and frames interface are condensed into one palette.
  • Brush size is not determined by measurement but by a small to large scale which depends on your zoom level.

Let's look at individual parts of the interface on their own.

Here are the general areas of the interface.

The GREEN arrow is pointing to the tab bar. Just as in Photoshop you can have multiple projects open at one time. Each will be listed here. The "Scene" option right under it will also show a heirarchy of depth within movie clips. We'll explain that more later.

The RED arrow is pointing to our custom arrangment of palettes. The default layout has the panes for "align" and "transform" as icons in a vertical bar to the left. To save on space they have been Left-Click & Dragged and dropped into this area.

The BLUE arrow is pointing to the timeline. In Flash this works the same way as a layer browser in other image editors. You can even Right-Click and select one layer to make it into a mask of another (masks are not just another component of an individual layer as in Photoshop). They can be renamed via Double-Clicking just as in photoshop though, as well as hidden and locked via "Left-Clicking" the cooresponding "eye" and padlock icon column.

The YELLOW arrow is pointing to the properties pane. This window will change depending on which tool you've chosen from the toolbar to the right. Currently we have the Brush tool selected so it is giving us basic color options. The "fill" color that the brush uses is denoted by the paint bucket icon and our chosen color of black. The brush tool will not create shapes with outlines so the "stroke" option is not available (it has a red stroke through it). With other shape tools the stroke, style, etc. options would also be available.

Common shortcuts

There are some shortcuts that will be used more often than others.

  • The period key will advance the timeline by one frame.
  • The comma key will move the current time back one frame.

Keyframe commands

The interface for controlling keyframes is not as streamlined as it probably could be but there is a specific use for each option. You can see the complete list by simply Right-Clicking on any keyframe in the timeline. Depending on whether or not it's a regular frame or a keyframe you'll get a different set of options. Some will be used much, much more often than others.

  • Insert Keyframe
  • Insert Blank Keyframe
  • Convert to Keyframes

Just be aware that "insert" will typically insert a new keyframe/frame between the current position and the next, making the total animation longer.

"Convert" will transform a blank frame to a keyframe, either extending the previous keyframe or making a new one.

Copying frames between objects

When working with animations in Adobe Flash there is a simple question that has a simple answer but deserves a new section because of how often it comes up.

Q: How do I transfer multiple frames made in one object, or on the main canvas, to another Movie Clip or symbol?

A: Do the following.

  1. Select the range of frames you wish to copy.
  2. Right-Click the frames and select "Copy Frames".
  3. Go to the target object.
  4. Right click the starting point where you want the frames to be and select "Paste Frames".

But that seems to obvious! Well it is. Unfrotunately Flash has an oddity where Ctrl-V is not the same thing as right clicking and choosing "Paste Frames".

  • Ctrl-V will paste a single frame.
  • Right-Clicking and choosing "Paste Frames" will paste the entire range chosen when you selected "Copy Frames".

I have no explanation for this.

Registration points

One VERY important aspect of objects in Flash (or most any animation softeware) to understand is the idea of Registration points. These are akin to Origin Points or Axis Points in other programs and for the most part the terms are perfectly interchangeable.

They key process to registration points in Flash goes like this...

  • In Adobe Flash to modify registration points you need to be using the "Free Transform Tool" which can be selected through the second icon from the top of the toolbar or by the keyboard shortcut "Q".
  • The registration point of the currently selected object is identified by a white dot.
  • You can change the position of a registration point by Left-Clicking and Dragging it to the desired position. If snapping is on you can snap it to existing points or control boxes on the resizing box.
  • Do be carefuly to NOT resize the object while the freeform transform tool is selected unless you need to on purpose.

Tweened Animations

Movie Clips (symbols) will be the back bone of most any animation. They is especially useful for tweened animations but can also be used for frame-by-frame animations as well.

A movie clip is essentially a "copy" of an image that you can modify the position, rotation, and scale of without changing the original.

To create a new movie clip follow these steps.

  1. Select either a single element or a group of elements (it can be a mix of filled shapes, strokes, and even other movie clips if you want).
  2. Right-Click the selection and select "Convert to Symbol". The "Covert to Symbol" window will appear on screen.
  3. In the new window enter a descriptive name for the object so that you can identify it from a list later.
  4. Check that the "Type" dropdown is set to "Movie Clip", and that the Registration point is where you want it (you can click on the little boxes next to the word "registration". Typically you can leave these as the default values so click "Ok".
  5. The window will close and the shape(s) will be converted to a single object and a new entry representing that object will appear in the library (typically a tab in the lower right of the interface). You don't have to do anything more, you have a movie clip!

There are a few properties of Movie Clips that you should be aware of.

  • The Movie Clips / Symbols that you see on the canvas are "instances" of the Movie Clip in the library list.
  • You can delete ALL instances of a Movie Clip from the canvas and it can still exist in the library list for later use.
  • If you delete the library entry for a Movie Clip then ALL instances of it on the canvas (on all frames) will be deleted. The item will be gone for good.
  • To edit the contents of a Movie Clip you can Double Left-Click either the Movie Clip instance on the canvas or the entry for that Clip within the library list.
    • Clicking the object on the canvas will edit it in the orientation of the instance directly on the canvas.
    • Clicking the object in the library list will edit the object by itself in its original orientation.
  • While editing a clip you will only be able to edit the contents of that clip. The back out to the canvas level once again you can click the blue arrow that appears in the upper left under the tab bar.

Creating a tween is done from the timeline window. Right-Clicking on any keyframe will bring up a context menu from which you can select "Create Classic Tween". This kind of tween in Flash will simply interpolate the animation between the first keyframe and the next, changing the position, rotation, and scale of the Movie Clip.

When adding a tween note that you need to click the keyframe that will START the tween. It will interpolate to the next keyframe to the RIGHT.

Unlike some animation programs such as 3D animation packages (Cinema 4D, Maya) you do NOT have to press a "Set Key" button. Simply reposition a movieclip on a frame and the changes will reflect in the tween automatically.

Tips for animating in Flash

A few general tips for animating in Flash. These are especially true for working with tweened animations.

  • Keep different "parts" of an object / character on different layers. This means that all versions of a mouth can be placed on the same layer, just obviously not at the same time.
  • Make Prodigous use of the hierarchal Movie Clip system. A character is a single Movie Clip but contains Movie Clips for each body part. Each body part might contain different Movie Clips that are attached to it. So the levels might go Body > Head > Eyes.
  • Be aware of which elements should go in front of or behind other elements. For instance instead of labeling a layer "arm left" or "arm right" consider labeling the layer "arm near" and "arm far". That way when the character turns you are using the appropriate left or right arm but by putting it in the "arm near" layer you know that it will appear in front of the body.