Tweensy - filter

tweensy_8

TweensyでFilterのプロパティをアニメーションしてみる。Filterオブジェクトを作ってそのFilterオブジェクトのプロパティをTweensyでTweenするイメージ。で、updateパラメータにそのFilterを適用するインスタンスを指定する。

  • ActionScript
  • TestTweensy_8.as
  • Source
package  {
	import com.flashdynamix.motion.extras.ColorMatrix;
	import com.flashdynamix.motion.Tweensy;
	import fl.motion.easing.Linear;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.Shape;
	import flash.display.SpreadMethod;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.filters.BevelFilter;
	import flash.filters.BlurFilter;
	import flash.filters.ColorMatrixFilter;
	import flash.filters.ConvolutionFilter;
	import flash.filters.DisplacementMapFilter;
	import flash.filters.DisplacementMapFilterMode;
	import flash.filters.DropShadowFilter;
	import flash.filters.GlowFilter;
	import flash.filters.GradientBevelFilter;
	import flash.filters.GradientGlowFilter;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	[SWF(backgroundColor = 0x000000, width = 600, height = 400, frameRate = 30)]
	public class TestTweensy_8 extends Sprite {

		[Embed (source="fl_64.png")]
		private var SampleImage:Class;

		private var _bitmaps:Array;

		public function TestTweensy_8() {
			initInstances();
			initButton();
		}

		private function initInstances():void {
			_bitmaps = [];

			var texts:Array = [
				'BevelFilter', 'BlurFilter', 'ColorMatrixFilter',
				'ConvolutionFilter', 'DisplacementMapFilter', 'DropShadowFilter',
				'GlowFilter', 'GradientBevelFilter', 'GradientGlowFilter'
			];
			var textFormat:TextFormat = new TextFormat('_等幅', 10, 0xffffff);
			var i:int, bitmap:Bitmap, textField:TextField;
			for (i = 0; i < 9; i ++) {
				bitmap = new SampleImage();
				bitmap.x = 100 + 200 * Math.floor(i / 3);
				bitmap.y = 60 + (bitmap.height + 50) * (i % 3);
				addChild(bitmap);
				_bitmaps[i] = bitmap;

				textField = new TextField();
				textField.defaultTextFormat = textFormat;
				textField.autoSize = TextFieldAutoSize.RIGHT;
				textField.x = bitmap.x - textField.width;
				textField.y = bitmap.y;
				textField.text = texts[i];
				addChild(textField);
			}
		}

		private function initButton():void {
			var button:Button = new Button();

			button.label = 'Tweensy.to()';
			button.addEventListener(MouseEvent.CLICK, onButtonClick);

			addChild(button);
		}

		private function onButtonClick(e:MouseEvent):void {
			startTweensy();
		}

		private function startTweensy():void {
			startBevelFilter(_bitmaps[0]);
			startBlurFilter(_bitmaps[1]);
			startColorMatrixFilter(_bitmaps[2]);
			startConvolutionFilter(_bitmaps[3]);
			startDisplacementMapFilter(_bitmaps[4]);
			startDropShadowFilter(_bitmaps[5]);
			startGlowFilter(_bitmaps[6]);
			startGradientBevelFilter(_bitmaps[7]);
			startGradientGlowFilter(_bitmaps[8]);
		}

		private function startBevelFilter(bitmap:Bitmap):void {
			bitmap.filters = null;

			var bevelFilter:BevelFilter = new BevelFilter(5, 45, 0xbf1424, 1, 0x500710, 1, 10, 10);
			Tweensy.to(bevelFilter, { angle: 225 }, 3, Linear.easeNone, 1, bitmap);
		}

		private function startBlurFilter(bitmap:Bitmap):void{
			bitmap.filters = null;

			var blurFilter:BlurFilter = new BlurFilter(0, 0, 1);
			Tweensy.to(blurFilter, { blurX: 10, blurY: 10 }, 3, Linear.easeNone, 1, bitmap);
		}

		private function startColorMatrixFilter(bitmap:Bitmap):void{
			bitmap.filters = null;

			var colorMatrix:ColorMatrix = new ColorMatrix(0, 1);
			var colorMatrixFilter:ColorMatrixFilter = new ColorMatrixFilter(colorMatrix);
			Tweensy.to(colorMatrixFilter, new ColorMatrix(0, 0), 3, Linear.easeNone, 1, bitmap);
		}

		private function startConvolutionFilter(bitmap:Bitmap):void{
			bitmap.filters = null;

			var convolutionFilter:ConvolutionFilter = new ConvolutionFilter(3, 3, [1, 1, 1, 1, -8, 1, 1, 1, 1], 0.30);
			Tweensy.to(convolutionFilter, { divisor: 0.01 }, 3, Linear.easeNone, 1, bitmap);
		}

		private function startDisplacementMapFilter(bitmap:Bitmap):void{
			bitmap.filters = null;

			var shape:Shape = new Shape();
			var graphics:Graphics = shape.graphics;
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(32, 0, 0, 0, 0);
			graphics.beginGradientFill(GradientType.LINEAR, [0x000000, 0xff0000], [1, 1], [0, 255], matrix, SpreadMethod.REFLECT);
			graphics.drawRect(0, 0, 64, 64);
			graphics.endFill();
			var bitmapData:BitmapData = new BitmapData(64, 64);
			bitmapData.draw(shape);

			var displacementMapFilter:DisplacementMapFilter = new DisplacementMapFilter(bitmapData, new Point(), 0, BitmapDataChannel.RED, 0, 0, DisplacementMapFilterMode.CLAMP);
			Tweensy.to(displacementMapFilter, { scaleY: 30 }, 3, Linear.easeNone, 1, bitmap);
		}

		private function startDropShadowFilter(bitmap:Bitmap):void{
			bitmap.filters = null;

			var dropShadowFilter:DropShadowFilter = new DropShadowFilter(4, 45, 0x666666);
			Tweensy.to(dropShadowFilter, { angle:225 }, 3, Linear.easeNone, 1, bitmap);
		}

		private function startGlowFilter(bitmap:Bitmap):void{
			bitmap.filters = null;

			var glowFilter:GlowFilter = new GlowFilter(0xbf1424, 1, 0, 0, 3);
			Tweensy.to(glowFilter, { blurX: 10, blurY: 10 }, 3, Linear.easeNone, 1, bitmap);
		}

		private function startGradientBevelFilter(bitmap:Bitmap):void{
			bitmap.filters = null;

			var gradientBevelFilter:GradientBevelFilter = new GradientBevelFilter(4, 45, [0xbf1424, 0x500710, 0x000000], [1, 0, 1], [0, 128, 255], 10, 10);
			Tweensy.to(gradientBevelFilter, { angle: 225 }, 3, Linear.easeNone, 1, bitmap);
		}

		private function startGradientGlowFilter(bitmap:Bitmap):void{
			bitmap.filters = null;

			var gradientGlowFilter:GradientGlowFilter = new GradientGlowFilter(0, 0, [0xbf1424, 0x500710, 0xbf1424], [0, 1, 0], [0, 128, 255], 0, 0);
			Tweensy.to(gradientGlowFilter, { blurX: 10, blurY: 10 }, 3, Linear.easeNone, 1, bitmap);
		}


	}

}


