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

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 –

paste-path.jpg

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.

motionpi.jpg

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.

Jen deHaan is a consultant specializing in instructional design, web design, WordPress, technical project management, and writing. She is based in the San Francisco Bay Area.

Tagged with: , , , , , , , , , , , , , , ,
Posted in ActionScript 3.0, animation, Easing, FLA files, Flash CS4, Flash CS4: motion, Flash CS4: motion runtime, Flash CS4: new features, Migration, Motion Editor, Motion Presets, Motion runtime, motion tween, presentations, symbols, Tween instance
  • http://putney.ajarproductions.com Justin_P

    Hi, I was at Flash Camp this weekend, but I missed a lot of the sessions while I was working on my hackathon projects. So I’m really grateful that you put this content online. I love the ability to save and reapply a Motion Preset. I decided to create an extension to generate a live preview for a custom preset:
    http://ajarproductions.com/blog/2008/10/16/flash-extension-export-as-motion-preset-preview/

    I’m loving the Flashthusiast content and I’m looking forward to seeing more. Thanks!

  • http://www.flashthusiast.com Jen deHaan

    Hey Justin! Wow – that is a GREAT extension! I know I’ll be using that one a lot. I really dug the text extension you built too (and voted for it in the judging room). Love that you’re building really useful tools for Flash – and even love it more that you did one for motion :)

  • http://putney.ajarproductions.com Justin_P

    Thanks, Jen! I’m hoping to stay in contact with members of the Flash team to get at some possible undocumented features as well. I’ve got several (motion-specific) CS4 extension ideas at the moment, but they’re not all available in the documented JSFL. I’ll keep you updated on any progress.

  • http://www.flashthusiast.com Jen deHaan

    Cool, love to hear that! Well, this blog represents the Motion part of the Flash team (I’m the Motion QA), so let us know if we can help.

  • http://putney.ajarproductions.com Justin_P

    Cool, thank you. I spoke with John Mayhew briefly at Flash Camp. I was planning on checking in with him this week. At this point, I’m looking for a way to access/create an object tween. Any kind of access to an armature would be cool too.

  • MC

    I have a question about scaling in regards to the new tweens. I have a tween that I created while the symbol was at 2x scale just to make things easier to see (I should have zoomed). Now I want to scale it back to the size I want but I am struggling to get anything to work.

    I don’t want to change the scale property on a frame within the tween, I want to globally scale every size property so that the tween looks exactly the same, just smaller. I can not figure out how to do this, using the scaling tools in the usual manner does not appear to work and always changes the scale property on a frame of the tween.

    Anyone know?

  • http://www.flashthusiast.com Jen deHaan

    @MC: Yep. What’s happening is the instance you have selected is auto-keyframing at the location, thus creating the tween. It’s telling the tween “at frame XX, tween to this size”. While that’s useful for creating tweens and makes them so easy now, but you have to accommodate for it if you want to modify the entire instance.

    First of all, if necessary, you can remove any tween you have already for scale that you don’t want – go to the Motion Editor, and click the Reset button in the Transformation row (it looks like a blue round arrow). Or, you can delete the keyframes in the Scale X/Y rows. Make sure all the keyframes are gone (except for the first, which you can’t remove anyway).

    And to change the scale (or any property) for an entire tween, you just want to make sure you make the change on the first frame of the tween. So just move the playhead there, and make the modification – no tween will be created, and every frame of the tween will be the same.

    Now I will note that you do need to make sure that you don’t have any keyframes later in the span for that particular property, or you will end up tweening between the new value on frame 1, and whatever keyframe is later in the span (this is no different than any other tweening though, so should make sense :)

    Hope that helps!

  • danmc

    Hi Jen,
    I really like the ability to ease a property “there and back” by using Sine easing and setting the strength to an even number. Is there a way to do this in AS3 code rather than through the motion editor? I’ve tried it this way:

    tweenRotX = new Tween(targetSprite, “rotationX”, Sine.easeIn, 0, 90, 20);

    The result is that it tweens rotationX from 0 to 90, instead of 0 to 90 and back to 0. Results are similar if I use “Sine.easeOut” or “Sine.easeInOut”, which seem to be my only other choices. How can I specify that even-number “strength” property of Sine easing in the code?

    PS: I know it’s possible to do it in the motion editor first, then “copy motion as AS3″. That would make sense for truly custom easing or for a complex tween of several properties at once, but I’m only tweening one property here, in a way that doesn’t seem to be outside the normal capabilities of the Sine class. So if there’s a way to do it without resorting to “copy motion as AS3″ (and the resulting AnimFactory code that I don’t understand) please let me know.

  • güvenlik

    eem to be my only other choices. How can I specify that even-number “strength” property of Sine easing in the code?

    PS: I know it’s possible to do it in the motion editor first, then “copy motion as AS3″. That would make sense for truly custom easing or for a complex tween of several properties at once, but I’m only tweening one property

  • http://www.sachinghare.com/blog Sachin Ghare

    Nice video, cool i like that. You can visit my blog i have mentioned it using video file. http://www.sachinghare.com/blog

    THX.

  • Kieran

    Hi Jen…

    I’ve just downloaded your code and I first want to mention how amazing it looks, and thank you for creating it!

    I’m creating a screensaver with it but I’m having a small problem. I extended the stage size to 1024×768, but for some reason the falling snow will not extend to fill the stage. Do you have any idea what’s going wrong?

    Thanks!
    Kieran