Download

Drawing Exercise Files 1

Types of Artwork

  • Vector vs. Bitmap
  • Flash’s 4 Types of Graphic Objects
    • Shapes: vector drawings
    • Drawing objects: vector drawings which behave differently from Shapes when overlapping in the same layer
    • Primitives: vector drawings (rectangles or ovals) which can be modified nondestructively after they’re drawn
    • Bitmaps: raster images created in another program and imported into Flash

The Tools Panel Revisited

This is where all of your drawing tools are located. Tools with a small black triangle at the bottom-right hide similar tools in a flyout menu.

Flash tools
  • Color Modification Tools
    • Stroke Color
    • Fill Color
    • Black and White
    • Swap Colors
  • Options: change according to the tool selected

Selecting and Transforming Objects

Selection and Subselection

  • Selecting fill and stroke separately
  • Selecting fill and stroke together
  • Grouping/ungrouping fill and stroke
  • Reshaping the stroke
  • Using the Subselection tool to edit points on a curve
Exercise: Selection and Subselection Tools
  1. Create a new Flash ActionScript 3.0 document and save it as Selection.fla in your Drawing Exercise Files folder.
  2. Select the Rectangle tool, and make sure that the Object Drawing button (the circle in the Options area at the bottom of the Tools panel) is not deselected.
  3. Make sure there are colors specified for both the fill and the stroke (the exact colors do not matter.)
  4. In the Properties panel, set the Stroke width to 6.
  5. Draw a rectangle on the stage.
  6. Switch to the Selection tool (the black arrow.)
  7. When you hover this tool over the rectangle, a cross with arrows appears under the mouse pointer. This means you are hovering over an object which can be moved by clicking and dragging.
  8. Click the middle of rectangle and drag it to the right. Holy smokes, you just pulled the fill out of the rectangle!
Flash CS5 move fill only
  1. Press Cmd+Z (Mac) or Ctrl+Z (PC) to undo the last action.
  2. Select one line segment of the stroke by clicking once on it. Select the entire stroke by double-clicking on it. Deselect by clicking somewhere else on the stage.
  3. To select the entire rectangle (stroke and fill together,) you have two choices. Do one of the following options:
    • Double-click the object.
    • “Marquee” the stroke and fill together by drawing a selection box around the object. To do this, position your mouse pointer just outside one of the rectangle’s corners. Then drag toward and past the opposite corner (diagonally.)
  4. Now click-and-drag the rectangle to the right again. You should see the whole object move along with its stroke.
  5. Another way to ease the future selection of objects is to group the fill and stroke together. With the rectangle still selected, go to Modify > Group. Now when you drag the object it is treated as a single entity.
  6. Ungroup the rectangle: with it selected, go to Modify > Ungroup.
  7. Deselect the rectangle by clicking somewhere else on the stage.
  8. Place the tip of your mouse pointer on one of the stroke edges around the rectangle. See the little quarter circle below the arrow? This symbol indicates that you can reshape the stroke.
  9. Click and drag the stroke. When you do this, the stroke actually bends. The stroke is achored just like vector shapes in Illustrator. You are dragging a line segment between the two anchor points at the rectangle’s corners. The fill also updates to reflect the new shape.
Flash CS5 reshape edge
  1. Switch to the Subselection tool (the white arrow.)
  2. Double-click one of the corner points for the curve you just created. The points and handles become visible. Further adjust the curve using these handles and the Subselection tool. Handles are only available on curves.

Flash CS5 redraw curve
Flash CS5 redrawn curve

  1. Save and close the file.

Free Transform Tool

  • Selecting an object with the Free Transform tool
  • Scaling the object from a corner
  • Pressing Shift to constrain proportions
  • Rotating an object at the corner
  • Skewing an object along the side
  • Changing the center of rotation
Exercise: Free Transform Tool
  1. Open the FreeTransform.fla file in the Drawing Exercise Files folder. This is a photo of my cat Meowse. He is in a movieclip called catFadingMovieclip. There is a single instance of this movieclip symbol on the stage.
  2. Test the movie by pressing Cmd+Return (Mac) or Ctrl+Enter (PC). Watch the image fade in and out. Close the .swf file.
  3. Select the Free Transform tool, and select the movieclip on the stage. The selected object sprouts a bounding box with eight handles and a white dot in the center.
  4. Press and hold the Shift key while you drag a corner handle in toward the middle. The rectangle resizes from all directions and in correct proportion. As you are dragging, you will see a ghosted representation of the original size of the image.
  5. Move the mouse pointer just outside of a corner handle. Notice the mouse pointer turns into a rotate icon. Click and drag to rotate the image in either direction.
