2007/12/25

ColorMatrixFilter Tool for AS3.0



這個小工具主要是方便以色相、彩度、明度、對比等方式調整顏色,並把結果所需的ColorMatrixFilter Code產生出來,方便懶人預覽使用。

>>由此去[ColorMatrixFilter Tool for AS3.0]


產生出來的Code是for AS3.0的,至於AS2版的我就沒打算要做了。

另外說明一下,產生出來的code有兩種,一種是使用了gskinner的ColorMatrix Class,另一種是沒有使用的。可擇一採用。

gskinner的ColorMatrix Class非常方便,建議多多使用
gskinner's ColorMatrix Class Flash8版
Quasimondo 也做過類似的範例及原始檔 (for Flash8)

另外關於HSV轉RGB的一些參考資料:
色彩轉換演算法(RGB to HSV or HSV to RGB)
HSL 色彩空間on維基百科

2007/12/12

Flash 美術人員或新手常犯的錯誤

前言:

本篇主要是站在Flash程式人員的角度,來提醒Flash美術人員或初學者一些注意事項,因為往往這些錯誤會造成後續程式開發很多不必要的麻煩,嚴重者更會使團隊戰力無法有效發揮。



 

筆者從事Flash相關工作,算算也有7~8年左右,最早接觸大約是1998年開始,早期主要從事美術、動畫方面的工作,後期則專注在程式開發部份,不過儘管如此,這中間仍常需包辦部份美術的工作內容,畢竟Flash是程式+美術高度整合的技術,兩者還共用同一份檔案開發 (.fla),且許多Flash的創意表現手法便是程式+美術的巧妙搭配而成。

 

提到這些,主要是想告訴Flash美術人員或初學者,這篇文章不是單純的程式設計師站在不同立場胡亂靠北而已,而是將筆者過去經驗中常見的一些錯誤整理出來,並說明原因及改進方式。這裏面包括技術上的錯誤及觀念上的錯誤兩方面。技術上的錯誤較為簡單,大多只是軟體熟悉度不夠造成,看過一次大概就能知道了;而觀念上的錯誤,則可能需要時間適應才能轉換,不過請注意一點,本文所宣導的觀念,主要是筆者個人對Flash這項技術的主觀看法,若有任何不同意之處,歡迎留言指教。

 

拉Tween時常犯的錯

.萬惡的Tween symbol(Tween 1~Tween N)

image

中文版為"補間元件",這是一種在不正常狀況下添加tween效果的不良產物。

Tween symbol有啥不好?這些都是多餘的symbol,只會造成檔案大小的浪費,同時也沒有利用到symbol的便利性。

.正常的tween應該是:
    -motion tween兩側的keyframe,必需是同一個symble,且一個keyframe上只能有一個symbol
    -若keyframe上不是symbol,而是單純的shape的話,則只能用shape tween(反之亦然)
    -只要不符合上述兩種條件,鐵定會生出Tween symbol

.易出現Tween symbol狀況
    -多個symbol or shape放在同一個layer,又不小心拉了motion tween
    -誤認該死的Drawing Object為symbol
    -誤認該死的Group為symbol
    -白目(忘記以上說的任一事項)

 

.該死的虛線tween line

image 

虛線表示無效的tween line,這必然表示你有做錯之處,而虛線的tween line並不會有嚴重的影響,頂多是沒有動畫效果而已。不過當發現虛線tween line後,若沒有要做tween效果的話,也請最好把tween設定remove掉。(右鍵Remove Tween)

以下為容易出現虛線tween line的狀況:
   -有起點無終點或有終點無起點
   -在symbol上設shape tween
   -在shape上設了motion tween
   -白目(忘了以上說的任一事項)
   -解法:砍掉重練(刪掉或重做該段tween)

 

.錯誤的motion tween

wrong
    -沒有虛線、也沒有tween symbol,但動起來就是怪怪的,特徵是最後一格會跳一下,如同上面這張gif。
    -原因一:起點keyframe及終點keyframe,symbol被設成不同type,如movie clip , button , graphic
    -原因二:起點與終點,center piont被設在不同處
    -解法:不要白目犯上述任一情事。

 

一些該死的不良習慣
.多用Symbol,少用group或drawing object

image 

    -原則上,只要會出現一次以上的,就值得做成Symbol,善用Symbol才能發揮Flash的長處。

    -做group或drawing object,只在編輯時有一些便利性,對檔案大小絕無幫助,也絕對不要拿來做tween

註:做group是指選一堆東西後按Ctrl+g的群組功能)

註:drawing object是Flash8之後出現的無聊功能,就是上圖游標所選的icon,此功能在brush, pencil, 圓形, 方形, 多邊型選項中都會出現,沒特別需求的話,就把它關閉吧。以brush來說,正常時候,畫完一個圖形後,按Ctrl+A做select all,此時brush後的圖案應會出現白網點類似反白效果,若是被設drawing object的話,則會在四周出現藍色線框,就如同轉為symbol一般,但這是假的,不要被騙。

 

.Library的整理

image

    -請不要讓你的同伴在Library中看到Symbol 101這種可怕的東西。這表示所有symbol完全沒有做命名動作。

