Skip to main content

[Flex] Custom TweenEffect with Pixel Bender Filter


續前篇。
如果每一次 apply pixel bender 到轉場 effect 都要寫一長串的話實在有點堅強過頭... 要符合懶人精神將常用的 pixel bender filter 效果實作成 TweenEffect 才是明智的選擇。參考了 Flex help 與其他 TweenEffects,以下是簡單客製 TweenEffect 並加上 pixel bender filter 的作法:

每一組 TweenEffect 都由兩個 class 組成: TweenEffectInstance 與 TweenEffect ; 各自有幾個重點 functuon 需要被 override。別忘了先將上篇提到的 CrystallizeShader.as 放到 effects/ 下。

1. 製作 effects/CrystalEffectInstance.as:( 顧名思義就是被作用的實體 )
package effects
{
import flash.display.Shader;
import flash.filters.ShaderFilter;
import mx.effects.Tween;
import mx.effects.effectClasses.TweenEffectInstance;

public class CrystalEffectInstance extends TweenEffectInstance
{
public var sizeTo:Number;
public var sizeFrom:Number;

private var shader:CrystallizeShader = CrystallizeShader.getInstance();

public function CrystalEffectInstance(target:Object)
{
super(target);
}
// Override play() method class.
override public function play():void {
// 一定要有 super.play().
super.play();
sizeFrom = isNaN(sizeFrom) ? 50 : sizeFrom;
sizeTo = isNaN(sizeTo) ? 0 : sizeTo;
var tween:Tween = createTween(this, sizeFrom, sizeTo, duration);
}

// Override onTweenUpdate() method.
override public function onTweenUpdate(val:Object):void {
shader.size = Number(val);
applyFilter();
}
// Override onTweenEnd() method.
override public function onTweenEnd(val:Object):void
{
applyFilter();
super.onTweenEnd(val);
}

private function applyFilter():void{
var filters:Array = target.filters;
for (var i:int = filters.length; i-->0;)
{
if (filters[i] is ShaderFilter)
filters.splice(i, 1);
}
if(shader.size)
filters.push( new ShaderFilter( shader ) );

target.filters = filters;
}
}
}

主要 override play(), onTweenEnd(), onTweenUpdate(),並加上一個 applyFilter 保障其他附加在實體上的 filters 不會被刪掉...=P

2. effects/CrystalEffect.as

package effects
{
import mx.effects.TweenEffect;
import mx.effects.IEffectInstance;

public class CrystalEffect extends TweenEffect
{
public var sizeTo:Number;
public var sizeFrom:Number;

public function CrystalEffect(targetObj:* = null) {
super(targetObj);
instanceClass= CrystalEffectInstance;
}
//override getAffectedProperties()
override public function getAffectedProperties():Array
{
return [ "filters" ];
}
// Override initInstance() method.
override protected function initInstance(inst:IEffectInstance):void {
super.initInstance(inst);
CrystalEffectInstance(inst).sizeFrom = sizeFrom;
CrystalEffectInstance(inst).sizeTo = sizeTo;
}

}
}

繼承 TweenEffect 的寫法有點固定,改寫 initInstance() and getAffectedProperties()

測試:main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:effect = "effects.*"
layout="horizontal" >
<effect:CrystalEffect sizeFrom="200" duration="500" id="crystal" />
<effect:CrystalEffect sizeFrom="500" sizeTo="10" duration="800" id="crystal1" />
<mx:Panel width="250" height="200" title="Pixel Bender Test"
backgroundColor="#F8F8F8" creationCompleteEffect="crystal" />
<mx:Panel width="250" height="200" title="Pixel Bender Test"
backgroundColor="#F8F8F8" creationCompleteEffect="crystal1" />
</mx:Application>

Comments

Popular posts from this blog

[AIR] JoSiResize - Mobile 開發小工具

JoSiResizev0.6.0,Adobe AIR 3 runtime之前開發 tool app 的時候並沒有很深刻的體認到圖片素材的 resize 是一個很麻煩的事情...畢竟圖片使用量並不大,等到開發遊戲類的 app 才發現光處理不同螢幕尺寸的圖片素材是一個相當折磨人的工作。
因此 JoSiResize app 誕生了~~~原理是採用最小 scale 長寬比例不變的方式進行放大縮小。使用方法非常簡單,設定好變更的尺寸,接下來,將需要處理的圖片檔案全選直接拖曳到視窗內,畫面即會跳出預備儲存的檔案夾選擇畫面,確認後即開始轉檔。

PureMVC for Titanium Mobile

為了秉持著哪裡都要用 PureMVC 的想法,試著修改 PureMVC 官網上提供的 Javascript 版本給 Titanium 使用。
**source code**
有任何問題請上:Titanium Mobile 中文開發者論壇

建立 instance 的方法:使用 Puremvc 為 namespace
Ti.include('puremvc-js-1.0.js');
var c = Puremvc.clone( Puremvc.SimpleCommand );
var p = Puremvc.clone( Puremvc.Proxy, "TestProxy", "This is TestProxy's data" );
var m = Puremvc.clone( Puremvc.Mediator , "MainMediator" );

[Unity] erinylin.lazylib - Cookie for PlayerPrefs

有鑑於 PlayerPrefs 測試與版本更新問題,將大家都愛用的 PreviewLabs.PlayerPrefs 打包起來,製作重點還是以懶人為主,基本上 PlayerPrefs 資料更新與數量並不可能會有強烈衝擊效能的狀況產生,所以為了方便開發,就弄了一個視覺化工具,方便除錯用。

雖然 PreviewLabs.PlayerPrefs 作者都宣告放棄他們的版權,不過為了尊重程式,僅僅加入了兩個公用函式,其他並無更改。

內有:
Cookie ManagerCookie 用 DataObject 混合編輯 ScriptableObject執行階段除錯視窗工具當然還是有懶人常數檔案輸出資料版本控制,方便更新版後儲存資料更新功能其實很多,有興趣的請自行到 Github 下載並參考範例吧!