Flash CS5 free transform rotate
  1. Move your mouse pointer along one edge of the photo. Your pointer turns into a skew icon with arrows going in two directions. Click and drag the edge to skew the image.
Flash CS5 free transform skew
  1. Click and drag the white circle in the middle to somewhere else. It can even be outside of the image. This is the center of rotation. It also serves as the center of other tranformations.
  2. Rotate the picture again using this new center of rotation location.
Flash CS5 free transform center of rotation
  1. Test the movie again. The movieclip is smaller, rotated, and skewed, yet it continues to fade out and in. Close the .swf file.
  2. Save and close the .fla file.

Gradient Transform Tool

  • Selecting a predefined gradient fill
  • Using the Paint Bucket tool to change the center of a radial gradient
  • Using the Gradient Transform tool to change:
    • The center point
    • The size of the gradient
    • The rotation of the gradient
  • Working with radial versus linear gradients
Exercise: Gradient Transform Tool
  1. Create a new Flash ActionScript 3.0 document and save it as GradientTransform.fla in your Drawing Exercise Files folder.
  2. Press and hold the Rectangle tool in the Tools panel to reveal its fly-out menu. Select the Oval tool.
  3. Click on the color chip for Stroke, and select the top-right swatch with the diagonal red line through it. This turns off the stroke.
  4. Draw a circle on the stage (press and hold the Shift key after you start drawing in order to get a perfect circle; let go of Shift after you release the mouse.) The circle has only a fill.
  5. Select the circle, then change the width and height of the circle to 120 in the Properties panel.
  6. Click the Fill color chip and select the blue gradient located in the bottom-left corner of the swatches panel popup.
Flash CS5 gradient transform select fill
  1. Select the Paint Bucket tool, then click in the top left region of the circle on the stage. You have changed the center of the gradient.
Flash CS5 gradeint trasnform move center
  1. Another technique for changing a gradient is to use the Gradient Transform tool. Make sure the circle is still selected. Click and hold the Free Transform tool in the Tools panel to open the fly-out menu, and select the Gradient Transform tool.
  2. The circle is now surrounded by a black circle which is bisected by a straight line. There are three handles near one end of the straight line. Experiment with each of these handles:
    • Center Point: The white dot is the center point of the gradient and can be moved around anywhere. The triangle, which can only be moved along the line, determines the focus of the center point. This is where the first color, the bright blue, in the gradient first appears.
    • Resize Handle: Dragging this handle resizes and distorts the gradient without affecting the shape of the filled object (the original circle.)
    • Radius Handle: Moving this inward or outward resizes the gradient proportionally.
    • Rotate Handle: Dragging this handle rotates the gradient around the center point. If the gradient is round, this won’t make much difference, but it is oval shaped because of use of the resize handle, the effect can be seen.
Flash CS5 gradient transform tool handles
  1. Use the Selection tool to move the circle over and make room for a rectangle next to it.
  2. Select the Rectangle tool, and select a linear gradient for the fill.
  3. Draw a rectangle on the stage next to the circle.
  4. Click on the rectangle with the Gradient Transform tool.
  5. Notice that the same controls are in place except for the Radius Handle. Experiment with adjusting the Center Point, Resize Handle and Rotate Handle.
  6. Save and close the file.
Flash CS5 gradient transform tool linear rectangle

Object Drawing Mode

When Object Drawing Mode is selected before drawing a shape, the new object will not merge with any other objects on the same layer.

  • Overlapping drawn shapes with Object Drawing Mode turned off
  • Overlapping drawn shapes with Object Drawing Mode turned on
  • Objects drawn in Object Drawing Mode are indicated with a bounding box when selected
Exercise: Object Drawing Mode
  1. Create a new Flash ActionScript 3.0 document and save it as ObjectDrawing.fla in your Drawing Exercise Files folder.
  2. Select the Rectangle tool and make sure that Object Drawing is not selected, and that there is a fill color but no stroke.
  3. Draw a rectangle through part of the stage.
  4. Select the Oval tool and make sure Object Drawing is not selected, and that there is a fill color but no stroke.
  5. Select a different fill color from the rectangle.
  6. On the same layer in the Timeline, draw a circle on top of the rectangle.
  7. Use the Selection tool to drag the circle off of the rectangle: click on it first, then click and drag it. When you release the mouse, you will see that the circle has bitten a chunk out of the rectangle.
  8. Select the Oval tool again. This time, click the Object Drawing icon in the tools panel, in the lower left corner.
  9. Draw another circle on top of the rectangle. Notice the bounding box which indicates that this was drawing as an Object instead of a Shape.
  10. Use the Selection tool to move the second circle off of the rectangle. This time, the rectangle stays intact.
  11. Save and close the file.
