Flash Assignment 3 – Working with Artwork

Photo credit: Jen Marquez, uploaded via Flickr, Creative Commons License

3.1 Creating Vector Artwork in Flash:

Vector vs. Bitmapped Images – Images imported into Flash from a digital camera, scanner or some other applications are typically bitmapped images (such as .gif, .jpg or .png files). These are composed of an array of a fixed number of pixels. While it is advantageous to be able to work with imported images, one should be aware of the limitations of doing so. Specifically, bitmapped images do not scale all that well. Bitmapped images are enlarged by means of stretching the individual pixels, resulting in loss of sharpness of the image. This effect can be reduced by using higher resolution images, the trade-off being that high resolution images have large file sizes.

Conversely, objects created with the Flash drawing tools are what are known as vector images. Vector images are not defined by a finite array of pixels. Rather, they are defined by mathematical algorithms that define the points, lines, curves and fills composing an object. These objects can be scaled without suffering loss of quality, and are highly efficient in terms of file size.

Flash Merge vs. Object Drawing Mode – Refer to the discussion of the shape tool in the post entitled “Flash Assignment 2: The Interactive Tools Panel” for a discussion of merge vs. object drawing modes.

Creating Vector Art with Flash Drawing Tools – In this section, we follow along with our tutor to create a vector graphic image using the Flash drawing tools. Here we learn to use layers, filters, color gradients, and many of the tools on the drawing toolbar. This was quite a bit-o-fun. Check out the screenshot below.

As you can tell from the meter, this is dangerously awesome.

Creating Patterns from Symbols - Here we modify our drawing by creating a dashboard background for our instrument.  We do this with the deco tool, but rather than use a default shape, we create our own from scratch.  First we create our pattern as a new graphic symbol (I chose a checker-plate design).  Then we create a new movie clip symbol, and tile it with our new symbol using the deco tool.  We then return to out instrument drawing, and create a new layer for the dashboard, positioning it beneath all the instrument layers.  We drag the dashboard movie clip from the Library Panel and drop it right on to our dashboard layer.  Then a few size, position and filter tweaks later, our instrument appears mounted on a cool new panel.  

Awesometer on checker plate panel.

Using Advanced Drawing Tools -  This section focuses on using the deco tool and spray brush.  Both of these tools allow you create custom symbols to draw with.  We also incorporate some animation work here, using the baked-in fire animation as a movie clip.  We also explore some more of the predefined deco brush patterns, such as trees and buildings, which allow to create landscapes with surprising ease.

3.2 Importing Artwork:

Importing and Modifying Graphics and Images – Our example for this lesson is an animation that uses several layers, a motion tween (it turns out that a motion tween is not a fidgety middle-schooler.  Who knew?), and a mask.  A mask is a layer that creates a window to view some or all of a layer beneath it. 

We then modify this image by importing some graphics.  We can import images such as .gif or .png files into our library, making them available to drag-and-drop as we need them, or skip a step and import directly to the stage of we only need to use them once. 

In some instances, we may need to modify objects to enable manipulating them.  For example, we imported a .gif image of fog to create a spooky feel to our project.  However, to adjust the transparency of the fog, we first had to convert the .gif to a graphic object, thus allowing us to apply an alpha filter.  Similarly, we converted another .gif image from a bitmapped image to a vector shape, though it’s not really clear why we needed to do that.  Still, it’s nice to know that we can.

We then touch on another shortcut that allows us to swap bitmapped images or graphic objects one-for-another, rather than removing one and then adding another.  We also learn to plunder an external library for items that we want to use in our instant project. 

Lots of cool stuff goin’ on here.

3.3 Modifying Artwork:

Modifying Vector Art – In this section, the basics of using the drawing tools are revisited. This has been discussed in in the post entitled “Flash Assignment 2: The Interactive Tools Panel”.

Using Rulers and Guides – We learn here that we can display horizontal and vertical rulers in our work area to help with the placement of objects (this option appears in the view menu).  We can also insert guidelines that stretch across our work area.  Once our guides are in place, we can hide the rulers if we care to (to reclaim screen real estate), and the guides will remain visible. 

When we draw or move objects that we wish to align with these guides, we can set the snapping option on the view menu to snap objects to these guide lines. 

Also note that from the View => Guides menu, we can adjust the color of the guide lines, which may be required depending on the colors that we are working with.