Create a Brightness Editor in ActionScript 3

Brightness is an attribute of visual perception in which a source appears to be radiating or reflecting light.

In this tutorial we will learn how to modify the brightness of a Display Object using ActionScript 3.

Final Result Preview

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

Step 1: Brief Overview

Using the ColorTransform class and a Slider component we will increase or decrease a DisplayObject's brightness.

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 500x350px and set the frame rate to 24fps.

Step 3: Choose a Display Object

Any DisplayObject can be used with this class; for this example I picked an image from Flickr:

Photo by Chi King.

Place your image in the center of the stage, convert it to MovieClip and give it an instance name of image.

Step 4: Brightness Panel

We'll create a panel with a Slider component and a Dynamic Textfield as interactive objects.

Select the Rectangle Primitive Tool (R) and draw a 250x70px rectangle, set the corner radius to 7 and change its alpha to 60.

Convert it to MovieClip and add the following filter:

The panel should look like this:

Double-click the MovieClip to enter edit mode and create a Dynamic Textfield; set its instance name to bValue (for "brightness value") and center it. Give it an initial entry of 0. You can also add a title to the panel and some icons as a guide.

Step 5: Slider Component

Open the Components panel (Cmd/Ctrl + F7) and drag a Slider component to your Brightness panel; center it and name it slider.

Step 6: Component Inspector

With the slider component selected, press Shift+F7 to open the Component Inspector panel and edit the options as shown in the image:

Step 7: ActionScript

Create a new ActionScript Document and save it as Main.as.

We're going to use a document class for this project. If you're not sure how to use a document class, read this quick introduction.

Step 8: Package

1
2	package
3	{

The package keyword allows you to organize your code into groups that can be imported by other scripts, it is recommended to name them starting with a lowercase letter and use intercaps for subsequent words for example: myClasses.

If you don't want to group your files in a package or you have only one class you can use it right from your source folder.

Step 9: Required Classes

A few classes are needed for this to work. For a more detailed description about every class, please refer to the Flash Help (F1).

1
2	import flash.display.Sprite;
3	import fl.events.SliderEvent;
4	import flash.geom.ColorTransform;

Step 10: Extending the Class

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

1
2	public class Main extends Sprite
3	{

Step 11: Variables

Only one variable is needed in this example: a ColorTransform instance. This will be used to change the RGB values of the target display object.

1
2	var colorTransform:ColorTransform = new ColorTransform();

Step 12: Constructor Function

This function is executed when the class is loaded.

A SliderEvent listener is added to the Slider Component to run a function when the user changes the value of the Slider.


public function Main():void
{
	panel.slider.addEventListener(SliderEvent.CHANGE, updateBrightness);
}

Step 13: Color Transform

This function is executed when the slider value changes. This is the ColorTransform part. The red, green, and blue offsets of the color transform matrix are set to match the value of the slider.


private function updateBrightness(e:SliderEvent):void
{
   /* Set the RGB offsets to the slider value */

	colorTransform.redOffset = e.value;
	colorTransform.greenOffset = e.value;
	colorTransform.blueOffset = e.value;

Want to know what we're doing here? Check out this article explaining color transformations.

Step 14: Apply Changes

This line applies the changes to the image on the stage.

1
2	image.transform.colorTransform = colorTransform;

Step 15: Text Value

The text in the brightness panel is also updated.


	panel.bValue.text = e.value;
}
}
}

Step 16: Document Class

Go back to the .fla file and in the Properties Panel set the Class field to Main to link it to the Document Class.

Conclusion

Now you can easily implement a way to modify the brightness of an image or other Display Object using ActionScript 3.

Thank you for reading!