# Adjust the Color Properties of an Image Using ActionScript 3

In this tutorial, we'll learn how to use AS3 to create an RIA that can modify the color properties of an image, such as Brightness, Contrast, Hue and Saturation. Read on!

## Final Result Preview

Let's take a look at the final result we will be working towards:

## Step 1: Brief Overview

We will use a native ActionScript Class that will get new values from a Slider Component and then apply them to the target image using the ColorMatrixFilter class.

## Step 2: Flash Document Settings

Launch Flash and create a new document. Set the stage size to 557x400px, and the frame rate to 24fps.

## Step 3: The Interface

The interface will be very simple; just an image in the stage that will be then modified by the Sliders Components in the Adjust Color Panel.

## Step 4: Demo Image

We'll need an image to test our application, choose it from your personal collection or download one for testing.

This is the image from the demo, obtained from Flickr, with a Creative Commons License.

## Step 5: Instance Names

Create a panel and four Sliders with instance names as seen in the following image:

You can add bars above the Sliders as shown to improve the appearance.

## Step 6: Slider Values

Let's set the Slider components' values.

These are obtained from the minimum and maximum valid values of the AdjustColor class, which we will use to adjust each property:

• brightSL: -100 to 100
• contSL: -100 to 100
• hueSL: -180 to 180
• satSL: -100 to 100

## Step 7: New ActionScript Class

Create a new ActionScript 3.0 Class (Cmd + N) and save it as Main.as in your class folder.

## Step 8: Class Structure

 1 >  2 package  3 {  4  import flash.display.Sprite;  5   6  public class Main extends Sprite  7  {  8  public function Main():void  9  {  10  // constructor code  11  }  12  }  13 } 

## Step 9: Required Classes

These are the classes we'll need to import for our class to work; the import directive makes externally defined classes and packages available to your code.

 1 2 import flash.display.Sprite;  3 import fl.motion.AdjustColor;  4 import flash.filters.ColorMatrixFilter;  5 import fl.events.SliderEvent; 

## Step 10: Variables

 1 2 private var color:AdjustColor = new AdjustColor(); //This object will hold the color properties  3 private var filter:ColorMatrixFilter; //Will store the modified color filter to change the image 

## Step 11: Constructor

The constructor is a function that runs when an object is created from a class; this code is the first to execute when you make an instance of an object, or in this case it is run when the SWF is loaded, as it is in the document class.

It will perform the neccesary actions to start the application.

 1 2 public final function Main():void  3 {  4  //Code  5 } 

## Step 12: Initial Matrix

The color matrix will be generated by the values stored in the AdjustColor properties; we need to set initial values to these properties in order to get a correct matrix. If we don't do this, an array with null values will be generated.

 1 2 /* Required to create initial Matrix */  3 4 color.brightness = 0;  5 color.contrast = 0;  6 color.hue = 0;  7 color.saturation = 0;  8 9 /* This function will add the necessary event listeners */  10 11 addListeners(); 

## Step 13: Add Slider Listeners

This function adds listeners to the Slider components in order to call certain functions whenever their values change.

 1 2 private final function addListeners():void  3 {  4  colorPanel.brightSL.addEventListener(SliderEvent.CHANGE, adjustBrightness);  5  colorPanel.contSL.addEventListener(SliderEvent.CHANGE, adjustContrast);  6  colorPanel.hueSL.addEventListener(SliderEvent.CHANGE, adjustHue);  7  colorPanel.satSL.addEventListener(SliderEvent.CHANGE, adjustSaturation);  8 } 

## Step 14: Brightness

This function modifies the Brightness value, getting its data from the brightSL slider component.

 1 2 private final function adjustBrightness(e:SliderEvent):void  3 {  4  color.brightness = e.target.value;  5  update();  6 } 

## Step 15: Contrast

This function modifies the Contrast value, getting its data from the contSL slider component.

 1 2 private final function adjustContrast(e:SliderEvent):void  3 {  4  color.contrast = e.target.value;  5  update();  6 } 

## Step 16: Hue

This function modifies the Hue value, getting its data from the hueSL slider component.

 1 2 private final function adjustHue(e:SliderEvent):void  3 {  4  color.hue = e.target.value;  5  update();  6 } 

When you modify the hue of a color, you move it around the color wheel by the specified number of degrees.

## Step 17: Saturation

This function modifies the Saturation value, getting its data from the satSL slider component.

 1 2 private final function adjustSaturation(e:SliderEvent):void  3 {  4  color.saturation = e.target.value;  5  update();  6 } 

When you modify the saturation of a color, you move it towards or away from the center of the color wheel.

## Step 18: Update Function

This function is called in every slider change. It renews the ColorMatrixFilter value and applies it to the image in stage.

 1 2 private final function update():void  3 {  4  filter = new ColorMatrixFilter(color.CalculateFinalFlatArray());  5  image.filters = [filter];  6 } 

## Step 19: Set Main Class

We'll make use of the Document Class in this tutorial, if you don't know how to use it or are a bit confused please read this QuickTip.

## Conclusion

You've learned an excellent technique of image manipulation, experiment with it!

Thanks for reading this tutorial, I hope you've found it useful!