• (778) 557-6689

Found Pixel

Custom graphic design, branding, and websites on Vancouver Island

You are here: Home / animation / Scaling and moving new motion tweens in Flash CS4

Scaling and moving new motion tweens in Flash CS4

By

Print

Last Updated on October 6, 2009

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.

Reader Interactions

Comments

  2. Hello Jen,

    Two quick questions:
    1. Is there an easier/faster way of moving keyframes in time, other than selecting the property tweens from the motion editor and dragging ?
    2. How can you copy and paste selected keyframes in a CS4 tween ?

    Thanks,
    George

  5. @George.
    And for #2, select the keyframe you want to copy (using the cmd+click), right-click and choose Copy Properties. This copies all the properties of that keyframe. Then select the location you want to copy them at (cmd+click), right-click > Paste Properties.

    Hope that helps!

  6. Hi Jen,

    Thanks for the tip! Quite handy!
    I was wondering, is there a magic way to Copy Properties as Actionscript 3.0 ?
    I was looking in the History Panel and nothing shows up when I Copy Properties. I couldn’t find any relevant script in Commands and Javascript profile folders.
    Meantime I am tracing the values I need using actionscript, but it would be so nice if I can get the values with a keyboard shortcut.

  8. Hi Rob,
    That is pretty much what this post is addressing – you might need step 4. Presently it is not a great workflow, as they do need to be scaled separately (select motion path, then select instance, but if previously scaled you need to follow step 4) – hence this workaround. It’s something that’s filed as something we need to improve.

  9. Hello
    I make flash banners and constantly require re-sizes of my work. What i cannot work out in Flash CS4 is how you can scale the animated object and it’s motion path at the same time?!

    I used to use the ‘edit multiple frames’ selection to scale the whole project down at the same time. But if i do that using the new tweening method, all the motion paths stay the same and do not scale along with the objects on stage.

    Any help would be sweeeet.

    Rob

  11. Tween time again…

    questions:

    1. what’s the best way to match a motion tween to an animation from a series of images(like a spiral animation, z included) ?
    2. how do you disable Z snapping for a keyframe of a motion tween ?

    I tried the following:
    1. created a motion tween
    2. picked equidistant keyframes and matched the clip to the underlying image.
    3. smoothed the path using the bezier handles

    at this point, I have keyframes in the right place, at the right time, no easing yet, so it all looks jerky.

    4. I added a bit of ease out, so some keyframes are miss aligned

    I tried to re-align the keyframes, bad idea, it all goes wrong. Can’t use the 3d translate tool(G), it snaps in a weird manner, can’t use the property inspector, when I adjust X and Y, Z adjusts itself and I don’t understand why.

    my clip is simple (a rectangle), the start and end keyframes are at rounded pixel positions, pivot and transformation point are at centre.

    Can I please either get some hints on the right approach to do this, either a way to disable that odd snapping behavior ?

    Also, can’t seem to do onion skinning, or edit multiple frames on movieclips that have 3d transforms. Any replacements for these really handy ‘oldschool’ techniques to match animations ?

    Thanks in advance,
    George

    • @George:
      for (1) are you trying to match two tweens, or a tween to a static frame-by-frame animation? Do you have an example you can link to? 3D can get a bit weird because of the vanishing point (differently placed tweens will be different based on the vanishing point).
      for (2) You will want to disable snapping in the Tools panel (deselect the magnet icon). Other controls under View > Snapping, but that will take care of the rotation snapping.

      I’m not sure about why onion skinning isn’t working – it does for new tweens, including those with 3D. Perhaps you could provide steps with an example FLA to show what’s not working for you. Edit multiple frames won’t work for a single tween instance, it will work on the first frame of multiple tweens. Each tween only has one object and edit multiple frames works on objects, which is why it only affects the first frame of a tween. However, most things you would do with it can be handled using the new model (we’ve found that almost all operations “old school” are negated with the new object-based model). Please let me know what workflow you’re trying to do with Edit Multiple and I’ll try to outline a new-school way of doing it :)

  12. Hello Jen,

    A bit late,
    but Happy Easter :)

    for (1) Yes, I am trying to create a motion tween that will match a frame-by-frame animation(a rendered set of images). I am aware of the vanishing point, I tried to match it as best as I could. Unfortunately I cannot link to the animation I need to ‘trace’, but it’s simple enough: a clip fading and moving in a spiral motion (Z included). It could be done easily in 2D, using scale as Z, but later the same clip will need to rotate on its X axis. I’ve placed a simple tween here to illustrate the idea: http://disturbmedia.com/george/tests/planeSpiralTest.html

    for (2) Snapping is off (CMD + /) to check all snap options. Here’s a short video of what my problem is:
    http://www.screencast.com/users/orgicus/folders/Jing/media/f036ccb4-376e-40bd-a840-e1f399d0f43e

    Don’t know where that snapping is from, suspecting is something going wrong with the cs4 tween interpolation,but not sure if it’s a bug, or I’m just not doing things the right way(in the right order). There’s seems to be a lot of planning involved with these new tweens.

    This post explains scaling and moving the new motion tweens :D so that should do most of the things done by Edit Multiple frame I guess. Not sure what I’m doing wrong, but in some cases onion skinning doesn’t work, video link here:
    http://www.screencast.com/users/orgicus/folders/Jing/media/ce026fbf-a580-401c-b0ed-c4458ed33365

    Thanks for the help!

    • @George: If you can get things to work with 2D, you might want to go with that and then split the span and make the second half 3D (the part that needs to rotate in 3D). For the jerkiness, it could be because the keyframes on eased properties don’t go to the end of the span?

      With the snapping thing, it looks like you have ease applied there – if you turn off ease, I would suspect the behavior would stop. When you add easing, there’s math adjusting the tweens while you edit them which can explain “unexpected” behavior on the Stage. You drag something, and then Math says “ok, then the animation with the ease needs to be interpolated like this” and the object will move to where it needs to be. You may want to turn off easing, make your adjustment, and then turn easing back on. Or, you may want to do edits in the Motion Editor, as the dotted graph will update to show you the “real” value.

      As for the onion skin, I wouldn’t be able to tell or get this fixed without the file unfortunately. Maybe there’s some magic combination of ease and 3D that causes the stage not to update correctly…

      Thanks for the info! Sorry for the delay, this particular comment was in the moderation queue and I missed it until logging in for a long overdue post :(

  13. Hi Jen,

    Thanks for the help. Did the first part 2D and the second part 3D, worked great!

    About the snapping, what I did was this:
    – match the keyframes to the traced material
    – smooth out the path
    – apply easing
    – try to get the keyframes close to the traced material, now with easing applied.
    Thanks for explaining how the easing works. If I turn off easing and make adjustments, then re-apply the ease, then wouldn’t the easing affect the adjustments ? At the moment the tweens are ‘close’ enough. They have the right feel to them(right easing, depth, similar position), so I might leave it like that. Since it’s animation, I doubt pixel perfect matching will be visible anyway.

    I’m afraid I have another trick question that hopefully you can direct to John Mayhew. It would be amazing if I could access the 3D properties of a clip from JSFL. The problem is once a clip goes into ‘3d mode’, properties like x and y become useless.
    Also, using fl.getDocumentDOM().translate3DSelection(); returns nothing, although I wished it would return the new position. In the timeline context menu there is a CopyProperties/PasteProperties. I’m curious where the clipboard for that is stored, or how I can access it.
    A slightly more details version of this question is posted here:
    http://stackoverflow.com/questions/2629871/how-can-i-retrieve-a-movieclip-3d-position-via-jsfl

    I imagine things are busy so no worries :)

    Once again, thank you for all the help!

    All the best,
    George

    • Yes, easing will change the values (dragging on stage, or after applying it). However, what may help for your animation is to use the “snapping” feature in the custom ease graph. (Apologize if this has already been mentioned – I may be forgetting!) Anyway, you would create the custom ease for that animation setting the keyframes in the ease for each keyframe in the animation. Drag the keyframes in the custom ease so they “snap”, which will set the correct value for the animation so it hits exactly (the ease passes through the tween value). Therefore, there won’t be deviation from the values you set up in the tween (it wont affect your adjustments). If you change the tween, you may need to resnap/adjust the ease keyframes. Home that makes sense.

      Regarding the 3D properties+JSFL, I’m not sure off the top of my head. Mayhew has left Adobe, so I’ll have to ask around a bit and hope I’ll find an answer :) This may sound pretty weird, but I know Justin Putney has played a lot with JSFL and may have experimented in this area.

  14. Hi Jen,

    Thank you for the “snapping” solutions :)

    I have also contacted Justin. It seems to be a pretty tricky question.
    For now I’ve added a request using the form on the Adobe website(https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform)
    Either the updated position would be returned when using fl.getDocumentDOM().translate3DSelection()
    or jsfl access for the clipboard used by Copy Properties/Paste Properties would be some nice solutions.

    Thanks again,
    George

  15. I understand that developing new animation techniques can be difficult.
    But it’s 2011 and Flash CS5 now…

    -I still can’t find a simple enough way to select multiple key frames & tweens on a timeline and scale them uniformly.

    I always speak for the new tween style but
    I find most people I talk to just stay using classic tweens because they are quicker to work with and don’t bug out.

    How is this addressed?

  16. Please help. I can’t seem to find an answer anywhere. I have a problem with the motion tween not being published. For example, in the flash cs3 which I use, it looks perfect on the time line but in the preview or when I publish it looks like this:
    http://walthamcottage.com/walthamcottage.html
    The text on the card is supposed to tween over to the left like the card itself does. I have made the text a symbol, but it still won’t publish or preview correctly.
    I can’t seem to get any support or answers about this anywhere??? Please help.

  17. Hi, Guys
    i got 3 buttons and i am trying to 3D ratate them with 120 digrees angle.
    but i cannot get the x and y Axis right can anyone help me ………..please