Skip to main content

Posts

Showing posts from 2007

AIR : Fake System Tooltip

[OS: 我只想要不受視窗限制的tooltip啊....]
開發軟體的基本需求不就是按鈕上應該可以設置tooltip(說明文字)嗎?
目前在AS3 AIR相關class中只找到 SystemTrayIcon class可以設置系統的tooltip外其他都沒了類似的功能...WHY???

一時沮喪只好用NativeWindow實做假的系統說明文字來安慰自己了...
原理很簡單就是使用無邊框小視窗的NativeWindow假裝tooltip,不過僅適用於主視窗是無系統框設定 ( NativeWindowSystemChrome.NONE ),原因是...如果主視窗為STANDARD mode你就會發現當假的tooltip視窗出現的時候,主視窗的focus就會跳掉,畫面就會不時的閃啊閃..* *
以下是實際畫面:


有興趣看看的可以直接下載原始檔玩玩...囧...rz

AIR: open new native window in Flash CS3

最近打算做個小軟體來玩玩,裡面一個需求為開新視窗來做設定的面板,詢問了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";
var mainW:NativeWindow=s…

AUG 12月網聚

主題:機器人+AS3+Silverlight

議程順序:
1.把玩LEGO互動機器人------------------by 林修禾
2.從AS2到AS3.0的美麗與哀愁 ----------by 林新德
3.閃亮亮的Silverlight 結構與開發流程 ---by 迷克斯

時間地點:
場地費用:NT.300元
時間:2007年12月9日(日)
地點:恆逸資訊訓練教育中心 龐畢度國際會議中心
地址:台北市復興北路99號2樓

>> 報名專線 <<

[ 2007/11/21 ] Google 台北程式開發日

[2007/11/21] Google 台北程式開發日參加者小禮物:T-shirt、掛牌、google筆和可樂紅的手機吊飾 (OS : 晚了一天才將照片貼出來,本來已經打算不分享了,不過拍了都拍了還是貼出來混版面也好。)

會參加這次研討會的原因並不是對google小工具有所研究,而是好奇心使然。連坐在隔壁不認識的工程師都問我同樣的問題,也只能回答...呵呵我是來野餐的!講到野餐,會場佈置果然發揮了google「免驚么」精神,距離座位的100公尺內一定找的到食物,真是貼心到極點,加分!加分!

回到正題,早上的議題由google工程師分享一些基本的google小工具開發概論;下午則是google小工具徵選的頒獎典禮與分組競賽。原來全世界google小工具徵選比賽中,台灣區參加的數量是最多的,其中一個得獎者更提出超過30組的作品,當然這位得獎者也將被google邀請至美國總部去玩!到了分組競賽,為了小獎品而與同事一起參予。兩個人都沒有研究過小工具的寫法所以直接利用包裝swf的做法,但是偷吃步的下場就是卡死在google提供的崁入swf api...當時使用 _IG_EmbedFlash() tag來link swf結果發生了swf無法讀入外部資料的xml,但是直接將swf放置在網頁上是正常的...一陣混亂弄到時間到只好殘念...為此還請教了有開發經驗的 Kyle ,他使用dreamweaver原本的js來呼叫swf 基本上就可以正常顯示,所以很可能是google api的問題嚕!有機會再來深入研究看看...=)

google小工具得獎作品

AIR : Big Head FLV Player v1.0 (可全螢幕播放版)

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

++ 打包下載 ++

AIR : Little Jam desktop land 蕭可愛桌面樂園

小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:
到最前面 /
往前一個 /
往後一個 /
到最後面 /
都是用來排列角色的前後位置

點選「固定位置」會無法拖曳直到取消固定。
刪除角色 /





小技巧
同步:想要讓分批載入的動畫同步的話,可以在配置好後,點選「save」儲存後,再點選「loa…

AIR : FileWriteResource Error (Beta2)

由於手上正在寫一個簡單的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

最近的新玩具:AS3 GIF Player Class 0.1