image 

    -無意義的命名,也是一樣可怕。

    -盡量取有意義的名字,就算英文拼不出來,好歹可以用中文。

    -除非你只有一個人在做這份.fla,否則都請好好為library中的symbol命名,因為你的工作伙伴很可能需要在這symbol 101中去添加actionscript。

    -有意義的命名,再加上資料夾妥善分類,那這個library就算是最妥善的處理了。

    -最後是記得把不用的symbol從library中刪除,多餘的東西只會讓檔案愈來愈大。

 

學習Flash的一些經驗談

對美術人員來說,我把Flash的功能分成三大塊:繪圖、動畫及程式。繪圖的部份在此就不多探討,因為Flash中提供的繪圖功具真的少的可憐,就一些基本的向量繪圖能力而已,且從Flash1發展至今,除了在Flash8時加入filter外,並無很大的長進。

(BTW,Flash10預計會加入IK關節功能,期待到時這項功能帶給大家的便利性)

 

.動畫功能

單純就Flash本身的動畫功能,其實也不多,除了frame by frame 之外,就是motion tween, shape tween兩種,其中shape tween使用機會也不高。另外是mask layer及motion guide兩樣輔助功能,再來似乎就沒什麼可以談論了。因此Flash動畫要做得好,倒不是在軟體的熟悉度,而是個人對"動態"的領悟程度。

例如一個自由落體的動畫,該怎麼動?用什麼樣的速度落下?這速度會怎麼樣的變化?而撞擊地面後,會有什麼反應?外觀會如何地壓縮?又如何地擴張?…等。這些都是"動態"的特徵。就如同畫素描一樣,只要能把主要特徵都突顯出來,觀眾就會覺得你畫得像。

當我們把動態特徵都掌握後,剩下的只是用Flash的動畫工具呈現出來而已。

而動態特徵的掌握,我個人的建議是多觀察多分析。

例如要做自由落體動畫,那就去觀察實際的自由落體運動;要做一個人走路的樣子,那就去觀察一個人走路的影片;要想做類似MTV電視台裏那種酷炫的轉場效果,那就多去觀察那些效果的變動邏輯。重覆觀察到一個程度後,相信就能分析出這裏面是由哪些元素構成,且又包含了哪些移動邏輯。

再來就是把這些條件一一實現即可。

不過隨著FLV功能的出現及網路頻寬的擴大,目前許多Flash設計都直接用FLV來處理複雜的動畫,因此,「在Flash裏單純做動畫」這種創作,應該會隨之減少。然而Flash內的動畫製作,則會隨著"互動"功能而繼續發展,並且把影片(flv)視為整個作品的一個元件來處理,以方便構思更大更宏觀的多媒體互動設計作品。

 

.程式功能

"互動性"是Flash很重要的核心價值,而"互動"需仰賴Actionscript來實現。自Flash5之後便大力發展Actionscript的功能,每一次改版都為Actionscript注入更強大的力量。所以就我個人的觀點,如果學Flash而沒學到一點點Actionscript寫作技術的話,那不如去玩其他更專業的動畫or後製軟體。

而美術人員在學習AS最大的障礙往往來自於對"程式"兩個字的排斥,認為那不該是他們要學習的事物。那麼我很想問:「是誰設定了你的學習範圍?」「是誰規定美術人員就是photoshop+illustrator這樣而已?」

回想電腦繪圖剛起步的年代,是不是也有一群習慣拿畫筆紙本作業的設計師哭夭說:「為什麼我要學電腦?」,然而現在哪個美術人員敢不懂電腦呢?

 

而在互動設計或動態UI這塊市場,若想做個突出的設計師,我個人認為程式邏輯就是必備的技術,這也是這個領域的美術人員與其他領域美術人員最大的差異。換個直接的說法,我認為沒有互動程式能力,或基本邏輯觀念的美術人員,是不能成為一個好的互動設計師。也許有人會說:「這樣講是不是太誇張了,我認識許多不懂程式,也沒有邏輯觀念的美術,他們也正從事著互動設計的工作,不也做得好好的嗎?」是的沒錯,他們仍然可以做這份工作,也不會把事情搞砸,但我想說的是,他們不會是"出色"的互動設計師。

 

好吧,也許前面說的太慘忍了,換個正面型的激勵方式。不久前曾聽一個朋友說過:「你就不要把它當做在寫程式,就當作這是你的作品的一部份,你只是單純地想實現它。」秉持這個想法,便沒有學不會的東西。

 

另外,我也常聽到一種狀況「我沒有排斥程式,我一直很想學,但就是一直學不會」。如果說沒有排斥,卻又一直學不會,那麼我想可能是「不夠用心」。怎麼說,一個用心在學動態技術的人,常常是無時無刻都在想如何做出他想做的作品,不管是吃飯、上廁所或是臨睡前,只要一有時間,就會不停地去思考如何呈現他想要的效果,這種狀態可能會持續好幾天或好幾個月,直到他找到了方法為止。你可以回想看看是否有過這樣的經驗。

 

最後,給初學程式的美術人員一點建議:分析、邏輯及創意

不論任何時候,都該善用你的分析能力。當你在看任何互動作品,即便不是Flash做的,都應習慣性地分析它裏面的互動原則,進而才有辦法窺視他的製作方式。

當分析出所需的各種功能或條件後,再以邏輯性的思考,把實作的方式建構出來。

