2008年9月4日 星期四

製作自已的 flash 影片播放面版

在flash cs3裡要自已做一個播放面版其實是很簡單的事,雖然在flash cs3裡有一堆內建的面版可以選擇,但真正要拿來做商業應用大家應都會自已再重做一個,所以接下來就描述一下怎麼去修改出一個屬於自已的播放面版。

1.首先做一個播放外框、播放(暫停)按鈕、音效按鈕,如下圖

2.接下來我們的video跟播放bar都要用flash cs3裡面的內建組件 FLVPlayback與SeekBar來完成。



3.拉出FLVPlayback組件與SeekBar組件到場景上,在FLVPlayback組件參數設定裡把FLVPlayback的skin設定成「無」,因為我們不用flash cs3內建的播放面版。





4.接下來就是修改組件,把SeekBar組件修改成自已的風格。在SeekBar上按滑鼠右鍵->編輯,會進到SeekBar組件裡,裡面有二格影格如下圖,圖層說明如下:

script圖層
this.handleLinkageID = "SeekBarHandle"; //設定播放頭
this.handleLeftMargin = 2; //SeekBarHandle左偏移(不用動)
this.handleRightMargin = 2; //SeekBarHandle右偏移(不用動)
this.handleY = 11;//SeekBarHandle上下偏移量
assets圖層:SeekBarHandle(影片播放的磁頭)
progress圖層:播放bar
outline圖層:播放bar的外框



修改progress跟assets圖層裡的元件如下圖所示。可看到修改assets裡的SeekBarHandle後位置有一點下面,所以這時要調整scripts圖層裡的this.handleY 改成 this.handleY=5這樣播放的紅色磁頭就會在中間。



5.接下來就要下指令去控制影片播放了場景上的元件分別給myVideo、player_mc、sound_mc、mySeekBar的名稱,然後加入底下程式碼。

import fl.video.FLVPlayback;
import fl.video.VideoEvent;

var sound:SoundTransform;//sound
sound = myVideo.soundTransform;
mySeekBar.width = 200;
myVideo.seekBar = mySeekBar;
myVideo.source="test.flv";//影片位置

/*影片播完*/
myVideo.addEventListener(VideoEvent.COMPLETE, goCOMPLETE);
function goCOMPLETE(e:VideoEvent):void {
myVideo.seek(0);
player_mc.gotoAndStop(2);
}

/*sound_mc*/
sound_mc.buttonMode = true;
sound_mc.addEventListener(MouseEvent.CLICK, soundClick);
function soundClick(evt:MouseEvent):void
{
var tmp:MovieClip = (evt.target as MovieClip);
if( tmp.currentFrame == 1 )
{
sound.volume = 0;
myVideo.soundTransform = sound;
tmp.gotoAndStop(2);
}else{
sound.volume = 1;
myVideo.soundTransform = sound;
tmp.gotoAndStop(1);
}
}

/*player_mc*/
player_mc.buttonMode = true;
player_mc.addEventListener(MouseEvent.CLICK, playerClick);
function playerClick(evt:MouseEvent):void
{
var tmp:MovieClip = (evt.target as MovieClip);
if( tmp.currentFrame == 1 )
{
myVideo.pause();
tmp.gotoAndStop(2);
}else{
myVideo.play();
tmp.gotoAndStop(1);
}
}

stop();

6.這樣就完成一個flv flash player了,其實完成這樣的flash player不難,把播放外框跟按鈕整修的漂亮一點就好了 ^^

demo  download

2008年9月3日 星期三

Sorenson Squeeze 5 簡易教學

最近公司因為要將影片轉檔成flv所以就建議買了Sorenson Squeeze 5來用,其實市面上還有一些不錯的轉檔軟體,像 Flix Pro riva,還有opensource的ffmpeg都是不錯的選擇,不過這一套是要給pm使用所以就選擇了Sorenson Squeeze 5功能較符合需求。

安裝就點二下然後一直下一步就完成所以就不在此說明了。安裝好了會先要求你註冊,輸入序號再上網註冊就完成了。

1.在使用前有一個事情要注意就是如果作業系統是非英語系的,請把要轉的檔案放在 c:\下或別的槽位,因為Sorenson Squeeze的軟體不支援中文,放在桌面上或檔名是中文會顯示錯誤。

2.接下來就依照下列圖片的步驟來操作,步驟1:先選擇 import file插入影音檔。

3.步驟2:在畫面上就會出在影片的內容及呎吋,在這裡可以播放影片或剪輯影片要輸出的長度。

4.步驟3:選擇左手邊要輸出的格式,這裡當然是輸出flv的格式。如果是要放在web上播放的影片檔建議使用F8_FastStart_256K、F8_FastStart_512k、F8_FastStart_768K這三種格式就夠了,接下來把要輸出的格式拉到右手邊,就會出現步驟4的畫面。

5.步驟5:按下SQUEEZE IT!,接下來就等待轉檔完成就好。



2008年9月2日 星期二

取得 as3 裡的 root 階層變數

如果你是用Flash cs3的as3寫程式,那就表示已經沒有root階層可以使用了。太多數的美術人員對於沒有root階層都非常的不習慣,原本做動畫還可以自已控制一些語法,現在反而非常的難處理,甚至不太願意去轉換到as3。所以我測試了一下如何去取得root階層的變數希望對有些這困擾的人有一些幫助,以下是取得 root階層變數的一些用法。

第一種
this.parent['a']; //取得上一層的變數a
this.parent['func']();//取得上一層func的函式

笫二種
MovieClip(stage.getChildAt(0))['a']; //取得root變數a,有點像之前的絕對路徑用法_root.a
MovieClip(stage.getChildAt(0))['func']();//呼叫root的func的函式

第三種(這一種應該會最受歡迎吧 =..=,但不在同stage這一種方式就會抓不到變數)
var _root:Object = root;
_root.func();

有人可能為有疑問為什麼第二種用法都要用MoiveClip包起來,因為getChildAt是DisplayObjectContainer,需要先轉換型別。