Flash CS3 Tutorial For the Advanced ColorPicker

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
Flash CS3 Tutorial For the Advanced ColorPicker
Add interactive colour to your flash project. (colour image by Georgios Kollidas from Fotolia.com)

An advanced ColorPicker component can put colour into your flash animation, game or graphic design without a lot of work. If your application is a game, a ColorPicker within the animation will let the game player change the colour of the background, the characters or any object on the flash stage.

Incorporating a ColorPicker component in your flash project is a relatively simple task. And it's even simpler if you have good ActionScript programming skills.

Skill level:

Things you need

  • Adobe Flash Professional, CS3, CS4 or CS5
  • Personal computer

Show MoreHide


  1. 1

    Start Adobe Flash Professional. Select "Flash File (Actionscript 3.0)" located below the "Create New Category" in the splash screen that appears.

    Flash CS3 Tutorial For the Advanced ColorPicker
    Start the Flash Program (start image by Ewe Degiampietro from Fotolia.com)
  2. 2

    Select "Window>Component". In the Component panel select "ColorPicker" located underneath the "User Interface" directory. Position the cursor over the ColorPicker. Depress the mouse button and drag the ColorPicker to the stage. Position the ColorPicker on the stage so that it will fit within your layout. Release the mouse button.

    Flash CS3 Tutorial For the Advanced ColorPicker
    Instantiate the Color Picker Component (add directory icon image by michele goglio from Fotolia.com)
  3. 3

    Open the Properties panel if it's not already open ("Window>Properties"). Position your cursor within the "Instance Name" text box at the top of the Properties panel. Type in "Color Wheel" in the "Instance Name" text box.

    Flash CS3 Tutorial For the Advanced ColorPicker
    Name the ColorPicker instance. (name 3d sign image by onlinebewerbung.de from Fotolia.com)
  4. 4

    Open the Action editor, "Window>Actions". Write the ActionScript code needed to import the ColorPicker class modules:

    import fl.controls.ColorPicker;

    import fl.events.ColorPickerEvent;

    Write the code to add ColorPicker interactivity. Assign an event listener to the ColorPicker you instantiated on the stage, "Color Wheel." Use the ColorPicker event "Change" and a function named ColorChange to make your ColorPicker interactive. Write the interactive code so that such a circle will be drawn every time a colour is selected from the ColorPicker.

    colorWheel.addEventListener(ColorPickerEvent.CHANGE, colorChange);

    var pickedcolor: uint;

    function colorChange(event:ColorPickerEvent):void {

    pickedcolor = event.color;

    var circleColor:Shape = new Shape();

        circleColor.graphics.lineStyle(2, pickedcolor, 1);
        circleColor.graphics.drawCircle(100, 100, 50);
       add Child(circleColor);


    Flash CS3 Tutorial For the Advanced ColorPicker
    Write the ActionScript code. (code bare image by Christophe Baudot from Fotolia.com)
  5. 5

    Select "Control>Test Movie " from the main menu. Position your cursor over the ColorPicker icon and depress the mouse button. Select a colour from the ColorPicker. Observe that a circle is drawn that is the same colour chosen in the ColorPicker.

    Flash CS3 Tutorial For the Advanced ColorPicker
    Test your ColorPicker code. (test image by multimartinator from Fotolia.com)

Tips and warnings

  • If your ActionScript program is not operating as expected check the code for typing errors. Compare it against the code given in this lesson.
  • You don't need to select the ColorPicker from the components library. You can instantiate the ColorPicker with ActionScript code using the flash ColorPicker class.
  • The "addChild" method places the drawn object on the stage
  • The "drawCircle" method draws a circle, In this example the circle is centred at the point (100, 100) and has a radius of 50.
  • The "pickedcolor" variable in this example is assigned the unsigned integer type. This will ensure it is compatible with the number type that the ColorPicker event returns.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.