中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 技術(shù)文檔 > 多媒體制作 > AS2.0精彩特效之位圖的飄動
簡單實用的電影雜點效果 回到列表 使用flash2004中組件入門教程
 AS2.0精彩特效之位圖的飄動

作者:zjs35 時間: 2004-04-01 文檔類型:轉(zhuǎn)載 來自:閃客帝國

橢圓參數(shù)方程,是動畫編程中非常常用的一種技術(shù),可以制作很多實用的效果,例如旗幟飄動的效果,本例中隨著鼠標(biāo)的移動,位圖就像一面旗幟隨風(fēng)飄動。

下面我們就來學(xué)習(xí)如何使用這種技術(shù)。

一. 相關(guān)參數(shù)講解

制作這個實例首先要了解橢圓的參數(shù)方程的使用,下面就對其算法作個簡單的剖析。

1.單個mc(影片剪輯)在橢圓上的運動的處理方法


圖1

黑點表示一個mc,radian表示數(shù)學(xué)中的弧度,從x正半軸開始,按逆時針方向旋轉(zhuǎn)一周為2π,通過弧度和橢圓的參數(shù)方程來計算mc的坐標(biāo),如圖1所示,具體表示方法(注:*表示代碼中的乘號):mc._x=a*Math.cos(radian);
mc._y=b*Math.sin(radian);

a、b分別是橢圓在x、y坐標(biāo)軸上的載距,代表橢圓的大小, radian不斷遞增即可實現(xiàn)mc坐標(biāo)的變化,使mc在橢圓上的運動。橢圓的中心坐標(biāo)為(0,0)。要平移橢圓,把mc的坐標(biāo)加上中心坐標(biāo)(cen_x,cen_y),具體表示方法:

mc._x=a*Math.cos(radian)+cen_x;
mc._y=b*Math.sin(radian)+cen_y;

2、多個mc分布在橢圓上的處理方法


圖2

    如果是多個mc分布在橢圓上,情況又會不同,如圖2所示。以均勻分布在橢圓上為例,一個圓周為p=2π,且有num=4個mc,這些mc的弧度如下表所示:

mc
mc1
mc2
mc3
mc4
弧度值
π/2
π
3π/2
2π或0
計算方法
P/4*1
P/4*2
P/4*3
P/4*4

從表格的第二行可看出,四個mc的間距是p/4=π/2。第三行是這些弧度的計算方法:間距乘上一個數(shù)值。用num代替4,用一個變量j代替數(shù)值,就可算出num個mc的弧度值,繼而求出mc的坐標(biāo)。如下所示:

for(var j=1;j<=num;j++){
    var radian= p/num*j;  //兩個mc的間距乘上j即每個mc的弧度
    this[“mc”+j]._x=a*Math.sin(radian);
    this[“mc”+j]._y=b*Math.cos(radian);//通過弧度值計算每個mc的坐標(biāo)
}

如果要分布在半個橢圓,或以一定的間距分布在橢圓的一部分,只要改變兩個mc的間距弧度。

3、mc屬性的設(shè)置方法

     為符合透視規(guī)律,要設(shè)置mc的屬性:透明度、深度等,如圖2中mc1的透明度最小,mc2和mc4次之,mc3最大,其它的屬性的變化規(guī)律與透明度相同。而這些mc都是沿著橢圓運動的,所以要根據(jù)mc實時的位置來設(shè)置mc的屬性。最簡單的方法是用mc的y坐標(biāo),它的變化規(guī)律符合上述特征。還可用mc的x坐標(biāo)、mc的弧度、mc到橢圓中心的距離等,但必須轉(zhuǎn)換。下面以mc的x坐標(biāo)為例:


