<img src="http://www.layersmagazine.com/images/cs4-lc.jpg"

The new motion editor in Flash CS4 is a welcome addition to the Flash toolkit and it has some new options to speed up motion tweening. However, there are still some techniques that will require users to employ the classic tween. David Stiller goes over one of those techniques and looks at some of the new motion tweening features in CS4. Sample files are available for viewers who want to follow along with tutorial. Click here to download.

Share & Enjoy


 

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

  2. tom (Reply) on Tuesday September 23, 2008

    thankyou for the great info

  3. David Stiller (Reply) on Tuesday September 23, 2008

    tom, glad to hear it!

  4. Gary (Reply) on Tuesday September 23, 2008

    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??

  5. Dean (Reply) on Tuesday September 23, 2008

    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.

  6. jim ballsack (Reply) on Tuesday September 23, 2008

    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…

  7. David Stiller (Reply) on Tuesday September 23, 2008

    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.)

  8. Brent (Reply) on Tuesday September 23, 2008

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

    Cheers,

    Brent

  9. Marazi (Reply) on Tuesday September 23, 2008

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

  10. Per Byhring (Reply) on Tuesday September 23, 2008

    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

  11. Amulyaranjan (Reply) on Tuesday September 23, 2008

    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.

  12. David Stiller (Reply) on Tuesday September 23, 2008

    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.

  13. dermot (Reply) on Tuesday September 23, 2008

    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…

  14. David Stiller (Reply) on Tuesday September 23, 2008

    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.

  15. Donny Anderson (Reply) on Tuesday September 23, 2008

    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.

  16. steve (Reply) on Tuesday September 23, 2008

    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.

  17. David Stiller (Reply) on Tuesday September 23, 2008

    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.

  18. VC (Reply) on Tuesday September 23, 2008

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

  19. David Stiller (Reply) on Tuesday September 23, 2008

    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?

  20. David (Reply) on Tuesday September 23, 2008

    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?

  21. Champion Featurs (Reply) on Tuesday September 23, 2008

    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. :)

  22. Juan Mejia (Reply) on Tuesday September 23, 2008

    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.

  23. Honey (Reply) on Tuesday September 23, 2008

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

  24. Jake (Reply) on Tuesday September 23, 2008

    Thanks. That was useful

  25. Mustafa (Reply) on Tuesday September 23, 2008

    Awesome Tutorial, Thank you so much (y)

  26. Ryan (Reply) on Tuesday September 23, 2008

    Great tutorial, thanks alot!

  27. Kaan Soral (Reply) on Tuesday September 23, 2008

    Thanks

  28. David Stiller (Reply) on Tuesday September 23, 2008

    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! :)

  29. Bernie (Reply) on Tuesday September 23, 2008

    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.

  30. Kaandittb (Reply) on Tuesday September 23, 2008

    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”…

  31. JJ (Reply) on Tuesday September 23, 2008

    I am still using classic tweens in cs4…

  32. David Stiller (Reply) on Tuesday September 23, 2008

    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.

  33. Maia (Reply) on Tuesday September 23, 2008

    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

  34. trapper08 (Reply) on Tuesday September 23, 2008

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

  35. David Stiller (Reply) on Tuesday September 23, 2008

    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!

  36. Dan (Reply) on Tuesday September 23, 2008

    i watched about five minutes and all you did was talk about nesting animation in symbols. change the title

  37. David Stiller (Reply) on Tuesday September 23, 2008

    Dan,

    Sorry for the late reply! It sounds like the pacing here wasn’t to your liking — sorry to hear that! — but this tutorial does get into new features of the sort of tweening known as Motion Tweens as of CS4. The focus leans toward differences and “gotchas” between new tweens and the sort now called Classic Tweens, which explains the old-style lead-in.

  38. Howard Jones (Reply) on Tuesday September 23, 2008

    Thanks for the very best explanation of the differences between motion and classic tweens with lucid examples of their use!

  39. Axe (Reply) on Tuesday September 23, 2008

    Are classic tweens buggy?

    When I lower the alpha to do a fade out it moves my movieclip by 1 pixels to the left.

  40. Anthony Topper (Reply) on Tuesday September 23, 2008

    Thanks for making this video. However, some compression on the audio is needed desperately. Nobody wants to listen to your breathing and the various ambient noises your mouth makes.

  41. 0rion (Reply) on Tuesday September 23, 2008

    tweens go in this order of usefulness:

    Actionscript based tweens using a tween engine like greensock or paper-vison for 3D
    Classic tweens
    motion tweens

    IMHO: the new tweening system is pooly integrated in to the existing work flow, it required an enormous amount of work space to be useful, non-professional users working on 1 or 2 monitors will find it cumbersome making room for the motion editor window and HUD. I also feel that the new tweening system is to far of a departure from what HUD animation has been. If you were making the jump from post production to web animation the new tweening system could be right up your ally but for this grizzled veteran any title of flash that doesn’t have access to “classic tweens” will not be used on my projects.



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby