So now that you’ve heard all these great CS4 announcements, lets get into some constructive details about Flash CS4 (whoo hoo, I can finally talk about what I’ve been working on!). But before we start, this is the first time I’ve written in detail about a non-released product, so bear with me and please comment about whatever is really confusing or assuming you have the product already, below.

There have been sneak peeks of some of the upcoming features in Flash thanks to conferences and keynotes, and you may have seen that one of the big new features (and to some of us on the feature, *the* big new feature) is a new way of creating animation. So yeah, tweening has changed. Finally. In Flash version 10. No more arrows on purple blackground. Um, now it’s blue with diamonds. And a whole lot better in many ways.

More after the jump.

Before you existing tweeners start freaking out (”it’s AS3 all over again! How could you do this to me again, Flash??!”), you don’t need to. New tweening is cool. I know I’m biased because I’ve spent a lot of time only doing these new tweens over and over and over again (don’t ask me how many blue boxes I’ve tweened across the Stage) - but honestly - new tweens are easy, they’re better, and after you use them for only a short while you get used to the new way. Really. No lies. No kool-aid required at 601 Townsend. Even with real tweens that aren’t blue boxes this stuff works fabulously and you grow accustomed to them surprisingly quickly. I was using these new tweens for a couple weeks, then opened CS3 one day and actually had to stop and think about what I was doing there because I was trying to do things the new way in CS3 (after using old tweens for 9 years or something). It could and probably will happen to you, too.

And if you will be new to Flash, you’re lucky because tweens will be way easier to learn (and less quirky) than before. Bonus. (and more about this below)

Why tweens have changed in CS4
So lets look at some of the reasons WHY tweens are changing in Flash before we look at the “how”. Why would you want to relearn something that worked pretty well before? Why would and how could you improve upon perfection? (heh heh) Good question. There are lots of reasons why new tweens are better and will be worth investing the small learning curve for:

  • you cannot break a new motion tween - no more “dashed arrows”
  • as such, new tweens are easier to use: you directly manipulate objects on the Stage without needing to always think about keyframes. You don’t even need to add keyframes - just manipulate the object and the keyframes are inserted for you.
  • granular control over each part of a tween.
  • motion paths are shown right on the Stage for all tweens. Highly visual, and directly editable.
  • you can use the new Motion Editor with new tweens
  • as such, the Motion Editor means tweens are more powerful in general: each property and keyframe on each property is accessible and editable independently. You can tween alpha separately from rotation separately from scale (etc).
  • in that Motion Editor you can edit individual properties on a graph
  • you can use the new 3D model with new tweens
  • you can give your tween an instance name and then give other instances that same tween at runtime
  • new tweens are easy to stretch by just dragging the span in the timeline
  • new tweens have new eases, which have advanced (and very cool, better, enhanced) eases
  • you can create/apply custom eases that do not need to end at 100%
  • you can save a tween as a preset and reuse it in that or other documents
  • new tweens are easy to move now - either on the timeline (drag the tween span around), or on the stage by selecting the motion path and just moving it on the Stage (lets just say it is WAY easier than edit multiple frames).
  • motion paths in general are easier, and you no longer need motion guides. The motion path for a tween is attached right to the tween.
  • you can apply a new instance to an existing tween by just pasting it onto a tween to swap it out, drag a new instance from the Library, or use Swap Symbol. you can even have a tween without an instance applied to it, and all properties of that tween will be saved until you apply an instance to it.

How the new tweens are different:
The main difference between old tweening and new tweening is that old tweens create animation between two instances. So you have an instance at frame 1, a different instance at a keyframe at frame 5, and Flash calculates what the animation should look like between those two instances.

The new tween model tweens a single object on a span. This affords many new possibilities, like swapping out the instances, move the tween around the Timeline easily, apply the tween to multiple objects, saved as a Preset, scale the tween longer or shorter so its slower or faster, and so on. But it also means that the way you approach creating a tween changes. The first thing you’ll notice one day when you can install Flash CS4 is you don’t need (or want) an end keyframe before you create a tween — you don’t create your keyframes first and then “Create Motion Tween”. Instead you create the tween and then just change the tweened instance where you want the change to occur and the keyframes are inserted for you (or, you can insert them yourself on the span after you create it).

So remember: Create the tween first, *then* make your keyframe changes for that tween.

And on the subject of keyframes. Because of these changes, “keyframes” within a tween span (after the first frame of your span) are not true keyframes anymore. They are not instances of a whole object - they instead represent property changes within a tween. That’s why we’re now calling them “property keyframes”. And they look like diamonds:

property keyframes

So the “keyframe” is at the first frame of the span, and subsequent changes are at property keyframes along that span.

We’re working on an article for the Developer Center about migrating from the Way of the Old Tween to the Brand New World of the New Tween. Watch for it. It will contain a bunch more stuff like the above, and if history repeats itself the article will be thoroughly edited by other people so it sounds smarter and is easier to understand.

How you will be making new tweens when you get Flash:

  1. You will draw something on the Stage.
  2. You’ll right-click that something and choose Create Motion Tween from the context menu, and then click OK to convert it to a movie clip (if you are working with an instance, you wouldn’t see this dialog).



    3. tween-this.jpg

  3. The playhead will be at the end of the span that was magically created.



ready-to-tween.jpg



(click for full size)
Then you just move/transform/etc the thing you drew, then scrub the playhead.

That’s it. If you moved the object, you would see a motion path on the Stage (the line with the dots over it) –

motion-path.jpg

And you would be able to bend that motion path (or with the Subselection tool) to change where/how the graphic animates.

motion-path-bent.jpg



You can even draw something with the Pencil or Pen and just paste it onto your tween. Motion paths just got a whole lot easier too - no more crazy guides and snapping objects.

Of course, this is only one of the tons of things you can do. For example, you can even tween 3D: 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)

But that’s another blog post. Oh, and we’re working on the ‘Animation Learning Guide’ (another Developer Center article) for this latest Flash release, which will explain how to use all of the different tweening features. And maybe a bit of 3D.

And if you aren’t completely sold (or there’s something you can’t do with the new one), we left the old way of tweening in there for ya.

classic-tween.jpg

Would love to hear your questions, or Motion subjects you’d like me to cover especially leading up to the software release. What do you want to hear about?

Blog news:
Now that CS4 can be discussed, this blog is changing - but it’s for your benefit. This is no longer a solo gig of mine, I’ll be sharing Flashthusiast with the true stars and much smarter members of the motion team — the ones who actually develop the stuff. So if you like animation, or you just need to use it, read this blog and let us know what you think of new tweens in the comments (love or constructive hate welcome). Once you have Flash CS4 and can actually use this stuff, of course.