FLASH網站常用預載特效剖析

來源:互聯網
上載者:User
特效

  Flash網站以它的構思精巧,絢麗多彩為大多數前衛設計者偏愛。它給人帶來的視覺,音效的衝擊,與傳統網頁的設計比較,有巨大的吸引力。鑒於網速的問題,我們需要考慮製作loading來完善flash網站。假如有很多的外部wsf檔案需要載入進主swf檔案,要怎麼樣才能實現呢?今天,我們就來探討一下類似國外著名網站2advancwww.2advanced.com)預載頁面的製作方法。(具體效果登陸該網站觀摩)
  先來學習一下一般loading的製作思路。它是用actionscript來實現。建立一層,這層專門放action,
  第一幀,
  ifframeloaded ("情境", frame) {//假如情境中地禎數已經載入
  goto and play(“start”) //跳至並播放某某禎(自己設定的幀標籤)
  }
  第二幀,
  goto and play("情境1", 1)//跳至並播放第一禎迴圈
  再加上一個load的mc迴圈播放在這兩幀的中間,就ok了。很多新手對於loadmovie調用的外部swf在主swf裡的定位很疑惑。其實很簡單,如果是loadmovienum進來的,在調用的外部swf檔案第一幀加as:this._x=100;this._y=200;(該座標就是你要求外部swf在主swf情境裡的位置座標);如果是loadmovie語句調用swf到一個空mc,只要把空mc放到你要求外部swf所處的位置的左上方,比如:座標(100,200)。
  如果要實現精確下載的話,flash 5上就有了美妙的函數:getbytesloaded() 和 getbytestotal()。其中:getbytesloaded()可以讓我們得到已經下載的位元組數,而getbytestotal()則告訴我們該檔案一共有多少位元組。我們在主情境做一個動態文本設定變數為input,bar為一矩形長條的執行個體名,其長度為100,然後在舞台上將bar長度變為1。在第一幀上加as:
_root.onload = function () {
totalbytes = _root.getbytestotal();
}
_root.onenterframe = function () {
loadedbytes = _root.getbytesloaded();
percentdone = int((loadedbytes/totalbytes)*100);
//顯示下載進度為number%
output = percentdone+"% of file loaded";
//進度條的x尺寸為下載進度percentdone
_root.bar._xscale=percentdone;
// 如果load完畢
if (percentdone >= 100) {
// goto frame 2
this.gotoandstop (2);
// 終止這個迴圈
_root.onenterframe = null;
}
};
一般的邏輯思路見下圖:


好了,通過上面兩種loading的製作,相信你已經熟悉了loading的步驟。我們開始正式的preload製作。
  第一:建立影片。大小為550×400,顏色為黑。用矩形工具畫一個長寬分別為54,18的矩形。按ctrl+f8轉變為按鈕。為了美化,可以在rollover區按f6建一主要畫面格,把矩形的顏色變為紅色。
  第二:把我們剛做好的按鈕從庫裡面拉到編輯地區。一共拉出來3個(這是做元件的好處,可以重複使用),把它們水平排列。建立一層,選擇文字工具在每個按鈕中間分別寫上:
  button 1,button 2,button 3,字型顏色為黑色。
  第三:在編輯地區中畫一個無填充色、藍色邊框的矩形,開啟屬性面板,將其長,寬值輸入550,184。座標為0,180,按斷行符號確定。按ctrl+f8將其轉變為影片剪輯,執行個體名起為content。同樣的方法建立一新元件名為control,在第二幀建立空白主要畫面格,在編輯地區畫一個白色矩形,長寬都為0.5,座標為(0,0)。在第四十幀上按f6建主要畫面格。在第二十幀上建主要畫面格,將該矩形長寬定為550,184。其座標為(-275,-92)。好了,在1和20幀,20和40幀之間點右鍵,選擇第一個選項(create motion tween)建立動畫。再建立一層,在20幀處添加空白主要畫面格,畫一矩形,也將其轉變為電影剪輯(執行個體名為loadbar)。建新層,
在第一幀加語句:stop();在20幀加語句:stop();
//load 我們需要的swf檔案(後面製作)
loadmovie(_root.nextmovie,_root.content); //把nextmovie這個swf檔案載入進content這個mc裡。
選中2,21幀,分別在屬性面板中給幀起個名字(術語叫幀標籤)。2幀為“close”,21幀為“open”。再建一層,在20幀加一個影片剪輯loadbar。如上述做法,其為一矩形長條的執行個體名,其長度為100,然後在舞台上將loadbar長度變為1。這個影片剪輯就做好了。
第四:回到主情境。把我們做好的3個按鈕依次起執行個體名為bt1,bt2,bt3。然後從庫裡面把control元件拖到情境,起執行個體名為cover,座標為(275,200)(注意,我們的control元件第一幀為空白,所以情境裡只能看見個小圓圈。老手們看的不耐煩了,呵呵,為了照顧初學者,我是羅嗦了,可不是騙稿費哦。)現在看看你的編輯地區,應該象下面這副圖:

第五:建立一層,在第一幀上寫代碼:
stop();
but1.onrelease=function(){
//設定一變數來儲存我們要load的swf檔案名稱
nextmovie="content1.swf";
//告訴over mc 去播放close動畫。
cover.gotoandplay("close";
}
but2.onrelease=function(){
nextmovie="content2.swf";
cover.gotoandplay("close";
}
but3.onrelease=function(){
nextmovie="content3.swf";
cover.gotoandplay("close";
}
第六:主swf檔案完工,我們來繼續製作要載入的swf。在這裡,我們為了敘述簡便,只做兩幀。影片大小為550×184,和content一樣大。第一幀加代碼(相信大家不陌生了)
this.onenterframe = function() {
//檢查是否load完畢 this指的是被調用的對象。
if (this.getbytesloaded()<this.getbytestotal()) {
total = this.getbytestotal()/1000;
received = this.getbytesloaded()/1000;
percentage = (received/total)*100;
//開始進度條動畫
_root.cover.loadbar._scale= percentage;
} else {
//當完全載入
gotoandstop(2);
//告訴over mc去播放open動畫。
_root.cover.gotoandplay("open";
//取消enterframe 動作
this.onenterframe = null;
}
};
stop();
第二幀我隨便做了一個mc,大家在實踐中可以做自己喜歡的動畫。只是測試的目的,我們做類似的swf共3個,檔案名稱起為content1,content2,content3。需要和主swf檔案儲存在同一檔案下



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。