2009年12月28日 星期一

米蘭數位徵Flash ActionScript互動技術助理

Flash ActionScript互動技術助理(需求人數:1人)
徵求對於Flash互動程式設計有熱情夥伴
如果你:
1. 熟悉AS2或略懂AS3
2. 期望和一個專業團隊一同合作
3. 對於互動技術有強烈的企圖心及學習心
歡迎加入我們!

這份工作的內容主要是:
1. 編寫一般互動機制的flash
2. 協助資深互動設計師完成專案

面試時請提供自己的作品做為參考

聯絡人:jason@mail.medialand.com.tw
原文連結:
http://medialand.com.tw/blog/article.asp?id=1007

FlashCS4+MVC+CoverFlow效果

FlashCS4+MVC+CoverFlow效果
最近K了一些MVC的文章和技術
發現這樣的規畫真的很好用
Model:記錄變數,數值,發送事件。
View:跟Model要資料, 然後呈現。
Controller:用來改變Model的數值。
再加上之前學生的提到奶老師我所寫的CoverFlow跟真的效果有些不同
之前製作的方法:
是直接讓物件Tween到目標位置,這樣就不會整個連慣。
前一版:
http://milkmidi.blogspot.com/2009/03/flash10coverflow.html
現在改成新的寫法
點選任何物件,一定都會經過中間變大的過程。
Thumbnail - Click me




2009/12/28新增
點擊正中間的圖片時, 會超連結, 網址定義在xml裡, 請重新下載原始碼

2009年12月26日 星期六

Progression3 Verbose中文說明檔

Progression在使用時
只需要開啟
Verbose.enabled = true;
即可以有debug功能, 完整的場景轉場的資訊, 可惜只有日文版本才有
奶小茶我補上了中文說明, 這樣學習起來更方便
ProgressionVerbose中文說明修正檔
下載後, 解壓縮, 將 jp 資料夾 copy 到本來的類別路徑蓋掉即可
我只有增加
jp\progression\core\debug\VerboseMessageConstants.as
這裡的說明而己, 其他都沒更動。

如果發現Command的資訊太多, 只要濾掉Commnad,不要trace就好
Verbose.filteringCommand();

2009年12月23日 星期三

FLASH IFrame

FLASH能支援的html標籤有限,即使用了FLASH Player10,還是不能完整的呈現
那就在html動手腳吧
原理其實就是用div加上Iframe,只是呼叫的動作交給FLASH
Flex版可以參考這個網站:
http://code.google.com/p/flex-iframe/
奶小茶我改成用FLASH製作
注意喔, 因為swf wmode使用了opaque或是transparent模式
在特定的Browser下不能輸入中文字
as3 sourceCode Download
as2 sourceCode Download

2009年12月10日 星期四

facebook share小心得

最近每個案子都一定要來非死不可一下
也來分享一下最近的share小心得
先了解一下share的原理:
http://www.facebook.com/sharer.php?u=+ 要分享的網址 + "&t=" + 標題;
當使用者按下上方這段網址時, 就會自動連到facebook, 如果是登入的狀態下, 就可以看到下方的畫面

網址:就是上方的 要分享的網址
縮圖:只要在你的網站上加入一段meta的資訊, 如下
<link rel="image_src" type="image/jpeg" href="http://www.absolut-rock.com.tw/images/fb200x150.jpg">
只要把href換成你的圖片路徑即可
這裡有個小地方要注意, 如果facebook抓到一次這張圖後, 會被快取住, 之後再換圖片別人還是會看到舊的圖片喔。
決解方法就是換一個分享路徑, 比如說加個/index.html 或是 /index.aspx之類的,讓facebook認為是新的網站。
內文:會去抓網站裡的meta description的內文。
但是不是就變成每個人按下時, 圖片和內文都是一樣的呢?
如果是直接分享, 當然是呀,但我們可以用一個小技巧, 做到每個人分享時都是客製化的縮圖和內文
寫一隻轉址的程式就可以
本來分享的網址是:xxxx/index.aspx
換成xxxx/fb.aspx,再多帶一些參數
好比:fb.aspx?id=3,
該程式只要判斷id值是什麼, 然後該對映的圖片和meta丟到網頁裡
同時加寫轉址回去到index.aspx
因為檔名不同了, facebook會認為是新的路徑, 就會來抓新的資訊, 但不會被轉址
而使用者點了該網址, 就又會回到正式的網址上。就可以達到這樣的功能
還有一點, 全flash的網站, 我們經常會使用swfAddress來做到單元獨立網址的功能。
但#號會被facebook給濾掉, 就無法正常使用
一樣可以用轉址的方法, 轉回正確的網站。
可以參考
http://www.absolut-rock.com.tw
我就是用這樣的轉址方法決解#號問題

2009年12月4日 星期五

阿奶SlideMove 2號組件

