Flash教程:用AS3代碼表現(xiàn)傾斜角與斜率_Flash教程
推薦:Flash AS3制作交互式3D旋轉(zhuǎn)動(dòng)畫效果效果演示: 使圖標(biāo)具有交互性: 當(dāng)鼠標(biāo)單擊某個(gè)圖標(biāo)時(shí)使之旋轉(zhuǎn),并讓圖標(biāo)顯示在屏幕的最前面。 //定義旋轉(zhuǎn)的最終角度 var endAngle:Number = 90; //保存已經(jīng)旋轉(zhuǎn)的角度 var tempAngle:Number = 0; //保存旋轉(zhuǎn)的狀態(tài) var isRotating:Boolean = true; //注冊圖標(biāo)的單擊事
演示:
坐標(biāo)中的兩點(diǎn)可以確定一條直線,直線與線段不同,線段有長度,而直線是沒有長度的。通過兩點(diǎn)可以確定一條直線,通過角度和一個(gè)定點(diǎn)也能確定一條直線。
直線與X軸正半軸所成的角稱直線的傾斜角,當(dāng)傾斜角不等于90度時(shí),傾斜角的正切稱為直線的斜率。圖:

其中角a就是直線的傾斜角,而斜率就是直角三角中對邊BC與鄰邊AB的比值,即正切值。正切值通過Math類的tan()方法可以得到。
給定A點(diǎn)和C點(diǎn)的坐標(biāo),可求得角a的角度值。
求角a的正切值的算法:
(C.y - A.y) / (C.x - A.x);
下面的代碼求直線的斜率:
(C.x == A.x)?Infinity:(C.y - A.y) / (C.x - A.x);
代碼先判斷兩點(diǎn)的橫坐標(biāo)是否相等,如果相等,說明直線垂直于x軸,這時(shí)不存在斜率,所以給斜率一定特殊值Infinity。
例:
1、新建Flash文檔,取名存盤。
2、創(chuàng)建影片剪輯,圖層1用橢圓工具繪制一個(gè)圓,填充色和大小根據(jù)需要定。插入圖層2, as層,輸入代碼:
//注冊鼠標(biāo)按下事件偵聽器
this.addEventListener(MouseEvent.MOUSE_DOWN,startDragFunc);
//注冊鼠標(biāo)釋放事件偵聽器
this.addEventListener(MouseEvent.MOUSE_UP,stopDragFunc);
//定義接收按下事件的函數(shù)
function startDragFunc(e:MouseEvent);
{
//開始拖動(dòng)
e.target.startDrag();
//更新顯示
e.updateAfterEvent() ;
}
//定義接收釋放事件的函數(shù)
function stopDragFunc(e:MouseEvent);
{
//停止拖動(dòng)
e.target.stopDrag()
}
3、返回場景1,在圖層1的第一幀拖入兩個(gè)影片剪輯,在屬性面板中輸入剪輯的名字,p1 、p2。
4、插入圖層2,選擇文本工具,創(chuàng)建靜態(tài)文本,字體大小15 、字體自定。輸入:斜率:在右面創(chuàng)建動(dòng)態(tài)文本,名:k_txt。在下面再次創(chuàng)建靜態(tài)文本,輸入:傾斜角:右面創(chuàng)建動(dòng)態(tài)文本,名:a_txt。
5、插入圖層3,as層。輸入代碼:
//導(dǎo)入數(shù)學(xué)函數(shù)
include "Math2.as";
//創(chuàng)建兩個(gè)點(diǎn)
var A:Point=new Point()
var B:Point=new Point()
//創(chuàng)建用于繪制箭頭的容器
var arrow_shape:Shape=new Shape();
this.addChild(arrow_shape);
stage.addEventListener(Event.ENTER_FRAME,loop);
function loop(e:Event):void
{
//清除繪圖
arrow_shape.graphics.clear();
//在兩點(diǎn)間繪制箭頭
drawArrow(arrow_shape.graphics,p1.x,p1.y,p2.x,p2.y);
//設(shè)置點(diǎn)A的值
A.x=p1.x;
A.y=p1.y;
//設(shè)置點(diǎn)B的值
B.x=p2.x;
B.y=p2.y;
//根據(jù)點(diǎn)A和點(diǎn)B創(chuàng)建直線
var line:Line=new Line(A,B);
//把斜率保存兩位小數(shù),并轉(zhuǎn)換為字符串顯示出來
k_txt.text=line.K.toFixed(2);
//把傾斜角取整后顯示
a_txt.text=line.angle.toFixed();
}
上面的代碼把弧度和角度轉(zhuǎn)換等函數(shù)放在Math2.as文件中,通過include導(dǎo)入Math2.as文件就可以使用這些數(shù)學(xué)函數(shù)。Math2.as文件中添加了繪制箭頭的函數(shù)drawArraw()。
5、測試影片,看一下效果。如果需要輸出p2的x、y坐標(biāo)添加代碼:
x_txt.text = p2.x;
y_txt.text = p2.y;
界面上添加靜態(tài)文本和動(dòng)態(tài)文本就不用細(xì)說了吧,如果不需要顯示斜率注釋掉。
分享:Flash cs3鼠繪教程:動(dòng)畫技巧之繪制猴子猴子 效果演示: 討論: http://www.missyuan.com/viewthread.php?tid=417576 寫實(shí)效果的關(guān)鍵在陰影中。同樣的2.5D 動(dòng)畫技巧在這兒被使用,不過這次繪制的一個(gè)漸變圖形加強(qiáng)了一個(gè)更加令人滿意的三維效果。 1. 首先在第一幀放入角色的四分之三的角度。讓我們把它叫做A點(diǎn)
Flash教程Rss訂閱網(wǎng)站制作教程搜索
Flash教程推薦
- FlashActionscript學(xué)習(xí):MovieClipLoader深入研究
- Flash制作過渡卷動(dòng)效果精美圖庫特效
- Flash制作簡單的方形收縮的變換像冊特效
- 網(wǎng)頁Flash動(dòng)畫文件無法顯示的解決方法
- Flash MX2004入門與進(jìn)階實(shí)例——元件和實(shí)例(3)
- Flash as入門:文本與字符串
- Flash制作四種3D隧道視覺動(dòng)畫效果
- flash action 詳解(1)
- Flash AS3制作交互式3D旋轉(zhuǎn)動(dòng)畫效果
- Flash MX2004入門與進(jìn)階實(shí)例——?jiǎng)幼髂_本進(jìn)階(17)
- 相關(guān)鏈接:
- 教程說明:
Flash教程-Flash教程:用AS3代碼表現(xiàn)傾斜角與斜率
。