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...

10,337 Responses

  1. Ronaldpsymn表示:

    https://nolvadex.life/# buy tamoxifen

  2. RandallTaulp表示:

    lisinopril online pharmacy: lisinopril 20mg – prinzide zestoretic

  3. RandallTaulp表示:

    buy ciprofloxacin over the counter: buy cipro cheap – ciprofloxacin

  4. Davidtes表示:

    tamoxifen postmenopausal nolvadex only pct nolvadex d

  5. RandallTaulp表示:

    get propecia without rx: order generic propecia no prescription – buying generic propecia no prescription

  6. WilliamRhype表示:

    https://ciprofloxacin.tech/# cipro ciprofloxacin

  7. Hcslfd表示:

    order famciclovir 250mg for sale – buy famvir pill buy valcivir 500mg without prescription

  8. Davidtes表示:

    buy cytotec over the counter cytotec buy online usa purchase cytotec

  9. WilliamRhype表示:

    https://finasteride.store/# cost cheap propecia without dr prescription

  10. EarnestAvada表示:

    В нашем обществе, где диплом – это начало успешной карьеры в любом направлении, многие ищут максимально простой путь получения образования. Наличие официального документа об образовании сложно переоценить. Ведь именно он открывает двери перед всеми, кто желает вступить в профессиональное сообщество или учиться в ВУЗе.
    В данном контексте наша компания предлагает максимально быстро получить этот важный документ. Вы можете купить диплом старого или нового образца, что является удачным решением для всех, кто не смог завершить образование или утратил документ. Все дипломы изготавливаются с особой тщательностью, вниманием к мельчайшим элементам. В итоге вы сможете получить продукт, полностью соответствующий оригиналу.
    Превосходство подобного подхода состоит не только в том, что вы быстро получите свой диплом. Процесс организован комфортно и легко, с нашей поддержкой. Начав от выбора необходимого образца до точного заполнения личной информации и доставки по стране — все находится под полным контролем наших специалистов.
    Всем, кто хочет найти быстрый способ получить необходимый документ, наша компания готова предложить отличное решение. Приобрести диплом – это значит избежать долгого обучения и сразу переходить к личным целям, будь то поступление в ВУЗ или старт карьеры.

    https://diploman-russiyan.com

  11. Davidtes表示:

    cheapest price for lisinopril india buy lisinopril 20 mg without prescription lisinopril 5mg buy

  12. RandallTaulp表示:

    buying propecia tablets: get cheap propecia without a prescription – generic propecia prices

  13. RandallTaulp表示:

    ciprofloxacin generic: buy cipro online without prescription – cipro online no prescription in the usa

  14. Davidtes表示:

    cheap lisinopril 40 mg lisinopril 20 mg brand name lisinopril 20 mg tablets

  15. RandallTaulp表示:

    buy generic ciprofloxacin: buy generic ciprofloxacin – ciprofloxacin 500 mg tablet price

  16. WilliamRhype表示:

    http://nolvadex.life/# tamoxifen rash pictures

  17. Marcelabelp表示:

    http://mexicoph24.life/# mexican rx online

發佈留言

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