Flash Actionscript Animation簡明教程_Flash教程
推薦:Flash實現輸入對方QQ號回車即可直接聊天Flash實現輸入對方QQ號回車即可直接聊天直接復制以下代碼,場景大小設置成80*22,只訪問網絡,就可以輸入對方QQ號,回車之后,即可直接聊天了。//==========
本教程節選自bit-101.com的未正式出版的新書making things move的新書介紹。主要內容是關于速度,加速度,彈性,緩動,摩擦力,重力等內容,這里沒有非常詳盡的內容,假如你想知道更詳盡的內容,可以預定購買作者的新書making things move…相信一定是一本好書。引用keith peters的話就是你一定不要直接將代碼粘過來用,只有理解了它的應用,才能運用自如。在本教程中本人對大部分內容進行了擴展講解。希望對于初學或中級用戶有所幫助,由于多年沒有研究過數學物理,難免有誤,希望多多指正。
1.速度
物體的運動都是沿著一定的方向,以恒定或是加速度的方式的運動的。在FALSH中要使物體以一個恒定的速度運動,就需要我們在每一幀不斷的累加恒定的速度。這里面我們使用一種幀的循環的方式,來使物體不斷的累加恒定的速度,以達到目的地。對于幀的循環方式大致上有三種,一種是使用代碼onEnterFrame,一種是使用setInterval,另一種就是使用二到三幀來達到循環,假如你對這三種方式不太熟,請查看幫助來學習。
在x軸方向的速度我們定義為vx,方向是向右,假如向左只要設為負值就可以。 代碼:
onEnterFrame=function(){
my_mc._x =vx;//你也可以寫成my_mc._x=my_mc._x vx;
}演示:a0001.swf
我們發現MC以恒定為5的速度向右移動,假如想要它向左移,只要將vx設為負值即可。通過上面的代碼我們可以變通一下,假如想使小球上下移動,可以設置y軸上移動。代碼如下:
vy=5;
onEnterFrame=function(){
my_mc._y =vy;//你也可以寫成my_mc._y=my_mc._y vy;
}這里就不再做演示了。你可以自已試一下,看看你是否理解了。
下面,我們再變通一下,在物理中有一個概念叫合速度,也就是x軸和y軸方向上的合速度。下面我們就來看一下,你可能已經知道了我在說什么。下面來看一下代碼:最好你能在看下面代碼之前自已寫出來。代碼:
vx=5;
vy=5;
onEnterFrame=function(){
my_mc._x =vx;
my_mc._y =vy;
}演示:a0002.swf
演示發現它已經沿著x,y合速度的方向移動了。是不是決得很輕易。J這里我用的vx,vy都是5,也就是說合速度的方向是45度,當然你可以讓vx,vy為不同的值,會有不同的速度也會沿不同的方向移動,假如反向,自然設置vx,vy為負值即可。
上面的學習假如你認為很輕易,那下面這段相信對你也不會有問題,剛才我們說到當設置vx,vy都相同時,它是以45度的合速度方向運動的。雖然設置不同的值可以代表不同的方向。但這種方法很不科學。我們可以動用我們的數學知識,來讓物體按我們指定的特定的角度移動。這里需要復習一下我們的數學知識。
(1) 弧度:弧度=角度*PI/180;
(2) 角度:角度=弧度*180/PI;
假如以指定的角度運動。那么這時的速度累加相當于沿著半徑的方向。最終目的點是到達沿著半徑方向的某一點。由于是合速度,我們需要定義一個統一個合速度以方便我們將x和y 軸上的速度分解出來為vx,vy。我們定義為speed;
那么在x軸方向上的速度應為:vx=Math.cos(radians)*speed;在y軸上的速度應為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
通過演示你已經發現小球已經沿著15度的方向移動了。這樣angle相當是一個接口參數,你可以任意的對小球的方向進行控制。
2.加速度
經過上面的學習已經對速度應用有了一些了解,下面我們看一下加速度。在物理中的加速度有一個公式如:vt=vo at在FLASH中應用基本上與些公式類似,只是省去了一些細節如時間。細分析時間并沒有省去,而是通過時間軸來代替了。這里我們加速度為ax,那么在x軸上速度一般寫成vx=vx ax,簡寫成vx =ax;我們把初速度設為0;
代碼:
ax=0.2;
vx=0;
onEnterframe=function(){
vx =ax;
my_mc._x =vx;
}演示:a0004.swf
那么同樣道理,我們需要變通一下,另外個人的一點小觀點,要善于提出問題,并努力想辦法自已去解決,有助于你快速的學習進步。我們在y軸也加上加速度。
代碼:
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
通過演示我們發現小球已沿著合速度方向加速運行,現在問題又來了,如何使我們能按指定的角度加速運行呢。這個就當一個小作業吧。看你是否理解了它的應用。你可以結合前面的例子試一下。
3.重力
重力實際上就是加速度,但它有一個非凡性是只做用在y軸上,這里我們把重力定義成grav,與上面的加速度類似。
代碼:
grav=0.5
vy=0;
onEnterFrame=function(){
vy =garv;
my_mc._y =vy;
}演示:a0006.swf
4.彈性
彈性,一般是指物體接觸到到某個邊界,所進行的回彈,在FLASH中,我們需要做的是設置好邊界,以及物體回彈的方向。那么如何確定它回彈的方向呢,我們設定一個邊界,當小球超出邊界時小球回彈,也就是方向改變了。以x軸為例應為:vx*=-1;實際上你可能發現它實際上就是vx=-vx;
代碼:
//設定邊界
top=0;
left=0;
right=400;
bottom=300;
vx=10;
vy=10;
onEnterFram=function(){
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*=-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
通過演示我們發現小球在碰到邊界會不斷的回彈。
*注重:上面代碼中的my_mc._x,my_mc._y的坐標都是指my_mc的中心點,也就是說my_mc的注冊點在中心,假如你在制作過程中發現與本演示不同,那一定是你的my_mc注冊點沒有在中心上。
彈性中的能量損失
在上面的例子,小球在回彈時我們設定當碰到邊界時直接回彈,也就是vx*=-1;并沒有能量的損失,但在現實生活中,小球在回彈時要有一定的能量損失,其中還要有重力加速度的影響,通過上面的例子我們可以得出結論,當回彈速度設為1時無能量損失,其中的負號只是代表方向,當小于1時會產生能量損失,也就是我們通常說的摩擦,如:vx*=-0.8;同時不要忘了在現實生活小球還會受重力加速度的影響。
代碼:
top=0;
left=0;
right=400;
bottom=300;
//設定重力加速度變量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.摩擦力
摩擦力的應用相對比較簡單,我們需要定義一個摩擦系數,通常它的值為小于1,然后將它與速度相乘,也就是前面在彈性時所提到的能量損失。代碼:
vx=10;
vy=10;
onEnterFrame=function(){
vx*=fraction;
vy*=fraction;
my_mc._x =vx;
my_mc._y =vy;
}
演示:a0009.swf
6.拖動與拋
拖動與拋實際是與上面的例子的結合應用,這里只是說明如何與上面相結合使用。在本例中我們想要在拖動小球的小球停止運動,松開或拋出時小球繼續運動,在制作之前,我們先看一下基礎知識:
要點:拖動我們使用方法startDrag(),同時要禁止小球運動,當拖動時要注重小球的運動速度變化,松開時,使用方法stopDrag(),同時重置速度,然后小球繼續運動。
代碼:
left=0;
right=400;
bottom=300;
garv=.5;
vx = 10;
vy = 10;
onEnterFrame = function () {
//設定假如沒有拖動則小球正常進行帶有能量損失的彈性運動
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;
}
//假如有拖動,則此時速度發生了變化,需要記錄下最后my_mc的位置和當前my_mc的位置,兩者的差為當前的速度。
}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緩動
簡單的easing方式,需要我們選擇目的地,然后以摩擦的形式達到目的點。這就是easing.假如想要更復雜的easing方式,可以參看www.robertpenner.com,當然你也可以使用現在網站各種各樣的類。或是使用mm自帶的transition類或是tween類。
代碼:
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更cool。一般的方法為定義一個目標點,計算出到它的距離,加速度為距離與摩擦系數的積,同時還需要使用摩擦。
代碼:
var targety = 150;
fraction = .9;
vx = 0;
vy = 0;
onEnterFrame = function () {
if (!dragging) {
//起始點與目標地點的距離
dx = targetx-my_mc._x;
dy = targety-my_mc._y;
//加速度
vx = dx*.3;
vy = dy*.3;
//加入摩擦
vx *= fraction;
vy *= fraction;
my_mc._x = vx;
my_mc._y = vy;
}
};
my_mc.onPress = function() {
this.startDrag();
dragging = true;
};
my_mc.onRelease=function() {
this.stopDrag();
dragging = false;
};
演示:a0012.swf
spring 與鼠標相連
下面我們要對spring 進行一下簡單的擴展,我們可以將目標地點設為光標的坐標值,同時可以使用drawing api用畫線的方式將其相連起來。
代碼:
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;
//畫線與mouse相連
clear();
lineStyle(1,0,100);
moveTo(_xmouse,_ymouse);
lineTo(my_mc._x,my_mc._y);
};
演示:a0013.swf
現在我們在變通一下,小球在自然界中是有重力的。加上重力看看什么效果。一個小作業,你試一下。
Spring 鏈
最后我們來一個稍微難一點的,是上面例子的一個擴展,假如你對上一個例子有了一定的理解,這個對你來說是不成問題的。上面的例子是跟隨著光標,假如是鏈的話。那么第二個小球就應跟隨第一個小球,依次類推。假如這個你難做出來。相信這種類型的菜單對你來說就不成問題了。J
代碼:
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
總結:上面的教程看起來都是一些簡單的東西,但它確確實實是一些好的框架,你可無限的發揮你的想象和創意,只要在這個框架之中添加一些元素或是代碼。寫這篇教程的目的主要是針對初級和中級的用戶。目的是使大家意識到其實許多表面看起來復雜的東西,實際上都隱藏著相對復雜的簡單,前提條件是你的思路一定要清楚。最后。仍要引用keith peters話。不要直接下載源文件或是直接粘貼代碼。最好的方式是理解。
分享:關于網頁中Flash彈出網頁窗口的詳細講解關于網頁中Flash彈出網頁窗口的具體講解,具體實現的總體思路是:在HTML頁面里寫上JS代碼然后在FLASH里調用下面是一個具體的步驟步驟一:制作Flash的方法1.
- 相關鏈接:
- 教程說明:
Flash教程-Flash Actionscript Animation簡明教程
。