What You’ll Do
Draw Lines and Shapes
Move Around with the Hand Tool
Modify Grid and Guide Settings
Changing Stroke and Fill Colors
Add Colors Using the Kuler Panel
Edit Strokes with the Ink Bottle
Edit Fills with the Paint Bucket
Use the Spray Brush and Deco Tools
Edit Strokes and Fills with the Eyedropper
Flash offers a full suite of tools for creating and editing graphics. When you draw in Flash, you create vector art. Vectors are mathematical descriptions of lines and points that, when connected, form shapes and objects. Vector-defined art is not limited by resolution like bitmaps are, so they can be scaled to any size without a loss in quality or increase in file size. This is the basis of Flash; and the main reason Flash files are so small and why they can be deployed on so many platforms. Vector graphics are also fully editable after they are created so you can continue to adjust their properties. Included in Flash are many of the drawing tools and procedures familiar to the seasoned user of vector drawing programs. It is also a good place for the beginner to learn. Sketch naturally with the Pencil and Brush tools or use vector-based objects, such as the Rectangle or Oval tools or the Polystar tool. Use the Pen tool to create lines and shapes with Bézier curves. Whatever is drawn can be edited and modified with a variety of tools and palettes. When you select an object or graphic on the Stage, the Property Inspector displays the attributes of that object that are modifiable, such as fill and stroke color, position, and scale.
You can draw shapes in Flash using two drawing models: Merge Drawing and Object Drawing. The Merge Drawing model, the default (like previous versions of Flash), automatically merges shapes that you draw when you overlap them. If you select a shape that has been merged with another, and move it, the shape below it is moved too. The Object Drawing model allows you to draw shapes as separate objects that do not automatically merge together when you overlap them. You can now extend the Object Drawing mode by creating primitive rectangles and ovals in Primitive mode, which allows you to edit properties in the Property Inspector and specify the corner radius of rectangles and inner radius of ovals. This makes it easy to create pie wedges, round off corners, and other curved shapes.
Previously in Flash, all shapes in the same layer on the Stage could change other overlapping shapes, known as Merge Drawing. In Flash, you can create shapes directly on the Stage that do not affect other overlapping shapes, known as Object Drawing. By default, Flash uses Merge Drawing. To draw shapes using Object Drawing, you use the Object Drawing button on the Tools panel. When you select a shape created using Object Drawing, Flash selects the shape with a rectangular bounding box, which you can use with the Pointer tool to move the shape on the Stage. You can use General preferences to set selection options for contact-sensitivity when selecting shapes created using Object Drawing.
Select a drawing tool on the Tools panel that supports Object Drawing (Pencil, Line, Pen, Brush, Oval, Rectangle, and Polygon).
Select the Object Drawing button on the Tools panel.
With the Pointer tool, click to select an object, and then drag the bounding box to move it.
To switch back Merge Drawing, click the Object Drawing button again.
Did You Know?
You can convert a Merge Drawing shape to an Object Drawing shape. Select the shape on the Stage, click the Modify menu, point to Combine Object, and then click Union.
See Also
See “Setting General Preferences” on page 60 for information on options for contact-sensitivity when selecting shapes created using Object Drawing.
The Line tool draws perfectly straight lines in any direction you drag your mouse. In Flash, a line is called a stroke and there is a variety of thicknesses (0-200 pixels), styles, colors, and gradient fills that can be applied to it. You can also create your own line style for specific types of dashed, dotted or artistic lines. You can constrain the path a line draws to 45-degree angles or create closed shapes by intersecting the lines you draw. In Merge Drawing when a line overlaps another line on the same layer, it essentially cuts it into two pieces that can be edited as separate objects. You can also specify a line cap and join type. A join is the place where two strokes meet (Miter, Round, or Bevel). A cap is the end point of a stroke that does not join with another stroke. Select Stroke hinting to make stroke intersections easier to view.
Click the Line tool on the Tools panel.
The pointer becomes a crosshair that you can drag on the Stage.
Click and drag on the Stage, and then release the mouse when the line is the length you need.
To change line properties, click to select the stroke, and then specify the options (Color, Weight (0-200), Style, Width and Height, Cap, Join, or Miter) you want in the Property Inspector.
Trouble?
To display the Property Inspector, click the Window menu, point to Properties, and then click Properties.
FL 2.2
Use the Pencil tool for freeform drawing. When you draw with the Pencil tool you are creating strokes. It works the same way as a real pencil with options for smoothing and straightening. Depending upon which mode you choose, Flash makes corrections to the drawn line. Smooth mode softens the curve of the line you draw while Straighten mode transforms the line into a series of straight-line segments and standard curves. If you are using the Pencil or Brush tools with Smooth mode, you can specify the degree of smoothness. Additionally, Flash performs shape recognition to the lines you draw so that if it detects something approximating a simple geometric shape such as a rectangle, oval, or triangle, it converts your drawing into whichever shape it detects. To bypass these modifications, select Ink mode. This mode allows for the most freeform drawing with minimal correction by Flash.
Click the Pencil tool on the Tools panel.
The pointer becomes a pencil. The Pencil tool options appear at the bottom of the Tools panel. The default mode is Straighten.
Draw on the Stage with the Pencil, and then release the mouse.
A rough preview of the line appears as you draw. In Straighten mode, Flash transforms the line into a series of straight-line segments and standard curves.
To change the straighten rate (New!), select the object, click the Modify menu, point to Shape, click Straighten, enter a value, and then click OK.
Click the Pencil tool on the Tools panel.
The pointer becomes a pencil. The Pencil tool options appear at the bottom of the Tools panel.
Click the Pencil mode popup in the Options area of the Tools panel, and then click Smooth.
In the Property Inspector, click the Smoothing popup, and then click a value from 1 to 100.
The default value is set to 50. The greater the smoothing value, the smoother the resulting line.
Trouble?
To display the Property Inspector, click the Window menu, point to Properties, and then click Properties.
Draw on the Stage with the Pencil, and then release the mouse.
A rough preview of the line appears as you draw. In Smooth mode, Flash smoothes the line you draw into curved line segments.
To change the smooth rate and angles (above and below) (New!), select the object, click the Modify menu, point to Shape, click Smooth, enter a value, and then click OK.
FL 2.2
The Flash Tools panel includes several tools for quickly creating simple geometric vector shapes. They are easy to use; you just click and drag on the Stage to create the shapes. The Rectangle tool creates rectangles with square or rounded corners. The Oval tool creates circular shapes such as ovals and circles. These shapes can be comprised of Strokes, which are lines that surround and define the shape, Fills, which are a color or texture inside the shape, or both. You can create two types of shapes: Drawing or Primitive. Drawing, or standard, shapes are self contained; the stroke and fill of a shape are not separate elements, while for Primitive shapes they are separate elements.
Click the Rectangle or Rectangle Primitive tool on the Tools panel.
Enter a value for the corner radius in the Properties Inspector.
To create an exact size rectangle shape, select the shape, enter the width and height values in the Properties Inspector.
Click and drag on the Stage, and then release the mouse.
Did You Know?
You can enter values ranging from 0 to 100 points in the Rectangle Settings dialog box. A value of zero gives you a straight-sided-square. Higher numbers produce squares with more rounded sides.
You can hold down the Shift key while dragging to produce a perfect square with equal sides or a perfect circle. If you want to draw an oval or a rectangle without a stroke or fill, you can set either of these options to No Fill in the Colors area of the Tools panel or in the Color Mixer.
You can draw shapes without a stroke or a fill. Set either of these properties to No Fill in the Colors section of the Tools panel or in the Color Mixer.
You can set specific sizes with a dialog box. Alt+click (Win) or Option+click (Mac) a rectangle or oval, set the values you want, and then click OK.
FL 2.2
Working in much the same way as the Oval and Rectangle tools, the new Polystar tool allows you to easily create complex vector shapes. You can use this tool to create polygons and stars with up to 32 sides. Choose between creating a polygon or a star. Both styles have characteristics that can be adjusted in the Property Inspector before you draw the shape. Both the polygon and star style can have up to 32 sides, with the star style having an additional star point size that can be set. Experiment with several options to get the kind of shape you want.
Click and hold the Rectangle tool on the Tools panel, and then point to PolyStar Tool.
The pointer becomes a crosshair that you can drag anywhere on the Stage.
Click Options in the Property Inspector.
Click the Style popup, and then select Polygon or Star.
Enter a value for the number of sides. You can create an object with up to 32 sides.
For the Star style, you can specify an additional option for your point size. You can enter a value ranging from .10 to 1.0 points.
Click OK.
Click and drag on the Stage, and then release the mouse.
See Also
See “Editing Strokes with the Ink Bottle” on page 102 for information on editing an object.
When you create vector graphics in Flash, they are comprised of distinct elements that can be selected separately or as a whole with a variety of selection tools. The type of editing you need to perform determines which tool you use. For example, a simple rectangle drawn is comprised of four line segments that surround the contour of the shape and one fill in the center. Each of these five parts can be selected in tandem or individually with the Selection tool. Likewise, any stroke that intersects another stroke or fill splits them into distinct elements that can be selected separately.
In Normal selection mode, holding down the Shift key adds to the selection any additional elements you click on. You can change this option in the General tab of the Preferences window so that it isn’t necessary to use the Shift key to perform this function. Double-click any stroke to select other strokes connected to it or double-click a fill to select it and any strokes that touch or intersect it. To select an entire shape (strokes and fills) or just a portion of it, you can drag a selection rectangle with the Selection tool or draw a freeform selection area with the Lasso tool. These methods work best for very complex shapes with many intersecting strokes and fills, or if there is only a portion of the shape you need to edit.
The Sub-Selection and Pen tools allow you to select the entire shape (strokes and fills) simultaneously, making its anchor points and Bézier handles visible for editing. Use this method when you need to edit the contours of the shape with precision.
For information on making selections using the Object Drawing model, see “Working With Object Drawing”, on page 74.
There are several ways to select objects in Flash. You can select an object’s stroke or fill or both. You can use the Selection tool to select parts of the object or drag over a portion of it to create a selection rectangle. The Property Inspector displays the properties of what is selected including Stroke line weight and style, Fill color, pixel dimensions, and X and Y coordinates. When a stroke or fill is selected, a dotted pattern appears over it indicating it has been selected. This makes editing and modifying graphics simple and illustrates the versatility of the vector-based graphics model used in Flash.
Click the Selection tool on the Tools panel.
The pointer becomes an arrow.
Position the arrow on the edge of the shape.
Notice that Flash displays a small curved line icon when you position the arrow over a Curve point and a corner line icon when over a Corner point.
Click on any part of the stroke.
Flash only selects a portion of it. This is because what appears to be one whole shape is actually a series of lines connected by points and each can be selected separately.
See Also
See “Working With Object Drawing” on page 74 for information on selecting overlapping objects on the same layer.
Click the Selection tool on the Tools panel.
The pointer becomes an arrow.
Timesaver
Press V to select the Selection tool. You can temporarily switch to the Selection tool from any other tool by pressing
(Mac) or Ctrl (Win).
Click on any part of the stroke to select one segment.
Hold down the Shift key, and then click other strokes to add them to the selection.
Did You Know?
You can turn off the Shift-select feature in the General tab of the Preferences dialog box. When this feature is disabled, you can add to the selected segments by clicking them without the need to hold down the Shift key. In this mode, holding the Shift key and clicking a selected stroke segment deselects that segment.
The Selection tool provides the most simple and versatile procedures for selecting objects in Flash. The Selection tool selects anything you click on (provided it isn’t on a locked layer). Double-clicking shapes with the Selection tool selects all fills and strokes that are connected. Shift-selecting allows you to add to the selection only what you need. Alternately, dragging a selection rectangle on the Stage with the Selection tool creates a bounding box that selects anything you drag it over. This bounding box method is the most reliable technique for selecting very complex objects with many intersecting strokes and fills.
Click the Selection tool on the Tools panel.
The pointer becomes an arrow.
Position the arrow in the Fill area or the center of the shape and click.
The fill becomes highlighted with a dotted pattern to indicate it has been selected. Hold down the Shift key to add other strokes and fills to the selection.
Use the Lasso tool when you want to select shapes that are too close to shapes you don’t want to select. This tool allows you to draw around the shape, selecting everything contained in the shape you draw. In the default mode, you can draw a freeform lasso around the object you want to select. You can also choose the Polygon mode for defining the selected area with a series of straight-line segments.
Click the Lasso tool on the Tools panel.
Click the Polygon Mode button in the Options area of the Tools panel.
Click near the area you want to select. Move the pointer and click again. Keep clicking until the object or portion you want to select is surrounded.
Double-click to complete the selection.
Because the Stage and Work Area in Flash share the same space with a variety of panels, palettes and windows, it is often necessary to change the magnification level. You can use the Magnifying Glass to zoom out and see the entire piece or zoom in to do more detailed work on a small portion. The tool is made up of two modifiers: a plus (+) symbol in the circle indicates enlargement of the Stage and a minus (-) indicates reduction. Flash allows magnification levels from 8 percent to 2000 percent.
Click the Zoom tool on the Tools panel.
Click the Reduce or Enlarge button in the Options area of the Tools panel.
Click on the area of the Stage you want to magnify and drag the pointer.
Did You Know?
You can change the magnification level in several places. The Zoom Control field in the top right hand corner of the Stage allows you to enter a value or access a popup with various magnification levels. You can also change the magnification submenu in the View menu or use the keyboard shortcuts
+ - (Mac) or Ctrl+ - (Win) to zoom out, and
+ + (Mac) or Ctrl+ + (Win) to zoom in. Quickly switch to 100 percent magnification by pressing
+1 (Mac) or Ctrl+1 (Win).
At certain magnifications, parts of the Stage may not be viewable. Use the Hand tool to quickly move to different parts of the Stage without having to change the magnification level. The Stage is the active area of your movie, the only area that will be visible in the exported Flash movie. The gray area around the Stage is the Work Area. The Hand tool allows you to easily access artwork or other objects contained in this space if you are doing detailed work at high levels of magnification.
Click the Hand tool on the Tools panel.
The pointer becomes a small hand that moves the entire Stage revealing other parts of the Stage as you drag.
Timesaver
Pressing the space bar temporarily changes the active tool to the Hand tool. Continue holding as you drag.
Click and drag the Stage to move the view.
Did You Know?
You can turn off the visibility of the Work Area (the gray space around the Stage) and quickly change the View scale to 100 percent. Toggle the Work Area option in the View menu or use the keyboard shortcut
+Shift+W (Mac) or Ctrl+Shift+W (Win). This is a great way to temporarily see what is viewable in the exported Flash file (SWF) when you are working with large images that extend past the Stage boundaries.
Ruler bars are located on the top and left sides of the Stage and serve several purposes. They let you measure the width and height of Flash elements and they let you place guides on the screen to control placement of objects on the Stage. In all, Rulers serve a very important role. When you display rulers, you can use guides to help you correctly align objects with other objects. By using guides, you have access to precise alignment systems. To use the guides, the ruler bars must first be visible. When you no longer need the rulers, you can hide the rulers to free up more workspace.
Flash comes with guides, grids, and rulers to help you lay out artwork and objects with precision. A grid is a series of crisscrossed lines that aid in aligning objects to each other on the Stage. Guides and grids are modifiable. You can change their visibility, position, color, and frequency. These items are invisible by default, but they can be easily turned on and adjusted. Though you see them in the Flash development environment, they are invisible on export. Use guides to align art and objects to each other on vertical or horizontal paths, or turn on the grid for use in designing a layout that is proportional and balanced.
Click the View menu, point to Grid, and then click Show Grid.
• You can also right-click (Win) or control-click (Mac) the Stage, point to Grid, and then click Show Grid.
A check mark next to the option means its visibility is enabled.
To hide the grid, click the View menu, point to Grid, and then click Show Grid to remove the check mark and hide the grid.
Timesaver
Press
+apostrophe (’) (Mac) or Ctrl+apostrophe (’) (Win) to toggle Grid visibility on and off.
Click the View menu, and then click Rulers to display rulers.
Click on the vertical ruler on the left side of the work area with the Arrow pointer and drag to the right, and then release the mouse where you want to place the vertical guide.
A small directional triangle and line appears next to the pointer as you drag indicating that you are dragging the guide.
Click on the horizontal ruler at the top of the work area with the Arrow pointer and drag down, and then release the mouse where you want to place the horizontal guide.
Reposition the guides by selecting them with the pointer.
Did You Know?
You can turn guide visibility on and off, lock guides, and enable or disable snapping to guides. Click the View menu, and then click Guides to access these options or use the following keyboard shortcuts:
+; (Mac) or Ctrl+; (Win) toggles between showing and hiding guides. Option+
+; (Mac) or Ctrl+Alt+; (Win) locks and unlocks guides. Shift+
+; (Mac) or Ctrl+ Shift+; (Win) turns Snapping on and off.
The need for grids and guides varies depending upon the type of document you are working on. They are useful for aligning text and graphics to interface elements and are an invaluable tool for creating a well composed and proportioned layout. Every project is different and has different requirements, so Flash allows the display, behavior, and characteristics of guides and grids to be altered to fit your needs. They are only visible in the Flash development environment, and are not exported in the Flash movie.
Click the View menu, point to Grid, and then click Edit Grid.
Click the Color popup, and then click a grid line color.
Select or clear the Show Grid check box to show or hide the grid.
Select or clear the Show Over Objects check box (New!) to show or hide the grid over objects.
Select or clear the Snap To Grid check box to enable or disable snapping.
Enter values for horizontal and vertical dimensions for the grid lines.
Click the Snap Accuracy popup, and then select a level of sensitivity for snapping to the grid. Select from Must Be Close, Normal, Can Be Distant, and Always Snap.
To make the current grid settings the default for new Flash files, click the Save Default button.
Click OK.
Click the View menu, point to Guides, and then click Edit Guides.
Timesaver
Press Option+Shift+
+G (Mac) or Ctrl+Alt+Shift+G (Win) to quickly access the Guides dialog box.
Click the Color popup, and then click a guide line color.
Select or clear the Show Guides check box to show or hide guides.
Select or clear the Snap To Guides check box to enable or disable snapping.
Select or clear the Lock Guides check box to enable or disable movement of guides.
Click the Snap Accuracy popup, and then select a level of sensitivity for snapping to the guides. Select from Must Be Close, Normal, Can Be Distant.
To remove all guides from the active scene, click Clear All.
To make the current guides the default guides for new Flash files, click Save Default.
Click OK.
Snap Align is a new feature that enables dynamic alignment of art and objects on the Stage. Simply drag an object on the Stage and dashed lines appear that aid you in aligning to the edge or center vertices of other objects on the Stage. In the Edit Snapping dialog box you can enable and disable snap options, set the distance objects are to be from the movie borders and from each other before they snap, and save the settings as default. Additionally, you can choose to snap objects to edges or vertical and horizontal centers. Using the Snap Align feature enables you to lay out artwork more precisely and dynamically.
Click the View menu, point to Snapping, and then click Snap Align.
A check mark appears next to the menu item when Snap Align is enabled.
Drag an object on the Stage.
Depending on the behaviors set in the Snap Align Settings dialog box, gray dashed lines appear when the edges or center vertices of objects move to within a certain pixel distance.
Click the View menu, point to Snapping, and then click Edit Snapping.
Select the snap check box options you want to turn on.
Click Advanced.
Select from the following options:
• Snap align settings. Enter a value for the distance an object needs to be before it will snap to the boundaries of the stage movie (in pixels).
• Object spacing. Enter a value for horizontal and vertical edge tolerance (in pixels).
• Center alignment. Select the check boxes to center alignment on horizontal or vertical vertices or both.
To make the snap align setting the default for future use, click Save Default.
Click OK.
Artwork created in Flash can have strokes and fills. Strokes and fills behave differently and are edited in different ways. A stroke is an outline. It describes the edges of a shape or it can be a simple line. You can create strokes with the Line tool or the Pencil tool. A fill is a solid shape, often contained or surrounded by a stroke. It is the surface area of a shape and can be a color, gradient, texture, or bitmap. Fills can be created with the Paintbrush tool and the Paint Bucket tool. The Oval, Rectangle, and Pen tool can create shapes with either a stroke or a fill, or both. You can edit the characteristics of strokes and fills, such as color, in several ways. If the shape is selected on the Stage, a color change to a stroke or fill can be made in any of the color palettes. Because Flash uses vectors to describe shapes, you can change their properties as much as you want without any loss in quality. It is important to grasp the concept behind them because they are the basis for drawing in Flash.
Click the Selection tool on the Tools panel.
Select the stroke of the shape by double-clicking it.
Click the Stroke color box on the Tools panel or Property Inspector.
Select a new color from the palette.
Did You Know?
You can change the stroke color in three other places. Stroke color boxes are also located in the Property Inspector, the Color Mixer panel, and the Swatches panel. In all cases, select the stroke you want to change and choose a new color from any of the palettes.
You can change the line width and style of a stroke or set the stroke color to None in the Property Inspector. Click the stroke you want to change to select it, and then select any of the options in the Property Inspector. Setting the stroke color to None removes the stroke from the shape.
Click the Selection tool on the Tools panel.
The pointer becomes an arrow.
Click the fill of the shape to select it.
This is the area inside the stroke.
Click the Fill color box on the Tools panel or Property Inspector.
Select a new color from the palette.
Did You Know?
You can change the fill color in three other places. Fill color boxes are also located in the Property Inspector, the Color Mixer, and the Swatches panel. Just select the fill and choose a new color from one of the palettes by clicking on a new color box.
See Also
See “Editing Fills with the Paint Bucket” on page 103 for information on changing the fill color.
Each Flash document has its own color palette. The color palette displays as swatches when you access a color box or panel. The default color palette is the Web-safe palette of 216 colors. Flash allows you to edit and create new colors for strokes and fills in several ways in the Color Mixer panel. You can alter a color’s RGB values (assigning it different levels of Red, Green or Blue), Hue, Saturation, Brightness, and Alpha (transparency). You can accomplish this by using sliders, dragging on a color-space, or entering a numeric value that corresponds to a specific color. In each case, you can save your color into the palette for easy access.
Open or expand the Color Mixer panel.
Enter values between 0 and 255 in the RGB numeric entry boxes.
Enter an alpha value between 0 and 100.
Click the Options button in the panel, and then click Add Swatch.
Did You Know?
You can alter the RGB values with the sliders located to the right of the numeric entry boxes. Click the small triangles, and then drag the sliders that appear. Additionally, you can drag the cursor over the Color space bar at the bottom of the Color Mixer panel to change the color interactively.
You can also specify a color using a hexadecimal number in the Color Mixer. A hexadecimal number is an internal computer numbering scheme that is used to identify colors in a color palette.
Click a Stroke or Fill color box on the Tools panel or the Property Inspector.
Click the Color Wheel button to the far right of the palette.
Click a color from one of the available pickers (Mac) or from the Color Window (Win).
Click OK.
Did You Know?
You can import and export solid and gradient color palettes between Flash files and other applications. You can share color palettes between applications, such as Adobe Fireworks and Adobe Photoshop. Click the Window menu, and then click Color Swatches. Click the Options button on the panel, and then click Add Colors or Replace Colors to import colors from a color palette, or click Save Colors to export as a color palette.
The Kuler panel (New!) is an extension to Flash that allows you to use groups of color, or themes in your projects. You can use the panel to browse thousands of color themes, create your own using the complementary harmony rules, and share them with others in the Kuler community. After you find or create the theme you want, you can add it to the Swatches panel for use in your project. You can access the Kuler panel by using the Extensions submenu on the Window menu. The Kuler panel is also available in the CS4 version of Photoshop, InDesign, Illustrator, and Fireworks.
Click the Window menu, point to Extensions, and then click Kuler.
Click the Browse tab.
To search for a theme, click in the Search box, enter the name of the theme, a tag, or a creator, and then press Enter (Win) or Return (Mac).
To narrow down the browse list, click the popups, and then select the filter options you want. Some include Highest Rated, Most Popular, Newest.
a. To save a search, click the first popup, click Custom, enter your search criteria, and then click Save.
To browse for a theme, click the View previous set of themes or View next set of themes button.
Select a theme in the panel.
To add the theme to the Swatches panel, click the Add Selected Theme To Swatches button.
Click the Window menu, point to Extensions, and then click Kuler.
To create or edit a theme, do either of the following:
• Create a theme. Click the Create tab.
• Edit a theme. Click the Browse tab, select the theme you want to edit, and then click Edit Theme in Create Panel.
Click the Select Rule popup, and then select a harmony rule or Custom.
The harmony rule uses the base color as the basis for generating the colors in the color group, so you can create a theme with complementary colors.
Select a color box, and then use the sliders and the color wheel to display the color you want.
Use the buttons below the color boxes to add/remove the theme color, add the current stroke/fill color as the base color, or adjust the other colors.
a. Double-click a color box to set the active color in Flash.
Upon completion, do any of the following:
• Save theme. Click Save Theme, name the theme, and then click Save to create a new one.
• Add to Swatches Panel. Click the Add This Theme to Swatches button.
• Upload to Kuler. Click the Upload Theme to Kuler button.
There are a number of ways to change the stroke of an object. You can select the stroke and change its characteristics in the Property Inspector, the Swatch palettes, and the Color Mixer. If you need to apply the stroke properties of one object to that of another, use the Ink Bottle tool. The Ink Bottle tool holds the properties you’ve set for strokes in any of the palettes. You can click any object on the Stage to change the properties of its stroke (color, line weight and style) or add a stroke to an object that doesn’t have one.
You can change the fill of an object with the Paint Bucket tool. The Paint Bucket stores the fill color you’ve set on the Tools panel or in the Property Inspector. You can change the fill color of any existing shape on the Stage by touching down on the shape with this tool. You can also add a fill to any shape that has a closed stroke. After you select the Paint Bucket tool, you can select Paint Bucket sensitivity options located at the bottom of the Tools panel.
The Eyedropper tool allows you to select the attributes of a shape such as fill and stroke color, and line weight and style, and then transfer them to other shapes. This tool detects whether you are selecting a stroke or a fill, and then changes into the Ink Bottle (when selecting strokes) or the Paint Bucket (when selecting fills). Instead of taking several steps to copy attributes from one shape to another, the Eyedropper provides a quick means for storing and transferring attributes between editable shapes.
Click the Eyedropper tool on the Tools panel.
The pointer becomes an eyedropper.
Position the eyedropper over the stroke or fill of a shape on the Stage.
• Strokes. When you are positioned over a stroke, a tiny pencil appears next to the tool. When you click on the stroke the Eyedropper becomes an Ink Bottle.
• Fills. When you are positioned over a fill, a tiny paint brush appears next to the tool. When you click on the fill the Eyedropper becomes a Paint Bucket.
Click on another shape’s stroke or fill to transfer the selected attributes.
The stroke or fill updates to the new color.
Flash can create a number of paint effects in addition to solid colors. Gradients are made up of two or more colors that gradually fade into each other. They can be used to give depth to an object or create realistic shadows. Two gradient modes are available: linear and radial. Linear gradients are made up of parallel bands of color. Radial gradients radiate from a center focal point. Both can be edited for color, alpha, and position within a fill or stroke. You can add up to 16 colors to a gradient, precisely control the location of the gradient focal point, and apply other parameters. A gradient behaves like any other fill or stroke. It can be saved to the palette as a swatch using the Color Mixer panel Options button, and added to other shapes with the Paint Bucket tool.
With the Selection tool, select the fill or stroke of a shape on the Stage.
In the Color Mixer panel, click the Fill Style Type popup, and then click Linear or Radial.
Click the Overflow popup, and then select the gradient overflow style you want to control colors past the limits of the gradient when publishing for Flash Player 8 or later.
Position the pointer on the Color Picker box to display a plus (+) sign next to the pointer.
Click in the Gradient bar to create a color proxy indicated by a little box with a triangle on top.
Click one of the color proxy indicators to select it.
Click a new color from the Color Picker box above.
Drag the color proxy indicator along the Gradient bar to adjust the color placement.
Repeat steps 4-8 to add up to 15 more gradient colors.
As you increase the complexity and number of shapes in your movie, it can become tricky to edit each object separately. When using gradient fills on several objects you can choose to span a gradient across several of these objects or give each object its own discreet gradient. The Lock Fill feature allows you to control how a fill is applied, essentially locking its position so that depending on where the shapes are positioned relative to the gradient, the one gradient spans all of the shapes. If you apply the same gradient to multiple shapes with the Fill Lock off, the gradient is applied to each shape independently.
Create two simple shapes using the Rectangle or Oval tool.
Select the first shape on the Stage with the Selection tool.
Click the Paint Bucket tool on the Tools panel.
Click the Lock Fill button in the Options area of the Tools panel.
Select a Gradient from the Colors area of the Tools panel or use the Color Mixer or Property Inspector.
Click the Eyedropper tool on the Tools panel, and then click on the gradient fill in the first shape.
Click down on the second shape to add the gradient fill.
In addition to size, shape, and color settings for the Paint Brush tool, you can control how the brush behaves when painting on existing shapes and objects on the Stage. Paint Brush modes can restrict the area affected by the tool to fills or selections, empty areas of the Stage or specific shapes. When the Paint Brush tool is selected, a popup menu appears on the Tools panel. Select from the following modes: Paint Normal, Paint Fills, Paint Behind, Paint Selection, and Paint Inside. Each performs a specific operation providing you with varying levels of control as you paint. Flash previews your paint path as you paint, but it only affects the areas you’ve specified in the Paint modes. When you release the mouse, these previews disappear.
Click the Brush tool on the Tools panel.
Click the Brush Mode popup in the Options area on the Tools panel, and then select from the following:
• Paint Normal. The brush paints over everything including strokes and other fills.
• Paint Fills. Painting only affects existing fills and empty areas of the Stage. Strokes are ignored.
• Paint Behind. The Paint Brush only affects empty areas of the Stage keeping existing lines and fills intact.
• Paint Selection. Painting only affects the selected areas you define with any of the selection tools.
• Paint Inside. The Paint Brush only affects the fill of the shape you started in, ignoring other shapes and empty areas on the Stage.
FL 2.2
The Spray Brush tool (New!) allows you to spray particles onto the Stage using the current fill color. If you want to create a more complex pattern, you can also use a movie clip or graphic symbol from the library as a particle. You can adjust the spray pattern by selecting Symbol and Brush options in the Property Inspector. The Symbol options include Scale, Random scaling, Rotate symbol, and Random rotation, while the Brush options include Width, Height, and Brush angle.
Click the Spray Brush tool on the Tools panel.
Select a fill color for the default spray of dots and other options in the Property Inspector.
• Color Selector. Select a fill color for the default spray particle.
• Edit. Select a custom symbol from the library. You can use any movie clip or graphic symbol in the library as the spray particle.
• Scale. Scale the width and height of a symbol used as a spray particle.
• Random Scaling. Randomly spray particles on the Stage with different sizes.
• Rotate Symbol. Rotates the symbol spray particle around a center point.
• Random Rotation. Randomly rotate spray particles on the Stage.
• Width and Height. Specifies the brush width and height.
• Brush Angle. Specifies the spray angle of the particles.
Click or drag on the Stage where you want the pattern to appear.
FL 2.2
The Deco tool (New!) allows you to apply a kaleidoscopic drawing effect to the Stage or a selected object on the Stage. You can apply several effects: Vine, Grid, or Symmetry. The Vine effect fills the Stage, symbol, object, or closed area with a vine pattern. You can also use your own artwork (symbols) for the leaves and flowers. The Grid effect fills the Stage, symbol, object, or closed area with a symbol from the library. You can create grid patterns, such as a tiled background or checkerboard. The Symmetry effect arranges symbols symmetrically around a central point, which you can control with a set of handles. You can create circular elements, such as a planet. The default symbol for the Symmetry effect is a 25 x 25 pixel black rectangle with no stroke.
Click the Deco tool on the Tools panel.
In the Property Inspector, click the Drawing Effect list arrow, and then select Vine Fill, Grid Fill, or Symmetry Brush.
Select a fill color for the default shape, or select a symbol.
• Color Selector. Select a fill color for the default pattern.
• Edit. Select a custom symbol from the library. You can use any movie clip or graphic symbol in the library as the pattern.
Specify the advanced options you want for the different effects; options vary depending on the selected effect.
Click the Stage or within the shape or symbol (Grid Fill and Vine Fill) where you want the pattern to appear.
The Pen tool is the basis for vector drawing. The Pen tool now behaves similarly to the Illustrator Pen tool to provide consistency across Adobe software. Flash provides a number of ways to draw and edit objects that are unique to Flash, but the Pen tool utilizes procedures that will be familiar to those who have used other vector drawing programs. The Pen tool utilizes anchor points and Bézier handles to create lines and shapes and behaves in a way that is familiar to those who have used other programs such as Adobe Illustrator and Adobe FreeHand. You can use the Pen tool arrow to select a different pen to add, delete, or convert anchor points. You can edit the anchor points and vectors to create the drawings you want.
Click the Pen tool on the Tools panel.
Click on the Stage.
An anchor point is created.
Move your pointer to another position, and then click again.
Flash connects the two anchor points.
Double-click to end the path.
Did You Know?
You can end an open path using a keyboard shortcut. Press
+click (Mac) or Ctrl+click (Win).
See Also
See “Modifying Shapes with the Sub-Selection Tool” on page 116 for information on using tools.
Click the Pen tool on the Tools panel.
Click on the Stage.
An anchor point is created.
Move your pointer to another position, and then click again.
Flash connects the two anchor points.
Move the pointer to a third position, and then click again.
Flash connects the second and third anchor points.
Move the pointer back to the first anchor point.
A small circle appears next to the pen pointer indicating you can close the path of the shape.
Click to close the shape.
Did You Know?
You can delete an anchor point with the Pen tool. Click the Pen tool arrow, click Delete Anchor Point tool, and then click the point you want to delete.
You can add an anchor point with the Pen tool. Click the Pen tool arrow, click Add Anchor Point tool, and then click where you want to add a point.
You can create horizontal, vertical, and 45 degree lines while you draw. Hold the Shift key while you draw to constrain a line to horizontal, vertical, and 45 degree angles.
Understanding Pen Pointers
|
Pointer |
Description |
|---|---|
|
Initial Anchor Point
|
First pointer to create the beginning of a new path. |
|
Sequential Anchor Point
|
Creates an anchor point with a line connecting the previous anchor point. |
|
Add Anchor Point
|
Adds an anchor point to existing path. |
|
Delete Anchor Point
|
Deletes an anchor point within a path. |
|
Continue Path
|
Extends a new path from an existing anchor point. |
|
Close Path
|
Closes the path of a drawing on the starting anchor point. |
|
Join Paths
|
Closes the path except not over the starting anchor point. |
|
Retract Bézier Handle
|
Displays Bézier handles when you point to an anchor. Click to retract the handles and revert to straight segments. |
|
Convert Anchor Point
|
Converts a corner point without direction lines to a corner point with independent direction lines. Use Shift+C modifier keys to toggle the pen. |
The Pen tool can be used to draw precise and complex curves by simply clicking and dragging it on the Stage. These curves can be modified with precision by adjusting the Bézier handles that extend from the anchor points, or you can move the anchor points themselves. In this way, you can create any number of shape variations. For best results, make the grid visible so aligning anchor points isn’t such a mystery.
Click the Pen tool on the Tools panel.
Click on the Stage without releasing the mouse, drag up, and then release the mouse.
Position the pointer to the right of the original point, drag in the opposite direction of the curve, and then release the mouse when the curve is where you want it.
Continue adding points as needed. To end the path, double-click or point to the last anchor point drawn and click on it.
Did You Know?
You can select to Show Precise Cursors instead of the tool icons in the General tab of the Preferences dialog box. When this option is selected, drawing tools, such as the Pen tool, appear as crosshairs for better precision and alignment to grids and guides.
You can convert a curve point to a corner point. Click the Pen tool arrow, click Convert Anchor Point tool, and then click the curve point you want to covert to a corner point.
Click the Pen tool on the Tools panel.
Click on the Stage without releasing the mouse, drag down, and then release the mouse.
Position the pointer to the right of the original point, drag in the same direction as the first drag, and then release the mouse when the curve is where you want it.
Continue adding points as needed. To end the path, double-click or return to the last anchor point drawn and click on it.
In Flash, unlike other vector drawing programs, you can edit shapes and lines in a unique, freeform way by simply dragging with the Arrow Selection tool. You can quickly adjust the curve or corner of a shape or line without having to select anchor points or use any other tools. This way of editing shapes is also useful for creating shape tweens where amorphous, organic movement is desired. This is what sets Flash apart from other animation tools and gives it its distinctive style. Additionally, you can convert curved line segments into corner points with this simple drag technique.
Click the Oval tool on the Tools panel and then create a simple oval shape.
Click the Selection tool on the Tools panel.
The pointer becomes an arrow.
Make sure the shape you want to modify is not selected.
Position the pointer on the edge of the shape, and then drag to modify the shape.
You can pull the curve to any position.
Vector shapes are made up of anchor points connected by line segments. There are two types of anchor points: corner points and curve points. Corner points connect two line segments in a sharp angle such as the corner of a square. Curve points define a curve or positions along a straight line and can be modified with Bézier handles. These handles extend out from the curve point and allow for very precise modification of the shape of the curve. The Sub-Selection tool works hand-in-hand with the Pen tool to create and modify shapes and lines in this way.
Create a simple oval shape using the Oval tool.
Click the Sub-Selection tool on the Tools panel.
The pointer becomes an empty (or white) arrow.
Click on the edge of the shape to reveal the anchor points, and then click on an anchor point to select it or drag a selection rectangle to select multiple anchor points.
The anchor points are the little white squares around the edge of the shape. When selected, Bézier handles appear on either side of the anchor point.
Grab one of the handles or the anchor points themselves and drag it, and then release the mouse.
Create a simple rectangle shape using the Rectangle tool.
Click the Sub-Selection tool on the Tools panel.
The pointer becomes an empty (or white) arrow.
Click on the edge of the shape to select it and then click on one of the corner points to select it.
Press Option+drag (Mac) or Alt+drag (Win) the point to convert it to a curve point and create Bézier handles.
Create a simple oval shape using the Oval tool.
Click the Pen tool on the Tools panel.
The pointer becomes a small pen.
Click on the edge of the shape to reveal the anchor points.
Position the pointer over one of the curve points.
A small corner icon appears.
Click on the point to convert it to a corner point.
FL 2.3
There are a number of ways to change the scale or size of graphics in Flash. The Free Transform tool on Tools panel allows you to interactively scale and rotate any selected object or shape on the Stage. Nearly every object in Flash can be transformed with these two functions of the Free Transform tool including groups, symbols, text, bitmaps, and editable shapes. The Free Transform tool allows you to select an object on the Stage and then interactively change its size or rotate it freely. Both options are available at once depending on where you place your mouse on the bounding box that appears.
Select the object by clicking on it or by dragging a selection marquee around it with the Selection tool.
Click the Free Transform tool on the Tools panel.
Click the Scale Modifier button in the Options area of the Tools panel.
Drag any of the small handles on the bounding box to change the size of the shape. The corner handles resize proportionally while the handles along the sides resize either horizontally or vertically.
To change the transformation point, drag the circle handle.
Did You Know?
You can restore a transformed object. Select the transformed object, click the Modify menu, point to Transform, and then click Remove Transform.
You can reset a transformed object. If you want to redo a transformation, select the object, and then click the Reset button in the Transform panel (available on the Window menu).
Select the object by clicking on it or by dragging a selection marquee around it.
Click the Free Transform tool on the Tools panel.
Click the Rotate/Skew Modifier button in the Options area of the Tools panel.
Drag any of the corner handles on the bounding box to rotate the shape. Drag the handles along the side to skew the object.
To change the transformation point, drag the circle handle.
FL 2.3
In addition to the scale and rotation changes that can be applied to groups, symbols, bitmaps, text and editable shapes, there are two additional transforms available only to editable shapes. Distort and Envelope are two modes available in the Free Transform tool options that enable you to transform the vectors of editable shapes to varying degrees. Distort transformations work on adjoining edges, tapering them down to vanishing points, similar to perspective. Envelope transformations allow you to warp the edges of a shape by splitting it up into smaller portions each controlled by their own vectors and anchor points.
FL 2.3
After you create a gradient fill, you can transform it by adjusting the size, rotation, width, or center of the fill with the Gradient Transform tool (formerly called the Fill Transform tool). For a radial gradient, you can now adjust the focal point (center) of a gradient fill applied to an object. You can also use the Gradient Transform tool to modify a bitmap fill.
Click the Gradient Transform tool on the Tools panel.
Click the gradient fill to select it.
A bounding box appears around it.
Position the pointer over an editing handle on the bounding box to identify its function.
• Center point. Four-way arrow.
• Focal point. Inverted triangle.
• Size. Circle with an arrow.
• Rotation. Four arrows in the shape of a circle.
• Width. Double-ended arrow.
Click and drag an editing handle to adjust the gradient fill.
See Also
See “Modifying a Bitmap Fill” on page 206 for information on using the Gradient Transform tool with bitmaps.
FL 2.3
In Flash, you can add 3D perspective effects (New!) to a movie clip by moving and rotating it in 3D space on the Stage. When you move or rotate a movie clip by the z axis, it becomes a 3D movie clip. Moving an object in 3D space is called translation, and rotating an object in 3D space is called transformation. Flash provides two different 3D space: global and local. Global 3D space is the Stage space, while local 3D space is the movie clip space. The default mode is global. You can move a movie clip in 3D space with the 3D Translation tool. When you do, three axes appear in the 3D object: the x axis is read, the y axis is green, and the z axis is blue. In addition, you can rotate a movie clip in 3D space with the 3D Transformation tool. When you do, you can rotate around an individual axis or use the orange free rotate control to rotate around the x and y axes at the same time. If you want to change the effect of the rotation, move the center point. When you select a 3D object, it appears with a 3D axis overlay.
Click the 3D Translation tool on the Tools panel.
Click the Global Transform button on the Tools panel to select it for global mode or deselect it for local mode. The default is global.
Select one or more movie clip objects.
• When you select multiple movie clips, and move one of them, the others move in the same way. Shift double-click one of the selected objects to move the axis controls to that object.
Drag the arrow tips (x- and y-axis) in the direction of the arrow or the black dot (z-axis) up or down.
• You can also move the object manually by using the Property Inspector.
Click the 3D Rotation tool on the Tools panel.
Click the Global Transform button on the Tools panel to select it for global mode or deselect it for local mode. The default is global.
Select one or more movie clip objects.
• When you select multiple movie clips, and move one of them, the others move in the same way. Shift double-click one of the selected objects to move the axis controls to that object.
Drag one of the four axis controls to rotate around that axis, or the free rotate control to rotate x and y axis at the same time.
To move the rotation control center point relative to the movie clip, drag the center point.
a. Double-click the center point to move it back to the center of the movie clip.
FL 2.3
The Perspective Angle (New!) affects the size and view of 3D movie clips on the Stage. It’s like zooming in and out with a camera lens, which changes the angle of view through the lens. When you increase the angle, 3D objects appear closer to the viewer. When you decrease the angle, 3D objects appear further away. The default angle is 55 degrees of view, which is like a normal camera lens. You can adjust the value from 1 degree to 180 degrees. You can control only one viewpoint, or camera. Each Flash file has only one Perspective Angle.
FL 2.3
Vanishing Point (New!) gives you the ability to move 3D movie clips and still maintain the same visual perspective of the original. Vanishing Point controls the orientation of the z-axis of 3D movie clips on the Stage. As you move the z-axis, 3D movie clips recede towards the Vanishing Point, which you can adjust to create the appearance you want. Each Flash file has only one Vanishing Point. If you move the Vanishing Point back to the default position in center of the Stage, you can use the Reset button in the Property Inspector.
Select the 3D movie clip instance on the Stage that you want to change.
Click the Window menu, and then click Properties to open the Property Inspector.
Enter an x- and y-axis value in the Vanishing Point boxes or drag the hot text to change the value in the Property Inspector.
As you drag the hot text, guides indicating the location of the Vanishing Point appears on the Stage.
To move the Vanishing Point back to the center of the Stage, click the Reset button in the Property Inspector.
Unless you lock or hide layers, or lock objects, the graphics on all layers are available for editing. You can select objects on one or more layers, cut or copy them, and then paste them all into a single layer. Flash can have only one layer active at a time. When you create and paste graphics, Flash places them on the active layer of a document. You can paste objects in two different ways: Paste In Center and Paste In Place. Paste In Center puts objects in the center of the open Flash window, which might not be the Stage. If you want to paste to the center of the Stage, you need to center the Stage in the open window. Paste In Place puts objects at the same location it had been when you cut or copied it.
Create or open a document with several layers.
Select one or more objects on the Stage.
Flash selects the object’s layer in the Timeline.
Click the Edit menu, and then click Cut or Copy.
Select a destination layer in the Timeline.
Click the Edit menu, and then click Paste In Center.
Flash pastes the objects on the Stage in the middle of the active layer.
Create or open a document with several layers.
Select one or more objects on the Stage.
Flash selects the object’s layer in the Timeline.
Click the Edit menu, and then click Cut or Copy.
Select a destination layer in the Timeline.
Click the Edit menu, and then click Paste In Place.
Flash pastes the objects into their original locations on the Stage.
When you select an object on the Stage, Flash selects the object’s layer in the Timeline. The reverse is also true. When you select a layer in the Timeline, Flash selects all the objects for that layer on the Stage. As you work with objects on different layers, it helps to know how selections work. Unless you lock or hide layers, or lock objects, the objects on all layers, either active or inactive, are available for editing. You can activate a layer and edit objects on inactive layers.
Create or open a document with several layers.
Click the Selection tool on the Tools panel.
Select an object on the Stage.
Flash selects the object’s layer in the Timeline.
Click a blank area of the Stage.
Flash deselects the object but keeps the active layer.
Make changes to another object in another layer (inactive layer) without actually selecting the object. You can do any of the following:
a. Drag an object’s outline to reshape it.
b. Select a tool on the Tools panel, such as the Paint Bucket tool, and use it to modify the object.
Flash modifies the object in the inactive layer. The active layer didn’t change. Flash changes active layers only if you select an object.
If you have several objects on a single layer, and need to move them onto separate layers, you can use Cut and Paste in place for each object or you can save time by using the Distribute to Layers command. The Distribute to Layers commands puts each object (shapes, groups, and symbols) in a selection on a separate layer; any unselected objects remain on their original layer. This command comes in handy when you want to create a motion tweening animation, which requires objects to be on individual layers.
Create or open a document with several objects on a single layer.
Select all the objects on a single layer you want to distribute to separate layers.
Click the Modify menu, point to Timeline, and then click Distribute To Layers.
Timesaver
Press
+Shift+D (Mac) or Ctrl+Shift+D (Win) to distribute to layers.
Flash creates a layer for each object. New layers appear at the bottom of the Timeline in the order in which you originally placed them on the Stage. Each object is placed in the same location on the Stage (like the Paste In Place command).
See Also
See Chapter 8, “Animating with Motion Tweening” on page 231 for information on using motion tweening.
The Drawing category on the Preferences dialog box contains a number of drawing settings that control the sensitivity and behavior of Flash’s drawing tools. Make changes to the tolerance levels for smoothing or straightening, set the sensitivity for line and shape recognition, or fine-tune snapping. You can exercise greater control over your drawing or allow Flash to perform corrections and adjustments as you draw. You can customize the way you use Pen tools, draw connecting lines and smooth curves, and recognize lines and shapes.
Click the Flash (Mac) or Edit (Win) menu, and then click Preferences.
Click the Drawing category.
Specify the drawing option you want:
• Pen Tool options. Select check boxes to show pen preview, solid points, and precise cursors.
• Connect Lines. Determines how close the ends of any two lines need to be before Flash connects them. It controls when a line is converted into a perfectly straight line.
• Smooth Curves. Determines the amount of smoothing applied to a drawn line. The lower the smoothing applied, the closer the line appears to what you have drawn.
• Recognize Lines. Defines how straight a line drawn with the Pencil tool must be before it’s converted into a perfectly straight line.
• Recognize Shapes. Sets how precise simple geometric shapes must be drawn before they are detected as shapes.
• Click Accuracy. Determines how near to a shape the pointer must be before it’s recognized.
• IK Bone Tool. Automatically sets the transformation point. (New!)
Click OK.