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

Home > Articles > Web Design & Development > Usability

Working with the Color Object and Cursors

David Emberton walks you through a hands-on lesson combining Flash 5 features and a robust yet compact coloring app. Along the way, you'll learn how to use the Color object, the attachMovie action, symbol linkage, and the Mouse object.
Like this article? We recommend

Like this article? We recommend

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


Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020