Flash Tutorial: The Pen Tool & Understanding Vectors.

Home • Members Tutorials Forum iSnapChat Contact Us 


Flash Tutorials


Free Flash Tutorial - The Pen Tool


Free Flash Tutorial

Step 1    <<   Previous      Intro   1   2   3   4   5   6   7   8   9   10   11   12   13      Next   >>    


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 1    <<   Previous      Intro   1   2   3   4   5   6   7   8   9   10   11   12   13      Next   >>    

21603 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.