跳到主要內容

關於Flex,AIR,Flartoolkit

Flash:
最早由Macromedia公司所創立的多媒體播放技術
現已被Adobe所收購,
維基百科的說明:
http://zh.wikipedia.org/w/index.php?title=Adobe_Flash&variant=zh-tw
擁有時間軸的製作方法, 比較適合用來開發活動性質的網站。
http://thefwa.com裡的商業網站, 大多都是使用Flash來開發。
可使用ActionScript2.0或是ActionScript3.0, 是目最普級率最高的web技術。
開發工具需要使用Adobe Flash Professional軟體。
目前的版本為:FlashPlayer10, 增加3D和骨架的功能。
Flash一詞同時代表是web的多媒體技術, 同時也是代表開發工具。

Flex:
維基百科的說明:
http://zh.wikipedia.org/w/index.php?title=Adobe_Flex&variant=zh-tw
和Flash一樣, 最終產出的格式皆為swf檔
只要使用者端的瀏覽器有加裝Flash Player皆可觀賞。
和Flash製作上最大的差別, Flex比較適合用來發開系統性的專案
開發工具並沒有時間軸的觀念,
但有大量的組件可以使用, 且可搭配Flex專屬的css寫法來快速置換樣式。
除了是使用ActionScript3.0外, 也搭配了專屬的mxml格式。
mxml是以xml為基底, 使用表籤式語法。
製做上有點類似html+Javascript的寫法,
開發工具:Adobe Flex Builder
或是可選擇免費的開發工具組合:FlashDevelop+FlexSDK
但相對就缺少了視覺元件的開發。
Flex一詞只是個開發工具或是技術, 最終產出的格式皆是.swf。

AIR
(AIR = Adobe Integrated Runtime)
維基百科的說明:
http://zh.wikipedia.org/w/index.php?title=Adobe_AIR&variant=zh-tw
是一種桌面應用程式的開發技術。
swf的格式是應用於web上, 無法取存使用者的任何資訊
好比要開發一個常駐應用程式, 需要能夠存取使用者端的檔案, 就需要用到AIR
開發工具可使用Flash或是Flex Builder
一樣是使用ActionScript3.0, 只是將發怖的格式由.swf轉成.air
使用者下載.air檔, 就像安裝程式一樣。
要安裝.air程式前, 使用者端比需先安裝過AIR的runtime
就像要看.swf格式, 瀏覽器需要先安裝過Flash Player
目前的版本為:AIR 1.5

Papervision3D
早期Flash在3D領域的應用相對缺乏, 大多只能靠3D軟體輸出序列圖片, web2.0的時代, 強調與使用者互動, 序列圖片只能單向播放, 無法即時產生互動。
但是如果3D技術能在Flash Player中播放, 同時體積小, 與使用者互動性能力強, 效果逼真的3D web應用程式, 無疑將給使用者帶來全新的體驗。
Papervision3D簡稱PV3D。
他不是軟體, 也不是一種新的程式語言, 是一套基於Flash ActionScript的開源技術, 目的在於實現更加炫麗、高互動性的強大Flash 3D Web應用程式。
最早的PV3D測試版是由2007年7月7日發佈的, 開發者是由一群核心成員不斷的開發和維護。
開發PV3D web應用程式只需要使用Flash ActionScript3.0搭配PV3D的類別檔即可開發,
而客戶端只需要安裝Adobe Flash Player9以上的版本即可。
Flash Player9之前的版本, 所有看的到的3D效果皆是由數學公式運算出來, PV3D也不例外。
PV3D提供了許多方便的物件與方法, 幫我們處理好複雜的數學運算,
讓我們可以很方便的在FLASH裡模擬 3D世界。
相對的, PV3D的運算, 當遇到太複雜的模型或是大量的3D物件, 會效耗許多CPU使用率,
所以模型的結點數和物件數量的控管就相當的重要。
Flash本身對點陣圖的處理就有許多的美中不足,只要點陣圖有縮放或是旋轉時,
都會產生距齒狀的問題,PV3D也不例外, 但可以開啟圖片平滑化的功能。
PV3D在製作時, 可以朝互動性和趣味性來發想應用, 質感上的瑕疵可以考慮一些美工手法來補強。
PV3D的官方網站:http://blog.papervision3d.org/
目前的版本為:PV3D2.0 Beta , PV3D3.0 Alpha

