How is shape tweening represented in the timeline

Go to the Color Panel, select Radial under the fill type highlighted , and add an new slider in the gradient control so we can create a more smooth and naturally looking gradient. Click on the orange circle; now you can control the size, direction, and center point of the gradient.

Now we are going to animate the ball and make it bounce up and down. Click on frame 30, right-click and select 'Insert Frame' to extend the frame for 30 frames. Next right-click anywhere in the long frame that was just created and select 'Create Motion Tween'. Note that when we create the motion tween the long frame turns blue and the rectangle at the end disappears.

The layer also now has a Tween icon next to its name. Now we need to add some movement to the tween by placing the ball at different places along the timeline.

In a Motion Tween you move the small red rectangle at the top of the timeline, the shuttle, to the location where you want to change tween properties. Let's move the shuttle to frame Next hold down the Shift key and click and drag the ball to the bottom of the visible stage holding the shift key ensures that we will drag the ball in a straight line.

Next move the shuttle to frame 30 and shift-drag the ball back to the top of the screen. Notice the green motion path created where the ball will travel. The animation works, however, it lacks a realistic feeling since it moves up and down constantly at the same speed; what we want to do now is to add some real-life ingredients; when a ball hits the ground in real life, it will squeeze and squash.

This adds a small black dot to the frame and saves the scale of the symbol at that frame. Do the same thing for frame Finally, move the shuttle to frame 15 again, select the Free Transform Tool from the toolbar and squeeze the ball a bit at the top and stretch the ball a bit at the sides.

Simple easing can be done by clicking on the tween and adjusting the Ease in the property tab. If we had seperated this into two tweens, we could have set one to ease in and one to ease out. However, we want one tween to both ease in and ease out. Select the Motion Editor tab next to the Timeline tab. Make sure that the scale indicates 30 the red box in the lower left below. Click where is says '2-Custom' to expand the graph.

Click the left control point, grab the handlebar and move it along the x-axis. Then click the right control point, grab its handlebar and move it so it is along the x-axis like below. Finally, scroll up in the Motion Editor to where it says 'Basic Motion' and in the drop-down select '2-Custom' to indicate that we want our custom ease applied to the motion.

Nesting means to place all the compositional element in one of your animation sequence into a single symbol; It is an incredibly powerful technique for animators. Let me show you how it works in this tutorial; first, let us select all the frames on the timeline of your bouncing ball animation;.

Create a new symbol named bouncingGR you can use anything you want , select Graphic as its type and click OK;. Double click on the new symbol in the Library, right-click on the timeline if there is no frame on timeline, simply press F6 to insert a frame and select Paste Frames;. Now we can delete everything on the scene1's timeline since the animation has been pasted into a symbol; then let us drag the symbol bouncingGR to the stage; On frame 1, move the symbol all the way to the left of the canvas; next, click on frame 90, press F6 then move the symbol all the way from the left to the right of the stage; finally, let us create a motion tween between this two frames, then you will see the bouncing ball is now bouncing across the screen.

In Flash CS3, not only that we can copy frames, we can also copy motions. Sometimes it's obvious which type of tween is more appropriate. If something's just moving or changing color, a motion tween is appropriate, whereas significant changes to a shape require the shape tween. Sometimes, however, it's not so obvious.

For example, you can drastically change a symbol's shape by using the Free Transform tool's Rotate, Scale, and especially Skew options. Plus, tweening the properties of a Filter using Motion Tween can have a huge impact. Each original clip left appears in a much different form on the right the last flower uses the Glow filter. All these examples are "Motion tweenable. Although you should definitely lean toward motion tweening when you can, don't forget the keyframe techniques you learned in Hour 7, "Animation the Old-Fashioned Way.

