49
Chapter 2: The Animator’s Tools Note: I use a little rough language in this book. BCA: Flash Animation – by Adam Phillips Chapter 2: The Animator’s Tools .. and how to use them

BCA_FA_05

Embed Size (px)

DESCRIPTION

Chapter 2: The Animator’s Tools .. and how to use them Note: I use a little rough language in this book. BCA: Flash Animation – by Adam Phillips

Citation preview

Chapter 2: The Animator’s Tools 

N o t e : I u s e a l i t t l e r o u g h l a n g u a g e i n t h i s b o o k .

BCA: Flash Animation – by Adam Phillips

Chapter 2: The Animator’s Tools.. and how to use them 

Chapter 2: The Animator’s Tools  P a g e | - 1 -

This chapter is free. You may download, print and share it with your family and friends. You may not resell it or reproduce any part of it in your own animation tutorials/books/articles in any medium, including print and online, without express written permission from me. If you enjoyed and learned from this chapter, please show me some love by crossing my palm with a small (or if you prefer, a HUGE) Paypal donation.

Feel free to email me with cash, questions, comments, errata, etc through my website: www.biteycastle.com

Table of Contents 

Introduction ....................................................................................................... ‐ 3 ‐ 

Hardware ........................................................................................................... ‐ 4 ‐ 

Graphics tablets ............................................................................................. ‐ 5 ‐ 

Tablet Sensitivity ....................................................................................... ‐ 6 ‐ 

Digital video camera ...................................................................................... ‐ 7 ‐ 

Flash Tools ......................................................................................................... ‐ 8 ‐ 

Stroke tools ....................................................................................................... ‐ 8 ‐ 

Line tool   .................................................................................................. ‐ 9 ‐ 

Choosing stroke colour .............................................................................. ‐ 9 ‐ 

Using the Selection Tool with Lines  .................................................... ‐ 9 ‐ 

Selection accidents .......................................................................................... ‐ 10 ‐ 

A note on Snapping ................................................................................. ‐ 10 ‐ 

Intersections ............................................................................................ ‐ 11 ‐ 

Stroke Styles ............................................................................................ ‐ 13 ‐ 

Adding styles to a finished drawing ........................................................ ‐ 14 ‐ 

Pen tool   ................................................................................................ ‐ 16 ‐ 

Curving Pen strokes ................................................................................. ‐ 19 ‐ 

Subselect tool   ....................................................................................... ‐ 20 ‐ 

“SUB‐select?” .......................................................................................... ‐ 20 ‐ 

A d a m P h i l l i p s P a g e | - 1 -

Chapter 2: The Animator’s Tools - 2 - | P a g e

Off you go! ............................................................................................... ‐ 21 ‐ 

Pencil Tool   ............................................................................................ ‐ 22 ‐ 

Pencil tool options ................................................................................... ‐ 22 ‐ 

Pencil tool properties .............................................................................. ‐ 23 ‐ 

Rectangle, Oval and Polystar   ................................................... ‐ 23 ‐ 

Primitives   ................................................................................... ‐ 24 ‐ 

Stroke tools summary ................................................................................. ‐ 25 ‐ 

Fill Tools ........................................................................................................... ‐ 26 ‐ 

Brush Tool .................................................................................................... ‐ 27 ‐ 

Brush Tool options ................................................................................... ‐ 28 ‐ 

Brush Tool Properties .............................................................................. ‐ 29 ‐ 

Paint Bucket   ......................................................................................... ‐ 33 ‐ 

Paint Bucket options ............................................................................... ‐ 34 ‐ 

Paint Bucket properties ........................................................................... ‐ 35 ‐ 

Fill tools summary ....................................................................................... ‐ 35 ‐ 

Selection and manipulation tools .................................................................... ‐ 36 ‐ 

The Selection tool   ................................................................................. ‐ 36 ‐ 

Selection tool options .............................................................................. ‐ 37 ‐ 

Selection tool properties ......................................................................... ‐ 38 ‐ 

Free Transform tool  .............................................................................. ‐ 38 ‐ 

FT tool functions ...................................................................................... ‐ 40 ‐ 

Free Transform tool options .................................................................... ‐ 44 ‐ 

Lasso Tool   ............................................................................................. ‐ 46 ‐ 

Lasso Tool options ................................................................................... ‐ 47 ‐ 

Tools Summary ................................................................................................ ‐ 48 ‐ 

- 2 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 3 -

Introduction

Before you start churning out animation, you gotta know what tools to use and how they work to avoid cutting yourself. In the same way that we spent some time getting our bearings in the Flash CS3 interface in order to create our first piece of animation, so we should now look at the individual tools in greater depth so we can start using them to their full potential.

In this chapter we’ll do some exercises covering the tools used by animators, as well as the hardware you should have. Additionally we’ll get a bit more experience with those panels we briefly visited in Chapter 1.

A d a m P h i l l i p s P a g e | - 3 -

Chapter 2: The Animator’s Tools - 4 - | P a g e

Hardware Occasionally an animator announces that their epic project was created entirely with the mouse. Sometimes this is a deliberate choice but for others, using a mouse is their only option. For those people I have two recommendations:

• Scan and import – I will not be covering this method at all in this book. This is quite a popular option for traditional artists making the move to digital. Drawing your animation with pencils on paper, scanning and then importing them all into Flash one by one is a tedious process from which some animators can nonetheless get their desired results. If you want to work this way, you’re on your own because I’ve never done it.

Fig. 2.01 – Scanning drawings.. ugh!

• Line and pen tools These tools, as we’ll later see, allow you to draw lines by plotting points. It may take you some time to get used to, but it can become comfortable pretty quickly and is by far the best option for drawing directly into Flash if you must use a mouse.

Fig. 2.02 – Drawing by plotting points (Pen tool)

- 4 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 5 -

Graphics tablets If you’re a traditional artist who’s serious about getting into digital graphics and animation, you absolutely must invest in a graphics tablet. Even if it takes you a year to save the money, you will not regret the purchase. Short of scanning artwork (a terribly tedious job whichever way you look at it), a graphics tablet is the most natural way for a traditional artist to make the leap to digital.

Fig. 2.03 – Graphics tablet

Note: Graphics tablets are loved by most artists but not all.

I know of one or two animators who did invest in a graphics tablet, only to find that it was far too unnatural and different for them to grow accustomed to.

For this reason, see if you can somehow test-drive a graphics tablet if possible, before you spend the money.

Personally I haven’t drawn anything with a mouse since my first week of getting to know Flash. I remember I’d been saving for a portable CD player (back before iPods were invented) but I had seen the potential of Flash and I decided to buy a graphics tablet. I had a CD player in my computer anyway!

Fig. 2.04 & 2.05 – Left: Drawn with a mouse. Right: Drawn with a tablet.

A d a m P h i l l i p s P a g e | - 5 -

Chapter 2: The Animator’s Tools - 6 - | P a g e

My first tablet was a Wacom 9x12. It held up well for several years but today I use a newer model Wacom: the 9x12 Intuos 3.

