facebook google plus twitter
Webucator's Free Adobe Flash CS6/CC Tutorial

Lesson: Working with Drawing Tools

Welcome to our free Adobe Flash CS6/CC tutorial. This tutorial is based on Webucator's Introduction to Flash CS5 Training course.

Drawing in Flash

When drawing in Flash, you will be creating vector graphics as opposed to raster graphics (also known as bitmaps). Vector graphics use math to refigure curves, lines and fills based on the size of the graphic. That means if you zoom in, or resize, it will not lose quality. If you zoom in on a raster graphic (like a photo saved as a .jpg) it will not look good. You will see all of the square pixels. Raster graphics do not adjust if you change the size of the image. Many of the Drawing Tools in Flash are very similar to tools popularized in other graphics programs such as Adobe Photoshop or Adobe Illustrator. However, there are key differences that you will learn.

Lesson Goals

  • Learn to use the Tools Panel.
  • Learn to switch between drawing modes.
  • Learn to use Drawing Tools.
  • Learn to edit the shapes.
  • Learn to use layers and layer folders to organize.

Using the Tools Panel

The Tools Panel (shown above) might be displayed as one or more columns of icons. If you do not see the Tools Panel, either change your Workspace or open the Tools Panel by clicking Window > Tools. The panel will be grayed out if no document is open.

In this section, you will have a chance to practice with some of the most important tools. Of course, as the Lessons progress, you will be introduced to other tools as well as the ones covered in this section.

Relax and feel free to experiment with the drawing tools with no worries about how it looks. Just focus on getting the feel of the tools.

Rectangle Tool

With a new blank document open, select the Rectangle Tool () by single-clicking on it. To draw a rectangle on the stage, left-click and drag from one corner to another, releasing the mouse once the desired shape is achieved.

A rectangle will appear with the two colors shown at the bottom of the Tools Panel . The Stroke Color will be the line on the outside and the Fill Color on the inside. Notice that there is a pencil next to the Stroke Color and a paint bucket next to the Fill Color. Keep in mind as we look at the other tools that paint always refers to fills and a pencil always refers to the stroke.

Selection Tool

The Selection Tool () is the black arrow. Selection Tool is the most common tool used to select any item on the Stage or Timeline. Back to our example, once your rectangle is created, single-click on the Selection Tool, then single-click on the edge of the shape, also known as the Stroke. One side of the rectangle will be selected (see graphic on right).

Double-click on the edge of the shape and the entire stroke will be selected.

The Selection Tool can also be used to alter shapes. Roll your mouse around the edges of your rectangle. The mouse icon changes as you pass over a corner or a straight section. With the Rectangle deselected, click on a corner and drag it. Now, click on a side of the rectangle and drag it. Did you change the rectangle? Remember, you may always Edit > Undo any steps you wish to take back as you experiment.

Strokes and Fills

The Stroke is the line on the outside of your rectangle (if you have one). The Fill (again, if you have one) is the color on the inside. All Shapes in Flash are made up of strokes and/or fills. The Rectangle Tool can create both strokes and fills. Some tools will only create one or the other. In order to learn about strokes and fills, you may practice with your own rectangle drawing or you may open ours saved as DrawingTools/demos/StrokesFills.fla.

Try to squish or stretch the shapes by clicking and dragging on the edges As you can see, the fill will expand to fill the complete area inside the stroke.

Merge Mode vs. Drawing Object Mode

The shapes created above were created in Merge Mode. The name comes from the fact that all the shapes in merge mode can merge with each other. Try it! Drag one rectangle onto a second. Then, click on a blank part of the stage (to deselect). Like colors will merge together and different colors will chop holes in each other!

Object Drawing Mode, on the other hand, places the stroke and fill into a special kind of group called a Drawing Object. With the Rectangle Tool selected, you may turn on Object Drawing Mode by clicking on the small circle at the bottom of the Tools Panel while you have the Rectangle Tool selected.

The following demo is saved as DrawingTools/demos/MergeModeDrawMode.fla.

Open the Properties Inspector then single-click on the green circle on the left. Notice the Properties Panel shows the fill is a shape.

Next you will single-click on the green circle on the right. The Properties Panel shows the circle is a Drawing Object. This means it will not merge with another shape. If you drag it onto the other green circle, it will not create a hole. Notice the blue line that surrounds it on the stage, this is an indicator of it being a Drawing Object.

If you double-click on a drawing object, everything else on the stage will be grayed out. You will be editing the shapes that make up the drawing object.

Notice near the top of the screen that the words "Drawing Object" just appeared next to the name of your Scene. You are now editing this object. To go back to the main stage, click on "Scene 1".

Pencil Tool

The Pencil Tool () is used to draw a stroke freehand with your mouse. It can be difficult to accurately draw with the mouse. But, when the Pencil Tool is selected you will see an option at the bottom of the Tools Panel for Straighten, Smooth, or Ink. These options change how your line is drawn.

Line Tool

