Flash CS4 Motion Tweening

[...] Check out David Stiller’s Video on Flash CS4 Motion Tweening [...]

thankyou for the great info

tom, glad to hear it!

Turtoials and guides such as this are so useful for first timers like myself, i felt it was time to begin teaching myself flash as i have always relied on emulators to do it for me.. but now i want more control, David, do you have more tutorials on the basics like this, and where can i watch them??

I like to keep up and use the latest methods the new software has to offer, but you’re absolutely right. I was quite disappointed that eases could not be applied more selectively. I really hope “Classic Tween” is not a code word for depricated.

someone get the guy narrarating a frekin cotton ball hes sucking his teeth and wetting his lips every other word. “click on the motion of the *mstsmst* head and well go ahead and uh *mstmstms* drag it over here…
god…

To Gary …

I do plan on recording more content for Layers, so keep your eyes peeled. Glad to hear you found this one helpful!

To Dean …

Flash always needs to be able to open and edit FLAs made in earlier versions of the authoring tool. In theory, this tells us classic tweens will never be removed entirely, but in my view, functionality trumps implementation. Meaning, I don’t mind if the “classic tween” mechanism someday goes away — not saying it will (I honestly have no idea) — as long as the functionality it provides stays.

Adobe invites direct input from users, so hop over to this link:

http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

… and make your wishes, hopes, and fears known!

To jim,

Hey, sometimes this material gets awfully … [drum roll] … dry. Gotta compensate for that. (Still, cotton’s not a bad idea.)

The flash video appears to have disappeared? Flash plug-in installed here. Something wrong at Layers website end?

Cheers,

Brent

Thanx! there was no need for a nervous breakdown after all… pffff….

Nice tutorial!
You don’t need to use the classic tween to do this though.

If you control-click a frame on a motion tween to only select one frame and then right click you get the option “Split Motion”. This adds a parent-keyframe or what to call it.

Then you can have separate eases for each. And you can also uncheck “Sync graphic symbols” in your Properties panel to do the facial expression trick (which btw is coming very much in handy for what I’m working on now myself, thanks!).

Cheers, Per

I like to keep up and use the latest methods but some new concept behind this software has to offer, but you’re absolutely right. I really hope “Classic Tween” is not a code word for depricated.but i don’t know how it flexible from cs3 version,in the going days i hopes enjoying this software.

Brent,

My hunch is that you might have been experiencing a temporary glitch due to happenstance network traffic. I hope it works for you! It works for me at the moment.

Marazi,

Thanks!

Per,

Thanks for mentioning that Split Motion feature! I didn’t realize it was there — I really should have known that! — and it’s definitely more convenient than copying and pasting a frame span to achieve the same effect.

That said, a classic tween is indeed necessary for change the displayed frame of a nested graphic symbol … *provided* you want to make that change within the confines of a particular motion tween span.

You’re right, a collection of motion tweens will do the trick, especially with the “Sync graphic symbols” option (which then syncs — or doesn’t — symbols between spans). But by using more than one tween span, you lose the ability to grab the right edge of your tween and proportionally redistribute your property keyframes across the whole set.

Does that make sense? The lesson illustrated in this video is that property keyframes (the little diamonds) aren’t the same as traditional keyframes (dots) in classic tweens. Property keyframes don’t allow changes in displayed frames of nested timelines; traditional keyframes do. Every span of a new-style motion tween begins with one traditional keyframe, which is why a group of motion tweens performs the way you describe.

I’ve just spent the best part of the day screaming at this program; the implementation of new tweening shows that Adobe did a cack-handed job – and clearly didn’t take input from experienced animators.

Sorry to sound bitter, but this update will only be useful to the kinds of “animators” who produce cheap banner adverts, and not to those of us who use Flash as a serious animation tool. The difficulty in dragging a keyframe’s position on the timeline is incredible. Why can’t the new tweening act like “classic”? Why do I have to hold down the CTRL key to (barely) alter a keyframe’s position?