Tablet Sensitivity When you’re using a graphics tablet and you have the Brush tool selected (which we’ll look at in depth a bit later), there’s an icon near the bottom of the Flash CS3 Tools panel that looks a bit like a dog-log, or streak of black snot (see Fig. 2.07).

This is the graphics tablet pressure sensitivity button, which, just like a real brush allows you to draw thick and thin strokes based on the pressure you use on the tablet. This variable thickness brush stroke is one of the first features of digital graphics that I fell in love with.

Fig. 2.08 – Light pressure for thin brush, heavy pressure for thick brush

Fig. 2.09 – Using pressure for drawing effects.

- 6 - | P a g e A n i m a t i o n

Fig. 2.07 Pressure button

Chapter 2: The Animator’s Tools  P a g e | - 7 -

Digital video camera To have access to a digital video camera isn’t absolutely vital because the poor man’s equivalent is a simple mirror. Every good classically trained character animator has a mirror on his or her desk for acting reference. In years gone by, if you ever got to tour an animation studio you’d certainly have come across animators pulling faces or enunciating dialogue into their mirrors.

There are a batrillion advantages to using a digital video camera though. The least of these is that you can save your acting or effects reference video for repeated viewing and frame-by-frame analysis.

Consider that today, almost all mobile phones have inbuilt digital cameras, so we’re well equipped to take reference footage or photographs anywhere, anytime.

The really great thing about digital photo and video is that you can import video to the Flash timeline so you can truly work alongside your reference footage more than ever before. Just a little bit better than a mirror, huh?

A d a m P h i l l i p s P a g e | - 7 -

Chapter 2: The Animator’s Tools - 8 - | P a g e

Flash Tools

I bought a new video camera recently and it’s absolutely jam-packed with cool features, some of which I know I’ll never use. The only thing I really want to do though is take some footage and high resolution photos. For the first week, that’s all I did with the video camera. Turn camera on - start recording - stop recording - turn camera off.

In time, I had no trouble with the basic tasks and was starting to use a few of the cool extra features. As I get more comfortable with the camera, I’ll start to use more of the complex stuff until one day, I’ll know it like the back of my hand.

Beginning Flash is just like that. Learning the entire toolbox isn’t necessary at the start. Even if you do look at all the features and try them out, experience is the best teacher and you’ll discover the other features as you need them.

In this chapter we’re going to put a few of the most-used animator’s tools into practice. Along with each tool, we’ll learn about the options specific to each.

First up we’re going to look at the tools with which you create graphics: the drawing tools. We’ll cover the drawing tools in two main groups: stroke and fill (equivalent to ink and paint in traditional animation), so we’re going to look at those before we move on to the transform and selection tools.

Stroke tools When drawing on paper, you need to use a straight-edge ruler for those perfectly straight lines. Architects and engineers typically use t-squares, rulers, compass, protractor and a wide array of line, curve and ellipse templates to make those perfectly formed shapes in their technical drawings.

Flash has its own set of technical drawing tools which allow precise plotting of points, lines and curves. These tools are part of the stroke set which include the line tool and the pen tool. There are also a couple of built-in shape tools such as the rectangle, the oval and the polystar tool.

- 8 - | P a g e A n i m a t i o n

We’ll look at each of these in turn and give you the occasional exercise to play with their individual options. Don’t hold back though.. if you want to leap ahead and mess with the tools, go right ahead and spend time getting to know whichever one takes your fancy.

Chapter 2: The Animator’s Tools  P a g e | - 9 -

Line tool The line tool (N) is used for making perfectly straight lines at any angle. Click and drag the cursor on the stage to create a line. You can hold down the Shift key while drawing to force the lines to 45° angles.

It may come as a surprise, but there are a great number of Flash animators and artists out there who use the line tool for most of their drawing. You’ll soon learn how to curve and bend these lines and the fact is, there’s more to the line tool than meets the eye.

Line tool exercise 1. In a new Flash movie (File > New > Flash file), select

the Line tool from the Tools panel 2. Now click and drag anywhere on the stage. You’ll see

that a line is being drawn following your cursor around the screen.

3. Release the mouse click and the line will be ‘dropped’ at whatever length you left it.

4. Shift Key – hold down your keyboard’s Shift key, and repeat steps 2 and 3. The line is constrained to 45 degree increments, which is a useful helper from time to time.

5. Alt Key – hold down your keyboard’s Alt key and repeat steps 2 and 3. This time, you’ll see that your line is drawn from the centre, starting at the place you clicked first. This also comes in quite handy now and then.

6. To prepare for the next exercise, draw a few more random lines on the stage using the line tool.

Using the Selection Tool with Lines Once you’ve drawn some straight lines, you can manipulate them with the Selection tool. Many Flash artists and animators work this way, so let’s see what the fuss is all about.

1. Grab the Selection tool (the black arrow at the top of the tools panel). 2. Without clicking, hover over any line on the stage.

A d a m P h i l l i p s P a g e | - 9 -

Choosing stroke colour

When you draw with stroke tools, you’ll be using the stroke colour. This is shown in the tools panel with a tiny pencil icon and a colour swatch. For the exercises on the next few pages, feel free to select whatever colour you like for drawing.

 

Chapter 2: The Animator’s Tools - 1 0 - | P a g e

You’ll notice how the cursor icon changes depending what part of the line you’re hovering over. For example, hovering over the middle of a line shows a curve icon, while hovering over the end of a line shows a corner icon.

3. Hover over the middle of the line, so you can see a curve icon.

4. Drag and release to bend the line.

Fig. 2.10 – The Selection tool’s curve cursor allows you to curve

the line

5. Hover over the end of the line, so you see a corner icon.

6. Dragging now will move the end points.

Fig. 2.11 – The Selection tool’s corner cursor allows you to move

the corner and line ends.

A note on Snapping You may have noticed in Step 6 (above) that the end points seem to be jumping around as you drag them. This is because ‘Snap to Grid’ is on by default.

To turn it off, go to View > Snapping > Snap to Grid, making sure it’s unchecked. Dragging those points around will now feel nice and smooth.

- 1 0 - | P a g e A n i m a t i o n

Selection accidents

When  teaching  Flash  in  courses  and workshops,  I’ve  noticed  that  beginners often select things by accident. 

To  avoid  getting  lost  and  frustrated, learn  to  recognise  what  selection looks like (more on this on page 36) . 

Everything  in  Flash  looks  different when  it’s selected. Buttons  in  the Tools panel appear highlighted, frames in the timeline  appear  in  negative  and drawings on the stage have a grainy, or gauze  effect  (as  seen  in  the  image below). 

Now, if  your line is selected you will not be  able  to  bend  it,  because when  you hover  the  mouse  over  selected  items, you get a ‘move’ cursor icon like so:  

 

This 4­way arrow is saying “alright let’s move”. 

If  you  want  to  bend  a  line  with  the Selection tool, you must deselect  it. To do this, simply use the Selection tool on any  blank  part  of  the  stage  (i.e.  select nothing). 

