Erin's Blog

JoSi FXGtoLayout v0.3.0, Adobe AIR 3 runtime 這個又是一個 "就是" 系列懶人小工具，主要是針對 Adobe fxg 格式做分析轉成 Mobile 開發用的視圖程式碼，加速畫面配置使用。 為什麼會製作這個工具，原因主要是本人在使用的 Corona SDK 與 Titanium SDK 都沒有好用的視覺化編輯工具。一般設計師產出 layout 檔會使用 PhotoShop 來製作，在不多花錢的原則下，畫面對齊的基準就是其輸出的 fxg 資料做對應，如果要一筆一筆將資料鍵入，做久也是會膩的，所以花了點時間將這個工具做出來...

詳請請看上篇     [AIR] JoSiResize - Mobile 開發小工具 目前版本 0.7.0 feature: 修正批次輸出檔名錯置的 bug 下載位置相同，完畢！

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

會花時間做這個App完全是 Erin 懶人血液作祟... 由於開發過程中會使用一些Value Object classes 每次要新增就得將舊的 VO class copy and paste 然後打開 AS 檔剪剪貼貼...光這樣的過程重複個幾次就非常惱人，為了一勞永逸隨手用 Flex 3 Build 了一個 VO creator...XD 使用方法很簡單 只要將 VOCreator 上的空白欄位填上，點選Save as就可以了... 輸出 myVO.as： /** * This class was created by AS3 VOCreator v1.0 * Copyright (c) 2008 Erin Lin * All rights reserved. * + + + + + + + + + + + + + * Project : yourProjectName * Name : myVO.as * Date : Wed Nov 26 13:20:46 GMT+0800 2008 **/ package com.you.vo { public class myVO { private var _var1:String; private var _var2:int; public function myVO(){} /** * Set var1 * * @param var1 the value to set. **/ public function set var1(value:String):void{ _var1=value; } /** * Get var1 * * @return var1 as String. */ public function get var1():String{ return _var1 } /** * Set var2 * * @param var2 the value to set. **/ public function set var2(value:int):void{ _var2=value; } /** * Get var2 * * @return var2 as int. ...

The application was created by Grant Skinner for Adobe Systems, Inc. 剛開始一般開發者要分享 AIR app 都是直接留個連結提供下載，對使用者而言無形中增加許多麻煩... 如 Adobe® AIR™ runtime 沒有安裝... air 程式安裝檔被 Mac OSX rename 成 .air.zip 等等... 在AIR beta版時 Adobe Lab推出由 Grant Skinner 製作的 AIR install badge 提供一個 AIR app 共同介面的線上安裝接口。當使用者點選網頁上客制的 AIR install badge， 程式自動判斷使用者電腦有無缺少 Adobe® AIR™ runtime 或是直接出現程式安裝畫面，聽起來是很完美...不過客製化部分完全是手工製作...對開發者無形中也增加許多麻煩（本人就懶得使用了...ORZ ) 直到 AIR 正式版現身， Grant Skinner 又推出了 AIR install badges application "Badger" ，此程式當然是由 Flex 製作的 AIR app，原文連結 : Using Badger for Adobe AIR applications Badger 將一切客製 AIR install badge 流程圖像化了，對超級懶人的我簡直是大愛~~ 以下的範例就是由 Badger 製作：( 真的是很簡單喔！反而是多花了一些時間搞懂如何放到 Blogger 上...） Jam's Mp3 Player v1- AIR1.0 Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.

其實這個 Mp3 player 到發表前已經改過很多版本，最後一次修改原因是七月底到資訊展閒晃，很神奇的被說服買了人生的第一台 Macbook pro，經過了兩三天 Mac OS 的文化衝擊，深深的覺得蘋果的 UE( user experience) 不是玩假的。說實話我的下一台電腦應該還是會繼續買 Mac（希望台灣蘋果能便宜點...= =)。體驗到 Mac OS的直覺操作，手上斷斷續續寫很久也不知道在寫什麼的 Mp3 player 半成品毅然決然的打掉重做，使用工具從 Flash 改為 Flex 來開發。 由於 Erin 超超超超喜歡 蕭敬騰 的歌聲，想當然爾還是以他為主題發表了（滿足小小歌迷的一點心願) 。這個 Mp3 player 最大的特點便是簡單使用，簡化一切功能，沒有儲存功能，沒有複雜的設定，就是方便使用者一開啟程式只需要將想聽的 Mp3 直接拖拉到視窗內即可自動循環播放，不想要的檔案直接拖曳 List 項目到程式視窗外即可刪除。伸縮視窗的概念是由某國外 AIR 發表會所展示的 Fun with Abode AIR ，當初看到這段影片是先模仿寫出類似的 Flv player (但未發表) ，才將相同的模式複製到這個 mp3 player。 Jam's mp3 player v1.0 This is a FREEWARE that base on Adobe® AIR™ Runtime 使用的圖像版權屬影像所有人華納國際音樂股份有限公司、喜鵲娛樂有限公司所有 ＊＊如果圖像使用有任何問題請聯絡我＊＊ 線上下載安裝： Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed. 如果上面步驟無法安裝請確認您有安裝好以下軟體： This application requires the following be installed: Adobe® AIR™ Runtime Jam's Mp3 Player 操作說明： 可拖曳與播放的檔案格式為：.mp3 .png .jpg .gif(僅呈...

在 3 月 19 日於台北舉辦的 「Adobe 3.19 AIR 上市技術講座」中看到幾個外國 Adobe AIR 範例，其中有些運用到 NativeDragEvent (AIR only) 意指使用者可以"直接拖曳"外部檔案到 AIR 視窗做互動。以下是NativeDragEvent 簡單的用法： Flash CS3 / AIR 1.0專案 Action in frame1 Stage中有個 TextField names "txt" import flash.desktop.Clipboard; import flash.desktop.ClipboardFormats; stage.nativeWindow.alwaysInFront=true; txt.addEventListener( NativeDragEvent.NATIVE_DRAG_OVER, doDragOver ); function doDragOver(e:NativeDragEvent):void { var cd:Clipboard = e.clipboard as Clipboard; if (cd.hasFormat( ClipboardFormats.TEXT_FORMAT ) ) { var str:String = e.clipboard.getData( ClipboardFormats.TEXT_FORMAT ) as String; txt.text = str; //貼文字 } else { var arr:Array = e.clipboard.getData( ClipboardFormats.FILE_LIST_FORMAT ) as Array; txt.text = arr[0].nativePath; //第一筆File路徑 } }

AIR (Adobe Integrate Runtime) ，簡單來講它是個視窗程式的平台，可以輕易地用網頁技術就可以製作視窗程式。使用者需要安裝 AIR runtime 在自己的電腦上，僅僅只要安裝一次，之後就等著升級就好。 製作 AIR app的方法很多， 你可以使用 Flex、Flash、Javascript、AJAX and HTML等等..Erin 本身是 Flash 的愛用者(CS3除外..冏，我恨它的黏黏視窗)，所以當 Adobe AIR 上市後，第一個使用的工具還是 Flash(還是得用CS3...)，完成以下幾個簡單步驟，你就可以開始開發 AIR app囉！ 安裝 Adobe AIR runtime 1.0 ，如上述，僅需要安裝一次。 下載安裝 Adobe AIR update for Flash CS3 Professional 下載 Adobe AIR SDK (方便debug與快速執行)，下載後解壓到 C 或 D 槽下即可 當你安裝了 Adobe AIR update for Flash CS3 Professional 會發現在 Flash的 Publish Setting分類中出現 「Adobe AIR 1.0」，沒錯，使用 Flash CS3開發 AIR app 就是這樣簡單！結束了沒？當然還有... 雖然在 Flash 中按 Ctrl+Enter可以直接測試製作中的 AIR app，但是有個很討人厭的地方就是...compile時間爆久、output window 沒反應！！雖然 Debug / Debug Movie 功能可以出現trace，但是輸出慢就很令人受不了，如果你開發的時候最愛設一些 trace也很愛按 Ctrl+Enter的話，到這邊一定會覺得冏掉了，不過別擔心，下載 SDK 的目的就是為了輔助它的不足。 使用 SDK： 開始列 / 執行 / 鍵入 "cmd" 會開啟命令提示字元視窗 (俗稱 DOS window) 如果你的 SDK是存在 C 槽就是直接打入：cd C:\AdobeAIRSDK\bin (常在用的話可以設環境變數喔！) 接下來要測試直接打入：adl "AIR輸出的xml檔案路徑" [Enter] 如下圖： trace 文字就會直接出現在畫面內，這樣測試 + d...

[OS: 我只想要不受視窗限制的tooltip啊....] 開發軟體的基本需求不就是按鈕上應該可以設置tooltip(說明文字)嗎？ 目前在AS3 AIR相關class中只找到 SystemTrayIcon class可以設置系統的tooltip外其他都沒了類似的功能...WHY??? 一時沮喪只好用NativeWindow實做假的系統說明文字來安慰自己了... 原理很簡單就是使用無邊框小視窗的NativeWindow假裝tooltip，不過僅適用於主視窗是無系統框設定 ( NativeWindowSystemChrome.NONE )，原因是...如果主視窗為STANDARD mode你就會發現當假的tooltip視窗出現的時候，主視窗的focus就會跳掉，畫面就會不時的閃啊閃..* * 以下是實際畫面： 有興趣看看的可以直接 下載原始檔 玩玩...囧...rz

最近打算做個小軟體來玩玩，裡面一個需求為開新視窗來做設定的面板，詢問了 qop 大師得知 NativeWindow可以新增，以下是參考 AS3 live doc 內的 NativeWindow class範例程式，提供給跟我一樣是 AIR新手的Flash developers參考...=P 如上圖，操作的過程就是點選的open new window的button後，會開啟一個新的視窗且倂排到主視窗下面，當點選下面的視窗，在主視窗的動態文字框欄位寫入"got message from new window" 前置作業： 在FlashCS3中開新AIR檔案width:300, height:180 從組件庫拉出button放置到主畫面上，並命名"btn"， 再來拉出一個動態文字框，命名"txt"， 隨便畫一個方塊轉成MovieClip並設置linkage name "Mc"。 frame1 action: btn.addEventListener(MouseEvent.CLICK, doClick); function doClick(e:MouseEvent):void { var mc:Mc=new Mc(); mc.addEventListener(MouseEvent.CLICK, doClick2); var windowOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); windowOptions.systemChrome = NativeWindowSystemChrome.STANDARD; windowOptions.type = NativeWindowType.NORMAL; var newWindow:NativeWindow = new NativeWindow(windowOptions); newWindow.stage.scaleMode = StageScaleMode.NO_SCALE; newWindow.stage.align = StageAlign.TOP_LEFT; newWindow.title="New window"; va...

直接利用前篇 AIR : 蕭可愛面板之FLV player v1.0 更換面板設計重新打包而成，最大的差別就是有全螢幕功能。 蕭可愛面板不能有全螢幕功能是因為AIR Beta2 released後，透明視窗設定讓fl包之FLVPlayBack組件中的全螢幕按鈕失效( AIR : Adobe AIR Beta 2 的 BUG 有提到)，本Player的使用說明請參照前篇。 ++ 打包下載 ++

小jam角色設計： circe from 蕭敬騰國際論壇．蕭幫 蕭可愛照片來源 蕭敬騰國際論壇．蕭幫 蕭可愛系列第二發：Little Jam Desktop Land 這是一個類似桌面小寵物的軟體，可供使用者自行新增*.gif and *.png的圖檔到桌面上，並提供「配置儲存」功能，可以依照自己喜好作不同主題的配置，預設的配置是小Jam應援團..=) 只提供.gif and .png用意在於它們都擁有透明背景，這樣放置在桌面會比較有意思，重點是取得容易。 Gif的decoder就是使用 AS3 GIF Player Class 0.1 安裝說明：這是一個免費軟體 base on Adobe AIR Beta2 (使用有效日期至 06/01 2008) 若你沒安裝過 AIR 請事先安裝好 Adobe AIR Beta 2 主體 ，這樣以後只要點選 .air 檔案即可自動安裝。(※只需要裝一次喔！，裝過就等著升級就好，有舊版的請先移除再安裝) 下載LittleJamDesktopLand.air 執行 LittleJamDesktopLand.air 選擇你想要的安裝路徑，預設會出現在program files檔案夾內 建議將.air檔案收集在同一個資料夾中，可以當作quick launch與uninstall的捷徑 安裝後，會在螢幕的右下方出現小Jam樂園的面板： 以下是menu打開的畫面 主要功能都會有小Jam提示你喔！ 功能說明： add / 新增任意*.gif, *.png到桌面，不過太貪心載入太多動畫有可能會造成電腦效能變差！ save / 儲存目前桌面配置，會將你新增到桌面的動畫，圖片位置記錄下來，可以儲存不同主題檔案 load / 載入已儲存的桌面配置，但是載入期間(依照動畫多寡) 可能會有短暫的時間無法使用其他功能，並不是當機喔！ clean all / 清除目前桌面配置，不會對已儲存的配置造成影響。 about Jam / 蕭可愛簡介與歌迷團體的網站連結 credit / 版權聲明 在載入的圖片上面連點滑鼠左鍵(double-click)是角色操作menu： 到最前面 / 往前一個 / 往後一個 / 到最後面 / 都是用來排列角色的前後位置 點選「固定位置」會無法拖曳直到取消固定。 刪除角色 / 小技巧 同步：想要讓分批載入的動畫...

由於手上正在寫一個簡單的App，使用 new File("app-resource:/xxx") 將文字檔寫到程式的工作路徑下，測試中一直發生可以寫入新檔案，但是無法覆寫舊檔案，catch出來的 Error.message 頻頻出現：FileWriteResource，重點是這個 Error message 實在寫的很含糊，不得已祭出 google 大神來找答案：(XD 大神萬歲！) http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=641&threadid=1305641&enterthread=y 原因就是AIR beta2加入了安全機制不允許覆寫 applicationResourceDirectory 內的東西，而建議使用 applicationStorageDirectory... 其實 Beta1 and Beta2 都有些許語法不同，所以參考最新online doc會比較不容易遇到鬼打牆...=P AS3 AIR online doc

真不知道要講 它是Bug還是啥... 昨天更新版後將蕭可愛面版重新輸出，才發現.. 拜託Adobe嘛幫幫忙... 改code連你們自己家的fl包Component都弄出問題，升級到 Beta2後，FLVplayback skin的fullscreen function出問題。FLVplayback 的fullscreen正常來講會將FLVplayback push到stage上，但是在Beta2中，是有個透明的東東被create在stage裡，不過卻忘了FLVplayback....所以會出現啥都不能按也不能操作，連開始列也按不到... 解法：按ESC....orz... 拜託Adobe改一下咩.... Edit 10/09/2007 確定是因為輸出視窗設定為透明導致FLVPlayback component全螢幕失效...AIR beta1是正常的...囧

剛剛有人回應才發現Adobe今天release一堆新東東，哪天不換新版結果今天剛好更新...早上post的蕭可愛面板就不能安裝了(已重新輸出所以現在可以下載嚕！)，無聊可以看一下Adobe更新了啥咪： http://labs.adobe.com/ 如果你是使用Flash CS3開發AIR的話，請記得下載新的SDK for Flash CS3呦！打包部分加入一個流程就是需要有簽名檔才可以打包，在AIR Application & Installer 設定視窗有個 Digital signature，記得點選Change去建立簽名檔呦！不然會無法打包.... BTW, Adobe AIR Beta 2 開發的相關軟體會在 June 1, 2008.失效...XD 同場加映！差點忘了今天 Flash lite3 也一起亮相了捏~~ http://www.adobe.com/products/flashlite/

最近很喜歡的聲音：蕭敬騰，沒辦法他那首 「世界唯一的妳」 給我的震撼真的很大 (當然他當初出場的髮型也很爆點)，生平第一次變成追星族(已經夠低調的那種...XD)的感覺真的很有趣，由於前些日子下載了一堆 youtube 的FLV影片，但是線上FLV影片常常是一部影片被切成好幾段，所以播放器最好有清單功能以便順序播放，又剛好下載的幾乎都是蕭可愛的影片...跟AS3也不夠熟，還想繼續玩AIR，考慮結果當然是自己來寫嚕！ 安裝： 若你沒安裝過 AIR 請事先安裝好 Adobe AIR Beta 2(今天才release的) 主體 ，這樣以後只要點選 .air 檔案即可自動安裝。(只需要裝一次喔！，裝過就等著升級就好，有舊版的請先移除再安裝) 下載Jam FLV Player.air (已經是Beta2版本嚕！) 執行 Jam FLV Player.air 選擇你想要的安裝路徑，預設為：C:\Documents and Settings\使用者名稱\Local Settings\Application Data\Jam FLV Player 建議將.air檔案收集在同一個資料夾中，可以當作quick launch與uninstall的捷徑 使用說明： Double-click面板可以開啟menu，共有以下幾種： 開啟檔案 - 選擇.flv直接播放 播放清單 - 新增與載入 編輯後都需要「save」才會更新，但是只要在list上面的清單，都可以順序播放，所以如果只需要暫時的播放清單，點選「新增清單」後編輯去播放即可。載入的上一筆清單會出現在「新增清單」的選項下面，清單儲存副檔名為.jam...(XD當然要用蕭可愛的英文名字命名了！) 感謝 蕭敬騰國際論壇．蕭幫 的claire.chiu拍的照片~~ 分享給同樣喜歡蕭可愛的你~~~

應用了前兩篇分享的原理，Erin 製作一個無聊的 Webcam 大頭貼編輯器程式來認識 AS3 與 AIR，有興趣的可以下載安裝玩玩...=P ﹝>>下載試玩 Beta2以後版本 安裝： 請事先安裝好 Adobe Integrated Runtime (AIR)主體 ，這樣以後只要點選 .air 檔案即可自動安裝。(只需要裝一次喔！) Edit: 10/01/2007 AIR Beta2 released，請記得更新 執行 BigHeadEditor.air 選擇你想要的安裝路徑，預設為：C:\Documents and Settings\使用者名稱\Local Settings\Application Data\BigHeadEditor 使用說明： 記得在選擇背景圖樣前連接上你的Webcam呦！ 拍完照點選「SAVE?」選擇你要儲存的資料夾就可以看到美美的成品囉！ 如何新增自訂的背景圖樣： 先利用影像處理軟體製作 240x180 pixels的透明背景.png or .gif圖檔。 將輸出的檔案存至 安裝路徑的"image"資料夾內即可。預設為：C:\Documents and Settings\使用者名稱\Local Settings\Application Data\BigHeadEditor\images 程式畫面：

剛剛 Ticore 告知官方版 AIR for Flash CS3 update 今天release了，當然馬上跑去下載，更新完後發現了幾個不一樣的地方： 1. commands新增了兩個功能，一為AIR打包資訊設定，另外一個是打包工具 2. 新增檔案類型多了AIR 1.0 3. 測試檔案很簡單的只要直接test movie即可 XD 真是太方便了！

由於 Erin 很懶在CS中寫code new出AS3組件再放到stage上，常常手動拉出組件人工排版，結果在執行AIR模擬發現了一個怪異現象...輸出swf正常的，但是模擬AIR運行就會發生慘狀...以下是案發現場實況： 主畫面上有兩個frames，每個frame都放著一個button組件，frame1 button命名為"btn" //main timeline frame action btn.addEventListener(MouseEvent.CLICK, doClick); function doClick(e:MouseEvent) { gotoAndStop(2); } stop(); function doClick中的gotoAndStop(2)指的是main timeline，正常執行結果是按下btn後會跳到第二個frame，結果在AIR中會成這樣： 居然變成呼叫組件gotoAndStop(2)!!!....這種現象通用於有兩個frames以上的AS3組件...WHY???

這只是一個簡單的應用，為的是接下來要結合前篇Webcam抓圖要作一個應用App。 一個子資料夾名稱為"imgs" 裡面有一堆可被Flash載入的圖檔，想要不分類的將imgs檔案夾內圖檔全部載入，這邊用到File類別的listDirectory()可以列出所有在指定資料夾內的物件。 package { import flash.display.*; import flash.net.URLRequest; import flash.filesystem.File; public class OpenDirTest extends Sprite { public function OpenDirTest() { var fd:File=new File("app-resource:/imgs"); var arr:Array=fd.listDirectory(); //取得資料 for (var i:int=0; i var lb:Loader=new Loader(); lb.load(new URLRequest("imgs/"+arr[i].name)); lb.x=Math.random()*300; lb.y=Math.random()*200; //亂數擺到畫面上 addChild(lb); } } } }