Adjust the Color Properties of an Image Using ActionScript 3

Network Advertise Here Tutorials\Effects Adjust the Color Properties of an Image Using ActionScript 3 Carlos Yanez on May 24th 2011 with 5 comments Tutorial Details Difficulty: BeginnerPlatform: Flash (Flash Player 9)Software: Flash Professional CS5 (CS3+ compatible)Estimated Completion Time: 1 hour Tweet Download Source Files

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.

Flower by Antonio ManchadoStep 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 100contSL: -100 to 100hueSL: -180 to 180satSL: -100 to 100Step 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

Create your basic class structure to begin writing your code.

>package{import flash.display.Sprite;public class Main extends Sprite{public function Main():void{// constructor 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.

import flash.display.Sprite;import fl.motion.AdjustColor;import flash.filters.ColorMatrixFilter;import fl.events.SliderEvent;Step 10: Variables

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

private var color:AdjustColor = new AdjustColor(); //This object will hold the color propertiesprivate var filter:ColorMatrixFilter; //Will store the modified color filter to change the imageStep 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.

public final function Main():void{//Code}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.

/* Required to create initial Matrix */color.brightness = 0;color.contrast = 0;color.hue = 0;color.saturation = 0;/* This function will add the necessary event listeners */addListeners();Step 13: Add Slider Listeners

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

private final function addListeners():void{colorPanel.brightSL.addEventListener(SliderEvent.CHANGE, adjustBrightness);colorPanel.contSL.addEventListener(SliderEvent.CHANGE, adjustContrast);colorPanel.hueSL.addEventListener(SliderEvent.CHANGE, adjustHue);colorPanel.satSL.addEventListener(SliderEvent.CHANGE, adjustSaturation);}Step 14: Brightness

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

private final function adjustBrightness(e:SliderEvent):void{color.brightness = e.target.value;update();}Step 15: Contrast

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

private final function adjustContrast(e:SliderEvent):void{color.contrast = e.target.value;update();}Step 16: Hue

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

private final function adjustHue(e:SliderEvent):void{color.hue = e.target.value;update();}

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.

private final function adjustSaturation(e:SliderEvent):void{color.saturation = e.target.value;update();}

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.

private final function update():void{filter = new ColorMatrixFilter(color.CalculateFinalFlatArray());image.filters = [filter];}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.

Step 20: Test

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

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+Manipulate Visual Effects With the ColorMatrixFilter and ConvolutionFilterComparing Filters in Flash Create a Brightness Editor in ActionScript 3Quick Tip: Whipping up Real Time Motion Trails Harness the Power of Palette Mapping to Customize Game Characters – Active Premium

Carlos Yanez is Carlos_Yanez on Tutsmarketplace Tags: brightnesscolorcolormatrixfiltercontrasthueimage manipulationsaturation   Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

Tweet By Carlos Yanez Rollover to read this author's bio or click through to see a full list of posts by this author.

Carlos is a Web/Logo Designer, Flash Developer with passion for great designs and cool applications.  
Plus Premium Hello!

You can grab source files and bonus tutorials from the members area.

Premium Members

Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now

    Related Posts Shoot Out Stars with the Stardust Particle Engine 25 Comments Create an iPhone-like Flip Effect in Flash Using ActionScript 3.0 94 Comments Create a Glowing Mouse Trailer in Flash 67 Comments Create Custom Filters Using the Pixel Bender Toolkit 26 Comments Make Your Flash Logo Bling with Alpha Gradient Masking 71 Comments Creating Ripples in the Medici Fountain 25 Comments Add CommentDiscussion 5 Comments Greg W says:May 24, 2011 at 5:44 am

Any chance you could be nice and save the Demo Files as CS5? Right now, they REQUIRE you to have CS5.5.

ReplyMichael James Williams says:May 30, 2011 at 11:43 pmStaff

Done :)

ReplyPeter Bergen says:May 30, 2011 at 11:36 pm

Nice introductory tut. For people who don’t know how to use the slider component, it would be nice to have a link to the component tut series here at activetuts (http://active.tutsplus.com/tutorials/tools-tips/quick-introduction-flash-numericstepper-slider-and-progressbar-components/).

Be aware that the AdjustColor class shows some unexpected behavior. Try to build a reset button:

1. Create the needed sprite (instance btReset)
2. Add to Main.as at the appropriate places something like that:

btReset.addEventListener(MouseEvent.MOUSE_DOWN,downReset);
private final function downReset(e:MouseEvent){
resetPict();
}
private final function resetPict(){
brightSL.value = 0;
color.brightness = brightSL.value;
//the same for the other props as well
update();
}

3. Test it:
a. change the saturation and contrast. Then click the reset button and feel happy.
b. change the brightness and / or hue and click again the reset button. Your happiness will melt away.

Inside the AdjustColor class, the setter for brightness and hue do ignore values of 0. If you don’t want to look into that class directly, test it out inside the update function by tracing the resulting 4 x 5 matrix with:

trace(color.CalculateFinalFlatArray());

The 5th, 10th and 15th value represent the brightness setting. They won’t ever change to 0 (with the honorable exception of starting the app). It is not possible to directly access the brightness (or hue) property since that is write-only.

If you don’t want to touch (or break) the AdjustColor class, use a very small number like 0.001 for brightness and hue to reset the values.

ReplyMichael James Williams says:May 30, 2011 at 11:44 pmStaff

Awesome, thanks for the tip, Peter!

ReplyPeter Bergen says:May 31, 2011 at 2:06 am

Actually, I am not sure if we can intentionally break the default classes (am a very brave developer so I didn’t try it; use your friends’ computer to test it out). There are a lot of swc files lurking around, i.e., common/configuration/ActionScript 3.0/libs/flash.swc. An swc is just a zip that can be opened by whatever unzip programm you use (7zip goes fine). Maybe Flash does load precompiled classes out of swc files?

Add a Comment Name

Email Address

URL

Your Comments

To add a code snippet to your comment, please wrap your code like so:

YOUR CODE

. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: < and > respectively.

Click here to cancel reply.

RSS Updates Email Updates Twitter Facebook RSS Subscribers 8,450 Twitter Followers 8,300 Facebook Fans 4,140 Advertise Here Learn More...

Already a member? Sign In

Plus Icon Hello!

Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription

Members Area Logout Facebook Graph API Development with Flash

Follow Activetuts+ tech editor Michael James Williams as he walks you through integrating Flash with Facebook! Learn to develop apps for the Facebook website and harness the Graph API in your external projects.

Find Out More FacebookTwitter Follow Activetuts+ and Tuts+ on Twitter ? Create an Apple Inspired Flash Preloader http://enva.to/iYkBJSCheck out the great series of podcasts by @riaradio (now nerd radio) they did live at flash and the city http://ht.ly/5oR6DOur latest Fan Bonus tutorial is up on Facebook: http://j.mp/l6aBWP This one's about math tricks! ^MJW? Create a Complete Typing Game in Flash with AS3 http://enva.to/mGahuR Join our newsletter!

Get weekly updates and an exclusive un-released tutorial when you sign up to our free newsletter.

Name Email Top Selling on ActivedenNightstar Premium Facebook F ... only $20.00 by damojo3d Moving Clouds Animation only $3.00 by barisintepeNew Tutorials on Tuts+ MarketplaceCreate a "Rapid Roll" Game i ... only $1.00 by ActivePremiumCreate a Customizable Flash ... only $1.00 by ActivePremium

Sagres Preta Chocolate - More

Freelance Jobs More Freelance Jobs... Basix Active Basix

Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials

Create a Tutorial, Get Paid!

Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More

Activetuts+ Part of the Plus education network

Powered by: Envato RSS Updates Email Updates Twitter Facebook Copyright © 2011 Envato Advertise Suggestions About Us Icons by WeFunction