Flash CC Bone Tool

In the midst of all this Adobe Flash stuff, I thought I would mention a couple of promises that Adobe made...well, you can just read them here: http://forums.adobe.com/message/5667216#5667216.

Many professional animators I know were beyond peeved about some of the missing tools in Flash CC. [Remember, I suggested keeping your Flash CS6 and working in that?] "Updating" to Flash CC was a disaster if you were doing animated Flash work to make a living; there were ways in which the update was similar to someone replacing a carpenter's tool box with a rock and saying: "go hammer in those nails- build a house."

Anyway, I have heard scuttle, which I have yet to verify, that the bone tool and a few other favored tools are back in the CC version of Flash. If this is true, then it may be a good time to switch to the CC "update." I'll let you know what I find out. Details to come in a future post. In the mean time...what I "demo" for you in this blog is in Flash CS6.

Just for fun and inspiration: here is a video clip one of my colleagues provided. It is animated by Humberto Rosa and is just about the most joyous skip animation you have ever seen. (Funny, I always thought he was called Herbert....)

I recommend studying it and then, based on what you see here, create your own skip cycle for one of your own characters. A shorter or longer cycle, delays in other areas, different overlapping: you decide. However, having a good skip cycle on your reel would be great! Just don't copy Humberto's! Study it yes, but make your own. You can see more of Rosa's work here: http://humbertorosa.blogspot.com/

This video has been fixed since I first posted it and now loops a few times, which makes it easier to see the skip.

Motion Tween?!

Hey! this is animation, aren't all tweens about motion? "Of course they are;" is the answer. So, what would have been a better name for this automated form of tweening? It does not really matter. After all, the tool, by any other name, will still work the same. So long as you know what it is called in Flash and how to use it, (and when not to) you'll be in good shape. On we go to motion tweening a bouncing ball.

Note: The AAU Animation Department has a new standard for student work submitted as homework, for show, or for competition:

FILE TYPE: Quicktime (.mov)

CODEC: H.264 or MP4

FRAME RATE: 24fps (not 23.957)

VIDEO RESOLUTION: 1080p resolution (1920x1080)

AUDIO SETTINGS:  Uncompressed or Linear PCM, 16bit, little endian row-order, at 44-48khz.

Quicktime wrappers on all submissions only;  AVIs are not acceptable.

Okay, now on to Motion Tweening...

Start out by opening up a new file with all the correct settings, Action Script 3.0, etc. Remember, if you have set your stage resolution to default to another ratio, it is time to set it to default to 1920 x 1080. Do that before you do anything else. Go to the Properties inspector and set the properties of the stage

If you can't see your whole stage go to View in the main menu bar and choose: Magnification > Fit In Window. In the layer that is available set the duration of this animation by clicking on frame 32 and then choosing Insert from the menu bar, then choose Timeline > Frame.

Set the duration of your animation before starting this tween.

Now, click in frame one, then using the oval tool, make a circle on the stage, somewhere near the bottom left 3-thirds target. (Remember your cinematic screen divisions? If you don't start a dialog here and discuss it with your classmates.) 

With the ball selected convert it to a symbol by clicking on Modify in the menu bar and choosing Convert to Symbol. This creates an image that will be moved by flash to create this animation.

When you get the Convert to Symbol window, name the image something that you will remember. I named mine the obvious "ball," but if you had multiple balls you would need to name this one with a more descriptive name. In this case, maybe "mustard ball." Also note the Registration point– set this for where you want the symbol's registration point to be. In the case of a ball, you would most likely want that to be in the center of the ball, but for something like a snail, you might want the to be at the bottom center or bottom left or right.

Here is where the motion tweening comes in– click on frame one and this selects the symbol of the ball on the stage. Next control–click (right click for PC) anywhere in the frame span and Flash creates a motion tween span for you. [Flash will apply a light blue color to this span to indicate that it is a motion tween– it will always be this color even when not selected: do not confuse it with a set of selected frames.] Nothing will move yet, so you'll need to do some more work.

Next, click on frame 16 and drag the ball selection to the middle of the upper third of the frame. This will create a line with a bunch of dots on it, these represent the frames in the span, with the starting and ending positions marked by squares: this is the motion path. Then, on the timeline, in layer 1, click on frame 32 and drag the selected instance of the symbol on the stage to the lower right 3-thirds target. This creates a similar line between frame 15's instance of the symbol and frame 32's. See the image below.

At this point you may click on the play button if you like, but you will be appalled because the tween is not done yet. Next we will apply a curving path to this motion to give a decent arc to the action. Click hold and drag any box point, a.k.a. control point, to move the entire motion path around on the stage to get your preferred placement. Click on frame one in the layer and then option-click-hold on the control point corresponding to it on the stage and you can move that motion path origin around and place it where you want it. Now try this: click on any other points on this part of the motion path (these are called frame points) and drag the line into a curve for on half of the bounce. Now press play and you'll get an idea of where we are going with this. Once you have enjoyed the resulting weird animation, adjust the other half of the arc for some closer to decent ball bounce action.

Well, it still does not look quite right because the spacing is off. Here is how to begin to make it look pretty good.... Now, click on the motion path on the stage to highlight it and select the entire frame span in the layer, then on the timeline open up the Motion Editor tab– here are some controls. The first thing you will want to do before playing around in here is set the viewable frames to something over the number you have (it will automatically set the number to that of the selected set of frames). See the arrow at the bottom of the image below.

Click on the drop down arrow for the Basic Motion option in the Motion Editor timeline and this will open a graph editor. On the editor the keyframes you set when you were originally dragging around the symbol instances on the stage are now marked by a square. At frame 16 click on and hold the square in the row labeled Y, move it up and down and watch what happens to the shape of the motion path as you do this. Adjust the path to you liking for the Y height. 

Do the same thing you did with Y, with the X graph in the Basic Motion editor. You should play around with these options until you are comfortable with them. (Honestly you could have done this in the first place, but you will get back into this Motion Editor later.) Also play with some of the options to the right of Viewable Frames to see what they do. Remember that you can go to the menu bar in Edit and undo for quite a few steps if you make a mistake and need to get back to where you started.

Now to add some easing.... First deselect the tween span by clicking on the timeline in the blank frames area, then click on frame 17 to select it. With frame 17 selected, go to the main menu bar and choose Modify, then Timeline > Split Motion. This breaks your motion into two halves. 

Click on frame 16 and then shift-click on frame 1 to select the first frame span of your ball bounce. Now go to the Properties inspector and open the Ease drop down menu and click on the blue number 0 and change it to 90. Next, click anywhere in the second frame span of your ball bounce animation and then in the Properties inspector window, in Ease, set that ease to -90. Now play the animation. You will see that the frame points have moved closer together in the middle of the arc; in other words, your spacing has changed. Now you have something that looks more like a proper ball bounce. Once you have seen what this does play around with the settings and see what you can do to manipulate the spacing of your motion tweened animation. 

This all gets easier as you practice with it. Your first ball bounce that is motion tweened will not look nearly as good as the next. Make one that has the spacing and timing you like and save that one. You can even mess around with the symbol and make it look more like a ball and try out the 3D effects or gradients in the tools menu; make it fancy. Regardless, save the file because next time we will play with the shape tweening options.