而最後的創意,往往就是決勝之處。書本上或範例上的教學,只能讓你做出大家都會的效果,一旦想要做出別人無法做出的,或是沒人見過的效果,則需靠一點創意才能辦到。這過程有點像在變魔術,如果我們只用一般的做法,一般的寫法,那魔術師是不可能在舞台上切割真人的。這中間我們確信魔術師不是超能力者,也確信他沒有真的把人切開,但他確實弄出了把人切開"的樣子"。Flash的互動設計常會遇到這樣的情形,設計得當,就會如同變魔術一般,在視覺上看起來像即可,觀眾並不在意背後的實作方式如何。而這中間的技巧,便是需要許多創意堆積出來。

 

後語

說實話,本來後面還有著一大段,標題是:「要命的錯誤觀念」,文字也打了一半左右了,但喝杯水冷靜看了一下,發現愈寫愈像幹醮文,因此決定把該段刪除。

總之,寫這篇是希望能幫到需要幫忙的人,「美術人該學一點程式,程式人也該了解一些美學」,這是我對互動設計這塊領域的信念,即便是將來Flash不再流行,我仍相信只要是涉及視覺互動設計的從業人員,都應該是這樣的姿態來做事。


2007/12/11

au design project

這好像是半年前的舊聞了,今天在翻舊資料時找到,順手把相關影片整理起來










2007/10/24

[新聞稿] RiS - Rich Internet Solutions - 全球華人豐富式網頁技術社群成立

開站新聞稿!

各位朋友大家好,我是Bing (劉仲濱),真的非常高興為全球華人在此宣佈有這社群出現。
首先感謝好友nono(不斷支持我)、趙英傑、Luar、阿修、奚江華、朱仲傑、凱爾、邦邦、小薛等的Blog文章相繼匯入,
豐富起文章內容,今後內容也會同步更新,擴展,以獲得多更有用資訊來呈現給各位。


起源:

什麼是感動? 感覺又是什麼? 感受又如何表達?

2002年「RIA」一詞的誕生,國內或整個亞洲似乎還在慢慢停留,靜止走動,所幸,從全球Web 2.0浪潮催促下,有了Ajax靈活運用,加上微軟的Expressoin、Sliverlight等大規模造勢,將RIA化為無限可能,又如Adobe 不斷為RIA跨平台裝置使用不斷創新、演進,整體地加速大環境上的人性使用。又Google別具用心地為人類發展的技術應用、Yahoo改革入口應用的里程碑,對人們來說,這己不是功能好就好,而要能快樂地操作,簡單易用!

網路各項應用日以萬變,Web X.0的時代來臨,使我從過去經營社群的經驗,深刻了解到,社群己不祗是社群,而是隨手可得、一路相伴您的心靈雞湯。從去年開始,許多身旁好朋友一直希望我能為這RiS平台加點東西,因為似乎少了些什麼,對,就是「互動」,不是不想要,也不是不能要,更不是不能動,種種因素加上整體環境氣氛使得還沒有充分時機,如今,時候到了,我想為全球所有設計、開發朋友說一句內心最真的一句話,「專屬的RIA社群大門己為您而開」!


適合族群:(不分國藉、地區性、男女老少全球角落都歡迎)

新手:任何對網頁設計、美術、動畫介面、程式資料庫等有興趣的朋友,這都是您最好的學習交流環境。

設計:平面或3D美術人員、多媒體製作、互動界面等,都歡迎您踏入這大家園,因為您是視覺上最關鍵的靈魂人物。

程式:不僅是傳統的動態程式,祗要您是新一代網頁開發人員,程式互動朋友,相信這會是您最快找到的捷徑。

產業:各企業、教育、政府、非營利機關、各式各樣團體組織,祗要您在Web甚至桌面應用都可充份來這獲取您所需的資源。


系統說明:

我們用的是vBulletin 3.6.8永久合法版權,為什麼選它,因為它不僅功能滿足、可不斷擴充,系統安全性與各項效能可說是目前全球市場上最Top的Forum系統,有著原廠在做平台服務加持,所以,您可以放心地去使用。


原入口還是繼續耕耘,文章會同步於此平台。http://j2eemx.com

網址永久不變,現在就來!http://forum.j2eemx.com

Best Regards.
Bing (劉仲濱.)
2007年10月15日.

2007/10/3

MAX 2007 相關蒐集

沒錢去美國參加MAX且今年並沒有台灣MAX的狀況下,就上網蒐集一下唄。還滿多有趣的東西的。

Luar:
[MAX2007日本] MAX2007第2天速記
[MAX2007日本] MAX2007第1天速記

Peter Elst:
Flash on C/C++ Sneak Peek(Video)
Flash "Next" Sneak Peek(Video)
Flex Applications on Linux Sneak Peek(Video)
Seam Carving Sneak Peek(Video)
Adobe MAX Chicago - Sneak Peeks
Adobe MAX Chicago - Thermo

Flash Guru:
Astro Sneak Peek

Aral Balkan:
Video: Thermo Sneak Peek at Adobe MAX Day 2 Keynote
Video: Flash Player 10 (Astro) Sneak Peek at MAX Chicago 2007 Keynote
Adobe MAX Chicago Keynote
Video: Rediscovering fun at Adobe MAX

