2012年5月22日 星期二

右鍵點擊Right Click (Flash Player 11.2 新功能)

過去Flash 右鍵點擊 (Right Click), 會看到預設的右鍵選單 (ContextMenu).
現在我們可以去除這個功能, 在Flash Player 11.2 中, 以MouseEvent.RIGHT_CLICK 取代, 更為友善.

 請按 [觀看] (需安裝Flash Player 11.2)

若把整個Flash 內容的右鍵功能去除:
stage.addEventListener(MouseEvent.RIGHT_CLICK, function(e:Event){});

若把某MovieClip 的右鍵設定:
function someHandler(e:MouseEvent):void
{
  trace("right click");
}
someMovieClip.addEventListener(MouseEvent.RIGHT_CLICK, someHandler);

我們可以利用這功能, 簡單的隱藏她是一個Flash Player. 還可以自建一些右鍵功能, 效果相當理想.

參考資料: http://www.leebrimelow.com/?p=3337

2012年5月17日 星期四

Flash CS6 iOS/Andoird Simulator (CS6 新功能)

Flash CS6 支援Simulator 這個新功能, 不用發佈至iOS 或Android 裝置, 加速計(Accelerometer), 多點觸控(Touch and Gesture) 和地理位置(Geolocation) 給開發者利用Simulator 介面輸入所需數據, 模擬在裝置產生的數據.

Flash 內建的Accelerometer 範例

Flash 內建的Swipe Gallery 範例

大家在Flash 內建的New -> Templates -> AIR for Android 可以找到一些簡單範例作測試.

2012年5月16日 星期三

Manage AIR SDK (CS6 新功能)

在Flash CS6 加入新AIR SDK, 我們可以簡單在Manage AIR SDK 中設定:
  1. 下載Adobe LAB 最新AIR SDK

  2. SDK 解壓並存放於C:\Program Files\Adobe\Adobe Flash CS6

  3. 選擇Flash -> Help -> Manage AIR SDK

  4. 加入新增的SDK 路徑

  5. Properties -> Target 選擇最新的AIR SDK (現為AIR 3.3.0.3560 版本)

  6. Ctrl + Enter, 使用最新的AIR SDK 作測試對象
若果Adobe 再更新AIR SDK 時, 我們可以減少更新的麻煩喔.
較舊版本的Flash Professional CS5.5 安裝AIR SDK, 請參考這個設定.

參考資料: http://www.youtube.com/watch?v=qbrBrfOvmQ8

2012年5月15日 星期二

Generate Sprite Sheet (CS6 新功能)

較早之為大家介紹的TexturePacker, 為Starling 圖像引擎提供播放連續動作的Sprite Sheets 格式檔案. 現在的Flash CS6 中, 直接支援這個功能, 在Library 選擇所需的MovieClip, 然後按滑鼠右鍵, 點選Generate Sprite Sheet 便能產生Sprite Sheets 格式檔案.


Library 選擇MovieCLip
Generate Sprite Sheet 設定


若有興趣Starling 播放Sprite Sheets 檔案, 請瀏覽這個範例.


注意事項: 使用Starling 的getTextures 時, 請注意文字的大小階與Library 中MovieClip 的名字相同.

2012年5月10日 星期四

Starling 粒子特效

Starling 圖像引擎可以播放連續動作, 還可以製作粒子(Particle). 我們可以引入Starling-Extension-Particle-System 元件, 它是一個基於Starling 上擴充功能(Extension).

請按 [觀看] 範例

國外的ONEBYONE, 提供一個免費線上Particle Editor. 我們設定粒子特效後, 按輸出(Export) 會下載一個particle.zip 檔案. 這個壓縮檔包含:

  • particle.pex - XML 格式內容, 是一些粒子特效的設定值
  • texture.png - 粒子的圖案, 可在Particle Editor 自行設定

ONEBYONE  的線上Particle Editor

定義載入檔案:
[Embed(source="../embed/particle.pex", mimeType="application/octet-stream")]
private var ParticlePEX:Class;

