AS3 Filters Demo
This is a demo I created to experiment with all of the filters that are available in ActionScript 3. You can choose any filter in the listbox on the left hand side, and all of the properties for the filter you selected will appear to the right. You can then change of all of the values for these properties and watch the effect on the image above.
This is great for saving time when deciding which filter to use for an image. Instead of creating a gazillion different demos to try out all the different filters and settings, I combined everything into one so they can be previewed in one demo.
Some Notes About This Demo
This demo uses all nine filters, each of which can have up to a dozen properties to adjust. Before writing this demo I made a chart of all the different filters and properties they contain:
| Bevel | Blur | Color Matrix | Convolution | Displacement | Drop Shadow | Glow | Gradient Bevel | Gradient Glow | |
|---|---|---|---|---|---|---|---|---|---|
| angle | X | X | X | X | |||||
| blurX | X | X | X | X | X | X | |||
| blurY | X | X | X | X | X | X | |||
| distance | X | X | X | X | |||||
| highlightAlpha | X | ||||||||
| highlightColor | X | ||||||||
| knockout | X | X | X | X | X | ||||
| quality | X | X | X | X | X | ||||
| shadowAlpha | X | ||||||||
| shadowColor | X | ||||||||
| strength | X | X | X | X | X | ||||
| type | X | X | X | ||||||
| matrix | X | X | |||||||
| alpha | X | X | X | X | |||||
| bias | X | ||||||||
| clamp | X | ||||||||
| color | X | X | X | ||||||
| divisor | X | ||||||||
| matrixX | X | ||||||||
| matrixY | X | ||||||||
| preserveAlpha | X | ||||||||
| componentX | X | ||||||||
| componentY | X | ||||||||
| mapBitmap | X | ||||||||
| mapPoint | X | ||||||||
| mode | X | ||||||||
| scaleX | X | ||||||||
| scaleY | X | ||||||||
| hideObject | X | ||||||||
| inner | X | X | |||||||
| colors | X | X | |||||||
| alphas | X | X | |||||||
| ratios | X | X |
I quickly realized it would be far too tedious to create a seperate menu and event handler for every single filter / property in the list. To save time I placed all nine filters into one array, and created another array which contains the controls for all 33 methods that are used by these filters. When a filter is selected, the demo pulls the values of each method from the filter, places them into the appropriate control and displays them. Fortunately AS3 allows you to reference a method by string otherwise this approach would not be possible. To see how this is done, consider the following code:
var s : String = "blurX";
f[s] = 20; // is the same as f.blurX = 20;
Another tool that came in handy was the ability to check which class an object is:
function getClass(obj : Object) : Class {
return Class(getDefinitionByName(getQualifiedClassName(obj)));
}
Using the above code, I could loop through all of the controls (which were stored in one array) and add an event handler which sends each one to the same function. By checking which class the control was, I could find out where the value was stored and properly assign it to the filter. For example:
function changeFilter(e : Event) {
// e.target = control which was changed
// e.target.name = string holding the name of the method which was changed
switch (getClass(e.target)) {
// Sliders and Numeric steppers store their value in Slider.value
case Slider: case NumericStepper: filter[e.target.name] = e.target.value; break;
// ColorPickers store the colour in ColorPicker.selectedColor
case ColorPicker: filter[e.target.name] = e.target.selectedColor; break;
}
Since there were so many controls to display for each filter, I simply made a function that automatically lays out the controls for each filter to save more time, rather than manually position each control myself.
The most fascinating filter I found was the Displacement Map Filter. This can be used for cool 3D effects, water ripples and other creative effects.
The DataGrid Control
To input values for the matrices that are used in this demo, I used the DataGrid control. While useful, I found the DataGrid control to be awkward for reading and writing cells as if they were in an X/Y coordinate system. The easiest way to read a cell was to do the following:
var grid : DataGrid = e.target as DataGrid;
var field : String = e.dataField; // the name of the column that was changed
var row : int = int(e.rowIndex); // the index of the row that was changed
var value : int = grid.dataProvider.getItemAt(row)[Field]; // value of the cell that was changed
...
}
As you can see it takes a lot of code just to find out which cell was changed, and what the new value is. Unfortunately, there is no way to reference a column by an index number - at least that I could find.
This means that when you are writing data to the grid, it is impossible to create a loop that cycles through each column and adds a value. Instead, one must reference each column by it's actual name (i.e. DataGrid.addItem( { "0": 25, "1": 34, ... } ) ). Since the largest matrix in this demo is 4 cells wide this was not a big problem, however for larger matrices it might be better to use a series of TextFields or NumericSteppers to read and write data.
