Skip navigation
KStenny
Currently Being Moderated

Motion tweening a frame-by-frame animation

Dec 28, 2013 3:25 PM

Tags: #help #animation #motion_tweens #frame_by_frame_animation

Hello,

I am an experienced animator who is new to using Flash. I need to know how to add a motion tween to an animation that I already made frame-by-frame. The animation will be of a fish blinking as it swims across the stage. I already created the frame animation of the fish blinking, but now I want to motion tween the whole animation (not just one frame) across the stage. However, I cannot figure out how to do this. Is there a way to create a simple animation that uses frame-by-frame animation and motion tweens simultaneously?

 
Replies
  • Currently Being Moderated
    Dec 28, 2013 5:08 PM   in reply to KStenny

    If you have already made the frame by frame animation on the main timeline, then you'll need to copy the frames (not the content on the stage, but the frames themselves on all layers in the timeline view) and paste them into the timeline of a new library symbol (new MovieClip) named something like "BlinkingFish".  You can then return to the main timeline (or another new library symbol), drag the "BlinkingFish" symbol onto the stage, and then animate that symbol.  While animating the symbol in the designer, the nested timeline in the "BlinkingFish" symbol will not play while animating the symbol, but it will play at runtime when you compile the clip.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 28, 2013 6:51 PM   in reply to KStenny

    Unfortunately, Adobe let (character) animators down by not developing any of Flash's animation tools since v8 - quite the contrary, the latest incarnation, CC, removed a lot of (quite essential) animation functionality. No more bones (yikes!) or motion curves control.

     

    A shame, because once Flash was the industry standard app for tv show animation. Not so anymore, though: Adobe dropped the ball in that regard, and mostly focuses on web/mobile apps and games development currently.

     

    There are two options:

     

    1) use animator-oriented alternatives like Toonboom and/or Anime Studio Pro (both of which export to flash movies);

     

    2) download a bunch of plugins, and extend Flash so that its workflow becomes more animator friendly.

     

    If you are just starting out, I would probably advise you to have at least a cursory look at the alternatives. However, having said all that, Flash can still be an enjoyable environment to animate in, IF you extend it a bit. Unfortunately some workflow may not be CC friendly anymore at this point due to the missing (almost essential) functionality compared to CS6 - you may prefer to work in CS6, depending.

     

    These will help you extend Flash to become a bit more animator friendly:

    http://cloudkid.com/tools

    http://flash-powertools.com/

     

    For example, Keyframe Caddy would solve your problem animating an eye by keyframing it in a symbol.

    The guys at flash-powertools created a character animation workflow you may like, which addresses the deficiences of Flash for professional level character animation. They have some nice templates and example character files for you to examine.

     

    A word of warning: character animation in Flash can become somewhat technical and daunting - in that case a tool like Anime Studio with excellent and easy to use bone tools and proper real(!) animation curves can be truly helpful. These can then be imported into Flash, and edited. Also, both AS and TB have a "real" virtual 3d camera of the scene that makes it easy to create parallax scrolling backgrounds and zoom in/out panning effects.

     

    Anyway, this is how you would do it in Flash:

    1) install Keyframe Caddy

    2) draw your fish in a cutout-fashion (seperate eye).

    3) convert all the fish elements to a graphic symbol (F8)

    4) double-click the fish symbol

    5) select the eye, and convert to a graphic symbol again

    6) add different drawings for the eye blinking

    7) return to the main stage

     

    Now you can start animating the fish:

     

    1) first animate the entire character moving

    2) then after you finish the overall movement, move to the frame you wish to change the eye

    3) double-click the fish character, and select the eye

    4) in KeyFrame Caddy click "load thumbnails". This should load up all the different frames (drawings/states) for that graphic symbol and display them all in the KeyFrame Caddy window

    5) now simply click on the required eye state, and KeyFrame Caddy will automatically create a keyframe for that state.

    6) move the timeline scrubber to the next frame you wish to keyframe eye movement

    7) click on the required eye state in the KeyFrame Caddy window.

     

    ...and so on! You may have to switch between the main scene and the fish symbol

     

    Make certain the lengths of both timelines are identical, otherwise the eye animation will start to repeat if it is shorter than the main timeline. Inversely, if the main timeline is shorter than the eye animation, the eye animation will obviously not be able to run completely through.

     

    One more thing: keep an eye out on the graphic symbol's looping in the properties - you may want to set it to either play once or looping (or even single frame).

     

    For more info on graphic symbols, read this:

    http://dev.tutsplus.com/articles/flashs-underrated-graphic-symbol--act ive-9964

     

    Also check out those two sites' other tools. And check out the workflow on the electric Dreams website. Hope this helps a bit.

     

     

     

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points