[Embed(source="../embed/texture.png")]
private var ParticleTexture:Class;

private var _pd:ParticleDesignerPS;

建立粒子:
_pd = new ParticleDesignerPS(
      XML(new ParticlePEX()), 
      Texture.fromBitmap(new ParticleTexture())
    );
addChild(_pd);
_pd.emitterX = stage.stageWidth >> 1; 
_pd.emitterY = stage.stageHeight >> 1;
_pd.start();
_pd.startSize = 70;

Starling.juggler.add(_pd);

stage.addEventListener(TouchEvent.TOUCH, touchHandler);

用戶按下螢幕, 移動特效:
private function touchHandler(event:TouchEvent):void{
  var touch:Touch = event.getTouch(stage);
  var tween:Tween = new Tween(_pd, 1.5, Transitions.EASE_OUT_BACK);
  tween.animate("emitterX", touch.globalX);
  tween.animate("emitterY", touch.globalY);
  Starling.juggler.add(tween);
}

這個Particle Editor 製作粒子特效十分方便, 當然我們還可以在Action Script 設定和改變其值, 達至互動效果. 作者在iOS 和Android 測試運行, 效果相當理想. 大家可以 [下載] 範例試試看.

參考資料: http://www.ashan.org/?post=295

2012年5月4日 星期五

TexturePacker 介紹

在2D 遊戲的製作中, 為了要表現出連續動作, 通常會在短時間內持續地更新畫面圖案, 使其產生動畫的效果. 在Starling 圖像引擎的MovieClip 類別, 支援以Sprite Sheets 格式播放連續動作. 現為大家介紹TexturePacker, 把SWF 自動切割與合成.

請按 [觀看] 範例

我們在Flash IDE 中製作動畫, 然後產生SWF 檔.
在Flash 製作動畫

把SWF 檔放入TexturePacker, 在Data Format 選擇Sparrow 格式, 最後按Publish 完成.
將SWF 檔轉為Sprite Sheets

Sparrow 格式是相容Starling 圖像引擎, 產生一個PNG 與XML 檔, 在Adobe AIR 中載入相關檔案.
[Embed(source="assets/penguin.xml", mimeType="application/octet-stream")]
var AtlasXML:Class;

[Embed(source="assets/penguin.png")]
var AtlasTexture:Class;

// <----- create texture
var texture:Texture = Texture.fromBitmap(new AtlasTexture());
var xml:XML = XML(new AtlasXML());
var atlas:TextureAtlas = new TextureAtlas(texture, xml);

// <----- create MovieClip
var mc:MovieClip = new MovieClip(atlas.getTextures("penguin"), 30);
addChild(mc);

// <----- activate MovieClip
Starling.juggler.add(mc);

對於製作遊戲的朋友, 這個TexturePacker 是一個十分實用的工具.
大家可以 [下載] 範例試試看.

參考資料: http://www.gotoandlearn.com/play.php?id=147

注意事項: 關於SWF 動畫製作, 必需在時間主軸上製作, TexturePacker 不能把主軸之內的動作一同產生.

2012年5月3日 星期四

多點觸控與手勢輸入 (Multitouch and Gestures)

在Adobe AIR 多點觸控輸入, 可以簡單使用TransformGestureEvent, 在iOS 及Android 平台能有效操作. 作者製作一個照片瀏覽App 範例, 由Starling 圖像引擎處理照片顯示, 以TweenLite 處理放大和旋轉等動作, 展示以下四種手勢控制:

  • 縮放手勢 - TransformGestureEvent.GESTURE_ZOOM
    放大照片
    >>
  • 旋轉手勢 - TransformGestureEvent.GESTURE_ROTATE
    旋轉照片
    >>
  • 平移手勢 - TransformGestureEvent.GESTURE_PAN
    平移改變照片透明度
    >>
  • 揮動手勢 - TransformGestureEvent.GESTURE_SWIPE
    向上推, 將照片模糊
    >>

