I apologize that I don't have any images or video demos for this, or that there is no real index yet. I am working on it, but thought that at least some sort of text for CS4 was better than reading about something 3 years out of date!
Flash is all about animation. In its newest incarnation, it’s also all about creating interactive web pages and applications—including the ability to create forms, analyze user input, and trigger responses based on that information. Flash can also import and play digital video and sound. It’s a fascinating and frustrating program, and very seductive. I hope you enjoy learning about it!
Flash is a vector drawing program (which makes the files very small), although the drawing tools contain a mixture of vector-like tools, and bitmap-like tools.
This piece of my school site focuses on the animation aspect, and includes fundamental ActionScripts (AS2) for navigation, playing, stopping and controlling sound objects, as well as several navigation techniques, among other aspects.
There are three fundamental spaces in Flash where you work. The timeline, which is where the “action” literally takes place, the “stage,” where you create the objects that appear and move, etc., and the Toolbar with tools you can use to create and manipulate objects.
One feature that is of constant value is the Properties panel. Make sure this is showing by selecting it from the Window menu. The contents and options in this panel change depending on what you’re doing. It’s the Flash equivalent of the Options bar in Photoshop, Illustrator, and InDesign.
For purposes of this Flash information, the workspace is set to Classic, with additional panels open as necessary.
The timeline contains layers, with each layer containing a seemingly infinite number of frames. The red rectangle at the top of the layers is called the playhead, and is used to move through a timeline—once there is more than one frame, click and drag it left or right to scrub through an animation or presentation.
Each layer above the first (which is opaque) can be thought of as a sheet of clear acetate where objects reside. Layers dictate the stacking order of objects by their own order in the list. Objects on the topmost layer will be in front of objects on lower layers.
Within a single layer, each frame can contain an object (or several). When you want to change that object (make it move, resize, fade away…), you must insert a new keyframe into the timeline. This new keyframe is where you make the desired change(s).
When you have keyframes within a layer, you create the animation between them by creating a classic tween, or a motion tween. You can also apply shape tweening to two separate objects.
Create new layers by clicking on the New Layer icon at the bottom left of the timeline. Delete layers by selecting them and then pressing the Trash icon at the bottom of the timeline.
Organize layers using Layer folders; click the folder icon to add a folder layer, then drag layers that deal with a specific aspect into it. Keep the folder closed to hide those layers to make working on the stage easier.
Lock the layers you don’t want to mess up inadvertently by clicking on the dot under the lock icon next to the layer name. Hide layers by clicking the dot under the eye. Lock, or hide, all layers by clicking on the actual lock or eye icon at the top. Locking a kyer prevents you from altering the contents, but doesn’t prevent you from adding, deleting, or rearranging frames on that layer. You can also add ActionScript (AS) to a locked layer.
At the bottom of the timeline, to the right of the add layer, layer folder, and trash icons are a series of others that deal with onion skinning. (image).
To the right of those is the frames per second indicator; speed up the rate by clicking this icon and sliding your mouse to the right. Good FPS settings for web-based Flash projects is 12-24. If you are working with embedded video, set the fps to 29.
Nex to that is the elapsed time indicator—how many seconds into the project you are.
The stage is the area on which you draw and/or place symbols and objects so they appear in your movie.
The stage is (usually) white and the gray area around it—the artboard—is used for placing objects out of view.
You can enlarge your view of the stage (i.e. get closer or further away from it) using the Space and Command keys (to get a magnifying glass) or the Space, Command and Option keys to move away.
Command 1 will put you at a 100%, or wysiwyg view. You can also choose a percentage using View > Magnification, or select a magnification from the top right of the document window.
There are rulers and grids available to assist you in positioning objects. To view them, choose either or both from the View menu. You can change the measurement units with Modify > Document. Drag guides from the rulers to help with aligning objects.
Layers control the stacking order of individual animations. Each Flash document has one layer by default. It is rare, however, to develop anything interesting as an animation with only one layer. Layers are mandatory if you want to have more than one thing moving or changing in your project.
To add layers to your timeline, click on the Add Layer icon at the bottom left of the timeline, or choose Insert > Timeline > Layer. To delete a layer, highlight it and then click on the Trash icon at the bottom left of the timeline. You can also change an existing layer’s properties using Modify > Timeline > Layer Properties.
A classic motion guide layer guides the movement of an item. A guide layer, on the other hand, is something you create to assist with the exact positioning of object.
The third kind of layer type is a mask layer, which hides certain areas of your stage and allows other parts to show as they move past the window a mask layer creates.
A word of advice: make it a habit to name all the layers in your file—double click its name in the timeline. Also, always lock the layer you use for coding, and all code should only go on a single layer, not helter-skelter all through the timeline and layers.
Create a classic motion guide layer by Control-clicking on the layer icon and choosing Add Classic Motion Guide. The motion guide layer affects any layers indented under it. Anything you draw on a motion guide layer, or a general guide layer, does not export with the final movie.
On the motion guide layer, use the pencil or line tool to draw the path you want something to follow as it moves. For instance, if you wanted to move a bumble bee in spirals across the stage, you would draw a loopy spiral on the guide layer. Once you create the path, lock the layer to prevent messing it up later.
Any layers tucked in below a motion guide layer should contain the symbol(s) you want to move, along with a classic tween that creates the motion. See the section on tweening for more details. If you are using the “new” motion tween, you do not need to use motion guide layers.
To create a mask layer, you must use the layers properties dialogue box: Modify > Timeline > Layer Properties, or double-click the layer icon to open the Layer Properties panel, or Control-click and select Mask from the contextual menu.
A masked layer affects all layers tucked in underneath it.
Any images you draw on a mask layer become windows or holes through which you can see objects on layers tucked in below it. As those objects move, they appear in the window and then disappear as they move past it. You can see the effect of this on stage by hiding the mask layer, or using Command Return to test the movie.
A masked layer can affect multiple layers, and you can create those links using the layers properties dialog box (or dragging a layer directly beneath the mask layer). Any layer you want to connect to a mask layer needs to be tucked underneath the mask layer: drag it into position or use Modify > Timeline > Layer Properties and specify it as a Masked layer.
These layers are created using the Layer Properties panel. Select “guide” to create a layer where you can place guidelines and other objects (to trace, for instance) that will help you position and create objects on other layers. Guide layers don’t export with the movie, so no one sees them but you. You can also create a guide layer using Control-click to access the contextual menu.
It’s common practice among Flash users to create separate layers for various part of the movie: one for sounds, one for any ActionScript, and one for frame labels. I frequently add one for buttons as well, and another for button text, if that’s not included in the button design. This is Best Practice and a habit you should get into—separating these things visually helps you remember what you’re doing and where you are. It’s especially helpful when opening an older project as it will help you sort through what you can’t remember about it!
Always create a separate layer for any AS and lock it to keep from placing any objects on that layer by mistake.
Each layer has three dots that represent hide, show, lock and outline (for a wire frame version of your objects). Locking layers when you are finished working on them is smart. So is turning off their visibility when you are working on complex issues on another layer.
You can rearrange the order of your layers by clicking on the one you want to move and dragging it up or down.
Flash helps keep things simple by allowing you to break down long, complex animation sequences into scenes. This way, you can deal with relatively short pieces that will play sequentially and appear seamless. Once you get to the point of having to scroll forever to get to the end of a layer, and then back to the beginning, you’ll definitely appreciate this feature.
Create a new scene from the Insert menu, or by clicking on the new scene icon in the Scene panel (Window > Other Panels > Scene).
Move from scene to scene in the Scene panel, or selecting the scene you want from the clapper icon at the top right of the document window.
Test one scene at a time (rather than the whole movie) using Command Option Return.
By default, Flash names the scenes numerically. You can change this in the Scene panel by double-clicking the name and changing it.
Rearrange scene order by dragging scenes up or down in the scene panel.
Scenes are best used for a sequential presentation, with no need to navigate out of sequence, or backwards in the timeline. If you need to do those things, using a bit of AS and the loadMovie or loadMovieNum technique are best, and what Flash experts recommend (including Adobe).
Certain drawing tools have drawing options attached to them. These appear at the bottom of the Tool bar when you select a drawing tool.
Selection tool: use this tool to select things, move them, and edit shapes and lines. Double-click and object to select both the stroke and the fill. Bend edges by deselecting everything and then moving this tool close to the edge of an object. When the cursor changes, click and drag the edge. To extend a line or move a corner, deselect everything and move the Selection tool close to the corner point; when the cursor changes, click and drag to reposition the corner.
Subselection tool: this works sort of like the Direct Selection tool (hollow arrow) in Illustrator. Click on a line or shape to edit its anchor points.
Free Transform tool: click on an object with this tool and then use the control points to rotate, scale, distort, and skew it. From its options, you can also choose “envelope” which places curve points around the object that you can then click and drag to distort the image.
Gradient Transform tool (behind the Free Transform tool): when you are working with a gradient fill, use this tool to adjust the direction and spread of the gradient, and in the case of radial gradients, the shape of the ellipse.
3D Rotation tool: when you are working in a Flash file set to AS3, this tool allows you to move objects through space, along X, Y, and Z axes. It is not about true 3D objects (i.e. those with volume).
3D Translation tool: this moves the point of view around an object in 3D, as a camera would move around something in space. http://www.layersmagazine.com/3d-translation-tool-in-flash-cs4.html
Lasso tool: select freeform shapes by clicking and dragging around an area.
Pen tool: click to create corner points, and click and drag to create curve points. This tool works a bit differently than the one in Illustrator and takes a bit of getting used to, but it’s OK.
Text tool: click and type, or click and drag to establish a bounding box. There are three kinds of type in Flash: Static, Dynamic, and Input. Use static text for most things: select it in the Properties panel. Dynamic and Input text require AS to function.
Line tool: click and drag to create straight line segments in any direction; use the Shift key to constrain a line to horizontal, vertical or 45 degrees.
SHAPE TOOLS
Rectangle tool: click and drag to create a rectangle. You can add rounded corners to a rectangle using the Rectangle Options portion of the Properties panel to specify the number of points to a star, or sides to a polygon.
Oval tool: hold the Shift key to constrain to a perfect circle. Hold Option to draw from the center.
Polystar tool: this draws polygons, or stars. Select the number of sides, or points, using Tool Settings > Options in the Properties panel.
Rectangle and Oval Primitive tools: the shapes that are created with these tools are much like drawing in Object Drawing mode, and can be modified using the Properties panel. Set rounded corners for a rectangle, and inner radius and start and end points of ovals and circles. Worth playing with!
Pencil tool: select a line/stroke color to draw with this. Its options (located at the bottom of the Tool bar) are to draw straight lines, curved lines, and ink lines. Depending on the option you select, Flash will try to straighten what you’ve drawn, or smooth it out, or leave it as drawn.
Paintbrush tool: select the fill color you want when using this tool. Its options include normal, paint fills, paint behind, paint selection, and paint inside. You also get a dropdown menu for selecting brush size and another for brush shape. Remember that even though this feels like a bitmap brush, it’s creating vector shapes, like the brush and blob brush in Illustrator.
Spray Brush tool: by default, you will spray little dots all over. This tool works using a specified symbol; once you create a symbol, you can use the Edit option in the Properties panel to select it and spray something different. Play with the other options (scale, random rotation, etc.) using the Properties panel as well.
Deco tool: this is just weird. Again, it works using symbols. You can set it to create a vine effect, a grid effect, or symmetry. Create symbols to use as the flower and leaf for the vine option, and select those using the Drawing Effect portion of the Properties panel.
Bones tool: As with the 3D tools, this will only work in a project set to AS3. It literally connects shapes together with digital “bones” and the space between the shapes act as joints. (video demo to come).
Paint Bucket tool: select a fill color and click within a shape to change its color. You have some options about whether this will fill shapes that are not quite closed, mostly closed, or not to fill an open shape.
Ink Bottle tool: select a stroke color and use this tool to add or change the stroke around a shape; click on the edge of an existing shape. If the shape has a stroke, this will change the color. If it doesn’t, it will add one.
Eyedropper tool: Use this to pick up a color used elsewhere in your document. As soon as you click, the eyedropper turns into the Paint Bucket or Inkbottle so you can apply the color/stroke to another object.
Eraser tool: Use this to erase lines or fills; select its size and shape from the option portion of the Tool bar. You can erase normally, erase fills, erase lines, erase selected fills, or erase just inside an object. Turning on (highlighting) the faucet icon completely erases anything you click on.
Hand tool: use this to scroll around your stage (or better yet, use the Spacebar shortcut).
Magnifying Glass: this zooms your view closer or further away (use the Spacebar and Command keys to zoom in, or Space, Command and Option to zoom out. Command + and Command – also work faster than using this tool).
COLOR (Toolbar)
The pencil icon selects edge/stroke colors from a popup swatch panel. The bucket selects fill colors. Depending on the tool you have selected, you can set these to none (white box with a red slash through it) and set the Alpha (transparency) at the top. If you are using hexidecimal numbers to specify color, you can type the number in here as well.
Use the buttons under the two color selections (from left to right) to reset the colors to black and white, or reverse the stroke and fill colors.
There are two drawing modes in Flash. One is called Merge mode (which I call weird mode, although I use it, and prefer it), and the other is called Object mode.
Object drawing creates vector elements that are a lot like those you create in Illustrator with the pen tool, or any of the shape tools. To draw using Object mode, make sure the Object Drawing icon is selected at the bottom of the toolbar. You’ll note, when drawing with this option on, that everything is surrounded by a blue rectangle—indicating is a group (even if it’s only one shape!). You can change the fill and stroke color of object drawings the same way you would using Merge drawing mode; select the object with the Selection tool, and use either the Color panel, or the Toolbar to select different colors for each.
Merge drawing mode (with the Object Drawing mode icon turned off, or not indented and darker) works a lot like Photoshop in many regards. To select a Merge drawing object, you must double-click the fill area, which will select both the fill and the stroke. To select just the fill, click once in the fill area. To select just the stroke, click, or double-click directly on the stroke itself.
Creating a new element on top of another in Merge drawing mode will actually delete any content underneath it, hence the name “merge” for this drawing mode. This can be frustrating or convenient, depending on what you’re after. (video demo to come)
Creating colors and gradients is fairly straight-forward. Access the color/gradient panels from the Window menu.
Before creating a new color, determine if you want it to apply to a stroke or a fill by selecting one or the other of those icons at the top left of the Color panel. Then select the Type of color (solid, linear gradient, radial gradient, or bitmap) from the popup menu.
To create a new color, either move the cursor around in the Color panel’s spectrum until you find the hue you’re interested in, or, if you are comfortable mixing colors using RGB, you can use those sliders to create the color you want. At the right of the spectrum, you can adjust the tint or shade of the color you’ve selected by moving the triangle up or down.
Just beneath those two options, you can type in a hexidecimal number, if you are using those. You can also set the Alpha (transparency) here.
Creating a new gradient is also fairly simple. Follow the same steps for creating a new color, only make sure you have first selected a gradient as type. Click on one of the color tabs in the gradient slider that pops up and then select or mix a new color. Repeat these steps for each tab in your gradient. Add new tabs by clicking below the gradient bar. Double-clicking on a tab will open a swatches panel that you can use to select a web-safe color. A word of advice: don’t use the gradients that are preset in the Swatches panel—they aren’t pretty, and usually clash with anything else you may be developing.
Save new colors and gradients by choosing Add Swatch from the Color panel’s flyout menu.
Modifying gradients is easy.
Draw the object and fill it with the desired gradient. Then select the Gradient Transform tool. Click in the gradient-filled shape to select it.
If you are working with a linear gradient, your object will have two bars, one on either edge, indicating the start and end points of the gradient, as well as a circle representing the midpoint.
To rotate a linear gradient, click on the circle at the top right of the bar and drag it to the desired position.
To expand or contract a gradient use the box/arrow icon in the middle of the bar to move the edges in or out as desired.
To change the midpoint of the gradient, you can either adjust the position of the sliders in the gradient bar of the Color panel, or click on the center circle of the gradient transform and move it.
To reshape a radial gradient, grab the box/arrow icon and move it in or out.
To rotate it, grab the bottom circle/triangle icon and drag it around.
To scale a radial gradient, click and drag the circle/arrow icon just under the box.
To set a new center point for a radial gradient, click on the center point and drag it to a new location.
To skew the focus of the center, click and drag the triangle (just above the center circle) to the left or right.
If you are restricted to using web-safe colors, you can use the Swatches panel to select them. This is also where any saved colors or gradients are stored. Once good way to create new colors is to select one close to what you want from the Swathes panel, and then modify it using the Color panel.
You can change the fill or stroke of any existing object by selecting it, and then creating or choosing a new color from Swatches or Color. If you forget to select the stroke or fill first, use the Paint Bucket or Inkbottle tool to apply a new color.
Finally, clicking on the swatch next to the pencil or bucket in the Toolbar will open a Swatches panel as well, and you can select any web-safe, or saved color or gradient, this way as well.
There are definitely times when you want to have some text in your movie—even if it’s simply adding words to a button.
Most of the text you’ll be working with is static text— that is, it doesn’t change dynamically (it can be animated, however, which is different).
If you ever get into the coding that uses dynamic and input text (where the user can type into a text field, or where some action on the part of the user triggers a text response in the browser window) you’ll need to worry about including your fonts, or allowing the user to specify his/her own. Just remember that for most purposes you want to make sure Static text is selected in the Properties panel before you type anything.
Creating text is a snap. Just click on the text tool and click, or click and drag a text box, and start typing. Use the Character option in the Properties panel to establish the font, font color, size, style, format, and so on. Use the Paragraph option to set the alignment, margins, leading and indents.
Static type’s appearance on the stage will look different depending on whether you click and type, or click and drag, and then type.
When you click and type, while the text tool is still active, the text box will have a circle in the top right corner. Click and drag this to reshape the textbox; Flash will wrap text automatically, based on the width of the box, and make it taller in order to accommodate all the text.
Clicking and dragging a text box first places a square at the bottom right of the text box. Again, use the text tool to click and drag the square to create a different rectangular shape.
Once you have manually altered the dimensions of a text field, the box has a square in the upper right corner. Double-click this to have the text box resize to fit the contents automatically (very nice!).
Dynamic and input text boxes are dotted, and remain visible on the stage, so if you ever see that sign, select the text box and use the Properties panel to change it back to static.
As I mentioned previously, the weird drawing in Flash just makes me crazy. With few exceptions, I tend to draw what I need in Illustrator and then copy and paste it onto the stage. I then break them apart (command B) and turn it into a symbol.
You can save an Illustrator file in its native format (AI) and import the whole thing into Flash (File > Import > Import to Stage, or Import to Library). A dialog box will allow you to determine what gets imported, and how. If you have done a good job of creating layers for different elements in Illustrator, Flash will recognize that and import the file using the same layers.
You can also import bit-mapped images (like those from Photoshop).
At this point, whatever you have imported not a symbol, therefore you cannot motion or classic tween it. You don’t have to make it one, unless it is something you want to use over and over. If it’s just a background, leave it as is...
Import formats Flash recognizes: .GIF, .JPG, .PICT, PNG, .PSD, .EPS, .BMP, and .SWF files, among others. The best format for bitmaps is PNG as they are smaller in size but have not lost any data. JPG images are the next best option. PSD files will seriously bloat the Flash file, but generally will not make the final product (the SWF) any larger that using another format. The key to success here, no matter what file format you are importing, is to make sure that the image is sized and optimized (72 ppi) before importing it. Use Photoshop or Fireworks for bitmaps and Illustrator for vector graphics.
If you’re working on a terribly ambitious animation, most likely you will have several images that define all the positions of something—someone walking, for instance. If you save each position as a separate file and name them sequentially (i.e. walk1, walk2, etc.) Flash will recognize that they are part of a sequence as ask if you’d like to import them all at once. Nice!
If you are bringing in a bitmapped image, Flash can turn it into a vector image. Luckily, the math wizard working on Flash included a Trace Bitmap feature. After you import your image, select Modify > Bitmap > Trace. That dialog box allows you to determine the amount of detail you want to retain. Remember, the more exact you are, the larger your file size will be. Using higher numbers results in a smaller file size, but won’t retain as much detail in the image.
Use Modify > Break Apart (command B) on a bitmap image to reduce it to Merge mode drawing; you can then use the brush, eraser, or lasso tool (among others) to edit it.
You can also use a bitmapped image as a fill to apply with the paintbrush or paint bucket tool. Once it’s been imported, you will see it as a fill option in the Color panel; choose Bitmap as Type first.
Symbols are saved objects that can behave as still graphics, animations, or buttons. You can import images to use as symbols in Flash, or you can use Flash’s drawing techniques and tools to create them. Drawing something on the stage doesn’t make it a symbol. Create a symbol by choosing Insert > New Symbol (command F8), or Modify > Convert to Symbol (F8).
To convert an object on your stage, select it before choosing Convert to Symbol (F8).
Selecting New Symbol or Convert to Symbol opens a dialog box where you can name your symbol, and set its behavior, or type. When creating a new symbol, you will switch to edit symbol mode automatically. The symbol editing window has the same features (stage, layers and timeline) as the main movie. The only difference is that anything you draw here will become a permanent and reusable piece of your project. You can exit from this place by clicking on Scene 1 at the top left of the document window, or typing command E.
All Flash documents have a Library. This stores any symbols you create, whether they are graphics, animations, or buttons. You can even use symbols from another movie by opening that file and then selecting its library from the Library panel’s popup menu. Then, simply drag the symbols you want to use onto the stage. Access the library from the Windows menu (command L).
You’ll read a lot about instances and symbols in the same sentence and perhaps be as confused as I was when I first started messing around with Flash. Put simply, a symbol is an actor in a movie. An instance is when that actor shows up and reads a line or two. Instances of the same symbol can do different things–just as an actor would move around and have different lines in each scene s/he was in. In other words, you hire one actor (a symbol) and s/he appears in several scenes (instances).
You can duplicate symbols and edit the copies, sort of like having your actors change clothing. Changing a symbol in edit mode transforms all instances of that symbol in your project.
You can modify an instance of a symbol (without editing the original) in several ways by using the Properties panel or transformation options to change tints, transparency, size, position, rotation, and movement.
Some of these changes occur on the stage. Click the on-stage symbol (the instance) to adjust color effects of the symbol using the Properties panel. Choose between brightness (light and dark), tint (hue), and alpha (color opacity).
You can also set the instance’s position and size in the Properties panel, as well as add a filter to it.
Use the Properties panel to name the instance (important if you’re going to add AS)
Change other aspects of the instance by using the free transform tool, the Transform panel, or Modify > Transform.
To edit a symbol (i.e. change it drastically and permanently), double-click on it to move into symbol edit mode. Changes you make here will alter the original symbol and all its instances. Return to the stage using command E, or clicking on Scene 1 at the top of the document window.
As for animating a symbol, here are the basic rules:
BUTTON SYMBOLS
Buttons have four parts to them. The first is its “up” state. The second is its “over” state (when the mouse moves over it). The third is its “down” state (when you click on it). The fourth part indicates the area that is click-able—its “hit” state.
Create a button symbol by choosing Insert > New Symbol (command F8) and making sure you check Button for type. Or, draw the up state on the stage, select it, and then use F8 to open the Convert to Symbol dialog box. Name your symbols. Do not let Flash name them for you! While there are some naming conventions that you should follow in Flash, naming symbols is anything goes. Do keep them short, but descriptive, so they are easy to find and use.
If you are creating a symbol from scratch, once you click OK (after selecting the type and naming it) you will flip into symbol edit mode, where the timeline has four frames reflecting each button state.
If you created it from something selected on stage, you will remain on the main timeline. To get into edit mode, double-click your new symbol.
Create the graphic you want to use in the up state frame (or it will already be there if you converted something on the stage). When you’re pleased with it, click the Over frame and insert a keyframe (F6, or Insert > Timeline > Keyframe ). The Up graphic will appear in the Over frame. Make any changes to it you’d like, including deleting it and creating something completely different.
Click in the Down frame and insert a keyframe (F6, or Insert > Timeline > Keyframe). Again, make any changes you want.
Finally, insert a keyframe in the Hit frame. You can leave the graphic that’s copied there, but the real purpose of this frame is to create a box or circle that will become the live area of the button—where someone’s cursor needs to be in order to trigger the finger icon to signal a button action.
Exit edit symbol mode using command E, or click on Scene 1 in the document window.
Your new button is in now your library (command L, if it isn’t showing), ready to be used. Drag it from the library to your stage (perhaps on its own layer, to keep things organized).
Buttons don’t do anything until you assign some ActionScript to them. Select a button instance and open the Actions panel. Here are some of the most common codes for buttons (type these into Actions panel; make sure the tab at the top left says ACTIONS-BUTTON):
on(release){ play(); } starts the movie
on(release){ stop(); } stops the movie
on(release){ getURL(http://www.tatoland.com); } takes the viewer to a different web page
on(release){ gotoAndPlay("framename”); } goes to the specified frame
You can add sound and animations to buttons.
To add sound, it’s a good idea to add another layer in the button’s edit mode. Create a keyframe in the button state where you want the sound to occur (F7, for a blank keyframe). Import the sound to your library (command R), and then drag it to the stage while that frame is selected (within the button’s edit mode).
You’ll want to make sure it’s a short sound, and not too loud so it doesn’t annoy people. I’d also caution against using sounds on all your buttons, since that can also be annoying after a while.
Select the frame (click on it in the timeline) and check the Properties panel to make sure the sound Sync is set to Event.
Adding an animation to a button state is a bit more complex: first you need to create a movie clip symbol of the animation you want to use.
Once you’ve done that, insert the movie clip into the button keyframe where you want it to play (often you’ll see these on the over state).
Whenever you create a symbol, or import an image or sound, it’s placed in the project’s library. The Library panel shows you what you’ve got both by name and an icon representing the type of symbol it is, as well as a preview of it.
In the case of a movie, sound, or button symbol, the Library’s preview pane will also have a play button that, when clicked, shows you the movie, plays the sound, or shows you the four button states (in rapid succession!).
The Library flyout menu, accessed from the top right of the panel, provides the opportunity to create a new symbol, edit a symbol and/or its properties (you can change a button symbol to a movie clip, for instance, although it acts like a button in every instance you’ve used it until you changed its properties). You can delete and rename your symbols from this menu as well. There is a Properties option in this menu that is important to several aspects of using Flash, so remember it’s there.
At the bottom of the Library panel are icons that let you add a new symbol, create a folder (great for consolidating all your sounds, all your buttons, and so forth), get information about a symbol’s properties (faster than using the flyout menu to select Properties), and trash a symbol.
If you scroll to the right in the library panel, you’ll see information about what kind it is, how often it’s been used, and when it was last modified. If you have linked the symbol or sound to the timeline, you will also see the linkage identifier name.
If you find you have a lot of symbols called “tween1,” “tween 2,” tween 3,” and so on, it means you tried to make a classic tween between a symbol in one keyframe and something else in the next keyframe, or something that wasn’t a symbol in the first place.
To use a symbol, select the layer and frame where you want it to appear, and create a keyframe (F7). Then just drag your symbol to the stage.
This creates an instance of the symbol.
Remember that if you want to create any animation using that instance, it must be on its own layer.
You can use symbols from another project; open that project, and the use the popup menu at the top of the Library panel to select the library of that project. Grab the symbol you want and drag it to the stage of your current project. Remember to switch back to the current project’s library when you are done. Once you’ve placed it on the stage, you can delete it—it will remain in your Library.
There are also shared Libraries in Flash—the program comes with several (check Window > Common Libraries) and you can make your own, which can be useful if you reuse some symbols all the time. Create a Flash file and develop all the symbols you need (make sure they have been made into the appropriate symbol types) and save the file. Make sure it is placed in username > Library > Application Support > Adobe > Flash CS4 > en > Configuration > Libraries, so that it will be available under Window > Common Libraries from then on.
The concept of moving pictures being familiar to you all, I will skip the background theory and practice.
Each frame in a layer (called a protoframe until it has something in it) represents a moment in time. You do not have to place a new image in each frame to make a movie. All you need to do is place keyframes across the layer, and then ask Flash to tween between those keyframes.
A keyframe defines a shift or change in they symbol. When using classic tweens, the black dots in the timeline represent changes that occur in keyframes. If you are using motion tweens, the changes are represented by black diamonds, called property frames.
Clicking on a non-keyframe will show you what’s happening at that moment in time. If you want to make a change and are using classic tweening, make sure to create a keyframe first—not doing so will create a new symbol. If you are using motion tweens, just
Creating animation between the key frames or property frames is called tweening. Flash takes the symbol in the first keyframe, and gradually (over the number of frames between keyframes or property frames) transforms it into what it looks like in the next key/property frame. Transformations include position, size, color, transparency, rotation, movement and so on.
It’s very simple.
Place a symbol on the stage at the beginning of the layer.
Click on another frame later on (say, frame 20) to select it, and choose Insert > Timeline > Keyframe or F6 (why would you not memorize that shortcut!!). Flash inserts the same symbol in the same location on frame 20. You now have about a 2 second movie of an object sitting still (if the project is set to the default 12 fps).
To make the symbol move, click on frame 20 and move the symbol with the selection tool. Or modify it using any of the transformation options in the Properties pane, or using any transformation tool.
Then click anywhere between the first and last keyframes and select Insert > Classic Tween. Faster than that, Option-click between the two keyframes and select Create Classic Tween from the contextual menu.
One thing you must remember is that you cannot create any kind of tween between more than one symbol per layer. You can’t even place a simple drawing on the same layer with a symbol if you want a tween. It makes Flash crazy.
Place a symbol on the stage in the keyframe at the beginning of a layer.
Select another frame some distance out (frame 20 or so) by clicking on it, and press F5 to add time—you will not get a solid dot as you do with a classic tween.
Highlight the last frame.
Select the symbol on the stage and make the changes you want to it: size, position, rotation, tint, alpha, and so on.
Then click anywhere between the first and last keyframes and select Insert > Motion Tween. Faster than that, Option-click between the two keyframes and select Create Motion Tween from the contextual menu.
Once you’ve got something on a layer that moves, there are two ways to preview the action. The first is with the control window (Window > Toolbars > Controller). This is a standard graphic representation of play, stop, and rewind, as well as step forward or backward one frame. Press play to scub through the timeline. Or simply press Return (a lot faster!).
The other is pressing Command and Return together. This command opens a Flash Player window and automatically plays the action over and over again.
After previewing what you’ve done, you may decide that something isn’t exactly right. If you are using classic tweens, click anywhere between two key frames and insert another (F6). Having created a new keyframe, you can now make adjustments to the symbol instance to fix things.
If you are using motion tweens, highlight the frame where you want to create a change, and make that change. Unfortunately, some changes you may make between two others previously made may mess up the symbol in the next property frame. Changing the position is not an issue, but resizing it, rotating it, changing the alpha and so on changes it permanently until you change it back again. It’s kind of a pain, which is why I prefer classic tweens. However, if you are just starting out in Flash, and are organized, you may be just fine with motion tweens. Try it.
Keyframes are indicated with solid dots and signal there is a symbol in that frame.
The arrows in the blue frames indicate there is a tween between two keyframes, or two property frames. Classic tweens are sort of periwinkle blue, and motion tweens are more of a baby blue.
Dotted lines indicate you tried to tween something and it didn’t work.
The gray boxes indicate there’s nothing happening in the animation.
Non-symbols can be tweened using the Shape tween option, indicated by a green timeline.
Original cell animation allowed the artist to see the position of objects before the one s/he was working on. This is called onion skinning, and Flash (and other animation programs) have adopted the term. It allows you to see what is on the frames before and/or after the current frame.
The two options for onion skinning (just below the frames at the bottom of the timeline) are Onion Skin which shows previous frame objects in paler colors, or Onion Skin Outlines, which just shows you the wire frame of the objects.
When you select an onion skinning option, Flash indicates the frames being viewed with a grey marker at the top of the timeline. To see more or fewer frames, pull the edges of the indicator in or out.
To move all the objects on a layer, or within a tween—to a different location on the stage, for instance—click on the Edit Multiple Frames button, and drag the grey bar so it covers the frames you want to affect. Make sure any layers you don’t want to mess with are locked. Click on the artboard area to deselect everything. Then press command A to select everything—all instances in key or property frames—and move or otherwise transform them all at once. Deselect the Edit Multiple Frames option when you are done.
The speed of your movie makes all the difference between a cheap GIF animation and a real nice, smooth, professional one. Regular film animations use a frame rate of about 29.9 frames per second (fps). The default frame rate in Flash is 12 frames per second. You can change that in the document properties dialog box, or by clicking on the frame rate under the timeline, or using the Properties panel (make sure nothing is selected in order to see that option in the Properties panel).
The higher the frame rate, the more frames you need for an animation, or your movie will be over before you can blink. In any case, I would never recommend anything faster than 18 fps for the web—limited bandwidth could make anything faster than that slow to load and weird when it plays.
Remember that the frame rate applies to the whole animation—you can’t speed up or slow things down within an animation by changing the frame rate at random: use fewer or more frames to speed up or slow down the animation instead.
CLASSIC TWEENS are motion tweens that occur between two keyframes, where each keyframe contains an instance of the same symbol.
1. Start by dragging a symbol to the first frame of a layer.
2. Go some distance out—frame 40 or so— and press F6 to add another keyframe. Pressing F6 adds a keyframe and copies over whatever was in the keyframe to the left of it, so you now have two keyframes with the same symbol in it.
3. Control-click between the two frames and select Create Classic Tween from the contextual menu.
4. Now you have a choice for changing the symbol in one or both of the keyframes so the symbol instances are animating in some way.
5. The easiest thing to do is move one of the instances to a new location.
6. If you are trying to imitate space, you can move and enlarge or reduce one of the instances. You might also consider lightening the opacity (alpha) as well since things in the distance tend to be pale.
7. If you are animating any sort of wheel, you could add an automatic rotation so as it moves across the stage, it’s also turning.
One of the classic first animations for Flash is the bouncing ball, which requires 3 keyframes: a beginning, where the ball is at the top left (or right) of the stage, a second keyframe where the ball is located at the bottom middle of the stage, and finally, in the third keyframe, at the top right (or left) of the stage. To make it even more realistic, you could add keyframes to the right and left of the middle keyframe. Then select the symbol in the middle and use the Free Transform tool to squish it a bit, as a rubber ball would squish when hitting the ground.
The reason you would want to add the keyframes to either side of this transformation is so it only squishes at that instant. Other wise, it will start to squish the minute it starts to move, and unsquish over time until the final keyframe is reached. Not very realistic.
So, the key points for a classic tween are that you use two (or more) keyframes, with instances of the same symbol in each. Control-click between each set of keyframes to add a classic tween. And finally, create a change to the symbol in each keyframe.
A CLASSIC MOTION GUIDE tween dictates the animation using a path, rather than straight lines between keyframes. They require two layers—one for the path, and the other for animating the symbol.
1. To create a classic motion guide, start by placing a symbol on the stage in the keyframe where you want the animation to start. Add some time to the timeline by going out several frames and pressing F6 to add an ending keyframe.
2. Option-click between these two keyframes and select Create Classic Tween.
3. Then Option-click on the layer name (not within the frames area), and select Add Classic Motion Guide from the contextual menu. Another layer will be added above the first. The icon for this layer will be a dotted arc, and the layer will extend the length of the timeline.
4. In the first frame of this new layer, use the Pencil or Pen tool to draw the path you want the symbol to follow. Adjust the curves with the Subselection tool, or smooth things in general with Modify > Shape > Advanced Curves.
5. Lock the layer so you don’t inadvertently mess with the path in the next step.
6. In the first frame of the animation layer, use the selection tool to reposition the symbol so its registration mark (the circle) snaps to the beginning of the path. Click the magnet in the Toolbar to make this snap nicely.
7. Highlight the ending keyframe and drag the symbol to the end of the path you drew. Make sure the registration point snaps to the end of the path.
Play the movie using Command Return to see if it worked!
If it didn’t, and trust me there will definitely be times when it doesn’t, try snapping the symbol to the beginning and end points again. Use View > Snapping and select Snap to Objects, and make sure the magnet icon in the Toolbar is active.
If it still won’t work, delete the path on the guide layer and draw a new one. Remember to reposition the symbol in the guided layer to the beginning and end of the new path.
MOTION TWEENS also use a single symbol multiple times, but only require a single keyframe at the beginning. Any changes made along the timeline are indicated with small black diamond shapes, called property frames.
1. Start by dragging a symbol to the first frame of a layer, then add time to the timeline by going out some distance—frame 40 or so—and pressing F5 (NOT F6). This adds an ending frame to the animation. You can move the position of this frame any time by positioning the Selection tool at the end until you see a double-headed arrow. Then simply click and drag left or right to adjust the distance.
2. Control-click within the gray area of the layer and select Create Motion Tween.
3. Position the playhead in the middle of the timeline and move the symbol, change its appearance, or otherwise modify it. Once you have moved it, you will see a straight line with a series of dots representing the starting point and end point of the animated symbol. The dots represent the number frames that will be used to create this animation.
4. Position the playhead at the end of the layer and move the symbol one more time; another straight path will appear.
5. Move the Selection tool to the edge of this path and click and drag to bend it, and do the same with the first half as well. See if you can bend the two halves to make a circular shape.
Note that there are some larger dots on this path—one at the beginning, one in the middle, and one at the end. These are anchor points, and you can use the Subselection tool to modify their position, and the direction handles that dictate the curve. You can also use the Convert Anchor Point tool (behind the Pen tool) to adjust the direction handles. Do not attempt to modify the path in any other way, as Flash will pop up a nasty warning to tell you that this is a tween span and does not support drawing. That is to say, you can’t add any anchor points, but you can delete them and modify them.
This path is the “new” motion guide, placed automatically the instance you create a motion tween, and then move the symbol. It works very well for linear animations, and can be a bit hard to work with if you want a seamless loop—your symbol following a round path, for instance. The more you play with it, the better you will get.
Keep adding time to the timeline as needed by highlighting a frame and pressing F5 to extend it.
Changing the symbol is quite simple. Select a frame where you want the transition to end (it will start with your first keyframe, automatically).
To change the size of your symbol, click once on a keyframe and use the scale tool to resize the symbol. Remember that as things get smaller, they tend to create the illusion of being farther away.
To make the symbol a different color, more or less transparent, or lighter or darker, click on the symbol itself use the Properties panel to specify the changes. Remember, an alpha of 0% is totally transparent.
You can have the symbol follow a motion guide by selecting the Rotation option in the Properties panel and then checking the Orient to path button—this is particularly valuable when the symbol is something that generally moves forward, like an airplane or butterfly. Highlight the frames in the layer first.
To orient a symbol to the path using a classic motion guide, select the keyframe where you want that to start, and use the Tweening option in the Properties panel to set it to Orient to path. You’ll also see the Easing option here. Easing in starts the tween slowly, and easing out ends the tween slowly. You can adjust the speed of any tween you make with the ease properties.
You can set the ease for a motion tween using the Motion Editor. Typically, it’s tabbed with the timeline, but if you don’t see it, you can open it using Window > Motion Editor. Scroll down to the bottom to find the Eases options. Click the plus sign to access a popup menu where you can select from a variety of eases. Again, make sure the frames in the timeline are selected first.
SHAPE TWEENING is the final option available. In the case of shape tweening, you definitely CAN’T use symbols. You must use ungrouped, root-level objects, and I advise you to use merge drawings, rather than object drawings.
Draw an object in the first keyframe and then add time to the timeline. Use F7 this time, as you need a keyframe at the beginning and end of a shape tween. F7 creates an empty keyframe.
Draw another shape in this final keyframe.
Control-click between the two keyframes and select Create Shape Tween.
Test your movie (Command Return) to watch the first shape morph into the second shape.
If weird things are happening, you may want to add a keyframe between the beginning and end and draw something to serve as an intermediate phase.
The other option is to use Shape Hints to guide the metamorphosis. Select the symbol in the first keyframe and choose Modify > Shape > Add Shape Hint. A small “a” will appear in a red circle on the first keyframe. Drag it to the place on your object that you want to use to control the morphing. It should turn yellow.
Move the playhead to the ending keyframe and move the “a” to the corresponding point in the ending shape. It should turn green.
Test the movie now and see if that helped, or made things worse. You can add as many shape hints as you need, but sometimes the best thing to do is to create intermediate drawings, rather than having Flash make animation decisions for you.
It is extremely helpful to use onion skinning to position the first object in relation to the final object.
As with motion tweening, keep different shape tweens on different layers, including separate layers to separate strokes from fills; place the fill on one layer, and its stroke on a second.
Once you’ve made something happen once using classic tweens, you may want it to go back (in an animated way) to where it was originally. Rather than redoing the whole process in reverse order, it’s a simple matter to take what you’ve already done and reverse it.
To reverse an animation:
1. Select all the frames you want to reuse (click and drag in one motion) and instead of copying them, choose Edit > Timeline > Copy Frames. Or, Control-click and select Copy Frames from the contextual menu.
2. Select the keyframe(s) where you want the action to start going backwards and choose Paste Frames from the Edit menu (Edit > Timeline > Paste Frames), or use the Control-click contextual menu trick.
3. Make sure all the newly pasted frames are selected. Then, use Modify > Timeline > Reverse Frames. That’s all there is to it!
4. Follow the same steps for a motion tween, only use the contextual menu (Control-click) on the pasted frames and select Reverse Keyframes.
If you’ve developed a sequence within a movie that you want to use over and over again—say a star that flashes, or a falling snowflake, you can actually turn that sequence of frames into a graphic symbol, allowing you to use it whenever you want, without cutting and pasting frames each time. This too, is easier than you might think, and something you should get in the habit of doing; it’s a LOT easier to edit a symbol than it is to mess with a complicated main timeline.
1. First, using classic, motion, and/or shape tweening, develop the animation you need on the stage. Select all the frames and copy them (Edit > Timeline > Cut Frames, or Control-click > Cut Frames).
2. Choose New Symbol from the Insert menu (or press Command F8). Make sure it is set as a graphic symbol.
3. Select the first frame of the timeline in edit symbol mode, and then Edit > Timeline > Paste Frames (Control-click > Paste Frames). Flash will place all the frames and layers onto your stage and into the timeline.
You will see a new symbol that represents your animation in the Library. Whenever you want to use it, simply drag it from the library to the stage.
Even though this graphic animation is represented with one dot on the timeline, it still requires time to play. You must have the number of frames required to view the animation in its entirety or you will only see the first frame(s) of the animation. You can also have it play more than once by adding multiples of the number of frames in the animation to the main timeline (i.e., if the graphic is 10 frames long, you can make the main timeline 20, 30, 100 frames long, as long as it’s a multiple of 10).
The best time to use an animated graphic symbol is if you want to start each instance of that animation at a different point in time.
lace them all on one layer). Select one instance, and in the Properties panel, note the Looping options. In the Frame field, type a number between 1 and the total number of frames in the graphic symbol; that’s where the animation will start. Set a different frame number for each instance to have the stars flash at different times. Nice!
Movie Clip symbols (where you would choose Movie Clip in the new symbol dialog box) are made the same way as animations created as graphic symbols. The difference between the two is that a movie clip symbol can be placed into a single frame of a movie and it will play over and over, independent of what else is going on.
To make a file really, really small, you could even turn your whole movie into a movie clip, place it in a frame in a new Flash file and export it for use on the web.
In a small experiment, I discovered my original 17K file was reduced to 8K by doing this.
Sound can be used in a Flash movie in several ways; you can sync sound to an animation to make characters talk, you can have it as background music, you can add it to buttons, and you can use it to illustrate a point (sound effects or sfx).
Flash can import several sound formats:
| format | Mac | Windows | needs QuickTime |
| ASND (SoundBooth native file) | x | x | |
| WAV | x | x | x |
| AIFF | x | ||
| MP3 | x | x | |
| AIFF | x | x | x |
| Sound Designer II | x | x | |
| QuickTime sound files | x | x | x |
| SunAU | x | x | x |
| System 7 sounds |
While you can do some really basic (and I mean really) formatting on sound files in Flash, you should absolutely edit your sounds before importing them (Sound Studio by FeltTip Software is a good program for editing sound files and it’s reasonably priced. If you have SoundBooth, that’s even better).
Specifically, if you just want several seconds of a song to play, don’t import the entire song. Crop the parts you don’t want in a sound editing program and just import what you need. As you know, even MP3’s, which are already compressed, can take up a lot of memory.
To add sound to your movie, import it using File > Import > Import to Stage, or Import to Library. It will end up in your Library no matter what you choose.
Before you add a sound to a project you should optimize it with an appropriate compression scheme. Control-click the sound in the Library and select Properties from the contextual menu.
The Sound Properties panel will open, showing you the sound wave, the location of the original file, its length, file size and so on. Select a compression scheme from the popup menu, and then click the Test button. You can choose from Default, which is MP3, ADPCM (don’t choose this as it’s rather antiquated), MP3 (if your file is not already an MP3 file), Raw (no compression at all) or Speech (best for narration or dialogue, although it’s also a good choice for music for a band or musician’s site, too).
If you choose anything except Default, you will get some other options for preprocessing (uncheck the convert stereo to mono option), the bit rate (24kbps is good), and Quality. You’ll also see the new size of the sound, along with how much it has been compressed. Keep using the Test button to be sure that the settings you have selected are keeping file size small, but without compromising on the quality of the sound.
The second thing you need to do is think about the purpose the sound will serve, as that will determine how you implement it.
It’s important to understand is the different sound sync options, and which does what:
Event sounds play when the playhead reaches the keyframe where the sound has been placed; they play until they are finished, which means that if the movie loops, and reaches that keyframe before the sound is completed the first time, it will play again on top of itself. Noisy! Event sounds are great for sound effects, and button clicks.
Streaming sounds start playing as soon as they begin to download and are dependant on the timeline. A streaming sound will stop playing when it hits a stop action in the timeline. Streaming sounds stay in sync with the frame rate of your movie. If Flash can’t draw content fast enough, it will skip frames, rather than chop up the sound.
The start option is used when you want an event sound, but do not want it to play over itself; if one instance of the sound is playing, using start, instead of event, will prevent it from playing until the first instance has completed.
Stop is used to stop a sound that is already playing.
To add sound to the timeline, create a layer and name it “sound” (or “music” or whatever). Create a keyframe where you want the sound to begin, and then drag the sound from your library to the stage while that keyframe is highlighted Conversely you can select the sound for that frame using the popup menu in the Properties panel. The sound will be represented in the timeline as a blue sound wave; you won’t see anything on stage.
Once the sound is assigned to a keyframe, you’ll see the sync options in the Properties panel (make sure the keyframe is highlighted). Under the Sound option in the Properties panel, you will see the name of the sound you’ve selected, an option to set an effect (fade in, fade out, etc; press the pencil icon to access these options), and the Sync option. Based on what you’re doing with it, set this to the appropriate setting; use Event for short sounds (sfx) or dialog or narration, and use Start or Stream for background music. Stream is also a good setting to try for dialog or narration.
You can also link sound to a timeline. That is, you don’t place it in the timeline at all, but rather use the Advanced settings in the Sound Properties panel to set the sound to load at runtime. You can control these types of sounds with buttons to turn them off and on, and to control the volume.
Here are the steps for adding sound to a Flash file with this method:
1. Create a new Flash AS2 file, or open the one that you want to add sound to.
2. Import the sound using File > Import > Import to Stage or Library (it will be placed in the Library, not the stage in either case).
3. Double-click the sound icon in the Library to set the appropriate compression settings.
4. While you’re in the Sound Properties panel, click the Advanced option.
5. Click Export for ActionScript; Export in frame 1 will become checked automatically.
6. Give your sound a unique name; while you can call it what it’s called in the library, it’s smarter to modify the name to something shorter. Remember what you’ve called it as you’ll be using this identifier in the ActionScript you’ll be adding in a minute.
7. Click OK to save these settings and exit to the main timeline.
8. On a new layer, create a button symbol to start the sound, and another one to stop the sound.
9. Select the instance of the play button on the stage, and give it an instance name (play_btn would work) in the Properties panel.
10. Select the instance of the stop button and give it an instance name, too (stop_btn) in the Properties panel.
11. Name this layer buttons, and lock it.
12. Add a new layer named actions and lock it as well.
13. Highlight the first frame in the actions layer and open the Actions pane. Here is the code you need to type:
var my_song = new Sound();
my_song.attachSound("lounge");
play_btn.onRelease = function() {
my_song.start(0, 99);
};
play_btn.onPress = function() {
my_song.stop();
};
stop_btn.onRelease = function() {
my_song.stop();
};
song.start();
Make sure the word “lounge” in the code above is the linkage identifier you used in step 6.
Make sure the instance names, play_btn, and stop_btn, are the same names you used to name the instances in the Properties panel in steps 9 and 10.
Here’s how the code works:
In the first line, you defined a variable called “my_song.” You can use any name that you want (my_sound, bgSnd, whatever makes sense to you, just remember what you used here so you can be consistent when referring to it throughout the rest of the code).
The next line tells Flash what sound in the library you want to use and since it is a string, it needs to be in quotes (remember to change “lounge” to the identifier you used when linking your sound in the Sound Properties panel).
Then you referred to the instance names for your buttons, and told Flash what to do when they are pressed and released. Note there are two functions for the play_btn, so if you press it more than once, the press action stops the sound, and the release action starts it again. That prevents the sound from playing over itself. Note, too, that you used the variable name to let Flash know what sound to play. And also note that after the play action in line 4 there are parameters within the parentheses; this tells Flash to play the sound from the beginning, and to play it 99 times.
Finally, the last line tells Flash to start playing the song immediately. If you’d rather not have the music start automatically, delete this last line.
Once you get this working, save the file so you can refer back to it the next time you want to link sound to the timeline.
There is one other way to add sound to a project, and that is to load it from an external MP3 file. See the section on loading external files for more information.
When you’re setting up your Publish Movie options, be careful about how you handle any sounds you’ve used. If you’ve imported an MP3 file, and you choose to export your sound for the animation as MP3, your sounds will be doubly compressed, and therefore degrade in quality.
NOTE: if you import several sound files to your file and don’t use all of them, remember to delete them from your library, and choose File > Save As. Give the file a new name, or overwrite the original to ensure that Flash recognizes that you have deleted the sounds, otherwise the file size will just get bigger and bigger for no apparent reason.
Suffice to say, if you’re going to have sounds and music in your animation, keep the sound files as small as possible, and choose the best export options to ensure a quality you can live with and a file size that will still work on the web efficiently.
There are a couple of ways to handle video in Flash. One is to embed the video clip into the Flash timeline, which lets you add your own controls and any other content (graphic interfaces, popup captions, and so on), or creating a stand-along FLV file with a custom “skin” for the controls.
Flash is not a video editing program, merely a vehicle that can deliver moving pictures. If your video is too long, or has segments you don’t want to include, you’ll need to edit it in another program like iMovie, QuickTime, or Adobe FinalCut Pro, before importing it into Flash. Likewise, if the quality of the original video is poor, Flash can’t make it better. There are several links at the end of this lecture that cover video concerns, from the proper equipment, to special techniques in capturing video, to use on the web.
Flash CS4 comes with a nifty program called the Adobe Media Encoder (AME); it should be in the same location as the Flash CS4 folder on your hard drive. While Adobe suggests that you use this format for streaming video from a Flash Media Server, you still use it for embedding video in a Flash file, and for streaming video from your own website.
Start by organizing your files; create a new folder, and copy the video clip you want to use into this folder.
Open a new Flash AS2 file and save it in the folder where your video is.
Use File > Import > Import Video. Flash will open the Import Video wizard that steps you through the process.
In the first panel, click on Browse to locate the video clip you want to use. Check the Embed option.
At that point, you will be given the option to launch the Adobe Media Encoder; click that button.
It will ask you where you want to save the file; navigate to the folder where your video clip and FLA are saved.
Once you click Save, the AME launches, and you’ll see a little message telling you to come back to this panel once you’ve encoded your video.
In the first panel of the AME, you’ll see a list of videos in the queue, waiting to be encoded. Since this might be the first time you’ve used it, the video clip you selected in step 4 will be the only one listed. You can add more clips here by clicking the “add” button, and remove clips you no longer need to encode. You can also duplicate clips already in the queue to encode them using different settings.
Along the top of the queue you’ll see some options for format, preset, output, and status. Click and hold on the Preset arrow and select FLV Same as Source.
Click Start Queue; you’ll be able to see your video in the small preview window at the bottom left.
Once the clip has been encoded, flip back to Flash (you can quit the AME) and click Browse again to locate the FLV file; it should be in the same folder as your FLA and the original video clip.
In the next pane of the Video Import Wizard you’ll be asked how you would like the video to be embedded; straight into the main timeline, or as a movie clip symbol. You can also choose to place the clip on the stage right away or not, and whether you want to include audio.
Make sure you select Movie Clip for Symbol type in this pane. You can choose to place an instance on the stage or not; it’s easy enough to add it later, or remove it if you need to.
You’ll note, once you click OK, that you have two items in your library; the original FLV file (it looks like a video camera) and the movie clip symbol you created during the import step.
Double click the movie clip symbol to enter editing mode. Whoah! Long timeline! That’s your entire video embedded into the movie clip.
Add a layer inside this movie clip and name it actions; place a stop action in the first frame. This will prevent your video from playing automatically. We’ll add interactivity using buttons.
Exit editing mode to get back to the main timeline
Drag an instance of your movie clip to the stage.
It may be wider than your stage size and if so, use Modify > Document, and then select “contents” for the Match option. Before clicking OK, decide where you want to add the buttons that will control this video and add additional pixels to that dimension (if you want them at the top or bottom, add to the height; if you want them at one side or another, adjust the width).
Click OK and reposition the video clip on the stage. While it’s still selected, give it an instance name of “vid” in the Properties panel, then lock the layer.
Add a layer labeled “buttons” (you should name the video layer, too, while you’re at it).
Create a graphic that will represent your “play” button, and one for “pause.” Create one to rewind several frames, too.
Select each graphic and make it into a movie clip symbol, NOT a button. Using a movie clip will allow you to use Behaviors, which are pre-written bits of code that can control video. A button would work, but you won’t have as many Behavior options.
Select the movie clip you want to use to play your video and then go to Windows > Behaviors to open that panel.
Click the + symbol at the top of the Behaviors panel, select Embedded Video, and then Play from the flyout menu.
In the Play video pane that pops up, select the movie clip instance (vid) and then click OK. If you forgot to give your movie clip an instance name, Flash will ask you to do that now.
Click OK.
While your “play” movie clip is still selected on the stage, open the Actions pane to see the code that Flash added for you.
Nice! (Not that you couldn’t have figured this out on your own, by now, but sometimes it’s easier to let Flash do things for you.).
NOTE: Behaviors are not supported in Flash ActionScript 3 files, so don’t get too used to relying on them. Take a look at the code and make sure you understand the structure and how it works.
Select the “pause” move clip and add the code for that using straight code in the Actions pane (a simple stop(); action).
Select the “rewind” movie clip, and use the Behaviors panel to add the code you need. Again, open the Actions pane and study the code; make sure you understand how it works. Change the default of 2 frames for the rewind to 15 or 20.
Sometimes, the length of the video clip you want to use is just too large to embed within a Flash file. At that point, you’d want to create an FLV file, and then the SWF and HTML files that would stream it from your server.
Make sure you have a folder created, with the video you want to use saved in it.
Launch the Adobe Media Encoder—it should be in the same place on your hard drive as the Flash CS4 folder.
Click the Add button at the right and select the video clip you want to encode. It will be added to the queue with the status of “waiting.” You can add as many video clips as you want; just be forewarned that it can take some time for them to process.
You can click the Settings option to edit the video in small ways; clip off the end or beginning, add cue points, and parameters to use with ActionScript later. Click OK to exit back to the queue.
Click the Start Queue button. If you have several clips, do this just before you go to bed and let Flash do its thing while you’re getting some well-deserved sleep!
When it’s finished converting your file, you’ll find it in the same folder as the original video clip, with an extension of FLV.
Create a new Flash file using ActionScript 2.0.
Import the FLV file to your stage using File > Import > Import Video.
In the Select Video pane, select Load external video with playback component (the top button).
In the next pane, select the type of controller, or “skin” you want from the pop-up menu. You can create your own and then choose “custom” and type in the URL for Flash to find the SWF (http://www.adobe.com/devnet/flash/articles/flv_tutorial_pt2.html or see http://www.lynda.com/home/DisplayCourse.aspx?lpk2=182 if you have a subscription to lynda.com)
When it’s finished adding the FLV to the FLA, save your file.
NOTE: feel free to add graphic elements to this; it doesn’t have to be just a straight up video. Get creative and add a little more personality. Add layers above or below the FLV layer for these additional elements.
To put this on the web, you need to publish it, not just test the movie; File > Publish (shift F12).
When uploading this to a server, you will need to upload the HTML file, the SWF file, the FLV file you used, and the skin SWF (controls) you used, and they must all be in the same folder.
It will ask you where you want to save the file; navigate to the folder where your video clip and FLA are saved.
Once you click Save, the AME launches, and you’ll see a little message telling you to come back to this panel once you’ve encoded your video.
In the first panel of the AME, you’ll see a list of videos in the queue, waiting to be encoded. Since this might be the first time you’ve used it, the video clip you selected in step 4 will be the only one listed. You can add more clips here by clicking the “add” button, and remove clips you no longer need to encode. You can also duplicate clips already in the queue to encode them using different settings.
Along the top of the queue you’ll see some options for format, preset, output, and status. Click and hold on the Preset arrow and select FLV Same as Source.
Click Start Queue; you’ll be able to see your video in the small preview window at the bottom left.
Once the clip has been encoded, flip back to Flash (you can quit the AME) and click Browse again to locate the FLV file; it should be in the same folder as your FLA and the original video clip.
In the next pane of the Video Import Wizard you’ll be asked how you would like the video to be embedded; straight into the main timeline, or as a movie clip symbol. You can also choose to place the clip on the stage right away or not, and whether you want to include audio.
Make sure you select Movie Clip for Symbol type in this pane. You can choose to place an instance on the stage or not; it’s easy enough to add it later, or remove it if you need to.
You’ll note, once you click OK, that you have two items in your library; the original FLV file (it looks like a video camera) and the movie clip symbol you created during the import step.
Double click the movie clip symbol to enter editing mode. Whoah! Long timeline! That’s your entire video embedded into the movie clip.
Add a layer inside this movie clip and name it actions; place a stop action in the first frame. This will prevent your video from playing automatically. We’ll add interactivity using buttons.
Exit editing mode to get back to the main timeline
Drag an instance of your movie clip to the stage.
It may be wider than your stage size and if so, use Modify > Document, and then select “contents” for the Match option. Before clicking OK, decide where you want to add the buttons that will control this video and add additional pixels to that dimension (if you want them at the top or bottom, add to the height; if you want them at one side or another, adjust the width).
There are times when you should seriously consider breaking a large project into smaller pieces so that it loads faster, and offers more flexibility in how a site might be navigated—non-linear navigation is much more preferable than anything linear, especially on the web. If it’s an instructional presentation, however, sometimes you have to move forward in a sequential manner. In either case, the ability to load external files as needed will not only speed up a site, it can also offer more variety with very little effort.
Rather than importing a bunch of bitmaps into a project, it’s often smarter to have them load from an external source; this saves substantially on file size, and load time, and offers flexibility to the visitor. How-to is actually pretty easy.
If you want to load still images, start by optimizing the images you want to use—Photoshop is a good place for that, as is Fireworks. You won’t be able to edit these in Flash since they never actually appear in a FLA file, so make sure you have what you want. If you are working with vector graphics, obviously you can create and edit those in Illustrator. In either case, save, or export them as PNG orJPG files. Keep them all together in the same folder.
You can also load SWF files this way; create several smaller Flash projects (one per “scene” perhaps), save them all in the same folder, and generate the SWFs by testing or publishing the movie.
Create a new ActionScript 2 file in Flash and develop the button symbol(s) you need to load each image or SWF—you will need a button for each thing you want to load. You can place all the buttons on the same layer.
Press Command F8 to create a new movie clip symbol. Exit editing mode without doing anything—this symbol needs to be empty.
Add a new layer and drag an instance of the empty movie clip symbol to the stage, and while it’s still selected, give it an instance name of theClip_mc in the Properties panel. Position the hollow dot of that movie clip where you want the top left corner of the image or movie to appear.
Select one of the button instances and add this code:
on(release) {
theClip_mc.loadMovie(“nameofexternalfile.extension”);
}
NOTE: you must change what’s in quotes above to the name of the file you want to load, including its extension (pix1.jpg for instance). That name must be in quotes so Flash recognizes it as a string.
You can copy and paste this code on to all the other buttons and just change the name of the file you want to load in each case.
If the loaded file is showing more than you want people to see (anything off-stage in a SWF, for instance), add a new layer above theClip layer and make it a mask layer. Draw a rectangle (or any shape, really) to define the amount of image or movie that will show. Make sure theClip layer is indented underneath the mask layer, and that the buttons layer is above the mask layer so it doesn’t get hidden.
If the image is larger than you’d like, you can change the size with some additional code. Use this on the buttons, changing the percentage as needed (use the same number for both xscale and yscale so the image or movie is not distorted):
on (release) {
theClip_mc.loadMovie("nameofexternalfile.extension ",_root.theClip_mc);
_root. theClip_mc._xscale = 80;
_root. theClip_mc._yscale = 80;
}
Save this file before trying to test it as until Flash knows where to place the SWF, it has no way of knowing where the external files are located. It should go without saying that you should save it in the same folder as the external files.
If you want to load more than one image or movie at a time, create several instances of theClip movie clip symbol to the stage and give each one a unique instance name. If you want one button to load more than one file, add another line of code to the button code (above) like so:
on(release) {
theClip_mc.loadMovie(“nameofexternalfile.extension”);
theClip2_mc. loadMovie(“nameofexternalfile2.extension”);
}
If you’d like separate buttons to control the loading of each external file, create additional instances of the buttons and change the name of the movie clip instance name as well as the name of the external file when pasting the code on the new button instances.
Sound in Flash projects can take up a huge amount of file size. If there is any way you can load them from an external MP3, you should take advantage of that option. This is a particularly valuable trick in developing a jukebox that can play multiple songs.
Create/convert any sound files (watch out for copyright infringements!) to MP3 format and save them all in the same folder (the same principles for loading external images or SWFs apply here).
Create a new ActionScript 2 Flash file, and develop some sort of graphic interface to use to start and stop the sound. If you are feeling brave, create a volume control component as well.
Give the play button you create an instance name. You can call it anything you want, but keep it short and remember what you called it as you will need to refer to it later on in the ActionScript.
Give the stop button an instance name as well.
Add a new layer for the ActionScript and lock it so you don’t inadvertently place any content on it.
Select the first frame of this layer and add this code in the Actions pane:
mySound = new Sound();
playbtninstancename.onRelease = function() {
mySound.loadSound("nameofmp3.mp3",true);
};
stopbtninstancename.onRelease = function() {
mySound.stop();
};
NOTE: change the “btninstancename” above to the instance name you gave your play and stop buttons in the Properties panel. Also change the “nameofmp3.mp3” to the name of the music file you want to play. The quotes must surround the music file name, but not the instance name.
Add as many play button instances to the stage as you have songs to play. Make sure to give each one a unique instance name in the Properties panel. In this case, I would recommend naming all the play buttons in sequence; play1_btn, play2_btn, and so on. Copy and paste the code (above) enough times to apply one function to each button—all in the frame code on frame one of the actions layer.
Here is what you’ll have to change in each:
1. mySound = new Sound();
2. playbtninstancename.onRelease = function() {
3. mySound.loadSound("nameofmp3.mp3",true);
4. };
In line 1 create a new variable name (mySound2, for instance).
In line 2, change the button instance name.
In line 3, change the variable name, and change the name of the MP3 file (making sure the sound file is in the same folder as this FLA file, of course).
You don’t have to add additional stop buttons as the one you have suffices to stop anything that’s playing.
There is another way to load external images and movies (not so great for images, but perfect for other SWFs) called loadMovieNum. In this case you do not need a movie clip symbol to “hold” the external file; it loads directly on top of the “master” file like a sheet of acetate. That means that when you are creating these FLA files, the stage size needs to match the “master.” Using loadMovie places the SWF at the top left corner of the stage. Anything on the stage of the loaded SWF blocks out what’s underneath it; any area with no content is treated as transparent (and that includes stage color).
You can load multiple SWFs all at one using this technique, without worrying about additional empty movie clip symbols as each movie can load on a different level (if you want).
Open a new AS2 Flash file and create several button instances—one per external file you want to load.
Select each on and use this code, changing the name of the SWF in each case:
on(release) {
loadMovieNum(“swfname.swf”, 20);
}
For each button, change the name of the swfname.swf (keep the quotes!). If you want them to load sequentially, leave the level number (20, in this case) the same. If you’d like to load one on top of another, change the level number as well.
Using this technique does require pre-planning as you need to take into account the base layout of the “master” movie when developing the layout or the movies you will load. You don’t want content on a loaded movie covering any buttons, for instance, and you may not want some content in the “master” to show after the beginning of the project (in which case, it needs to be an external SWF instead of something in the “master”).
(Loading external text files + scrolling text to come)
When you save a Flash animation, it's given an extension of FLA. Every time you preview an animation, Flash generates a file with an extension of SWF. It's the SWF file that you use on a web page.
I've had the best success when both the FLA file and the SWF file are saved in the same folder for a web site. I also use File > Publish to establish the settings to use when exporting the SWF file.
Here's the process:
Open Publish Settings from the File menu.
You'll note that in the first pane, formats, there are several options. Since the main intent for most projects is to put them on a web page, the only types of files you must publish are the SWF file for placing in a Dreamweaver document, and the HTML file.
You will end up with three separate files in the project folder: the FLA (original), the SWF (the movie that gets placed in the HTML file), and an HTML file. The SWF file and the HTML file are the two files that must be uploaded to the site server. If you only upload the SWF, it will play, but it will also resize to fit the size of the viewer’s browser window, which can be rather unpleasant, especially if there are any bitmapped images in the project.
If you want to create a standalone movie that someone can play from a disk or CD, you'd want to also check (and name) a Windows exe file and a Mac projector.
In the Flash pane, you'll find options for how Flash will behave when the file is exported. So far, I've found that the defaults work very well. Make sure your ActionScript version is set correctly here (this is also where you would fix it if you accidently selected the wrong type of file when you created it), and that the Flash Player version is also correct
If you choose a version lower than 7, any effects and code new to Flash CS4 may not export properly since those previous versions didn't support them.
You can select Protect from Import if you don't want anyone to borrow your animation from the web and convert it back into a Flash file. I've actually seen a file that was downloaded from the web. There's only one layer, and each frame is a keyframe. There's not much you can do with that, however there is a complete library, so you might be able to recreate the movie from scratch.
If you Protect from Import or select Debugging Permitted you'll need to provide a password for the people you'd like to have access to the original file.
Finally, in the HTML pane, the defaults work well.
You may want to select 100% for dimensions, since that will resize the movie, depending on the viewer's monitor resolution.
At this point, you can click the Publish button and the appropriate files will be generated. Or, you can click OK and return to your movie. The settings you established are saved with the file, so you don't have to check this dialog box every time you want to export/publish your movie.
Remember, though, that to use the project online, you must to choose Publish" from the file menu.
Open the HTML file in Dreamweaver, give it a decent title, and add any other information (a copyright, perhaps? links to other pages?) to the file and save it. You can add other SWF files to this page, if you need to, code buttons and links, and so on.
If your entire page is just the Flash movie, you can upload the HTML and SWF files Flash generates directly to the server. Just make sure you give it the file name appropriate for its place in your site—if it's your first page, you must name the Flash file along with the SWF and the HTML files index.
QuickTime movies are also appropriate for either standalone use, or for putting on a web page. To generate a QuickTime version of your project, remove any and all buttons and ActionScript first. QuickTime won’t recognize the code, and it has its own set of navigation buttons.
Choose File > Export > Export Movie.
Navigate to where you want to save the file, name it, and then select QuickTime from the format popup menu. Even if this is what’s automatically selected, reselect it so the MOV extension is added to the file name. Click Save.
Leave the default options as they are in the QuickTime Export Settings dialog box that pops up and click Export.
You will have to place this file into and HTML page manually before uploading it to the web.
There are just dozens (probably hundreds) of web sites devoted to people who use Flash. Some of them are just terrific, and others are pretty awful (typos, bad grammar, etc.) youtube has a lot of video instructions for working in Flash, although I don’t recommend that as a primary source for your Flash education. Here is a list of links that I’ve collected over time and find valuable. If any of them are no longer functional, please let me know.
http://www.ni9e.com/typo/ (fantastic typographic animations)
http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7b5e.html (best practices)
http://www.adobe.com/accessibility/products/flash/best_practices.html (best practice for accessibility issues)
https://admin.adobe.acrobat.com/_a295153/p48069653/ (Chris Georgenes on animation, takes time to get started so be patient)
https://admin.adobe.acrobat.com/_a295153/p46515568/ (more Chris Georgenes on animation)
http://www.bezzmedia.com/swfspot/samples/flash8/Page_Flipper (how to make a page turn animation)
http://flashexplained.com/ (a nice set of how-to’s by Luca Maras)
http://flashexplained.com/preloaders/basic-internal-percentage-preloader/ (create a preloader)
http://www.webdesign.org/web/flash-&-swish/flash-tutorials/ (choose from a number of interesting tutorials)
http://www.flashdeveloper.nl/g_flash_sounds.html (free, or cheap, sound resources)
http://www.gotoandlearn.com/ (bunches of tutorials)
http://www.senocular.com/flash/tutorials/as3withflashcs3/ (explanation of how ActionScript 3 works)
http://livedocs.adobe.com/flash/9.0/UsingFlash/ (Flash CS3 instruction manual)
http://www.atomfilms.com/contentPlay/shockwave.jsp?id=animator_vs_animation&preplay=1 (fun frame by frame animation)
http://www2.hawaii.edu/~ricky/etec/whatis.html (how to create a decent storyboard!)
http://www.flashperfection.com/tutorials-list.html (bunches of tutorials)
http://www.ipowerweb.com/iboost/build/design/articles/10041.htm (planning a Flash project)
http://www.sitepoint.com/article/flash-interface-design (planning the look of a Flash project)
http://www.ipowerweb.com/iboost/build/design/articles/10044.htm (logo design hints)
http://www.flepstudio.org/forum/ (bunches of tutorials)
http://www.communitymx.com/content/article.cfm?cid=3CC82 (using sound in Flash projects)
http://designer-info.com/Web/flash_bitmaps.htm (working with bitmaps in Flash)
http://www.webwasp.co.uk/tutorials/drawing.php (bunches of tutorials about drawing in Flash)
http://library.creativecow.net/ (more tutorials, lots of variety)
http://www.animationmentor.com/index.cfm (online animation school)
http://www.partnersinrhyme.com/ (free sounds)
http://bryanheisey.com/blog/?p=1 (a Flash add-on that I’m not convinced is worth it, but it’s cool)
http://ihaveanidea.org/ (register to stay on top of what’s happening in design)
http://www.smashingmagazine.com/2008/03/13/showcase-of-creative-flash-preloaders/ (great preloader ideas)
http://monkeyflash.com/tutorials/flash-drag-and-drop/ (create a drag and drop game using AS3)
http://www.actionscript.org/resources/articles/26/1/Drag-n-Drop-and-Drop-Targets/Page1.html (drag and drop, AS2; this is also a good site in general)
http://www.kennybellew.com/tutorial/index.html (all about sound in Flash)
http://www.tutorialized.com/view/tutorial/Drawing-in-a-Flash-Movie/7251 (very cool interactive option)
http://www.heftyjoesblog.com/?p=109 (another version of drawing option above)
http://www.keyframer.com/ (one of Chris Gorgenes’ sites, lots of links)
http://www.developphp.com/Flash_tutorials/ (tutorials for more advanced interactive options)
http://flashden.net/ (lots of stuff here; if you register and pay, you can download stuff. Good in an emergency.)
http://www.eldrbarry.net/roos/eest.htm
http://www.republicofcode.com/tutorials/flash/hangman/ (create a hangman game)
http://tv.adobe.com/#vi+f1590v1010 (inverse kinematics, plus other great video tutorials)
http://www.heftyjoesblog.com/?p=109
http://anybrowser.com/ (browser compatibility tools)
http://www.gomediazine.com/tutorials/an-angel-grows-wings-animated-mask-in-flash/ (very cool masking and shape tween tutorial)
http://originalflash.com/tut_signature.html (nice frame by frame animated signature technique)
http://www.adobe.com/devnet/flash/articles/design_character_fl8.html (Chris Georgenes tips for drawing and animating a character)
I find that going through all the menu items in a program really educates me as to what the software can do. I use the Help option to find out about new features, or to learn about options I don’t usually use. And, I play with each option to get a sense of what it does. I’ve also discovered that I’m probably the only person (at least that I can find) who has taken the time to write a brief description of each menu item. I hope you find this approach as valuable as I do.
New Symbol / command F8: This opens a dialog box where you name the symbol and choose what type it is to be (movie clip, button, or graphic). You are then placed into symbol editing mode with a clear slate. Draw your symbol using the drawing tools, or paste something from Illustrator.
TIMELINE
If you have downloaded commands from the Macromedia site, you can access them here. You can also create your own commands to use over and over again.
Use the history panel to select the steps you want to save as a command (Window > Other Panels > History). Do what you want to something, whether it’s creating a series of shapes that you might use on a regular basis, to typing something needed in every Flash project you work on. When complete, select the steps you want to save from that process in the History panel. Click the Save Selected as Command icon at the bottom left of the History panel and give it a name. It will become immediately available in the Commands menu. Kinda cool!