Once  deselected,  the  line  can  be  bent with the Selection tool. 

 

Chapter 2: The Animator’s Tools  P a g e | - 11 -

Intersections Extra points are automatically created at intersections, so when you draw two lines intersecting, you will have four points (one for each end) plus a new point at the intersection. This gives us some really fine control when it comes to manipulating or bending lines in Flash.

1. Using the Line tool, draw two intersecting lines so that you have a cross. 2. Using the Selection tool (black arrow tool, shortcut key V) hover over one of the

lines so you see a curve icon on the cursor (as in Fig 2.12). 3. Click and drag to bend the line

You can see how the new point has changed the way the line is bent.

Fig. 2.12 – A new point is created at the intersection, effectively splitting the two lines into four.

This allows each ‘arm’ of the cross to be manipulated independently

4. With the Selection tool still active, hover over the intersection of the two lines. You’ll see a corner icon on the cursor (as in Fig 2.13).

5. Click and drag to move the point.

Fig. 2.13 – When the new intersection point is moved, the lines follow

With the Selection tool, you can move any point and curve any line. This is very helpful when it comes to drawing shapes, especially if you’re using a mouse to draw. You’ll see what I mean in the sequence of images on the next page.

A d a m P h i l l i p s P a g e | - 11 -

Chapter 2: The Animator’s Tools - 1 2 - | P a g e

Fig. 2.14 –Straight lines are drawn with the line tool, then curved with the Selection tool

No steady hand or graphics tablet needed here! First the line tool is used to draw straight lines, then the selection tool is used to curve the lines into place.

You can see that after curving, you have lots of little unwanted line ends hanging off. These can simply be selected (see Fig 2.15) and removed with the Delete key on your keyboard.

Fig. 2.15 – Unwanted bits of lines are selected and deleted

After having removed all the overhanging line ends, the character is complete with nice, graceful lines.

Using and manipulating lines in this way has a nice simplicity that can make drawing the with mouse a surprisingly fast and precise process. As you’ll soon see though, some of the other stroke tools have the same benefits but with greater flexibility and control.

- 1 2 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 13 -

Stroke Styles Before we move on to the next stroke tool, we should take a look at the various styles that can be applied to our strokes.

Just like colour can be applied to a line, so can various line styles. To mess around with different styles, here’s what you do:

1. Select the line tool 2. Open the PI (Properties Inspector) either by pressing Ctrl + F3 or by going to

Window > Properties > Properties

Here you will see a number of options available for the stroke, including colour, stroke height (thickness of the line) and more.

Fig. 2.16 - You can experiment with these options a bit and draw some test lines on the stage.

The Custom button is particularly interesting, as it’s the place where we can be a bit more creative with the stroke. Click it now and you’ll see a window where you can do some more experimenting.

Fig. 2.17 – The Stroke Style window where you can mess about for minutes on end!

3. With some styles set, click OK and start laying some lines down on the stage.

Remember that these stroke styles can be applied to any number of individual lines. You aren’t restricted to how many different styles, colours and thicknesses you can use on a single drawing. Try it for yourself. No, really.. off you go. Do it. I’ll wait here.

A d a m P h i l l i p s P a g e | - 13 -

Chapter 2: The Animator’s Tools - 1 4 - | P a g e

Adding styles to a finished drawing If you have already completed your image, then decide you want to change some line styles, don’t worry. You can apply a style to your stroke after you’ve drawn it. You can do this in a couple of ways:

• Select and change

The first way is, with the Selection tool, select the stroke(s) you want to change, then alter it (thickness, colour, style) in the PI. This is a fairly basic method but can get a little fiddly on complex drawings.

• The Ink Bottle Tool

The best way is to use the Ink Bottle tool (S). The Ink Bottle lets you drop stroke colour, thickness and styles onto an existing line. Simply select the Ink Bottle from the Tools panel, choose your parameters in the PI, then click on the lines to which you want to apply that style.

Try it now by drawing something with the line tool as you’ve learned, then change the stroke properties in the PI. Using the Ink Bottle tool, simply click on the lines you want to change. As the icon suggests, it “spills” the properties onto the line.

Fig. 2.18 – The Ink Bottle tool is used to apply a heavier weight to the outside lines

The above style is quite a fashionable cartoon style. In the dwindling arena of traditional pencil & paper animation, it’s an expensive and time-consuming task for an artist to give this consistent heavy outline to a character but as you’ve seen, in Flash it’s a snap!

- 1 4 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 15 -

Follow me – Ink Bottle exercise

I’ve provided a working file if you’d like to take it for a test spin now. Start by finding 02_inkBottle.fla from the chapter file folder. Open it up and you’ll see an image of the Brackenwood witch on the stage. All of her lines are the same thickness and this exercise will show how to thicken the outside lines, as shown in Fig. 2.18 (above).

Ink Bottle exercise 1 1. With 02_inkBottle.fla open, select the Ink Bottle (S) tool. 2. In the PI, set the stroke height to 4.

Fig. 2.19 – Ink Bottle properties

3. With those properties set, just click the lines you want to thicken! 4. Marvel at your work.

Don’t forget that you can also change line colours and styles with the Ink Bottle. Now would be a good time to mess about with those possibilities.

A d a m P h i l l i p s P a g e | - 15 -

Chapter 2: The Animator’s Tools - 1 6 - | P a g e

Pen tool The Pen tool (P) may seem counter-intuitive for those coming from a traditional drawing background. With every other drawing and painting medium, lines are created by dragging a brush, pen or pencil across a surface.

The pen is different though, because it works by plotting points. You simply click several times and a path will appear between each click. Unlike the line tool, the Pen has built in options for manipulating individual points and creating curves. Let’s look at these in turn.

Pen tool exercise 1

This exercise will involve creating random shapes and lines on the stage. Don’t feel intimidated by the tool at all. We’re not creating a masterpiece here and you won’t break anything just by using the tool and putting random stuff on the screen. Follow along and we’ll look at the Pen tool features one-by-one.

1. Start with a blank stage. If it’s criss-crossed with lines from the previous exercises, you can wipe the stage clean simply by double-clicking the eraser tool in the tools panel.

2. Select the Pen tool (P) from the tools panel 3. Click in several random places on the stage:

Fig. 2.20 – Plotting points with the Pen tool

See how a line is automatically drawn between your clicks? You’ll also notice that the points themselves show up clearly, appearing as little squares and circles. Imagine you’re building a fence. Those little points are the posts, and the fence itself is created automatically from post to post!

4. Bring your cursor back to hover over the first point you created and a small circle will appear on the cursor icon, as in Fig. 2.20 (below).

- 1 6 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 17 -

Fig. 2.21 – Close the perimeter by clicking the first point

This little icon indicates that you can click the first point to close the shape. In other words, you can make an unbroken perimeter of points, like a square, triangle or any bizarre shape of your choice.

