Week 2 – Drawing Vector Graphics with Flash

{loadposition adposition4}


This week we will learn about the Flash drawing tools. One of the nice things about Flash is that it has its own set drawing tools for creating graphics. In this way, you do not have to create all of your graphics in programs like Illustrator or Photoshop and import them into Flash. Like Adobe Illustrator, the Flash drawing tools create vector graphics which have a distinctive graphical or posterized look. Vector graphics stand in contrast to raster bitmap graphics, which are created in programs like Adobe Photoshop.

{loadposition adposition5}The pen tool is an important tool in computer drawing. It is hard to master and usually getting really good at it takes doing it all the time. The Pen Tool is also important because it is a tool that really highlights that Flash at its core is a “Vector” animation and drawing program. The tool is used to draw Bezier curves http://en.wikipedia.org/wiki/B%C3%A9zier_curve and Vector graphics. One of the main technical points about Flash is that it is a vector tool versus a bitmap tool. What is the difference between Vectors and Bitmaps(Raster)? Well one easy way to learn the difference is to experience it by drawing with tools that do each. If you are drawing with a brush or pencil in Adobe Photoshop you are working with Bitmaps(Raster images) but if you are working in Adobe Flash or Illustrator using their drawing tools you are drawing with Vectors (objects, lines, curves, fills). Vectors drawings are characterized by having anchor points, being selectable and easily scalable without distortion. Bitmaps on the other hand are characterized by pixels that don’t scale without distortion when enlarged. You can see this when zooming in on a jpg photograph. If you zoom in 600% on a photograph in Photoshop the image will begin to look like large square boxes of color, called pixelation. This situation is caused by the fact that a photograph is defined as a specific number of pixels, each with a separate color, arranged in a grid and if you try to enlarge the image the computer does not know what color to assign to the new pixels. With vector images, when you enlarge them they scale perfectly because the image is drawn by mathematical equations and algorithms.

Generally vectors are good for images that are built out of distinct lines and shapes like graphics, poster art, and line art. Images that look like drawings rather than a photographs. Photographic images on the other hand have fuzzy edges and usually no distinct lines. The usually look the best when created with a raster bitmap programs like Photoshop and saved as jpg image files.

{loadposition adposition4}

Vector Graphics (Geometric)

Bitmap/Raster Images (Grid of Pixels)

.swf  (flash movie)




.eps (Encapsulated Postscript)


.pdf (text, images, and vector graphics)

.png (supports transparency)

.wmf (Windows metafile)


.dxf (AutoCAD)

.bmp (bitmap file)

{loadposition adposition9}

Week 2 Assignment 1: Draw an apple with the pen tool

{loadposition adposition6}Draw an apple with a stem using the Pen Tools, the Subselection Tool, the Paint Bucket Tool, and the Gradient Transform Tool

        1. Watch Lynda.com video tutorials about the Flash drawing tools:
               Flash Professional CS5  Essential Training, with Todd Perkins
                  Section 2  Drawing Basic Shapes
                  Section 3  Moving Beyond Basic Shapes 
        2. Watch my YouTube.com video tutorials:

                    These videos are done with an earlier version of Flash:  apple 1apple 2, apple 3,

        3. Draw your apple in Flash -Time for you to go for it! If you want to draw something else that is great.
        4. If you need a reference download my sample files (Older files created in CS3)

Turning it in:
Save the assignment as a flash file (.fla) then zip it (.zip) and attach it to an email to dan.alberghetti@gmail.com

{loadposition adposition8}

Week 2 Assignment 2: Draw your own personal logo

  1. Watch video tutorials about the Flash drawing tools:
          Flash Professional CS5  Essential Training with Todd Perkins
          Section 2  Drawing Basic Shapes
          Section 3  Moving Beyond Basic Shapes
  2. Watch my video tutorial:

    This is a useful video for grabbing easy to use vector graphics

  3. Using the selection tool, the text tool, the pencil, brush and eraser tools, as well as, paint bucket and ink well tools. Create a logo for your own company or yourself. Your logo should be a creative use of text and/or graphics combined. The logo should make use of outlines (strokes), color gradients (linear or radial), and text.

Turning it in:
Save the assignment as a flash file (.fla) attach it to an email and send it to dan.alberghetti@gmail.com .


Author: Dan

Dan teaches computer networking and security classes at Central Oregon Community College.

Leave a Reply

Your email address will not be published. Required fields are marked *