Flash翻轉式影片播放器

這是一個結合Tweener和影片的範例，主要的目的是利用Flash載入外部視訊來播放，順帶利用ActionScript來做畫面的翻轉，翻轉後可以詳細介紹該影片的資訊，或是版權宣告等，先看看範例頁面，檔案下載，要製作這樣的動畫，首先要先準備一段影片檔，我的範例中所準備的是利用數位相機拍攝出來的影片，再利用Adobe Media Encoder轉換成大小為640×360，F4V格式的影片，再利用Flash內建的組件FLVPlayback來播放。

資料夾檔案結構如下：

• Caurina是Tweener Class大家可以到Tweener的官網下載，前述文章有連結。
• 3dflip.fla、3dflip.html、3dflip.swf是Flash的原始檔、網頁檔以及播放檔。
• Shengxing為本範例所使用到的影片檔。
• SkinUnderPlaySeekMute為播放器的面板檔。

而在下圖是在Flash中的結構：

• container是包含播放器、解說文字的影片片段，該元件包含FLVPlayback播放器組件（Video）和解說文字（Text）兩個圖層。
• FLVPlayback是Flash內建的影片播放器組件。
• loading影片載入時會出現的文字。
• spin影片右上角旋轉的按鈕。
• text包含有介紹文字的影片片段，文字中亦製作有超連結（維基百科）。
• vid如果有自己的影片想要更換，請進入名為Vid的影片片段中利用屬性面板修改。

本範例所包含的ActionScript都在場景中的第一個影格，程式碼如下：

import caurina.transitions.*;
import fl.video.*;

con.visible = false;

var flv:FLVPlayback = con.vid.flvp;
flv.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, onStart);

function onStart(e:Event):void
{
	con.visible = true;
	loading.visible = false;
}

con.vid.spin.addEventListener(MouseEvent.CLICK, cl);
con.tclip.spin.addEventListener(MouseEvent.CLICK, cl);

var isTurning:Boolean = false;

function cl(e:Event):void
{
	if(!isTurning)
	{
		Tweener.addTween(con, {rotationY:con.rotationY+180,time:1, onComplete:function(){isTurning=false;}});
		isTurning = true;
	}
}

addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void
{
	if(con.rotationY > 90 && con.rotationY < 270)
		con.addChild(con.tclip);
	else
		con.addChild(con.vid);
	if(con.rotationY >= 360) con.rotationY = 0;
}