Charlene's Drawing Board

~~Charlene Russ, The Artist Edge

Creating Arrows in Flash

Drawing Phase

I recommend that you read and/or print out this entire tutorial prior to animation.

Layer 1:

Step 1) Open a new file in Flash and then click the line tool. Step 2) With the line tool selected, expand or open the properties box. Select the width of your line. (i.e. 2.75 pixels) Step 3) Begin drawing your arrow bar line segment on the stage, and watch the timeline. (The empty circle on the timeline will become opaque indicating that there is now something in that keyframe.) Keep the line short for now. Step 4) After you've drawn your line, right click on the timeline about 5 key frames away from where you created your first line. You should be right clicking on keyframe # 5. Select Add keyframe. Step 5) Draw an extension onto the first line segment or use the scale tool to expand the width or height, depending upon which direction you've drawn your line. Repeat Step 4 and 5 until your line is complete. (Please note: This tutorial is geared toward 'shape' tweening, so keep the distance between new keyframes short, otherwise your line may become distorted.)

Layer 2:

Step 1) Right click the layer portion of the timeline and select 'add new layer'. (This new layer should stack atop the previous layer.)

Step 2) The new layer should have an equal number of keyframes as layer 1 for purposes of synchronization. Right click on the time line and create a new keyframe at the very end of layer 2. (The last keyframe on layer 2 should be directly parallel to layer 1.)

Step 3) With the layer 2 keyframe selected, draw your arrow pointer using the line tool. This should be placed at the very end of your line shape drawn in the corresponding keyframe on Layer 1.

Step 4) Right click about 5 keyframes prior to the last keyframe on Layer 2, and 'add a new keyframe'. Place a small white dot using the paintbrush tool, in the same area as your arrow pointer on the last keyframe of Layer 2. (For this exercise I am assuming that your movie background color is set to the default 'white'.)

Okay! The hard part is done, now you can add in your shape tweens! For layer 1, shape tweens are added to the first keyframe and continued throughout to the end of the time line. For layer 2, you only need one shape tween, which will be added to the keyframe where you have placed your tiny white dot. Click the frame window on the timeline, highlight the properties window and open the tween drop down box. Change 'none' to 'shape'.

<<<back to contents

Charlene Russ is an instructor with Eclectic Academy, and is currently teaching Introduction to 3D Studio Max.  She teaches novice students the basics of 3D design and modeling techniques.  She is also an adjunct instructor with a Florida community college in the Digital Arts dept.  Charlene's personal site is Chromacrys Media: Graphic Design, which features a wide gamut of useful design related information.