• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 3. BITMAP MEMBERS > USING THE PAINT WINDOW

USING THE PAINT WINDOW

Some people love the Paint window and others hate it. Those who dislike it point to its weakness when compared with programs such as PhotoShop, plus its odd quirks and idiosyncrasies. Those who love it, including me, point to its speed, ease of use, and its unique tool set.

You can open the Paint window by double-clicking a bitmap cast member or choosing +5 on the Mac or Ctrl+5 in Windows. Figure 3.3 shows an empty Paint window. Notice that it has a toolbar both on the top and on the left side of the window. It also has a typical set of buttons and the name field at the top of the window.

Figure 3.3. The Paint window has more than 50 buttons and other items that enable you to alter bitmap images.


It's always best to convert your graphics to the desired bit depth and palette in the program that you originally used to create them. PhotoShop, for instance, generally does a better job of converting and dithering an image down to 8-bit than Director does.


The tools on the left side of the window are used to edit or add to the bitmap. Notice that some of them have a small arrow at the right-bottom corner of the button. This means that you can click and hold over that button to see a small pop-up list of tool options.

Lasso and Marquee Tools

The first two tools, the Lasso and Marquee tools, are the selection tools. They enable you to select an area of the image to manipulate, move, or delete. The Lasso tool has three options and the Marquee tool has four, as follows:

  • Marquee, Shrink— On selection of an element, the selection marquee shrinks to the outside edges of the artwork to create a rectangular selection. All white pixels contained within this selection are seen as opaque white.

  • Marquee, No Shrink— On selection of an element, the selection marquee remains in the dragged position as a rectangular selection. All white pixels contained within this selection are seen as opaque white.

  • Marquee, Lasso— On selection of an element, the color of the pixel where the drag was started and all same-colored touching pixels are ignored. All other colors within the selection are selected within a flat-sided selection. All white pixels contained within this selection are seen as opaque white.

  • Marquee, See Thru Lasso— This option behaves the same as Marquee, Lasso except all white pixels contained within this selection are seen as transparent (no value).

  • Lasso, No Shrink— The area drawn with the Lasso tool retains its shape and selects all its content. All white pixels contained within this selection are seen as opaque white.

  • Lasso, Lasso— On selection of an element, the color of the pixel where the drag was started and all same-colored touching pixels are ignored. All other colors within the selection are selected within the drawn area. All white pixels contained within this selection are seen as opaque white.

  • Lasso, See Thru Lasso— This option behaves the same as Lasso, Lasso, except that all white pixels contained within this selected area are seen as transparent (no value).

Registration Point Tool

The next tool, shown as a target sight, can be used to view or reset the registration point of a member. A registration point is a location in the bitmap that the Stage uses to decide the placement of the sprite. By default, the registration point is at the center of the image. A bitmap displayed at location 50, 120 on the Stage, would then be centered at 50, 120. However, you can use the Registration Point tool to shift that point from the center of the image, and thus have it displayed according to the new registration point.

Why would you want to do this? If you are animating something that requires a series of members—a man jumping, for example—you would expect the center of the graphic to change as the animation progresses. In the middle of the jump, for instance, the center of the man would be higher than at the start. You can move that portion of the sprite higher on the Stage when creating the animation.

Bitmap members use the center of the bitmap as the default registration point. However, text and field members use the upper-left corner of the sprite as their registration points. You can't change the registration points of text or field members.


However, by using different registration points, you can have each bitmap in the animation stay at the same Stage location, and let the offset of registration points do the movement for you. You can then easily reuse this set of cast members as an animation without having to reposition every sprite.

If you open a bitmap member where the registration point is not in the center, you can double-click the Registration Point tool button to recenter it.


Eraser Tool

Next to the Registration Point tool is the Eraser tool. You can choose this tool to paint white pixels on the bitmap. This has the same effect as using the Paintbrush tool with the color set to white, except that the eraser paints in a different shape. Double-clicking this button erases the entire image in the window.

Hand Tool

The Hand tool is one way to move artwork around in the Paint window. It does the same job as the window's scrollbars. You can quickly access the Hand tool by pressing the spacebar.

The Paint window has no real boundaries, so it's easy to move the paint object so far away from the center of the visible window that you can't find it again. In this situation, simply close and reopen the Paint window and the artwork again appears in the middle.

Zoom Tool

The capacity of the Paint window to enable you to zoom in on artwork with the Zoom tool is one of its best features. You can edit your graphic's pixels much more easily this way. You can zoom up to 800%.

The Paint window changes somewhat when you zoom in. The upper-right corner of the window contains an actual-size version of what you see in the main, zoomed area of the window. When you make changes to the bitmap, both images update. Because the number of pixels that fit in the Paint window changes as you zoom, this actual-size area also shrinks as you zoom in.

