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 Flash CS4, which was introduced in 2008-2009, 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 tween an instance of a symbol, you will often place an instance of a symbol in one frame, insert a keyframe in another frame to copy over that instance to that 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>Create 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 or other 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.
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 Properties panel, click on the Ease value and set it - negative values ease in (animation begins slowly and then speeds up) and positive values ease out (begins 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 graph is accessible through clicking the pencil icon to the left of the Ease value; with it you can have parts of the tween go backwards and then forward again.
Animate 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.
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 file than a classic tween.
1).Place your cursor in the frame where you want the tween to end and hit F5.
2) Place an instance of a symbol in a blank keyframe in the frame in which you want the tween to begin (Animate automatically puts a blank keyframe in frame 1).
3) Right click the symbol instance from step 1 and choose Create Motion Tween
4) Move the playhead to the end of the tween span.
5) Select the instance at the end of the tween span and position it where you want it.
If you do not select the end of your desired tween (step 1), the tween will be of a default length (one second duration).
To set the tween target position for the bottom of a 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.
Click 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 line need not be the same along all portions of the line.
Other motion tween effects
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 (make sure than Object is selected in the Properties Panel, as opposed to Frame) and then using the Color dropdown menu in the Properties Panel 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, place instances of the symbol in the desired frames, and then use a Classic Tween. If one attempts to apply a motion tween to a bitmap, Animate forces the conversion to a symbol but gives 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.
In other contexts, e.g. Halloween, Covid, - a mask hides things - only the areas outside the mask are visible. In Animate, 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 repeat the process (Modify>Timeline>Layer Properties) but this time choose "Masked". This alternative will be grayed 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 shape tween in the mask layer to animate the mask -- e.g. to make the mask get bigger or smaller.
Revised: March 22, 2023. Comments to William Pegram, bill@billpegram.com