home page
CUSTOMIZATION
FLASH DESIGN HELP
AFFILIATE PROGRAM
CONTACTS
 
Welcome to FlashTemplateZone! - The ZONE of great templates, highest quality and friendly support. In our ZONE we have a huge collection of various types of templates: Free Flash templates, Free Website templates, osCommerce templates, Free Flash intro templates. Why we made it free? For one purpose -to let our customers feel more comfortably at further possible purchase. You can download our Free Website Templates without any CONDITION - truly FREE! Try your skills with our free templates and you will feel confidently. If you feel good with edit, 100% you will be able to edit and customize your commercial template by yourself. If no, than it's not a problem at all. Please refer to CUSTOMIZATION zone.
TEMPLATES BY TYPE

TEMPLATES BY THEME
 
Flash design tutorial ZONE

Create a Polygon or Star
Earlier in this chapter it was mentioned that the Polystar tool was used for making polygons as well as stars. Polygons are multisided shapes. Therefore, one of the properties of a polygon or a star is the number of sides to the shape.

When the Polystar tool is selected in the Toolbar, the Properties Inspector offers an additional Options button that allows you to set the type of polygon/star and the number of sides of the shape. To create a star shape or set the properties of a polygon, click the Options button to access the Tool Settings dialog box for your shape. Here you can pick the style (polygon or star) as well as the number of sides. If you are creating a star, you can also type in the size of the points on the star. A high number makes the points on the star dull, and a low number makes the points on the star sharp. The star in the following illustration has a point size of 0.5 pixels.

Tool settings

Set the Fill and Stroke Color of a Shape
To set a fill or stroke color for the shape you are about to create, use the Properties Inspector’s Fill and/or Stroke Color palettes. Alternately, you can access the same palettes in the Colors section of the Toolbar. To assign a color, simply click the color swatch and, in the pop-up color palette, click a color, as shown in the next illustration. When you draw the shape, it appears with the color you selected.

Color palette

The current colors represented in the Fill and Stroke Color swatches become the current colors in the Toolbar. So, you can also select the current fill or stroke color from the Toolbar. In fact, all color panels within Flash will represent the currently selected colors. This includes the Color Mixer and the Color Swatches panels. The color panels are discussed in Chapter 5.

If you do not want a stroke color or a fill color on the shape you are creating, click the No Color button as shown in the previous illustration. The No Color button appears as a white swatch with a red diagonal line through it. In the pop-up color palettes, it is located at the top right. The No Color icon is also located in the Toolbar, at the bottom of the Colors section.

Did you pick ugly fill and stroke colors, and you long to change to good old black and white? You can do so with the click of a button. Clicking the Black And White button in the Toolbar to the left of the No Color swatch will return the fill and stroke colors to black and white.

Draw Lines, Brushstrokes, and Curves

In addition to the tools covered in the last section, the Flash Toolbar provides you with one tool for drawing lines and three tools for drawing lines, curves, and brushstrokes. The Line tool enables you to create the simplest geometric shape, the straight line. You use
the Pencil tool to create lines, curves, or shapes. This tool has extensive modifiers that give you the ability to create anything from a freeform line to a recognizable geometric shape, such as a circle, rectangle, or triangle. You use the Brush tool to add calligraphic splashes of color to
your movies, or you can use this tool to create a more fluid line or shape. To create a line, path, or shape with point-to-point control and precision, you can use the Pen tool. Next, we’ll learn how to use each of these tools.

Draw with the Line Tool
The Line tool is used to create straight lines that go from point A to point B. To create a straight line, select the Line tool, adjust the line style, and select a stroke color and a stroke height in the Properties Inspector, as outlined previously. Click and drag on the stage in any direction to create the line. Hold down shift while dragging to constrain the line to 45-degree increments, as shown in this illustration. Keep in mind that a line has only a stroke color and no fill, so any color in the Fill swatch will be disregarded when you draw the line. Line tool

You can also use the Ink Bottle tool from the Toolbar to modify the color of a line, whether the line was created as a merge drawing or an object drawing. The ins and outs of this tool are discussed later in this chapter in the section “Use the Ink Bottle Tool.”

Freeform Draw with the Pencil Tool

The Pencil tool has a freehand feel to it and works much like a real pencil. To draw a line or a shape with the Pencil tool, click the tool in the Toolbar and just start drawing. You can create a line with this tool as well as a closed shape. This illustration was created with the Pencil tool.

Line tool

If you are drawing with a mouse and not a drawing tablet, it may feel as if you have little control over the Pencil tool. You can actually set the Pencil tool’s modifiers to allow you a little more precision with the tool. Modifiers are additional settings available on some tools that allow you to further customize an object or the tool itself. If you’re used to working with Bezier curves in a drawing application and prefer the precision associated with them, the Pencil tool will feel like a very strange alternative. For those of you not accustomed to working with Bezier curves, you probably are wondering what they are. Bezier curves are curves drawn with mathematical precision and are used in graphics applications like Adobe Illustrator and Macromedia FreeHand. They allow users to draw perfectly smooth lines by defining a series of points and then clicking and dragging these points to define the length and the angle of the curves in between these points. The Pen tool works in a similar manner to these other graphics applications. In the Properties Inspector, stroke hinting, caps, and joins can be set for lines drawn with the Pen tool just as they can be for any stroke object created with the Line, Rectangle, Polystar, and Oval tools.

