HOW TO cheat IN AdobeFlashCS5
The art of design and animation
By Chris Georgenes
Focal Press
Copyright © 2010 Chris Georgenes
All right reserved.
ISBN: 978-0-240-52208-1
Chapter One
Design styles THE TECHNIQUES described in this book assume you have a reasonable working knowledge of Flash. In later chapters, we'll discuss ways of working that involve symbols, timelines and various animation techniques. This first chapter will serve as a refresher course on the fundamentals of designing for animation and introduce a few cool drawing techniques along the way.
Later on, we'll go into more detail on how to work with symbols, motion and shape tweening, and the timeline.
Drawing with basic shapes
IF YOU PLAYED WITH Lego building blocks when you were a kid, you may find this drawing style familiar (or at least intuitive). You'll use several basic shapes and then connect them together. This technique requires breaking down each body part of the character into basic building blocks using the Rectangle and Oval tools. It's a fast and efficient way to simplify the character into manageable sections while achieving a very professional cartoon style.
Here, we will use shapes to cut in to other shapes. This is a very useful technique for cutting holes out of objects as well as altering the edges of shapes. Of course these techniques can be applied to background elements as well.
The key here is using simple shapes to build complex images suitable for Flash style animation, which we will get to in later chapters.
1 Here is my original pencil sketch that I have scanned and saved as a JPG file. I prefer to start with pencil on paper because I simply like the feel of this medium and the results are always a little more, shall we say, artistic.
2 After importing the scanned image, insert a blank keyframe on frame 2 and turn on the Onionskin tool. This allows me to trace the image in a new frame while using the original image as a reference.
3 Using the Oval [O] and Rectangle [R] tools allows us to quickly achieve the basic forms of our character. The Selection tool is great for pushing and pulling these basic fills into custom shapes based on our sketch.
4 Turn on the Snap option (magnet icon), and drag corners to each other so they snap together. This process is not unlike those Lego building blocks you played with when you were a kid.
5 Next, click and drag the sides of your shapes to push and pull them into curves. This is a fun process as your character really starts to take shape.
6 To achieve the black outline, select the shape, copy it using [??] [ctrl] and paste it in place using [??][Shift][V][ctrl][Shift][V]. While it's still selected, select a different color from the Mixer panel and scale it about 80% smaller.
7 The original shape is still present underneath your new shape. The trick is to position the new shape off-center from the original to achieve an outline with a varied weight.
8 The parachute uses a slightly different technique I like to call "cutting in". Let's start with the Oval tool for the parachute's basic shape.
9 You can cut into this shape using different colored shapes such as this blue oval. Position it over the area you want to cut into, deselect it, then select it and hit the Delete key [Delete].
10 Once your shape is the way you want it, you can use the Ink Bottle tool [S] to quickly add an outline to it.
HOT TIP
As you complete each individual section of your character, cut and paste them into new layers and lock them. This will prevent them from being inadvertently edited. Better yet, convert them to symbols while you are at it.
SHORTCUTS
[MAC][WIN][BOTH]
Geometric and organic shapes
DESIGNING WITH BASIC SHAPES is not limited to characters. For most Flash projects, I start with primitive shapes no matter what the object is I am designing including props and backgrounds. At their most basic level, my designs start with simple ovals or rectangles and from there I build upon these shapes to create relatively complex images. This is what I love about working with vectors: the ability to push and pull them into anything I want as if they were made of clay.
1 To suggest a fully mature tree with a plumage of leaves, you don't actually have to draw each individual leaf. Since the design style is targeted at young children, it's valid to keep the level of detail to a minimum. Select the Oval [O] tool and your desired fill color and create an oval shape. Next rotate it or skew to position it at an angle. Copy and paste it and scale it to add more "leaves". Rotate and position the new oval as shown above. There's no wrong decision at this stage as it is entirely up to you as to how much variation you want your tree to have.
2 Repeat the previous step by copying and pasting the same oval to suggest a larger plumage of leaves. Scale, skew and rotate the shape and position it off-center from the original oval. The objective here is to to create a nonsymmetrical organic shape to suggest the imperfections that are found in nature. Remember, nothing in nature is perfectly horizontal, vertical, round or square, which is why there's no wrong way to do this. It's nearly fullproof since you can't really make a mistake. In fact, mistakes are encouraged. As you can see I used a total of 4 ovals to complete my plumage of leaves. I could have used more or less but I felt this was just the right amount. Feel free to experiment with the number of shapes and variations for your tree. At this stage I couldn't help but add a little bit of texture to suggest some volume using the Brush [B] tool and a subtle yellow color.
3 The trunk of the tree is designed in a similar fashion. Create a basic rectangle using the Rectangle [R] tool and use the Selection tool [V] to push and pull the sides and corners to give the trunk a slight curve and taper. Each branch is a duplicate of the tree trunk shape. Hold down [??][alt] and then click and drag the trunk to create as many duplicates of it as you want. Scale, skew, rotate and position each duplicate shape so that they resemble tree branches.
4 The birdhouse is also built using simple shapes. The key here is to turn on the Snap to Objects feature represented by the magnet icon in the toolbar when you select the Rectangle [R] tool. Create a perfect square by dragging with the Rectangle tool while holding down the [Shift] key. Using the Subselection [A] tool, select one of the corner points and press the [Delete] key. The square is now a triangle. Rotate the triangle using the Free Transform [Q] tool. Hold down the [Shift] key to constrain the rotation to 45 degree increments. Rotate the triangle until the bottom side is flat and the top side is pointed.
5 With Snap to Objects on, drag a corner point to another corner point until they snap together. This makes it easy to merge different shapes together accurately. To complete the front side of the birdhouse, create another square and drag the top 2 corner points to the bottom 2 corner points of the triangle with the Selection [V] tool until they snap together. Skew the shape with the Distort tool (subselection of the Free Transform [Q] tool) to suggest perspective.
6 The remaining additional shapes for the birdhouse are also (you guessed it) simple rectangles and ovals. Keeping the Snap option turned on, drag corner points to each other to join shapes and as Object Drawings you can also overlap shapes to complete the image.
HOT TIP
As you can see each shape has a bounding box around it. This is because Object Drawing mode [J] was turned on at the time the objects were drawn. This allows you to overlap objects without merging them together.
SHORTCUTS
[MAC][WIN][BOTH]
The Brush tool
THE BRUSH TOOL is probably the most versatile of all the drawing tools, especially when combined with a pressure-sensitive tablet. Drawing with the Brush tool is essentially drawing with shapes. It's the tool that feels the most natural due to the support of pressure sensitivity and tilt features.
Wacom makes a series of popular tablets that work great with Flash. Wacom tablets can work in conjunction with your existing mouse, or replace your mouse completely. Many digital designers use a tablet with any number of graphics editors including Adobe Photoshop and Adobe Illustrator.
When to use the Brush tool is really a matter of style and preference. For this character, I wanted to achieve a loose, hand-drawn feel, so the brush was a perfect choice.
1 The first adjustment you will want to make when using the Brush tool [B] will be the amount of smoothing you want applied. This option appears as a hot text slider in the Properties panel when the Brush tool is selected. The right amount of smoothing to use depends on personal preference. The higher the number, the smoother the line (and vice versa). For this character, we'll choose a low amount of smoothing to maintain an organic quality to the line work.
2 Always design your characters with the intended purpose in mind: animation. Form follows function and the animation style can often dictate how a character is designed. If you are a perfectionist like me, you'll want the hair to look as much like individual curls as possible. To do this, avoid designing the hair as one large flat object. Instead, draw individual sections of curls to keep them as separate objects so they can be moved independently of each other. Turn on Object Drawing mode (subselection of the Brush tool). Object Drawing mode allows you to draw shapes as separate objects. These objects can be drawn over each other without them being merged together. You can select each Object Drawing with the Selection tool [V] and then convert each one to a symbol.
3 To remain consistent with the loose drawing style, you may want to add a fill color that bleeds outside of the outlines a little. There are several ways to achieve this by painting on a new layer below the outline art or setting the brush to "Paint Behind" and painting on the same layer.
4 The final result represents the loose hand-drawn style we were after. The line quality feels natural and reflects the imperfections the human hand is capable of. We are not trying to achieve a slick design style here, but rather to convey a looser line quality representative of hand-drawn artwork. This style lends itself well to a child character as the integrity of the line is similar to how a real child would draw.
HOT TIP
Experiment with different stage magnifications when drawing. I prefer to draw on a larger scale and with the stage magnified about 400%. The result is typically a smoother line quality.
SHORTCUTS
[MAC][WIN][BOTH]
Mixing colors
The Flash CS5 Color panel gets a slight facelift. Instead of choosing between HSB or RGB we now have both displayed simultaneously and all color values are accurately controlled using hot text sliders. Mixing colors in Flash has never been easier or more accurate. The creative folks over at Big Pink asked me to create an animation for children between 2 and 5 years of age. Because of the target audience I wanted the animation to have a soft yet inviting color palette.
1 My typical workflow when mixing colors is to click and drag within the gradient window in order to select the approximate color I'm after. Once I have this color selected I like to use the hot text sliders to fine-tune my color selection. Hue and saturation can play an important role in the design process and for this particular background image I wanted to keep the colors muted to avoid overpowering the characters that were added later on. As you can see here, the main color of the house has a very low level of saturation but enough brightness to maintain a good level of clarity.
2 Once again the colors of this house are easily muted by lowering the saturation keeping their brightness relatively high. The green for the tree is slightly more saturated compared to the other colors but overall still muted.
3 Once I had the overall pink color selected, mixing the darker shade of pink required a simple brightness adjustment. The large color swatch at the bottom of the Color panel will split to reveal the current color being mixed on top of the original color. This provides a visual reference for how the new color will contrast against the original color.
HOT TIP
You can use the Flash Color panel to pick any color from anywhere on your screen even outside of Flash! Just click on the fill color swatch to activate the color picker and then click on the area of your screen that contains the color you desire.
Advanced Color Effect
The advanced color effect separately adjusts the alpha, red, green and blue values of the instance of a symbol. It can be used in a variety of ways to suggest the tone of your graphic design or the mood of an entire animated scene. Let's take a look at how to adjust the color values of a symbol using the RGB hot text sliders. In the Color Effect section of the Properties panel, change the style mode to Advanced.
1 Select the symbol containing your artwork Using the hot text sliders, change the value for red to 100% and both green and blue values to 0%. An overall hue of red will be applied to the symbol. Increasing the amount of green while decreasing red and blue will result in an overall greenish hue. Increasing the amount of blue while decreasing red and green will follow suit with an overall bluish hue.
2 Red, green or blue will not always satisfy your color needs. By varying the amouns of red, green and blue you can come up with almost unlimited variations of color tones to suit your design needs. Here I have an almost equal mix of red and green but no blue at all.
3 If the red, green and blue percentages aren't enough, you can produce more values by adjusting the values in the right column. These values will get added to the percentage values in the left column. For example, if the current red value is 100, setting the left slider to 50% and the right slider to 100% produces a new red value of 150 ([100 x .5] + 100 = 150).
HOT TIP
The advanced color values can also be animated over time using Motion tweens. Check out the animated example on page 14.
Animated Color Effect
1 As animators we occasionally need to find ways to visually suggest the passing of time. One of the easiest ways to do this is to change the overall hue of an entire scene or background. As we know, this process naturally takes several hours, but through animation we can speed up time to convey the effect. In its initial shot, this quaint suburban home is designed to represent daytime, probably early afternoon given the angle of the shadow across the front door. The entire background has been converted to a symbol and a Motion tween has been created by right clicking over the symbol and selecting Create Motion Tween. Insert frames in the tween span by clicking on a frame further down the Timeline and clicking the F5 key. With the tween span extended, the hue of the entire scene can now be changed via the Color Effect section of the Properties panel.
2 Make sure the frame indicator is at or near the end of the tween span. With the Properties panel open and Color Effect section expanded, select the symbol containing the background image. Using the hot text sliders, adjust the hue of the symbol instance. Here I have removed the red and green values by entering a numerical value of "0" for both and increased the amount of blue to suggest a cooler range of colors across the entire image. This implies a lack of sunlight and creates a convincing night time mood. Position the frame indicator back at frame 1 and press the [Enter] key to playback the animation. The Motion Tween span will interpolate the difference in color values between the keyframes, resulting in a dramatic time lapse animation similar to the transition from day into night. You are not limited to just day and night as this technique can be used to imply a change of mood for dramatic effect.
SHORTCUTS
[MAC][WIN][BOTH]
(Continues...)
Excerpted from HOW TO cheat IN AdobeFlashCS5 by Chris Georgenes Copyright © 2010 by Chris Georgenes. Excerpted by permission of Focal Press. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.
Loading...