BlendModeの確認サンプル

勉強途中です。確認用にこんなものを作ってみた。でもソースも見ないとうまく伝わらないな。
見せ方を考えないとだめだ。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import flash.display.*;
import flash.events.*;
import flash.filters.*;
import mx.core.*;
import mx.controls.*;
import mx.events.*;
import mx.containers.*;

[Bindable]
private var modes:Array = [
	{label:'NORMAL', data: BlendMode.NORMAL},
	{label:'ADD', data: BlendMode.ADD},
	{label:'ALPHA', data: BlendMode.ALPHA},
	{label:'DARKEN', data: BlendMode.DARKEN},
	{label:'DIFFERENCE', data: BlendMode.DIFFERENCE},
	{label:'ERASE', data: BlendMode.ERASE},
	{label:'HARDLIGHT', data: BlendMode.HARDLIGHT},
	{label:'INVERT', data: BlendMode.INVERT},
	{label:'LAYER', data: BlendMode.LAYER},
	{label:'LIGHTEN', data: BlendMode.LIGHTEN},
	{label:'MULTIPLY', data: BlendMode.MULTIPLY},
	{label:'OVERLAY', data: BlendMode.OVERLAY},
	{label:'SCREEN', data: BlendMode.SCREEN},
	{label:'SUBTRACT', data: BlendMode.SUBTRACT}
];

private var startX:Number;
private var startY:Number;
private var startElX:Number;
private var startElY:Number;
private var target:UIComponent;
private function initRect(a:Number = 1):void {
	var g:Graphics = rect.graphics;
	g.clear();
	g.beginFill(0xff0000, a);
	g.drawRect(0, 0, 100, 100);
	g.endFill();
}
private function initCircle(a:Number = 1):void {
	var g:Graphics = circle.graphics;
	g.clear();
	g.beginFill(0x00ffff, a);
	g.drawCircle(50, 50, 50);
	g.endFill();
}

private function onMouseDown(event:MouseEvent):void {
	event.stopPropagation();
	target = UIComponent(event.target);
	startX = event.stageX;
	startY = event.stageY;
	startElX = target.x;
	startElY = target.y;
	canvas.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
	canvas.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}

private function onMouseMove(event:MouseEvent):void {
	var currentX:Number = event.stageX;
	var currentY:Number = event.stageY;
	var deltaX:Number = currentX - startX;
	var deltaY:Number = currentY - startY;
	target.x = startElX + deltaX;
	target.y = startElY + deltaY;
}

private function onMouseUp(event:MouseEvent):void {
	canvas.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
	canvas.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}
]]>
</mx:Script>
<mx:HBox>
	<mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off">
		<mx:Image source="@Embed(source='assets/palau.jpg')"/>
		<mx:Canvas backgroundColor="0" alpha="{canvasAlpha.value / 100}" width="100%" height="100%" id="canvas" horizontalScrollPolicy="off" verticalScrollPolicy="off">
			<mx:UIComponent id="rect" width="100" height="100" creationComplete="initRect();" mouseDown="onMouseDown(event);"/>
			<mx:UIComponent id="circle" width="100" height="100" creationComplete="initCircle();" mouseDown="onMouseDown(event);"/>
		</mx:Canvas>
	</mx:Canvas>
	<mx:VBox>
		<mx:Label text="キャンバスのBlendMode"/>
		<mx:ComboBox id="canvasBlendMode" dataProvider="{modes}" close="canvas.blendMode = ComboBox(event.target).selectedItem.data" rowCount="{modes.length}"/>
		<mx:Label text="キャンバスの透明度"/>
		<mx:HSlider id="canvasAlpha" value="50" minimum="0" maximum="100" liveDragging="true"/>
		<mx:CheckBox id="canvasBlurFilter" label="BlurFiter" change="canvas.filters = canvasBlurFilter.selected ? [new BlurFilter()] : [];"/>
		<mx:Label text="四角のBlendMode"/>
		<mx:ComboBox id="rectBlendMode" dataProvider="{modes}" close="rect.blendMode = ComboBox(event.target).selectedItem.data" rowCount="{modes.length}"/>
		<mx:CheckBox id="rectBlurFilter" label="BlurFiter" change="rect.filters = rectBlurFilter.selected ? [new BlurFilter()] : [];"/>
		<mx:Label text="四角の透明度"/>
		<mx:HSlider id="rectAlpha" value="100" minimum="0" maximum="100" liveDragging="true" change="initRect(event.value / 100)"/>
		<mx:Label text="円のBlendMode"/>
		<mx:ComboBox id="circleBlendMode" dataProvider="{modes}" close="circle.blendMode = ComboBox(event.target).selectedItem.data" rowCount="{modes.length}"/>
		<mx:CheckBox id="circleBlurFilter" label="BlurFiter" change="circle.filters = circleBlurFilter.selected ? [new BlurFilter()] : [];"/>
		<mx:Label text="円の透明度"/>
		<mx:HSlider id="circleAlpha" value="100" minimum="0" maximum="100" liveDragging="true" change="initCircle(event.value / 100)"/>
	</mx:VBox>
</mx:HBox>
</mx:Application>