Incidentally, you may be wondering why this line appears in a colour you didn’t choose (it’s dark red in the screenshots). Well, this is what I like to call the ‘skeleton’ of the line, which is displayed using the layer colour. Simply choose a different tool (e.g. the Selection tool (V)) to show how the line really looks.

If you don’t like the colour of your line skeleton (yellow is particularly annoying), you can change it by double-clicking the layer colour in the Timeline. Then you can choose whatever colour you like for the layer.

Fig. 2.22 – Double click the layer colour to change it

When you learn to create custom colours in a later chapter, you can even assign those as your layer colours.

Note: Layer colours are merely for organisational purposes. They do not affect the colour of your drawings in any way.

So far you’ve seen how to create simple straight lines with the Pen tool. Before we move on to creating curves, you might like to open 02_pen2.fla (provided with the chapter download) and step through the following exercise.

Pen tool exercise 2

From the folder you downloaded with this chapter, double-click 02_pen2.fla to open the file. It’s compatible with Flash 8 and Flash CS3.

On the stage you’ll see some primitive shapes and a zig-zag path. We’ll do the path in a minute but first, let’s try the square.

1. Using the Pen tool, click on the square’s corner (indicated) to create a point.

A d a m P h i l l i p s P a g e | - 17 -

Chapter 2: The Animator’s Tools - 1 8 - | P a g e

Fig. 2.23 – The first click, indicated by the green dot.

2. Now go around the square, clicking on each corner to create a new point.

You know how the pen tool works now so it’ll come as no surprise that the sides of the square are being created each time you click on a corner.

As you click the last point you’ll see that you need to click once more on the first point to close the shape.

3. Hover the cursor over the first point again but before you click, stop for a beat to

see the little circle icon on the cursor. Once again, this indicates you can click to close the shape.

4. Click to finish the square.

The zig-zag line is next. Here you’ll learn how to make a line without having to make it an enclosed shape.

5. Click each point of the zig-zag shape except the final point. 6. Double-click the last point (the red dot) to end the stroke. Done!

So now you know two ways to finish a pen stroke. I’ll list them here alongside a couple more:

i. close the shape by clicking the first point ii. double-click

iii. click the last point a second time (this removes your last point AND ends the shape/line)

iv. right-click (ends the stroke but also brings up a menu) v. simply select another tool from the tools panel

- 1 8 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 19 -

Curving Pen strokes Grats for making straight lines! That will only get you so far though, so let’s get you chuckin some curves (that’s a cool euphymism for dancing, but it’s not what I mean here).

Pen tool exercise 3

As you saw earlier with the Line tool exercise, you can curve lines in Flash with the Selection tool (V). However it’s possible to create curves with the Pen tool by simply dragging each point as you create it.

If you’re happy to experiment with dragging the Pen tool around the stage, feel free to play for a while. I’ve prepared a practice file for you though, similar to the last one where you’ll learn to control each curve as you create it. If you wanna do it that way, open up 02_pen3.fla and let’s get started:

1. If your previous exercise is still open, close it now. 2. Double click 02_pen3.fla to open it in Flash.

Here you’ll see a couple of roughly sketched paths on the stage with some instructional icons. This will be a slightly more challenging exercise, so take your time and follow closely.

3. Where indicated (“start here”), click then drag along the dotted line. When you get to the red X, you can release the pen.

4. Repeat the above step for each of the white squares. 5. When you get to the red diamond, double click to end the path.

Not too complicated was it? Now for the second path. The first few points are curve points (click & drag) but the 4th one – the yellow point – is a corner point (just click – no drag).

There are some deliberate hidden dangers in this second path (the loop, for example) so if it screws up and seemingly unexplainable things start happening, never mind. If you get through it, well done!

Regardless of how skilled you may become with the Pen tool, there will be times when you need to manually tweak the curve even further to get exactly what you want. The next section will cover the tools you need for this process.

A d a m P h i l l i p s P a g e | - 19 -

Chapter 2: The Animator’s Tools - 2 0 - | P a g e

Subselect tool While technically we’re still talking about the drawing tools, let’s take a quick detour here to look at the Subselect tool. It’s a selection tool but you can manipulate points with it, so it’s directly related to drawing with the Line and Pen tools.

“SUB-select?” If a line or shape is an object then let’s call the points of that line the sub-objects. The subselect tool therefore allows us to manipulate those sub-objects.

Subselection is the ultimate in fine control and when you need precision in your drawings, this tool will be your best friend.

A word of warning. Using the subselect tool on a large or intricate sketch can cause Flash to hang for a bit. Why? Because you’re asking for access to possibly thousands upon thousands of points and Flash will need time to think before displaying them all. For now, try to use the subselect tool only on simple objects, until you get a feel for how it works.

Subselect not only allows you to display all the points that make up your lines and curves, but it also shows tangent handles for any selected point on a curve. The handles allow you to adjust that curve with precision.

Follow me – subselecting stuff

Let’s use the subselect tool now with a quick exercise in manipulating points.

Subselect tool exercise 1

This exercise demonstrates how to display and select points. First you will need to start a new Flash document (File > New > Flash File - Actionscript 3.0 or 2.0, doesn’t matter).

1. With the Pen Tool, draw a number of lines on the stage. Make some of them curved and some of them straight. Doesn’t need to be anything fancy.

2. Next, choose the subselect tool from the tools panel. It’s the white arrow and the keyboard shortcut is (A)

3. Click on any of the lines you’ve created Now the points and skeleton of the line are diplayed. These points will be hidden if you select any other tool so stay armed with the subselect tool for now.

4. Select any of the points by: a. clicking on it, or b. dragging a selection area around it (this method allows you to select

multiple points).

- 2 0 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 21 -

If you’ve selected a point from a curved line, you should see two tangent handles, a left and a right, displayed on the point. These handles can now be dragged to help you further manipulate the curve. Click and drag the circular tips of each handle.

Fig. 2.24 – Subselect for manipulating tangent handles.

If you click on a point and no handles pop up, it’s usually because there is no curve on that point. Therefore tangent handles won’t appear on corner points or points that are on straight lines.

Off you go! I could fill up pages and pages here about every little function of every tool but in the end, nothing is better than messing about with them to see what they do first-hand. Here are a few important point-manipulation tips to get you moving:

BREAKING THE TANGENT - When you’re moving the tangent handles around, you will soon find that both handles move together. With the Subselect tool, you can “break the tangent” by holding down the Alt key as you drag these handles. Now you’ll find it much easier to make those pointy wave curves!

CONVERT CURVES TO CORNERS - Now and then you’ll want to convert a curve point to a corner point. The Convert Anchor Point tool (C) is what you’ll be looking for and you’ll find it tucked away behind the pen tool. There you’ll also find the Add Anchor Point (=) and the Delete Anchor Point(-) tools.

CONVERT CORNERS TO CURVES - What if you want to convert a corner to a curve? For example, a straight line doesn’t have handles but maybe you want to bend that line or put a curve into that point. Again, with the Subselect tool, hold down the Alt key and drag any corner point. It will magically sprout a pair of handles! Awsm.

