跳到主要內容

發表文章

目前顯示的是 三月, 2009的文章

[徵才]創意引晴 - Flex/php工程師

[徵才]創意引晴 - Flex/php工程師

【公司名稱】創意引晴有限公司 (資訊傳播業)
【營運方向】Web 2.0 系統網站建置 / Content Management System
      Flex統計分析及管理系統 / 政府大型資訊服務專案
      數位學習/數位典藏型網站系統
【歷年作品】http://funwish.net/?cat=5
【工作職缺】Flex/php工程師
【工作內容】Flex專案開發(AS3/php/js)
【徵求條件】資訊背景者佳 / 或很有興趣,肯學,不僅有創意,也認真負責
【工作地點】台北市中正區懷寧街74號12樓 (近台北車站, 二二八公園)
【工作時間】一到五, 9:30~18:30
      休假方式: 週休二日 國定假日 排休
【公司福利】專案獎金,季獎金,年終獎金,教育訓練, 進修基金
【薪資範圍】面議
【薪資發放】每月5號
【備註】  需對資訊業有高度興趣,能對多元化的資訊加以瞭解,
      亦能與內部工作人員有效溝通
      公司提供學習基金,並安排在職進修,參與研討會機會

◎公司資料:
 公司名稱:創意引晴有限公司
 公司統編:28862730
 公司電話:02-23613359
 聯 絡 人:amoswish@funwish.net / Amos Huang

www.fl-2.com

fl-2,滿有趣的網站, 風格簡單大方, 我就是喜歡這樣的網站
使用的字型也很有設計感
轉場的使用PV3D的,製作三方塊往不同的方向旋轉
而且不同的解悉度也都可以使用。
http://www.fl-2.com/



奶小茶我試寫的Demo
增加了左、右轉
Camera較遠時, 讓場景變暗。

選單Focus設計

在設計選單時
經常會需要將點選的單元Focus效果
當再點選新單元時, 上一個menu會自動退回一般的樣式,
原理其實只需要多用一個變數, 來記住上一個的menu是誰,
當點選新的menu時,就先叫上一個menu退回去
然後新menu再被存進新的變數即可。