Flash CS5 object drawing

The Drawing Tools

Pencil Tool

  • Three Pencil modes: Straighten, Smooth and Ink
  • Lines drawn with the Pencil tool are segmented vectors
  • Using the mouse to modify the shape of line segments
  • Changing the line thickness and style (double-click and use Properties)
  • Using the Smooth and Straighten buttons in the Tools panel
Exercise: Pencil Tool
  1. Create a new Flash ActionScript 3.0 document and save it as Pencil.fla in your Drawing Exercise Files folder.
  2. Select the Pencil tool and make sure that Object Drawing is not selected. Pick a stroke color—the Pencil tool only draws strokes.
  3. Draw three squiggly lines on the stage. Use one of the following three modes for each line. The results will be slightly different for each. Leave some room for a circle later on.
    Here’s what the modes do:

    • Straighten: Use this if you want curves to flatten.
    • Smooth: Use this to round out kinks or otherwise smooth out awkward curves.
    • Ink: Use this mode to get exactly what you draw, more or less.
Flash CS5 pencil tool modes Flash CS5 pencil tool modes lines
  1. Switch to the Selection tool and click the first line. Notice how you just selected a piece of the line. The lines you draw with the Pencil tool are vectors.
  2. Deselect the line, and then hover the mouse over the line. When you see a small curve appear under the mouse pointer, click and drag. You can change the shape of the lines you draw simply by moving their segments.
  3. Double-click one of the lines, and change its thickness (Stroke) and line type (Style) in the Properties panel.
Flash CS5 line stroke thickness and style
  1. Draw a circle on the stage with the Pencil tool in Smooth mode.
  2. Select the shape with the Selection tool, and in the Tools panel click the Smooth button. Notice how any awkward edges of your shape become more rounded.
  3. Now click the adjacent Straighten button a couple of times. Your awkward circle gradually becomes a round circle.
  4. Save and close the file.
Flasg CS5 pencil tool tutorial complete

The Brush Tool

Brush Tool Options

  • Object Drawing
  • Lock Fill (fill multiple objects with a single gradient or other fill)
  • Brush Mode
    • Paint Normal—paints over any existing strokes or fills
    • Paint Fills—paints the fill and leaves the stroke alone
    • Paint Behind—paints only in the empty areas of the layer
    • Paint Selection—paints only the selected areas of an object
    • Paint Inside—paints only inside the area surrounded by a stroke
  • Brush Size
  • Brush Shape
  • Use Tilt and Use Pressure—only applicable when using a drawing tablet
Exercise: Brush Tool
  1. Create a new Flash ActionScript 3.0 document and save it as Brush.fla in your Drawing Exercise Files folder.
  2. Select the Brush tool and select a fill color.
  3. Turn off Object Drawing if it is on. Make sure the Brush mode is set to Normal.
  4. In the Properties panel, set the Smooth value to 0.
  5. Draw a squiggle on the stage.
  6. Set the Smooth value to 50, and draw another squiggle.
  7. Repeat step 6 with a smooth value of 100. The edges of the three squiggles move from rough to smooth and flowing.
  8. Use the Subselection tool to click each squiggle in turn. Notice that the smoother the value, the fewer the anchor points that are used.
Flash CS5 brush tool smooth value

The Eraser Tool

  • You can only erase vector artwork that isn’t protected inside a group of some kind.
  • Three modifiers in the Tools panel:
    • Eraser mode—the dropdown echoes the five brush modes
    • Eraser shape—similar to brush shape
    • Faucet—erase an entire fill or line with one click

The Pen Tool

  • The Pen tool draws Bezier curves, which are described by three components:
    • The anchor point
    • The direction of the handle
    • The length of the handle
  • Clicking to draw anchor points and straight lines between them.
  • Clicking-and-dragging to draw anchor points and curved lines between them.
  • Pressing Cmd (Mac) and Ctrl (PC) to edit Bezier handles and points during drawing.
  • Hovering the mouse over the starting point, and clicking to close the shape.
  • Using the Subselection tool to edit Bezier handles and points after the shape is complete.
  • Pen tool subtools:
    • Add Anchor Point (hovering over a line segment with the Pen tool gives instant access)
    • Delete Anchor Point
    • Convert Anchort Point (hovering over an anchor point with the Pen tool gives instant access)