NUDGING POINTS - Aside from using tangent handles and playing with the curves, any selected point can be dragged to a new position, or nudged with your keyboard arrows. Try it now by selecting a few points and hitting your keyboard’s ←, ↑, → or ↓ a few times. (TIP: Hold Shift while you nudge points for more of a shove, than a nudge.)

A d a m P h i l l i p s P a g e | - 21 -

Chapter 2: The Animator’s Tools - 2 2 - | P a g e

Pencil Tool The stroke tools we’ve discussed so far allow you to create lines and shapes by plotting points. The pencil tool (Y) however, is more traditional as you draw by simply clicking and dragging. It’s a freehand line where the precision is determined only by the steadiness of your own pen (or mouse).

Just like the pen and line tools, a pencil line has all the same properties of other strokes:

• It’s made up of points that can be viewed by clicking the finished line with the subselect tool.

• You can set its colour, weight and stroke styles in the PI. • It can be manipulated with the Selection tool

Note: Remember that if you accidentally select a line you won’t be able to bend it. Simply deselect it by using the selection tool (V) to click any blank area of the stage.

There’s a sidebar comment about Selection accidents back on page 9.

Pencil tool options When you select the pencil tool, a new option will appear at the bottom of the tools panel. It allows you to select from three methods of drawing. They are:

Fig. 2.25 – The Pencil tool options

1. Straighten – Everything you draw with the pencil will become straight lines, perfect curves or circles. If you draw a slight arc, Flash will snap it to become a straight line. This is a helpful setting if you want a quick sketch to have straight lines, but it leaves you with very little control.

2. Smooth (the default setting) – This pencil setting will smooth your lines as you draw them.. in other words, it will ensure that there aren’t too many unneeded points in the line. It’s a great feature that removes all the little inconsistencies from your linework.

3. Ink – if you want Flash to just leave your effing lines alone without any level of smoothing, this is the setting you want. Be mindful however that lines drawn on this setting will have loads of points. More points means larger files and in extreme cases, slower playback in the Flash player.

- 2 2 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 23 -

Pencil tool properties With the pencil tool selected, your Properties panel will show all the same options as for the line and pen tools.

The exception here is when you have the pencil mode set to Smooth. The Properties panel allows you to control just how much smoothing with the value slider. Its default is set to 50, so experiment by drawing with lower and higher Smooth settings.

Rectangle, Oval and Polystar The Rectangle and Oval tools don’t need much explanation. The Polystar tool is a bit different though. It allows you to create polygons and star shapes of various types (handy for sparkles and light flashes).

To locate the polystar tool, click and hold the Rectangle tool in the tools panel. A small list will drop open, showing the rectangles and ovals (more on those later) and at the bottom, the Polystar tool. Select this tool now and click and drag anywhere on the stage.

Fig. 2.26 – Holy shit, a pentagon.

A default pentagon will be drawn. If pentagons frighten you, or perhaps your life is full of pentagons and it’s the last thing you want to see, quickly undo your last step with Ctrl + Z. Now direct your attention to the Properties panel.

With the Polystar tool selected, you’ll see some familiar elements in the Properties panel, namely stroke weight and styles. We also have a fill colour swatch because like the rectangle and oval tools, polystar is an auto-fill shape, meaning that when you create it, it’ll be automatically filled with a colour.

Fig. 2.27 – The Polystar Options in the PI

The thing we’re looking for is the Options button. Clicking this will bring up a small window of polystar options that allow you to create polygons or stars of many shapes.

A d a m P h i l l i p s P a g e | - 23 -

Chapter 2: The Animator’s Tools - 2 4 - | P a g e

Fig. 2.28 – Various stars and polygons created with the Polystar tool

This isn’t a technical manual so I can just leave it there by advising you to experiment with these values to your heart’s content.

Primitives The other types of rectangle and oval you can create are the primitives. Once again I’ll leave you to experiment with these shapes but here’s a quick exercise to get you started.

Follow me – Drawing primitives

1. Select the Rectangle Primitive tool from the tools panel (click and hold the tool button until the menu pops up).

2. Drag to create a rectangle primitive on the stage. In the Properties panel, you’ll see the familiar stroke and fill colour options as well as some value sliders for rounded corners – if you want to make webcomics with Flash, this feature is the easy way to make rounded speech bubbles and borders.

3. Drag these sliders up and down (unlock the little padlock to give each corner a different roundness value).

Fig. 2.29 – Left: all corners have same value. Right: unlocked for different values

After you’ve drawn the primitive, you’ll see it has handles on its corners. These can be dragged to adjust the roundness of the corners with the selection tool. Personally I find it easier to use the value sliders in the Properties panel, as in Fig. 2.29.

4. Moving on, now select the Oval Primitive tool – this one’s fun to play with.

- 2 4 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 25 -

5. Drag anywhere on the stage to create your oval primitive (remember that you can hold down the Shift key whilst dragging to create a perfect circle).

6. Once again, look down at the Properties panel and mess about with those value sliders, but this one’s actually more fun to drag the handles of the oval on the stage.

Fig. 2.30 – Messing about with Oval primitives

Stroke tools summary That about wraps it up for the Stroke tools. Once again, there are things we didn’t cover so now it’s up to you to get your face dirty and gain some experience with the tools in question. Who knows? When you get used to working in Flash, you may find that using the stroke tools are your preferred method of drawing.

A d a m P h i l l i p s P a g e | - 25 -

Chapter 2: The Animator’s Tools - 2 6 - | P a g e

Fill Tools There’s something about drawing with a freehand brush stroke that feels free and unrestrictive, almost the opposite of drawing with the line and pen tools. If you’re a traditional artist who’s used to drawing with pencils, ink and paint on real paper, then you’ll feel right at home with the brush tool (provided that you’re using a graphics tablet, of course!) The brush has a number of built-in, adjustable options to make painting a pleasant experience.

Fig. 2.31 – 100% brush tool and fills. From my movie “Waterlollies”, ©2007.

When you start to use the fill tools, you can really breathe life into a scene and flood whole areas with colour. Let’s start by looking at the brush tool and its specific options, then we’ll move on to the paint bucket, with which we really start flinging paint around.

- 2 6 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 27 -

Brush Tool Just like the pencil tool and its more traditional way of drawing lines, you click and drag on the stage to create brush strokes. The difference though is that even though they look like lines, brush strokes do not have a single skeleton of points. Instead, the foundation of a brush stroke is more like a skin, than a bone.

Fig. 2.32 – Fills have many more points than strokes do.

Think of a brush stroke as an area of colour, contained by a perimeter of points. For this reason, brush strokes have at least twice as many points as say a pen, line or pencil stroke.

More points? “So what?” you say.

These vector points mean file size. They also require processing power for a computer to generate them all. Therefore a very complex vector image can be larger in file size AND can slow computers down.

Many people have emailed me asking for help because their 30-second movie is 10MB and plays like a slideshow. Soon we’ll talk about my response to those emails: how to optimise Brush strokes.

