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 »
December 18th, 2008
by Jen deHaan
A frequently requested item for Flash is the ability to see a grid over your artwork on the Stage. Flash CS4 now lets you do just that using a new option in the Edit Grid dialog. Let’s look at the change, which you might not have noticed yet because it’s turned off by default. Keep reading to learn how.
read more »
Posted in Flash CS4, Flash CS4: new features, instances, new stuff, symbols | 1 Comment »
December 10th, 2008
by Jen deHaan
So you have a bunch of instances on the Stage. Say you sprayed them using the new Spray Brush tool in Flash CS4, or maybe you just have a bunch of buttons in a menu that you need instance names for. And you don’t want to have to select each one, go to the PI, name it, repeat. This new JSFL file lets you select instances on the Stage, and will add an instance name for whatever can take one (buttons, movie clips, components, etc). You set the prefix for that name (say, yourName), and then it name them using the format yourName_0, yourName_1 and so on. If you select something that cannot take an instance name, it doesn’t get named (or mess up your sequential numbering).
Thanks to Jeffrey Ahlquist of Flash team engineering fame for writing up this JSFL. Download it (right-click, Save Link As): Sequentially Name Instances JSFL. After you download it, put this file in the Commands folder in your user config folder: (Win) Documents and Settings\username\Local Settings\Application Data\Adobe\Flash CS4\en\Configuration\Commands\ (Mac) username/Library/Application Support/Adobe/Flash CS4/en/Configuration/Commands. In Flash, select the instances you want to name, and then select Commands > Sequentially Name instances.
The next post will detail using this new JSFL in conjunction with the Deco Tool and Tween instance features of Flash CS4. Along with a tiny bit of ActionScript 3.0. Read that next post… now!
Posted in Commands, FLA files, Flash CS3, Flash CS4, General, JSFL, downloads, instances, symbols | 6 Comments »
November 21st, 2008
by Jen deHaan
Today the Text Layout Framework went live for Flash Player 10. This will help you layout your text in new and much better ways in your applications. You may have seen some demos at MAX (like the Herald Tribune demo) where the text flow, direction, etc was handled way better – now the functionality is on LABS. Check it out here:
http://labs.adobe.com/technologies/textlayout/
Note that you can download FLA examples from the presentation at the top of the page, to help you understand how to use the component.
To quote the page,
“The Text Layout Framework is an extensible library, built on the new text engine in Adobe® Flash® Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. The framework is designed to be used with Adobe Flash CS4 Professional or Adobe Flex®, and is already included in the next version of Flex, code named Gumbo. Developers can use or extend existing components, or use the framework to create their own text components.”
You can download and install the component in Flash CS4, try it out for yourself.
http://labs.adobe.com/downloads/textlayout.html
Posted in ActionScript 3.0, Flash CS4, General, symbols, text | 6 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 »
September 4th, 2008
by Jen deHaan
You may have tried creating a shape that has a hole in it for a mask in Flash, and it may not have worked. Or maybe it did work and sometimes it didn’t, and you grew some extra gray hairs and threw your laptop at a wall. Or maybe you’re thinking “what the hell is she talking about now?”. I’ll start from (almost) the beginning [if you're not sure about making masks in Flash, read this super old tech support article.. it hasn't changed].
More after the jump.
read more »
Posted in ActionScript 3.0, Flash CS3, animation, instances, masking, masks, symbols, workaround | 9 Comments »
July 29th, 2008
by Jen deHaan
When you right-click a symbol instance on the Stage in Flash, there are a couple new options that were added in CS3: “Set Transformation Point” and “Reset Transformation Point”. There’s not much out there about these features, as I understand they were added quietly late in the game. But they’re very useful nonetheless. The problem is it’s a bit tricky to figure out how these things are useful without knowing what the feature is or how it works – because (at least to me) it sounds like they do something when they actually do something a bit different (and once I found out what they did, it made a lot of sense). So lets run through this new feature.
- Drag an instance of a symbol to the Stage from the Library.
- Select the instance using the Free Transform tool.
- Drag the transformation (the white circle) to a new location on the instance.
- Right-click the instance and choose Set Transformation Point.
- Drag a new instance of that symbol to the Stage, and select it with the Free Transform tool.
As you can see, the Transformation pointof the second instance is exactly where you placed it in the first one. That’s essentially what this first option does, and it can be very handy if you’re using a bunch of instances in a FLA that need to rotate or otherwise transform from the same point – saves a lot of dragging/estimating.
As for Reset Transformation Point-
- Right-click the instance again, and choose Reset Transformation Point.
- Drag another instance onto the Stage, and select it with the Free Transform Tool.
Now the Transform point is back in the default central position for the new instances of this symbol. Alternatively, you can change the Transformation point location, and just choose Set Transformation Point again and it will save this new location for the instances.
This feature appears to work on a per-symbol basis. You can set the transformation point for all instances of a particular symbol for multiple symbols in the library. For example, you have Symbol 1 and Symbol 2 in the library. You can set the transformation point for an instance of Symbol 1, and all instances of that symbol will keep that transformation point location until you reset it or set a new location. You can independently set a transformation point for Symbol 2 and it is saved until you reset it on an instance of that symbol. And so on.
As an aside/note/whatever, remember that you can set the Transformation point to the Registrationpoint by double-clicking the white circle.
If you’re new to Flash and you’re wondering what the heck a Transformation point is – it is the point around which the symbol rotates or transforms, and looks like a white circle when you have the instance selected using the Free Transform tool. The best way you can illustrate this is by creating a new instance, and rotate it using the Free Transform tool (select the instance using the tool, and move the cursor around the edge until you see a little round arrow and then drag). Now change the location of the white circle and rotate the instance again. This also affects how the instance skews and resizes. The Transformation point has also been referred to as a “Control point” in Flash (some references in documentation are to the Control point), but it is different than the Registration point (the small black crosshair).
Posted in Flash CS3, General, Migration, animation, instances, symbols | 11 Comments »