You'll learn even more ways to trick the user in Hour 22, "Advanced Animation Techniques. Previous page. Table of content. Next page. Following the Rules of a Shape Tween Flash is unforgiving when you don't follow its rules. Techniques and Tips Just because the rules for a shape tween are simple doesn't mean that creating a good-looking shape tween is easy. Keep It Simple If you ignore all other tips, keeping it simple is one you really should heed.

Don't Mix Lines and Fills It's best to avoid tweening between shapes that don't have the same combination of fills and lines because the results are unpredictable. Stay Out of Flash's Territory When Flash is tweening a span of frames, it colors the tweened frames in the Timeline either blue for motion tweening or green for shape tweening. Authors: Phillip Kerman. Lotus Notes and Domino 6 Development 2nd Edition. Macromedia Flash8 Bible. Foundation ActionScript for Flash 8.

Absolute Beginner[ap]s Guide to Project Management. Software Configuration Management. Adobe After Effects 7. Understanding Digital Signal Processing 2nd Edition. If you may any questions please contact us: flylib qtcs. Legal Notices Online Privacy Policy. Shape tweening Search. Adobe Animate User Guide. Select an article: Select an article:. On this page Creating a shape tween Creating ease presets or custom eases Controlling shape changes with shape hints Adding shape tween to strokes with variable width.

Applies to: Adobe Animate. You can also tween the position and color of shapes within a shape tween. Creating a shape tween. In frame 1, draw a square with the Rectangle tool. On the stage, draw a circle with the oval tool in frame Now, you have a keyframe in frame 1 with a square and a keyframe in frame 30 with a circle.

Animate interpolates the shapes in all the frames between the two keyframes. Preview the animation by pressing the Enter key. To tween the color of the shape, make the shape in frame 1 a different color from the shape in frame Creating ease presets or custom eases. Ease presets are pre-configured eases that can be applied to an object on the stage. Click the layer that contains a shape tween in the timeline of Animate. Tweening properties. Types of easing presets. Click the edit icon next to Ease to apply a custom ease.

Custom Ease graph showing constant velocity. Open this dialog by selecting a frame in a shape tween and clicking the Edit button in the Ease section of the Property inspector. Customized easing preset. Apply easing preset for multiple spans. Controlling shape changes with shape hints. Shape hints as letters. For best results when tweening shapes, follow these guidelines:.

Use shape hints. Select the first keyframe in a shape-tweened sequence. To begin the motion tween rapidly and decelerate the tween toward the end of the animation, drag the slider down or enter a positive value between 1 and By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change. To rotate the selected item while tweening, select an option from the Rotate menu: Select None the default setting to prevent rotation.

Select Auto to rotate the object once in the direction requiring the least motion. Select Clockwise CW or Counterclockwise CCW to rotate the object as indicated, and then enter a number to specify the number of rotations. NOTE : The rotation in step 8 is in addition to any rotation you applied to the ending frame in step 4. If you're using a motion path, select Orient to Path to orient the baseline of the tweened element to the motion path. Select the Sync option in the Property inspector to synchronize the animation of graphic symbol instances with the main Timeline.

If you're using a motion path, select Snap to attach the tweened element to the motion path by its registration point. To create a motion tween using the Create Motion Tween command:. Select an empty keyframe and draw an object on the Stage, or drag an instance of a symbol from the Library panel. NOTE : To create a tween, you must have only one item on the layer. If you drew an object in step 1, Flash automatically converts the object to a symbol and assigns it the name tween1.

Move the object, instance, or text block on the Stage to the desired position. Adjust the size of the element if you want to tween its scale. Adjust the rotation of the element if you want to tween its rotation. Deselect the object when you have completed adjustments. A keyframe is automatically added to the end of the frame range. Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames: To begin the motion tween slowly and accelerate the tween toward the end of the animation, drag the slider up or enter a value between -1 and To rotate the selected item while tweening, select an option from the Rotate menu: Select Auto to rotate the object once in the direction requiring the least motion.

NOTE : The rotation in step 6 is in addition to any rotation you applied to the ending frame in step 4. Select Synchronize to ensure that the instance loops properly in the main document.