The beauty of the brush tool is in its organic stroke with variable thickness. However this particular feature is only accessible to artists using a graphics tablet. If you’re drawing with a mouse, you won’t be able to use the ‘pressure sensitivity’ feature, which was mentioned waaAAy back on page 5.

A d a m P h i l l i p s P a g e | - 27 -

Chapter 2: The Animator’s Tools - 2 8 - | P a g e

Brush Tool options When you select the Brush (B), a couple of brush-specific options will appear at the bottom of the tools panel.

First up, you can choose the paint colour, just as you did with the stroke tools earlier in the chapter. Additionally there are a bunch of other icons and buttons to discover.

We’ll skip one or two of them for now so let’s look at the main ones to get us started.

Fig. 2.33 – Brush tool options

1. Object drawing – this is the same as we discussed in the stroke tools section. If this button is turned on, then each stroke of the brush will be treated as a separate object which can be moved and manipulated independently. Turn the button off and your strokes, however many there are, will melt together as one streak of paint.

2. Brush size – The two icons here can be easily confused at first, because they look so similar, but it’s the top one you want. It controls the size of your brush. Obviously, the smaller the brush size, the thinner your brush strokes will be.

3. Brush shape – This is one that you may never need to touch. It controls the shape of the brush tip. The angled shapes can help you with some calligraphic effects and someone out there may find a use for a square brush (?) but personally, I rarely use anything but the round shape.

4. Sensitivity – As we discussed back on page 6, this button will only appear if you have a graphics tablet attached. With the button toggled on, your brush strokes can have a variable thickness, depending on the pressure you use on the tablet (harder pressure makes thicker strokes, just like real!)

Note: If you have a graphics tablet attached but you’re not seeing the sensitivity button, you may need to update or re-install your tablet drivers.

- 2 8 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 29 -

Brush Tool Properties With the brush tool selected, you’ll find that the Properties panel is uncomplicated with only two brush properties: the fill colour and the Smoothing value.

Fig. 2.34 – Brush tool properties

• Fill colour – as mentioned previously, you can simply click the colour swatch to choose a colour for drawing or painting. Just bear in mind that when you use the brush, you’re using the fill colour to draw, unlike the stroke tools which use the stroke colour.

• Smoothing – this works like we saw earlier with the pencil tool’s smoothing slider. A higher value means that Flash will remove more points from the stroke as you draw. The lowest setting (zero) and Flash will leave your lines the hell alone.

My personal comfort level on Brush smoothing is a value of about 20. On this setting, I find that I have a lot of control over the line, while at the same time Flash is removing some points and smoothing out the stroke slightly.

Follow me – Brush smoothing exercise

If you plan on doing a lot of drawing directly into Flash, you’ll need to know more about brush smoothing and how it works to clean up your lines and reduce the file size of your scenes. Here’s a quick exercise to demonstrate how brush smoothing works.

Brush smoothing exercise 1 1. Select the brush tool (B) from the tools panel, if it’s not already selected. 2. With the Property Inspector open, lower the brush smoothing to zero (0). You

can either type the value into the field or you can drag the slider down.

Fig. 2.35 – Set smoothing to zero

A d a m P h i l l i p s P a g e | - 29 -

Chapter 2: The Animator’s Tools - 3 0 - | P a g e

3. For a thin brush stroke, select a small brush size (the smallest will do just fine). 4. Draw an ‘S’ shape on the stage.

Fig. 2.36 – The ‘S’ shape, drawn with zero smoothing

The resulting line is unsmoothed so you may find that it’s a little lumpy and uneven. You may even think it’s quite ugly. Aesthetics aside, let’s have a look at the points that make up this simple brush stroke.

5. Grab the subselect tool (A) and click the brush stroke that you’ve just drawn on the stage.

Fig. 2.37 – The multitude of vector points on an unsmoothed brush stroke

Gah! Just look at all those points! With zero smoothing, this single brush stroke is absolutely packed with points, like ants on a streak of honey. Can you imagine how many points would be in a full screen sketch? Bazillions (approx).

- 3 0 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 31 -

We’re going to increase the smoothing now and repeat the demonstration.

6. Select the brush tool (B) from the tools panel 7. In the Property Inspector, raise the smoothing to 100 (!)

Fig. 2.38 – OMG Brush smoothing up to 100!

8. Again, with the thinnest brush stroke, draw the same ‘S’ shape on the stage.

Fig. 2.39 – This ‘S’ has had the shit smoothed out of it!

Uh-oh.. the smoothing has gone absolutely nuts and the stroke now has been smoothed far beyond what we want, going so far as breaking up the drawing. This is no good.. nice clean lines though, huh?

9. With the subselect tool (A), click the brush stroke to view its points.

A d a m P h i l l i p s P a g e | - 31 -

Chapter 2: The Animator’s Tools - 3 2 - | P a g e

Fig. 2.40 – Full smoothing has removed far too many points

A hell of a lot better file size but it looks nothing like the ‘S’ you planned. You need to find a middle-ground. A level of smoothing that doesn’t mess with your lines too much, yet still cleaning them up and reducing the file size.

Experiment a bit now by sketching with the brush tool on various smooth settings. You’ll soon find your own personal magic number and grow accustomed to working with that setting.

Before you get too comfortable with a particular smoothing value though, you might be interested in a couple more smoothing and file-size reduction options, which we’ll be looking at towards the end of the chapter. Before we do that though, we’re going to look at the next most awesome tool in the program.

- 3 2 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 33 -

Paint Bucket This lovely tool allows you to flood an area with whatever colour choose. The catch is that the area must be completely enclosed, otherwise the paint bucket (K) doesn’t work.

You’ve seen the rectangle, oval and polystar shapes and how they are auto-filled. The outlines of those shapes are unbroken in order to ‘keep the paint in’, so to speak. If there are gaps in your outlines, the paint bucket refuses to work.

Fig. 2.41 – In the 2nd image, the skin colour also flooded his hair (see the gap?)

A d a m P h i l l i p s P a g e | - 33 -

Chapter 2: The Animator’s Tools - 3 4 - | P a g e

Paint Bucket options Like most tools, the paint bucket has a couple of specific options in the tools panel. With the idea of gaps fresh in our minds, let’s look at the first paint bucket option.

1. Gap Size

By default, the paint bucket has a small level of tolerance for gaps in your outlines. This means that if there’s a tiny gap, Flash will forgive you and fill the area, regardless.

There are 4 settings for gap tolerance: • Don’t close gaps • Close small gaps • Close medium gaps • Close large gaps

The gap size setting detects the distance between lines and decides whether or not it should allow paint through – or whether it should allow the paint bucket to work at all. This can cause problems with certain drawings, as you can see in the examples below.

Fig. 2.42 – Gap tolerance can be helpful or bothersome.

Occasionally you want the paint to go through gaps, so while gap size allows us to be a little bit lazy from time to time, it’s not the answer to everything. Sometimes you just have to grab the magnifying glass (Z) zoom in, go hunting for the gap and close it!