開始玩AS3才發現,世界上好心人實在太多了,分享的一堆超實用class檔供大家利用,不管是3D、物理引擎或圖片decoder/encoder等等...真是太感謝了...XD 因為有載入 gif 的需要,所以玩了 ByteArray.orgAS3 GIF Player Class 0.1
在實際編寫的時候有發現一個問題,就是 AS3 GIF Player Class 0.1 的 gif 疊圖判定它是統一的,如每個frame重劃,或者是每個frame不停重疊上去,但是現實的gif(至少從網友手中拿到她做的gif..)在疊圖判定上就出現很大的問題,該重劃的變疊圖,該疊圖的卻是重劃,顯示就非常不正常...以下是我的實驗:


1. 疊圖模式惡搞過的test.gif ,以下是正常顯示的結果:


2. 這是 AS3 GIF Player Class 0.1的 GIFplayer.fla 範例直接載入 test.gif 以 ImageReady 模擬顯示的結果:


不過好在作者是release整包 class檔,所以拿來小修一下就沒問題了!XD
PS. 由於本人不是原作者,所以不在這邊公開修改過的class檔嚕!

AIR : Adobe AIR Beta 2 的 BUG...

真不知道要講 它是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是正常的...囧

AIR : Adobe AIR Beta 2 released

剛剛有人回應才發現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/

AIR : 蕭可愛面板之FLV player v1.0

最近很喜歡的聲音:蕭敬騰,沒辦法他那首「世界唯一的妳」給我的震撼真的很大 (當然他當初出場的髮型也很爆點),生平第一次變成追星族(已經夠低調的那種...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拍的照片~~

分享給同樣喜歡蕭可愛的你~~~

The first UGC online & mobile gaming portal

這是一個這幾天才冒出的 Flash & Flash lite games 的 User Generated Content(UGC) gaming portal,它有趣的是開發者所上載的遊戲可以供其他使用者客製化(當然有一些製作上的規定),官方的 blog上有展示video可以參考,期待它開通 to mobile的功能。

portal : http://www.ugengames.com/
blog : http://www.ugengames.com/blog/

AIR : BigHeadEditor v1.0

應用了前兩篇分享的原理,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
程式畫面:


AS3組件在AIR中的怪異現象...

由於 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???

AIR 載入特定資料夾圖檔

這只是一個簡單的應用,為的是接下來要結合前篇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< arr.length; 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);
}
}
}
}

AIR 簡易Webcam抓圖測試

這篇其實是參考qop's blogAIR 存圖測試變形而來,只是多加了Webcam去做抓圖的媒介,請先下載安裝as3corelib,它會以component的形式存在,使用時直接從component視窗拉出來後刪掉保留在library即可。

