Learning ActionScript 3.0

In Chapter 3 we cover some of the basic properties of display objects: x, y, width, height, scaleX, scaleY, rotation, alpha etc.... In this post we've expanded a bit on the demo included in our book. We've added the the blendMode property and the filters array property.

 

Advanced Properties Demo

Here it is in action:

  Download Advanced Properties (1.2 MB, 199 hits)

To best follow along with the description below, you should download the source and open both AdvancedProperties.fla and AdvancedProperties.as files.

To control the BlurFilter associated with the MovieClips filters property we first define our variable:

private var _blur:BlurFilter;

Then, within our document class constructor we instantiate it:

_blur = new BlurFilter(0, 0, 1);

We pass 0 in for the first two arguments (blurX and blurY), and we pass 1 in for the last argument (quality). We control the blurX and blurY with the use of our OpenSlider class:

_blurSlider = new OpenSlider(blurBtn, blurLines);
_blurSlider.setRange(0,20);
_blurSlider.value = 0;
_blurSlider.addEventListener(Event.CHANGE,onBlurChange, false, 0, true);

The OpenSlider class takes the instance names of two clips as its constructor arguments. We give the slider a range from 0 to 20 and start it off at a value of 0. We then listen for the CHANGE event and handle it with the onBlurChange method:

private function onBlurChange(evt:Event):void {
	_blur.blurX = _blur.blurY = _blurSlider.value;
	box.filters = [_blur];
}

We use the value property of our slider to set the blurX and blurY and update our filters array accordingly.

To change the blendMode we use the fl.controls.ComboBox component that ships with Flash CS3. All the values in the ComboBox are entered into its parameters dialogue, to allow us to focus on the properties syntax in this demo.

It's important to note that the data property of each ComboBox item needs to correspond to the BlendMode class string constants:

BlendMode.DARKEN
// becomes:
"darken"

The rest is simple. Also for simplicity, our combo box is placed on the stage so we don't need to define it as a variable in our document class. We simply give it an instance name of blendModes and add a listener to it in our constructor:

blendModes.addEventListener(Event.CHANGE, onBlendChange, false, 0, true);

Lastly, we define our onBlendChange method:

private function onBlendChange(evt:Event):void {
	box.blendMode = evt.target.selectedItem.data;
}

The onBlendChange method sets the box clip's blendMode property equal to the selectedItem.data property of the ComboBox.

 Print This Post

Related Content

• The Power of Relative Positioning