FPS 監視器

Flash 是一個跨平台方案, 在不同作業系統, 瀏覽器, 流動電話運作.
可是每一個平台所執行的硬體不同, 我們必須測試是否發揮一致, 令每位用戶得到同一效能.
以FPS (Frame per second) 的穩定最為重要, 較多開發者會利用Hi-ReS-Stats 顯示狀態. 它能顯示以下四個數據作參考:

• FPS - 每秒能呈現多少次更新, 數字越大越好
• MS - 一次渲染所需時間, 以毫秒作計算, 數字越低就越好
• MEM - 內存的代碼使用, 如果它增加, 代表非常壞
• MAX - 最大內存的應用

使用方法:

import net.hires.debug.Stats;
addChild(new Stats());

測試實例:

實例下載: [ 下載 ]
官方網頁: https://github.com/mrdoob/Hi-ReS-Stats

日本 ROXIK 3D Engine

Adobe Flash 現階段主要發展硬解3D Engine, 但在Flash Player 11 仍未面世之時, 我們仍然使用舊有3D 技術製作.
在很久以前, 出現一個驚人的3D Engine, 日本人自創的3D演算法, 速度和畫質相當不俗.
可惜ROXIK 3D Engine 沒有公開源碼, 大家只能欣嘗以下作品:

THE PLANET ZERO

Verbatim Robots (比賽已經完結, 請觀看以下片段作參考)


THE ECO ZOO

ROXIK Demo Site

ROXIK Profile

[教學] 安裝Adobe AIR 2.7 在 Flash Professional CS5.5

Step 1: 下載Adobe AIR 2.7 SDK

Step 2: 關閉Flash Professional (如使用中), 把C:\Program Files\Adobe\Adobe Flash CS5.5\AIR2.6 改變成AIR2.6OLD 以作備份

Step 3: 把SDK 解壓, 然後儲存於C:\Program Files\Adobe\Adobe Flash CS5.5\AIR2.6 文件夾內

Step 4: 最後, 把 AIR2.6/frameworks/libs/air/ 內的airglobal.swc, 直接複製重寫於Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0/AIR2.6/ 內

完成後, Flash Professional 可直接製作AIR 2.7 程式.

參考資料: http://kb2.adobe.com/cps/908/cpsid_90810.html

[教學] QR Code 讀取器

對於流動電話用戶, 在電腦或雜誌看到apps 介紹, 希望在流動電話安裝, 最方便直接可使用QR Code, 可以令用戶免打URL 之苦. 現在Adobe AIR 已有相應引擎讀取QR Code 或Barcode.
以下一實例使用ZXing Barcode Library, 然後打開系統預設瀏覽器.

範例功能:

1. 用戶輸入字串 (只限英文/數字/符號), 產生QR Code 影像
2. 開啟相機, 解讀影像, 顯示QR Code 內包含的字串, 打開系統預設瀏覽器

範例使用類別說明:

• Camera - 別從用戶端系統的攝影機擷取視訊
• Timer - 可讓您在指定的時間序列上執行程式碼
• BitmapData - 建立任意調整大小的透明或不透明點陣圖影像，而且在執行階段中以各種方式操作
• com.google.zxing.* - ZXing Barcode Library 包裹, 能解讀QRCode, EAN / ISBN, Code32/128, datamatrix, UPCA, UPCE

Step 1: 建立相機 (Camera 物件)

var camera:Camera = Camera.getCamera();
var video:Video = new Video(WIDTH, WIDTH);
camera.setMode(WIDTH, WIDTH, 24.);
camera.setQuality(1638400, 85);
video.attachCamera(camera);
_ui = new UIComponent();
_ui.addChild(video);
this.addElement(_ui);

Step 2: 建立計時器, 設定每一秒解讀影像一次 (Timer 物件)

_timer = new Timer(1000, 0);
_timer.addEventListener(TimerEvent.TIMER, timerHandler);
_timer.start();

Step 3: 最後, 利用zxing 包裹, 解讀影像成字串 (使用com.google.zxing 相關物件)