Rob Brooks-Bilson
Adobe MAX 2007 - Sneak Peeks Part 3
Adobe MAX 2007 - Sneak Peeks Part 2 (ColdFusion Offline Apps Here!)
Adobe MAX 2007 - Sneak Peeks Part 1

Web and Video:
Online Ads that attract session at MAX 2007
Introduction to After Effects CS3 session at MAX 2007
Character animation with Flash session at MAX 2007
MAX 2007 Sneak Peeks semi-live blogging (stupid wireless vs battery)
Flash CS3 and Soundbooth CS3 : designing content with great audio session at MAX 2007
Liveblogging MAX 2007 Day 2 General session keynote
Advanced video encoding session at MAX 2007
Interactive video with After Effects and Flash - session at MAX 2007
Liveblogging MAX 2007 Day 1 General Session keynote

Justin:
Astro at MAX 2007

Adobe:
Astro
Thermo
AIF Toolkit
Hydra Filter Gallery
AIF Toolkit:Tutorial

d.CAT:
Max 2007 相關新聞匯整 3
Max 2007 相關新聞匯整 2
Max 2007 相關新聞匯整 1

其他:
A placed called CoCoMo...
Use AE+Flash to create interactive video(完整的簡報錄影)
Director 11 Sneak Preview
Offical Adobe MAX Twitter account
Flickr Adobe MAX 2007 Group


2007/8/28

Pixel Fly



其實本來是要試試Tweener這個非官方Class的,玩一玩後竟玩起pixel 特效了。意外之下就出現了這個作品。
>>由此去 Pixel Fly

[註]SWF中出現的任何畫面、按鈕純屬虛構,請安心服用。
[驚]意外發現在Player 9,0,60,184(MovieStar)下播放 會有Redraw不完全的狀況,可能是Player的bug,換回9,0,47或45版就OK。

本範例幾個重點:
  • BitmapData/Bitmap
  • getPixel32/setPixel32
  • ColorTransform
  • alphaMultiplier

熟悉這幾個大概就ok了!!

Code 贈有緣人:

2007/8/14

twitter API

試了一下twitter API,twitter API本身並不複雜,至少比起flickr來說簡單很多。倒是多花了些時間在熟悉AS3.0及常當機的FlashCS3。範例及source code如下:

效果如下


Main.as內容如下

2007/8/10

Flickr API Library試用

今天練習一下Adobe Labs上的Flickr API Library。雖不是很難的東西,但仍在此做些筆記。

效果如下,點擊縮圖可開啟相片連結:


SourceCode如下,相關說明寫在註解裏:

[註] 這裏取的photo url是我修改過官方class得來的,請參考前一篇

AS3.0 Flickr API Library 修改

今早發現Adobe Labs 上的Flickr API Library並沒有支援新的URL格式,也就是沒有抓farm-id值,因此動手修改了一下。
改過的檔案如下:
Photo.as
MethodGroupHelper.as

覆蓋掉舊檔後,Photo便會多一個名為farmId的屬性,才能組出符合目前格式的URL。

2007/8/1

Flash CS3的autoformat bug探討

自從使用CS3以來,就是一整個不順暢,多了很多花俏不實用的東西不說,連原本正常方便的東西竟也變得2266了。今天就來研究了一下autoformat的bug,想找出有無避免出現的良方。結果徹底的良方並沒找到,倒是發現不少奇觀。

我發現主要問題會出現在自定function 時,如下

通常這樣寫完,我會習慣性按一下auto format,讓他產生分號及縮排,但如此一按竟會出現錯誤訊號
Error with autoformat near line: var a=0


解法目前發現有幾種,例如只要我在var a=0後面,自己多打一個分號,就可以通過了;但話說回來,分號都自己打的話,就失去我想用autoformat的目的了。
另發現一個怪解法

注意,我在最後面加了一行comment,竟也就變OK了,不過autoformat出來的結果也有點不同,會變如下

看到了嗎?第一行最後多了個分號,實際執行並不影響(?),但多了個分號總是很怪。

最佳解法是自訂function 要改用下列方式寫

先寫"function"關鍵字的寫法,這種方式是我目前測試為止較不會遇到autoformat問題的。

最後跟各位分享一個最誇張的bug,請寫以下的code:

注意,第一行是空的,myFunc是從第二行開始寫,猜猜看按下 autoformat會如何?

竟然是會把所有code變不見,夠神奇吧!

2007/7/31

收到 Essential ActionScript 3.0 了


上週三跟Amazon訂的Essential ActionScript 3.0 ,今天收到了,合運費約14xx台幣
感謝邦邦大人幫忙代訂。

Foundation Flash Applications for Mobile Devices閱讀筆記

Foundation Flash Applications for Mobile Devices的圖像
記一下讀這本書的筆記
[註]感謝邦邦借書之恩

CH1. 簡介Flash、Flash Lite歷史及相關應用發展
CH2. 大致介紹了一下一些Device的歷史、名詞、發展、平台、開發限制等
Note: 基本上1,2章的知識若已了解,可直接跳過,若沒讀過或沒概念,建議還是花點時間瀏覽一遍。


