/**
* Copyright tkinjo ( http://wonderfl.net/user/tkinjo )
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/tmEc
*/
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="465" height="465" paddingLeft="0" paddingTop="0" paddingRight="0" paddingBottom="0"
applicationComplete="applicationCompleteHandler( event )">
<mx:Script>
<![CDATA[
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.filters.ColorMatrixFilter;
import flash.geom.ColorTransform;
import flash.geom.Point;
import flash.net.FileFilter;
import flash.net.FileReference;
import mx.controls.ColorPicker;
import mx.controls.HSlider;
import mx.events.EffectEvent;
import mx.events.FlexEvent;
/**
* ColorMatrixFilter を知る
*
* どうやら ColorMatrixFilter は ColorTransform よりも優先順位が高いらしい。
*/
/**
* 生成したノイズを含む画像です。
*/
private var perlinNoiseBitmap:Bitmap;
/**
* 初期設定をします。
*
* @param event
*/
private function applicationCompleteHandler( event:Event ):void {
resetPerlinNoiseProperty();
resetColorMatrixFilterProperty();
}
/** --------------------------------------------------
* perlinNoise
*/
private function setPerlinNoiseProperty():void {
if( perlinNoiseBitmap )
imageContentHolder.removeChild( perlinNoiseBitmap );
var perlinNoiseBitmapData:BitmapData = new BitmapData( 400, 400 );
var offsets:Array = new Array();
for ( var i:Number = 0; i < numOctavesNumericStepper.value; i++ )
offsets.push( new Point( offsetXNumericStepper.value, offsetYNumericStepper.value ) );
perlinNoiseBitmapData.perlinNoise(
baseXNumericStepper.value,
baseYNumericStepper.value,
uint( numOctavesNumericStepper.value ),
int( randomSeedNumericStepper.value ),
stitchCheckBox.selected,
fractalNoiseCheckBox.selected,
( Number( redChannelOptionCheckBox.selected ) ) +
( Number( greenChannelOptionCheckBox.selected ) << 1 ) +
(Number( blueChannelOptionCheckBox.selected ) << 2 ),
grayScaleCheckBox.selected,
offsets
);
perlinNoiseBitmap = new Bitmap( perlinNoiseBitmapData );
imageContentHolder.x = ( stage.stageWidth - perlinNoiseBitmap.width ) / 2;
imageContentHolder.y = ( stage.stageHeight - perlinNoiseBitmap.height ) / 2;
imageContentHolder.addChild( perlinNoiseBitmap );
}
/**
*
* @param event
*/
private function perlinNoisePropertyChangeHandler( event:Event ):void {
setPerlinNoiseProperty();
}
/**
* perlinNoiseProperty のリセットボタンが押されたときに各値を初期値に戻します。
*
* @param event
*/
private function perlinNoisePropertyResetButtonDownHandler( event:FlexEvent ):void {
resetPerlinNoiseProperty();
}
/**
*
*/
private function resetPerlinNoiseProperty():void {
baseXNumericStepper.value = 40;
baseYNumericStepper.value = 40;
numOctavesNumericStepper.value = 1;
randomSeedNumericStepper.value = 0;
stitchCheckBox.selected = false;
fractalNoiseCheckBox.selected = false;
redChannelOptionCheckBox.selected = true;
greenChannelOptionCheckBox.selected = true;
blueChannelOptionCheckBox.selected = true;
grayScaleCheckBox.selected = false;
offsetXNumericStepper.value = 0;
offsetYNumericStepper.value = 0;
setPerlinNoiseProperty();
}
/** --------------------------------------------------
* colorTransform
*/
/**
* colorTransform の設定値を変更する各 Slider の値を変更するとその値を color
*
* @param event
*/
private function colorTransformSliderChangeHandler( event:Event ):void {
setColorTransform();
}
/**
* colorTransformProperty のリセットボタンが押されたときに各値を初期値に戻します。
*
* @param event
*/
private function colorTransformPropertyResetButtonDownHandler( event:FlexEvent ):void {
redMultiplierHSlider.value = 1;
greenMultiplierHSlider.value = 1;
blueMultiplierHSlider.value = 1;
alphaMultiplierHSlider.value = 1;
redOffsetHSlider.value = 0;
greenOffsetHSlider.value = 0;
blueOffsetHSlider.value = 0;
alphaOffsetHSlider.value = 0;
setColorTransform();
}
/**
* loadedBitmap の colorTransform にコンポーネントの値を適用した ColorTransform を適用します。
*/
private function setColorTransform():void {
imageContentHolder.transform.colorTransform = new ColorTransform(
redMultiplierHSlider.value,
greenMultiplierHSlider.value,
blueMultiplierHSlider.value,
alphaMultiplierHSlider.value,
redOffsetHSlider.value,
greenOffsetHSlider.value,
blueOffsetHSlider.value,
alphaOffsetHSlider.value
);
}
/** --------------------------------------------------
* ColorMatrixFilter
*/
private function setColorMatrixFilterProperty():void {
imageContentHolder.filters = [ new ColorMatrixFilter( [
srcR1NumericStepper.value, srcG1NumericStepper.value, srcB1NumericStepper.value, srcA1NumericStepper.value, a1NumericStepper.value,
srcR2NumericStepper.value, srcG2NumericStepper.value, srcB2NumericStepper.value, srcA2NumericStepper.value, a2NumericStepper.value,
srcR3NumericStepper.value, srcG3NumericStepper.value, srcB3NumericStepper.value, srcA3NumericStepper.value, a3NumericStepper.value,
srcR4NumericStepper.value, srcG4NumericStepper.value, srcB4NumericStepper.value, srcA4NumericStepper.value, a4NumericStepper.value
] ) ];
}
/**
*
* @param event
*/
private function colorMatrixFilterPropertyChangeHandler( event:Event ):void {
setColorMatrixFilterProperty();
}
/**
* perlinNoiseProperty のリセットボタンが押されたときに各値を初期値に戻します。
*
* @param event
*/
private function colorMatrixFilterPropertyResetButtonDownHandler( event:FlexEvent ):void {
resetColorMatrixFilterProperty();
}
/**
*
*/
private function resetColorMatrixFilterProperty():void {
srcR1NumericStepper.value = 1; srcG1NumericStepper.value = 0; srcB1NumericStepper.value = 0; srcA1NumericStepper.value = 0; a1NumericStepper.value = 0;
srcR2NumericStepper.value = 0; srcG2NumericStepper.value = 1; srcB2NumericStepper.value = 0; srcA2NumericStepper.value = 0; a2NumericStepper.value = 0;
srcR3NumericStepper.value = 0; srcG3NumericStepper.value = 0; srcB3NumericStepper.value = 1; srcA3NumericStepper.value = 0; a3NumericStepper.value = 0;
srcR4NumericStepper.value = 0; srcG4NumericStepper.value = 0; srcB4NumericStepper.value = 0; srcA4NumericStepper.value = 1; a4NumericStepper.value = 0;
setColorMatrixFilterProperty();
}
/** --------------------------------------------------
* Other
*/
/**
* プロパティボックスが表示されているかのフラグです。
*/
private var propertyViewStackVisible:Boolean = true;
/**
* プロパティボックスを隠すボタンが押されたときに呼ばれます。
*
* @param event
*/
private function propertyViewStackVisibleButtonDownHandler( event:FlexEvent ):void {
propertyViewStackMove.end();
if ( propertyViewStackVisible ) {
propertyViewStackMove.xTo = -propertyViewStack.width;
propertyViewStackVisibleButton.label = "プロパティボックスを表示";
} else {
propertyViewStackMove.xTo = 0;
propertyViewStackVisibleButton.label = "プロパティボックスを隠す";
}
propertyViewStackMove.play();
propertyViewStackVisible = !propertyViewStackVisible;
}
/**
*
* @param event
*/
private function canvasBackgroundColorPickerChangeHandler( event:Event ):void {
canvas.setStyle( "backgroundColor", canvasBackgroundColorPicker.selectedColor );
}
]]>
</mx:Script>
<mx:Move id="propertyViewStackMove" target="{ propertyViewStack }" />
<mx:Canvas id="canvas" width="100%" height="100%" backgroundColor="0xffffff">
<mx:UIComponent id="imageContentHolder" />
<mx:ViewStack id="propertyViewStack" height="80%" width="80%" alpha="0.9" backgroundColor="0xffffff" paddingLeft="10" paddingBottom="10" paddingTop="40" paddingRight="10" creationPolicy="all">
<mx:Box id="perlinNoiseProperty" horizontalAlign="center" alpha="1.1">
<mx:Box height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:Button id="perlinNoisePropertyResetButton" label="パーリンノイズプロパティの値をリセット" buttonDown="perlinNoisePropertyResetButtonDownHandler( event )" />
<mx:Spacer height="5" />
<mx:HBox>
<mx:VBox>
<mx:HBox>
<mx:Label width="100" text="baseX" />
<mx:NumericStepper id="baseXNumericStepper" width="60" minimum="-65025" maximum="65025" stepSize="1" change="perlinNoisePropertyChangeHandler( event )" />
</mx:HBox>
<mx:HBox>
<mx:Label width="100" text="baseY" />
<mx:NumericStepper id="baseYNumericStepper" width="60" minimum="-65025" maximum="65025" stepSize="1" change="perlinNoisePropertyChangeHandler( event )" />
</mx:HBox>
<mx:HBox>
<mx:Label width="100" text="numOctaves" />
<mx:NumericStepper id="numOctavesNumericStepper" width="60" minimum="0" maximum="65025" stepSize="1" change="perlinNoisePropertyChangeHandler( event )" />
</mx:HBox>
<mx:HBox>
<mx:Label width="100" text="randomSeed" />
<mx:NumericStepper id="randomSeedNumericStepper" width="60" minimum="-65025" maximum="65025" stepSize="1" change="perlinNoisePropertyChangeHandler( event )" />
</mx:HBox>
</mx:VBox>
<mx:VBox>
<mx:CheckBox id="stitchCheckBox" label="stitch" change="perlinNoisePropertyChangeHandler( event )" />
<mx:CheckBox id="fractalNoiseCheckBox" label="fractalNoise" change="perlinNoisePropertyChangeHandler( event )" />
<mx:CheckBox id="redChannelOptionCheckBox" label="redChannelOption" change="perlinNoisePropertyChangeHandler( event )" />
<mx:CheckBox id="greenChannelOptionCheckBox" label="greenChannelOption" change="perlinNoisePropertyChangeHandler( event )" />
<mx:CheckBox id="blueChannelOptionCheckBox" label="blueChannelOption" change="perlinNoisePropertyChangeHandler( event )" />
<mx:CheckBox id="grayScaleCheckBox" label="grayScale" change="perlinNoisePropertyChangeHandler( event )" />
<mx:HBox>
<mx:Label width="100" text="offsetX" />
<mx:NumericStepper id="offsetXNumericStepper" width="60" minimum="-65025" maximum="65025" stepSize="1" change="perlinNoisePropertyChangeHandler( event )" />
</mx:HBox>
<mx:HBox>
<mx:Label width="100" text="offsetY" />
<mx:NumericStepper id="offsetYNumericStepper" width="60" minimum="-65025" maximum="65025" stepSize="1" change="perlinNoisePropertyChangeHandler( event )" />
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Box>
<mx:Button label="カラートランスフォームプロパティを表示" buttonDown="propertyViewStack.selectedChild = colorTransformProperty" />
<mx:Button label="カラーマトリックスフィルタープロパティを表示" buttonDown="propertyViewStack.selectedChild = colorMatrixFilterProperty" />
</mx:Box>
<mx:Box id="colorTransformProperty" horizontalAlign="center" alpha="1.1">
<mx:Box height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:Button id="colorTransformPropertyResetButton" label="カラートランスフォームプロパティの値をリセット" buttonDown="colorTransformPropertyResetButtonDownHandler( event )" />
<mx:Spacer height="5" />
<mx:HBox>
<mx:VBox>
<mx:HSlider id="redMultiplierHSlider" minimum="-1" maximum="1" value="1" labels="[ '-1','redMultiplier', '1' ]" labelOffset="5" change="colorTransformSliderChangeHandler( event )" />
<mx:HSlider id="greenMultiplierHSlider" minimum="-1" maximum="1" value="1" labels="[ '-1','greenMultiplier', '1' ]" labelOffset="5" change="colorTransformSliderChangeHandler( event )" />
<mx:HSlider id="blueMultiplierHSlider" minimum="-1" maximum="1" value="1" labels="[ '-1','blueMultiplier', '1' ]" labelOffset="5" change="colorTransformSliderChangeHandler( event )" />
<mx:HSlider id="alphaMultiplierHSlider" minimum="-1" maximum="1" value="1" labels="[ '-1','alphaMultiplier', '1' ]" labelOffset="5" change="colorTransformSliderChangeHandler( event )" />
</mx:VBox>
<mx:VBox>
<mx:HSlider id="redOffsetHSlider" minimum="-255" maximum="255" value="0" labels="[ '-255','redOffset', '255' ]" labelOffset="5" change="colorTransformSliderChangeHandler( event )" />
<mx:HSlider id="greenOffsetHSlider" minimum="-255" maximum="255" value="0" labels="[ '-255','greenOffset', '255' ]" labelOffset="5" change="colorTransformSliderChangeHandler( event )" />
<mx:HSlider id="blueOffsetHSlider" minimum="-255" maximum="255" value="0" labels="[ '-255','blueOffset', '255' ]" labelOffset="5" change="colorTransformSliderChangeHandler( event )" />
<mx:HSlider id="alphaOffsetHSlider" minimum="-255" maximum="255" value="0" labels="[ '-255','alphaOffset', '255' ]" labelOffset="5" change="colorTransformSliderChangeHandler( event )" />
</mx:VBox>
</mx:HBox>
</mx:Box>
<mx:Button label="パーリンノイズプロパティを表示" buttonDown="propertyViewStack.selectedChild = perlinNoiseProperty" />
<mx:Button label="カラーマトリックスフィルタープロパティを表示" buttonDown="propertyViewStack.selectedChild = colorMatrixFilterProperty" />
</mx:Box>
<mx:Box id="colorMatrixFilterProperty" horizontalAlign="center" alpha="1.1">
<mx:Box height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:Button id="colorMatrixFilterPropertyResetButton" label="カラーマトリックスフィルタープロパティの値をリセット" buttonDown="colorMatrixFilterPropertyResetButtonDownHandler( event )" />
<mx:Spacer height="5" />
<mx:HBox>
<mx:VBox>
<mx:Label width="20" height="22" text="" />
<mx:Label width="20" height="23" text="R" />
<mx:Label width="20" height="23" text="G" />
<mx:Label width="20" height="23" text="B" />
<mx:Label width="20" height="23" text="A" />
</mx:VBox>
<mx:VBox>
<mx:Label text="srcR" />
<mx:NumericStepper id="srcR1NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcR2NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcR3NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcR4NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
</mx:VBox>
<mx:VBox>
<mx:Label text="srcG" />
<mx:NumericStepper id="srcG1NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcG2NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcG3NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcG4NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
</mx:VBox>
<mx:VBox>
<mx:Label text="srcB" />
<mx:NumericStepper id="srcB1NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcB2NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcB3NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcB4NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
</mx:VBox>
<mx:VBox>
<mx:Label text="srcA" />
<mx:NumericStepper id="srcA1NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcA2NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcA3NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="srcA4NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
</mx:VBox>
<mx:VBox>
<mx:Label text="a" />
<mx:NumericStepper id="a1NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="a2NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="a3NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
<mx:NumericStepper id="a4NumericStepper" width="50" minimum="-255" maximum="255" stepSize="0.1" change="colorMatrixFilterPropertyChangeHandler( event )" />
</mx:VBox>
</mx:HBox>
</mx:Box>
<mx:Button label="パーリンノイズプロパティを表示" buttonDown="propertyViewStack.selectedChild = perlinNoiseProperty" />
<mx:Button label="カラートランスフォームプロパティを表示" buttonDown="propertyViewStack.selectedChild = colorTransformProperty" />
</mx:Box>
</mx:ViewStack>
<mx:Box width="100%" alpha="0.9" backgroundColor="0xffffff" paddingLeft="2" paddingTop="2" paddingBottom="2">
<mx:HBox alpha="1.1">
<mx:Button id="propertyViewStackVisibleButton" label="プロパティボックスを隠す" buttonDown="propertyViewStackVisibleButtonDownHandler( event )" />
<mx:ColorPicker id="canvasBackgroundColorPicker" selectedColor="0xffffff" change="canvasBackgroundColorPickerChangeHandler( event )" />
</mx:HBox>
</mx:Box>
</mx:Canvas>
</mx:Application>
