So, with great trepidation I unleashed just a tiny little portion of CS4 on my primary production workstation a few weeks ago: Flash CS4 and Dreamweaver CS4. I foolishly decided to work on what was supposed to be a dead-simple mini project (with a mini deadline) using Flash CS4. Sort of a “trial by fire”. Well, I got burnt. Badly.
Turned-on by the new Timeline / Motion Tweening model (they finally listened and brought back the AfterEffects-style animation model from LiveMotion – remember LiveMotion?) I jumped into a very simple project: I was going to do a little “slideshow” of images that would simply fade in, grow a little on the screen and then fade out. Sounds dead simple, right? And in CS3 it would have been a snap. Turns out that it IS a snap in CS4, it just took me over two weeks to figure it out, with Jen DeHaan of Adobe’s patient help. Sounds like the cats on the Adobe Flash team made some pretty funky decisions regarding the new timeline. Let me walk you through what I’ve learned.
Or you can just follow the threads on the Adobe Forums here and here.
In a nutshell the problem is this: by default, the behaviour of the new motion tween in Flash CS4 is that it takes over the entire layer that it is on. As much as the Adobe guys claim that this is “object-level” motion tween, it still completely consumes the layer it’s on in the timeline. What’s worse, by default, it’s actually very hard to mix two different movieClip or Graphic symbol animations on the same layer of the timeline. What occurs is that if you have one symbol with a Motion Tween attached to it in a layer, and then on some later frame in that same layer you try to add a Motion Tween to a different symbol, that symbol gets hijacked and actually physically becomes the earlier symbol. That’s right. You drag a symbol onto a layer that already has a Motion Tweened symbol on it, and as soon as you add Motion Tween to the new symbol – BAM! it becomes the other symbol. In fact, even if you look at that symbol in the Library, it’s been changed!
Don’t believe me? Read on…
Working around the issue
The workaround is simple, but brutal: for each movieClip or graphic symbol that you want to animate, even if the animations do not occur over the same frames or at the same time, put them each on a separate layer! This workaround is painful, especially if you get into a sequence of animations (like my slideshow scenario) – you could potentially find yourself with hundreds of layers in no time. Completely impractical.
The good news is that a more comprehensive solution exists, we just have to over-ride the default behaviour of the Motion Tween in the motion tween properties. But first, let’s set this up as a simple experiment that all you kids can follow along at home. Make sure you have the supervision of a parent.
Duplicating the issue
Follow these simple steps if you want to see this in practice in Flash CS4:
1. in Flash CS4, create a new document, import a bitmap to stage, convert to graphic symbol, apply motion tween (right-click – Motion Tween)
2. extend timeline to frame 40 (in Layer 1, click frame 40 -> F5)
3. at frame 40, resize the image (a keyframe is automatically inserted)
4. Now, go to frame 41 >Convert to Blank Keyframe (F7) – this allows us to insert a new graphic symbol that will not be part of the previous Motion Tween (yeah right)
5. Ok, File > Import so that we can import our second image. Well, here’s the first bit of Flash Weirdness, which Jen deHaan of Adobe Systems assures me is a bug and will be worked out:Import To Stage is greyed out! This is because the Motion Tween has consumed the entire layer. So the workaround is:
6. Create a new (empty) layer
7. File > Import to Stage
8. bring in the next image, convert to graphic symbol, delete the image from this layer. delete the layer.
9. go back to the empty keyframe on the original layer, frame 41
10. drag the new graphic onto the stage from your Library
11. and…. wait for it…… here’s the part I was talking about earlier: now right click this (completely different) graphic and add Motion Tween.
BAM, this image has now just changed to the image in the other graphic!
Holy weirdness.
Turn Off “Sync Graphic Symbols”
So here’s the solution – if you select the Motion Tween (that is – if you click on one of the blue frames in your Timeline that has a motion tween applied to it), and look at the Property inspector, you’ll see that it’s giving you all sorts of information about the Motion Tween itself. At the bottom of this list is a checkbox that says “sync graphic symbols”. I have no idea what possible use it has, but it’s on by default. Once you turn this off, your worries should be over.
So, if you’re trying to animate different MovieClips or Graphic Symbols on the same layer at different points in the timeline, make sure that you disable “sync graphic symbols” otherwise you’ll be experiencing the same bizarre symbol swapping that plagued me.