CH3. FlashIDE介紹,device profile設置,FlashLite1.x語法介紹
Note: 環境設置的部份基本上可以不用看,因為書中是以MX2004來介紹,就目前CS3或將來版本,差異頗大。
Note: FlashLite1.x語法的部份,對早期語法不熟的人值得一看,且目前應該已找不到Flash4時代的語法書了吧。


CH4. Flash Lite2.x重點介紹
Note: 這裏其實不是很重要,原因是AS2.0的語法在許多書都有,而這裏介紹的並沒有太多的不同,章節最後講FL2.1新功能,但也只是淺淺帶過。


CH5. Text及font embed、接Key訊號的方法、FL1.1CDK中的Component、1.x及2.x接外部資料的方法、一些主要的Fscommand2
Note:這章就2.x的部份我還是覺得不是很重要,重要仍是在1.x的語法,畢竟目前會1.x語法的人應該是少數。


CH6. 講Game開發,重點在collision detect, collision reactions,之後補充了一些圖形、聲音、影片設置技巧
Note: 2.x的collision只以hitTest帶過,其他是用1.x來實作各種類型的collision detect。collision相關原理要看Flash遊戲開發那本會較為詳細,倒是這裏以1.x實作的過程,是其他書藉所沒有的。


CH7.介紹FlashLite各種不同的content type,如screensaver, wallpaper等等,也說明這些type目前應用在哪些地區上,其中還帶了一點點的範例實作。
Note:這章大致瀏覽即可,screensaver, wallpaper做起來並不難,而各種content type等介紹,如同CH1,CH2一樣,大致瞭解一遍即可。


CH8.聲音相關
Note:對FlashLite 會遇到的各種跟Sound的問題,這裏幾乎都有介紹到,算是詳細。


CH9.影片相關
Note:同上一章,也對目前FlashLite跟Video的部份做了詳細介紹,不過我認為到FlashLite2.x為止,對Video支援度都還太差,說實在會真的用到video的機會仍不大,可能等3.0支援.FLV時再來研究會比較快。


CH10. 介紹如何做出超出FlashLite能力所及的事,例如連S60、WindowsMobile的app,在S60上連Python,或是用FL2.1才有的XMLSocket連iTune等
Note: 我想這章是本書除了1.x語法外,最有價值的部份。目前還沒看完,下次找時間把這裏的範例做一做。


CH11.發佈相關。例如WML、XHTML Mobile的寫法或是SWF2SIS這種工具,進而也討論到FlashCast及相關發展
Note: 參考資料,需用時再來讀


CH12.未來與展望
Note:跳過


附錄 A Error code 表,重要!這裏也有
附錄 B Fscommand2字典,這可以查Help
附錄 C 書中專有名詞解釋

2007/7/24

Device Central 中 performance的 calibrate 檔案

存放路徑:
C:\Program Files\Adobe\Adobe Device Central CS3\Required\Performance\
裏面有…

TestSmall10.swf
TestSmall20.swf
兩個檔案,照檔名猜測應該是for FL1.x及FL2.x使用的吧
每個檔都會依序進行三種測試:Vector graphic, Bitmap graphic , Dynamic text
最後會算出一個performance value,例如我的N牌6680測得結果是968.75
而丟給Device Central的N牌3250測為1137.61,其profile .xml中的fpi value為1003.1

我想此數據"有可能"就是device profile中的fpi value,但仍待求証。

另外device profile的fpi value與device central中看到的performance index,應該是有些關聯性,可能內含某種換公式,需要再研究。

2007/7/20

CS3自製 device profile


CS3如何自製device profile

一般大廠的device profile我們可以從Adobe Device Central Online取得。

但有許多開發者可能會希望能自訂自己的device profile,今天研究了一下,大致上不難,只有xml內的資料較繁鎖,但也不致無法使用。

首先要知道profile的存放位置:
C:\Documents and Settings\{user id}\Local Settings\Application Data\Adobe\Adobe Device Central CS3\Devices\

要產生一個新的profile至少要有兩個部份,我以Nokia N95為例,在上述路徑下,可看到
1.Nokia_N95.xml
2.Nokia_N95_Main [資料夾 ]

1.Nokia_N95.xml
XML檔為主要的設定,其中較重要的有


其實contentType中的許多子節點,就是Device Central中預覽device時,右邊出現的那一大堆設定值;若同一支device同時支援兩種以上的contentType時,也能在不同的contentType中做不同的設定。

2.Nokia_N95_Main [資料夾 ]
而在 Nokia_N95_Main 資料夾中,主要是圖片的設定而已,裏面可以看到:
a.Main.png<---主圖 b.MainActive.png<----模擬時,可active按鍵的mouseOver狀態,如變黃色。 c.MainMask.png<----依此mask圖,決定每個按鍵的感應區域 d.MainDesc.xml MainDesc.xml中的tag其實照字面上來看就能理解內容,較需注意的是,裏面設定了很多按鍵的色碼,那些色碼需跟MainMask.png內的色彩一致,才能按得到按鍵。

2007/7/16

about Maso Lin

更新日期:2010.1.18

Maso Lin

Maso Lin

專長:
Flash Game, Flash Animation, Flash Lite, Mobile UI...。

認證:
CertifiedMacromediaFlashMX2004Developer(2004/12/31)

Blog:
http://masolin.blogspot.com/