Use the Synchronize command if the number of frames in the animation sequence inside the symbol is not an even multiple of the number of frames the graphic instance occupies in the document. Tweening motion along a path TOP Motion guide layers let you draw paths along which tweened instances, groups, or text blocks can be animated.

You can link multiple layers to a motion guide layer to have multiple objects follow the same path. A normal layer that is linked to a motion guide layer becomes a guided layer. In this example, two objects on separate layers are attached to the same motion path.

To create a motion path for a tweened animation:. Create a motion-tweened animation sequence as described in Tweening instances, groups, and type. If you select Orient to Path, the baseline of the tweened element orients to the motion path. If you select Snap, the registration point of the tweened element snaps to the motion path.

Right-click Windows or Control-click Macintosh the layer containing the animation and select Add Motion Guide from the context menu.

Flash creates a new layer above the selected layer with a motion guide icon to the left of the layer name. Snap the center to the beginning of the line in the first frame, and to the end of the line in the last frame. NOTE : For best snapping results, drag the symbol by its registration point. To hide the motion guide layer and the line so that only the object's movement is visible while you work, click in the Eye column on the motion guide layer.

The group or symbol follows the motion path when you play the animation. To link layers to a motion guide layer, do one of the following:. Drag an existing layer below the motion guide layer.

The layer is indented under the motion guide layer. All objects on this layer automatically snap to the motion path. Create a new layer under the motion guide layer. Objects you tween on this layer are automatically tweened along the motion path. Select a layer below a motion guide layer. To unlink layers from a motion guide layer:. Select the layer you want to unlink. Do one of the following: Drag the layer above the motion guide layer. Frames are represented by the horizontal axis, and the percentage of change is represented by the vertical axis.

The rate of change of the object is represented by the slope of the graph's curve. When the curve is horizontal no slope , the velocity is zero; when the curve is vertical, there is an instantaneous rate of change. The dialog box provides the following additional controls:.

Use One Setting for All Properties check box The default value for this is selected, which means that the displayed curve is used for all properties, and the Properties pop-up menu is disabled.

When the check box is not selected, the Properties pop-up menu is enabled, and each property has a separate curve defining the velocity of that property. When enabled, a separate curve is maintained for each of the five properties appearing in the menu. Selecting a property in the menu displays the curve for that property. The properties are:.

Position Specifies custom ease settings for the position of an animated object on the Stage. Rotation Specifies custom ease settings for the rotation of an animated object. For example, you can fine-tune how quickly or slowly an animated character turns around to face the user on the Stage. Scale Specifies custom ease settings for the scale of an animated object.

For example, you can more easily customize the scale of an object so it appears to be moving away from the viewer, then coming closer, and then moving away again. Color Specifies custom ease settings for color transitions applied to an animated object. Filters Specifies custom ease settings for filters applied to an animated object.

For example, you can control the ease setting of a drop shadow that simulates a change in the direction of a light source. Reset button This button lets you reset the velocity curve to the default, linear state.

Position of the selected control point In the lower-right corner of the dialog box, a numeric value displays the keyframe and position of the selected control point. If no control point is selected, no value appears. To add a control point to the line, click the diagonal line once. This adds a new control point to the line. By dragging the positions of the control points, you can achieve a precise degree of control over the motion of an object.

Using frame indicators represented by square handles , you click where you want an object to slow down or speed up. Clicking the handle of a control point the square handles selects that control point, and displays the tangent points on either side of it. Tangent points are represented by hollow circles. You can drag the control point or its tangent points with the mouse or you can position them using the keyboard's arrow keys.

TIP : By default, the control points snap to a grid. You can turn off snapping by pressing the X key while dragging the control point. Clicking an area of the curve away from any control points adds a new control point to the curve at that point, without changing the shape of the curve. Clicking away from the curve and control points deselects the control point that is currently selected. If you apply an ease value to a frame with the Edit text box or the pop-up slider, the Custom Ease graph is set to the equivalent curve, and the Use One Setting for All Properties check box is selected.

