Working with the Color Object and Cursors

Like this article? We recommend

Flash 5 Magic

Learn More Buy

Like this article? We recommend

Like this article? We recommend 

Flash 5 Magic

Learn More Buy

Art courtesy of Learning Soft

Coloring applications are a perennial favorite with children and are especially useful for developing hand-eye coordination and mousing skills. This particular example (see Figure 1) combines a raft of Flash 5 features to create a coloring app that's robust and compact. This article covers the use of the Color object, the attachMovie action, symbol linkage, and the Mouse object.

Throughout the course of the article, you will assign scripts to various keyframes and will set properties in the Library. The main tasks to be completed are setting up the paint program, creating the sliding color chooser, scripting the tool buttons, and scripting the paint tools themselves.

Figure 1 The SpacePainter application.

Initializing the Paint Program

Roughly half the ActionScript for SpacePainter is located on the first keyframe of the movie. It consists of three main sections: initialization, setup, and the creation of three custom functions that check the position of the mouse, adjust the current color display, and reset the picture. In this section, that script will be added to the Flash file, and the Linkage property of various symbols will be set to allow import.

1. Download the archive (Mac or Windows) containing the tutorial files. Unzip it and open SpacePainter_Start.fla (see Figure 2). The file contains all the movies and graphics placed and named. (If you want to see the finished file, open SpacePainter_Final.fla.)

   Figure 2 Open the SpacePainter_Start.fla file and save it to your local hard drive.

   The first task is to hide the real cursor and then call up an instance of the Pointer symbol from the Library to replace the cursor. The attachMovie action creates this instance of Pointer and places it in a very high level, so that it will always appear over top of other shapes drawn by the user. The code for making Pointer "stick" to the mouse will be added in the next section.

2. Open the Actions panel, select the first keyframe of the ActionScript layer, and insert this code (see Figure 3):

   // Change the Mouse Cursor
   Mouse.hide();
   _root.attachMovie("Pointer", "Pointer", 10000000);

   This application makes extensive use of the Color object, which is a special kind of data object used to control the color of Movie Clip instances. The Color object works with RGB values, which are also commonly used in Web pages to set the color of various elements.

   Figure 3 Mouse.hide() is added to the first frame of the ActionScript layer.

   RGB stands for Red, Green, Blue; an RGB value is used to describe a particular mix of those three colors onscreen. Flash can understand and display millions of different RGB combinations, each expressed as a hexadecimal number.

3. Use the Actions panel to insert this code:

   // Create Hexadecimal Number Array
   HexSeries = new Array("0","1","2","3","4","5","6","7","8",[ccc]
   "9","A","B","C","D","E","F");
   HexTable = new Array();
   CounterC = 0;
   
   for (CounterA = 0; CounterA < 16; CounterA ++) {
   
      for (CounterB = 0; CounterB < 16; CounterB ++) {
   
         HexTable[CounterC] = HexSeries[CounterA] + [ccc]
   HexSeries[CounterB];
         CounterC ++;
   
      }
   
   }

   Whereas a regular decimal number must switch to double digits after 9, in the hexadecimal number system, letters are used to create more single-digit numbers. This means that a single-digit hexadecimal number series includes 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. A through F stand for 10 through 15. This system allows millions of color combinations to be expressed in six digits.

   The catch is to translate the positions of the sliders in the color chooser to hexadecimal, so an array of hex numbers must be set up.

   First, an array of the single-digit hex numbers is created. Then two nested for loops populate a second array (HexTable) with all 256 two-digit hex combinations. Although each element in HexTable is a two-digit hex number, the actual elements are numbered as decimals from 0 to 255.

4. Add this code to create CurrentColor (see Figure 4):

   // Create Color object for Current Color Display
   CurrentColor = new Color(CurrentColorDisplay);
   AdjustColor();

   Here the Color object creates CurrentColor, which will act as the color controller of the Movie Clip instance CurrentColorDisplay. CurrentColorDisplay is the larger circle to the right of the color sliders, and it displays the shade of color that's currently chosen.

   Whereas most other objects have properties that are set directly (such as _x and _y), to set the color of a Movie Clip, you must wrap it in an instance of Color.

   Figure 4 The CurrentColor code and the call to AdjustColor() are added to the script on the ActionScript layer.

   Also in this code block, AdjustColor() is called. This is a function that will be defined later in this frame, and its job is to look at the three color sliders and change the properties of CurrentColor (see Figure 5) to reflect their positions.

   The picture that comes with SpacePainter consists of 15 elements, each of which is a different Movie Clip instance. To alter their appearances programmatically, an instance of the Color object must be created for each.

   In this code block, a for loop is used to count through each of the separate elements. The eval action is used to combine the value of Counter with some text to get the instance name of each element instance. Then all the new Color instances have their color set with the setRGB method. 0xFFFFFF is a hexadecimal number that stands for full-strength red, blue, and green (remember, FF is the highest two-digit hexadecimal number), and all three colors mixed at full intensity produces onscreen white.

   Figure 5 The Color Disc Movie Clip already has an instance name of CurrentColorDisplay, which is referenced in the code.