var lsource:BufferedImageLuminanceSource = new BufferedImageLuminanceSource(bitmapData);
var bitmap:BinaryBitmap = new BinaryBitmap(new GlobalHistogramBinarizer(lsource));
var ht:HashTable = getHint();
var res:Result = null;
try{
 res = _myReader.decode(bitmap, ht);
}catch(e:Error){
 return;
}

if(res!=null){
 var parsedResult:ParsedResult = ResultParser.parseResult(res);
 msgTxt.text = parsedResult.getDisplayResult();
}

大家可以 [下載], 然後一齊玩玩QR Code.
當然除URL 外, 還可製作自家應用程式或遊戲.

參考資料: http://zxing.riaforge.org/

[教學] 輸出JPG 和PNG 檔

在Adobe AIR 運行時, 用戶端如需要輸出圖像時, 可以利用JPEGEncoder 和PNGEncoder 幫助編碼, 然後使用File 和FileStream 產生檔案. 這方法在電腦和流動電話中, 同樣有效運作, 十分實用.
以下一實例為大家介紹, 把餅形統計圖輸出成圖像.

範例功能:

• 將餅形統計圖, 輸出成JPG 和PNG 檔, 儲存於系統內

範例使用類別說明:

• JPEGEncoder - 將原始的位圖圖像轉換為編碼圖像
• PNGEncoder - 無損壓縮將原始位圖圖像轉換為編碼圖像
• ByteArray - 提供方法和屬性，好讓讀取、寫入及使用二進位資料的動作最佳化
• File - 代表檔案或目錄的路徑。這可能是現有檔案或目錄，或是尚未存在的檔案或目錄
• FileStream - 用來讀取及寫入檔案

輪出JPG 檔:

var bitmapData:BitmapData = new BitmapData(myChart.width, myChart.height);
bitmapData.draw(myChart);

var jpgEnc:JPEGEncoder = new JPEGEncoder(85);
var jpgByteArray:ByteArray = jpgEnc.encode(bitmapData);
var jpgFile:File = File.userDirectory.resolvePath("snapshot.jpg");
var fs:FileStream = new FileStream();
try{
 fs.open(jpgFile,FileMode.WRITE);
 fs.writeBytes(jpgByteArray);
 fs.close();
}catch(e:Error){
 // when error...
}

輪出PNG 檔:

var bitmapData:BitmapData = new BitmapData(myChart.width, myChart.height);
bitmapData.draw(myChart);

var pngEnc:PNGEncoder = new PNGEncoder();
var pngByteArray:ByteArray = pngEnc.encode(bitmapData);
var pngFile:File = File.userDirectory.resolvePath("snapshot.png");
var fs:FileStream = new FileStream();
try{
 fs.open(pngFile,FileMode.WRITE);
 fs.writeBytes(pngByteArray);
 fs.close();
}catch(e:Error){
 // when error...
}

大家可以 [下載], 然後簡單輸出圖像檔玩玩.

參考資料: http://cookbooks.adobe.com/post_Save_a_local_image_file__JPEG_or_PNG__from_an_imag-8406.html

[教學] Adobe AIR 啟用預設拍攝模式

Android , BlackBerry 和iOS 各有自家的拍攝模式, 可以給用戶拍攝前自行調整影像, 還可儲存於用戶資料夾中.
Adobe AIR 能啟用預設拍攝模式, 使用預設方式進行拍攝, 然後產生BitmapData 按自己需要使用.

範例功能:

• 開啟預設拍攝模式, 用戶確定後, 獲取BitmapData 資料.

範例使用類別說明:

• CameraUI - 使用裝置上的預設攝影機應用程式，擷取靜態影像或視訊
• Loader - 載入 SWF 檔案或影像檔
• BitmapData - 建立任意調整大小的透明或不透明點陣圖影像，而且在執行階段中以各種方式操作
• CameraRoll - 存取系統媒體庫或「相機膠捲」中的影像資料