import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.BevelFilter;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;

internal class Button extends Sprite {

	private var _textField:TextField;

	public function get label():String { return _textField.text; }
	public function set label(value:String):void {
		_textField.text = value;
		updateFill();
	}

	public function Button() {
		_textField = new TextField();
		_textField.defaultTextFormat = new TextFormat('_等幅', 10, 0x333333, true);
		_textField.autoSize = TextFieldAutoSize.LEFT;
		_textField.x = 8;
		_textField.y = 4;
		addChild(_textField);

		filters = [new BevelFilter(1, 45, 0xdddddd, 0xbbbbbb)];
		buttonMode = true;
		mouseChildren = false;
		addEventListener(MouseEvent.MOUSE_UP, onButtonMouseUp);
		addEventListener(MouseEvent.MOUSE_DOWN, onButtonMouseDown);
	}

	private function onButtonMouseUp(e:MouseEvent):void {
		var button:Sprite = e.currentTarget as Sprite;

		button.filters = null;
		button.filters = [new BevelFilter(1, 45, 0xdddddd, 0xbbbbbb)];
	}

	private function onButtonMouseDown(e:MouseEvent):void {
		var button:Sprite = e.currentTarget as Sprite;

		button.filters = null;
		button.filters = [new BevelFilter(1, 225, 0xdddddd, 0xbbbbbb)];
	}

