2009年9月アーカイブ

AdobeのFlashデベロッパーセンターの解説記事。これまだエントリーしてなかったよね。

Adobe Pixel Benderでのブレンド、フィルタおよび塗りの作成

Progression4のDevToolsでProgression用ライブラリテンプレートを作る方法が紹介してあるブログ。

northprintさん。Is It So Easy?
Progression4パブリックベータ開始!そんでDevToolsでProgression用ライブラリテンプレートを作る

Pixel Bender Home

|

Pixel Benderの入り口はここAdobe Labsです(英語)。

Pixel BenderのいろんなFilterはここAdobe Pixel Bender Exchangeからダウンロード。

DisplayObjectのフィルタのトゥイーン
_bevelFilter
_blurFilter
_colorMatrixFilter
_convolutionFilter
_displacementMapFilter
_dropShadowFilter
_glowFilter
_gradientBevelFilter
_gradientGlowFilter
_shaderFilter

MovieClipのフレームのトゥイーン
_frame

例:
BetweenAS3.to(mc, {
    _glowFilter: {
        blurX: 32,
        blurY: 32
    }
}).play();
参考:BetweenAS3/en - Spark project
// ColorTransform in DisplayObject
BetweenAS3.to(mc, {
    transform: {
        colorTransform: {
            redOffset: 255
        }
    }
}).play();
// SoundTransform in SoundChannel
BetweenAS3.to(sc, {
    soundTransform: {
        volume: 0.0
    }
}).play();
参考:BetweenAS3/en - Spark project

BetweenAS3のTweenEvent

|

BetweenAS3のTweenEvent

public static const PLAY:String = 'play';
public static const STOP:String = 'stop';
public static const UPDATE:String = 'update';
public static const COMPLETE:String = 'complete';

AS2スタイル
onPlay
onPlayParams
onStop
onStopParams
onUpdate
onUpdateParams
onComplete
onCompleteParams

BetweenAS3のeasingの種類

|

BetweenAS3のeasingの種類

Back
Bounce
Circ または Circular
Cubic
Elastic
Expo または Exponential
Linear
Quad または Quadratic
Quart または Quartic
Quint または Quintic
Sine

class BetweenAS3

|

新しいトゥイーンを作成します.
public static function tween(target:Object, to:Object, from:Object = null, time:Number = 1.0, easing:IEasing = null):IObjectTween

target トゥイーンの対象となるオブジェクト
to トゥイーンの終了値
from トゥイーンの開始値
time トゥイーンに掛ける時間
easing トゥイーンに使用するイージング
戻り値: 作成されたトゥイーン


新しいトゥイーンを作成します.
public static function to(target:Object, to:Object, time:Number = 1.0, easing:IEasing = null):IObjectTween

target トゥイーンの対象となるオブジェクト
to トゥイーンの終了値
time トゥイーンに掛ける時間
easing トゥイーンに使用するイージング
戻り値: 作成されたトゥイーン


新しいトゥイーンを作成します.
public static function from(target:Object, from:Object, time:Number = 1.0, easing:IEasing = null):IObjectTween

target トゥイーンの対象となるオブジェクト
from トゥイーンの開始値
time トゥイーンに掛ける時間
easing トゥイーンに使用するイージング
戻り値: 作成されたトゥイーン


指定されたオブジェクトにトゥイーンの値を適用します.
public static function apply(target:Object, to:Object, from:Object = null, time:Number = 1.0, applyTime:Number = 1.0, easing:IEasing = null):void

target 対象となるオブジェクト
to トゥイーンの終了値
from トゥイーンの開始値
time トゥイーンに掛ける時間
applyTime 適用する時間
easing トゥイーンに使用するイージング


新しいベジェトゥイーンを作成します.
public static function bezier(target:Object, to:Object, from:Object = null, controlPoint:Object = null, time:Number = 1.0, easing:IEasing = null):IObjectTween

target トゥイーンの対象となるオブジェクト
to トゥイーンの終了値
from トゥイーンの開始値
controlPoint コントロールポイント
time トゥイーンに掛ける時間
easing トゥイーンに使用するイージング
戻り値: 作成されたトゥイーン


新しいベジェトゥイーンを作成します.
public static function bezierTo(target:Object, to:Object, controlPoint:Object = null, time:Number = 1.0, easing:IEasing = null):IObjectTween

