Flash翻轉式影片播放器

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

資料夾檔案結構如下:

3D Video Flip 檔案結構

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

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

3D Video Flip 動畫結構

  • 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;
}

You may also like...

348 Responses

  1. If you don’t mind, where do you host your weblog? I am looking for a very good web host and your webpage seams to be extremely fast and up most the time…

  2. An impressive share, I just given this onto a colleague who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is highly helpful for me. Big thumb up for this blog post!

  3. minoxidil propecia propecia cost uk decreasing estrogen while on propecia how much propecia to take

  4. avodart vs propecia finasteride for sale viagra plavix cialis lipitor synthroid levitra propecia where can i get propecia cheaper

  5. Spot on with this write-up, I truly believe this website requirements a lot much more consideration. I’ll probably be once more to read much much more, thanks for that info.

  6. I was suggested this website by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my difficulty. You are wonderful! Thanks!

  7. This is an awesome entry. Thank you very much for the supreme post provided! I was looking for this entry for a long time, but I wasn’t able to find a honest source.

  8. Have you always been concerned about these issues?

  9. Howdy! I simply wish to give a huge thumbs up for the great information you have here on this post. I will be coming again to your weblog for extra soon.

  10. This contained some excellent tips and tools. Great blog publication.

  11. This design is spectacular! You obviously know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Wonderful job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!

  12. albuterol 90表示:

    lloyds pharmacy kamagra ajanta kamagra 100 kamagra 100mg oral jelly für männer kamagra 100 mg oral jelly what is it side affects

  13. hamcwase表示:

    hydroxychloroquine 200mg for arthritis pain https://www.hydroxychloroquinex.com/

  14. azithromycin 250mg tablets azithromycin 250 mg what are the side effects of zithromax how long does it take azithromycin 500mg to clear chlamydia

  15. I don’t know if it’s just me or if everybody else experiencing issues with your site. It appears as though some of the written text on your content are running off the screen. Can someone else please provide feedback and let me know if this is happening to them as well? This could be a problem with my web browser because I’ve had this happen before. Appreciate it

  16. Your thing regarding creating will be practically nothing in short supply of awesome. This informative article is incredibly useful and contains offered myself a better solution to be able to my own issues. Which can be the specific purpose MY PARTNER AND I has been doing a search online. I am advocating this informative article with a good friend. I know they are going to get the write-up since beneficial as i would. Yet again many thanks.

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。