	private function updateFill():void {
		graphics.clear();
		graphics.beginFill(0xCCCCCC);
		graphics.drawRect(0, 0, _textField.textWidth + 20, _textField.textHeight + 14);
		graphics.endFill();
	}

}
  1. package  {
  2.     import com.flashdynamix.motion.extras.ColorMatrix;
  3.     import com.flashdynamix.motion.Tweensy;
  4.     import fl.motion.easing.Linear;
  5.     import flash.display.Bitmap;
  6.     import flash.display.BitmapData;
  7.     import flash.display.BitmapDataChannel;
  8.     import flash.display.GradientType;
  9.     import flash.display.Graphics;
  10.     import flash.display.Shape;
  11.     import flash.display.SpreadMethod;
  12.     import flash.display.Sprite;
  13.     import flash.events.MouseEvent;
  14.     import flash.filters.BevelFilter;
  15.     import flash.filters.BlurFilter;
  16.     import flash.filters.ColorMatrixFilter;
  17.     import flash.filters.ConvolutionFilter;
  18.     import flash.filters.DisplacementMapFilter;
  19.     import flash.filters.DisplacementMapFilterMode;
  20.     import flash.filters.DropShadowFilter;
  21.     import flash.filters.GlowFilter;
  22.     import flash.filters.GradientBevelFilter;
  23.     import flash.filters.GradientGlowFilter;
  24.     import flash.geom.Matrix;
  25.     import flash.geom.Point;
  26.     import flash.text.TextField;
  27.     import flash.text.TextFieldAutoSize;
  28.     import flash.text.TextFormat;
  29.  
  30.     [SWF(backgroundColor = 0x000000, width = 600, height = 400, frameRate = 30)]
  31.     public class TestTweensy_8 extends Sprite {
  32.  
  33.         [Embed (source="fl_64.png")]
  34.         private var SampleImage:Class;
  35.  
  36.         private var _bitmaps:Array;
  37.  
  38.         public function TestTweensy_8() {
  39.             initInstances();
  40.             initButton();
  41.         }
  42.  
  43.         private function initInstances():void {
  44.             _bitmaps = [];
  45.  
  46.             var texts:Array = [
  47.                 'BevelFilter', 'BlurFilter', 'ColorMatrixFilter',
  48.                 'ConvolutionFilter', 'DisplacementMapFilter', 'DropShadowFilter',
  49.                 'GlowFilter', 'GradientBevelFilter', 'GradientGlowFilter'
  50.             ];
  51.             var textFormat:TextFormat = new TextFormat('_等幅', 10, 0xffffff);
  52.             var i:int, bitmap:Bitmap, textField:TextField;
  53.             for (i = 0; i < 9; i ++) {
  54.                 bitmap = new SampleImage();
  55.                 bitmap.x = 100 + 200 * Math.floor(i / 3);
  56.                 bitmap.y = 60 + (bitmap.height + 50) * (i % 3);
  57.                 addChild(bitmap);
  58.                 _bitmaps[i] = bitmap;
  59.  
  60.                 textField = new TextField();
  61.                 textField.defaultTextFormat = textFormat;
  62.                 textField.autoSize = TextFieldAutoSize.RIGHT;
  63.                 textField.x = bitmap.x - textField.width;
  64.                 textField.y = bitmap.y;
  65.                 textField.text = texts[i];
  66.                 addChild(textField);
  67.             }
  68.         }
  69.  
  70.         private function initButton():void {
  71.             var button:Button = new Button();
  72.  
  73.             button.label = 'Tweensy.to()';
  74.             button.addEventListener(MouseEvent.CLICK, onButtonClick);
  75.  
  76.             addChild(button);
  77.         }
  78.  
  79.         private function onButtonClick(e:MouseEvent):void {
  80.             startTweensy();
  81.         }
  82.  
  83.         private function startTweensy():void {
  84.             startBevelFilter(_bitmaps[0]);
  85.             startBlurFilter(_bitmaps[1]);
  86.             startColorMatrixFilter(_bitmaps[2]);
  87.             startConvolutionFilter(_bitmaps[3]);
  88.             startDisplacementMapFilter(_bitmaps[4]);
  89.             startDropShadowFilter(_bitmaps[5]);
  90.             startGlowFilter(_bitmaps[6]);
  91.             startGradientBevelFilter(_bitmaps[7]);
  92.             startGradientGlowFilter(_bitmaps[8]);
  93.         }
  94.  
  95.         private function startBevelFilter(bitmap:Bitmap):void {
  96.             bitmap.filters = null;
  97.  
  98.             var bevelFilter:BevelFilter = new BevelFilter(5, 45, 0xbf1424, 1, 0x500710, 1, 10, 10);
  99.             Tweensy.to(bevelFilter, { angle: 225 }, 3, Linear.easeNone, 1, bitmap);
  100.         }
  101.  
  102.         private function startBlurFilter(bitmap:Bitmap):void{
  103.             bitmap.filters = null;
  104.  
  105.             var blurFilter:BlurFilter = new BlurFilter(0, 0, 1);
  106.             Tweensy.to(blurFilter, { blurX: 10, blurY: 10 }, 3, Linear.easeNone, 1, bitmap);
  107.         }
  108.  
  109.         private function startColorMatrixFilter(bitmap:Bitmap):void{
  110.             bitmap.filters = null;
  111.  
  112.             var colorMatrix:ColorMatrix = new ColorMatrix(0, 1);
  113.             var colorMatrixFilter:ColorMatrixFilter = new ColorMatrixFilter(colorMatrix);
  114.             Tweensy.to(colorMatrixFilter, new ColorMatrix(0, 0), 3, Linear.easeNone, 1, bitmap);
  115.         }
  116.  
  117.         private function startConvolutionFilter(bitmap:Bitmap):void{
  118.             bitmap.filters = null;
  119.  
  120.             var convolutionFilter:ConvolutionFilter = new ConvolutionFilter(3, 3, [1, 1, 1, 1, -8, 1, 1, 1, 1], 0.30);
  121.             Tweensy.to(convolutionFilter, { divisor: 0.01 }, 3, Linear.easeNone, 1, bitmap);
  122.         }
  123.  
  124.         private function startDisplacementMapFilter(bitmap:Bitmap):void{
  125.             bitmap.filters = null;
  126.  
  127.             var shape:Shape = new Shape();
  128.             var graphics:Graphics = shape.graphics;
  129.             var matrix:Matrix = new Matrix();
  130.             matrix.createGradientBox(32, 0, 0, 0, 0);
  131.             graphics.beginGradientFill(GradientType.LINEAR, [0x000000, 0xff0000], [1, 1], [0, 255], matrix, SpreadMethod.REFLECT);
  132.             graphics.drawRect(0, 0, 64, 64);
  133.             graphics.endFill();
  134.             var bitmapData:BitmapData = new BitmapData(64, 64);
  135.             bitmapData.draw(shape);
  136.  
  137.             var displacementMapFilter:DisplacementMapFilter = new DisplacementMapFilter(bitmapData, new Point(), 0, BitmapDataChannel.RED, 0, 0, DisplacementMapFilterMode.CLAMP);
  138.             Tweensy.to(displacementMapFilter, { scaleY: 30 }, 3, Linear.easeNone, 1, bitmap);
  139.         }
  140.  
  141.         private function startDropShadowFilter(bitmap:Bitmap):void{
  142.             bitmap.filters = null;
  143.  
  144.             var dropShadowFilter:DropShadowFilter = new DropShadowFilter(4, 45, 0x666666);
  145.             Tweensy.to(dropShadowFilter, { angle:225 }, 3, Linear.easeNone, 1, bitmap);
  146.         }
  147.  
  148.         private function startGlowFilter(bitmap:Bitmap):void{
  149.             bitmap.filters = null;
  150.  
  151.             var glowFilter:GlowFilter = new GlowFilter(0xbf1424, 1, 0, 0, 3);
  152.             Tweensy.to(glowFilter, { blurX: 10, blurY: 10 }, 3, Linear.easeNone, 1, bitmap);
  153.         }
  154.  
  155.         private function startGradientBevelFilter(bitmap:Bitmap):void{
  156.             bitmap.filters = null;
  157.  
  158.             var gradientBevelFilter:GradientBevelFilter = new GradientBevelFilter(4, 45, [0xbf1424, 0x500710, 0x000000], [1, 0, 1], [0, 128, 255], 10, 10);
  159.             Tweensy.to(gradientBevelFilter, { angle: 225 }, 3, Linear.easeNone, 1, bitmap);
  160.         }
  161.  
  162.         private function startGradientGlowFilter(bitmap:Bitmap):void{
  163.             bitmap.filters = null;
  164.  
  165.             var gradientGlowFilter:GradientGlowFilter = new GradientGlowFilter(0, 0, [0xbf1424, 0x500710, 0xbf1424], [0, 1, 0], [0, 128, 255], 0, 0);
  166.             Tweensy.to(gradientGlowFilter, { blurX: 10, blurY: 10 }, 3, Linear.easeNone, 1, bitmap);
  167.         }
  168.  
  169.  
  170.     }
  171.  
  172. }
  173.  
  174.  
  175. import flash.display.Graphics;
  176. import flash.display.Sprite;
  177. import flash.events.MouseEvent;
  178. import flash.filters.BevelFilter;
  179. import flash.text.TextField;
  180. import flash.text.TextFieldAutoSize;
  181. import flash.text.TextFormat;
  182.  
  183. internal class Button extends Sprite {
  184.  
  185.     private var _textField:TextField;
  186.  
  187.     public function get label():String { return _textField.text; }
  188.     public function set label(value:String):void {
  189.         _textField.text = value;
  190.         updateFill();
  191.     }
  192.  
  193.     public function Button() {
  194.         _textField = new TextField();
  195.         _textField.defaultTextFormat = new TextFormat('_等幅', 10, 0x333333, true);
  196.         _textField.autoSize = TextFieldAutoSize.LEFT;
  197.         _textField.x = 8;
  198.         _textField.y = 4;
  199.         addChild(_textField);
  200.  
  201.         filters = [new BevelFilter(1, 45, 0xdddddd, 0xbbbbbb)];
  202.         buttonMode = true;
  203.         mouseChildren = false;
  204.         addEventListener(MouseEvent.MOUSE_UP, onButtonMouseUp);
  205.         addEventListener(MouseEvent.MOUSE_DOWN, onButtonMouseDown);
  206.     }
  207.  
  208.     private function onButtonMouseUp(e:MouseEvent):void {
  209.         var button:Sprite = e.currentTarget as Sprite;
  210.  
  211.         button.filters = null;
  212.         button.filters = [new BevelFilter(1, 45, 0xdddddd, 0xbbbbbb)];
  213.     }
  214.  
  215.     private function onButtonMouseDown(e:MouseEvent):void {
  216.         var button:Sprite = e.currentTarget as Sprite;
  217.  
  218.         button.filters = null;
  219.         button.filters = [new BevelFilter(1, 225, 0xdddddd, 0xbbbbbb)];
  220.     }
  221.  
  222.     private function updateFill():void {
  223.         graphics.clear();
  224.         graphics.beginFill(0xCCCCCC);
  225.         graphics.drawRect(0, 0, _textField.textWidth + 20, _textField.textHeight + 14);
  226.         graphics.endFill();
  227.     }
  228.  
  229. }


About this entry