媒體採訪:
中視晚間新聞、聯合晚報、巴哈姆特GNN網站…等[詳情]



近期作品:
[iPhone Game]BaoZi Jump!(2010.01)
[遊戲]萬丈淵(2005.11)
[遊戲]神影無蹤–廖添丁(2004.6)
[動畫]古老的大鐘網路MV(2003.11)
[動畫]劍 sword (2003.9)
[遊戲]梅花鹿大戰黑狗熊(2003.5)
[遊戲]陸軍A-Plus系列遊戲(2003.5)
[遊戲]健康大胃王(2002.10)
[動畫]Icon Story(2002.9)
[其他]2002以前之作品集

參與著作:
.2006台灣最佳短片動畫錦輯
.2005Flash8達人秀-ActionScript創作大集合

展歷:
.2004 法國Très Court極短片展[IconStory]
.2004 德國Potsdam Sehsüchte學生影展[IconStory]
.2004 比利時Anima動畫影展[IconStory]
.2004 漢城SICAF動畫影展競賽類網路動畫組[劍]
.2004 台灣國際動畫影展[劍]
.2004 國立台灣藝術教育館全民音像運動[劍]
.2004 國立台灣藝術教育館全民音像運動[古老的大鐘網路MV]
.2003 漢城SICAF動畫影展競賽類網路動畫組[IconStory]
.2003 台灣國際動畫影展[IconStory]
.2003 第五屆台北電影節國際學生影展[IconStory]

得獎:
.2005 Macromedia大中華區MAX大賞Final List入圍[萬丈淵]
.2004 Macromedia大中華區MAX大賞 最佳媒體、娛樂、遊戲體驗獎[神影無蹤–廖添丁]
.2004 經濟部工業局4C數位創作競賽-遊戲創作組大會銅獎[神影無蹤–廖添丁]
.2003 經濟部工業局4C數位創作競賽動畫組佳作[劍]
.2003 經濟部工業局4C數位創作競賽動畫組智冠科技股份有限公司贊助獎[劍]
.2003 行政院國科會益智遊戲電玩創作大賽創作金手獎[梅花鹿大戰黑狗熊]
.2003 行政院國科會益智遊戲電玩創作大賽創作巧奪天工獎[梅花鹿大戰黑狗熊]
.2002 行政院衛生署國民健康局FLASH遊戲創作比賽第三名[健康大胃王]
.2002 經濟部工業局4C數位創作競賽動畫組 大會銅獎[IconStory]
.2002 經濟部工業局4C數位創作競賽動畫組 科技娛樂獎.[IconStory]

其他:
.入選Macromedia精彩案例(16/11/2004)[神影無蹤–廖添丁]


2007/6/29

FlashDevelop3安裝筆記-讓 trace更方便一點

[2007.12.19 update]
今天灌了FD3beta5及debug 版的flash player後,發現直接用trace即可,就跟在Flash IDE一般。所以應該不需再用下列的方法修改了。
[2007.12.19 update-end]

在上一篇有提到,FlashDevelop3中要用trace,是用如下方法:
import org.flashdevelop.utils.FlashConnect;
FlashConnect.trace("測試中文");


但用幾天,發現一些問題:
  1. FlashConnect是FD自家工具包裏的東西,若專案是多人共同開發,as 中若是出現許多FlashConnect.trace,且分散各處的話,將會造困擾。
  2. 我發現FlashConnect.trace並不如trace好用,它只要帶入非String的東西就會出錯,因為他裏面沒做轉換。


針對上述兩點,我建議用FD的人都可做下列修改:
package
{
import flash.display.MovieClip;
import org.flashdevelop.utils.FlashConnect;
public class Main extends flash.display.MovieClip
{
public function trace(str:*):void{
FlashConnect.trace(str.toString())
}
public function Main():void
{
trace("aa")
trace(123)
}
}
}


如此code裏面一樣只要寫trace即可,也修正了非String出錯的問題。
而上述這些code,也可存成Main.as,並設在FD裏的Template裏,如此每次New Project時,就直接寫好這些code了。

2007/6/27

AS3 非官方Class懶人包

感覺AS3的學習過程,會是一場mash-up大亂鬥。
Update:2008/1/23


2007/6/26

FlashDevelop3安裝筆記

昨天突然覺得,學AS3如果只是單純寫code的話,開Flash CS3實在很麻煩,也很不實用,因此開始survey各類AS撰寫工具。

後來是選用FlashDevelop3(Beta2)。在此記錄一下安裝過程。

安裝

  1. 下載並安裝FlashDevelop

  2. 下載並解壓Flex2 SDK (解壓路徑隨意,例:C:\flex_sdk_2)

  3. 開啟FlashDevelop3

  4. 到 Tools -> Program Settings -> Plugins -> AS3Context -> Settings ->Flex2 SDK Location設成剛才解壓的地方,例:C:\flex_sdk_2
  5. 現在可以試著開啟一個as3的.as檔,直接在FlashDevelop中按Ctrl+Enter,看看是否會直接產生出.swf。

  6. 若看到 "The compiler path is not properly configured" 的錯誤訊息的話,請到這篇看看。重點在於要多安裝一個Flex Compiler Shell