2. Lock fill

In a later chapter we’ll be looking at applying multicolour gradients with the paint bucket. The lock fill button allows you to apply the settings of a single gradient to multiple objects. Let’s come back to this one after we’ve looked at gradients and textures a bit more closely.

- 3 4 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 35 -

Paint Bucket properties Well this is a waste of a paragraph! The Properties panel for the paint bucket only shows one item: the fill colour, which by now needs no explanation. Bah, what the hell.. let’s put a screenshot here anyway:

Fig. 2.43 – The one Paint Bucket property

Fill tools summary We’ve covered the fill tools but that’s not to say we’re done with fills. In an upcoming chapter you’ll be learning how to mix your own custom colours including gradients and textures which help to simulate depth and really bring your scene to life.

You might be interested to know that I only EVER use fill tools in my Flash work. Everything you see in my Flash movies (apart from text) was done with the Brush tool, the Paint Bucket and all their options that we’ve just covered.

Fig. 2.44 – The final scene of “Waterlollies”, ©2007.

A d a m P h i l l i p s P a g e | - 35 -

Chapter 2: The Animator’s Tools - 3 6 - | P a g e

Selection and manipulation tools We’ve already seen the most common of these, namely the selection tool (V) and the subselect tool (A). Let’s talk a bit more about the features of each and we’ll also look at another powerful tool in this particular category.

The Selection tool As you now know, the black arrow (V) is the one we use for selecting objects. You can grab a section of a drawing or you can drag an area of selection around any element to select the whole thing.

How selection works

In Flash strokes, fills and anything with separate properties are treated as separate objects. This means that if you draw a character’s outline with the pencil tool, then fill him with paint, the coloured areas can be selected separately from the outlines with a single click.

Likewise, areas of a particular colour fill are treated as separate to other areas of colour fills. This means that you can select a colour in the drawing and delete, move or change it without affecting the surrounding areas of colour and line.

How selection looks

As briefly mentioned on page 10, knowing what’s selected and what’s not is very important in Flash. When a stroke or fill on the stage is selected, it gets a type of ‘gauze’ appearance. This is so that we can see at a glance that the item is selected.

Any object that is without the gauze effect isn’t selected.

Note: Any point or curve manipulation will not work on a selected object. If you try bending a line that shows the gauze selection effect, you’ll move the object instead (see ‘Deselection’ and ‘Moving selections’ below).

Deselection

Selection is one thing, but how do you deselect? It’s important to know how to have nothing selected. The above note is one great reason to deselect an object.

Using the selection tool, deselection is a simple matter of clicking any blank area of the stage, even outside the stage. Always make sure you have the selection tool armed before you go clicking blank areas of the stage. If you have any of the drawing tools armed, you’ll be placing little dots all over the place, which incidentally is another common beginner mistake.

- 3 6 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 37 -

Multiple selections

A single element can be selected with a single click, but if you fancy selecting a number of individual objects, just hold down your Shift key while single-clicking each one.

This goes for fills, strokes and any other object on the stage.

Selecting entire outlines

As you may or may not have discovered in the Stroke Tools sections, strokes can be selected in segments by single-clicking, but the entire outline of an object can be selected by double-clicking with the Selection tool. This only works with stroke outlines (not brush outlines) and it’s a very useful function. The outline segments need to be connected for the double-click selection to work though, so any detached outlines will not be selected.

Moving selections

You saw back on page 10 that the selection tool is also a move tool. When hovered over an already selected object, the cursor gets a 4-way move icon. With the selection tool, simply drag any selected object and move it around the stage.

Selection tool options With the selection tool armed, the lower part of the tools panel (as always) will present you with some unique options. Here’s what they are:

1. Snap to objects

The magnet icon is ON by default so sometimes it’s an annoying pain in the arse. At other times though, it’s just plain brilliant and is definitely a huge time-saver.

Snap to objects causes your selected object to stick to other objects. This is helpful when you’re positioning stuff and we’ll be using this feature in a later chapter. It’s not always needed though, so if it ever gets annoying, simply click it off.

2. Smooth

Lines and brush strokes that are selected can be smoothed with a click of this button. As we saw earlier with brush strokes having many points, you can reduce the number of points after the line has been drawn.

3. Straighten

this works similar to Smooth, but it’s designed to remove curves, rather than smooth them out. Any gentle arcs will become hardened lines after a few clicks of this one.

A d a m P h i l l i p s P a g e | - 37 -

Chapter 2: The Animator’s Tools - 3 8 - | P a g e

Selection tool properties As you learned in Chapter 1, the Properties panel is context-sensitive, meaning that it displays properties of whatever is selected. With the selection tool armed though, the Properties panel reverts to the document properties, showing frame rate, stage dimensions and background colour. If the document properties are ever showing in the Properties panel, you’ll know that you have nothing selected.

Fig. 2.45 – The document properties appear in the PI when nothing is selected

Free Transform tool This one’s made of pure awesome. The free transform tool allows you to manipulate the crap out of your drawings, from simple perspective distortions to full ripple and wave effects.

You’ll find the Free Transform tool (Q) up top of the Tools panel with the other selection and manipulation tools. You can use it to select drawings as well as distort, move, scale, rotate and skew them. Select it now and let’s take it for a quick spin.

Follow me – Free Transform tool exercise

What do you call a tool that can scale, rotate, move, skew and distort your graphics? I guess ‘Free Transform’ is quite appropriate, huh? Let’s look at each of its functions.

Free Transform tool exercise 1 1. Create a simple image on the stage with whatever tools you like. I’ve used the

Brush tool to paint a simple red splat (as seen on the next page in Fig. 2.46). 2. Choose the Free Transform tool from the Tools panel (or just press Q on your

keyboard). 3. Now using the Free Transform tool, drag a selection around your image.

Wow that was a quick exercise.. but what’s all that crap around the drawing now? Brilliant craziness, that’s what!

- 3 8 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 39 -

The Free Transform “envelope” is surrounding your drawing. This envelope contains a bunch of transformation handles (black squares). Hover your cursor over these handles, one by one and you’ll see the cursor icon change for each.

Fig. 2.46 – The Free Transform envelope and its handles.

As you can probably tell, each of these little handles allows you to manipulate your drawing or object in different ways. They’re all there in Fig. 2.47 (below). A breakdown of all these functions will keep us busy for the next few pages.

Fig. 2.47 – Functions of the Free Transform handles

A d a m P h i l l i p s P a g e | - 39 -

Chapter 2: The Animator’s Tools - 4 0 - | P a g e

FT tool functions 1. Rotate

Hovering the cursor just outside any corner of the envelope will bring up the rotate icon. Simply click and drag to rotate the entire selection.

• Shift key – Snaps the rotation to 45º increments • Alt key – Forces rotation to pivot on opposite corner

Note: The selection will rotate around the pivot point in the centre. As you’ll see in just a moment, this pivot point can be moved.

Fig. 2.48 – Rotating the selection. note the preview outline.