target トゥイーンの対象となるオブジェクト
to トゥイーンの終了値
controlPoint コントロールポイント
time トゥイーンに掛ける時間
easing トゥイーンに使用するイージング
戻り値: 作成されたトゥイーン


新しいベジェトゥイーンを作成します.
public static function bezierFrom(target:Object, from:Object, controlPoint:Object = null, time:Number = 1.0, easing:IEasing = null):IObjectTween

target トゥイーンの対象となるオブジェクト
from トゥイーンの開始値
controlPoint コントロールポイント
time トゥイーンに掛ける時間
easing トゥイーンに使用するイージング
戻り値: 作成されたトゥイーン


新しい物理トゥイーンを作成します.
public static function physical(target:Object, to:Object, from:Object = null, easing:IPhysicalEasing = null):IObjectTween

target トゥイーンの対象となるオブジェクト
to トゥイーンの終了値
from トゥイーンの開始値
easing トゥイーンに使用するイージング
戻り値: 作成されたトゥイーン


新しい物理トゥイーンを作成します.
public static function physicalTo(target:Object, to:Object, easing:IPhysicalEasing = null):IObjectTween

target トゥイーンの対象となるオブジェクト
to トゥイーンの終了値
easing トゥイーンに使用するイージング
戻り値: 作成されたトゥイーン


新しい物理トゥイーンを作成します.
public static function physicalFrom(target:Object, from:Object, easing:IPhysicalEasing = null):IObjectTween

target トゥイーンの対象となるオブジェクト
from トゥイーンの開始値
easing トゥイーンに使用するイージング
戻り値: 作成されたトゥイーン


指定されたオブジェクトに物理トゥイーンの値を適用します.
public static function physicalApply(target:Object, to:Object, from:Object = null, applyTime:Number = 1.0, easing:IPhysicalEasing = null):void

target 対象となるオブジェクト
to トゥイーンの終了値
from トゥイーンの開始値
applyTime 適用する時間
easing トゥイーンに使用するイージング


指定さたトゥイーンを結合して、同時に実行するトゥイーンを作成します.
public static function parallel(...tweens:Array):ITweenGroup

...tweens 結合するトゥイーン
戻り値: 作成されたトゥイーン


指定された配列内のトゥイーンを結合して、同時に実行するトゥイーンを作成します.
public static function parallelTweens(tweens:Array):ITweenGroup

tweens 結合するトゥイーンの配列
戻り値: 作成されたトゥイーン


指定さたトゥイーンを結合して、順番に実行するトゥイーンを作成します.
public static function serial(...tweens:Array):ITweenGroup

...tweens 結合するトゥイーン
戻り値: 作成されたトゥイーン


指定された配列内のトゥイーンを結合して、順番に実行するトゥイーンを作成します.
public static function serialTweens(tweens:Array):ITweenGroup

tweens 結合するトゥイーンの配列
戻り値: 作成されたトゥイーン


指定されたトゥイーンを逆にしたトゥイーンを作成します.
public static function reverse(tween:ITween, reversePosition:Boolean = true):ITween

tween 元となるトゥイーン
reversePosition 作成されたトゥイーンが元となるトゥイーンと同じ位置を指すようポジションを設定するのであれば true そうでなければ false
戻り値: 作成されたトゥイーン


指定されたトゥイーンを繰り返したトゥイーンを作成します.
public static function repeat(tween:ITween, repeatCount:uint):ITween

tween 元となるトゥイーン
repeatCount 繰り返す回数
戻り値: 作成されたトゥイーン


指定されたトゥイーンをタイムスケールしたトゥイーンを作成します.
public static function scale(tween:ITween, scale:Number):ITween

tween 元となるトゥイーン
scale スケール値
戻り値: 作成されたトゥイーン


指定されたトゥイーンの一部分を切り出したトゥイーンを作成します.
public static function slice(tween:ITween, begin:Number, end:Number, isPercent:Boolean = false):ITween

tween 元となるトゥイーン
begin 切り出しの開始時間
end 切り出しの終了時間
isPercent 切り出しの時間を元のトゥイーンにかかる時間に対する割合で指定するのであれば true そうでなければ false
戻り値: 作成されたトゥイーン


