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

17,201 Responses

  1. Sazrtev表示:

    Быстрая схема покупки диплома старого образца: что важно знать?
    windows1.listbb.ru/viewtopic.php?f=3&t=784

  2. Jamescix表示:

    1xbet зеркало 1xbet скачать 1xbet

  3. Профессиональный сервисный центр по ремонту компьютеров и ноутбуков в Москве.
    Мы предлагаем: чистка macbook pro 16
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  4. Профессиональный сервисный центр по ремонту компьютеров и ноутбуков в Москве.
    Мы предлагаем: ремонт macbook pro 16
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  5. Профессиональный сервисный центр по ремонту компьютеров и ноутбуков в Москве.
    Мы предлагаем: ремонт apple macbook
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  6. Профессиональный сервисный центр по ремонту телефонов в Москве.
    Мы предлагаем: сервис ремонта телефонов
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  7. ugzhnkchr.ru表示:

    Don’t Buy Into These “Trends” Concerning Mini Cooper Key Fob Replacement replacement mini Key fob cost Uk
    [ugzhnkchr.ru]

  8. Sazrtok表示:

    Как купить аттестат 11 класса с официальным упрощенным обучением в Москве

    shockmusik.ru/page/8

  9. Sazriha表示:

    Приобретение школьного аттестата с официальным упрощенным обучением в Москве

    yobasket.es/es/perfil-usuario/pluginclass/cbblogs?action=blogs&func=show&id=123

  10. Ernestexove表示:

    пин ап зеркало: пин ап зеркало – пин ап вход

  11. Профессиональный сервисный центр по ремонту компьютеров и ноутбуков в Москве.
    Мы предлагаем: ремонт macbook pro
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  12. Diplomi_dfoi表示:

    аттестат 11 класс купить prema-diploms.ru .

  13. Sazrabk表示:

    Как получить диплом о среднем образовании в Москве и других городах
    network-6063768.mn.co/posts/70000542

  14. Diplomi_mqEn表示:

    купить диплом в нижневартовске orik-diploms.ru .

  15. Kolyaska_edea表示:

    Идеальное решение для активных родителей – Peg Perego
    peg perego book cross купить peg perego book cross купить .

  16. Kolyaska_qsea表示:

    Сделайте прогулки с малышом комфортными и яркими с Peg Perego
    peg perego book plus 2 в 1 https://kolyaska-peg-perego.ru/ .

  17. Kolyaska_uwea表示:

    Дизайнерские решения для вашего малыша
    peg perego book plus люлька https://kolyaska-peg-perego.ru/ .

  18. Diplomi_jhel表示:

    купленный диплом купленный диплом .

  19. Diplomi_ytel表示:

    купить диплом техникума ссср в нижнем тагиле man-diploms.ru .

  20. Diplomi_fgMl表示:

    купить диплом техникума в челябинске arusak-diploms.ru .

  21. Сломался телефон, думал покупать новый, но решил попробовать отремонтировать. Обратился в этот сервисный центр и не пожалел. Профессионалы своего дела быстро восстановили мой телефон. Рекомендую посетить их сайт: ремонт телефон.

  22. Sazrlfo表示:

    Как избежать рисков при покупке диплома колледжа или ВУЗа в России

    chaodisiaque.com/forum/viewtopic.php?pid=22027

  23. Diplomi_eqkl表示:

    купить диплом фитнес russa-diploms.ru .

  24. Diplomi_poMl表示:

    купить диплом отзывы купить диплом отзывы .

  25. Diplomi_wckl表示:

    купить диплом техникума московская область russa-diploms.ru .

發佈留言

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