阿奶ScrollBar 1號
接著發怖阿奶SlideMove 2號,
功能需求很單純, 在一定的範圍內, 對指定的物件依滑鼠座標位置來滑動
1.安裝mxp檔:
http://milkmidi.googlecode.com/files/milkmidiComponents.mxp
2.開啟組件面版:


3.將組件拉到場景上, 此時一樣有對映的參數來做即時preview,
直接對該組件縮放即可調整移動的範圍

4.開啟參數面版, 選擇移動方向, 實體物件。

5.配置完成啦

2009年12月2日 星期三

Flash組件一步一步來

這篇來分享一下關於製作Flash的組件
在這兒我們練習製作一個定位用的組件
參數面版上有定位的基準點和偏移值。
組件本身也是一個 MovieClip 類別, 因為要對stage做偵聽
所以一開始要去偵聽addedToStage事件。
1.AlignComponent.as
package milkmidi.tutorial {  
import flash.display.MovieClip; 
import flash.events.Event; 
public class AlignComponent extends MovieClip{  
public function AlignComponent()  {   
addEventListener(Event.ADDED_TO_STAGE , _addedToStageHandler);
addEventListener(Event.REMOVED_FROM_STAGE , _removedFromStageHandler);  
}  
private function _addedToStageHandler(e:Event):void {
removeEventListener(Event.ADDED_TO_STAGE, _addedToStageHandler);   
stage.addEventListener(Event.RESIZE , _resizeHandler);   
trace(this, "_addedToStageHandler");
_resizeHandler();
}  
private function _resizeHandler(e:Event = null):void {    
}  
private function _removedFromStageHandler(e:Event):void {
removeEventListener(Event.REMOVED_FROM_STAGE, _removedFromStageHandler);   
stage.removeEventListener(Event.RESIZE , _resizeHandler);
}   
} 
}

2.先在畫面上繪製一個色塊(50x50),將其轉成MovieClip元件
同時在Class欄位填上類別路徑


3.在元件庫上選擇 Component Definition

此時會出現 Component Definition 面版


4.在 as 檔設定參數
這兒的參數之後是要對映到參數面版上的
使用的tag為[Inspectable( name = "變數名", type = "類型", defaultValue = "預設值" )]
變數名稱是對映到set的變數, 可以使用的類型有List,String,Number等。
public function get align():int { return _align; }  
[Inspectable( name = "align", type = "List", enumeration = "9,6", defaultValue = "9" )]  
public function set align(value:int):void {
_align = value;
trace("align:" + _align); 
_resizeHandler();
}

public function get offsetX():int { return _offsetX; }

[Inspectable( name = "offsetX", type = "Number", defaultValue = "0" )]  
public function set offsetX(value:int):void {
_offsetX = value;
trace("offsetX:" + _offsetX);   
_resizeHandler();
}
5.在面版上輸入對映的參數
Name:面版上的說明, 跟類別裡程式碼沒任何關系, 可以打上中文
Variable:對映類別裡的參數
Value:預設值
Type:類別
同時在Class欄位也打上寫好的類別檔路徑


開啟 Component Inspector面版, 點擊一下組件, 此時參數就出現了

SourceCodeDownload

當stage Resize時, 會發生事件, 此時就可以一起更新座標值
在這就奶老師就不寫if else判斷 align的值。
private function _resizeHandler(e:Event = null):void {  
parent.x = stage.stageWidth + _offsetX;
parent.y = 0;
}

6.這時候就可以做一個元件來測試


7.更換livepreview元件
製作一個新的flash, 在裡面繪製圖型, 發怖成.swf檔
開啟 Component Definition面版
按下 中間的 Live preview , 右邊有個Set按扭。
第三個選項:Live Preview with .swf file embedded in .fla file
並將路徑填入

此時的組件就換上你的設計檔了。


8.更換元件庫裡的小Icon
大小:18x18, jpg或是png格式
開啟 Component Definition面版
在Description下方有個圖示按下他


選擇Custom, 找到你要放的小圖示

完成啦


9.匯出SWC
在元件庫上, 找到剛剛製作好的組件, 按下右鍵, 選擇 Export SWC File


10.包裝成mxp
到這兒我們的組件己經完成了, 接著要再包裝成mxp檔,好方便讓其他使用者安裝
包裝mxp使用的軟體是Adobe Extension Manager , 在這奶老師使用的版本為CS3
寫一份xml文件來定義mxp裡有什麼, 其副檔名為.mxi
最重要的是這段,
    
    



source:要包裝的檔案
destination:安裝好的檔要放置到flash裡的那個資料夾下
因為是組件,所以要放到 $flash/Components下, 而tutorials資料夾名稱可以換上自己的
選擇包裝擴充功能, 將mxi包裝成mxp, 然後可以安裝mxp檔了

重新啟動Flash , 在Components面版就會出現 剛剛製作好的組件, 拉到場景上就可以使用

轉貼文章請注明出處:http://milkmidi.blogspot.com/2009/12/flash.html
Source Download