指定されたトゥイーンに遅延を加えたトゥイーンを作成します.
public static function delay(tween:ITween, delay:Number, postDelay:Number = 0.0):ITween

tween 元となるトゥイーン
delay トゥイーン前の遅延時間
postDelay トゥイーン後の遅延時間
戻り値: 作成されたトゥイーン


指定された DislayObjectContainer に DisplayObject を追加するトゥイーンを作成します.
public static function addChild(target:DisplayObject, parent:DisplayObjectContainer):ITween

target DisplayObjectContainer に追加される DisplayObject
parent DisplayObject を追加する DisplayObjectContainer
戻り値: 作成されたトゥイーン


指定された DisplayObject の親から DisplayObject を削除するトゥイーンを作成します.
public static function removeFromParent(target:DisplayObject):ITween

target 親から削除する DisplayObject
戻り値: 作成されたトゥイーン


指定された関数を実行するトゥイーンを作成します.
public static function func(func:Function, params:Array = null, useRollback:Boolean = false, rollbackFunc:Function = null, rollbackParams:Array = null):ITween

func 実行する関数
params 実行する関数に渡す引数
useRollback ロールバック時に関数を実行するのであれば true そうでなければ false
rollbackFunc ロールバック時に実行する関数
rollbackParams ロールバック時に実行する関数に渡す引数
戻り値:

IObjectTweenインタフェース

|
package org.libspark.betweenas3.tweens
{
	// target の各プロパティに対する値のセッター、特殊プロパティの処理の提供などが主な役割。
	// 各プロパティといっても、全てのプロパティに対して責任を持つ必要は無く、特殊化したいものだけ処理すればよい。
	// たとえば DisplayObject に対するものであれば、主要な x, y, rotation といったプロパティのみに対する処理だけでも良い。
	// それ以外のプロパティに関しては、全てのプロパティを扱うことができる汎用的な ObjectTweenTarget が責任を持って処理をするので
	// 意識する必要は無い。
	
	/**
	 * ひとつのオブジェクトを対象としたトゥイーンターゲットです.
	 * 
	 * @author	yossy:beinteractive
	 */
	public interface IObjectTween extends ITween
	{
		/**
		 * このトゥイーンの対象となるオブジェクトを取得します.
		 */
		function get target():Object;
	}
}

ITweenGroupインタフェース

|
package org.libspark.betweenas3.tweens
{
	/**
	 * 複数のトゥイーンのコンテナ.
	 * 
	 * @author	yossy:beinteractive
	 */
	public interface ITweenGroup extends ITween
	{
		function contains(tween:ITween):Boolean;
		function getTweenAt(index:int):ITween;
		function getTweenIndex(tween:ITween):int;
	}
}

ITweenインタフェース

|
package org.libspark.betweenas3.tweens
{
	import flash.events.IEventDispatcher;
	
	// EventDispatcher は委譲 & 遅延生成で実装しましょう。
	
	/**
	 * トゥイーン及びその制御.
	 * 
	 * @author	yossy:beinteractive
	 */
	public interface ITween extends IEventDispatcher
	{
		/**
		 * このトゥイーンの継続時間 (秒) を返します.
		 */
		function get duration():Number;
		
		/**
		 * このトゥイーンの現在位置 (秒) を返します.
		 */
		function get position():Number;
		
		/**
		 * このトゥイーンが現在再生中であれば true, そうでなければ false を返します.
		 */
		function get isPlaying():Boolean;
		
		/**
		 * このトゥイーンの完了時に再生を停止するのであれば true, そうでなければ false を設定します.
		 */
		function get stopOnComplete():Boolean;
		
		/**
		 * @private
		 */
		function set stopOnComplete(value:Boolean):void;
		
		function get onPlay():Function;
		function set onPlay(value:Function):void;
		function get onPlayParams():Array;
		function set onPlayParams(value:Array):void;
		function get onStop():Function;
		function set onStop(value:Function):void;
		function get onStopParams():Array;
		function set onStopParams(value:Array):void;
		function get onUpdate():Function;
		function set onUpdate(value:Function):void;
		function get onUpdateParams():Array;
		function set onUpdateParams(value:Array):void;
		function get onComplete():Function;
		function set onComplete(value:Function):void;
		function get onCompleteParams():Array;
		function set onCompleteParams(value:Array):void;
		
		/**
		 * このトゥイーンの再生を現在の位置から開始します.
		 */
		function play():void;
		
		/**
		 * このトゥイーンの再生を現在の位置で停止します.
		 */
		function stop():void;
		
		/**
		 * このトゥイーンの再生を一時停止または再開します.
		 */
		function togglePause():void;
		
		/**
		 * このトゥイーンの再生を指定された位置から開始します.
		 * 
		 * @param	position	再生を開始する位置 (秒)
		 */
		function gotoAndPlay(position:Number):void;
		
		/**
		 * このトゥイーンの再生を指定された位置で停止します.
		 * 
		 * @param	position	再生を停止する位置 (秒)
		 */
		function gotoAndStop(position:Number):void;
		
		/**
		 * この ITween のクローンを生成して返します.
		 * 
		 * @return	この ITween のクローン
		 */
		function clone():ITween;
	}
}
スタンドアローンモードでは、シェーダをイメージ以外のデータ処理に使うことができる。スタンドアローンモードでは、シェーダの実行が非同期のバックグラウンド処理になる。
var job:ShaderJob = new ShaderJob(myShader);
job.addEventListener(ShaderEvent.COMPLETE, completeHandler);

