2012年5月29日 星期二

[教學] Adobe AIR 連結SQLite 資料庫

Adobe AIR 內建SQLite 引擎, 我們建立離線資料庫(Database), 以SQL 陳述式查詢和更新. 作為iOS 和Android 的本機資料庫, SQLite 是一個好選擇.

使用SQLite 需要以下三個內建類別完成:
  • SQLConnection - 管理本機 SQL 資料庫檔案 (本機資料庫) 的建立與連線
  • SQLStatement - 執行 SQL 陳述式物件
  • SQLEvent - 傳送SQL 事件的物件



查詢SQLite
 
加入新數據

以下是使用SQLite 的查詢步驟:
  1. 建立資料庫連線:
    var file:File = File.applicationStorageDirectory.resolvePath("user.db");
    var conn:SQLConnection = new SQLConnection();
    conn.addEventListener(SQLEvent.OPEN, openHandler);
    conn.open(file);
    
  2. 連線成功後,  執行 SQL 陳述式:
    private function openHandler(event:SQLEvent):void{
      var statement:SQLStatement = new SQLStatement();
      statement.sqlConnection = conn;
      statement.text = "SELECT name, birthday FROM tbUser";
      statement.addEventListener(SQLEvent.RESULT, resultHandler);
      statement.execute();
    }
    
  3. 讀取數據:
    private function resultHandler(event:SQLEvent):void{
      var statement:SQLStatement = event.target as SQLStatement;
      var data:Array = statement.getResult().data;
      for(var i:int=0; i<data.length; i++)
       trace("name:" + data[i].name + ", birthday:" + data[i].birthday);
    }
    

除了作本機資料庫, 我們可以製作一些機制, 定時同步(Synchronize) 伺服器的資料庫數據, 使本機內容更新. 作者製作一個簡單範例, 實作CREATE TABLEINSERT INTO SELECT 等SQL 陳述式, 幫助了解SQLite 在Adobe AIR 的運作方式.

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

參考資料: http://www.slideshare.net/peterelst/introduction-to-sqlite-in-adobe-air-1627545

若製作過程, 想了解"user.db" 的內容與結構, 我們可以使用免費的SQLite Expert Personal 來解讀SQLite 檔案.
在Windows 運行Flash Builder 會在 "C:\Users\USER_NAME\AppData\Roaming\SQLite.test01.debug\Local Store\" 找到"user.db" 這個檔案.

2012年5月24日 星期四

GPUImage 介紹

國外Eugene Zatepyakin, 製作一個實時渲染特效引擎, 名為GPUImage.
我們把一個BitmapData 傳給引擎, 它利用GPU 計算特效, 實時回傳一個完成渲染的圖像.


 
 


這個範例, 用戶在螢幕雙擊(Double click), 會轉換下一個特效.
作者把它包裝成一個Adobe AIR 在iOS 和Android 上運行, 很像Instagram 特效喔.
大家可以 [下載] 範例試試看.

參考資料: http://www.flashrealtime.com/gpu-stage3d-image-processing/

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

2012年5月2日 星期三

Flash XML 元件集介紹

Flash XML 提供實用元件, 可於在線設定, 然後產生所需的檔案, 給用戶免費下載. 包括Slideshows, Galleries, Image Menus 等等... 美觀的元件使用. 提供General website, Wordpress, Facebook, Joomla 及Flash 使用方案.

Page Flip FX [觀看]
Cover Flow FX [觀看]
Customizable Grid Gallery FX [觀看]

若移除水印 (Watermark) 或在Flash 中使用ActionScript 3.0 控制, 大家需要花點錢購買許可證 (License). 但以參考角度看, 它是一個十分有價值的網頁, 給開發者一個靈感.

2012年5月1日 星期二

Botanicula 遊戲介紹

Amanita Design 公司以Machinarium 作品聞名, 相信大家在MAC, PC 或iPad 見識過. 最近它們以Adobe AIR 配合Stage3D 發佈新遊戲, 名為Botanicula, 以環境保護為主提. 由於支援GPU 硬體加速, 畫面內容十分細膩.





現在版本只有MAC 和PC 購買, 在往後時間, Botanicula 會於iPad 和Android 進行發佈.

參考資料: http://www.wefdc.com/air/6299.html