推薦：互動Flash動畫:跟隨鼠標移動拉伸的蜘蛛絲
這是以前個人網站上的一個Flash點輟，是用Flash的畫線函數實現的，希望給有想像力的同志一點啟發，算是拋磚引玉吧。完成效果如下，大家移動鼠標，可以看到蜘蛛

1 網站制作前期預備

往往很多人做FLASH的時候都是拿來就做，不對的地方再進行修改，這樣不僅效率低，并且做的時候思緒很亂，導致做出來的效果很差，一個好的網站前期的預備工作必不可少網站做法分為兩種 一種是把網站做成很多的FLASH文件，然后再進行連接，這樣做的好處是修改輕易，且思路清楚。（我常用的做法），另外一種就是大家所看到的這個，各個連接都在一個FLASH文件當中，這種做法需要很高制作能力，對前期的預備工作要求很高。

下面我們就重點針對這個網站做一些分析。首先確定尺寸，以及如何布局。大家可以看到這個文件是由3個部分構成的（如圖一）

這樣大家心里就有點數了，我想你現在可能認為太無聊了吧，說這個東西，但是的確它是一個FLASH網站的靈魂所在，做任何一個網站都要做到心中有數。這時候大的框架有了，就開始進行設計，想想每個部分我應該放些什么，這大多是在PS里面處理的，我就不在羅嗦了。

（加上一點，假如想要在FLASH當中打開是透明圖片，那么就請你保存為GIF格式的。）

二網站制作

這一部分是重點，我打算先把一些重要的部分分開來說明，然后再做最后的整合，（不過大家注重點了，現實中的制作是按你的思路來的，因為怕按過程來講大家不好理解），這個網站有3個地方需要分開說明，分別是loading,按鈕部分，以及動畫的連接。好了，廢話不多說了。

1 loading的制作

一般來說loading的制作方法很多，這個網站就是采用一種普通的制作方法，先來看看圖片

可以看到整個LOADING的制作就在2個圖層的第一楨上，分別是AS層和LOADING層 AS層當中輸入腳本stop();作用是讓它停止在第一楨上，這樣的話它就不在繼續播放了，而看看LOADING層，在畫布當中點擊它發現是一個影片剪輯，（影片剪輯是相對獨立的東西，也就是說雖然場景已經停在第一楨了，但是影片剪輯卻可以播放）我們雙擊這個影片剪輯，打開后如圖所示

大家從這個可以看到每個部分都有自己的歸屬，所以大家在做的時候也要這樣，思路很清楚，對于layer2 和layer4我們就不在研究了，都是簡單的漸顯效果，我們重點就是layer5這個圖層，發現這個還是個影片剪輯，在20楨的位置上我們點擊這個影片，打開動作面板，發現這樣的代碼：如下