Use a Pencil Modifier
There are three different Pencil modifiers that give you varying degrees of assistance while you are creating a freeform shape with this tool. These modifiers, shown here, are contextual and become available if the Pencil tool in the Toolbar is selected.

Pencil tool

To select a Pencil modifier, click the Modifier icon in the Options section to display the Modifier pop-up menu. To select the desired modifier, click the appropriate button. You have three Pencil modes to choose from:

■ Straighten Choose this mode to create a line made up of straight-line segments and interconnecting paths.
■ Smooth Choose this mode when you want to draw smooth-flowing curved lines.
■ Ink Choose this mode when you want to create a freeform line with no assistance from Flash. You might prefer this mode if you are an accomplished artist working with a digital tablet or if your movie calls for an irregular line.

Shapes and lines can also be modified with the Selection tool. When a merged or drawing object is selected, the Options section of the Toolbar offers the Straighten, Smooth, and Ink modifiers as options. It also contains a Snap To Objects button, which, if you activate it, will force the snapping of objects to one another. To use the modifiers with the Selection tool, click an object you want to modify with the Selection tool and then click the modifier as many times as it takes to reshape the object or line. Figure below shows sample lines created with the Pencil tool in each mode. As you can see, the images reflect the properties of each of the modifiers. To change a line with a modifier after you create it, click the line segment (or double-click the line segment to grab the entire line). Then click the appropriate mode. Each time you click, the modification to the line will be augmented.

Straight, smooth, and freeform lines can be created with the Pencil tool

To quickly create a geometric shape with the Pencil tool, use the tool to sketch something resembling what you want and then click the Straighten mode until the shape transforms into what you want it to look like. Draw a shape resembling an oval, a rectangle, or a polygon, and Flash will transform your creation into its proper geometric shape.

Draw with the Pen Tool

The Pen tool in Flash works much as similar tools work in other drawing applications. So, if you’re accustomed to the quirks of a Pen tool, you’ll get a feel for the Flash Pen tool in no time. If you’ve never worked with a Pen tool, using the Flash Pen tool will probably seem a little frustrating at first. If you fall into this category, you will probably want to rely on the Pencil tool and its modifiers for more control over lines and curves. You use the Pen tool to create lines, strokes, point-to-point paths, and Bezier curve paths. In other words, it’s kind of like the Pencil tool in that the lines yield a similar result. It’s different from the Pencil tool in that it requires more skill to draw precise objects. With the Pen tool, objects are formed by clicking from point to point instead of just drawing as if the tool was a real pencil. In effect, it’s like manipulating a string (the line) between two knitting needles (the points connecting the lines). Sound confusing? We’ll try to clear it up for you in the next section. After that, the best thing to do is practice drawing with it. Learning how to draw with the Pen tool is a little like learning to ride a bike. With perseverance, you will get the feel for it.

Make Open and Closed Paths with the Pen Tool

An open path is a series of line segments that remain a line and don’t close. In other words, the first point you create never meets the last point, as shown here.

Line

In contrast, a closed path is a series of line segments where the first point meets the last point and they close to create a shape. To create an open path with the Pen tool, select the tool and select a line style and stroke, as outlined earlier in this chapter. Click the spot on the stage where you want the line segment to begin, and Flash will create a single corner point. Click the next point, moving in the direction of the path you want to create, and click again and again until your path is complete. To end the path, double-click the last point. Alternatively, you can ctrl-click in Windows/ opt-click on the Mac anywhere on the stage to end the path. To exit the Pen tool and return to the Selection tool, click the Selection tool or press v to access it. If you don’t end the path, the tool will keep drawing, which can be a little irritating, especially if your path looks perfect as is.

To constrain a line segment to 45-degree increments, hold down SHIFT while clicking from point to point.

To create a closed path, begin drawing the same as you would for an open path, but then click the first point you created. Flash will close the stroke and apply the currently selected color. Note that a little white circle appears at the bottom right of the Pen tool when you position your mouse over a point that can close the path into a shape, as shown here.

Line