package {
import flash.utils.ByteArray;
import flash.media.Camera;
import flash.media.Video;
import flash.events.*;
import flash.display.*;
import com.adobe.images.JPGEncoder;
import flash.filesystem.*;

public class WebcamTest extends Sprite{
private var video:Video;
public function WebcamTest() {
stage.scaleMode = StageScaleMode.NO_SCALE;
showVideo();
btn.addEventListener(MouseEvent.CLICK, doClick);
}
public function showVideo() {
var camera:Camera = Camera.getCamera();
if (camera != null) {
video = new Video(320,240);
video.attachCamera(camera);
video.x=40;
video.y=20;
addChild(video);
} else {
trace("You need a camera.");
}
}
private function doClick(e:MouseEvent):void {
var file:File = File.applicationResourceDirectory;
var bd:BitmapData=new BitmapData(320,240, false, 0xffffff);
bd.draw(video);
var jpg:…

AIR 的第一次接觸 by Flash CS3

嚴格說起來,用CS3來開發AIR App不是一件很明智的事情...
理由很簡單,就是CS3實在太難用了!!難搞的可拖曳就變半透明又愛黏來黏去的工作視窗;想當機也不通知一聲就莫名奇妙當掉;不知道為啥操作一下換個字型之類的程式就傻掉;編寫程式工具也沒有啥咪提示碼等等...但是,Flash CS3製作的swf打包出來的AIR檔size比Flex builder打包出來的小很多,為了這一點,只好硬著頭皮玩下去了...

開發環境:請參考qop's blog兩篇教學 (裡面還有很多篇AIR教學喔!)
Create AIR Apps in Flash CS3
package a flash app as an AIR file (for windows)

如果沒意外的話,到這邊應該就可以開始使用CS3來開發AIR Apps嚕!

Test in Apollo:
如果想要測試swf在AIR runtime執行的效果,請別太相信剛剛安裝的Commands / Test in Apollo 這個指令,常常是執行後dos視窗閃一下就不見了( 為啥不知道..請知道的告訴我,謝謝! ),所以最保險的測試方法是,執行 Commands / Test in Apollo 後,它會自動幫你生成幾個檔案,裡面有個 檔案名稱-app.xml,接下來,點選開始列 / 執行,直接打入 "cmd"開啟命令提示字元 (dos視窗 )
cd C:\air_b1_win_sdk_061107\bin
adl "你的測試檔案路徑\檔案名稱-app.xml"
這樣測試就變的很方便嚕!

ExtendedKey.as in Flash CS3

當使用Flash CS3開發Flash lite2.x contents時,如果有操作Soft keys的語法而使用ExtendedKey.SOFT1 or ExtendedKey.SOFT2 ,在Test movie 就會發現Flash找不到ExtendedKey.as 而無法解譯成功,

最簡單的解決方法就是將Flash 8 內的ExtendedKey.as 複製到:
C:\Documents and Settings\使用者名稱\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Classes\FP7 即可!

或者直接copy下列語法另存新檔為ExtendedKey.as 存入上述位置: (其實只是傳入常數定義)
//****************************************************************************
// ActionScript Standard Library (Mobile specific)
// ExtendedKey object
//****************************************************************************

intrinsic class ExtendedKey
{
static var SOFT1 :String = "soft1";
static var SOFT2 :String = "soft2";
static var SOFT3 :String = "soft3";
static var SOFT4 :String = "soft4";
static var SOFT5 :String = "soft5";
static var SOFT6 :String = "soft6";
static var SOFT7 :String = "soft7";
static var SOFT8 :String = "soft8";
static var…

KUSO 極致的online game - 清廉战士

朱學恆的路西法地獄看到了一篇超級Kuso的真實online game介紹,天ㄚ!對岸的「清廉戰士」是繼 魔獸之後又一online game會讓 Erin 想要去玩的,真的不能不讚嘆它的內容是多麼吸引人啊!剛剛試著去下載安裝,居然還出現「紧急公告 清廉战士自测试以来,得到广大网友热情支持,在线人数超过服务器及程序限制, 现正在进行硬软件升级改造,敬请广大网友期待! 」!!XD 真的等不及想要玩玩它啊!!

收到 Essential ActionScript 3.0 --- 接力貼

邦邦Ticore之後收到書了也來貼一下...XD
從Amazon定的,上星期三邦邦代訂到今天收到...真是迅速啊~~總價由於有人一起分擔運費小小給它便宜了一點點啦! NT.1,437

Load Manager for FL2.X (1)

載入控制常常是各大Flash討論版中名列前矛的老掉牙問題串,可見如何做好載入控制是一個很重要的課題,FL1.1 載入外部檔案的限制是一個frame只能執行一次載入,而 FL2.X 則是一個frame只處理5次載入事件,FL1.1 載入研究在很久以前就已經分享過了,所以這次與大家分享是幾種FL2.X處理載入控制的方法:

Load Manager有個很重要的特點:唯一性,當多個載入的SWF中如果也有load行為時,Load Manager只能存在一個。

為了達到Load Manager的唯一性,這邊使用程式 Design Pattern 中蠻常用的 Singleton Pattern來實作,講到這邊大概已經有人快崩潰了,連Design Pattern的字眼都出現了,感覺越扯越專業捏?不過別緊張,搞不懂原理的人就直接將.as拿去修改使用就好,Erin一直認為,如果你對它有興趣,就會願意花很多時間去理解它,強求是沒有用的。回到正題,Singleton 顧名思義就是"獨生子",它的原理就是讓 Class只有一個實體,不管誰來跟它要東西,它也只提供一個窗口。好嚕!Erin 的懶人程式講解就到這邊,有興趣的請直接點選上面的聯結去理解它個夠!

[LoadManager.as version 1 教學檔下載]

LoadManager.as:
在一開始的屬性宣告就建立一個實體
private static var _manager:LoadManager = new LoadManager();
提供窗口讓外部取得實體,這樣的方式就可以確保所有人使用LoadManager時,用到的都是同一個實體。處理載入事件的是最簡單的 onEnterFrame,目的是讓loading工作簡單化,手機AP開發重點之一:簡單卡好
static function getInstance():LoadManager {
return _manager;
}
用法:
var loader = LoadManager.getInstance();
loader.loadClip(fileURL, targetMovieClip);

接下來測試看看
LoadManager01_1.swf:
var loader = LoadManager.getInstance();
for (var i = 0; i<7; …

WhoNeedsAniPhone.com

這是WhoNeedsAniPhone.com發表的一個類iPhone使用者介面的Flash lite application for Windows Mobile 5 and 6,預計完成後會包含程式集、觸控螢幕鎖與一些app,如果你有PDA phone base on WM5 or WM6的話可以加入他們的beta tester募集 =)

打打打爆小人頭!! 我的第一個FL1.1小遊戲 part 5

3. 主遊戲的Key controler:

當畫面進入pause狀態時,需要將pause按紐改成replay,所以這邊把pause按紐作成一個擁有兩格frame的MovieClip,並命名成"pause_btn"

正如前面所說,Erin習慣將Key event統一控管,接下來主遊戲所有的key control都會寫在畫面外的Key controler按紐身上。

LSK and RSK action:
on (keyPress "") {
//LSK
if (pause_btn._currentframe == 1) {
call("/timerFunc:pause");
//當pause_btn為"pause"時,呼叫遊戲暫停
tellTarget ("/pause_btn") {
gotoAndStop(2);
}
} else {
call("/timerFunc:replay");
tellTarget ("/pause_btn") {
gotoAndStop(1);
}
}
}
on (keyPress "") {
//RSK
gotoAndStop("home");
}

數字鍵1-9 action:
on (keyPress "1") {
timerFunc.hitNum = 1;
//告知timerFunc 哪個數字被按下
call("/timerFunc:beHit");
//判斷小人頭有無被打
}
on (keyPress "2") {
timerFunc.hitNum = 2;
call("/timerFunc:beHit");
}
//以下以此類推請寫到9為止

再將其他小部份處理一下,如back鍵程式、score與time數字重置,這樣遊戲就完成囉!

下載最後完成檔,看看與你最後完成的樣子有什麼差別?

~End~

Edit 6/20: 由於Erin並沒有特別去除蟲,如果這個遊戲有bug產生,請大家試著去抓蟲,如果你發現了修改方法可以直接post…

打打打爆小人頭!! 我的第一個FL1.1小遊戲 part 4

2. 計時器與重覆使用的程式:
FL1.1的Call(frame label):
Flash 4沒有function寫法,只有frame action,要重複利用的code是寫在一個無關的frame上,利用它的frame label來執行Call(frame label)指令模擬function。所以接下來主遊戲程式使用到的重複code,都將寫在一個timerFunc MovieClip中。

"timerFunc" MovieClip:
[圖10] 時間軸上配置,前三格為計時器程式後面留給Call()使用(善用空間..=P)

Frame 1:
timer = getTimer();
//getTimer()重出江湖嚕!^^,先抓取timer起始值

Frame 2:
if ((getTimer()-timer)>=1000) {
//當getTimer抓到一秒時,就回到frame1重新抓起始值;
if (_root.sec<=0) {
tellTarget ("/") {
gotoAndStop("end");
//遊戲結束
}
_root.end_txt = "You got total\n" add _root.score add " heads!!";
//string相加一定要使用add代替+
call("pause");
//將動畫停止
stop();
} else {
_root.sec--;
//減秒
gotoAndPlay(1);
}
}

Frame 3:
gotoAndPlay(2);
//不滿一秒就是重複回到frame 2

這樣一個簡單的計時器程式就完成了~~
接下來處理重複利用的程式:

Frame label 「beHit」: 判斷小人頭有無被打,會傳入hitNum告知被打號碼
myName = "head_mc_" add hitNum;
if (_root[myName].isActive) {
tellTarget ("/" add myName) {
gotoAndPlay("beHit");

打打打爆小人頭!! 我的第一個FL1.1小遊戲 part 3

請先下載範例檔 (範例檔內只有少數的程式,其餘請參照教學補貼上去,版權所有,僅供個人學習行為使用)

首頁key event程式:

開始撰寫FL1.1程式前,請先將你的Flash 4書拿出來溫習一下,FL1.1 content只能使用Flash 4的寫法與Flash 5屬性用法喲!(請參考tellTarget與點語法的使用時機)

首頁上list menu命名為:menu,內有三個frames。

Key controler上的程式:
on (keyPress "") {
menu.num = menu._currentframe;
if (menu.num == 1) {
menu.num = 3;
} else {
menu.num--;
}
tellTarget ("/menu") {
gotoAndStop(num);
}
}
on (keyPress "") {
menu.num = menu._currentframe;
if (menu.num == 3) {
menu.num = 1;
} else {
menu.num++;
}
tellTarget ("/menu") {
gotoAndStop(num);
}
}
on (keyPress "") {
if (menu._currentframe == 1) {
gotoAndStop("game");
} else if (menu._currentframe == 2) {
gotoAndStop("credit");
} else {
fscommand2("Quit");
}
}
重點是利用 _currentframe這個屬性來判斷上下跳選項喲!


主遊戲程式:

畫面上九個小人頭MovieClip分別命名成:head_mc_[1-9]
1. 小人頭出沒控制器:由一個擁有三個frames的MovieClip來製作,這是Flash4中最常用的模擬onEnterFrame寫法...要善用時間軸喔!

headsControler:
frame1:
num = random(10)+5;
//簡單的亂數控制小人頭出沒間隔,數字越小越快也越容易出現bug...XD 哈,因為要考慮到小人頭動畫的時間


frame2:
if (nu…

打打打爆小人頭!! 我的第一個FL1.1小遊戲 part 2

Wac-A-Mole!!遊戲流程圖:

[圖4] 首頁

[圖5] 作者介紹

[圖6] 遊戲畫面,小人頭對應數字鍵1-9,RSK對應退出按鈕,讓user可以在遊戲中直接回到首頁,手機遊戲應該是很隨性的,所以在LSK加上使遊戲暫停的按鈕。

[圖7] 遊戲結束畫面

遊戲元件製作:

FL1.1 content做法非常原始,需要將所需元件一一擺到stage上才能控制,所以為frame加上label是很重要的一個步驟。

[圖8] 原始檔主時間軸上配置

小人頭MovieClip的製作:

為了簡化暫停遊戲時程式的控制,所以在製作小人頭動畫時將所有的狀態全部作在同一時間軸上。
Tip: 有時候善加利用Graphic可以簡化MovieClip的階層數,別將MovieClip作成像俄羅斯娃娃一層MC包一層MC包了一大坨,這樣要動畫一次停下來需要控制很多層級,也會增加很多無謂的程式撰寫。

[圖9] 小人頭動畫時間軸上配置

小人頭MovieClip內時間軸程式:
frame 1:
stop();

frame label 「active」: 小人頭可以被打爆的區段
isActive=true;

frame 18: (label "active"最後一格)
gotoAndStop(1);
isActive=false;
//回到frame1停止小人頭

frame label 「beHit」:
isActive=false;

frame 23: (last frame)
gotoAndStop(1);

Key event統一控管:

雖然可以將Key event寫在各自按鈕身上,但是在同一個frame上所有的Key Event利用一個按鈕統一管理會讓除蟲難度變低,所以一直都是Erin最喜歡的Key event管理方式,接下來開始主遊戲程式製作囉!

下回會直接release可供製作的原始檔,這樣大家就可以與Erin一起完成這個遊戲嚕!

to be continued....

打打打爆小人頭!! 我的第一個FL1.1小遊戲 part 1

平台:Nokia S60 176x208(以下簡稱Flash lite為FL) 雖然FL2.x已經推出一段時間,仍然有許多上市手機僅支援FL1.1,本篇教學重點是FL1.1 Key event控制、遊戲流程與Flash4、Flash5語法大融合,所以拿出最簡單的打地鼠遊戲當作第一篇教學主題,希望有心學習FL1.1的新手能因為本篇分享而有所收穫。

由於FL1.1 與FL2.x 語法不盡相同,接下來的分享中,並不會花太多時間講解兩者之間的差別。

一般手機user很容易因為畫面上按鈕出現的位置而直覺性點選離按鈕最近的手機按鍵,為了避免user操作困擾,按鈕位置擺放須要有一定的規則。

[圖1] Erin的第一個FL1.1 game ,start按鈕位置設計上就有很大的失誤,由於按鈕位置偏右下角,很多user會直接點選手機螢幕右邊那顆soft key (以下簡稱RSK)進入遊戲,其實action是寫在中間Enter鍵上(以下簡稱CSK)...QQ 大失誤!! (但仍然保留作為UI設計失敗範本!^^)

[圖2] 按鈕位置明顯告知點選CSK進入遊戲

[圖3] list menu型態的遊戲首頁,點選上下鍵後按CSK進入

Tip: RSK通常用於「back」、「exit」,所以在遊戲中,應該儘量別賦予RSK不同於離開的意義。

to be continued...

又搬家了...

每次搬家不免俗的都要發表一篇"感言",
如果Blogger不會再有啥難搞的地方的話,
Erin應該是不會再搬家了,
這次搬家至少不是跟以前一樣,
以前搬家手段都是採取斷頭措施...(就是文章都不搬啦!XD )
所以這次花了一點時間連同文章也一起搬過來,
希望大家能習慣這個新地方嚕!^^

Flash lite作圖小技巧

今天難得心血來潮更新了幾篇文章...XD
以下建議其實大概都出自於Adobe官方釋出的 Flash lite2.0最佳化白皮書,Erin只是列出比較有"感覺"的項目


善用attachMovie
在白皮書有提到同一timeline中不同frames內容在播放之前都會被初始化,所以建議使用MovieClip會比擺在同一timeline上效能好,這點請有心想製作Flash lite content的designer注意一下會比較好呦!就是同一個 MovieClip內含10個frames每個frame皆有一個icon圖,然後使用gotoAndStop來操作,也遠遠比10個小icon各自設成 MovieClip然後使用attachMovie效能來的差喔
丟掉外框線請別再保留外框線,將它轉成填色圖也只需要點選兩次滑鼠就可以完成了呦!
Modify / Shape / Convert Lines to Fills
複雜向量圖請讓它變身png吧!製作Flash lite content不是以檔案小取勝,而是畫面上用到的節點數少為主,小小手機不是電腦喔!ps. PNG會比 JEPG好用。
點陣圖顏色控制變身點陣圖的時候,多花點心思為它少點顏色吧! 拜託你們了!
尺寸百分百...請使用100%圖片來製作Flash lite content,將點陣圖放到 Stage上別再對它做瘦身或增肥"可視尺寸"的動作了,大禁忌!
少用 Export in first frame連官方都不建議first frame寫上一陀AS了,你還想要將圖輸出到first frame初始化?!花30秒作一個兩格frame的 MovieClip,將所有linkage MovieClip拖到frame2,然後在frame1寫上stop(),要記得擺到stage上捏,反正就是別擺在frame1就可以了喲

Where is the folder of Flash lite Shared Object in your PC?

前陣子Erin在開發一個使用Shared Object 的Flash Lite application.
常常會莫名奇妙出現SO爆滿無法存取的情況,
為了刪掉先前存放的SO,開始了找尋Flash lite SO存放folder之旅...

PC版SO 預設folder :
C:/Documents and Settings / User's Name / Application Data / MacromediaFlash / Player / #SharedObjects

Flash lite SO 預設folder :
C:/Documents and Settings / User's Name / Local Settings / Application Data / Macromedia / Flash 8 / en / Configuration / Mobile / SharedObjects

超簡單版MobileSharedObject class

其實這個分享是比較有點懶人系列(Erin最愛)的意味,
只是將Mobile SharedObject建立步驟用class包裝起來,
請注意!這邊不是在講PC版的SharedObject用法喔!

◎MobileSharedObject(soName:String)
+ onLoad(init:Boolean)
+ write (attribute:String, value:Object)
+ read (attribute:String):Object
+ readAll():Object
+ clear()

用法很簡單:
var mySo = new MobileSharedObject();
mySo.onLoad = function(init) {
if (init) {
trace("First time to see you");
this.write("author", "Erin");
this.write("date", "04/02/2007");
} else {
trace("Hello "+this.read("author")+", nice to see you again");
var obj = this.readAll();
for (var i in obj) {
trace(i+"="+obj[i]);
}
}
};

有興趣可以按此下載