圖3 、 圖4

 如圖3,通過余弦函數(shù)計算出的x坐標(biāo)有正有負,而mc的透明度不可能為負,所以當(dāng)x為負時,要進行轉(zhuǎn)換,取反或取絕對值。當(dāng)mc位于x軸下方時(π-2π),從圖4可知此時y<0,x坐標(biāo)應(yīng)比a大,所以x=2*a-Math.abs(x)。 轉(zhuǎn)換前后列表如下:
mc的弧度
0-π/2
π/2-π
π-3π/2
3π/2-0
x坐標(biāo)
a-0
0--a
-a-0
0-a
Math.abs(x)
a-0
0-a
a-0
0-a
2*a-Math.abs(x)
a-0
0-a
a-2a
2a-a

這樣x坐標(biāo)在0到2a之間不斷循環(huán),轉(zhuǎn)換式如下:
x = (y < 0) ? 2*a-Math.abs(x) :Math.abs(x);

4.制作類

算法清楚后,把它寫成類,方便以后使用。類如下:

class Move {
    private var p = 2*Math.PI;//數(shù)學(xué)中的2π
    private var c_x, c_y, c_a, c_b, nu, time:Number;
    //依次為中心坐標(biāo)(c_x, c_y),
    截距(c_a, c_b),nu為mc的數(shù)目,time為弧度增量
    private var obj:MovieClip; //構(gòu)造函數(shù)
    public function Move(x, y, a, b, n, t:Number, o:MovieClip) {
        c_x = x;
        c_y = y;
        c_a = a;
        c_b = b;
        nu = n;
        time = t;
        duplicate(o);//調(diào)用復(fù)制函數(shù)
    }   
    //得到和設(shè)置弧度的起始增量
    public function get timer():Number {
        return time;
    }
    public function set timer(t:Number):Void {
        time = t;
    }   
    //得到和設(shè)置橢圓的中心x坐標(biāo)
    public function get cen_x():Number {
        return c_x;
    }
    public function set cen_x(x:Number):Void {
        c_x = x;
    }
    //得到和設(shè)置橢圓的中心y坐標(biāo)
    public function get cen_y():Number { 
        return c_y;
    }
    public function set cen_y(y:Number):Void {
        c_y = y;
    }
    //得到和設(shè)置橢圓在x坐標(biāo)軸上的截距
    public function get cen_a():Number {
        return c_a;
    }
    public function set cen_a(a:Number):Void {
        c_a = a;
    }
    //得到和設(shè)置橢圓在y坐標(biāo)軸上的截距
    public function get cen_b():Number {
        return c_b;
    }
    public function set cen_b(b:Number):Void {
        c_b = b;
    }
    //得到和設(shè)置橢圓上mc的數(shù)目
    public function get num():Number {
        return nu;
    }
    public function set num(n:Number):Void {
        nu = n;
    }
    //設(shè)置mc的x坐標(biāo)
    public function set_x(radian:Number):Number { 
        return Math.cos(radian)*c_a+c_x;
    }
    //設(shè)置mc的y坐標(biāo)
    public function set_y(radian:Number):Number { 
        return Math.sin(radian)*c_b+c_y;
    }
    //復(fù)制,產(chǎn)生num個mc,并均勻分布
    public function duplicate(obj:MovieClip) {
        var j:Number = 1; while (j<=num) {
            obj.duplicateMovieClip("a"+j, j);
            _root["a"+j].n = p/num*j;
            //每個mc的起始弧度值
            _root["a"+j].gotoAndStop(j);//mc跳到相應(yīng)的幀
            _root["a"+j]._x = set_x(p/num*j);
            _root["a"+j]._y = set_y(p/num*j);//計算坐標(biāo)
            j++;
        }
    }
    //mc的運動
    public function myMove(obj:MovieClip):Void {
        obj._x = set_x(obj.n+time);
        obj._y = set_y(obj.n+time);//每個mc弧度等于起始弧度值加增量 
        time time = _xmouse>c_x ? time+0.005 : time-0.005;
        //根據(jù)鼠標(biāo)位置確定旋轉(zhuǎn)方向,0.005為旋轉(zhuǎn)速度 
    }
    //坐標(biāo)的轉(zhuǎn)換
    public function trans_x(obj:MovieClip):Number {
        var x:Number = obj._x-c_x;
        var y:Number = obj._y-c_y;
        //取得mc的坐標(biāo)
        x = (y<0) ? 2*c_a-Math.abs(x) : Math.abs(x);//轉(zhuǎn)換
        return x;//返回轉(zhuǎn)換值
    }
    //設(shè)置mc的透明度和深度
    public function set_alpha(obj:MovieClip):Void {
        obj._alpha = trans_x(obj)/c_a*40+20;//從20到100
        obj.swapDepths(trans_x(obj));//深度設(shè)置
    }
    //設(shè)置mc的x方向的縮放
    public function set_xscale(obj:MovieClip):Void {
        obj._xscale = trans_x(obj)/c_a*100-100;//從-100到100
        obj.swapDepths(trans_x(obj));
    }
}