The result is that at 200% zoom, one quarter of the window shows the actual-size view. At 400%, only 1/16 of the window is occupied by it. This makes editing at 400% and 800% much more effective than at 200%. You can click the actual-size area to immediately zoom all the way back out again. Figure 3.4 shows the Paint window with a zoom of 400%.

Figure 3.4. The Paint window here is zoomed at 400%. The upper-right corner shows the same image, but actual size.


A few shortcuts enable you to zoom in and out in the Paint window. You can press the ++ (plus) and +- (minus) on the Mac, or Ctrl++ (plus) and Ctrl+- (minus) in Windows to quickly zoom in and out. While using most Paint window tools, you can also hold down the key on the Mac and the Control key in Windows and click in the Paint window to zoom in. The +Shift keys on the Mac and the Ctrl+Shift keys in Windows enable you to zoom back out.

Eyedropper Tool

The Eyedropper tool enables you to select a color in the Paint window to use as the foreground color. If you hold down the Shift key, that color becomes the background color. If you hold down the Option key on the Mac or the Alt key in Windows, that color becomes the gradient destination color.

As in other drawing programs, you can hold down the Option key on the Mac or the Alt key in Windows to temporarily use the Eyedropper tool without selecting it from the tool area. You can also hold down the Shift key at the same time to grab a background color.

Paint Bucket Tool

This tool enables you to fill an area with the foreground color. The fill begins at the hot spot of the fill cursor, which is the tip of the pouring paint. The fill changes the color of the selected pixel and all pixels of that color that surround it. Double-clicking the Paint Bucket button brings up the Gradient Settings dialog box.

Text Tool

You can paint text into a bitmap member with the Text tool. Selecting this tool changes the cursor to a text insert cursor. You can then click in the Paint window to set the start position of the text. A blinking cursor appears and you can start to type. While typing, you can double-click the Text tool button to bring up the Font dialog box, with which you can change the font, size, and style of the text you are inserting.

After you have clicked another tool, or clicked in the Paint window to start typing another piece of text, the text you type becomes a permanent part of the image. You can, however, use Undo to restore the bitmap to its preceding state.

Text entered into the Paint window is not anti-aliased, nor is it editable. To create members that are purely text, use the text member type instead.


Pencil Tool

This tool is the simplest, and yet the most useful, tool in the Paint window. You can draw one pixel at a time with this tool, something that is not easy to do in PhotoShop or other image-editing programs. Pixel editing is a must for creating precise graphics to be displayed on the computer screen.

Holding down the Shift key before clicking the screen constrains the Pencil tool to drawing a straight line, either horizontally or vertically.


Air Brush Tool

The effect the Air Brush tool creates, at first, might not look like paint being sprayed out of an air brush. To get a very smooth spray, the pixels must be smoothed out or anti-aliased, something you generally don't want to do in a Director animation. The Air Brush tool can create some fun patterns despite its limitations. This tool has five fixed settings, ranging from small to large, and a custom setting dialog box to set up your own air brush pattern. Click the Air Brush tool to activate the pop-up menu. Choose Settings or double-click the Air Brush tool to open the Air Brush Settings dialog box.

The Air Brush Settings dialog box is shown in Figure 3.5. The options are as follows:

  • Flow Rate— How fast the paint comes out of the gun. The higher the setting, the quicker the paint dots come out of the gun.

  • Spray Area— How much area the dots can cover for each click of the mouse. If the mouse is clicked and held in one place for a period of time, the paint dots eventually fill the entire spray area.

  • Dot SizeSize of the paint dots that hit the canvas.

  • Uniform SpraySprays an even amount of paint from the tool.

  • Random SizesSprays paint dots of random sizes.

  • Current BrushSets the paint dot to the shape of the Brush tool. Double-click the Brush tool to set this option.

Figure 3.5. The Air Brush Settings dialog box allows you to customize the Air Brush tool to create a number of different effects.


Brush Tool

The Brush tool is used for freehand drawing. It uses one of five brush settings. Click and hold the button to choose which setting you want to use, or open the Brush Settings dialog box.

You can preset up to five brushes in the Paint window at any one time. Figure 3.6 shows the Brush Settings dialog box, which includes some standard brush shapes and a brush-editing area. You can get to this dialog box by double-clicking the Brush tool in the Paint window. This dialog box enables you to edit the currently selected brush.

Figure 3.6. The Brush Settings dialog box enables you to set the shape of one of five brushes.


In the Brush Settings dialog box, you can choose one of the preset Standard brush tips. These brush tips appear in a box on the left in the dialog box. You can also access the brush tips by clicking the pop-up menu at the top of the dialog box to customize one of the Standard settings.