Exercise: Pen Tool
  1. Create a new Flash ActionScript 3.0 document and save it as Pen.fla in your Drawing Exercise Files folder.
  2. Select the Pen tool and a stroke color.
  3. Notice the pen cursor when your move the mouse pointer over the stage. A small x appears next to it.
  4. Click and drag on the stage. As you drag, you will see three points on the line. The center point, called the anchor point, is the start of the curve. The two outer points, called handles, indicate the direction and degree of a Bezier curve.
Flash CS5 pen tool start Bezier curve
  1. Move the mouse somewhere else on the stage. Click and drag the mouse. As you drag, the mouse handles and curve get longer. The curve follows the direction of the handle.
Flash CS5 continue Bezier curve
  1. Click and drag a couple of more times to add a few points to the shape.
  2. Hover the mouse over the starting point of the shape. Notice the little o under the Pen tool. This tells you that you are about to create a closed shape.
Flash CS5 pen tool close the shape
  1. Click the mouse to close the shape.
  2. Click and hold down the Pen tool icon in the Tools panel to see its flyout menu. Experiment with each of these tools on your new shape:
    • Add Anchor Point tool: click anywhere on the line to add an extra anchor point.
    • Delete Anchor Point tool: click on an anchor point to remove it. The shape will change.
    • Convert Achor Point tool: Click on an anchor point, and the point will be converted into a corner. To recover your curve,use the Selection tool to deselect the shape, and then pull the line back out into an arc.

    Note: you can access the functionality of these alternate tools directly from the Pen tool.

    • Add an anchor point by hovering the Pen tool over an existing line. Look for the little + next to the cursor, then click.
    • Convert an anchor point by hovering the Pen tool over an existing anchor. Look for the little angled ^ next to the cursor, and click once.
    • Delete an anchor point by hovering the Pen tool over an existing anchor point. Look for the little angled ^ next to the cursor, and click. This first click converts the anchor point into a corner point, as above. Now look for the little – next to the cursor, and click again to delete the point. If the anchor point was already a corner point, one click will delete it.
  3. Draw another shape with the Pen tool. While you are working on it, try out these editing tips:
    • Press and hold the Cmd (Mac) or Ctrl (PC) key to temporarily access the selection tool. Then reposition an anchor point or a handle you have just drawn.
    • While still dragging out the handles for a new anchor point, press and hold the Option (Mac) or Alt (PC) key. The handles will “break”, and you can change direction (making a corner.)
    • Simply click instead of click and drag if you want a line to straighten toward the anchor point.
    • Click and drag when you close the shape, to have greater control of the final curve.
  4. Save and close the file.

Exercise: Make a Campfire

Let’s practice your new drawing skills by drawing a little nighttime campfire scene. This longer tutorial is in four parts. Let’s get set up first:

  1. Create a new Flash ActionScript 3.0 document and save it as Campfire.fla in your Drawing Exercise Files folder.
  2. Select Insert > New Symbol.
  3. In the New Symbol dialog box, name the symbol Trees and select Graphic as its Type.
  4. Click OK, and you will be working inside of this Trees symbol for the first three parts of the tutorial.
  5. Save the file.
Draw the Tree Trunk
  1. Select the Pencil tool and set it to Smooth mode. Don’t worry about the specific stroke color so long as there is one.
  2. Draw a tall, stretched oval shape. Make sure the shape is closed. This will be a tree trunk.
  3. Select the shape on the stage and click the Smooth button at the bottom of the Tools panel.
Flash CS5 campfire pencil tool oval shape smoothed
  1. Switch the the Subselection tool, and click your shape. You will see the vector anchor points and handles.
  2. Manipulate the handles and anchor point locations to change the shape of your trunk.
Flash CS5 campfire subselection tool oval shape smoothed
  1. You can also refine curves by switching to the Selection tool, deselecting the shape, hovering near a line segment, then clicking and dragging.
Flash CS5 campfire selection tool oval shape smoothed
  1. Using the Selection tool, double-click the edge of the shape to select the whole oval.
  2. Specificy these values for the oval in the Properties panel:
    • X: 35
    • Y: 104.5
    • Width: 20
    • Height: 45
    • Stroke color: #480000 (dark brown)
  3. In the Tools panel, set the fill color to #480000, and select the Paint Bucket tool.
  4. Place the tip of the bucket icon in the empty part inside the oval, then click to fill the shape with brown.
Flash CS5 campfire paint bucket tool tree trunk
  1. Double-click the shape with the Selection tool to select the whole thing.
  2. Press the F8 key to convert the shape into a symbol.
  3. Name the symbol Log, and select Graphic from the Type menu. Click OK. You are still inside the Trees symbol
  4. Name the layer Trunk and lock it in the Timeline.
  5. Save the file.
