Home :: Speedlines Arm

Speedlines Arm

Animating arm movements using speed lines

Click here to download a FREE Flash .fla with different speed line art to use in your own animations!

When objects travel quickly, they become blurry or distorted in their appearance. In animation using speed lines can help achieve this look.
If you want your character to move fast, you can use these speed lines as an easy way to get your character into a shot quickly. Also, they are great to use on arms and legs, as an easy way to move a limb from one pose to another without having to draw the limb moving in perspective.

Other speed line examples:
Darth Vader raising arm
Jedi's quickly grabbing Lightsabers

Animating a character raising his arm
For example if you want a characters arm to raise up quickly from a still position, all you need is two arm positions and the blurred speed lines in between.

Start out with the first arm symbol, making sure that its pivot point is anchored at the shoulder (see pivot tutorial).

Further down the timeline put in your second arm pose, again making sure the pivot point is anchored at the shoulder as well.

First arm pose symbol with anchor point where the arm will be pivoting from.

Second symbol further down the timeline also with anchor point at shoulder.

Add a blank keyframe in between the two arm poses and turn your onion skinning on so that you can see the key poses on either side of the blank keyframe.

This is where you will place your blurred artwork. An important thing to note is that having your objects move on arcs is crucial. Having the onion skinning on helps you to see where curve of the arc should follow. If you are drawing your own speed lines, draw the speed lines curve to stop and start within the positions of the keys. Don't let your speed lines extend past the key they are coming out of or going into. If you are using the free speed lines from the fla you can download here, scale or skew the symbol to fit accordingly.

Blank key frame in between the two key frames is where the speed lines will go.

With onion skinning on, add in speed lines. Make sure they follow an arc.

This effect works best when the colors in the speed lines are the same as the art in the key frames. Again, if you are using the speed lines provided here, simply drop in the colors you need into the art in the symbol by using the bucket tool (K).

Taking advantage of symbols
The next thing to do is to have the first symbol of the arm, slowly come out of it's position and speed up into the speed line art. This will give the arm a sense of natural movement as if it is gaining speed to rise up. This is done easily by setting an additional key frame for the first arm a few frames away. Once the second key frame is set, rotate the symbol upwards. You don't need to rotate it too far in order for the effect to work.

Add an additional key frame for the first symbol and rotate it upwards slightly.

Now that the key frames are set you need to motion tween it by clicking anywhere in between the two key frames and choosing "motion" in the Tween drop down menu. Now you will want to change the easing by sliding the bar down to "-100". This will make the tweeing start slowly and pick up speed.

Add motion tweeing between the first two key frames and set the easing to "-100", so that the movement of the arm starts out slowly and gains speed.

You'll want to do the same thing on the opposite end of the animation by adding an additional key frame to the last symbol, but this time having the tweening slow down into the last position. Set your motion tweening to "100".

Add another key frame for the last symbol, and rotate it slightly upward.

Add motion tweeing between the last two key frames and set the easing to "100", so that the movement of the arm slows down into a cushioned stop.

If you are animating at 12 frames per second, it's best to only have the speed lines on for 1 frame. If you are animating at 24 frames per second or higher, allow the speed lines to be on for two frames. The secret to getting this effect to work right, is to only have the blurred action felt, rather than seen in full detail. This is achieved best by only having it on briefly.

If you don't want to draw your own speed lines, you can download a FREE .fla full of different symbols of speed lines here!

You can purchase the Character Pack used in this tutorial here:
"Alan" Flash Character Pack