And the fact that you cannot control easing from key to key is a bloody disgrace!!!

I’ve met the Flash programmers on two separate occasions – the first as Macromedia, and second as Adobe. On each occasion they showed little or no interest in the artist/animator user base.

Having said that, there has been an attempt in this version to move in the right direction – however, this is a sub-par effort at best. Nevertheless, at least the attempt was made, which is something. Hopefully they’ll correct the glitches in the next update (CS4.1, NOT CS5!)

Until then, I’m sticking with Version 8. I can actually, you know, do stuff with it…

dermot,

With Flash CS4, you get motion tweens (the new approach, which doesn’t sound like your cup of tea), and you also get classic tweens and shape tweens, so even if you prefer the older mechanism, Flash CS4 still meets your needs.

If you go to Help > About Adobe Flash CS4 Professional, you’ll see the “credits” for this app (like movie credits). If you wait a reeeeeeally long time, you’ll see a list of beta testers, which includes names like Adam Phillips (http://www.biteycastle.com/) and Chris Georgenes (http://www.mudbubble.com/). You may recognize other names as well, but those are two animators I happen to know personally. Check out their work, and I’m confident you’ll find it head and shoulders above cheap banner ad tweening.

Hey David,
Great Tut on Tweening. Can you use the facial expression trick in IK animation? If so can you point to a specific tut that Chris uses to explain compiling under one symbol? I am new to all this of course and will eventually have to buy a book but for now I’m learning things the hard way. Thanks for any help.

I was under the impression that Adam Phillips is moving more towards Toon Boom for his high-end animation. Nice tutorial. I don’t really find CS4 intuitive at all but i’m trying to stick with it because I’ve wanted IK for awhile.

Donny,

Unfortunately, you can’t use the nested graphic symbol trick in IK either. IK armatures require (actually, *are*) a special kind of timeline layer, just like new-style motion tweens. They operate in a different mode from that used with classic and shape tweens, and in this case, it means the same drawback occurs.

Fortunately, the timeline supports classic tweens, shape tweens, motion tweens, and armatures all at once, so you can mix-and-match to best suit your needs. Put your character’s arms, legs, and torso in one layer (an armature), then put the head in a series of classic tweens in a separate layer. That way, you can bone up the limbs to take advantage of IK benefits, while maintaining the nested graphic symbol trick for mouth phonemes.

steve,

I think they’ve both experimented with Toon Boom, and Adam might indeed use that app for his more complex work (I really don’t know), but I mentioned their names to show that Adobe didn’t developing the new tools in isolation from the top animators in the field.

dermot was “sticking with Version 8″ because “I can actually, you know, do stuff with it…,” which puzzles me, because the Flash 8 drawing and animation tools are still fully present in CS4. It’s just that CS4 also has a bunch of cool new stuff, so designers have more tools at their disposal.

PLEASE- Just give me a simple , step-by step tutorial on tweening!

VC,

I’m pretty sure that what you’re after is demonstrated in this video already, both for new-style motion tweens and old-style classic tweens. What particulars do you feel are missing?

This is a very good tutorial. It opened my eyes and gave me many ideas.
But unfortunately I can’t use these techniques…
I can’t find the looping options on the properties panel in Flash CS4. It’s simply not there.
When a movie clip is selected, these are the options: position and size, color effect, display and filters… but no looping
What could be the problem, or what do I made wrong?

Thank you!!!

That Sync option was fucking me off, I was going mad trying to figure out why I couldn’t swap out frames within a classic tween.

Hello David, besides from helping me get this new way of tweening, I have a question, what software do you use to create soft tutorial videos? and is it too hard to create I mean, the audio is from a regular mic or need to be a special one to achieve such voice quality? I want to create some videos to integrate on a dynamic PDF I am creating. Thanks.

this is an amazingly nice video i just love it. as a designer it’s very ok I think

Thanks. That was useful

Awesome Tutorial, Thank you so much (y)

Great tutorial, thanks alot!

Thanks

To David …

You’ll find the looping properties in an area called “Looping” in the Property inspector, just below “Position and Size” and “Color Effect” — but looping is only available for graphic symbols. I wonder if you’re looking at a movie clip symbol?

To Champion …

Heh, it’s a gotcha, for sure!

To Juan …

I used Camtasia to make this tutorial, and my headset is the Logitech ClearChat Comfort USB Headset. I also have a standard cheap mic plugged in near the keyboard, which picks up occasional typing or incidental audio, such as system errors, timeline audio, and the like.

To Honey, Jake, Mustafa, Ryan, and Kaan …

Thanks so much! Glad to hear it!

We’ve just started trying to migrate from Flash 8/CS3 to CS4 and have to wholeheartedly agree with Dermot’s post back in January. From a character animation point-of-view this version is a giant leap backwards. Our optimum workflow requires ‘classic’ tweens with auto rotate as default and sync and snap deselected, no problem in the old version properties box. We’ve been using the multiple framed graphic you demonstrate here for years and even this required a patch to make it work properly. It is not surprising that Adam Phillips and other prominent character animators have abandoned Flash for ToonBoom.

In fact we can get motion tween to work in classic way as well, just entering usual keyframe instead of property keyframe by right click and selecting “Split Motion”…

I am still using classic tweens in cs4…

To Bernie …

I’m sorry to hear you’re frustrated with the changes! If I used Flash for animation full time, I might have a stronger first-hand grip on understanding the complaints since CS4. So far, though, my own projects have continued to roll along just fine. Maybe I should count myself lucky!

I’m not sure how accurate it is to assert that folks like Adam Phillips have “abandoned” Flash for alternatives like Toon Boom — maybe you know something I don’t — but it’s always good to know that alternatives are indeed available. Presumably, the competition will put healthy pressure on all involved companies, which should spell improvements for everyone.

To Kaandittb …

True, you can use Split Motion to split a given motion tween span, but that obviously breaks the tween into two parts. Naturally, each part works on its own and allows for a change in the displayed Graphic symbol frame, but the split changes how easily a person can adjust the duration of an animated sequence. (Single motion tweens scale duration neatly with a simple click-and-drag of their right sides. When a sequence is animated over more than one tween, that benefit is diminished.)

To JJ …

A lot of people do — myself included, for traditional character animation — so I’m glad classic tweens are still around. I do find, however, that new-style motion tweens are great for user interface animation (making buttons, panels, and other UI assets bounce and wiggle). And fortunately, all three types of tweens — shape, classic, and motion — can be used in the same timeline.

[...] Motion Tween vs. Classic Tween: http://www.layersmagazine.com/flash-cs4-motion-tweening.html [...]

Hi David,
awesome tutorial, I am new to flash and had a question. I made a .gif into a symbol, and then in the timeline of the symbol I added different .gifs to change as you did with the faces. However when I add these they appear in the library. I thought they stay out of the library to save space. When I delete them they disappear. Again I am new so this may be a stupid question, I just really liked how it worked. The only thing is all my gifs are still in the library.

Thank you,
Maia

You just saved me some headaches with this one . Thanks for the clear explaination between the two tweens!

To Maia,

As soon as you create a symbol of any kind — movie clip, graphic, or button — that symbol will appear in the Library panel. All imported raster images (GIF, JPG, TIFF, etc.) also appear in the Library panel.

Items in the library are not necessarily added to the published SWF file, so just having them there isn’t necessarily a bad thing. The only time symbols or images increase the SWF’s weight is when they appear in the timeline or are configured to export for ActionScript (by default, they’re configured not to export for ActionScript).

So your GIFs will indeed appear in the library, and they have to be there if they’re used anywhere on the stage, even inside other symbols. I usually throw my imported images into a library folder, just to keep the library tidy.

To trapper08,

Glad to hear it. Thanks!