Advertisement
  1. Code
  2. Effects
Code

Adjust the Color Properties of an Image Using ActionScript 3

by
Difficulty:BeginnerLength:MediumLanguages:

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.

image manipulation in Flash and AS3 with ColorMatrixFilter


Step 3: The Interface

image manipulation in Flash and AS3 with ColorMatrixFilter

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:

image manipulation in Flash and AS3 with ColorMatrixFilter

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.

image manipulation in Flash and AS3 with ColorMatrixFilter


Step 8: Class Structure

Create your basic class structure to begin writing your code.


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.


Step 10: Variables

These are the variables we'll use; read the comments in the code to learn more about them.


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.


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.


Step 13: Add Slider Listeners

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


Step 14: Brightness

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


Step 15: Contrast

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


Step 16: Hue

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

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.

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.


Step 19: Set Main Class

image manipulation in Flash and AS3 with ColorMatrixFilter

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.


Step 20: Test

You're ready to test -- press Cmd+Return to export your application and see it working!

image manipulation in Flash and AS3 with ColorMatrixFilter


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!


More Colorful Resources on Activetuts+

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.