function completeHandler(event:ShaderEvent):void 
{ 
    // do something with the shader result 
} 

var jobResult:BitmapData = new BitmapData(100, 75); 
job.target = jobResult;
job.start();
target, width, heightをコンストラクタのパラメータで指定する場合
var job:ShaderJob = new ShaderJob(myShader, myTarget, myWidth, myHeight);

同期処理する場合
job.start(true);
 

ブレンドでシェーダを使う

|
var foregroundShape:Shape = new Shape(); 
var g2:Graphics = foregroundShape.graphics; 
var c2:Array = [0xff8000, 0x663300]; 
var a2:Array = [255, 255]; 
var r2:Array = [100, 255]; 
var m2:Matrix = new Matrix(); 
m2.createGradientBox(300, 200); 
g2.beginGradientFill(GradientType.LINEAR, c2, a2, r2, m2); 
g2.drawEllipse(100, 0, 300, 200); 
g2.endFill(); 
addChild(foregroundShape); 
//ブレンドモードをシェーダにする
foregroundShape.blendShader = shader; 
foregroundShape.blendMode = BlendMode.SHADER; 

シェーダデータを調べる

|
シェーダのパラメータをシェーダのdataから調べる例。 シェーダのdataオブジェクトを取り出し、ShaderInput、ShaderParameter、メタデータを取り出す。
var shaderData:ShaderData = myShader.data; 
var inputs:Vector.<ShaderInput> = new Vector.<ShaderInput>(); 
var parameters:Vector.<ShaderParameter> = new Vector.<ShaderParameter>(); 
var metadata:Vector.<String> = new Vector.<String>(); 
 
for (var prop:String in shaderData) 
{ 
    if (shaderData[prop] is ShaderInput) 
    { 
        inputs[inputs.length] = shaderData[prop]; 
    } 
    else if (shaderData[prop] is ShaderParameter) 
    { 
        parameters[parameters.length] = shaderData[prop]; 
    } 
    else 
    { 
        metadata[metadata.length] = shaderData[prop]; 
    } 
} 

塗りでシェーダを使う

|
var canvas:Sprite = new Sprite(); 
canvas.graphics.beginShaderFill(myShader); 
canvas.graphics.drawRect(10, 10, 150, 150); 
canvas.graphics.endFill(); 

shaderを作る

|
//myShader.pbjをバイナリで読み込む
var loader:URLLoader = new URLLoader(); 
loader.dataFormat = URLLoaderDataFormat.BINARY; 
loader.addEventListener(Event.COMPLETE, onLoadComplete); 
loader.load(new URLRequest("myShader.pbj")); 
 
var shader:Shader; 
 
function onLoadComplete(event:Event):void { 
    //shaderを作る
    shader = new Shader(); 
    shader.byteCode = loader.data; 
     
    //これでもOK
    // shader = new Shader(loader.data); 
     
     // shaderを使う 
}

Box2D Home

|
Box2Dはこちら

このアーカイブについて

このページには、2009年9月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2009年8月です。

次のアーカイブは2009年10月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。