Unsupported easing curves TOP Certain types of easing curves are not supported:. No part of the graph can represent a nonlinear curve such as a circle. The Custom Ease dialog box automatically prevents moving a control point or a tangent handle to a position that would render an invalid curve. All points must exist on the graph. Control points cannot be moved beyond the bounds of the graph. All segments of the curve must exist within the graph. The shape of the curve will be flattened to prevent it from extending beyond the bounds of the graph.

Select a layer in the Timeline that has a motion tween applied to it. Click the Edit button next to the Ease slider in the frame Property inspector. Optional Deselect the Use One Setting for All Properties check box, and select a property in the menu to display the curve for that property.

For more information about the properties you can specify. Drag the control point up to increase the speed of the object, or drag it downwards to slow down the speed of the object. Drag the vertex handles to further adjust the ease curve, and fine tune the ease value of the tween. Adjust the controls until you achieve the effect you want. To copy and paste an ease curve:. The copied curve remains available until you exit the Flash application.

Tweening shapes TOP By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, color, and opacity of shapes. Tweening one shape at a time usually yields the best results. If you tween multiple shapes at one time, all the shapes must be on the same layer.

To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart. To control more complex or improbable shape changes, you use shape hints, which control how parts of the original shape move into the new shape. Click a layer name to make it the active layer, and create or select a keyframe where you want the animation to start.

Create or place the artwork for the first frame of the sequence. For best results, the frame should contain only one item a graphic object or broken-apart group, bitmap, instance, or text block.

Select the keyframe in the Timeline. In the Property inspector, select Shape from the Tween pop-up menu. Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames: To begin the shape tween gradually and accelerate the tween toward the end of the animation, drag the slider down or enter a negative value between -1 and To begin the shape tween rapidly and decelerate the tween toward the end of the animation, drag the slider up or enter a positive value between 1 and Easing creates a more natural appearance of transformation by gradually adjusting the rate of change.

Select an option for Blend:. Distributive creates an animation in which the intermediate shapes are smoother and more irregular. Angular creates an animation that preserves apparent corners and straight lines in the intermediate shapes. NOTE : Angular is appropriate only for blending shapes with sharp corners and straight lines. If the shapes you select do not have corners, Flash reverts to distributive shape tweening. Create a second keyframe the desired number of frames after the first keyframe.

With the second keyframe selected, select the artwork you placed in the first keyframe and do one of the following: Modify the shape, color, opacity, or position of the artwork. Delete the artwork and place new artwork in the second keyframe. Using shape hints TOP To control more complex or improbable shape changes, you can use shape hints.

Shape hints identify points that should correspond in starting and ending shapes. For example, if you are tweening a drawing of a face as it changes expression, you can use a shape hint to mark each eye.

Then, instead of the face becoming an amorphous tangle while the shape change takes place, each eye remains recognizable and changes separately during the shift. Shape hints contain letters a through z for identifying which points correspond in the starting and ending shape.

You can use up to 26 shape hints. Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when not on a curve. For best results when tweening shapes, follow these guidelines:. In complex shape tweening, create intermediate shapes and tween them instead of just defining a starting and ending shape. Make sure that shape hints are logical. For example, if you're using three shape hints for a triangle, they must be in the same order on the original triangle and on the triangle to be tweened.

The order cannot be abc in the first keyframe and acb in the second. Shape hints work best if you place them in counterclockwise order beginning at the top left corner of the shape.

To use shape hints:. Select the first keyframe in a shape-tweened sequence. The beginning shape hint appears as a red circle with the letter a somewhere on the shape. Move the shape hint to a point that you want to mark. Select the last keyframe in the tweening sequence.

The ending shape hint appears somewhere on the shape as a green circle with the letter a.