照片瀏覽App 範例, 由三部分構成:
在介面層面: (MXML)
  • 初次化Starling 圖像引擎, 然後加入手勢事件:
    // <----- set Multitouch mode
    Multitouch.inputMode = MultitouchInputMode.GESTURE;
    
    // <----- add listener
    this.stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoomHandler);
    this.stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotateHandler);
    this.stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onPanHandler);
    this.stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipeHandler);
    
  • 收集手勢事件, 呼叫MyGame 處理:
  • private function onZoomHandler(e:TransformGestureEvent):void{
      _myPhoto.zoom(e.scaleX, e.scaleY);
    }
    private function onRotateHandler(e:TransformGestureEvent):void{
      _myPhoto.rotate(e.rotation/45);
    }
    private function onPanHandler(e:TransformGestureEvent):void{
      _myPhoto.transparent(e.offsetX/100);
    }
    private function onSwipeHandler(e:TransformGestureEvent):void{
      if(e.offsetY<0 && e.offsetX==0)
        _myPhoto.filter();
    }
    

在MyGame 層面: (Starling 的關聯物件)
  • 初次化Starling 圖像引擎後, 產生Photo 物件:
    // <----- create Photo
    _photo = new Photo();
    _photo.x = this.stage.stageWidth/2;
    _photo.y = this.stage.stageHeight/2;
    this.addChild(_photo);
    
    // <----- the first reset
    reset();
    
  • 收到介面呼叫, 利用TweenLite 改變Photo 的屬性狀態, 產生動作效果:
    public function zoom(scaleX:Number, scaleY:Number):void{
      _photo.tScaleX *= scaleX;
      _photo.tScaleY *= scaleY;
      TweenLite.to(_photo, 0.2, {scaleX:_photo.tScaleX, scaleY:_photo.tScaleY});
    }
    public function rotate(rotation:Number):void{
      _photo.tRotation = (_photo.tRotation+rotation)%(Math.PI*2);
      TweenLite.to(_photo, 0.2, {rotation:_photo.tRotation});
    }
    public function transparent(alpha:Number):void{
      _photo.tAlpha = _photo.tAlpha+alpha;
      if(_photo.tAlpha>1) _photo.tAlpha = 1;
      if(_photo.tAlpha<0) _photo.tAlpha = 0;
      TweenLite.to(_photo, 0.2, {alpha:_photo.tAlpha});
    }
    public function filter():void{
      _photo.filter(!_photo.isBlur());
    }
    

在Photo 物件層面: (Starling 產生的照片實體)
  • 被初次化時, 準備一張正常照片和一張模糊照片:
    // <----- add image
    _image1 = Image.fromBitmap(new _baseClass());
    _image1.x = -_image1.width/2;
    _image1.y = -_image1.height/2;
    _image1.smoothing = TextureSmoothing.TRILINEAR;
    _image1.visible = true;
    addChild(_image1);
    
    // <----- add blur image
    var bitmap:Bitmap = (new _baseClass()) as Bitmap;
    bitmap.bitmapData.applyFilter(bitmap.bitmapData, bitmap.bitmapData.rect, new Point(), new BlurFilter(20, 20, 3));
    _image2 = Image.fromBitmap(bitmap);
    _image2.x = -_image2.width/2;
    _image2.y = -_image2.height/2;
    _image2.smoothing = TextureSmoothing.TRILINEAR;
    _image2.visible = false;
    addChild(_image2);
    
  • 處理MyGame 呼叫的模糊功能, 以visible 屬性來控制是否顯示:
    public function filter(blurFlag:Boolean):void{
      _image1.visible = !blurFlag;
      _image2.visible = blurFlag;
    }
    public function isBlur():Boolean{
      return _image2.visible;
    }
    

手勢輸入在電話或平版電腦, 控制效率十分明顯, 手指在屏幕上劃一劃, 可以改變很多屬性, 對比傳統的滾動條(Scroll Bar) 更為方便.

大家可以 [下載] 範例試試看.

參考資料: http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html