Draw the Pine Tree
  1. Add a new layer to the Trees symbol named Fir.
  2. Select the new layer, then select the Line tool. The Line tool draws straight lines. Make sure that the Snap to Objects button is selected—it’s the little magnet icon at the bottom-left in the Tools panel.
  3. Click and drag the tool on the stage to draw a line at an angle. Release the mouse and the line will appear.
  4. Repeat this step twice more to create a triangle.
Flash CS5 line tool triangle
  1. Use the Subselection tool to click the triangle. Notice how the anchor points become visible.
  2. Select an anchor point with the Subselection tool, and move the points one at a time until the triangle is in the shape of a pine tree.
  3. Switch to the Selection tool and deselect the triangle.
  4. Move the tool near the bottom line of the triangle. When the small curves appears near the mouse pointer, click and drag down a bit to round out the bottom edge. The triangle should now more resemble a cone.
  5. Use the Paint Bucket tool to fill the shape with a color.
  6. Double-click the stroke with the Selection tool to select just the stroke.
Flash CS5 selection tool cone stroke selected
  1. Press the Delete key to remove the stroke.
  2. Select the cone fill, and in the Properties panel set its width to 81 and its height to 114.
  3. With the cone still selected, open the Color panel. Select Linear gradient from the Type dropdown menu.
Flash CS5 fill linear gradient color panel
  1. In the gradient editor at the bottom of the Color panel, click the left crayon. Set its color value to #002211 (dark green.)
Flash CS5 gradient editor color panel left crayon
  1. Set the color value of the right crayon to #004433 (lighter green).
  2. Move the cone in place above its trunk.
  3. Lock the layer and save the file.
Flash CS5 tree cone linear gradeint greens
Add Pine Needles
  1. Add new layer to the Trees symbol named Needles.
  2. In the Color panel, select the Stroke pencil icon, and select Linear gradient from the Type dropdown. The gradient you just created is now in the Stroke area of the Tools panel. The gradient is subtle, but should still be your dark green to green gradient.
  3. Select the Pencil tool. In the Properties panel, set the stroke width to 20.
  4. In the Properties panel, click the Edit stroke style button (the pencil icon to the right of the Style dropdown.)
  5. In the Stroke Style dialog box, specify the following settings then click OK:
Flash CS5 stroke settings hatched wild curved
  1. Use the Zoom tool to zoom in on the tree triangle. Draw four lines across the tree, as shown below.
  2. Lock the layer, and save the file.
pine tree
Build the Campfire Movie
  1. Click the Scene 1 button to return to the main timeline.
  2. Change the stage color to a medium gray color (#666666) in the Properties panel.
  3. Add two more layers. From top to bottom name the layers Trees, Logs, and Fire.
  4. Select the Spray Brush tool (in the Brush tool flyout menu) and load the Trees symbol into the brush: click the Edit… button in the Properties panel, click on Trees and click OK.
  5. Make sure that the three checkboxes in the Properties panel are unchecked.
  6. Click and drag across the Trees layer to add a forest.
Flash CS5 spray brush tool trees symbol
  1. Select the Logs layer, and drag three copies of the Log graphic symbol to the stage.
  2. Create a teepee-style fire by arranging the logs with the Free Transform tool’s rotate and resize features. Move the logs into place.
Flash CS5 free transform tool rotate resize logs Flash CS5 campfire logs placement
  1. Select the Fire layer and the Deco tool.
  2. In the Properties panel, select Fire Animation from the Drawing Effect dropdown. In the Advanced Options, set the Fire duration value to 50 frames.
Flash CS5 deco tool fire animation setting properties panel
  1. Click the stage once just above the log stack. The tools will build the enitre animation of the fire across 50 frames.
  2. If the campfire gets put in the wrong place by Flash, do the following:
    1. Lock the Trees and Logs layers.
    2. Click on the Edit Multiple Frames icon at the bottom of the Timeline panel. A range-of-frames indicator appears at the top of the Timeline panel above some of the frames.
    3. Drag the left edge of range-of-frames all the way left to frame 1. Drag the right edge to include frame 50.
    4. Press Cmd+A (Mac) or Ctrl+A (PC) to select everything on the Fire layer.
    5. Use the Selection tool to click-and-drag the fire to the correct location on the stage.
    6. Click Edit Multiple Frames again to shut it off. Flash CS5 edit multiple framesFlash CS5 edit multiple frames frame range Flash CS5 edit multiple frames move multiple objects
  1. Save and test the movie: Cmd+Return (Mac) or Ctrl+Enter (PC).

View the final movie.