New motion and Tween instances: Flash CS4 presentation (FlashCamp)

Last Updated on February 26, 2019

Yesterday at FlashCamp, I gave a presentation on using the new motion model in Flash CS4. The files are linked on this post. This is a general synopsis of what I covered, and I’ll detail how I did a few things in the presentation. Please comment with any questions you have.

More after the jump.

Tweening basics
So I started off with the basics of creating a motion tween. I’m sure you’ve seen this covered by now, just right-click an instance and choose Create Motion Tween and then drag the movie clip across the Stage. For actual steps and more details on general tweening, you can read this post.

Motion paths
I showed how you can edit a motion path on the Stage, and it’s depicted by a line with dots on it. You select the path, and then you can use the Free Transform tool to modify the path, such as scaling, rotating, or skewing it. You can also modify the path by selecting it with the Subselection tool, and using the bezier handles to modify its shape. Or, you can move the instance on the Stage with the path deselected and it updates the motion path to accommodate the changed placement of the instance. You can also select the path and just move it around the Stage wherever you want, making adjusting the placement of a tween extremely easy.

Then I covered how you can modify the instance itself to change how it animates across the motion tween span. So, I added alpha to the tween by selecting the instance, and adding an alpha color effect in the Property inspector. I moved the playhead in the span to where I wanted the alpha to change, and changed the value of alpha in the Property inspector to 50% (or whatever). A property keyframe was added to the tween at that location, and the motion tween updated to tween alpha as well.

Motion paths are also cool in this release becuase you can take a line you’ve drawn with the Pen or Pencil, and just paste it onto a tween span and use it as the motion path for that tween. So I:

1: Created a new layer (or you could insert a blank keyframe after the tween span, and draw there.)
2: Drew a line with the pencil.
3: Copy the line, and then click the tweened object and clicked paste.

The line I drew was then the motion path for the tween —

Transforming the instance
I believe I also showed how you can do the same thing with Scale. So I moved the playhead to where I wanted to change the scale, and the tween automatically updates again and adds a property keyframe for the scale part. Each property is tweened individually from each other, so if you want the alpha (or scale, or rotation, or…) to tween from beginning to end it isn’t affected by the keyframes of other properties along the tween span. This is a new way of thinking from the earlier tween model, where each keyframe along a “tween” is a separate object instance. So if you have motion tweens from frame 1 through 50, with keyframes on frames 10, 20, 30, 40 and you want to tween alpha between frames 1 and 50, then things are complicated because you have to update the keyframes.

I also added 3D to the instance, and made it a 3D tween. All I did was select one of the 3D tools and add some 3D rotation.

No broken tweens
Something I forgot to show was how you can delete the target of the tween, but not lose the tween. So say you accidentally (or intentionally) remove the target object from the tween (the instance being tweened is the target object), the tween span updates so there is a blank keyframe at the first frame of the span. All of the properties of the tween remain in that tween span (the motion path, all of the tweened properties such as alpha and 3D rotation), so all I need to do is select the span and drag an instance from the Library back onto the tween or paste something on the Stage and that instance is automatically tweened with all the properties I had before.

The Timeline
I also showed a few things in the Timeline. Moving spans around is much easier becuase you simply click the tween span, and drag it around on the same layer or other layers. You can also stretch the tween span by dragging either end of it to make the span longer or shorter (so your animation speeds up or is shorter.) Something I didn’t mention, but you can also do, is hold the Shift key and then drag the end of the tween span to add frames to the span but keep the current animation over the same number of frames.

You can right-click a tween span and there are a ton of things you can do from the context menu, such as copy and paste, saving as a preset, reversing keyframes and so on. One of the useful things in this menu is Copy Properties / Paste Properties or Paste Properties Special. So you ctrl+click a single propert keyframe and then access the context menu, select Copy Properties. All of the properties at that location are copied. Then click the frame where you want those properties to be applied. You can paste all of them by choosing Paste Properties, or you can choose Paste Properties Special and choose a particular category of properties to paste – such as Color Effects. Earlier I had applied an alpha tween to the motion tween – so I can just paste the property settings of that alpha effect to the newly selected keyframe.

