topical media & game development
actionscript-book-FilterWorkbench-flexapp-filterPanels-ColorMatrixPanel.mx
actionscript-book-FilterWorkbench-flexapp-filterPanels-ColorMatrixPanel.mx
[swf]
flex
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:appc="*"
implements="actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_IFilterPanel"
right="0"
top="0"
creationComplete="setupChildren();">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
//import com.example.programmingas3.filterWorkbench.IFilterFactory;
//import com.example.programmingas3.filterWorkbench.ColorMatrixFactory;
// ------- Private vars -------
private var _filterFactory:actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_ColorMatrixFactory;
// ------- Public properties -------
public function get filterFactory():actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_IFilterFactory
{
if (_filterFactory == null)
{
_filterFactory = new actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_ColorMatrixFactory();
}
return _filterFactory;
}
// ------- Public methods -------
public function resetForm():void
{
setMatrixForm([1, 0, 0, 0, 0,
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
0, 0, 0, 1, 0]);
brightnessValue.value = 0;
contrastValue.value = 0;
saturationValue.value = 0;
hueValue.value = 0;
if (_filterFactory != null)
{
_filterFactory.modifyFilterCustom();
}
}
// ------- Event handling -------
private function setupChildren():void
{
// add event listeners for child controls
brightnessValue.addEventListener(SliderEvent.CHANGE, changePreset);
contrastValue.addEventListener(SliderEvent.CHANGE, changePreset);
saturationValue.addEventListener(SliderEvent.CHANGE, changePreset);
hueValue.addEventListener(SliderEvent.CHANGE, changePreset);
m0.addEventListener(Event.CHANGE, changeFilterValue);
m1.addEventListener(Event.CHANGE, changeFilterValue);
m2.addEventListener(Event.CHANGE, changeFilterValue);
m3.addEventListener(Event.CHANGE, changeFilterValue);
m4.addEventListener(Event.CHANGE, changeFilterValue);
m5.addEventListener(Event.CHANGE, changeFilterValue);
m6.addEventListener(Event.CHANGE, changeFilterValue);
m7.addEventListener(Event.CHANGE, changeFilterValue);
m8.addEventListener(Event.CHANGE, changeFilterValue);
m9.addEventListener(Event.CHANGE, changeFilterValue);
m10.addEventListener(Event.CHANGE, changeFilterValue);
m11.addEventListener(Event.CHANGE, changeFilterValue);
m12.addEventListener(Event.CHANGE, changeFilterValue);
m13.addEventListener(Event.CHANGE, changeFilterValue);
m14.addEventListener(Event.CHANGE, changeFilterValue);
m15.addEventListener(Event.CHANGE, changeFilterValue);
m16.addEventListener(Event.CHANGE, changeFilterValue);
m17.addEventListener(Event.CHANGE, changeFilterValue);
m18.addEventListener(Event.CHANGE, changeFilterValue);
m19.addEventListener(Event.CHANGE, changeFilterValue);
resetButton.addEventListener(MouseEvent.CLICK, resetClick);
}
private function changePreset(event:Event):void
{
// update the filter
_filterFactory.modifyFilterBasic(brightnessValue.value, contrastValue.value, saturationValue.value, hueValue.value);
// populate the form values with the new matrix
setMatrixForm(_filterFactory.matrix);
}
private function changeFilterValue(event:Event):void
{
// verify that the values are valid
if (m0.text.length <= 0) { return; }
if (m1.text.length <= 0) { return; }
if (m2.text.length <= 0) { return; }
if (m3.text.length <= 0) { return; }
if (m4.text.length <= 0) { return; }
if (m5.text.length <= 0) { return; }
if (m6.text.length <= 0) { return; }
if (m7.text.length <= 0) { return; }
if (m8.text.length <= 0) { return; }
if (m9.text.length <= 0) { return; }
if (m10.text.length <= 0) { return; }
if (m11.text.length <= 0) { return; }
if (m12.text.length <= 0) { return; }
if (m13.text.length <= 0) { return; }
if (m14.text.length <= 0) { return; }
if (m15.text.length <= 0) { return; }
if (m16.text.length <= 0) { return; }
if (m17.text.length <= 0) { return; }
if (m18.text.length <= 0) { return; }
if (m19.text.length <= 0) { return; }
// reset the brightness/contrast/saturation/hue controls
brightnessValue.value = 0;
contrastValue.value = 0;
saturationValue.value = 0;
hueValue.value = 0;
// update the filter
var matrix:Array = [Number(m0.text), Number(m1.text), Number(m2.text), Number(m3.text), Number(m4.text),
Number(m5.text), Number(m6.text), Number(m7.text), Number(m8.text), Number(m9.text),
Number(m10.text), Number(m11.text), Number(m12.text), Number(m13.text), Number(m14.text),
Number(m15.text), Number(m16.text), Number(m17.text), Number(m18.text), Number(m19.text)];
_filterFactory.modifyFilterCustom(matrix);
}
// ------- Private methods -------
private function resetClick(event:MouseEvent):void
{
resetForm();
}
// ------- Utility methods -------
private function setMatrixForm(matrix:Array):void
{
m0.text = matrix[0].toString();
m1.text = matrix[1].toString();
m2.text = matrix[2].toString();
m3.text = matrix[3].toString();
m4.text = matrix[4].toString();
m5.text = matrix[5].toString();
m6.text = matrix[6].toString();
m7.text = matrix[7].toString();
m8.text = matrix[8].toString();
m9.text = matrix[9].toString();
m10.text = matrix[10].toString();
m11.text = matrix[11].toString();
m12.text = matrix[12].toString();
m13.text = matrix[13].toString();
m14.text = matrix[14].toString();
m15.text = matrix[15].toString();
m16.text = matrix[16].toString();
m17.text = matrix[17].toString();
m18.text = matrix[18].toString();
m19.text = matrix[19].toString();
}
]]>
</mx:Script>
<mx:HBox>
<mx:Canvas height="100%">
<mx:Button id="resetButton" label="Reset" width="60" verticalCenter="0"/>
</mx:Canvas>
<mx:Canvas height="100%">
<mx:Form verticalCenter="0">
<mx:FormItem label="Brightness:">
<mx:HSlider id="brightnessValue" minimum="-100" maximum="100" snapInterval="1" value="0" width="120" dataTipOffset="3" dataTipPrecision="0" liveDragging="true"/>
</mx:FormItem>
<mx:FormItem label="Contrast:">
<mx:HSlider id="contrastValue" minimum="-100" maximum="100" snapInterval="1" value="0" width="120" dataTipOffset="3" dataTipPrecision="0" liveDragging="true"/>
</mx:FormItem>
<mx:FormItem label="Saturation:">
<mx:HSlider id="saturationValue" minimum="-100" maximum="100" snapInterval="1" value="0" width="120" dataTipOffset="3" dataTipPrecision="0" liveDragging="true"/>
</mx:FormItem>
<mx:FormItem label="Hue:">
<mx:HSlider id="hueValue" minimum="-180" maximum="180" snapInterval="1" value="0" width="120" dataTipOffset="3" dataTipPrecision="0" liveDragging="true"/>
</mx:FormItem>
</mx:Form>
</mx:Canvas>
<mx:Canvas>
<mx:Label text="Source Multiplier" x="163" y="0" width="100" textAlign="center"/>
<mx:Label text="Output:" x="-3" y="87" width="75" textAlign="right"/>
<!-- Top (column) labels -->
<mx:Label text="Red" x="122" y="19" width="40" textAlign="center"/>
<mx:Label text="Green" x="169" y="19" width="40" textAlign="center"/>
<mx:Label text="Blue" x="216" y="19" width="40" textAlign="center"/>
<mx:Label text="Alpha" x="263" y="19" width="40" textAlign="center"/>
<mx:Label text="Offset" x="310" y="19" width="40" textAlign="center"/>
<!-- Left (row) labels -->
<mx:Label text="Red:" x="67" y="41" width="50" textAlign="right"/>
<mx:Label text="Green:" x="67" y="71" width="50" textAlign="right"/>
<mx:Label text="Blue:" x="67" y="101" width="50" textAlign="right"/>
<mx:Label text="Alpha:" x="67" y="131" width="50" textAlign="right"/>
<!-- Cells -->
<mx:TextInput id="m0" text="1" restrict="0-9\-\." x="122" y="41" width="40"/>
<mx:TextInput id="m1" text="0" restrict="0-9\-\." x="169" y="41" width="40"/>
<mx:TextInput id="m2" text="0" restrict="0-9\-\." x="216" y="41" width="40"/>
<mx:TextInput id="m3" text="0" restrict="0-9\-\." x="263" y="41" width="40"/>
<mx:TextInput id="m4" text="0" restrict="0-9\-\." x="310" y="41" width="40"/>
<mx:TextInput id="m5" text="0" restrict="0-9\-\." x="122" y="71" width="40"/>
<mx:TextInput id="m6" text="1" restrict="0-9\-\." x="169" y="71" width="40"/>
<mx:TextInput id="m7" text="0" restrict="0-9\-\." x="216" y="71" width="40"/>
<mx:TextInput id="m8" text="0" restrict="0-9\-\." x="263" y="71" width="40"/>
<mx:TextInput id="m9" text="0" restrict="0-9\-\." x="310" y="71" width="40"/>
<mx:TextInput id="m10" text="0" restrict="0-9\-\." x="122" y="101" width="40"/>
<mx:TextInput id="m11" text="0" restrict="0-9\-\." x="169" y="101" width="40"/>
<mx:TextInput id="m12" text="1" restrict="0-9\-\." x="216" y="101" width="40"/>
<mx:TextInput id="m13" text="0" restrict="0-9\-\." x="263" y="101" width="40"/>
<mx:TextInput id="m14" text="0" restrict="0-9\-\." x="310" y="101" width="40"/>
<mx:TextInput id="m15" text="0" restrict="0-9\-\." x="122" y="131" width="40"/>
<mx:TextInput id="m16" text="0" restrict="0-9\-\." x="169" y="131" width="40"/>
<mx:TextInput id="m17" text="0" restrict="0-9\-\." x="216" y="131" width="40"/>
<mx:TextInput id="m18" text="1" restrict="0-9\-\." x="263" y="131" width="40"/>
<mx:TextInput id="m19" text="0" restrict="0-9\-\." x="310" y="131" width="40"/>
</mx:Canvas>
</mx:HBox>
</mx:Canvas>
(C) Æliens
27/08/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.