Home
Username:
Password:
Adobe Flash CS4 Tutorials

Creating Shape Tween Animations / Troubleshooting Broken Tweens




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

As you work more and more with Shape and Motion Tweens, you'll sometimes encounter broken Tweens. These are represented by dotted lines here in your frame spans whenever you see this broken line, instead of the solid arrows, like you seen in these Tweens, these are working Tweens these dotted lines means there's a problem with this Tween. The dotted lines in a green frame span indicate problems with a Shape Tween. Dotted lines in a purple or blue frame span indicate problems with your Motion Tweens. This is an indication that your Tween is not working very obvious- making it easy to spot problems with your animations right away. This is Flash's way of telling you to double-check your Tween. This is quite common even for me, and I've been using Flash for a long time. It's common to run into these dashed lines indicating problems. So, let me give you some tips for avoiding or fixing the common mistakes that cause most of the problems with your Shape Tweens. First, make sure that your objects in each of the keyframes are, in fact ,shapes and not grouped objects or symbols or text elements. Here I have a grouped object in keyframe number 1 giving me this broken Tween. Notice that the Tween is not working, it just is disappearing. The one group is disappearing and then the new shape over here is reappearing. So, the way that I'm going to fix this is I'm going to select this group and then choose Modify, Ungroup. Notice as soon as I ungroup those shapes, the dotted lines goes away and, in fact, my animation is working. Likewise, make sure that none of the shapes are symbols here. Actually, this is animating, oh, actually, that's not animating I have the layer hidden that's the previous animation. Notice that this animation isn't working either. I just have a horizontal line in frame 1 and a vertical line over here in frame 10 because one of these this one here is a symbol. And I can tell by the shape of the selection. Notice that that's like a modeled selection that is a, essentially, a line there or a border with these control points. So, what I would need to do is break that up into a shape to get this Shape Tween to work - because that's a symbol and I can't Shape Tween symbols. And to fix this, there's a very easy solution that is, select that keyframe and then choose from the Main menu, Modify, Break Apart. That'll break apart that symbol into a basic shape and now notice that my animation is, in fact, working. Next tip is to make sure you have at least two keyframes before applying the Tween. This goes for Motion Tweens as well. I have a broken Tween here because I only have one shape. Over here I have a keyframe but it's blank, so I don't have a second shape in that layer. All Flash Tween types require exactly two keyframes one at the start and one at the end of the animation sequence so this is going to be very easy for me to fix. Let's go ahead and simply draw let me turn on my Onion Skinning, open up my Onion Skinning there to the beginning of that shape – there's the shape there and let's go ahead and draw another shape right there, turn off the Onion Skinning and, sure enough, there is my animation now working, I've added a second shape. Another problem is this one right here the Tween is working and it's actually not giving me an error but it's not behaving the way that I want it to. Notice that I have this annoying rectangle – it's actually starting off as a. going to a rectangle and then moving over to that triangle. And that's unintended there what I want is just a simple line animation. The reason for this is I have more than one shape on that layer, in fact I have several shapes. So, what you want to do is limit the number of shapes or symbol instances to one at a time on the layer and that will give you much better results. If you wanted to animate that rectangle into a triangle and then a., better to put that on it's own layer. Now, in this case, I could probably fix this by deleting that extra shape, but many times you'll want to just delete the entire layer and start over from scratch by adding a new layer with a blank keyframe, especially with Shape Tweens because, remember, with Shape Tweens, you're mostly working with blank keyframes, adding blank keyframes and then inserting new shapes in the second keyframe. So, in this case, it's probably going to be easier for me, since I just want a simple line animation, to delete the layer and start over from scratch. Also, occasionally, I have no idea why Flash's Shape Tweens break everything looks fine and it was working a second ago and now it's not. Rather than trying to puzzle out or reason especially as a beginner it's usually better just to erase the entire layer and start over. So, using this shape tweening animation technique, you can create a variety of effects in Flash CS4, including morphing one simple shape to another, creating borders and line segments that kind of grow and surround objects for an opening introduction to your animation or website. You can morph one letter to another or morph one word to another word. You can also create groups of Shape Tween animations to create interesting effects. Notice here I have a set of Shape Tween animations all on their own layer. So, there you have an introduction to this very interesting Shape Tween animation technique in Flash CS4. Let me now move on to the next section, a very important section, on how to create Motion Tween animations and review how to animate the alpha of symbols and text and animate color and size, how to create rotating and spinning animations using motion tweening, tweening effects, motion guide tweening, how to customize the Ease-in and Ease-out of your Tweens, timeline effects and much, much more.

Tutorial Information

Course: Adobe Flash CS4
Author: James Gonzalez
SKU: 33981
ISBN: 1-935320-37-8
Release Date: 2009-04-19
Duration: 11 hrs / 126 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available