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

18,264 Responses

  1. Lazrcxj表示:

    Привет, друзья!
    Мы изготавливаем дипломы любой профессии по приятным ценам.
    rushkas-diploms.ru/kupit-diplom-s-reestrom

  2. Mazrndn表示:

    Добрый день!
    Приобретение диплома ПТУ с сокращенной программой обучения в Москве
    landik-diploms-srednee.ru/diplom-s-reestromkupit-kupit

  3. Sazrytd表示:

    Привет!
    Диплом для вас
    ic-info.ru/forum/user/166590

  4. Diplomi_rkEa表示:

    Здравствуйте!
    Купить документ о получении высшего образования можно у нас в Москве.
    rushkas-diploms.ru

  5. Lazrbaf表示:

    Здравствуйте!
    Мы изготавливаем дипломы любой профессии по выгодным ценам.
    rushkas-diplom.ru/kupit-diplom-instituta

  6. Marcusjam表示:

    гадание онлайн точное https://gadanie-online-free.ru

  7. Ask Me Anything: 10 Answers To Your Questions About
    ADHD Without Medication Best Adhd Medication For Women

  8. Trefmqa表示:

    Привет, друзья!
    Как быстро получить диплом магистра? Легальные способы
    diplomman.ru/diplom-tehnikuma
    Рады оказаться полезными!.

  9. Sazrqih表示:

    Привет, друзья!
    Диплом для вас
    rulezrp.listbb.ru/posting.php?mode=post&f=2&sid=6b1036417a7b8250a46a801b306799ec

  10. Charleshon表示:

    http://mexicopharmacy.win/# mexican online pharmacies prescription drugs
    buy ed meds

  11. 10 Buy Butt Plugs Tricks Experts Recommend Up The Butt Girl

  12. The Greatest Sources Of Inspiration Of Comfy Couches For Sale Sofas On sale uk

  13. Trefcmj表示:

    Привет, друзья!
    Приобретение школьного аттестата с официальным упрощенным обучением в Москве
    mans-diplomxx.ru/kupit-diplom-v-ufe
    Поможем вам всегда!.

  14. Charleshon表示:

    http://edpillpharmacy.store/# online ed drugs
    online ed meds

  15. DouglasGed表示:

    mexican rx online: Best pharmacy in Mexico – mexican online pharmacies prescription drugs

  16. Mazrumt表示:

    Привет!
    Как избежать рисков при покупке диплома колледжа или ПТУ в России
    diplomrushka.ru/kupit-diplom-vracha

  17. Lazrhau表示:

    Добрый день!
    Мы изготавливаем дипломы психологов, юристов, экономистов и любых других профессий по приятным тарифам.
    rushkas-diploms.ru/kupit-diplom-v-kazani

  18. Dale表示:

    Greetings from Idaho! I’m bored at work so I decided to check out your website on my
    iphone during lunch break. I love the knowledge you present here and
    can’t wait to take a look when I get home. I’m surprised at how fast your blog loaded on my
    cell phone .. I’m not even using WIFI, just 3G .. Anyways, amazing site! https://another-ro.com/forum/profile.php?id=337218

  19. Mazrvuo表示:

    Здравствуйте!
    Официальное получение диплома техникума с упрощенным обучением в Москве
    arusak-diploms-srednee.ru/kupit-diplom-medicinskogo-uchilishha

  20. Mazrjty表示:

    Здравствуйте!
    Как получить диплом техникума с упрощенным обучением в Москве официально
    diplomrushkan.ru

  21. Charleshon表示:

    https://edpillpharmacy.store/# buy ed meds
    cost of ed meds

  22. Lazruou表示:

    Здравствуйте!
    Заказать диплом о высшем образовании.
    mans-diplomxx.ru/kupit-diplom-ryazan

  23. Lazrhyv表示:

    Привет!
    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по разумным тарифам.
    rushkas-diplom.ru/kupit-diplom-stroitelya

  24. Trefhpo表示:

    Здравствуйте!
    Аттестат школы купить официально с упрощенным обучением в Москве
    diplomyx-man.ru/diplom-tehnikuma
    Будем рады вам помочь!.

  25. Diplomi_rbEa表示:

    Здравствуйте!
    Заказать документ университета вы можете в нашей компании в Москве.
    rushkadiplomik.ru

  26. Mazrrdj表示:

    Привет!
    Полезные советы по безопасной покупке диплома о высшем образовании
    diplomrushkan.ru

  27. карниз электрический http://elektrokarniz1.ru/ .

發佈留言

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