Make a Curved Path
Creating a curved path with the Pen tool involves the same technique as creating a straight path, with a slight variation. To create a curved path instead of a straight path, you click and drag the end point instead of just clicking. This will create a curve point. As you drag, Flash creates a pair of tangential handles that define the shape of the curve. As mentioned earlier, the handles are almost like knitting needles that help guide the curve, and the curve becomes the yarn between them. The tips of the knitting needles would be the equivalent of the points on the path. The end of the knitting needle is the handle you drag to manipulate the needles, or curve handles, as they are called. The difference between the Pen tool’s curve handles and a knitting needle is that the Pen tool’s handles point in the same direction as the curve, as shown in Figure 3-3. So, you drag a handle in the direction you want your curve to go. The other difference is that it would be pretty hard to knit a sweater in Flash. To create a curve segment, select the Pen tool and then set the properties of the tool in the Properties Inspector. On the stage, click a line segment and drag the pointer in the direction you want the curve to go, release the mouse, position your pointer where you want the next point to be, and repeat the process. The direction and the distance you drag on the end of the handle determine the slope and length of the handles. Continue this process until you have created the curved path you want. Double-click the last point to end an open curved path. To close a curved path, click the end point on which you want to close the path. In other words, you end a curved path the same way you end a point-to-point straight path. When the curve segment is the approximate shape you desire, release the pointer. You can now go back and adjust the curve if need be. You can modify each point along the path with the Subselection tool (the white arrow) to the right of the Selection tool, or you can add points to the path or delete unneeded points with the Pen tool.

On a curved path, curve handles point in the direction of the curve itself

When you draw with the Pen tool, you can combine curve points and corner points, as shown next.

Combined curve points

To combine straight, point-to-point paths with curved paths, simply use the rules outlined previously, only combine them. In the previous illustration, the path was created by making a three-point path that creates two nearly perpendicular straight lines. After the fourth point was clicked, the mouse was dragged to the upper right of the stage, thus creating a curve that slants to the left. Note also that the handle is dragged in the opposite direction of the curve, but the angle of the curve is the same as the angle of the handle. Don’t worry if you mess up your curve. Flash makes it easy to fix mistakes. In fact, paths are so easy to fix that you shouldn’t ever expect them to look perfect when you first draw them. In the next section you’ll learn how to quickly fix your path so it will look just right.

This book probably makes the process of drawing curves sound easy, but it’s not. Don’t be frustrated if drawing curves seems difficult at first. It takes a long time to get a feel for it, and some designers never do. Take heart, because you still have the Pencil and Line tools to fall back on.

Modify Paths
Once you have created a path with the Pen tool, you can easily modify it by manipulating the points that make up the path. You can add or delete points, convert corner points to curve points and vice versa, or move points to modify a path. By default, Flash displays selected corner points as hollow squares and selected curve points as hollow circles.

There are several tools you can use to change the way your path looks:
■ To move a point along a path, select the Subselection tool (the white arrow to the right of the Selection tool) and position the pointer over the point you want to move. When the pointer displays a white rectangle at the bottom right, as shown next, click the point you
want to move and drag it to a new position. When you release the mouse, Flash readjusts the shape of the path to reflect the point’s new position.
■ To nudge a point, again use the Subselection tool and position the pointer over the point you want to move until the pointer displays a white rectangle at the bottom right. Then click the point. Use the keyboard’s arrow keys to nudge the point in the desired direction. To nudge more
than one point, select the first point with the Subselection tool and add points to the selection by clicking them while holding down shift. Alternatively, you can drag a marquee around the points you want to select with the Subselection tool. Use the arrow keys to nudge the selection of points to a new location.

Sunselection tool

If you position your Subselection tool pointer over a point and a black rectangle appears in the bottom-right corner of the white arrow, nudging or dragging will move the entire path. The white rectangle indicates that you have selected a point on a path, whereas the black rectangle indicates that you have selected the entire path.

■ To add a point to a path, click the path with the Pen tool. Then position your pointer over the path. As you approach the path, the Pen cursor appears with a plus sign (+), as shown in the illustration at right. Click to add a point to the path.

Ad point

■ To delete a corner point from a path, select the path with the Pen tool and move toward the corner point you want to delete. As you approach the point, the Pen cursor displays a minus (−) sign at the bottom right, as shown next. Click the point to delete it.

delete point

■ To delete a curve point from a path, select the curve with the Pen tool and move toward the curve point you want to delete. As you approach the point, the Pen cursor displays a white arrow at the bottom right, as shown in the illustration at right. Double-click the point to delete it. (The first click converts the point to a corner point; the second click deletes it.) Alternatively, you can delete any point from a path by first selecting it with the Subselection tool and then pressing delete.

Delete line

■ To convert a corner point to a curve point, select the point you want to convert with the Subselection tool and then drag while holding down alt (Windows)/opt (Mac). As you drag, Flash creates a pair of tangential handles that define the shape of the curve point. When you release the mouse button, Flash redraws the path.


To practice using the Pen tool, try tracing over freeform images you have created with the Pencil tool.

previous    context menu    next

 
FLASH TEMPLATES  |  WEBSITE TEMPLATES  |  FLASH INTRO TEMPLATES  |  HTML TEMPLATES  |  ECOMMERCE TEMPLATES  |  AFFILIATE PROGRAM
This time online: 9 / In last 24 hours: 600 / Since 2004: 567182

Flash Templates Store | Flash templates | Free Web Templates | Flash Website Templates | Free website templates |
Flash templates
| Website templates |

Copyright © 2008 - Flash Templates Zone at -www.FlashTemplateZone.com - All rights reserved