Flash教程:用AS3代碼表現(xiàn)傾斜角與斜率_Flash教程
推薦:Flash AS3制作交互式3D旋轉動畫效果效果演示: 使圖標具有交互性: 當鼠標單擊某個圖標時使之旋轉,并讓圖標顯示在屏幕的最前面。 //定義旋轉的最終角度 var endAngle:Number = 90; //保存已經(jīng)旋轉的角度 var tempAngle:Number = 0; //保存旋轉的狀態(tài) var isRotating:Boolean = true; //注冊圖標的單擊事
演示:
坐標中的兩點可以確定一條直線,直線與線段不同,線段有長度,而直線是沒有長度的。通過兩點可以確定一條直線,通過角度和一個定點也能確定一條直線。
直線與X軸正半軸所成的角稱直線的傾斜角,當傾斜角不等于90度時,傾斜角的正切稱為直線的斜率。圖:
其中角a就是直線的傾斜角,而斜率就是直角三角中對邊BC與鄰邊AB的比值,即正切值。正切值通過Math類的tan()方法可以得到。
給定A點和C點的坐標,可求得角a的角度值。
求角a的正切值的算法:
(C.y - A.y) / (C.x - A.x);
下面的代碼求直線的斜率:
(C.x == A.x)?Infinity:(C.y - A.y) / (C.x - A.x);
代碼先判斷兩點的橫坐標是否相等,如果相等,說明直線垂直于x軸,這時不存在斜率,所以給斜率一定特殊值Infinity。
例:
1、新建Flash文檔,取名存盤。
2、創(chuàng)建影片剪輯,圖層1用橢圓工具繪制一個圓,填充色和大小根據(jù)需要定。插入圖層2, as層,輸入代碼:
//注冊鼠標按下事件偵聽器
this.addEventListener(MouseEvent.MOUSE_DOWN,startDragFunc);
//注冊鼠標釋放事件偵聽器
this.addEventListener(MouseEvent.MOUSE_UP,stopDragFunc);
//定義接收按下事件的函數(shù)
function startDragFunc(e:MouseEvent);
{
//開始拖動
e.target.startDrag();
//更新顯示
e.updateAfterEvent() ;
}
//定義接收釋放事件的函數(shù)
function stopDragFunc(e:MouseEvent);
{
//停止拖動
e.target.stopDrag()
}
3、返回場景1,在圖層1的第一幀拖入兩個影片剪輯,在屬性面板中輸入剪輯的名字,p1 、p2。
4、插入圖層2,選擇文本工具,創(chuàng)建靜態(tài)文本,字體大小15 、字體自定。輸入:斜率:在右面創(chuàng)建動態(tài)文本,名:k_txt。在下面再次創(chuàng)建靜態(tài)文本,輸入:傾斜角:右面創(chuàng)建動態(tài)文本,名:a_txt。
5、插入圖層3,as層。輸入代碼:
//導入數(shù)學函數(shù)
include "Math2.as";
//創(chuàng)建兩個點
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();
//在兩點間繪制箭頭
drawArrow(arrow_shape.graphics,p1.x,p1.y,p2.x,p2.y);
//設置點A的值
A.x=p1.x;
A.y=p1.y;
//設置點B的值
B.x=p2.x;
B.y=p2.y;
//根據(jù)點A和點B創(chuàng)建直線
var line:Line=new Line(A,B);
//把斜率保存兩位小數(shù),并轉換為字符串顯示出來
k_txt.text=line.K.toFixed(2);
//把傾斜角取整后顯示
a_txt.text=line.angle.toFixed();
}
上面的代碼把弧度和角度轉換等函數(shù)放在Math2.as文件中,通過include導入Math2.as文件就可以使用這些數(shù)學函數(shù)。Math2.as文件中添加了繪制箭頭的函數(shù)drawArraw()。
5、測試影片,看一下效果。如果需要輸出p2的x、y坐標添加代碼:
x_txt.text = p2.x;
y_txt.text = p2.y;
界面上添加靜態(tài)文本和動態(tài)文本就不用細說了吧,如果不需要顯示斜率注釋掉。
分享:Flash cs3鼠繪教程:動畫技巧之繪制猴子猴子 效果演示: 討論: http://www.missyuan.com/viewthread.php?tid=417576 寫實效果的關鍵在陰影中。同樣的2.5D 動畫技巧在這兒被使用,不過這次繪制的一個漸變圖形加強了一個更加令人滿意的三維效果。 1. 首先在第一幀放入角色的四分之三的角度。讓我們把它叫做A點
- 相關鏈接:
- 教程說明:
Flash教程-Flash教程:用AS3代碼表現(xiàn)傾斜角與斜率。