To animate grouped objects, a bitmap, or symbol, you cannot use a shape tween; instead one can use a "classic tween" or a "motion tween". Prior to CS4, there were only two types of tweens: Shape and Motion. Beginning with CS4, a third type was added and what was previously called Motion now became Classic, and the new tween type was called Motion.
For example, to animate an instance of a symbol, you will generally place an instance of a symbol in one frame, insert a keyframe to copy over that instance to another frame, and then change either the first instance or the second instance in some way. As with creating a shape tween, you then click in the timeline anywhere between the frame containing the first instance and the frame containing the second instance, and then choose Insert>Classic Tween or right click in the Timeline and choose "Create Classic Tween".
Tweens transform what is in the initial frame of the tween into what is in the final frame of the tween. If this involves a change in position, the default tween behavior is to move in a straight line between the initial and final frames of the tween and the change in position per frame is constant. Each of these can be changed in classic tweens:
Motion Guide - Do a classic tween as above. Right click on the layer name of the layer containing the tween and select "Add Classic Motion Guide" (you do not right-click between the first and last frames of the tween as you did to select the tween type; you right click on the layer name). As a precaution, you may want to lock the layer involving the tween. In the guide layer, use the Pen, Pencil, Line, or Brush tool to draw the desired path in this new layer to draw a path in the initial frame of the tween. Unlock the layer involving the tween and use the selection tool to click on the symbol instance in the first frame of the tween - drag the instance until the registration point of the symbol instance snaps onto the line. Repeat the process using the last frame of the tween. If you test the tween, the tween should now follow the path drawn by the pencil tool rather than the straight line between the beginning and ending points of the tween. The key to getting this to work is to get the symbol instance to "snap" to the path drawn by the tool. (https://www.student.nvcc.edu/store/atomic/ and then click Atomic Learning Motion Guide video tutorial (Video B1)
Rate of tween - the rate at which the tween occurs between the two keyframes need not be constant.
Click on the tween layer between the beginning and ending points of the tween, in the Property Inspector click on the Ease value and set it - negative values ease in (animation begins slowly and then speeds up) and positive values ease out (begin quickly and then slows down). The maximum setting is +-100; you may not see much difference with absolute values under say 50. The Custom Ease In/Ease Out graph is accessible through clicking the icon to the right of the Ease value. If you want to set the ease in/ease out separately for various properties, you can deselect the "Use one setting for all properties" box and the top and then select a property in the menu.
Flash has some default motion tweens that you can use. First create a symbol, then with an instance of this symbol selected on the stage, select Window>Motion Presets>Default Presets. When you click on a preset, a preview of the preset will appear. To apply this preset to the instance of the symbol on the stage, you simply click apply. If you modify the preset, you can save it by clicking the icon at the lower left in the Motion Presets Panel. This will save it under Custom Presets and then you can apply this preset to another symbol. (see Atomic Learing Motion Presents video tutorial (Video B4).
Motion tweens can do many of the things that classic tweens can. Although not as full-featured, they are somewhat easier to create and result in a smaller .swf file than a classic tween.
Select the frame that marks the end of your desired tween and choose Insert>Timeline>Frame or simply press F5. Place an instance of the symbol in a blank keyframe in the frame in which you want the tween to begin (Flash automatically puts a blank keyframe in frame 1) Click anywhere in the Timeline between this initial frame and the ending frame of the tween (inclusive) to select the instance of the symbol on the Stage or click on the instance of the symbol on the stage. Choose Insert>Motion Tween or right click in the timeline and choose Create Motion Tween. A motion tween icon will be added in front of the layer name and the frames of the span will be light blue. Click on the last frame of the tween and drag the instance of the symbol to the new position. You should see a green line (a blue line in Flash CC).
If you do not select the end of your desired tween, the tween will be of a default length. If the target symbol is in frame 1 and there are no other frames, the default span length will be the number of frames for a one second tween. To do this, place an instance of a symbol in a keyframe and then select the instance and right-click and choose Create Motion Tween.
To set the tween target position for the bottom of the bounce, click in the Timeline for a frame halfway through the span and drag the ball to the desired position. A diamond will be inserted in this frame, indicating a property keyframe, in this case a position keyframe. The Timeline can display diamonds for six properties - Position, Scale, Skew, Rotation, Color, and Filter.
To transform a straight line motion into an arc
Move your cursor near the path until the cursor changes shape to a curved arc. You can then drag the path
To add control points to a motion path.
Clilck the frame in the Timeline into which you want to insert the position keyframe and then right click and choose Insert Keyframe>Position. A diamond icon appears in the Timeline and a new control point appears in the motion path on the Stage. The addition of the new control point means that the curvature of the green line need not be the same along all portions of the green line.
Other motion tween effects
The quality settings for jpgs in a Flash file can be set globally by selecting File>Publish Settings. These global settings can be overridden by settings chosen for an individual bitmap. To set the latter, choose File>Import>Import to Library and select the bitmap file. Once the bitmap is brought into the Library, one selects the bitmap and then clicks on the Properties button (third button from the left at the bottom of the Library panel. One can also open the properties screen by double clicking the icon next to the image name in the lower half of the Library or by double clicking the thumbnail picture in the upper half of the Library.
Just like in other graphics programs when one is setting quality settings, one can put the cursor in the Preview window and it will change to a hand. By holding down the mouse button and dragging, one can view different areas of the picture under the proposed quality setting. This technique allows one to evaluate the effect of a proposed quality setting on the aspects of the picture about which one cares the most. Clicking the Test button updates the image shown in the Preview window and the compression information shown at the bottom of the Preview window.
Although one can animate a bitmap directly using a classic tween, such an animation can only achieve certain changes - e.g. change in position, rotation, size, etc. If one first converts the bitmap to a symbol and then animates the instances of the symbol, the tween can effect other changes, in particular, changes in alpha transparency (e.g. fade in or fade out). This is done by selecting the instance of the symbol and then using the Color dropdown menu in the Property Inspector and choosing Alpha. (Note: If the color dropdown menu does not appear, use the select tool to click away on a blank area of the Stage and then select the instance of the the symbol instead.
If one attempts to animate a bitmap or text directly using a Classic Tween, two symbols are created (with names like Tween1 and Tween2; if one does this for additional bitmaps, the names will be Tween3 and Tween 4, etc.) As you can imagine, this process produces two poorly named symbols where one should have one well-named symbol. Instead it is better to convert the bitmap to a symbol, places instances of the symbol in the desired frames, and then use a Classic Tween. If one attempt to apply a motion tween to a bitmap, Flash forces the conversion to a symbol but give it a default type and name -- better to do the conversion first so that the type of symbol and name can be chosen.
For bitmaps, fade in and fade outs will often be more useful than having the bitmap change position, rotation, size, etc. You may want to have fade-ins and fade-outs of several images; remember that multiple tweens that occur at the same time (frame), must be in different layers. Sample photos to use
The mask layer is a special layer that defines what is visible on the layer beneath it. Only the portions of the masked layer that are beneath shapes in the mask layer will be visible. For example, import a bitmap to the Stage as above. Create a new layer and draw a shape on it. All that remains is to set the properties of the two layers. To do this, select the layer you just added and then choose Modify>Timeline>Layer Properties>Mask or by double clicking the icon next to the layer name. Then select the original layer and selected "Masked"; this alternative wi will be greyed out until one gives the other layer the "Mask" property. The masking will be evident if one choose Control>Test Movie. To make the masking show up on the Stage in design view, lock both layers.
One can do a tween in the mask layer to animate the mask -- e.g. to make the mask get bigger or smaller. (Atomic Learning Animating Masks Video - video B2)
Revised: November 30, 2015. Comments to William Pegram, bill@billpegram.com