5. To complete the initialization section of this script, insert the following code:

   // Create Color objects for each Picture Element
   for (Counter = 0; Counter < 15; Counter ++) {
      
      eval("Element" + Counter + "Color") = [ccc]
   new Color(eval("Element" + Counter));
      eval("Element" + Counter + "Color").setRGB(0xFFFFFF);
   
   }

   Having entered the run-once section of the script, you will define the reusable custom functions. The first is AdjustColor(), which was called in step 3.

6. To add the function, insert this code:

   // Adjust Color Function
   function AdjustColor() {
   
      // Get Color Mix
      RedValue = int(((RedSlider._x - 365) / 60) * 255);
      GreenValue = int(((GreenSlider._x - 365) / 60) * 255);
      BlueValue = int(((BlueSlider._x - 365) / 60) * 255);
      
      // Set Current Color
      CurrentColor.setRGB(parseInt(HexTable[RedValue] + [ccc]
   HexTable[GreenValue] + HexTable[BlueValue], 16));
   }

   NOTE

   How can a custom function be called before it has even been defined? Flash won't execute any code on a keyframe until it is completely loaded and the graphics have been drawn. Therefore, because AdjustColor() is defined on the same frame that it is being called on, there will be no error.

   AdjustColor() (see Figure 6) evaluates the horizontal positioning of each of the three sliders in the color chooser. The sliders visually represent the amount of red, green, and blue (respectively) in the current color. So, AdjustColor() calculates that mix and changes the appearance of CurrentColorDisplay in response.

   The first part of the function creates three variables: RedValue, GreenValue, and BlueValue. Each of these variables is assigned a value from 0 to 255, reflecting the _x position of its corresponding color slider. The sliders have a 60-pixel range of motion starting at X: 365, hence the numbers involved. For each slider, 365 is subtracted from the slider's _x position to arrive at a value from 0 to 60. That value is divided by 60 to get a percentage and then is multiplied by 255 to equate that percentage value with a two-digit hexadecimal number. The equation doesn't tend to produce whole numbers, so the int() function is used to convert the result into an integer.

   When all three values have been calculated, the resulting color is used to alter the appearance of CurrentColorDisplay. CurrentColor is the color object attached to that instance, so its setRGB method is used to set the shade. parseInt() is an ActionScript function that can work with numbers of bases other than 10, so it is used to combine all three color values as a hexadecimal number (base 16). Referencing an element in the HexTable array results in the two-digit hex numbers, and the + operator concatenates (joins) them.

   Figure 6 The AdjustColor() function is added to the code on the ActionScript layer.

   The second custom function on this keyframe is MouseInBounds(), which is used to see if the mouse is currently being held over the picture area. The function returns a true or false value that is used by the drawing tool routines to decide whether they should draw. So, if the mouse is outside the drawing area, MouseInBounds() will return false, and nothing will be drawn. Conversely, if the mouse is over the drawing area, MouseInBounds() will return true, and the operation will continue.

7. Input this code to define the MouseInBounds() function (see Figure 7):

   // Check mouse position for draw operation
   function MouseInBounds() {
      if (_xmouse > 83 && _xmouse < 317 && _ymouse > [ccc]
   67 && _ymouse < 323) {
        return(true);
      } else {
        return(false);
   }
   }

   NOTE

   Functions that return a value are very useful when creating programs. Whereas most functions perform some action, these types check a condition or make a calculation and return the result. There are several built-in ActionScript functions of this type; most of them are mathematical in nature, such as int(), for calculating integers, and random(), for random numbers.

   Figure 7 The MouseInBounds() function is added to the code on the ActionScript layer.

8. Insert the code for the third and final custom function, Reset() (see Figure 8):

         function Reset() {
      // Reset color of each Picture Element
      for (Counter = 0; Counter < 15; Counter ++) {
        eval("Element" + Counter + "Color").setRGB(0xFFFFFF);
   }
      // Remove all shapes
      for (Counter = 0; Counter <= [ccc]
   CurrentColorDisplay.ShapeCount; Counter ++) {
        removeMovieClip("Shape" + Counter);
   }
   
   ShapeCount = 0;
   }

   Reset() comprises two parts. The first resets the color of each of the picture elements back to white. This is similar to the code that appeared earlier, using the for loop to count through each of the element numbers while eval calculates their addresses.

   The second part removes all the lines, ellipses, or rectangles that the user may have drawn inside the picture area. The variable CurrentColorDisplay.ShapeCount keeps a count of all those objects while they're being drawn. A for loop counts from 0 to the value of ShapeCount, using the removeMovieClip action to remove each one.

   Throughout the SpacePainter application, the attachMovie action is used to instance symbols from the Library that are not manually placed on the Stage. To make sure that these symbols are exported and available, you must set their Linkage properties.

9. To do that, select the specified symbol and then choose Linkage from the Library's Options menu (see Figure 9). In the Linkage dialog box, click the Export This Symbol option and type in the appropriate Identifier text (see Table 1). The Identifier must be unique for each symbol and is used in the attachMovie action.

   Figure 8 The Reset() function is added to the code on the ActionScript layer.

   Figure 9 The Linkage properties for the specified movie clips are changed as indicated.

   Table 1 Symbol Names and Identifiers

   Symbol Name	Identifier
   Movie Clips > Pointer	Pointer
   Movie Clips > Shapes > Ellipse	Ellipse
   Movie Clips > Shapes > Line	Line
   Movie Clips > Shapes > Pen Line	PenLine
   Movie Clips > Shapes > Rectangle	Rectangle