Flash CS3 Tutorial For the Advanced ColorPicker

An advanced ColorPicker component can put color 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 color 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.

Things You'll Need

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

Instructions

    • 1
      Start the Flash Program

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

    • 2
      Instantiate the Color Picker Component

      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.

    • 3
      Name the ColorPicker instance.

      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.

    • 4
      Write the ActionScript code.

      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 color 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);

      addChild(circleColor);

      };

    • 5
      Test your ColorPicker code.

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

Learnify Hub © www.0685.com All Rights Reserved