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,407 Responses

  1. OLaneevige表示:

    I appreciate, lead to I discovered exactly what I used to be having a look for. You have ended my 4 day long hunt! God Bless you man. Have a great day. Bye
    A huge art museum can be found here: https://en.gallerix.ru/

  2. Danrmao表示:

    Добрый день!
    Мы изготавливаем дипломы любой профессии.
    snupto.com/read-blog/3968_vy-hotite-priobresti-diplom-u-proverennogo-proizvoditelya-zahodite
    Поможем вам всегда!.

  3. Uazrgun表示:

    Привет!
    Приобрести диплом университета.
    network-2295034.mn.co/posts/61724186

  4. The Reasons Double Pushchair Sale Has Become Everyone’s
    Obsession In 2023 Double Stroller Sale

  5. частный оптимизатор seo http://www.prodvizhenie-sajtov15.ru .

  6. Lazrhio表示:

    Привет!
    Купить диплом любого ВУЗа.
    k96586v0.beget.tech/component/comprofiler/pluginclass/cbblogs?action=blogs&func=show&id=140

  7. Sazrodz表示:

    Добрый день!
    Диплом бакалавра
    fabnews.ru/forum/showthread.php?p=80187#post80187

  8. What’s The Job Market For Patio Door Glass Repair Professionals Like?

    patio door glass repair (bookmarkzones.trade)

  9. Where Will Used Mobility Scooters Near Me Be One Year From This Year?
    buy a motor scooter near Me

  10. Trefrhu表示:

    Добрый день!
    Реально ли приобрести диплом стоматолога? Основные этапы
    nigerianelections2019.com/купить-диплом-проверенные-способы
    Рады оказаться полезными!.

  11. Mazrbep表示:

    Привет, друзья!
    Процесс получения диплома стоматолога: реально ли это сделать быстро?
    rushkadiplomik.ru

  12. 20 Trailblazers Are Leading The Way In Veterans Disability Attorney veterans disability lawsuits (https://www.valeriarp.com.tr/index.Php?action=profile;u=94057)

  13. Trefxsa表示:

    Привет!
    Купить диплом о среднем полном образовании, в чем подвох и как избежать обмана?
    property25.org/где-купить-диплом-о-высшем-образовани
    Будем рады вам помочь!.

  14. Mazrpsa表示:

    Привет!
    Как официально купить диплом вуза с упрощенным обучением в Москве
    rushkadiplomik.ru

  15. Diplomi_syEa表示:

    Добрый день!
    Купить документ о получении высшего образования вы сможете у нас.
    ast-diplom.com/kupit-diplom-bakalavra-ili-specialista

  16. Lazrryz表示:

    Здравствуйте!
    Заказать диплом ВУЗа.
    telegra.ph/Bolshoj-katalog-dokumentov-v-izvestnom-internet-magazine-07-04

  17. Diplomi_icEa表示:

    Здравствуйте!
    Заказать документ о получении высшего образования вы можете в нашей компании в столице.
    diploms-x.com/kupit-diplom-bakalavra-ili-specialista

  18. Reent表示:

    A Jon Snow sequel show is happening at HBO with Kit Harington returning, but it could very easily just end up feeling like Game of Thrones season 9. Based on George R.R. Martin’s “Fire & Blood,” HBO has said “House of the Dragon” is “set 200 years before the events of ‘Game of Thrones,’ tells the story of House Targaryen.” The interiors of the episode were filmed at the Paint Hall studios, close to Belfast. The area of the Castle Ward estate, also in Northern Ireland, was used to film on location the Stark and Lannister camps, the Crossing, and the battlefields of the Green Fork and the Whispering Woods. A Jon Snow sequel show is happening at HBO with Kit Harington returning, but it could very easily just end up feeling like Game of Thrones season 9.
    https://wwndirectory.com/listings254881/indonesia-games
    1048 files, last one added on Apr 27, 2015Album viewed 5105 times Photo by Helen Sloan courtesy of HBO Nonetheless, this is still an exceptionally high quality season of TV. It more than meets the criteria of intelligent writing, great acting, exciting action and awe-inspiring scale that was established by the other four seasons. The episode which best embodies this is the truly breathtaking ‘Hardhome’. Game of Thrones Season 5 starts with “The Wars to Come” — there are 20 more episodes to come in this Binge Mode recap series. On this podcast episode, Mallory Rubin and Jason Concepcion explore the theme of tough conversations and dissect Cersei’s defining prophecy, then crown a conspirator as the episode’s champion. Most recently: Bill Simmons on which NFL teams will claim the up-for grabs playoff spots

  19. RobertHaumn表示:

    tamoxifen men: nolvadex for sale – does tamoxifen cause bone loss

  20. Mazrdlm表示:

    Привет, друзья!
    Как купить аттестат 11 класса с официальным упрощенным обучением в Москве
    mandiplomiks.ru

  21. Danrrzx表示:

    Привет!
    Мы предлагаем дипломы любой профессии.
    stlvolleyball.com/купить-диплом-высшее-какие
    Рады оказаться полезными!.

  22. Промокоды на любые категории товаров https://promokodbar.ru/ .

  23. See What Frost Free Fridge Freezer 50/50 Sale Tricks The Celebs Are Using Fridge Freezer 50/50 sale

發佈留言

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