Flartoolkit
是一種使用webcam的虛擬實境技術。
最早是由Java所開發的Artoolkit技術, 日本一位設計師將其原理轉換到Flash技術上。
使用者只需要一個webcam,並把一個樣式版列印出來, 對著webcame
即可在畫面上出現虛擬的3D物件。
該技術需要搭配PV3D一起使用
Flash技術本身並不支援硬體加速, 所有的畫面都是由使用者端的CPU運算出來
該技術會受到使用者端的CPU等級, 還有環境而有所引響。
Demo影片:
http://milkmidi.blogspot.com/search/label/FLARToolKit

silverlight
Micosoft所推出的web多媒體技術, 程現的效果和flash是一樣的
只是是不同家公司所推的的產品
在製作上, 有類似和Flash的時間軸觀念, 也有類似於Flex的mxml表籤語法
silverlight叫做xaml。
而程式語言則可使用JavaScript,C#或是VB來開發。
目前的版本為silverlight2.0
和Flash比較。

優:圖片的處理上較Flash佳, 不會產生嚴重的距齒
影片的品質也比flash來的好一些。
缺:不缺備3D的功能, 但有類似PV3D的類別技術, 稱為kit3D。
開發者需學習Blend發開工具, 但因為Flash使用率太高, 使的設計師有些難以進入。
http://www.shinedraw.com
該作者把應用範例同時寫了flash和silverlight版, 讓網友來決定那一種技術比較好。

轉貼文章請注名出處:http://milkmidi.blogspot.com

留言

Edward寫道…
作者已經移除這則留言。
匿名表示…
Flartoolkit是不是有版權問題
我看日本官網說什麼雪碧公司違反什麼..
日文看不太懂.....
milkmidi寫道…
是的, 在商業網站上是需要受權的費用
匿名表示…
老師您好,有個愚蠢問題想請教,我在FLEX中建立as,as 是 extends MovieClip,這個as中有個按鈕,當按鈕按下以後會產生一小段動畫,想請教老師,當動畫完成時,能否呼叫MXML中的function?
或是在MXML中,是否能針對as中的按鈕作監聽?
匿名表示…
奶綠老師您好:

請問要用到Android手機上面的camera和microphone是不是一定要將Flex的程式轉成AIR才能抓到手機上的麥克風和CAMERA?? 因為我現在有個Web Flash的application, 我嘗試讓android手機透過瀏覽器加flash player 10.2去跑這個web application,剛載入的效率不是很好==",但效率目前不是重點,重點是我需要用到手機的麥克風和camera,不過抓不到.....(在電腦上面用瀏覽器都正常,麥克風和視訊功能都ok),手機的喇叭聽得到對方傳過來的聲音,但手機端的聲音就是沒有送出去,camera的影像也是, 所以想請問奶綠老師,我是不是一定要把這個web application轉成AIR程式才能存取手機上的麥克風和CAMERA???
milkmidi寫道…
Camera 我確定在 Android 上,一定要轉成 AIR app 才可以使用。
我猜 Microphone 應該也是

這個網誌中的熱門文章

webpack2 入門實戰 1

大家好,我是奶綠茶
前端戰場不再只是寫寫 js / css , 各種框架、前處理工具百花齊放
身為前端工程師,不只要把程式寫完,還要寫好
老師說:選對好工具,事情就完成一半
如果你還在一隻 JS 打完全部程式,一隻 css 寫所有的 style
每次存檔還在手動 reload 網頁, 圖片壓 K 壓到不要不要的
透過奶綠伯的系列教學,讓你了解 webpack2 帶來的優勢
學會 webpack 可能不會加薪,但至少可以準時下班(誤)
1. 安裝 nodejs
請參考 gulp 安裝編