保存為Move.as,需要強調(diào)的是類里的語句:
_root["a"+j].gotoAndStop(j);
它是用于位圖的切割。

二.實例制作方法

1、制作遮罩動畫

新建一個電影剪輯,在電影剪輯的第一層建立紅色的長方形,第二層放置位圖,注冊點在位圖的中心。在第1幀位圖和長方形左端對齊,在最后一幀,位圖和長方形右端對齊,第一層創(chuàng)建動畫,并設(shè)為遮罩。如圖5所示。把制作好的電影剪輯拖到場景中,實例名為myMc。

2、編寫程序

新建一層,在第一幀中輸入:

var myMove:Move = new Move(200, 150, 10, 2, 40, 3, myMc);
//建實例myMove,中心坐標(biāo)(200,150),
//截距10和2,40為mc的數(shù)目,3為mc的起始增量

在myMc上加上:
onClipEvent (mouseMove) {
    _parent.myMove.myMove(this);//mc的運動
    _parent.myMove.set_alpha(this);//mc的透明度
}

把文件保存到和Move.as相同的目錄中,測試。大家可修改實例中的各個參數(shù),加深對程序的理解。

     此類的其它應(yīng)用:3D菜單,文字的環(huán)繞,位圖的筒狀效果、橢圓有關(guān)的課件等。大家可發(fā)揮想象力,為類添加一些屬性和方法,制作出更多效果。

欣賞:

ZJS35的網(wǎng)站: http://zjs35.edujh.cn
源文件下載

出處:閃客帝國
責(zé)任編輯:地獄天堂

◎進入論壇Flash專欄版塊參加討論

相關(guān)文章 更多相關(guān)鏈接
Macromedia Captivate 發(fā)布
ActionScript 2 編譯工具
使用外部CSS設(shè)置FlashMX組件外觀
FLASH,你要我怎么跟你說!
Flash MX as 聲音控制分解
作者文章
AS2.0精彩特效之位圖的飄動
使用flash2004中組件入門教程
一個 Flash 緩沖導(dǎo)航詳解
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計比賽 網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大!熬•自然”設(shè)計大賽開啟
國際體驗設(shè)計大會7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計算如何讓安全問題可控
云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會
阿里行云
云手機年終巨獻,送禮標(biāo)配299起
阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設(shè)計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標(biāo)
數(shù)據(jù)同步算法研究
用ps作簡單的作品展示頁面
CSS定位機制之一:普通流
25個最佳最閃亮的Eclipse開發(fā)項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule

藍色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請不要盜鏈到本站,且不準(zhǔn)打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計作品,如需使用,請與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請與我們聯(lián)系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項有關(guān)法律法規(guī)
·承擔(dān)一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責(zé)任
·本站評論管理人員有權(quán)保留或刪除其管轄評論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計》
犀利開發(fā)—jQuery內(nèi)核詳解與實踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2