package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.TextField; public class Demo extends MovieClip { private var _container :Sprite = new Sprite(); private var _txt :TextField = new TextField(); private var _prevItem :ItemMC = null; //建立一個變數用來記住上一個的選單。 public function Demo() { _container.x = 100; _container.y = 100; this.addChild(_container); this.addChild(_txt); for (var i:int = 0; i < 4; i++) { var _item:ItemMC = new ItemMC(); _item.gotoAndStop(i + 1); _item.x = 130 * i; _item.name = "item" + i; _container.addChild(_item); _item.addEventListener(MouseEvent.CLICK , itemClickHandler); } } private function itemClickHandler(e:MouseEvent):void { var _item:ItemMC = e.currentTarget as ItemMC; //得到廣播者 if (_item == _prevItem) return; //如果按下的物件和上一個物件是同一個,就中斷後方的程式碼。…

FloodEffect

Banner素材需要的效果, 所以也練習了一下
麻煩的是素材製作不能寫外部的Class檔, 好吧
那就寫在影格,複習一下AS1的類別檔寫法。
原理是使用BitmapData類別
不繼的去fillRect色塊




<br />import flash.display.*;<br />var mc:MovieClip = this.createEmptyMovieClip("holder", 1);<br />mc._x = 10;<br />var _bloodEffect:Object = new BloodEffect(mc, _global.StaticClass.drawMCReturnBitmapData(source_mc),3);<br />source_mc._visible = false;<br />function onMouseDown():Void {<br /> _bloodEffect.startEffect();<br />}<br />
SourceCodeDownload

DesignPatterns_Singleton

設計模式的單一模式,算是所有設計模式的第一堂課
因為其他的模式也會使用到這個。
為什麼要用單一模式呢?
好比你有個資料需要整個flash去共享,例如一份XML文件
在這種情況下, 不需要浪費資源的去建構二個URLLoader載入同一份XML
或是要建立一個共享的廣播者, 都需要使用Singleton來避免物件被建構二次
那為什麼不用靜態屬性就好了呢? ,反正都是單一呀
1:靜態成員無法繼承。
2:資源浪費, Singleton使用的是被動式初始化, 只有當使用者呼叫getInstance時才會被建構,
而靜態成員則是預先初始化。
建立Singleton類別。

package { public class MilkmidiSingleton { private static var _instance:MilkmidiSingleton; public var myID:int = 0; //建立公開的屬性。 public function MilkmidiSingleton(pSingletonEnforcer:SingletonEnforcer) { if (pSingletonEnforcer == null) throw new Error("Singleton"); } public static function getInstance():MilkmidiSingleton { if (MilkmidiSingleton._instance == null) { //當_instance屬性為null時,才建檔該物件。 MilkmidiSingleton._instance = new MilkmidiSingleton(new SingletonEnforcer()); //在建構函式時, 傳入internal類別, 避免其他類別使用new MilkmidiSingleton()來建構。 } return MilkmidiSingleton._instance; } public function doAction():void { trace("MilkmidiSingleton doAction"); } } } internal class SingletonEnforcer { …

PV3DText3DFogEffect

使用PV3D的相量3D文字做的Fog效果
遠一點的文字,加入Blur和變亮
增加距離的層次感
最主要的程式碼是用下方的公式, 計算3D物件與camera的距離
說穿了就是用畢式定理來算距離的
private function calcPointDistanceFromCamera(obj:DisplayObject3D):Number { var vecX:Number = obj.sceneX - view.camera.x; var vecY:Number = obj.sceneY - view.camera.y; var vecZ:Number = obj.sceneZ - view.camera.z; return Math.sqrt((vecX * vecX) + (vecY * vecY) + (vecZ * vecZ)); } PV3DText3DFogEffect - wonderfl build flash online

DesignPatterns_Command

最近開始在認真的學習DesignPattern
會有這個需求只是覺得程式碼重複性很高又不好維護
來分享一下Command,命令者模式。
命令的介面Interface是命令模式重要的組成, 他讓不同的類別都實作了同一個介面
而命令的呼叫者也不需要知道該命令是在做什麼, 只需要能呼叫該介面函式
就像打開電燈或關掉電燈, 我們只需要知道開、關的功能就好
過程是怎樣把他關掉, 就不是那麼重要
且命令模式另一個好處就是能undo和redo。
現在客戶的需求如下, 場景上有一個方塊物件
和三個按鈕, 分開按下後讓方塊放大、移動、旋轉。
媽呀, 這還不簡單, 直接修改方塊的屬性不就好了
但現在客戶再要再加上undo和redo的功能, 且之後還可能會新增新的按鈕功能
這時候就可以使用Command來設計。



1.建立介面, 讓所有的命令者都實作該方式。
<br />package milkmidi.designpattern.command {<br /> public interface ICommand {<br /> function execute():void<br /> function undo():void<br /> function redo():void<br /> } <br />}<br />
2.建立放大的命令者
<br />package milkmidi.designpattern.command { <br /> import flash.display.DisplayObject;<br /> public class ScaleCommand implements ICommand { <br /> private var _target:DisplayObject<br /> public function ScaleCommand(pTarget:DisplayObject) { <br /> _target = pTarget;<br /> }<br /> public function execute():void {<br /> _…

MQueryAS3Class1.0發怖

由奶伯伯所開發的MQuery AS3 Class 1.0發怖啦
目地一樣是要減化Flash的開發時間。
AS3.0都是採用偵聽與廣播的方式再製作
而MQuery就為讓要讓AS3的程式碼, 長的像AS2的用法而產生的
先import milkmidi.query.MQuery
類別
之後即可對元件做
MQuery(clip元件).onRelease = function(){}
MQuery(clip元件).onRollOver = function(){}
等相關的事件觸發
和AS2的用法差不多
只需要再多包一個MQuery函式即可
<br />AS3標準寫法:<br />clip_mc.addEventListener(MouseEvent.ROLL_OVER,onEventRollOver);<br />clip_mc.addEventListener(MouseEvent.ROLL_OUT,onEventRollOut);<br />clip_mc.addEventListener(MouseEvent.MOUSE_UP,onEventMouseDown);<br />clip_mc.buttonMode = true;<br />function onEventRollOver(e:MouseEvent):void {<br /> MovieClip(e.currentTarget).gotoAndPlay("over");<br />}<br />function onEventRollOut(e:MouseEvent):void {<br /> MovieClip(e.currentTarget).gotoAndPlay("out");<br />}<br />function onEventMouseDown(e:MouseEvent):void {<br /> trace(e.currentTarget);<br />}<br /><br />使用MQuery<br />stop();<br />import milkm…

milkmidiPanelV3.2

奶伯伯面版工具3.2推出啦。
這次增加了幾個常使用的功能, 目地都是要來減化Flash的製作時間。
面版:


6個主要的Button功能:
AS2Label和AS3Label:
在Flash製作階段時, 有時我們會製作MovieClip元件, 其第一個影格為空白
這時候Flash裡就只會有一個小點, 就很難點到, 也不知道小點裡有什麼元件
該功能就是幫元件增加一個表籤。
使用方法:
點選只有小點的物件:

按下AS3Label(如果是使用AS2的話,請按下AS2Label)

此時就會自動產生一個文字物件, 其名稱可以在面版上的輸入欄位打上文文字
如果欄位空白, 會以該MovieClip的instance為主。
發怖後, 該Label會自動被移除掉。

WholePixel:將所選擇的物件整數化座標。
Flash裡所有的物件座標在整數的時候會最好看,特別是點圖文字, 如果有小數點
很容易糊掉。
使用方法:
選擇要整數化的物件, 通常我是全選, 然後按下WholePixel按鈕,這樣即可。



FindSymbol:由場景上的物件, 找到其Library的位置。
經常會需要得知場景上的物件, 其Library的位置, 好修改其類別檔,
以前的作法是, 一個一個找。
使用方法:一次只能找一個, 所以只要點擊要在場景上找尋的物件一下
然後按下FindSymbol按鈕, 此時Library就會幫你把該物件Focus起來


HitAreaButon:自動建立只有感應區範圍的按鈕元件。
以前的做法是:
先畫一個色塊, 按下F8轉成元件, 再進去編輯, 把影格一拉到影格四, 然後再離開元件編輯
現在只要改成
畫一個色塊
然後按下HitAreaButton按鈕, 就完了啦。




changeBaseClass:這個只有AS3才能使用,
如果想要修改元件的BaseClass,一定要先在library找到該元件, 然後按右鍵屬性
匯出成類別,然後再填寫類別檔,
如果有n個,這個動作就要做n次
現在只要在場景上的元件,選一個或是多個
然後按下changeBaseClass按鈕, 會跳出一個輸入欄位讓你填寫
只要填上你的類別名稱, 所選的物件其BaseClass就會變成你所填入的資訊。



traceName:將所選擇的物件, 其實體名稱輸出在輸出面版上
當在類別檔時, 我們會把自動宣告舞台實體的選項關掉。

就變的需要在類別裡宣告一模一樣的名稱,
要一個一個打很辛苦
使用方法:全選物件,然…

PV3D_3DCard效果

這次練習了PV3D 3DCard效果
加入了簡單的blur rotation效果
線上Demo

flash匯出swc格式

什麼是swc
簡單來說, 就是把視件元件和類別包裝起來
這樣就可以直接使用new 類別的方式建構。
使用方法:

1.開啟Flash Library面版, 選擇要匯出的元件, 先設定類別名稱(我設定的名稱為ClipMC)
再選擇export SWC, 存到指定的位置。

2.開啟FlashDevelop,把該swc放在專案的資料夾下, 在該swc上按右鍵
選擇add to Library

3.之後就可以使用new ClipMC來建構該元件。
4.或是在FlashDevelp的專案上按下右鍵, 選擇Property

5.找到

6.把路徑指定進去就可以用



Flat3DWall

這幾天花了一些時間重寫了Flat3DWall的效果
並把效能優化, FPS可以保持在60左右

線上Demo
配上自已所寫的反謝倒影材質, 效果很滿意。
原始碼下載

快速移除所有的可視物件

在Flash裡,如果把某容器下的可視物件全部移除呢
function removeAllChild(pContainer:DisplayObjectContainer):void{ //AS3.0,深度是連續的數值,由0開始往上遞增。 //當深度0的物件被移除時, 深度1的物件會自動往前遞補 //所以只要判斷容器裡的物件數量是不是大於0 //然後每次都移除深度0的物件即可 while (pContainer.numChildren) { pContainer.removeChildAt(0); } } //只要使用removeAllChild(要移除的可視物件容器) //這樣就可以把裡面的子物件通通移掉了。

PhysicsGame_IceBreaker

好玩的物理遊戲又來了喔
IceBreaker


玩法很簡單
目地是要解救被冷凍的夥伴
使用滑鼠來移動可視範圍,
按下滑鼠左鍵來切割冰塊, 冰塊會隨著切割的樣式而往下掉
製作上是使用Box2D來製作,看樣子要來認真的玩一下Box2D了

Flash10_文字檔另存

FlashPlayer10
FileReference類別功能越來越強大
Player9只能upload
現在可以直接讀取本機的檔案
或是另存成一個新的格式,
這次就來練習開啟本機.txt檔, 編輯完在另存成一個新的.txt





package { import flash.display.*; import flash.events.*; import flash.geom.Rectangle; import flash.text.*; import flash.net.*; import flash.utils.ByteArray; import flash.utils.getTimer; [SWF(width = "600", height = "400", backgroundColor = "#FFFFFF", framerate = "30")] public class FileLoad extends Sprite { private var _fileRef:FileReference; private var it:TextField; public function FileLoad() { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; it = new TextField(); it.width = 500; it.height = 300; it.border = true; it.multiline = true; it.type = "input"; it.y = 35; addChild(it); var qb1:QuickButton = new QuickButton("Load File"); qb1.addEventListener(MouseEvent.CLICK, fileLoadHandler); addChild(qb1); var qb2:QuickButton = new QuickButton("Save File"); qb2.x = 10…

3DRotation Flash vs Silverlight

把Foundation Flash ActionScript3.0一書看完(奶伯強力推薦此書)
練習了3DRotation的效果, 有種"原理是這樣子的呀"的感覺
使用透視法即可做這這樣的2.5D效果, 個人覺得比使用Flash10的z效能來的好
同時也練習寫了silverlight2.0的版本, 使用C#來編寫。

Flash版:


silverlight版
原始碼下載:

FlashSourceCodeDownload
silverlightSourceCodeDownload

onemotion

朋友介紹的網站
該作者的幾個Demo作品, Flash功力真是了得呀
很值得學習。
特別是毛絨絨的蜘蛛, 有好心的網站能告訴我他的學名是什麼嗎?
很酷, 但林北怕蜘蛛, 為了學Flash,還是拼了啦。
還有畫筆, 把筆的粗細質感做的很好。
http://www.onemotion.com/

AS3XML班範例檔分享

奶綠老師所開設的AS3.0 XML
班範例檔分享
結合XML技術, 隨時可新增或是刪減圖片及圖說。
動態載入圖片並增加倒影效果。
使用滑鼠點擊或是鍵盤的左右鍵程動。


SourceCodeDown

關於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…

Flash10_Coverflow

這次使用Flash10新增3D效果來製作Coverflow效果
其實跟使用PV3D做法是一樣的, 就直接把MovieClip當成是Plane來使用即可。
可以使用MouseWheel來移動或是使用Keyboard的左右鍵。




SourceCodeDown

FlashDevelop 3.0.0 RC2 推出啦

FlashDevelop 3.0.0 RC2 推出啦
http://www.flashdevelop.org/community/viewtopic.php?f=11&t=4374
總於把調整字型和色彩的工能面版化了
而且還可以匯出成FD3的備份格式
到了另一台電腦只需要點二下安裝即可
太正點了

再補上一個超好用外掛, Duplicate
網站介紹:
http://jde.name/duplicate/
然後請不要下載該網站的檔案, 因為無法安裝在RC2上。
請下載下方的檔案:
http://jde.name/duplicate_temp.rar
1.copy duplicate.dll to this
C:\Documents and Settings\{username}\Local Settings\Application Data\FlashDevelop\Plugins
2.delete this folder :
C:\Documents and Settings\{username}\Local Settings\Application Data\FlashDevelop\Data\Duplicate
3.restart FD
4.按下F10可以看到設定面版左方多出了Duplicate選項, 不用修改, 我們直接使用預設
試打:
this.addEventListener(MouseEvent.ROLL_OVER, overHandler);
如果想要再偵聽rollOut時,以前我們會再重新打一次
現在只要按下Ctrl+Alt+D
就會自動產生:
this.addEventListener(MouseEvent.ROLL_OUT, outHandler);
真是太方便了啦。

再來介紹一下奶伯我的Coding設定
使用的字型為:Dina。
可以到這兒免費下載使用:
http://www.donationcoder.com/Software/Jibz/Dina/
奶伯我喜歡使用黑底白字, 配上Dina字型

我的FD設定檔可以到這兒下載使用:
黑底白字加Dina字型設定檔Download


白底黑字加Dina字型設定檔Download

PV3D_ButtonMode

在PV3D裡, 如果物件要有滑鼠指標, 只能對整個容器開啟buttonMode的
如果希望針對單一物件呢?
有二個方法可以使用。



方法1:偵聽物件的rollOver和rollOut, over時就開啟viewport.buttonMode = true;
out時就buttonMoe = false;
package { import flash.display.Sprite; import flash.events.Event; import org.papervision3d.cameras.CameraType; import org.papervision3d.events.InteractiveScene3DEvent; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.view.BasicView; [SWF(width = "950", height = "500", frameRate = "41", backgroundColor = "#000000", pageTitle = "milkmidi.com")] public class PV3DButtonMode extends BasicView { private var _greenPlane:Plane; private var _redPlane:Plane; public function PV3DButtonMode(){ super(0, 0, true, true, CameraType.TARGET); init3DObjects(); startRendering(); } private function init3DObjects():void{ var _redMat:ColorMaterial = new ColorMaterial(0xff0000); _redMat.interactive = true; _r…

Singleton不在是Singleton的小Bug

在寫專案時, 有時候會需要共用同一個類別檔
可以寫成static或是Singleton的方法
但今天奶伯我在專案上製作時, 寫了一個Singleton的類別
竟然被建構了二次, 真是無言.......
導至無法共用,
後來查了一查, 發現問題是出在Loader上
在使用Loader載入外部的swf檔時
需要再加上同意Domain的資訊
原來我一直忽略這個小地方, 記起來記起來

<br />var _loaderContent:LoaderContext = new LoaderContext();<br /> _loaderContent.applicationDomain = ApplicationDomain.currentDomain;<br /> _cardLdr.load(new URLRequest("ChildB.swf"), _loaderContent);<br />
SourceCodeDown

AS3_玩轉音效_SoundFX

在製做Flash專案的時候, 一直很容易被大家忽略的音效
或是想為載入的聲音加入特效時, 是較麻煩的
現在有一套名為SoundFX類別
能為聲音加上特效, 好比Delay或是echo等等之類
使用方法也是很簡單, 類似displayObject的filters的用法
sound.filters = [特效, 特效, 特效]
原文連結:
http://www.anttikupila.com/flash/soundfx-out-of-the-box-audio-filters-with-actionscript-3/

PV3D_沖縄水族館

日本的沖縄水族館網站,也是使用PV3D技術
但整個網站的配色就讓你真的覺得是在水中
主視覺用Plane拼成魚的樣式, 也滿有意思的
初部判斷是先用3DMax或Maya,建立一個簡單魚的模型,
然後再抓模型的每個座標點, 丟給Plane使用
有空再來研究看看
奶小茶我把他的程式碼研究一下,試作了類似的效果

3Dvs3D

原文連接:
http://labs.bigspaceship.com/2009/02/12/3s-vs-3d/

國外的作者做了一個比較
比較PV3D和Flash10的3D效能
還滿有趣的比較
看起來玩PV3D是對的
效能略勝一籌
還有原始檔可以下載喔