Flash Tutorial: The Pen Tool

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Free Flash Tutorial - The Pen Tool

 

Free Flash Tutorial

 


 

The Pen Tool is fundamental to any graphics program, including Flash. Mastering this tool will give you a firm grasp on drawing custom objects and editing existing shapes, which is a skill that will serve you well as long as you use graphic type programs. It is not an easy tool to learn but the control that you achieve when you have mastered the technique are well worth the effort. What's more Adobe has standardized the Pen Tool and since the introduction of CS3 the Pen Tool is identical in Flash, Illustrator and PhotoShop.

 

In fact all graphics programs have an equivalent to the Pen Tool (even if they use different names) and the principles are always the same, irrespective of the program. The Pen Tool is of primary importance in graphic programs and has not changed since the earliest version of programs like Illustrator.

In the Flash CS3 Tool Panel there are a group of Tools used in conjunction with the Pen Tool:

 


Group of Pen Tools.

In the next few tutorials I will cover the Pen Tool and the other tools grouped with the Pen on the Tool Panel.. I will also look at the Subselection Tool . This is a selection/editing tool and goes hand in hand with the Pen Tool.

Illustrator & PhotoShop: You will notice that all the same tools are present in these programs:

 

 
Illustrator CS3 Tools.   PhotoShop CS3 Tools.

The PhotoShop group includes an extra tool, the Freeform Pen Tool. This is the equivalent to the Pencil Tool in Flash or Illustrator.

The Subselection Tool is called the Direct Selection Tool in Illustrator and PhotoShop:


Direct Selection Tool as seen in Illustrator CS3.

The Pen Tool is not intuitive. You cannot draw like you would with the Pencil Tool or paint like you would with the Brush Tool. The Pen Tool is a computer invention and bares no resemblance to a real pen. It has been designed to make the Mouse an accurate drawing tool, which it does very well. To master the Pen Tool you need to understand how Flash (or other graphics programs) make shapes through the use of vectors.

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

 


Step One: Understanding Vectors

 

A vector type image is a group of shapes that are defined mathematically by a series of lines and curves. Vector type images tend to make small files (as in KB or MB). Flash uses vectors because the files sizes are small so the files download quickly. Because the image is stored mathematically the width and height size of an image is not important. You can enlarge a vector image and there is no loss of image quality and even though an image may look bigger in width and height the electronic file size (in KB) remains unchanged!!

Note: Computers use two types of images: Bitmap and Vector.

When you draw in Flash the program creates a vector image. A vector image is a computer image that uses a Wire Frame or Outlines to define a shape's area. A vector image is drawn in lines called Paths.

  1. Select the: Brush Tool
  2. Paint a squiggly: Line

  3. Standard shape created in Flash with the Brush Tool.

  4. Switch on the Show Layer as Outlines: View > Preview Mode > Outlines (Ctrl Alt Shift O)

  5. Outline of the shape. This is called the Path.

    This Path is the shape that you would need to draw to get the same effect with the Pen Tool . This path is made up of several sections linked by Anchor Points. The Path is a type of shape that is used to help create and edit shapes, is not something that is visible in the Final Flash Movie.

    Note: Your Path may not be green. The colour comes form the Layer colour as seen in the Timeline. A Layer can have any colour:

  6. Select the: Subselection Tool
  7. To see the Anchor Points click on the green: Path

  8. Anchor Points are the small squares.

    There are three different types of Anchor Points.

    Note: Anchor Points are never visible in the final Flash Movie, they are only visible whilst editing in Flash.

  9. To see the different type of lines select the: Pencil Tool
  10. In the Pencil Mode Options select: Smooth
  11. Draw a: Line

  12. A simple line drawn with the Pencil Tool (your line will look different).

  13. Select the: Subselection Tool
  14. To see the Anchor Points click on the green: Path
  15. Anchor Points:

  16. To view the Direction Lines drag right over the line: Select Anchor Points
  17. When the Anchor Points are visible the Direction Lines and Direction Points become Visible:

    Tip: To see the Direction Lines make sure you drag from right outside the line and release only when you have got beyond the other side.

    Note: The Direction Lines and Points effect the direction of the Path as it goes through the Anchor Point. You will notice that some Anchor Points have two Direction Points, some one and others none. I will explain the reason for this later.

    Like Anchor Points, Direction Lines and Points are never visible in the final Flash Movie.

    The Pen Tool and Vectors
    When you draw with the Pen Tool you do not follow the line of the Path but lay down the individual Anchor Points, drag out the Direction Lines and Drop the Direction Points. Of course when you drawing you cannot see Anchor Points, Direction Lines or Points as they are abstract mathematical concepts. What is surprising is that once you understand them, drawing with the Pen Tool gives you so much more control.

    Other Vector Shapes
    There are other uses for this type of technology. For example here is what a word looks like when it is broken down into its Paths and Anchors:


    The Paths and Anchors as seen in letters.

    Clip Art is usually created with Vector images. You can import Clip Art and edit them in Flash
    Logos are usually made of Vector files can be enlarged to any size without loss of image quality.
    Graphic Programs like Illustrator and CorelDraw save their images as Vector
    3D Rendering programs use Wire Frame or Vector type of images.

  18. Don't forget to turn Outline Mode off: View > Preview Mode > Full


Step Two: Drawing Straight Lines with the Pen Tool.

The Pen Tool is not intuitive. You do not draw the line but the Anchors and direction Points as described in the previous section. Because this is a bit different I will take you through the use of the Pen Tool very slowly step by step.

    Important Note: This tutorial has been written for Flash CS3 but you will find that the Pen Tool is very similar in previous versions. I will point out important differences. You can find out what version of Flash you are using by going to: Help > About Flash

  1. Open a New Flash Document: File > New (Ctrl N)
  2. Select a Flash Document: Flash File Flash File (ActionScript 2.0) or (ActionScript 3.0)
  3. Click: OK

  4. In the Tools Panel Select the: Pen Tool:
  5. To draw a straight line place the Pen Tool on the Stage: Click (No dragging!)
  6. Move the Mouse to a new location: Move Mouse (No dragging!)
  7. To place the 2nd Anchor Point click the Pen Tool on the Stage: Click (No dragging!)
  8. Example: Download the Flash Drawing Template  Draw 224a  (Straight Lines)

  9. Continue Clicking to add additional Anchor Points: Click, Move & Click Again (No dragging!)
  10. If you keep clicking you will continue adding new line segments:


    Additional Segments.

    Note: To constrain the path to vertical, horizontal and 45 degree angles, hold down the Shift Key when clicking (except when using Snap to Grid).

  11. To finish the line hold the Control Key and Click in an empty space on the Stage: Ctrl Click
  12. To restart a new line release the Control Key and: Click, Move & Click etc. (No dragging!)

  13. Try to draw a: Zigzag
  14. Tip: To get it exact try using Snap to Grid

    1. Display Grid: View > Grid > Show Grid (Ctrl #)
    2. Set the Grid to Snap: View > Snapping > Snap to Grid (Ctrl Alt #)
  15. To finish: Ctrl Click

    Flash CS3 Tip: If you forget to Control Click to complete the line you will inadvertently add another section on to your previous line. Don't worry (I still make this error!) there is a simple solution. Simply press the Delete Key and the last section of your line will be deleted leaving the all the previous sections in tact. Try it.

    Flash CS3 Tip: Also if you click in the wrong place press delete and re-click in the correct location. You will find the new segment attaches to the previous line segment.


Step Three: Drawing a Rectangle

All the previous shapes are open (they have two end points). Now I will show you how to create a rectangle, which is a closed shape.

Example: Download the Flash Drawing Template  Draw 224b  (Closed Shapes)

  1. Display Grid: View > Grid > Show Grid (Ctrl #)
  2. Set the Grid to Snap: View > Snapping > Snap to Grid (Ctrl Alt #)

  3. Move the Mouse to the start location: Click
  4. To place the 2nd Anchor Point move the Mouse to a new location: Click
  5. To place the 3rd and 4th Anchor Point: Click, Move & Click
  6. Hover your Cursor close to the first Anchor: Hover Over Anchor 1
  7. Before closing the rectangle hover over the first Anchor and look for the little circle that appears just to the bottom right of the Pen Icon. If you can see the circle you are in the correct position to close the shape:

  8. Click over the starting Anchor to close: Click over Anchor 1

  9. To finish the line: Ctrl Click

  10. Turn off the snap to grid: View > Snapping > Snap to Grid (Ctrl Alt #)
  11. Turn off the display grid: View > Grid > Show Grid (Ctrl #)


Step Four: Drawing a Simple Curve

Curves are a little more of a challenge than straight lines but as long as you remember that you are placing anchor points and not drawing curves you will be ok. With curves, instead of clicking, you click, hold and drag out a direction handle to define the path of a curve. In the arc below, the arrow indicates where the direction handle is going as well as your path.

Example: Download the Flash Drawing Template  Draw 224c  (Simple Curves)

  1. Select the: Pen Tool
  2. To start the curve: Click & Hold
  3. To pull out the Direction Line: Drag
  4. To drop the Direction Point: Release
  5. To get ready to place a second anchor point: Move the Pen (Do not drag!)
  6. To continue the curve: Click & Hold
  7. To pull out the Direction Line: Drag
  8. To drop the Direction Point: Release
  9. To finish the line: Ctrl Click

    Suggestion: Before moving on I would suggest that you try drawing several other curves. Here are some more that you might want to try.

     



Step Five: Drawing an Ellipse

By now you should be able to draw almost anything, but I think that it is worthwhile giving you just a few more samples.

Example: Download the Flash Drawing Template  Draw 224d  (Ellipse)

Drawing an Ellipse. Select the: Pen Tool

  1. Click and hold onto: Point 1
  2. Shift Drag to and release at: Point 2
  3. Click and hold onto: Point 3
  4. Shift Drag to and release at: Point 4
  5. Click and hold onto: Point 5
  6. Shift Drag to and release at: Point 6



    To finish the ellipse: Ctrl Click


Step Six: Drawing Continuous Constrained Curves

Drawing continuous curves is just a series of click, hold, drag, release and move to new point etc. Use the Shift Key to constrain the curve to the vertical, horizontal or at an angle of 45°.

    Example: Download the Flash Drawing Template  Draw 224e  (Constrained Curves)

  1. With the Pen Tool click and hold onto: Point 1
  2. Shift drag and release at: Point 2
  3. Click and hold onto: Point 3
  4. Shift drag and then release at: Point 4

  5. Click and hold onto: Point 5
  6. Shift drag and then release at: Point 6
  7. Click and hold onto: Point 7
  8. Shift drag and then release at: Point 8
  9. Click and hold onto: Point 9
  10. Shift drag and then release at: Point 10

  11. To finish the line: Ctrl Click


Step Seven: Drawing Continuous Unconstrained Curves

This is simply a series of curves that go in any direction. As long as you remember that you are placing the anchor points and dragging out the direction handles this type of curve is easy.

    Example: Download the Flash Drawing Template  Draw 224f  (Unconstrained Curves)

  1. With the Pen Tool click on click and hold onto: Point 1
  2. Drag to and release at: Point 2
  3. Click and hold onto: Point 3
  4. Drag to and release at: Point 4

  5. Click and hold onto: Point 5
  6. Drag to and release at: Point 6
  7. Click and hold onto: Point 7
  8. Drag to and release at: Point 8
  9. To finish the line: Ctrl Click
  10. Suggestion: Keep practicing until you feel comfortable with this technique.


Step Eight: Drawing Curves with Uneven Direction Handles
- Techniques Introduced in Flash CS3

In the previous section you created curves that were smooth. In this section you will learn how to create curves that have sharp corners rather than smooth corners:

Important Note: The technique described here were introduced in Flash CS3 and will not work in earlier versions!!

The difference is in the direction handles:

In the smooth curve the direction handles are the same length on both sides of the anchor point:

Direction Handles are an even length.

 

With the sharper cornered curve the direction handles are not the same length:

Direction Handles are uneven lengths.

    Example: Download the Flash Drawing Template  Draw 224g  (Uneven Direction Handles)

  1. With the Pen Tool click on click and hold onto: Point 1
  2. Drag to and release at: Point 2
  3. Click and hold onto: Point 3
  4. Drag to and release at: Point 4

    The Direction Handles are still the same length.

    In this next stage you will need to hover your cursor over Point 3 so that you can see the little Convert Icon (an upside down V shape: ) just to the right side of the Pen Tool:

    Note: This convert option is not available in Flash before version CS3

  5. Hover your Pen Tool over: Point 3
    Click
    and hold onto: Point 3
    Drag to and release at: Point 5

    Note: If you change the angle of the Direction Line the arc will change too:

    This is not what I am wanting you to do, I simply want you to change length of the Direction Line:

    If you change the length of the Direction Line you will not see any change. This is because this length is associated with the next section of the curve that you have yet to draw! So you cannot actually see what you are doing! So you have to guess! What you will need to remember is:

    • Short Direction Lines create sharp corners
    • Long Direction Lines create smooth corners
  6. Click and hold onto: Point 6
  7. Drag to and release at: Point 7
  8. Click and hold onto: Point 6
    Drag to and release at: Point 8
  9. Click and hold onto: Point 9
  10. Drag to and release at: Point 10
  11. Click and hold onto: Point 9
    Drag to and release at: Point 11
  12. This time the Direction Handle is dragged further away from the original position:

  13. Click and hold onto: Point 12
  14. Drag to and release at: Point 13
  15. To finish the line: Ctrl Click


Step Nine: Drawing Curves with Angled Direction Handles - Techniques Introduced in Flash CS3

Just when you thought you knew how to draw curves with sharp corners I come back with even sharper corners! Why? Because the technique that I am about to show you is actually quite different to what I showed you in the previous section and the one thing the Pen Tool offers is flexibility. With the Pen Tool it is possible to draw any shape you can think of. This amazing flexibility and accuracy come at a price and that is it that the Pen Tool has many options! But you have nearly covered them all.

Important Note: The technique described here were introduced in Flash CS3 and will not work in earlier versions!!


A curve with sharp peaks.

So what is different. In all the previous curves the direction handles are cut through the curve like a tangent.


Direction Lines on smooth curves cut through in a tangent to the curve.

What you are going to learn now is how to create direction handles that are not in tangent and each individual direction line moves off in different directions, which makes the curve move off in different directions.


Each Direction Line moves in a different direction.

    Example: Download the Flash Drawing Template  Draw 224h  (Angled Direction Handles)

  1. With the Pen Tool click on click and hold onto: Point 1
  2. Drag to and release at: Point 2
  3. Click and hold onto: Point 3
  4. Drag to and release at: Point 4
  5. Hold down the: Alt Key (The cursor will change to the Convert Tool: )
    Grab
    hold of the handle at: Point 4
    Drag
    down to: Point 5
    Release the: Mouse
    Release
    the: Alt Key
  6. Note: Holding the Alt Key temporarily changes the cursor from the Pen to the Convert Tool:
    This convert option is not available in Flash before version CS3.

    When you move the Direction Handle down to point 5 there is no change to the shape of the existing curve. This is because this handle effects the direction of the next segment of the curve, the bit you are about to draw.

    Tip: The Pen has many functions and you will notice that the screen icon changes depending on what you are about to do. So keep a close eye on the Pen's cursor. This was you are less likely to forget to let go of the Alt Key!

  7. Click and hold onto: Point 6
  8. Drag to and release at: Point 7
  9. Hold down the: Alt Key
    Grab
    hold of the handle at: Point 7
    Drag
    down to: Point 8
    Release the: Mouse
    Release
    the: Alt Key
  10. Click and hold onto: Point 9
  11. Drag to and release at: Point 10
  12. Hold down the: Alt Key
    Grab
    hold of the handle at: Point 10
    Drag
    down to: Point 11
    Release the: Mouse
    Release
    the: Alt Key
  13. Click and hold onto: Point 12
  14. Drag to and release at: Point 13
  15. To finish the line: Ctrl Click

    Suggestion: Try drawing the line with the bumps at the top:


Step Ten: Drawing Basic Shapes - All versions of Flash

What is surprising is that all drawings are made of a few basic shapes! In this section I will show you the types of shapes that can be drawn with all versions of Flash. In each instance I will give you an example of a line with two Segments and three Anchor Points.

Example: Download the Flash Drawing Template  Draw 224i  (Basic Shapes 10a to 10c)


Step 10a  Straight Line to Straight Line

Select the: Pen Tool

  1. Click at: Point 1
  2. Click at: Point 2
  3. Click at: Point 3



    To finish the line: Ctrl Click


Step 10b  Curve to Curve - Two Direction Points

  1. Click at: Point 1
  2. Click and hold onto: Point 2
  3. Drag to and release at: Point 3
  4. Click at: Point 4



    To finish the line: Ctrl Click


Step 10c  Curve to Curve
- Six Direction Points

  1. Click and hold onto: Point 1
  2. Drag to and release at: Point 2
  3. Click and hold onto: Point 3
  4. Drag to and release at: Point 4
  5. Click and hold onto: Point 5

Drag to and release at: Point 6



To finish the line: Ctrl Click


Note:
In the next group of shapes notice how a straight line turns into a curve and a curve turns into a straight line:

Example: Download the Flash Drawing Template  Draw 224j  (10d & 10e)


Step 10d  Straight Line to Curve
- Two Direction Point

  1. Click at: Point 1
  2. Click at: Point 2
  3. Click and hold onto: Point 3
  4. Drag to and release at: Point 4



    To finish the line: Ctrl Click


Step 10e  Curve to Straight Line
- Two Direction Point

  1. Click and hold onto: Point 1
  2. Drag to and release at: Point 2
  3. Click at: Point 3
  4. Click at: Point 4



    To finish the line: Ctrl Click

     

    Important Note: The rest of this tutorial is focused on the additions that were introduced with Flash CS3. If you are using an earlier version of Flash you could continue this tutorial by using any version of Adobe Illustrator to practice the techniques discussed.


Step Eleven: Drawing Basic Shapes -
 Techniques Introduced in Flash CS3

What this section will show you is show you just how much more flexible the Pen tool is in Flash CS3. Theoretically once you can draw basic shapes you can draw anything. It is really worth the effort as you will be able to use these skills in other graphics programs. In each instance I will give you an example of a line with two Segments and three Anchor Points. I would like you to think about how a line changes as it goes through the central Anchor Point. For example how a straight line changes in to a curve or visa versa. Try and draw the following shapes:

Important Note: This section is not applicable to versions prior to Flash CS3.

Example: Download the Flash Drawing Template  Draw 224k  (11a & 11b)

Step 11a  Straight Line to Curve - One Direction Point

Select the: Pen Tool

  1. Click on: Point 1
  2. Click on: Point 2
    Release
    the: Mouse
    Hover
    over point 2 until you see the small Convert Icon next to the Pen Cursor:
    Click and hold onto: Point 2
  3. Drag to and release at: Point 3
  4. Click at: Point 4




    To finish the line: Ctrl Click


Step 11b  Curve to Straight Line
- One Direction Point

  1. Click on: Point 1
  2. Click and hold onto: Point 2
  3. Drag to and release at: Point 3
    Hover over point 2 until you see the small Convert Icon next to the Pen Cursor:
    Click on: Point 2
  4. Click at: Point 4




    To finish the line: Ctrl Click


Step 11c  Straight Line to Curve -
Three Direction Points

Example: Download the Flash Drawing Template  Draw 224l  (11c & 11d)

  1. Click on: Point 1
  2. Click on: Point 2
    Release
    the: Mouse
    Hover
    over point 2 until you see the Convert Icon:
    Click and hold onto: Point 2
  3. Drag to and release at: Point 3
  4. Click and hold onto: Point 4
  5. Drag to and release at: Point 5



    To finish the line: Ctrl Click


Step 11d  Curve to Straight Line - Three Direction Points

  1. Click and hold onto: Point 1
  2. Drag to and release at: Point 2
  3. Click and hold onto: Point 3
  4. Drag to and release at: Point 4
    Release the: Mouse
    Hover
    over point 3 until you see the Convert Icon:
    Click on: Point 3 (This will delete the Direction Point at point 4)
  5. Click on: Point 5



    To finish the line: Ctrl Click


Step 11e  Curve to Curve - Uneven Direction Points

Example: Download the Flash Drawing Template  Draw 224m  (11e & 11f)

  1. Click and hold onto: Point 1
  2. Drag to and release at: Point 2
  3. Click and hold onto: Point 3
  4. Drag to and release at: Point 4
  5. Hold down the: Alt Key
    Grab
    hold of the direction handle at: Point 4
    Drag
    down to: Point 5
    Release the: Mouse
    Release
    the: Alt Key
  6. Click and hold onto: Point 6
  7. Drag to and release at: Point 7



    To finish the line: Ctrl Click


Step 11f  Curve to Curve - Uneven Direction Points

  1. Click and hold onto: Point 1
  2. Drag to and release at: Point 2
  3. Click and hold onto: Point 3
  4. Drag to and release at: Point 4
  5. Hold down the: Alt Key
    Grab
    hold of the direction handle at: Point 4
    Drag
    up to: Point 5
    Release the: Mouse
    Release
    the: Alt Key
  6. Click and hold onto: Point 6
  7. Drag to and release at: Point 7



    To finish the line: Ctrl Click


Step 11g  Curve to Curve - Angled Direction Points

Example: Download the Flash Drawing Template  Draw 224n  (11g)

  1. Click and hold onto: Point 1
  2. Drag to and release at: Point 2
  3. Click and hold onto: Point 3
  4. Drag to and release at: Point 4
  5. Hold down the: Alt Key (The cursor will change to the Convert Tool: )
    Grab
    hold of the handle at: Point 4
    Drag
    down to: Point 5
    Release the: Mouse
    Release
    the: Alt Key
  6. Click and hold onto: Point 6
  7. Drag to and release at: Point 7



    To finish the line: Ctrl Click


Step Twelve: Drawing a Heart - Techniques Introduced in Flash CS3

Drawing a heart starts to get a little more complex, but you should know all the techniques to do this.

Example: Download the Flash Drawing Template  Draw 224o  (Heart)

Drawing a Heart. Select the: Pen Tool

  1. Click and hold onto: Point 1
  2. Drag to and release at: Point 2
  3. Click and hold onto: Point 3
  4. Drag to and release at: Point 4
  5. Click and hold onto: Point 5
  6. Drag to and release at: Point 6
  7. Hold down the: Alt Key (The cursor will change to the Convert Tool: )
    Grab
    hold of the handle at: Point 6
    Drag
    down to: Point 7
    Release the: Mouse
    Release
    the: Alt Key
  8. Click and hold onto: Point 8
  9. Drag to and release at: Point 9
  10. Click and hold onto: Point 10
  11. Drag to and release at: Point 11



    To finish the heart: Ctrl Click

Suggestion: I have shown you how to draw the heart in a clockwise direction. Once you are comfortable with this try and draw it in an anticlockwise direction.

Then try and draw the heart from the bottom point instead of the top.

Now try this different some different shapes like this:



Step Thirteen: Drawing a Maze
- Techniques Introduced in Flash CS3

Now it is time to go it alone and try and draw something slightly more complicated. Below I have drawn a maze for you to try and recreate:

Example: Download the Flash Drawing Template  Draw 224p  (Maze)

Draw a Maze. Select the: Pen Tool

You should now start to get an idea of what the Pen Tool is capable of achieving. Up until now I have shown you how to get the drawing correct as you draw. You maybe pleased to know that it doesn't really matter if you make mistakes as you go along as it is often easier to correct your work after you have drawn the basic shape. In the next tutorial I will introduce you to the tools needed to edit the shapes that you have create with the Pen, Pencil or Brush Tools. You can also edit other vector type images that may have been created in programs like Illustrator or Fonts and most Clip Art.

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


20233 visitors to this page since June 08 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.