That feature is really useful if you want to say, fade in from frames 1 through 15 and then hold that setting for a bunch of frames. So you could copy the property at frame 15, and then paste that same property setting at frame 20. Then the animation holds between those two frames.

You can also select individual property keyframes on a tween span and drag them around to reposition all of the properties from one frame to another one. Ctrl+click an individual frame in a tween span, and then drag it to a new location on the tween span.

Motion Editor (at 1024×768 resolution!!)

You’ve probably seen the motion editor in a lot of the Flash CS4 literature out there. I showed it again, explaining how you can use the controls in it, such as adjusting the height of the rows and expanded rows, and change the number of frames you can see in the graphs to “zoom in” on what you work on.

There were a bunch of graphs already in there, so I demonstrated things like how you can manipulate keyframes in the graph, add them (click the diamond button to add a keyframe, or click the yellow diamond to remove it), change a point so it has handles (right-click a corner point and choose Smooth point, or Alt click the keyframe), and use hot text to change the value of a keyframe. You can also drag curves to change their shape, or Alt+drag a curve selection to move the whole thing up or down on a graph without changing its shape.

I showed there are a list of preset eases and the ability to add a custom ease at the bottom of the motion editor, and how you add one there, and can then apply it to properties using a menu. So this is what you do:

1: Scroll to the bottom of the Motion Editor, to the Eases section.
2: Click the Add menu and select an ease preset (or custom ease if you want to edit the graph yourself – if you want to ease in and ease out across the same motion tween, for example, this would be how).
3: A new row is added for the ease you selected – assuming its a preset, use the hot text to change the setting of the ease. The graph to the right is not editable, but it shows you what the ease looks like.
4. Scroll up to the properties you want to apply them to, and then choose the name of the ease from the menu under the Ease column. I added Spring ease, and applied it to the Basic Motion category (which means it was applied to the X/Y position tween, or my motion path on the Stage). After its applied, you’ll see a dashed line in the graph which represents the actual on-stage value of the ease… essentially, how the ease affects the curve you have in the graph.

Motion Presets
So by now there was quite a bit of animation going on with a bunch of settings. If was something awesome (it wasn’t, but say it was) you might want to use it in other documents, or several times over in the document you’re working on. Either way, Motion Presets are useful. You right-click the tween span (or the animation on the stage) and choose Save As Motion Preset. You type in a name, and the properties of the tween are saved in the Motion Preset panel.

I opened a new document, and selected the static plain movie clip on the Stage, selected the preset I just created, and then clicked Apply. The animation I created was applied to the instance in the other document. Then I showed the presets that ship with Flash, and applied one of those (Pulse).

Note: I didn’t show it, but you could press Shift before clicking Apply, and the present location becomes the end of the tween, instead of the beginning.

The thing to remember about motion presets is that they save the properties (and transform point) of a tween, but not the symbol of the tween. That’s why I click an instance and just apply the preset to it. So if you have actionscript or something nested in your animation, it’s not going to save that bit. Just the properties of the tween span.

Copy Motion as ActionScript 3.0
So now I had that instance with the Pulse preset applied to it, and I wanted to get rid of the tween spans in my FLA. You can copy the tween span as ActionScript 3.0 (right-click the tween span and choose Copy Motion as ActionScript 3.0 and the code goes to the clipboard so you can paste it in a script editor somewhere). Then assign that to other instances in any FLA (or elsewhere, I suppose). This works almost the same was as in Flash CS3, however there are a couple differences. First of all, the code is different (no longer XML, it’s an array of values). Secondly, you no longer get a dialog that pops up asking for an instance name. You need to uncomment the final line of code that you paste and enter an instance name yourself (it gives you a hint -something like “put instance name here”). This is pretty straight forward.

Tween instances.
I showed people how to use a tween instance to apply a motion tween to other instances in an FLA file. This is another new feature found in Flash CS4. Essentially you can give a tween an instance name much like you give a movie clip an instance name so you can refer to it in code. This means you can give a target (whatever other movie clip) all the properties of a tween by applying its

