Flash Assignment 9 – Working with Motion Tweens

9.1 Introduction to Motion Tweens:

9.1.1 Creating an Object-Based Motion Tween – As we discussed in Assignment 7, the Object-based tween is quite similar to the classic tween, excepting that it applied to graphic objects, that is, graphic symbols, movie clips, bitmaps or artwork created in object drawing mode.

The process of creating the Object-based motion tween is not fundamentally different than that used to create the classic shape tween, however the order is reversed.  Instead of defining the keyframes first, then joining them together with a tween, here we must create the tween span first by right-clicking the object and selecting Create Motion Tween from the context menu.  Flash then creates a span of some arbitrary length (perhaps customizable in the preferences) in the timeline.  We can adjust this tween span length to suit our needs, and then set about creating keyframes within the span to define the motion of our object.  In fact, we needn’t manually insert keyframes, and then manipulate the object’s position on the stage.  Rather, we simply move the playback head to a point in the span where we desire a keyframe, and then position the object accordingly.  Flash will automatically create a keyframe for us at the selected frame.

9.1.2 Altering the Path of a Motion Tween – When we create a motion tween, Flash generates a path for the object to follow from one keyframe to the next.  This path is generally just a straight line, and is visible on the stage as line with a series of dots (each dot representing the object’s position at each frame interval).  We can use the selection tool to modify the shape of this path in the same way that we can modify the shape of any line object.

9.1.3 Altering the Curve of a Motion Path – Expanding on the previous lesson, we see here that we can use the subselection tool and the various anchor-point tools to make more detailed adjustments to the object path. 

9.1.4 Using the Motion Editor – The motion editor is another means by which to view and edit the motion of an object throughout a tween span.  The motion editor appears in its own panel (Window=>Motion Editor), and offers a very granular level of control.  In the motion editor, we get a graphical representation of the Cartesian coordinates of the object over time, with a separate graph for each coordinate axis.

The Motion Editor Panel

We also have graphical representations for other properties, such as 3-axis rotation, deformation, and chromatic properties. 

We can add/edit points along any of these graphs, and even plug-in exact numbers if we really want to precisely control the animation to the Nth degree.  Very pocket-protector stuff.

9.1.5 Setting the Ease Property of an Animation – Ease is Flash’s term for change in the rate at which an object changes position with respect to time; acceleration is everybody else’s term for the same thing. 

Since the motion editor plots the object’s position with respect to time, we can change the acceleration of an object along its path by changing the slope of these plot curves.  However, rather than having to make those changes to multiple axial components separately, we can create a single acceleration curve (Ease curve), and then apply it to any or all of the of the motion editor plots. 

One can see in the image above that each of the plots has a drop-down box for selecting an Ease to apply, as well as the Ease definition area at the bottom of the Motion Edito panel.

9.1.6 Working with Motion Presets – We can apply pre-defined motions to objects by applying tweens from the Motion Preset library.  There are a number of baked-in motion presents in the default library, and we can save our own creations to the library as well.

The Motion Preset library panel can be accessed via the Window menu (Window=>Motion Presets).  Selecting any one of the presets gives us a preview of the motion in the preview area of the panel.  To apply one of the presets to an object, we simply select an object, then select the desired preset, and finally, click the Apply button in the Preset panel.

Of course, once the preset motion tween is applied, we can then go on to tweak it with the editing methods heretofore described.

9.2 Understanding Classic Tweens:

Classic tweens have been previously discussed in sections 7.3.1 and 8.1.

9.3 Understanding Object-Based Tweens:

9.3.1 Viewing an Object-Based Tween - In this section, we look at a Flash file with existing tweens therein, and discuss how to identify what type of tweens they are (Classic or Object-Based).  The easiest way to identify the type of tween is by referring to the symbols in the timeline, which were thoroughly discussed in Assignment 7.

9.3.2 Creating an Object-Based Tween – This has been covered in section 9.1.1 above.

9.4 Using Inverse Kinematics:

9.4.1 – Using the Bone Tool – We discussed the use of the Bone Tool way back in Assignment 2, but here we get a couple of new insights. 

First, we learn that there are two options for controlling the movement of an armature in a Flash file; these being either Runtime or Authortime.  Selecting the Runtime option allows the end-user to manipulate the armature at will with the cursor when the SWF file executes. When the Authortime option is selected, the developer defines the motion of the armature on the timeline, and the SWF file plays-out the pre-defined motion as a classic animation clip.

Note that when defining movement in Authortime, the animation is defined on the Armature layer, which is created by Flash when objects are connected with armatures.  Also, note that the keyframes in an armature animation are not called keyframes, but rather Poses.  One can add a pose-frame by selecting a frame on the Armature layer timeline, right-clicking and selecting Insert Pose from the context menu.  One then manipulates the armature as desired, and a motion tween is created, spanning the distance from the last keyframe/pose-frame to the current pose-frame.