[2007.12.19 update]
今天重裝FD3beta5+flex3 sdk,卻發現發佈出來的swf都是空白的,也就是按右鍵context menu都會出現"沒有載入影片"的那種,後來研究了一下,原來是Flex SDK這裏要做一些設置。(但很奇怪是,上次安裝時為什麼不需要做這件事也可以work??)
進入Flex SDK存放目錄,找到bin這個目錄,在裏面可以看到一個檔案叫"jvm.config",以文字編輯器開啟
找到這行 java.home=
把你的JRE安裝目錄指給他,如下
java.home=D:/Program Files/Java/jre1.6.0
(注意斜線方向)
改好就ok了
[2007.12.19 update-end]

到此為止,我們可以不用開FlashCS3,便直接生出swf檔,也不用做一個空的.fla,正感到世界一切美好時,我發現了一個可恨的問題,讓我搞了快一天。

截至FlashDevelop3beta2為止,他的global classpaths設定是有問題的,也就是說,我無法在開發過程中import 官方以外的class,諸如PV3D, Tweener....(那我要你幹嘛!!!)

所幸我們暫時可以用FlashDevelop中的project功能,來彌補這個缺憾,並等待下一個版本的出現。

Project的用法
  1. 到Project -> New Project... 選"ActionScript3- Default Project",這時會要你命名,設路徑。(例:HelloWorld)

  2. 完成後,會在HelloWorld這個Project目錄下,看到一堆東西,最重要的是Classes這個目錄,開好Project時,FlashDevelop會直接在此生成一個Main.as,並在裏面寫好一些基本的 code。

  3. 此時,你就可以把你準備要import的非官方classes放到Classes裏,並引用之。


Trace
[2007.12.19 update]
今天灌了FD3beta5及debug 版的flash player後,發現直接用trace即可,就跟在Flash IDE一般。所以應該沒有以下問題了。
[2007.12.19 update-end]
最後,用Flash IDE以外軟體開發時,最麻煩也最重要的問題,一定是如何做Trace?
事實上FlashDevelop有提供了自家的class,可以將訊息傳到FlashDevelop的output window中。
位置在:C:\Program Files\FlashDevelop\FirstRun\Library\AS3\classes\
就是org下的那一整包
使用方式:
import org.flashdevelop.utils.FlashConnect;
FlashConnect.trace("測試中文");
即可。

正常來說,我只要把這個path設到global classpath裏就ok才對,但如同上面的問題,目前只能暫時把整個org目錄copy到project目錄下的classes裏。[2007.12.19 update:此問題我在FD3beta5已沒看到了,看來是解掉了]

中文
FlashDevelop在使用時,若有出現中文顯示問題,如trace,或text field等,請務必在主選單上設定:
File > Encoding > Convert Encoding > UTF-8

Code font
若要自訂寫code視窗的字型、字級這些東西,可在
C:\Documents and Settings\{user id}\Local Settings\Application Data\FlashDevelop\Settings
裏找到ScintillaNET.xml 這個檔,用文字編輯器改一下裏面的default-font, default-font-size這些,再重開Flashdevelop即可

心得
FlashDevelop3用起來比FlashCS3輕巧方便,程式碼收合功能也比官方的實用很多,我想現階段我會好好適應這個軟體,除非有要畫圖、做動畫,才會把FlashCS3打開吧。

2007/6/22

Twitter badget修改

用Twitter好一陣子了,也喜歡把status放在blog上,不過Twitter官方的badge對中文顯示不太友善,其實也只是text field size設太小了,因此將他修改了一下。
除了把文字設大外,也把一些字詞弄成中文。另外還把status中有出現"http://"的文字,都變成可以點擊的。
使用方式就如同原來的Twitter badge一樣,只是embed code 中embed src後面的swf連結位置,改成修改過的swf位置即可。

有興趣的自己拿去用吧 [原始檔]

2007/6/15

以Flash Lite仿HTC Touch 3D選單

HTC最近推出的 Touch手機,雖然沒有Multi touch那樣炫,但結合了「滑鼠手勢」及「3D桌面」兩種概念,卻也引來不少話題。

雖然不確定HTC是用什麼技術實作的,但我想FlashLite要達成類似的效果應該是OK的,以下影片是用Flash Lite做的效果:


註:BenQ P51(Windows mobile5.0)+Flash Lite2.1 StandalonePlayer+FL_touch.swf by Maso :)

基本上,這樣的3D翻轉、滑動手勢偵測,都可由Flash Lite獨立完成。

而本實驗作品無法做的,是Contact名單那一頁,若要加入add new/edit/remove contact,甚至取出大頭照,這些則需要Flash Lite MMI版才有辦法。

如果你手上有任一支Windows mobile5.0的PDA phone ,再去安裝免費的Flash Lite2.1 Player for WM版,再下載本人的FL_Touch.swf實驗作品,那麼也可以稍微體驗一下HTC Touch的3D Menu吧 ^^

2007/6/14

在Windows mobile 中 Launch app.

FlashLite要Launch application,可透過fscommand來達成,只要能知道app.的存在路徑即可。
所以重點便是app.的路徑,這些路徑要如何得知呢?

以Windows Mobile來說,若是用PC與手機連線,即可在檔案總管中的「行動裝置」裏,瀏覽手機裏的檔案,但許多app.的執行檔或系統檔案,是無法看到的。(即使開啟顯示隱藏檔案)