onClipEvent (load)
{
this.bar._xscale = 0;
total = _root.getBytesTotal();
}
onClipEvent (enterFrame)
{
this.bar._xscale = _root.getBytesLoaded() / _root.getBytesTotal() * 100;
loaded = _root.getBytesLoaded();

percent = int(loaded / total * 100);
txt = percent "%";
if (this.bar._xscale == 100)
{
_parent.play();
} // end if

我來做一下翻譯，onClipEvent (load) 當影片載入的時候；

this.bar._xscale = 0;this是相對的意思，就是從這個影片開始，bar這個影片當中水平百分比是0
total = _root.getBytesTotal();把主場景的字節數賦值給total
onClipEvent (enterFrame)當影片播放的時候
this.bar._xscale = _root.getBytesLoaded() / _root.getBytesTotal() *100; 把目前載入的字節數除總的字節數，然后再乘100
loaded = _root.getBytesLoaded();把載入的字節數賦值給loaded
percent = int(loaded / total * 100);這個就是為了取整，并賦值給percent
txt = percent "%";在percent 值的后面加上一%號，賦值給txt
if (this.bar._xscale == 100)
{
_parent.play();
} 這是一判定語句，假如bar這個影片元件的水平縮放到了100，那么上一層就開始播放，_parent也是相對的意思，表示前一個目錄。

從這個代碼來看，大家也許會郁悶了，這個bar元件在什么地方，我怎么沒看到呢？

不要著急，后面來說。

并且相對應的在layer5這個層的上面有AS層，20楨的位置有代碼stop() ；讓它停止在20楨位置上。我們可以看到在40楨的地方有_root.gotoAndPlay(2);意思是跳轉到場景的第2楨.
好了我們雙擊這個影片打開后如圖：

這里就很簡單了

Layer4是一個影片剪輯 它實例名為bar，這就讓我們想到了上一個影片剪輯里面的代碼，恩，不錯，就是利用那些代碼動態的對它進行改變，做到滾動條隨著影片載入的多少變長。

Layer3是一個動態文本，里面的變量名為txt，同樣道理也是利用上一個影片剪輯里面的代碼對它進行控制，剛開始的時候為0%到最后的100%。

這樣我們就把這個LOADING做好了，可能你會說有點難啊，剛開始嘛，多學習一下，就會有收獲的，假如有什么地方還沒看懂的地方，請給我留言。

源文件請參考這里http://bbs.7880.com/read-htm-tid-8876.html

按鈕部分的制作
按鈕的效果制作方法很多，這個網站上的按鈕也是目前制作FLSAH按鈕非常普遍的方法之一，我們來先看看圖片。

當我們播放源文件的時候，會發現當我們鼠標移動到按鈕上面時三角形符號會向前移動，當鼠標移開的時候，三角形符號會回到原來的位置。這種效果如何實現的呢？下面我們就來學習一下，我們可以看到整個按鈕部分都在一個圖層上，有人會問了，這么多的效果在一個圖層上就能實現？（呵呵，沒錯的，這是我們常用的一種手法，利用影片剪輯進行嵌套，這樣的做的好處是整個原文件層次劃分非常清楚，讓人一眼就能知道整個文件的構成）。
我們會發現整個按鈕層就是個影片剪輯，雙擊后里面如圖所示

很舒適吧，一目了然，每個圖層對應一部分東西，5個按鈕分別放置在5個圖層上，
并且每個按鈕又是一個影片剪輯，這時是我們應該就能體會到影片剪輯的能力吧。因為這5個按鈕每個的制作過程都一樣我們就挑一個來講，比如是HOME這個按鈕，我們點擊它，恩，肯定是個影片剪輯了，然后打開動作面板，會發現幾句AS語言 如下：

on (rollOver)
{
this.gotoAndPlay(2);
}
on (rollOut)
{
this.gotoAndPlay(11);
}
on (release)
{
_root.gotoAndStop(2);}

很簡單吧，鼠標經過跳到第2楨，鼠標移開跳到第11楨，這兩個是跳轉播放是針對這個影片來說的，這點要知道，單擊跳轉到主場景的第2楨停止，這個是對場景而言的，_root就是場景的意思。
有人會問明明這個是按鈕所答應的代碼，為什么在影片上也行？呵呵，其實這個沒什么影響，假如你認為不能理解的話，你就換成這種格式的this.onRollOver=function(){內容}
好了，知道了代碼就要知道它們到底是干什么的，我們雙擊這個影片，打開如圖

我們會發現這里面也很簡單：三角形符號從1~10是向右做變色移動，從10~18是回到原來位置，其他內容都是靜止的，然后我們來看看AS層分別在第1和第10楨上放了2個腳本，都是stop();這樣是干什么呢？
想想我們上面我們看到的代碼

on (rollOver)
{
this.gotoAndPlay(2);
}
on (rollOut)
{
this.gotoAndPlay(11);
}

呵呵，不難理解吧就是利用這些代碼對三角形符號進行控制（需要注重的是明明是在第一和第10楨上有腳本，為什么我們需要跳轉第2和第11楨呢？這是gotoAndPlay是一個很非凡的語句， this.gotoAndPlay(2);雖然它是跳轉到第2楨，但是它實際上是從前一楨開始播放，我以前就因為這個問題發生過錯誤）
好了，按鈕部分到這里就說完了，不難吧~希望大家通過這個可以學會用影片剪輯嵌套的方式去做按鈕。

3 畫面的連接
今天我們就來說說有關這個網站畫面是如何連接的，就主場景而言（也就是一打開文件所能看的畫面），如圖

當我們打開源文件的時候，我們可以看到主場景的所有畫面都在上圖當中這4個圖層的第2楨上（這幾個圖層的位置做了些調整，方便大家看的清楚），分別是腳本層stop();第一部分，第二部分，第三部分（也就剛開始介紹網站預備工作中所劃分的3個部分）OK，現在我們來一一介紹下，首先我們來介紹第2部分（因為動畫是先播放第2部分的），它所在的圖層是layer62，雙擊打開它，如圖

呵呵
呵呵，這里面全部都是補間動畫構成，沒什么好說的，參照源文件。。對于這個AS層的第37楨上有個腳本，打開動作面板，發現這些語句。

stop();
_root.cc.gotoAndPlay(2);

_root.cc.gotoAndPlay(2);這個的意思就是主場景下cc這個影片從第2楨開始播放。
cc？？它在什么地方？呵呵，不要著急，請看下文，這樣第2部分就講完了，其實它是整個構成最簡單的部分。
我們返回到主場景中開始說下第3部分，（因為它是第2個開始播放的），它所在的圖層是在layer62上，點擊后發現原來它是有實例名的，叫cc ,哦，它原來在這里啊。雙擊打開它如圖所示

發現這里面和第2部分也差不多，對，就是很簡單的構成，里面的按鈕部分也已經提出來講了，其他的也就是簡單的補間了，好了，我們來看看AS層吧，發現在第一楨和第43楨上各有一個腳本

第一楨一個stop();這時有人就想問了，為什么在第2部分上我們沒看到這個腳本啊，恩，能提出問題說明你動腦筋了，我們來說說原因吧（整個畫面的播放順序是第2部分——第3部分——第一部分，但是我們可以清楚看到這3個部分都是在一個楨上，照理說應該一起播放的，這時候簡單的AS腳本就發揮了功效，首先我們先看到第2部分最后一楨上的_root.cc.gotoAndPlay(2);說明它播放過后才讓第3部分開始播放，而第3部分開頭的stop();也就是說，非要等到第2部分放完后，我才放，我們可以想一下，假如沒有這個stop();那么將會在第2部分播放的同時，第3部分也在播放。這樣就會發生錯誤，你不妨把這個stop();去掉，看看會發生什么效果。）
好了我們接下來說說第43楨處的腳本

stop();
_root.aa.gotoAndPlay(2);

_root.aa.gotoAndPlay(2);里面的aa我們猜也能猜到了，肯定是第一部分的實例名了。
好了就這樣第3部分也就分析完了
接下來我們就來第一部分吧。。如圖：

這里我們也可以看到雖然圖層是多了點（因為內容多嘛），但是構成卻一點不復雜，就是多了兩個遮照，對于這兩個遮照我也不打算太過具體的說，就把那個花形成的遮照稍微說一下

我們先來看看圖

通過源文件可以知道，遮照層是一影片剪輯，被遮照層就是花本身，我們雙擊打開影片如圖所示

最后一楨加上AS停止，整個遮照就構成了，我在這里想說的就是遮照方法很多種需要靈活利用，這樣我們才能創造出獨特的視覺。

　　好了遮照說完了，其它都是些簡單的補間，大家參照源文件看看。

同樣在AS層的第一楨上stop();用法我們在前面已經說過了，AS的最后一楨上同樣也是stop();這個用法也很簡單，因為已經放完了嘛，當然需要讓它停止。

好了整個主場景的連接過程就說到這里，我們再來看看主場景，如圖：

從第3楨到第6楨上，每個楨都同樣有3個部分組成，這些都是我們前面說的按鈕控制的
語句就是
on(release){
_root.gotoAndStop(你所要控制的是第幾楨)；
}
好了，到這里我就把有關制作的方面說完了，希望大家能夠參照源文件學會自己分析，有什么不懂的地方給我留言。。。。

三 總結

對于網站到這里我們就結束了，總的說由于網站本身難度不高，所以所學的內容比較的少，在這里我要說明的一點，網站的制作不是一成不變的，所以這里只是一個實例，給大家一個最基本制作FLASH網站的過程，通過本教程學習后，希望大家能夠學會分析網站的構成，做網站往往它有很多東西都是很局限的，比如LOADING，你的網站有，我的也有，所以要想自己網站有特色，就要對局部進行美化，創新。這是學到一定程度所必須去嘗試的東西。

PS是美化的一個好軟件，網站上有很多東西都是在PS上美化后再導入的，遮照是創新的一個好幫手，通常的視覺效果都是通過遮照來實現的。

分享：創建自己的ProgressBar組件
今天在flashgamer群與一朋友討論組件的制作，今天在硬盤里翻了翻，找到了幾個用mx2004做的組件。這個是純as的ProgressBaras文件/***loodingbar**@作者