The Line Tool () also creates a stroke. But, it creates only straight lines. Of course, after the line is drawn you may adjust it in any way that you may adjust a stroke.

The Free Transform Tool and Transform Panel

The Free Transform Tool () and the Transform Panel (available under Window > Transform) are both used to stretch, squish, rotate or otherwise change an object shape on the stage. With the Free Transform Tool selected, the bounding box around your selection will have handles to drag and modify the shape.

The Transform Panel is used to change dimensions numerically. For example, reduce the width and height to 50% of the original size.

Demo: Using the Drawing Tools

The following demo is saved as DrawingTools/demos/Bird.fla.

This demo will show how to build a bird by using and stretching common shapes. Make sure to check the status of your drawing tools to ensure the proper Object Drawing mode is selected.

Start by drawing three ovals so that they overlap. One will be the head, one will be the body and the last the tail feathers. Any unwanted lines (or strokes) can simply be deleted by single-clicking to select and pressing the delete key.

Now, let's try a wing. Start with a triangle that is close to the shape you would like.

To give the impression of feathers on the bottom edge of the wing, we will draw small lines across the wing as shown below. This segments the line into smaller pieces which may be easily manipulated.

Adjust the curves so that they are even and smooth. Delete any unwanted lines.

Pen Tool

Use the Pen Tool ( ) to create strokes that are Bezier curves. The Pen Tool allows you to create complicated shapes with curves that may be modified with a great deal of control. Anyone familiar with the Pen Tool from Adobe Illustrator will feel at home. With the Pen Tool selected, click around the outside of your desired shape everywhere you would like a point. As you click, hold and drag the mouse. Handlebars will appear that adjust the curve.

Sub-selection Tool

The Sub-selection Tool (), the white arrow, is used to adjust the points and the handlebars. This tool can be used on all stokes whether they were created with the Pen Tool or other drawing tools. All strokes are in reality Bezier Curves.

Paint Bucket Tool

The Paint Bucket ( ) adds a fill to an area enclosed inside a stroke. This stroke may be created with any tool which creates strokes: line, pencil, pen, etc.

Brush Tool

The Brush Tool () allows you to draw a fill using the fill color. The fill will not have a stroke on the outside; you may add one if you like.

Using the Flash Drawing Tools to Create Shapes

Duration: 20 to 25 minutes.

In this exercise you will learn to use the drawing tools to create common shapes which can be molded and stretched to create interesting looking art, even if you are not an artist. When completed, you will build a tree that might look like ours (shown below). Of course, yours might turn out very differently, and that is just fine, make sure you focus on the feel of the tools, not the final outcome.

Feel free to be creative! You may decide to use your tree in a logo you will create later.