2. 安裝 global webpack , 筆者使用的是 2.2.1 版本
npm i webpack@2.2.1 -g
3. 在專案的根目錄放一隻 webpack.config.js
entry:你的主 js 進入點
output.filename:webpack 打包後的檔名
output.path:webpack 打包後的路徑
var path = require('path'); module.exports = { entry: './src/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
4. require , module.exports
現在前端都 module 化
可以每個獨立的功能都寫成單一的 js module
除了好管理,也方便讓團隊使用
寫一隻 module_exports_util.js
每隻經過 webpack 打包的 js , 都會是獨立的檔案
所以變數都是私有的, 外部成員都無法得到
在這個 module 裡,我們想開放二個函式
add , getName
所以在最後的 module.exports 指定
筆記加入 jsdoc , 為了方便在開發時,能夠有型別的提示

var name = "milkmidi"; /** * @param {number} num1 * @param {number} num2 * @return {number} */ function ad…

Android完全入門篇-01 安裝SDK與裝置USBDriver

大家好,我是奶綠茶
筆者以 Windows 系統來介紹安裝
1. 下載 Android SDK
http://developer.android.com/sdk/index.html
有分 32 位元和 64 位元的版本
為了教學方便,筆者將檔案放置在 D:\ 下
壓開後會有
eclipse資料夾:Eclipse程式碼編譯器
sdk:Android 開發用的 SDK
SDK Manager.exe:sdk管理用的軟體


2. 開啟手機的"開發人員選項"
部份手機該選項被隱藏起來了
要開啟的話,點選"關於手機"
接著連點"版本號碼"七次,就會重新開啟該功能
接著再開啟"USB偵錯"功能
接上你的 USB 線後
這樣你的電腦才能透過 USB 線來偵錯手機的資訊
3. 為裝置安裝 adb usb driver
因為各家廠牌的 Driver 都不同也不通用,所以需要自行 Google 找 Driver
可以用"XXX廠牌 型號 adb usb driver"關鍵字來找
例:HTC Newone adb usb driver
接著找到 我的電腦 / 內容


裝置管理員

會看到一個金嘆號未知的裝置, 按右鍵更新驅動程式軟體

選擇"瀏覽電腦上的驅動程式軟體"

完成後就會看到裝置啟動,並出現 XXX Android ADB Interface

4.測試是否連接成功
進入到第一步下載的 sdk 資料夾裡
D:\adt-bundle-windows-x86_64-20131030\sdk
然後在 platform-tools 資料夾上按住 Shift 鍵,然後再按滑鼠右鍵
選擇"在此處開啟命令視窗"
(此功能只有 Win7 之後的版本才支援, XP使用者就要自行輸入 dos 指令進入到資料夾)
輸入 adb devices
如果看到一串數字,並顯示 device 就表示連線成功
5.新增環境變數(選擇性設定)
為了方便的使用 adb 指令
可以為 windows 設定變數
開啟我的電腦 / 內容 / 左邊的"進階系統設定"
點選下方 環境變數

下方系統變數,找到 Path的選項,按下編輯

在變數值欄位的最後方加入
;D:\adt-b…

webpack2 入門實戰 3 scss,html,file-loader

大家好,我是奶綠茶
上一篇介紹了 webpack 的核心功能 loader
這篇再來補強各種常用的 loader
css-loader:解悉 css 檔
extract-loader:這個有點難翻,下面會介紹
file-loader:存成實體的檔案, 如圖片
html-loader:解悉 html 檔
sass-loader:解悉 scss 檔
url-loader:解悉圖片路徑
webpack.config.js
module.exports = { resolveLoader: { // 所有用到的 loader, -loader 可以不用打 moduleExtensions: [ "-loader" ], }, resolve: { // 在 require 檔案, 如果不想寫完整的路徑 // 可以加入這些目錄, 讓 webpack 自動尋找對的檔案 // 請注意我們加入了 src/img 路徑,後面會再介紹到 modules: [ path.resolve( 'src/html' ), path.resolve( 'src/img' ), path.resolve( 'src/css' ), path.resolve( 'src/js' ), path.resolve( "node_modules"), ], // 在 require 時可以不用打副檔名 extensions: [ ".js", ".scss" ] }, } 再來就是 loader 的介紹
scss
在這要做多組合的應用
先將 .scss 透過 scss-loader 轉換, 並產生 sourceMap 檔
再過 css-loader
最後再過 style-loader
{ test: /\.scss$/, // 多個 loader 組合, 可寫成一行,或…