The palette of standard brush settings is fully customizable via the Brush Settings window. With the Brush Settings dialog box open, select an area outside the dialog box and a black-and-white image of what is under the cursor is placed in the custom brush creation canvas, shown in the box on the right side of the Brush Settings dialog box.

Within the Brush Settings dialog box, pixels can be added or removed from the enlarged brush creation canvas. You can use the move arrow buttons below the brush creation canvas to shuffle the pixels up, down, right, and left one pixel. The pixels in the blown-up area can also be swapped or inverted: white to black or black to white. In addition, brushes can be copied to or from the Clipboard.

Arc Tool

The Arc tool draws an arched line on the canvas the thickness of the line set in the line weight selection area of the Tool palette. Pressing the Shift key when an arc is created causes the arc to constrain to a circular radius.

Line Tool

The Line tool creates straight lines. The width of a line in the Paint window can be between 1 and 64 pixels. Click the default one-, two-, and three-pixel line width settings, or double-click the Other Line Width setting to select a larger width. Pressing the Shift key before starting to draw a line causes the line to constrain to a 45° angle.

Shape Tools

The Rectangle and Ellipse tools create basic shapes on the canvas. These bitmapped shapes can be filled or unfilled, depending on which tool you select. The line weight of the shape is set with the Line Weight selectors.

Pressing the Shift key as the bitmapped rectangle or ellipse is being created constrains the shape to square or circular, respectively.

The Polygon tools create both filled and outlined polygons. Each click you make on the Paint window with the Polygon tool becomes a corner of the desired shape. The shape can be finished by either double-clicking to close the shape or by clicking the last position over the top of the first position.

Color Chips

Four color chips are in the left-side tool area of the Paint window. They correspond to the foreground color, the gradient destination color, the foreground color, and the background color. You will notice that two color chips represent the foreground color. They behave as you might expect, with a change made to one of these two affecting both. So, despite the four color chips, there are really only three color settings.

The foreground color is used by just about all the tools as the primary painting color. The background color is used when you are drawing or filling an area with a pattern. It is also used as the background color when you are drawing text in the Paint window. The gradient destination color is used when you are filling or painting with a gradient, rather than a solid color.

To change any of these colors, click and hold the chip. A color palette appears, in which the current color is selected. You can drag the cursor to the new color and release. This little Palette selector also includes a group of favorite colors and a Color Picker tool option for selecting 32-bit colors. Figure 3.7 shows what this Palette selector looks like.

Figure 3.7. The Palette selector enables you to choose a color. It is used in the Paint window, as well as many other Director tools.


Gradients

Between the first foreground color chip and the gradient destination color chip is a small area in which you can specify a gradient for use with the Paint Bucket tool and some other tools. You can select options such as Top to Bottom, Bottom to Top, Left to Right, Right to Left, Directional, Shape Burst, and Sun Burst. You can also choose to bring up the Gradient Settings dialog box, shown in Figure 3.8.

Figure 3.8. The Gradient Settings dialog box enables you to choose many options. Experimentation is the best way to understand them all.


After you have set the gradient options, you still need to select Gradient as your ink effect for a specific tool. To do this, select the tool you want, such as the Paint Bucket, and then select Gradient from the pop-up menu at the bottom of the Paint window. You can find out more about this pop-up menu a little later in this chapter.

Patterns

Most of the time, you will want to draw and fill with solid colors. However, Director includes a set of patterns that you can use instead. Clicking the area directly below the background color chip brings up the palette of patterns shown in Figure 3.9. The patterns should display using your current foreground and background colors.

Figure 3.9. The Pattern selector enables you to specify a pattern with which to paint and fill.


After you select a pattern, tools such as the Paintbrush and the Paint Bucket will use that pattern, with the current colors, to draw. The Pencil tool remains a single-pixel editing tool, however.

Line Weight Settings

Five choices for line weights are given at the bottom-left corner of the Paint window. The first is to have no line. The others are widths 1 through 3. The last line width choice is a custom setting. Double-clicking the last line width choice brings up the Paint Window Preferences dialog box, where you can set it.

Paint Window Inks