Step 1: 建立預設相機 (利用CameraUI 產生Camera 物件)

var camera:CameraUI = new CameraUI();
camera.launch(MediaType.IMAGE);

Step 2: 載入拍攝後的資料 (把MediaPromise 傳給Loader 處理)

var mediaPromise:MediaPromise = event.data;
var loader:Loader = new Loader();
loader.loadFilePromise(mediaPromise);

Step 3: 最後, 把資料轉為可用圖像 (轉換成BitmapData 物件)

var loaderInfo:LoaderInfo = event.target as LoaderInfo;
var bitmapData:BitmapData = new BitmapData(loaderInfo.width, loaderInfo.height);
bitmapData.draw(loaderInfo.loader);

大家可以 [下載], 然後一齊使用預設拍攝模式, 製作自己的程式玩玩.

注意事項:

• iOS 預設不會儲存影像, 我們可以利用CameraRoll 存放於系統媒體庫
• 使用Android 電話作測試平台, 請確定android.permission.CAMERA 是開啟

參考資料: http://cookbooks.adobe.com/post_Use_CameraUI_to_save_image_to_CameraRoll_on_iOS-19113.html

Xbox Kinect 與 Flash

自Microsoft 對外開放Kinect SDK, 外國有不少相關研發以Kinect SDK 接收訊號, 配合Adobe Flash 作為用戶介面, 兩者之間可以以下方法聯繫:

AIRKinect
OpenKinect
OpenNI
flKinect

[教學] 在流動電話的Camera + Peer-to-peer (P2P)

由AIR 2.6 開始, 可以在iOS 與Android 之間使用Camera, 我們配合P2P 技術, 可以簡單地模仿Apple 的Facetime 功能, 並且能跨平台使用.

範例製作條件:

1. 兩個能執行Adobe AIR 的電話
2. 一個Flash Media Server 4, 我們可以用Adobe 公開伺服器 (rtmfp://stratus.adobe.com/) 作試驗

範例功能:

• 開啟程式後, 打開相機, 自動分享相機視訊, 雙方能夠在電話互相看見對方.

範例使用類別說明:

• NetConnection - 會在用戶端與伺服器之間建立雙向連線
• NetGroup - 實體代表 RTMFP 群組的成員資格
• NetStream - 會在 NetConnection 上開啟單向串流通道
• Camera - 從用戶端系統的攝影機擷取視訊

Step 1: 建立連線 (NetConnection 物件)

_nc.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
_nc.connect(SERVER+DEVKEY+"/");

Step 2: 建立P2P 群組 (NetGroup 物件)

var gs:GroupSpecifier = new GroupSpecifier("marcoGroup/g041");
gs.postingEnabled = true;
gs.routingEnabled = true;
gs.serverChannelEnabled = true;
var ng:NetGroup = new NetGroup(_nc, gs.groupspecWithAuthorizations());
ng.addEventListener(NetStatusEvent.NET_STATUS, netStatus);

Step 3: 建立串流 (NetStream 物件)

var ns:NetStream = new NetStream(nc ,NetStream.DIRECT_CONNECTIONS);
ns.addEventListener(NetStatusEvent.NET_STATUS,netStatus);
ns.publish("media");

Step 4 : 開啟相機 (Camera 物件)

var camera:Camera = Camera.getCamera();
if (camera){
 var ui:UIComponent = new UIComponent();
 var width:int = 320;
 var video:Video = new Video(width, width);
 camera.setMode(320, 240, 24.);
 camera.setQuality(1638400, 85);
 video.attachCamera(camera);
 ui.name = _nc.nearID;
 ui.height = width;
 ui.addChild(video);
 vGroup.addElement(ui);
}

Step 5: 當相機開啟後, 將相機與串流聯繫

_ns.attachCamera(_camera);

Step 6: 完成設定後 (或有新用戶完成設定), 把串流身分號碼發送給其他用戶

var message:Object = new Object();
message.nearID = nearID;
ng.sendToAllNeighbors(message);

Step 7: 最後, 假如有新用戶發送串流身分號碼, 便以該串流建立視訊影像

var ui:UIComponent = vGroup.getChildByName(nearID) as UIComponent;
var ns:NetStream = new NetStream(nc, nearID);
ns.play("media");
ns.client = this;

var width:int = 320;
var video:Video = new Video(width, width);
ui = new UIComponent();
ui.name = nearID;
ui.addChild(video);
video.attachNetStream(ns);
vGroup.addElement(ui);

只要理解製作流程, 可以簡單在流動電話上, 完成視訊串流.
大家可以 [下載], 然後一齊玩玩視像通訊.

注意事項:

• 使用Android 電話作測試平台, 請確定android.permission.INTERNET 和android.permission.CAMERA 權限是開啟

參考資料: http://www.adobe.com/devnet/flashmediaserver/articles/p2p_apps_cirrus_lccs.html

Flash Player 11 和AIR 3.0 新特性預覽

Flash Player 11 及AIR 3 的新功能

• Stage3D Accelerated Graphics Rendering Stage3D的圖形顯卡加速功能— Stage3D("Molehill") is a new architecture for hardware accelerated graphicsrendering developed by Adobe. Stage3D provides a set of lowlevel APIsthat enable advanced 2D/3D rendering capabilities across screens anddevices (desktop, mobile , and TV). It gives 2D and 3D app and frameworkdevelopers access to high performance GPU hardware acceleration,enabling the creation of new classes of rich, interactive experiences.Note: These pre-release builds include Flash Player and AIR desktopsupport; AIR for Android and iOS support will be enabled in a futurepre-release build.

• Flash Access Content Protection Support for Mobile移動版本的內容訪問保護功能— Flash Access content protection support is now available on mobile devices.

• H.264/AVC Software Encoding for Cameras (desktop)攝像頭H264/AVC的流處理編碼—Stream high quailty video from your computer's camera with highercompression efficiency and industry-wide support, enabling bothimmersive real-time communications (eg, video chat and videoconferencing) and live video broadcasts.

• Native JSON (JavaScript Object Notation) Support JSON數據格式的原生支持—Allows ActionScript developers to take advantage of high performancenative parsing and generation of JSON-formatted data. Developers canintegrate existing data seamlessly into their projects.

• G.711 Audio Compression for Telephony G.711的音頻壓縮編碼— Supportinteroperability with legacy phone systems via the Flash Media Gateway(FMG) and other third-party clients (through the open RTMP protocol)without the need for transcoding.

• Garbage Collection Advice垃圾回收— Provides smoother, moreresponsive user experiences by allowing developers to provide hints(through System.pauseForGCIfCollectionImminent) to optimize garbagecollection scheduling.

• Cubic Bezier Curves貝塞爾曲線— The Graphics.cubicCurveTodrawing API allows developers can easily create complex cubic Bezierswithout requiring custom ActionScript code.

• Secure Random Number Generator安全的隨機數生成— Developers can nowtake advantage of cryptographically secure random number generation tobuild more secure algorithms and protocols.

• Protected HTTP Dynamic Streaming (HDS) and Flash Access Enhancements HTTp動態流和增強的Flash訪問— Protected HTTP Dynamic Streaming (HDS) provides protection forstreaming video across screens while eliminating the deploymentcomplexity of a license server. New Flash Access contentprotection features include key rotation support, V3 license chaining,domain support, and enhanced output protection and device filtering.

• Socket Progress Events Socket傳輸事件— Improve management of datatransfer using the Socket class by providing a new property todetermine the number of bytes remaining in the write buffer and a newevent for when data is being sent to the network layer. The new APIs(Socket. bytesPending, Event.OutputProgressEvent) allow applicationscan easily track progress and provide responsive feedback.

• Native Text Input UI (mobile)移動版本的輸入框UI— Mobile apps can nowtake advantage of the native text input controls on mobile platforms,including platform-specific user interaction behaviors suchas magnification and text selection. Native text controls are availableon Android, BlackBerry Tablet, and iOS operating systems.

• JPEG-XR support JPEG-XR圖像壓縮支持— Flash Player and AIR now includesupport for the JPEG-XR advanced image compression standard(International Standard ISO/IEC 29199-2). The computationallylightweight JPEG-XR format provides more efficient compression thanJPEG, enables both lossy and lossless compression support, and addssupport for alpha channel transparency.

• Enhanced high resolution bitmap support bitmap更高像素的處理—BitmapData objects are no longer limited to a maximum resolution of 16megapixels (16,777,215 pixels), and maximum bitmap width/height is nolonger limited to 8,191 pixels, enabling the development of apps thatutilize very large bitmaps.

• High efficiency SWF compression support SWF的高壓縮比打包—Developers can now take advantage of LZMA compression for their SWFfiles. LZMA compression can reduce SWF size by up to 40%, enabling usersto benefit from richer experiences with shorter download times andreduced bandwidth consumption. Use Tinic's tool or a custom one to compress your SWF's.

• DisplayObjectContainer.removeChildren and MovieClip.isPlaying — DisplayObjectContainer now implements a removeChildren API allowingdevelopers to quickly remove all of a container's children using asingle API.

針對Flash Player 11的新功能

• Native 64-bit Support (Flash Player desktop)原生64位支持— Take advantage of native support for 64-bit operating systems and 64-bit web browsers on Linux, Mac OS, and Windows.
• Asynchronous Bitmap Decoding (new for Flash Player)異步Bitmap解碼— Improve app responsiveness and deliver smoother animation by decodingimages on initial load instead of on demand. Images are cached asneeded.
• TLS Secure Sockets Support (new for Flash Player)安全的Socket通信支持— Enables secure communications for client/server applications.

針對AIR 3的新特性

• Stage Video Hardware Acceleration (new for AIR)視頻硬件加速— Leverage hardware acceleration of the entire video pipeline to deliverefficient, best-in-class high-definition (HD) video playbackexperiences. Decrease processor usage and enable smoother video, reducedmemory usage, and higher fidelity on mobile*, desktop, and TV devices(*supported on Android 3.1, BlackBerry Tablet OS, and iOS).

資料來源: http://www.bytearray.org/?p=3216

[教學] StageWebView 在Adobe AIR 中瀏覽網頁

StageWebView 類別會在舞台檢視連接埠中顯示 HTML 內容。

StageWebView 類別提供簡單方法，在不支援 HTMLLoader 類別的裝置上顯示 HTML 內容。除了 StageWebView 類別本身的方法與屬性之外，此類別不提供 ActionScript 與 HTML 內容之間的互動。因此，(例如) 將無法在 ActionScript 與 JavaScript 之間傳送值或呼叫函數。

使用方法:

var myWebView:StageWebView = new StageWebView();
    myWebView.stage = this.stage;
    myWebView.loadURL("http://google.com.hk/");
    myWebView.viewPort = new Rectangle(0,0,stage.stageWidth,stage.stageHeight);

ActionScript 與 HTML 內容之間的互動方法:
雖然官方說明ActionScript 與HTML 之間不能互動, 事實上這是可以解決的.

由ActionScript 呼叫Javascript: (ActionScript 程序)

myWebView.loadURL("javascript:myJSFunctionName()");

由Javascript 呼叫ActionScript: (Javascript 程序)

document.location = JSON.stringify(
{width:document.body.scrollWidth, height:document.body.scrollHeight});

在ActionScript 處理Javascript 時的事件 (ActionScript 程序)

myWebView.addEventListener( LocationChangeEvent.LOCATION_CHANGING,
  handleLocationChanging );
 
function handleLocationChanging( event:LocationChangeEvent ):void
{
  event.preventDefault();
  var data:Object = JSON.decode( event.location );
  trace( "Width: " + data.width + ", Height: " + data.height );
}

官方資料:
http://help.adobe.com/zh_TW/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html

參考資料:
http://voisen.org/blog/2010/10/making-the-most-of-stagewebview/