Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
Like this article? We recommend

Like this article? We recommend

How It Works

The SpacePainter application relies heavily on the Color object, Flash's built-in mouse tools, and Clip Events. Instances of the Color object are created for any drawn shapes, picture elements, and the current color display. Manipulating the movie clip graphics with scripting allows for the creation of many colored copies of the same symbol. In addition, because the colors of various objects are set with script, they can be changed at any time in response to user input (see Figure 25).

Figure 25 The red, green, and blue sliders can be manipulated to produce millions of colors.

When it comes to colors, unless you're already familiar with RGB values, deciphering this number system can be confusing. All colors on the screen are reproduced using a mix of red, green, and blue. To describe a color, all you have to do is determine what proportion of those three basic colors to display. The numbers appear strange because they're hexadecimal. (Hexadecimal numbers have a base of 16 rather than 10, which is what we're accustomed to. The series of single-digit decimal numbers is 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. The hexadecimal single-digit series is 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F, in which A through F are equivalent to 10 through 15 as double-digit numbers.) By using hexadecimal numbers of just six digits, it's possible to express millions of different color mixes in the form RRGGBB.

Figure 26 The Space Painter also features a custom cursor and the ability to draw shapes such as circles and squares.

The other significant technique covered in this project is the creation of custom mouse cursors. Thanks to the Mouse object, you can now use ActionScript to hide or show the normal mouse cursor at will. Combine that with the draggable movie clip, and you have the ability to create your own cursors. This allows the user experience to be tailored to reflect the mood of your Flash movie and makes possible all sorts of creative animation effects.

To create the custom cursor effect (see Figure 25), the Mouse object is used to hide the regular arrow/hand cursor. A movie clip instance is then created on the fly by using the AttachMovie action and by scripting that instance to "drag" or follow the mouse movement—and the illusion of a custom cursor is complete.

SpacePainter is tied together with a series of Clip Event handler scripts, applied to movie clip instances. Clip Events are used here primarily as a substitute for buttons, and they make it possible to create such an application in the most simple way possible. And because different Clip Event scripts can be added to individual instances of a movie clip, the file can be slimmer, too.

  • + Share This
  • 🔖 Save To Your Account