A small pop-up menu at the bottom of the Paint window usually reads “Normal.” This pop-up enables you to set the ink of a drawing tool, such as the Paintbrush tool or the Rectangle tool. These are different from sprite inks in that they apply only to the result of editing in the Paint window. Not all inks are available to all painting tools. The ink options are as follows:

  • Normal— The default ink draws with the foreground color or selected pattern.

  • Transparent— When used with a pattern, this ink draws only the foreground color and leaves the background areas (white pixels) of the pattern with their existing colors.

  • Reverse— This ink reverses the color of anything drawn over. If used with a pattern, only the black pixels of the pattern reverse the pixels under them.

  • Ghost— This ink draws with the current background color. If you are using black and white, white pixels are drawn in such a way that they show up over a black background.

  • Gradient— This ink uses the gradient settings and draws appropriately. Use with the Paint Bucket tool or a shape drawing tool.

  • Reveal— This unusual ink uses the image of the previous bitmap member in the Cast. As you paint, you are actually painting with colors from that member, mapped onto the current bitmap.

  • Cycle— This ink causes the Paintbrush tool to cycle through colors in the palette as you draw. It starts with the foreground color and cycles through all the colors until it reaches the background color. It can then repeat the sequence or move through the sequence in reverse, depending on your setting in the Paint Window Preferences dialog box.

  • Switch— This ink causes any pixels that use the foreground color to switch to the destination color. You should have your monitor set to 8 bits for this to work properly.

  • Blend— This ink enables you to blend the foreground color with the color of the pixels underneath it. It works best with 16- or 32-bit bitmaps.

  • Darkest— This ink draws the foreground color only when it is darker than the pixels you are drawing over.

  • Lightest— This ink draws the foreground color only when it is lighter than the pixels you are drawing over.

  • Darken— This ink darkens the pixels as you paint over them.

  • Lighten— This ink lightens the pixels as you paint over them.

  • Smooth— This ink smoothes differences between adjoining pixels. The current color settings have no effect on the operation of this ink.

  • Smear— This ink creates an effect similar to smearing paint across the image. The current color settings have no effect on the operation of this ink.

  • Smudge— This ink is similar to smear, but the colors do not carry as far.

  • Spread— This ink is similar to using the Eyedropper tool and then painting. Each time you click in the Paint window, the spread ink picks up the color under the brush and uses it to paint that stroke. It even works when several different colors are under the paintbrush. It just repeats that pattern as you draw.

  • Clipboard— This ink draws with the clipboard image as the paintbrush shape and color pattern.

Paint Window Preferences

The Paint Window Preferences dialog box, shown in Figure 3.10, enables you to set a variety of options. In the middle, you can see the custom line width setting (“Other” Line Width), mentioned previously. Most of the rest of the options deal with the different inks.

Figure 3.10. Open the Paint Window Preferences dialog box by choosing File, Preferences, Paint or by double-clicking the custom line width tool.


The Remember Color and Remember Ink options enable you to specify whether you want Director to remember the last color set and ink used with each brush. The Interpolate by option determines whether the Cycle ink is to cycle between colors in the palette or real colors.

The Paint window also has a ruler that you can turn on or off. You can do this by choosing View, Rulers. After rulers are turned on, you can click a small area in the upper-left corner of the Paint window to change the type of units that the ruler displays.

You can also hide or show the Paint window tools in the View menu. The tools still work, but you won't be able to change them unless you use keyboard shortcuts.

The Effects Toolbar

Above the paint area is another toolbar space with a few buttons that represent certain tools. To use these tools, first select an area in the bitmap. These tools are defined as follows:

  • Flip— The Flip Horizontal and Flip Vertical tools flip a selected element across a horizontal or vertical axis.

  • Rotate— Selected elements can be rotated 90° clockwise or counterclockwise. The Free Rotate tool enables the selected element to rotate freely around its center. The selection places handles on each of the element's corners. Drag these handles to a new position to produce the rotation.

  • DistortThe next three buttons can create interesting effects. The Skew tool skews selected elements by slanting the sides of an element equally, leaving the top and bottom of the element perpendicular to one another. The Warp tool enables handles of the selected element to be pulled around to create a smashed or twisted effect. The Perspective tool shrinks or expands the edges of the selected element to give the illusion of depth.

  • SmoothThis toolenables smoothing of pixels within a selected area of artwork. The smoothing effect functions only when the bit depth of the cast member is set to 8 bits.

  • Trace EdgesThis tool creates a new 1-pixel thick line around the edges of the original pixels of the artwork, leaving the original pixels white.

  • Invert— When clicked, Invert causes the selection to change its black pixels to white, and white pixels to black. Colors in the active 8-bit palette flip to the opposite side of the palette. To see the exact place a color occupies in a palette, open the Color Palettes window from the Window menu. If an image has a color depth higher than 8-bit, the Invert button replaces the colors with their RGB complement colors.

  • Lighten and DarkenSelected elements grow lighter or darker in their palette of colors. This command is unavailable in a 16-bit color space.

  • FillThis tool fills any selected area with the current foreground color or pattern.

  • Switch Colors— This tool changes the color of identically colored pixels in a selected area. Pixels that match the foreground color are changed to the destination color. Switch Colors works only when the cast member is set to a palette of 256 or fewer colors.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint