Flash Actionscript Animation簡(jiǎn)明教程_Flash教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

推薦：Flash實(shí)現(xiàn)輸入對(duì)方QQ號(hào)回車即可直接聊天
Flash實(shí)現(xiàn)輸入對(duì)方QQ號(hào)回車即可直接聊天直接復(fù)制以下代碼，場(chǎng)景大小設(shè)置成80＊22，只訪問(wèn)網(wǎng)絡(luò)，就可以輸入對(duì)方QQ號(hào)，回車之后，即可直接聊天了。//==========

本教程節(jié)選自bit-101.com的未正式出版的新書(shū)making things move的新書(shū)介紹。主要內(nèi)容是關(guān)于速度，加速度，彈性，緩動(dòng)，摩擦力，重力等內(nèi)容，這里沒(méi)有非常詳盡的內(nèi)容，假如你想知道更詳盡的內(nèi)容，可以預(yù)定購(gòu)買(mǎi)作者的新書(shū)making things move…相信一定是一本好書(shū)。引用keith peters的話就是你一定不要直接將代碼粘過(guò)來(lái)用，只有理解了它的應(yīng)用，才能運(yùn)用自如。在本教程中本人對(duì)大部分內(nèi)容進(jìn)行了擴(kuò)展講解。希望對(duì)于初學(xué)或中級(jí)用戶有所幫助，由于多年沒(méi)有研究過(guò)數(shù)學(xué)物理，難免有誤，希望多多指正。

1．速度

物體的運(yùn)動(dòng)都是沿著一定的方向，以恒定或是加速度的方式的運(yùn)動(dòng)的。在FALSH中要使物體以一個(gè)恒定的速度運(yùn)動(dòng)，就需要我們?cè)诿恳粠粩嗟睦奂雍愣ǖ乃俣�。這里面我們使用一種幀的循環(huán)的方式，來(lái)使物體不斷的累加恒定的速度，以達(dá)到目的地。對(duì)于幀的循環(huán)方式大致上有三種，一種是使用代碼onEnterFrame，一種是使用setInterval,另一種就是使用二到三幀來(lái)達(dá)到循環(huán)，假如你對(duì)這三種方式不太熟，請(qǐng)查看幫助來(lái)學(xué)習(xí)。

在x軸方向的速度我們定義為vx,方向是向右，假如向左只要設(shè)為負(fù)值就可以。代碼：

vx=5;
onEnterFrame=function(){
my_mc._x =vx;//你也可以寫(xiě)成my_mc._x=my_mc._x vx;
}演示:a0001.swf

我們發(fā)現(xiàn)MC以恒定為5的速度向右移動(dòng)，假如想要它向左移，只要將vx設(shè)為負(fù)值即可。通過(guò)上面的代碼我們可以變通一下，假如想使小球上下移動(dòng)，可以設(shè)置y軸上移動(dòng)。代碼如下：
vy=5;
onEnterFrame=function(){
my_mc._y =vy;//你也可以寫(xiě)成my_mc._y=my_mc._y vy;
}這里就不再做演示了。你可以自已試一下，看看你是否理解了。

下面，我們?cè)僮兺ㄒ幌�，在物理中有一個(gè)概念叫合速度，也就是x軸和y軸方向上的合速度。下面我們就來(lái)看一下，你可能已經(jīng)知道了我在說(shuō)什么。下面來(lái)看一下代碼：最好你能在看下面代碼之前自已寫(xiě)出來(lái)。代碼：
vx=5;
vy=5;
onEnterFrame=function(){
my_mc._x =vx;
my_mc._y =vy;
}演示：a0002.swf

演示發(fā)現(xiàn)它已經(jīng)沿著x,y合速度的方向移動(dòng)了。是不是決得很輕易。J這里我用的vx,vy都是5，也就是說(shuō)合速度的方向是45度，當(dāng)然你可以讓vx,vy為不同的值，會(huì)有不同的速度也會(huì)沿不同的方向移動(dòng)，假如反向，自然設(shè)置vx,vy為負(fù)值即可。

上面的學(xué)習(xí)假如你認(rèn)為很輕易，那下面這段相信對(duì)你也不會(huì)有問(wèn)題，剛才我們說(shuō)到當(dāng)設(shè)置vx,vy都相同時(shí)，它是以45度的合速度方向運(yùn)動(dòng)的。雖然設(shè)置不同的值可以代表不同的方向。但這種方法很不科學(xué)。我們可以動(dòng)用我們的數(shù)學(xué)知識(shí)，來(lái)讓物體按我們指定的特定的角度移動(dòng)。這里需要復(fù)習(xí)一下我們的數(shù)學(xué)知識(shí)。
（1）弧度：弧度=角度*PI/180;
（2）角度：角度=弧度*180/PI；
假如以指定的角度運(yùn)動(dòng)。那么這時(shí)的速度累加相當(dāng)于沿著半徑的方向。最終目的點(diǎn)是到達(dá)沿著半徑方向的某一點(diǎn)。由于是合速度，我們需要定義一個(gè)統(tǒng)一個(gè)合速度以方便我們將x和y 軸上的速度分解出來(lái)為vx,vy。我們定義為speed;
那么在x軸方向上的速度應(yīng)為：vx=Math.cos(radians)*speed;在y軸上的速度應(yīng)為vy=Math.sin(radians)*speed;

代碼：
speed=10;
angle=15;
radians=angle*Math.PI/180;
onEnterFrame=function(){
vx=Math.cos(radians)*speed;
vy=Math.sin(radians)*speed;
my_mc._x =vx;
my_mc._y =vy;
} 演示：a0003.swf

通過(guò)演示你已經(jīng)發(fā)現(xiàn)小球已經(jīng)沿著15度的方向移動(dòng)了。這樣angle相當(dāng)是一個(gè)接口參數(shù)，你可以任意的對(duì)小球的方向進(jìn)行控制。

2．加速度
經(jīng)過(guò)上面的學(xué)習(xí)已經(jīng)對(duì)速度應(yīng)用有了一些了解，下面我們看一下加速度。在物理中的加速度有一個(gè)公式如：vt=vo at在FLASH中應(yīng)用基本上與些公式類似，只是省去了一些細(xì)節(jié)如時(shí)間。細(xì)分析時(shí)間并沒(méi)有省去，而是通過(guò)時(shí)間軸來(lái)代替了。這里我們加速度為ax,那么在x軸上速度一般寫(xiě)成vx=vx ax,簡(jiǎn)寫(xiě)成vx =ax;我們把初速度設(shè)為0;

代碼：
ax=0.2;
vx=0;
onEnterframe=function(){
vx =ax;
my_mc._x =vx;
}演示：a0004.swf

那么同樣道理，我們需要變通一下，另外個(gè)人的一點(diǎn)小觀點(diǎn)，要善于提出問(wèn)題，并努力想辦法自已去解決，有助于你快速的學(xué)習(xí)進(jìn)步。我們?cè)趛軸也加上加速度。
代碼：
ax=0.2;
ay=0.1;
vx=0;
vy=0;
onEnterFrame=function(){
vx =ax;
vy =ay;
my_mc._x =vx;
my_mc._y =vy;
} 演示：a0005.swf

通過(guò)演示我們發(fā)現(xiàn)小球已沿著合速度方向加速運(yùn)行，現(xiàn)在問(wèn)題又來(lái)了，如何使我們能按指定的角度加速運(yùn)行呢。這個(gè)就當(dāng)一個(gè)小作業(yè)吧。看你是否理解了它的應(yīng)用。你可以結(jié)合前面的例子試一下。

3．重力

重力實(shí)際上就是加速度，但它有一個(gè)非凡性是只做用在y軸上，這里我們把重力定義成grav,與上面的加速度類似。
代碼：
grav=0.5
vy=0;
onEnterFrame=function(){
vy =garv;
my_mc._y =vy;
}演示：a0006.swf

4.彈性

彈性，一般是指物體接觸到到某個(gè)邊界，所進(jìn)行的回彈，在FLASH中，我們需要做的是設(shè)置好邊界，以及物體回彈的方向。那么如何確定它回彈的方向呢，我們?cè)O(shè)定一個(gè)邊界，當(dāng)小球超出邊界時(shí)小球回彈，也就是方向改變了。以x軸為例應(yīng)為：vx*=-1;實(shí)際上你可能發(fā)現(xiàn)它實(shí)際上就是vx=-vx;

代碼：
//設(shè)定邊界
top=0;
left=0;
right=400;
bottom=300;
vx=10;
vy=10;
onEnterFram=function(){
my_mc._x =vx;
my_mc._y =vy;
//下面代碼檢測(cè)小球是否到達(dá)邊界，假如已到邊界，重設(shè)小球的正確做坐，并使其回彈，
if(my_mc._x my_mc._width/2>right){
my_mc._x=right-my_mc._width/2;
vx*=-1;
}
if(my_mc._x-my_mc._width/2<left){
my_mc._x=left mc_mc._width/2;
vx*=-1;
}
if(my_mc._y-my_mc._height/2<top){
my_mc._y=top my_mc._height/2;
vy*=-1;
}
if(my_mc._y my_mc._height/2>bottom){
my_mc._y=bottom-my_mc._height/2;
vy*=-1;
}
} 演示：a0007.swf

通過(guò)演示我們發(fā)現(xiàn)小球在碰到邊界會(huì)不斷的回彈。
*注重：上面代碼中的my_mc._x,my_mc._y的坐標(biāo)都是指my_mc的中心點(diǎn)，也就是說(shuō)my_mc的注冊(cè)點(diǎn)在中心，假如你在制作過(guò)程中發(fā)現(xiàn)與本演示不同，那一定是你的my_mc注冊(cè)點(diǎn)沒(méi)有在中心上。

彈性中的能量損失

在上面的例子，小球在回彈時(shí)我們?cè)O(shè)定當(dāng)碰到邊界時(shí)直接回彈，也就是vx*=-1;并沒(méi)有能量的損失，但在現(xiàn)實(shí)生活中，小球在回彈時(shí)要有一定的能量損失，其中還要有重力加速度的影響，通過(guò)上面的例子我們可以得出結(jié)論，當(dāng)回彈速度設(shè)為1時(shí)無(wú)能量損失，其中的負(fù)號(hào)只是代表方向，當(dāng)小于1時(shí)會(huì)產(chǎn)生能量損失，也就是我們通常說(shuō)的摩擦，如：vx*=-0.8;同時(shí)不要忘了在現(xiàn)實(shí)生活小球還會(huì)受重力加速度的影響。

代碼：
top=0;
left=0;
right=400;
bottom=300;
//設(shè)定重力加速度變量garv
garv=.5;
vx = 10;
vy = 10;
onEnterFrame = function () {
//y軸方向的加速度
vy =garv;
my_mc._x = vx;
my_mc._y = vy;
if(my_mc._x my_mc._width/2>right){
my_mc._x=right-my_mc._width/2;
vx*=-0.8;
}
if(my_mc._x-my_mc._width/2<left){
my_mc._x=left my_mc._width/2;
vx*=-0.8;
}
if(my_mc._y-my_mc._height/2<top){
my_mc._y=top my_mc._height/2;
vy*=-0.8;
}
if(my_mc._y my_mc._height/2>bottom){
my_mc._y=bottom-my_mc._height/2;
vy*=-0.8;
}
};

演示：a0008.swf

5.摩擦力

摩擦力的應(yīng)用相對(duì)比較簡(jiǎn)單，我們需要定義一個(gè)摩擦系數(shù)，通常它的值為小于1,然后將它與速度相乘，也就是前面在彈性時(shí)所提到的能量損失。代碼：

fraction=0.95;
vx=10;
vy=10;
onEnterFrame=function(){
vx*=fraction;
vy*=fraction;
my_mc._x =vx;
my_mc._y =vy;
}

演示：a0009.swf

6．拖動(dòng)與拋

拖動(dòng)與拋實(shí)際是與上面的例子的結(jié)合應(yīng)用，這里只是說(shuō)明如何與上面相結(jié)合使用。在本例中我們想要在拖動(dòng)小球的小球停止運(yùn)動(dòng)，松開(kāi)或拋出時(shí)小球繼續(xù)運(yùn)動(dòng)，在制作之前，我們先看一下基礎(chǔ)知識(shí)：
要點(diǎn)：拖動(dòng)我們使用方法startDrag(),同時(shí)要禁止小球運(yùn)動(dòng)，當(dāng)拖動(dòng)時(shí)要注重小球的運(yùn)動(dòng)速度變化，松開(kāi)時(shí)，使用方法stopDrag(),同時(shí)重置速度，然后小球繼續(xù)運(yùn)動(dòng)。

代碼：

top=0;
left=0;
right=400;
bottom=300;
garv=.5;
vx = 10;
vy = 10;
onEnterFrame = function () {
//設(shè)定假如沒(méi)有拖動(dòng)則小球正常進(jìn)行帶有能量損失的彈性運(yùn)動(dòng)
if(!dragging){
vy =garv;
my_mc._x = vx;
my_mc._y = vy;
if(my_mc._x my_mc._width/2>right){
my_mc._x=right-my_mc._width/2;
vx*=-0.8;
}
if(my_mc._x-my_mc._width/2<left){
my_mc._x=left my_mc._width/2;
vx*=-0.8;
}
if(my_mc._y-my_mc._height/2<top){
my_mc._y=top my_mc._height/2;
vy*=-0.8;
}
if(my_mc._y my_mc._height/2>bottom){
my_mc._y=bottom-my_mc._height/2;
vy*=-0.8;
}
//假如有拖動(dòng)，則此時(shí)速度發(fā)生了變化，需要記錄下最后my_mc的位置和當(dāng)前my_mc的位置，兩者的差為當(dāng)前的速度。
}else{
vx=my_mc._x-oldx;
vy=my_mc._y-oldy;
oldx=my_mc._x;
oldy=my_mc._y;
}

};
my_mc.onPress=function(){
this.startDrag();
dragging=true;
}
my_mc.onRelease=function(){
this.stopDrag();
dragging=false;
}

演示：a0010.swf

7.easing緩動(dòng)

簡(jiǎn)單的easing方式，需要我們選擇目的地，然后以摩擦的形式達(dá)到目的點(diǎn)。這就是easing.假如想要更復(fù)雜的easing方式，可以參看www.robertpenner.com，當(dāng)然你也可以使用現(xiàn)在網(wǎng)站各種各樣的類�；蚴鞘褂胢m自帶的transition類或是tween類。

代碼：

targetx = 200;
targety = 150;
onEnterFrame = function () {
dx=targetx-my_mc._x;
dy=targety-my_mc._y;
my_mc._x =dx*.3;
my_mc._y =dy*.3;

};

演示：a0011.swf

8．Spring彈簧

spring非常類似于easing，但它的效果比easing更c(diǎn)ool。一般的方法為定義一個(gè)目標(biāo)點(diǎn)，計(jì)算出到它的距離，加速度為距離與摩擦系數(shù)的積，同時(shí)還需要使用摩擦。

代碼：

演示：a0012.swf

spring 與鼠標(biāo)相連

下面我們要對(duì)spring 進(jìn)行一下簡(jiǎn)單的擴(kuò)展，我們可以將目標(biāo)地點(diǎn)設(shè)為光標(biāo)的坐標(biāo)值，同時(shí)可以使用drawing api用畫(huà)線的方式將其相連起來(lái)。
代碼：

var targetx = 200;
var targety = 150;
fraction = .9;
vx = 0;
vy = 0;
onEnterFrame = function () {
dx = _xmouse-my_mc._x;
dy = _ymouse-my_mc._y;
vx = dx*.3;
vy = dy*.3;
vx *= fraction;
vy *= fraction;
my_mc._x = vx;
my_mc._y = vy;
//畫(huà)線與mouse相連
clear();
lineStyle(1,0,100);
moveTo(_xmouse,_ymouse);
lineTo(my_mc._x,my_mc._y);
};

演示：a0013.swf

現(xiàn)在我們?cè)谧兺ㄒ幌拢∏蛟谧匀唤缰惺怯兄亓Φ�。加上重力看看什么效果。一個(gè)小作業(yè)，你試一下。

Spring 鏈

最后我們來(lái)一個(gè)稍微難一點(diǎn)的，是上面例子的一個(gè)擴(kuò)展，假如你對(duì)上一個(gè)例子有了一定的理解，這個(gè)對(duì)你來(lái)說(shuō)是不成問(wèn)題的。上面的例子是跟隨著光標(biāo)，假如是鏈的話。那么第二個(gè)小球就應(yīng)跟隨第一個(gè)小球，依次類推。假如這個(gè)你難做出來(lái)。相信這種類型的菜單對(duì)你來(lái)說(shuō)就不成問(wèn)題了。J
代碼：

fraction = .7;
grav=20;
my_mc.vx = 0;
my_mc.vy = 0;
my_mc1.vx = 0;
my_mc1.vy = 0;
my_mc2.vx = 0;
my_mc2.vy = 0;
onEnterFrame = function () {
clear();
lineStyle(1, 0, 100);
moveTo(_xmouse, _ymouse);
spring(my_mc, _xmouse, _ymouse);
spring(my_mc1, my_mc._x, my_mc._y);
spring(my_mc2, my_mc1._x, my_mc1._y);
};
function spring(mc, x, y) {
dx = x-mc._x;
dy = y-mc._y;
mc.vx = dx*.3;
mc.vy = dy*.3;
mc.vy = grav;
mc.vx *= fraction;
mc.vy *= fraction;
mc._x = mc.vx;
mc._y = mc.vy;
lineTo(mc._x, mc._y);
}

演示：a0014.swf

總結(jié)：上面的教程看起來(lái)都是一些簡(jiǎn)單的東西，但它確確實(shí)實(shí)是一些好的框架，你可無(wú)限的發(fā)揮你的想象和創(chuàng)意，只要在這個(gè)框架之中添加一些元素或是代碼。寫(xiě)這篇教程的目的主要是針對(duì)初級(jí)和中級(jí)的用戶。目的是使大家意識(shí)到其實(shí)許多表面看起來(lái)復(fù)雜的東西，實(shí)際上都隱藏著相對(duì)復(fù)雜的簡(jiǎn)單，前提條件是你的思路一定要清楚。最后。仍要引用keith peters話。不要直接下載源文件或是直接粘貼代碼。最好的方式是理解。

分享：關(guān)于網(wǎng)頁(yè)中Flash彈出網(wǎng)頁(yè)窗口的詳細(xì)講解
關(guān)于網(wǎng)頁(yè)中Flash彈出網(wǎng)頁(yè)窗口的具體講解，具體實(shí)現(xiàn)的總體思路是：在HTML頁(yè)面里寫(xiě)上JS代碼然后在FLASH里調(diào)用下面是一個(gè)具體的步驟步驟一：制作Flash的方法1.