Flash tutorial training on The Pen Tool
Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us 

 

Flash Tutorials

   

Click by Click: The Pen Tool

 

Full Length Tutorial

 

 

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 it has different names) and the principles are always the same, irrespective of the program. The roll of the Pen Tool is of primary importance in graphic programs and has not changed since the earliest version of programs like Illustrator.

 

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.

 

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:

 


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!!

 

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. Switch on the Show Layer as Outlines: View > Preview Mode > Outlines (Ctrl Alt Shift O)
  4. Select the: Subselection Tool
  5. To see the Anchor Points click on the green: Path
  6. To see the different type of lines select the: Pencil Tool
  7. In the Pencil Mode Options select: Smooth
  8. Draw a: Line
  9. Select the: Subselection Tool
  10. To see the Anchor Points click on the green: Path
  11. To view the Direction Lines drag right over the line: Select Anchor Points
  12. 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.

Example: Download the Flash Drawing Template  Draw 224a  (Straight Lines)

  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. Continue Clicking to add additional Anchor Points: Click, Move & Click Again (No dragging!)
  9. To finish the line hold the Control Key and Click in an empty space on the Stage: Ctrl Click
  10. To restart a new line release the Control Key and: Click, Move & Click etc. (No dragging!)
  11. Try to draw a: Zigzag
  12. To finish: Ctrl Click


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. Click over the starting Anchor to close: Click over Anchor 1
  8. To finish the line: Ctrl Click
  9. Turn off the snap to grid: View > Snapping > Snap to Grid (Ctrl Alt #)
  10. 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


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

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. 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. With the sharper cornered curve the direction handles are not the same length:

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
  5. Hover your Pen Tool over: Point 3
    Click     and hold onto: Point 3
    Drag to and release at: Point 5
  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. Click and hold onto: Point 12
  13. Drag to and release at: Point 13
  14. 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. So what is different. In all the previous curves the direction handles are cut through the curve like a tangent. 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.

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. Click and hold onto: Point 6
  7. Drag to and release at: Point 7
  8. 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
  9. Click and hold onto: Point 9
  10. Drag to and release at: Point 10
  11. 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
  12. Click and hold onto: Point 12
  13. Drag to and release at: Point 13
  14. To finish the line: Ctrl Click


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.


Step 10a  Straight Line to Straight Line

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

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


Step 10d  Straight Line to Curve - Two Direction Point

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

  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


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:

Step 11a  Straight Line to Curve - One Direction Point

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

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


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!

See Full Version of this: Tutorial

Webwasp Community: Webwasp Mates & Dates

Why not try out webwasp's new community. Meet new people, find friends in your area: Webwasp Mates & Dates

• 1131 visitors to this page since June 08 •

 Top of Page • Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • 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.