Drawing the Trunk

  1. Open DrawingTools/exercises/tree.fla.
  2. 2. You will use the Brush Tool to draw the left and right sides of the trunk. First, select the Brush Tool ( ). Set the brush shape to round ( ). Select a fill color for the trunk. We used (#999900). Draw one side and then the other by clicking and dragging the mouse. (If you do not like your shape, you may "undo" at any time.)
  3. Continue using the Brush tool to fill in the trunk and add a few branches.
  4. Again using the Brush Tool, you could add a hole to the tree. Change the fill color to black and draw the hole.
  5. Add additional enhancements until you are satisfied. You may add a vertical line to show texture on the trunk.

    Drawing the Top of the Tree:

  6. One way to draw branches is to just take a green oval and mash it up into an odd shaped blob which will be repeated a number of times. Each of the repeated shapes may be different shades of green, may be stretched differently and may be larger or smaller.
  7. Draw a green oval (like the one on the left). We used color #006633. Copy and paste it near the original. Change the shape of the original in any way you like. Now, copy the new shape and paste 5 to 10 additional copies. Each one can be changed and positioned as you desire.
  8. When completed, it might look something like this:

If you are done early...

  • Add additional trees or other objects in other parts of the stage.
  • Move any additional objects you create to new layers.

Using Additional Tools

So far we have covered the basic tools. But, there are additional powerful tools as well. Let's examine them!

Using a Gradient Fill

The fills we have used so far only have solid colors. Click on the fill color chip to see the default set of colors. The bottom row has some special colors which are gradients using two or more colors blended together to create a smooth appearance.

Select any of the gradient colors then draw a rectangle and you will see your shape is filled with the gradient.

These gradients are completely editable. You may even save your new gradient colors in the swatches panel. With one of these gradient colors selected, open the Color Panel to adjust the colors that make up the gradient.

Gradient Transform Tool

The Gradient Transform Tool () is hidden under the Free Transform Tool. When a gradient is already present on the stage, select the Gradient Transform Tool and click on the gradient fill. You will see a set of handlebars which can be used to rotate, squish or move the gradient (see above).

Using the Ink Bottle Tool

The Ink Bottle Tool (), hidden under the Paint Bucket Tool, adds a stroke to an existing fill using the color in the selected stroke area.

Using the Eye Dropper Tool

The Eye Dropper Tool () selects a fill or stroke color from one object then instantly switches to either the Ink Bottle Tool or the Paint Bucket Tool to let you use that color elsewhere.

Drawing Ovals

The Oval Tool (), hidden under the Rectangle tool, is used to draw Ovals and Circles. For a perfect circle, hold the Shift key while you are drawing the oval.

Enhanced in CS5: Deco Tool

The Deco Tool () is a great way to quickly make a variety of shapes. Open a new blank document, select the deco tool and look in the Properties Panel. Leave the default of "Vine Fill" and click on the stage. It will become filled with a vine pattern.

Notice all the options in the Properties Window when using the Deco Tool. You may change the colors, the angle, the length and even which item is used in the fill.

The drawing effect portion in the properties panel has a drop-down (shown on the right) which allows you to change to completely different items-even tall buildings!

The screen shot below shows buildings drawn with the "Building Brush" drawing effect.

Using Layers and Layer Folders

Layers are used to separate content from one another. Shapes can merge together or cut holes in each other if they overlap when we are not using the Drawing Objects. This does not happen when the shapes are on different layers, even when they are not Drawing Objects. When creating certain types of animation, the object will need to be the only item on a layer. For this reason, it is a good idea to get into the habit of creating many layers. In some projects, it might make sense to create a new layer for each object. Make sure you take the time to properly name a layer based on its use or items that make up the layer. This will make any project much easier to edit in the future.

Layer Folders may be used to keep the timeline organized as well. See below that three cloud layers are grouped together in a layer folder named clouds. Click the arrow to collapse the folder and the contents will take up less space in the timeline. They remain individual layers and objects, just compressed in the timeline.

Creating Transparencies

The color of any stroke or fill may be made transparent. In the Colors Panel beneath spots for Red, Green and Blue you may set the transparency level. This is also known as Alpha-transparency, or simply "Alpha".

If you had an image with a 20% transparency, it would be mostly transparent. You would easily see the grid showing through beneath. The grid is the indicator of a semi-transparent object. The grid will not be visible in the final animation; instead, any image below the semi-transparent object would be seen.

Creating and Editing Text

Click the Text Tool () to add text to the stage. If you want the width of the text to be fixed (this type of text will not grow wider, just taller as the amount of text in the shape increases), click and drag the size of the box you would like. Otherwise, a single-click put the text all on one line.

In Flash CS5, the text engine (called Text Layout Framework or TLF) has been dramatically improved. For one, text is automatically selectable. There are many additional options. See the Properties Panel for details.

It is also now possible for one text box to feed another. To do this, click the small box in the bottom right corner and then click on another text box.

Add Filters to Text

Flash text has the ability to have special effects that retain the ability to edit the text. To apply an effect, select a text box and then check the Properties Panel. Near the bottom of the panel find the category called "Filters". Here you may add a Glow, Drop Shadow, Blur, Bevel and others as well. The text now has an effect added, but you still have the ability to change the basic text properties.

Use the Drawing Tools to Create a Logo

Duration: 15 to 20 minutes.

In this section, you will build the logo for our Griffin Park site. Feel free to follow our example, or create your own design. You will use this logo in later exercises.

Create Shield as Background.

  1. Open the file saved as DrawingTools/exercises/logo.fla.
  2. Start by selecting the Rectangle Tool. You may select any color you like for the stroke and fill. We used (#009966) for the green fill and (#000000) for the black stroke. Draw a rectangle.
  3. Bend the lines or adjust the shape and color in any way you like.
  4. Add text for park name.
  5. Add Dropped Shadow Filter on text.
  6. Add additional shapes or design. Be creative!

If you are done early...

  • If you like your tree from earlier, you might add it to your logo.
  • Add additional objects to the logo.

Drawing in Flash

When drawing in Flash, you will be creating vector graphics as opposed to raster graphics (also known as bitmaps). Vector graphics use math to refigure curves, lines and fills based on the size of the graphic. That means if you zoom in, or resize, it will not lose quality. If you zoom in on a raster graphic (like a photo saved as a .jpg) it will not look good. You will see all of the square pixels. Raster graphics do not adjust if you change the size of the image. Many of the Drawing Tools in Flash are very similar to tools popularized in other graphics programs such as Adobe Photoshop or Adobe Illustrator. However, there are key differences that you will learn.

Drawing in Flash

When drawing in Flash, you will be creating vector graphics as opposed to raster graphics (also known as bitmaps). Vector graphics use math to refigure curves, lines and fills based on the size of the graphic. That means if you zoom in, or resize, it will not lose quality. If you zoom in on a raster graphic (like a photo saved as a .jpg) it will not look good. You will see all of the square pixels. Raster graphics do not adjust if you change the size of the image. Many of the Drawing Tools in Flash are very similar to tools popularized in other graphics programs such as Adobe Photoshop or Adobe Illustrator. However, there are key differences that you will learn.