不過我們可以從一些捷徑檔中得到資訊。
從檔案總管開啟手機中的"\Windows\Start Menu\",可以看到一些捷徑檔:


點"Calendar"右鍵看內容:


上圖中可看到"poutlook.exe calendar",該.exe即是app.的執行檔路徑,而後面的"calendar"則是參數。

寫在Flash中則是:
fscommand("Launch","poutlook.exe,calendar")


這樣能直接Launch pocket outlook,並直接進入Calendar中

除了"\Windows\Start Menu\",其實整個手機都可以找找看有哪些捷徑檔,例如:
\Windows\Start Menu\Programs
\Windows\
都有很多。

在此列出一些Windows Mobile中一些常用App.的位置:
  • fscommand("Launch","poutlook.exe")//Outlook(但目前測試沒反應)
  • fscommand("Launch","poutlook.exe,calendar")//行事曆
  • fscommand("Launch","poutlook.exe,contacts")//聯絡人
  • fscommand("Launch","poutlook.exe,tasks")//Tasks
  • fscommand("Launch","iexplore.exe")//Internet Exploer
  • fscommand("Launch","iexplore.exe,http://www.google.com")//進IE並連網址
  • fscommand("Launch","tmail.exe")//Email
  • fscommand("Launch","cprog.exe")//Phone
  • fscommand("Launch","wmplayer.exe")//Windows Media Player
  • fscommand("Launch","fexplore.exe")//File Manager
  • fscommand("Launch","pmsnlauncher.exe")//Pocket MSN
  • fscommand("Launch","calc.exe")//計算機
  • fscommand("Launch",":MSPIMG")//Picture &Video
  • fscommand("Launch","pimg.exe")//Picture &Video
  • fscommand("Launch","HipCam.exe")//Picture &Video-->Camera
  • fscommand("Launch","HipEdit.exe")//Photo editor
  • fscommand("Launch",":MSSYNCAPP")//Active sync
  • fscommand("Launch","async.asy")//Active sync
  • fscommand("Launch",":MSPPT")//PowerPoint
  • fscommand("Launch","pxl.exe")//PowerPoint
  • fscommand("Launch","pword.exe")//Word
  • fscommand("Launch","notes.exe")//Notes
  • fscommand("Launch","skype.exe")//Skype
  • fscommand("Launch","solitare.exe")//Game:接龍
  • fscommand("Launch","BubbleBreaker.exe")//Game:刺泡泡
  • fscommand("Launch","saplaywm.exe")//Flash Lite Standalone Player
  • fscommand("Launch","shfind.exe")//Search
  • fscommand("Launch","SMS.exe")//SMS
  • fscommand("Launch","VoiceCommander.exe")//Speech Commander

2007/6/13

也搬家至blogspot

幾經思考,把blog移到免費的blogspot.com 上面,此後可不用再為domain name, hosting, blog系統、昇級等鎖事煩惱。

舊文章都放在blog.masolin.net,至少還會用到2008年5月。舊文章可能會陸續移到此處。
(之前的blog.masolin.com已不能用了。)

最近工作量減少了些,希望能趁這段時間來看看AS3或是寫些教學…

2007/4/10

Download MASO

今天發現原來我也是一個Open Source Project:
Download MASO
MASO. Merlinz AD&D Spell Organizer. A Glade/Gtk+/Perl spell organizer for the AD&D game.
>>Download MASO
這是一個for AD&D(龍與地下城)的咒語組織工具,聽起來挺屌。(幸好不是XX分析產生器這類kuso東西啊)

[驚]原來日本人叫媽祖也叫Maso

マソ(Maso)  出身地:中国
 媽祖。中国南部の福建省を起原とする女神。航海を守護しており、華僑によって広められ、中国本土のみならず、台湾やマレーシアなどでも信仰されている。

http://www10.plala.or.jp/g-labo/dds/dict/sinzoku.htm

2007/3/25

fscommand2("Quit")問題

fscommand2("Quit")原來在Flash Lite當中,是有限制使用時機的,今天便被這樣一個問題困擾了三個小時左右,在此簡單記錄一下:




例如我做一個10 frames動畫,在第10個frame寫下

//播放結束並離開
stop();
fscommand2("Quit");

發現這樣是不行的。

但把它寫在key function中卻是可行的

//fscommand2 ("Quit");
stop()
var myListener:Object = new Object ();
myListener.onKeyDown = function () {
fscommand2 ("Quit");
};
Key.addListener (myListener);


是Quit只能用在key function裏嗎?不解。
(我只是想做一個按下Quit後,再播一小段動畫才真的跳開Flash;但如果只能在key down時quit才有用的話,這個效果就難以實現。)

2007/2/14

LG-Parda KE850 Flash UI

2007/4/3 Update 以下這段也要看完才完整
http://chinese.engadget.com/2007/04/03/video-lg-prada-phone-complete-interface-walkthrough/
2007/3/20 Update 有更完整的影片了,那個World clock夠酷!(但也許不是Flash做的)



這段影片展示了LG Parda KE850的一些Flash UI,包括theme change,drag&drop等,雖然沒有iPhone那麼炫,不過也是值得參考。
(接下來比較好奇Samsung F700,F520也是號稱Flash UI的操作介面)