In the sample files you can find the file simple-tween-instance.fla. One of the instances is a motion tween, click its motion path (or the tween span in the timeline) and look in the Motion Property inspector – there is a new text box at the top where you can enter an instance name. That’s the tween’s instance name. I’ve given the the tween the instance name theTween.

There is a second instance in this file, which is a static (non-tweened) movie clip that has the instance name staticMonkey. If you play the tween before adding this line or with it commented out, you verify that indeed one monkey moves, the other one doesn’t.

Now add this line, or uncomment it.

theTween.addTarget(staticMonkey);

This applies the tween from the first monkey to the second one and both animate.

So that’s the most basic case, I then showed people a more complicated case where it can be useful for adding a ton of animation in a document from one single tweened instance. You can see this if you open snow-tween-instance-start.fla.

In this file, the tween instance is inside the myClip instance placed in the upper right hand corner of the Stage. Inside that movie clip is a tweened instance that has a long motion path, with the instance name theTween. Therefore, I target it using myClip.theTween.addTarget(target);

The following code creates a bunch of instances and randomizes the position of them, and attaches the tween to each. There are comments in the code that describes how it works. And yes, the code used to be for rain, hence the naming I have yet to update :)

// Number of symbols to add.
const NUM_SYMBOLS:uint = 75;

var symbolsArray:Array = [];
var idx:uint;
var drop:Rain;

/**
 *   Loop from 0 to NUM_SYMBOLS-1. For each loop iteration, do the following:
 *       1) Add symbols from library.
 *       2) Add them to display list.
 *       3) Push symbol onto the symbolsArray array.
 *       4) Call the randomInterval() method somewhere between 0ms and 10000ms
 *          and pass the instance of the current rain drop.
 */
 
for (idx = 0; idx < NUM_SYMBOLS; idx++) {
    drop = new Rain();
    addChild(drop);
    symbolsArray.push(drop);
    // Call randomInterval() after 0 to a given ms.
    setTimeout(randomInterval, int(Math.random() * 10000), drop);
}

function randomInterval(target:Rain):void {
    
    // Set the current Rain instance's x and y property 
    target.x = Math.random()* 550-50;
    target.y = -Math.random() * 200;
    
    //randomly scale the x and y
    var ranScale:Number = Math.random() * 3;
    target.scaleX = ranScale;
    target.scaleY = ranScale;
    
    //assign tween nested in myClip
    myClip.theTween.addTarget(target);
}

Note: The tween instance is targed inside of the myClip instance. So it's movie clip instance name dot tween instance name when I attach the tween.

Make sure you have Flash Player 10 installed to see the 3D: http://www.adobe.com/go/getflashplayer.

View full size animation (need Flash Player 10)

Using tween instances come in really useful if you need to edit the animation. For example, I might want to edit my snow animation in this file, such as changing the blur or the shape of the motion path or perhaps the easing. All I need to do is go to my tweened instance (inside the myClip instance), and modify the tween. With the playhead on frame 1, I can change the blur of the movie clip (I changed the blurX and Y setting to 2).

So say you want to make it a bit more realistic by varying the snowflakes a bit more. In the file snow-tween-instance-3speeds.fla, you will find three tween instances inside of the myClip instance, with tween instance names called slow, medium and fast. I slightly modified the code so it attaches one of the three tween instances based on the scale of the attached snow. Therefore, if the snow was scaled small, the slow and faint snowflake animation would attach (and so on).

So in the below, the snow has various sizes, and pulls from 3 tween instances so the snow in the background falls slower than the snow in the midground, which is slower than the stuff in the foreground.

Make sure you have Flash Player 10 installed to see the 3D: http://www.adobe.com/go/getflashplayer.

View full size animation (need Flash Player 10)

Here is how the code was modified:

   
    var tween:String;
    // ranScale is between 0.0 and 1.0
    if (ranScale < 1) {
        tween = "slow";
        
    // ranScale is between 1.0 and 2.0
    } else if (ranScale < 2) {
        tween = "medium";
        
    // ranScale is between 2.0 and 3.0
    } else {
        tween = "fast";
        
    }
    //assign tween nested in myClip
    myClip[tween].addTarget(target);

And that's pretty much it. Comment with any questions you have.