October 6th, 2009
by Jen deHaan
A “FAQ” about new motion tweens is how to scale the entire animation after you have created it. New motion tweens “auto-keyframe”. This can be very helpful when animating, because it saves you a step – you can just make your changes and everything tweens nicely. However, it also means that you need to think about things when you need to revise the entire animation. You don’t use “Edit multiple keyframes”, since you really only have one keyframe at the beginning of the animation. So I’ll go over a few of the things you may encounter.
1. Moving an entire animation with a motion path.
If you have a motion path, this is easy – you select the motion path (click it, or marquee-select over your instance), and then drag it to a new location on the stage or use the X-Y hot text for the path.
2. Moving an entire animation without a motion path.
If you do not have a motion path and do not want a motion path, you need to make sure your playhead is at frame 1 of the tween span, and then move the instance to a new location. Make sure you haven’t accidentily placed any position keyframes. If you do have a path, delete it or go to the Motion Editor and right-click the X and Y motion paths and choose “Reset Property” (or click the Reset button for Basic motion if you don’t have rotation applied).
3. Scaling an entire animation that doesn’t have Scale X or Scale Y animated.
You can scale the tween with the motion path. Just go to the first frame of the tween, and select the instance and path using the Free Transform Tool (hold Shift to multi-select), or use the Transform panel for each selection. Scale it as you do any path or instance, and because you’re at the first frame the changes will apply across the entire tween.
4. Scaling an entire animation that does have Scale X or Scale Y animated.
If you have previously scaled anything in the tween, doing this is applied to the first keyframe and the tween would animate to the earlier scaling (the auto-keyframing feature can be a detriment in this situation, especially when it comes to scaling due to the percentages being reset – for this reason Motion Presets also won’t help). In this situation, I recommend scaling using the Motion editor:
1. Go to the Scale X and Y properties in the Motion Editor.
2. Press the Alt key while dragging the curve in each graph up and down. This scales the entire scale animation at the same time (same as edit multiple keyframes).
3. If you need to proportionally scale the motion path for the tween as well, select the path on the Stage and use Free Transform or enter a new value in the Transform panel.
Posted in Flash CS4, Flash CS4: motion, Flash CS4: new features, Migration, Motion Editor, animation, motion path, motion tween, new stuff, symbols, timeline, transform, tweens | 17 Comments »
January 9th, 2009
by Jen deHaan
If you’ve created motion tweens in versions of Flash Past, chances are you’ve pressed F6 a few times in order to insert new keyframes. Doing so has probably become very familiar to you as well – you want to change something for an animation, then you press F6. Automatically. It’s a habit.
You can still use F6 to insert static keyframes on the Timeline (that you might turn into a motion tween), and you can even use them to insert property keyframes within a tween span too. However, within a tween span pressing F6 will insert a property keyframe on every single property currently associated with the target instance. This is usually way more keyframes than you actually need at that frame, so using F6 on a tween span is usually not the best thing to do for your animation – especially if you intend to continue modifying it. You’ll likely end up with unexpected things happening in your animation. So in Flash CS4, you might want to work at breaking the F6 habit.
Instead of pressing F6, you can insert keyframes other ways:
- Simply change the instance. Most of the time, this is all you need to do to insert a keyframe at the playhead’s position. If you need to tween to a new location, move the instance there. If you need it to scale or skew, use the Free Transform tool. If you need the instance to blur, change the value in the Property inspector or Motion Editor.
- Right-click the tween span and choose Insert Keyframe > Type. This adds keyframe(s) for the category you select at the current playhead, which reduces the number of keyframes inserted. For example, if you choose Insert Keyframe > Filter it adds a keyframe on all filter properties. To further reduce the number of inappropriate keyframes, use the Motion Editor.
- Use the Motion Editor. You can use the Add Keyframe button (yellow or gray diamond), graph context menu, or Ctrl/Cmd key over the graph to insert a keyframe on individual properties.
Posted in Flash CS4, Flash CS4: motion, Flash CS4: new features, Migration, animation, motion tween, tweens | 19 Comments »
December 10th, 2008
by Jen deHaan
In the previous blog entry, I linked to a new JSFL that automatically gives instance names to selected instances in a smart way. You can go read about and download the JSFL from this page. This entry shows you how to use this command along with some of the new features in Flash CS4.
read more »
Posted in ActionScript 3.0, Commands, Easing, FLA files, Flash CS4, Flash CS4: motion, Flash CS4: motion runtime, Flash CS4: new features, General, JSFL, Migration, Motion Editor, Motion runtime, Tween instance, animation, downloads, instances, motion tween, new stuff, tweens | 6 Comments »
November 24th, 2008
by Jen deHaan
That’s right – do you want to do more “stuff” with your tweens? Often you have to know what keyboard modifiers to use, because functionality is not revealed in any other way. These modifiers are all documented, but I thought I would put them down in a handy list you could reference or print out (or whatever you want to do).
MOTION EDITOR
- Add a control point: Ctrl-click (Windows) or Cmd-click (Mac) on the curve or dashed line on the graph.
- Remove a control point: Ctrl-click (Windows) or Cmd-click (Mac) a control point.
- Select multiple control points on a graph: Hold Shift and click each control point.
- Convert a control point between smooth and corner: Alt-click (Windows) or Option-click (Mac) the control point to extend or pull in the handles of a control point. This works on all control points except on the X, Y, and Z (spatial) properties.
- Move a curve up and down on a graph without changing the keyframes time values: Alt-drag (Windows) or Option-drag (Mac) the curve between any two control points.
- Separate handles on a control point: Alt-drag (Windows) or Option-drag (Mac) a handle. This makes the handle move independently. Release the Alt key and drag the opposite handle past 180 degrees to make both move together again.
- Move a control point to a different frame and retain its value: Make sure the control point is DESELECTED, and then hold Shift and drag it to a new frame. Or select the control point and don’t release the mouse button, then hold Shift and drag it to a new location.
- Change values by steps of 10: Hold Shift while scrolling the hot text.
- Change values by steps of 0.1: Hold Ctrl while scrolling the hot text.
(Also note that you can do basic math in the hot text as well – to enter 25, you can enter 20+5.)
TWEEN SPANS (in Timeline)
- Select a single frame in a tween span: Ctrl-click (Windows) or Cmd-click (Mac) a frame in the tween span.
- Select multiple frames in a tween span: Ctrl-drag (Windows) or Cmd-drag (Mac) frames in the tween span.
- Extend the length of a tween span without stretching the animation: Shift-drag the end of the tween span to the right.
- Make the tween span shorter without stretching the animation: Shift-drag the end of the tween span to the left (removes keyframes you drag over).
- Duplicate a span: Alt-drag (Windows) or Option-drag (Mac) the span to a new location on a timeline.
- Duplicate tween frames: Select frame(s) within a span (Ctrl/Cmd-click or drag) and then Alt-drag (Windows) or Option-drag (Mac) the frames to a new location on a timeline.
- Insert empty frames between two adjacent tween spans: Hold Alt (Windows) or Option (Mac) while dragging the breakline between the spans.
Posted in Flash CS4, Flash CS4: motion, Flash CS4: new features, Motion Editor, animation, motion tween, new stuff, tweens | 13 Comments »
November 18th, 2008
by Jen deHaan
This morning I presented about how you can use some of the preset eases in Flash to create animation really quickly. This post provides a real quick overview about how I built the files, and has the source FLAs for you to look at in Flash CS4.
read more »
Posted in Adobe MAX, Easing, FLA files, FLV, Flash CS4, Flash CS4: motion, Flash CS4: new features, Motion Editor, motion tween, presentations | 1 Comment »
November 5th, 2008
by Jen deHaan
If you want to learn about new motion tweens in Flash, and you’re going to be at Adobe MAX, you’re in luck. I’ll be giving a short presentation as part of the QE team session, and we’ll be at the Flash birds of a feather session. This isn’t in the MAX session guide so I thought I’d blog about it so the two of you out there interested can read all about it.
More fascinating info after the jump.
read more »
Posted in Adobe MAX, Flash CS4, Flash CS4: motion, Flash CS4: new features, General, animation, motion tween, presentations, tweens | 1 Comment »
November 4th, 2008
by John Mayhew
Hi everyone. John Mayhew from Flash authoring here. This is my first blog entry here and I wanted to take some time to describe the XML schema we use to store motion presets in Flash CS4. First I’d like to give you some background. The new animation model in Flash CS4 was built from the ground up over the last several years. It started as an idea I pitched at the end of our Flash 8 cycle at Macromedia. We assembled a team and started development in Flash 9 and continued through into Flash 10 and eventually shipped it as part of CS4. It was the culmination of tons of hard work by many, many people including our very own Jen DeHaan! We are all very proud of the feature and hope our users find that it does indeed "kick ass" as Jen likes to put it.
read more »
Posted in Easing, Flash CS4, Flash CS4: motion, Flash CS4: motion runtime, Flash CS4: new features, Migration, Motion XML, Motion runtime, Scripted animation, animation, motion tween, tweens | 4 Comments »
October 12th, 2008
by Jen deHaan
Yesterday at FlashCamp, I gave a presentation on using the new motion model in Flash CS4. The files are linked on this post. This is a general synopsis of what I covered, and I’ll detail how I did a few things in the presentation. Please comment with any questions you have.
More after the jump.
read more »
Posted in ActionScript 3.0, Easing, FLA files, Flash CS4, Flash CS4: motion, Flash CS4: motion runtime, Flash CS4: new features, Migration, Motion Editor, Motion Presets, Motion runtime, Tween instance, animation, motion tween, presentations, symbols | 10 Comments »
October 11th, 2008
by Jen deHaan
Here are the FLA and SWF files (Flash CS4 and Player 10) for today’s presentation at FlashCamp on new motion in Flash and using Tween instance (contains that ActionScript).
FlashCamp files for motion tween presentation
The next post will be a bit more about these files and the stuff used in them.
UPDATE: Here it is! For a bunch of information about the presentation and the files in that ZIP above, read this.
Enjoy!
Posted in ActionScript 3.0, FLA files, Flash CS4: motion, Flash CS4: motion runtime, Flash CS4: new features, animation, presentations | 1 Comment »
September 22nd, 2008
by Jen deHaan
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.
Update: articles on Adobe Developer Center for the new motion model:
* Motion Migration Guide for Flash CS4
* Animation Learning Guide
More after the jump.
read more »
Posted in Flash CS4, Flash CS4: motion, Flash CS4: new features, Migration, Motion Editor, animation, motion tween, tweens | 85 Comments »