2. Scale (unconstrained) To scale the selection, hover over any corner handle. Here the term “unconstrained” means that the vertical and horizontal scaling are independent of one another. This is indicated by the broken arrow icon.

• Alt key – hold it down to centre the scaling on the pivot point.

Fig. 2.49 – ‘Unconstrained’ has independent vertical and horizontal scaling.

- 4 0 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 41 -

3. Stretch horizontal When dragged, the left and right side handles will squash or stretch the selection horizontally in the direction you drag.

• Alt key – hold it down to centre the stretch on the pivot point.

Fig. 2.50 – Horizontal stretch.

4. Distort (constrained) Over corner handles, hold down the Ctrl and Shift keys on your keyboard to use constrained Distort. Drag up & down to distort the vertical edge, or drag left & right to distort the horizontal edge. If you release the Shift key you will have an unconstrained distort (see #6).

Fig. 2.51 – Constrained distortions: horizontal (left) and vertical (right)

A d a m P h i l l i p s P a g e | - 41 -

Chapter 2: The Animator’s Tools - 4 2 - | P a g e

5. Skew horizontal Skewing an object horizontally will slide the bottom and top edges left and right in opposite directions. This gives it a horizontal rhomboid shape.

• Alt key makes the skew pivot from the centre point.

Fig. 2.52 – Horizontal skew using the top edge

6. Distort (unconstrained) Hold down Ctrl over any corner point to get the Distort icon. An unconstrained distortion allows you to drag just one corner of a selection. Distortion can help you simulate perspective, for example skewing the word ‘STOP’ so that it appears to be painted on a road.

Fig. 2.53 – Unconstrained distortion.

- 4 2 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 43 -

7. Skew vertical Skewing an object vertically will slide the left and right edges up and down in opposite directions. This gives it a vertical rhomboid shape. Hold down Alt to make the skew pivot from the centre point.

• Alt key – hold it down to centre the skew on the pivot point.

Fig. 2.54 – This selection is skewed from the right edge

8. Scale (constrained) Holding down Shift while scaling from any corner point will constrain the scaling so that vertical and horizontal scaling are locked. Note the unbroken arrow icon.

• Alt key – hold it down to centre the scaling on the pivot point.

Fig. 2.55 – Constraining vertical and horizontal for uniform scaling

A d a m P h i l l i p s P a g e | - 43 -

Chapter 2: The Animator’s Tools - 4 4 - | P a g e

9. Stretch vertical When dragged, the top and bottom handles of the envelope will squash or stretch the selection up or down.

• Alt key – hold it down to centre the stretch on the pivot point

Fig. 2.56 – Stretching upwards using the top handle.

Almost there! The last thing we need to look at is that pivot point, around which so much has centred over the past few pages.

The pivot point of a drawing is only accessible from the Free Transform envelope. You can then move the pivot point anywhere on the stage. However if you deselect the drawing, then reselect it with the FT tool, the pivot point will have returned to the middle of the selection.

Free Transform tool options When you select the Free Transform tool, a few options appear at the bottom of the Tools panel but there’s only one of these that we haven’t seen yet. The first three, we’ve covered over the past few pages:

a. Rotate & Skew

b. Scale

c. Distort

The fourth one though, is pretty special:

d. Envelope Click this button to activate the special extra distorty envelope.

- 4 4 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 45 -

Fig. 2.57 – The ‘Envelope’ envelope (?!)

Well that looks a little crazy doesn’t it? If you look closely though, there are square handles and round ones.

• Square handles – These are for distortion, just like the distortion functions we’ve already discussed.

• Round handles – Just like the tangent handles on vector points, you can control the distortion curves. Holding the Alt key will break the tangents if you need to.

It takes a bit of practise to learn to control, but it’s fun trying. Just remember though, if you deselect the object and reselect it, the envelope will be reset (also, this cannot be undone) so try not to deselect the object until you’ve finished your distortion work.

Fig. 2.58 – The ‘Envelope’ envelope in action

Using distortions and envelopes can sometimes interfere with vector points in unexpected ways, as illustrated in the image above.

You can see that the drop at the bottom of the image lost a section of colour as the vector points were moved around. Nobody knows why.. it’s just one of those crazy mathematical screw-ups. Thankfully though, they’re usually fairly minor and rare.

That wraps it up for the Free Transform tool. We managed to fit it into only 6 pages!

A d a m P h i l l i p s P a g e | - 45 -

Chapter 2: The Animator’s Tools - 4 6 - | P a g e

Lasso Tool With the Lasso tool (L) we cover the last of our selection tools as well as the last of our entire Tools panel coverage.

The Lasso tool is just like the Selection tool with the same function, but the difference is that you can draw freehand loops and otherwise oddly shaped selections.

Once you’ve selected something with the Lasso, you can move and manipulate the selection, as well as grab the Free Transform tool for scaling, rotating, etc.

Fig. 2.59 – Difficult selections made easier with the Lasso tool.

- 4 6 - | P a g e A n i m a t i o n

Chapter 2: The Animator’s Tools  P a g e | - 47 -

Lasso Tool options With the Lasso tool selected, you’ll see a couple of options appear at the bottom of the tools panel (surprise, surprise!).

• Magic Wand

With this option enabled, the Lasso can select entire areas of common properties (i.e. the same colour, stroke thickness or whatever) with a single click.

• Magic Wand Settings

Why this gets its own option button, I really don’t know. It’s just a Settings window for the Magic Wand but I never use it so I’ll leave it up to you to discover.

• Polygon Mode

This option is very useful! Rather than a freehand selection, you can plot your selection with clicks, similar to the way we used the Pen tool. A double-click finishes the selection.

Fig. 2.60 – The Lasso in Polygon Mode.

A d a m P h i l l i p s P a g e | - 47 -

Chapter 2: The Animator’s Tools - 4 8 - | P a g e

Tools Summary Despite the fact that this chapter is almost 50 pages with 10,407 words, we haven’t quite covered everything. Like I mentioned briefly before though, this isn’t a technical manual but a practical guide to using those tools we specifically need for animation.

If there’s anything we didn’t cover that you can’t figure out, please feel free to contact me through my site and I’ll do my best to answer.

The next chapter will be all about creating graphics using the tools we covered in this chapter. We’ll learn how to prepare those graphics for animation with the concept of Layers and learning to use the Library. As if that isn’t enough to keep us occupied, I’ll show my appreciation for you by throwing in some nice personal Flash tricks that I’ve developed over trillions of lonely hours in front of my computer.

As always, thanks for your support and I hope you found this chapter useful!

- 4 8 - | P a g e A n i m a t i o n

BCA: Flash Animation by Adam Phillips 

 

nment. All rights reserved. Copyright ©2008 Brackenwood Entertai

ne from Sydney, Australia Published onli 

Published by  

t,  Brackenwood Entertainmen

on NSW,  PO Box 177, Croyd

2132 AUSTRALIA 

www.biteycastle.com H 

Technical Editor: Jeanette Imer