1. Math in Flash
Giảng viên: Pham Tien Dung

2. Rectangle, Collision detection and Basic Animation
I. Rectangle, drag – drop and masking
II. Collision detection:
III. Basic animation :
1. Radian ,degree ,
2. velocity and accleration .
3. Boundary and Friction .
4. Easing and Spring .

3. Phần I : Drag –Drop and Rectangle
• Rectangle : mội đối tượng hình khối chữ nhật bao
gồm có các thuộc tính cơ bản như x, y, width, height
• Đối tượng này được sử dụng rất nhiều trong Flash
và thông thường là các trường hợp mà hàm sử
dụng cần một tham số truyền vào để xác định diện
tích (hay khu vực) ứng dụng và xử lý
VD: hàm startDrag() có tham số thứ hai là một biến
kiểu Rectangle để xác định diện tích khu vực drag -
drop .

4. • Drag : Sử dụng hàm startDrag()
• Drop : Sử dụng hàm stopDrag()
• Hai hàm startDrag() và stopDrag() có
trong class Sprite  chỉ Sprite, MovieClip
hoặc các đối tượng custom cấp cao hơn
mới có thể sử dụng

5. • Hàm startDrag() có hai tham số
– lockCenter : Boolean – giá trị mặc định là false, sử
dụng điểm registration point của đối tượng làm điểm
bắt đầu drag. Nếu giá trị truyền vào là true thí điểm
drag là điểm click chuột
– Bounds : Rectangle (giải thích phần dưới)– giá trị mặc
định là null, không giới hạn khu vực drag-drop (trừ khi
chuột di ra khỏi stage). Nếu có giá trị truyền vào thì
khu vực drag-drop sẽ nằm diện tích hình khối đã
truyền vào

6. Masking
• Ý nghĩa và cách sử dụng giống như trong flash IDE.
• Class DisplayObject có một thuộc tính mask để
tham chiếu đến đối tượng mask toàn bộ hình ảnh có
trong nó (lưu ý là chỉ được sử dụng một mask so
với nhiều mask trong flash IDE)

7. Ví dụ
var objectMask:Sprite = new Sprite();
objectMask.graphics.beginFill(0);
objectMask.graphics.drawCircle(0,0,100);
objectMask.graphics.endFill();
this.addChild(objectMask);
objectMask.x = this.width /2;
objectMask.y = this.height/2;
this.mask = objectMask;
(Hãy thử sử dụng những mã lệnh trên trong một file flash
có một bức ảnh làm hình nền xem ).

8. Phần II : Collision detection
• Các kiểu va chạm cơ bản trong Flash
– Va chạm theo đường bound  hàm
hitTestObject()
– Va chạm theo điểm hàm hitTestPoint()

9. • Sử dụng hàm hitTestObject:
• Bên trong hàm chỉ có một tham số là đối tượng display object
được sử dụng để kiểm tra va chạm với đối tượng đã gọi hàm.
• Vd :
• mc1.hitTestObject(mc2)
 Kiểm tra va chạm của đối tượng mc1 với mc2 (lưu ý cả hai
đều phải là các display object).
• Kiểu xác định va chạm này sử dụng đường bound của 2 đối
tượng.
• Ví dụ examplebinUsingHitTestObject.swf

10. • Sử dụng hitTestPoint
• Bên trong hàm có 3 tham số, 2 tham số đầu tương
ứng với tọa độ x, y của tọa độ cần kiểm chứng.
Tham số thứ 3 là một biến boolean xác định xem
kiểu va chạm là theo đường biên hay theo hình khối
bên trong.
• Ví dụ examplebinUsingHitTestPoint.swf

11. Phần III:Basic animation
I. Radian and Degree:
1. Khái niệm:
Radian và degree đều là những khái niệm để chỉ số đo của
một góc,một vòng tròn có 360 degrees (chúng ta hay gọi là độ)
tương ứng với 2 PI radians.( 1 PI xấp xỉ bằng 3.1416 ).

12. Flash sử dụng cả degree và radian :
– Degree : Moi người đã quen với khái niệm 360 độ và ở đây
degree ám chỉ số đo góc tính bằng độ. Trong Flash degree
thường được sử dụng để xác định hướng và góc quay của đối
tượng .
– Radian : Một khái niệm tương đối lạ ,tuy nhiên khi bạn đã làm
quen với các con số : 360 degree = 2 Pi radian ; 90 degree = ½
radian thì mọi chuyện sẽ dễ dàng hơn .Trong Flash radian
thường dùng để xác định vị trí toạ độ của đối tượng
• Công thức thay đổi giá trị góc giữa radian và degree:
radians = degrees * Math.PI / 180 ;
degrees = radians *180 / Math.PI ;

13. • Hệ trục toạ độ trong Flash khác với hệ trục toạ độ thực:
– Hệ trục toạ độ thực:

14. – Hệ trục toạ độ trong Flash :
Có trục oy hướng xuống dưới (ngược với thực)

15. • Số đo góc trong Flash cũng trái ngược với số đo góc
thực :
– Số đo góc thực :

16. • Số đo góc trong Flash:

17. 2. Ứng dụng trong Flash:
– Xác định góc (hay góc quay của đối tượng):
Object.rotation = angle
// Object.rotation : Góc của đối tượng (mặc định
ban đầu là 0 nếu ko được gán giá trị
//angle : số đo góc được gán cho đối tượng
(được tính bằng degree tức là mang giá trị
từ-180180).

18. – Tạo các chuyển động hình tròn
Need:
• Center position : toạ độ trung tâm
• Radius : bán kính hình tròn (khoảng cách giữa đối
tượng và tâm – đơn vị là pitxel)
• Angle :Góc quay (phải được chuyển sang radian).
Ví dụ muốn quay một vật theo hình tròn có tâm là
trung tâm stage và bán kính là 200:

19. var angle:int = 5;
var radius:int = 200
var ball:Ball = new Ball();// vật thể là 1 quả bóng
ball.x= stage.stageWidth/2+radius;
addChild(ball);
addEventListener(Event.ENTER_FRAME,rotateBall);
function rotateBall(e:Event):void{
angle +=20;
var radian:Number = angle * Math.PI / 180;
//chuyển số đo góc từ degree sang radian
ball.x=Math.cos(radian) * radius;//vi tri ở trục x
ball.y=Math.sin(radian)*radius;//vị trí ở trục y
}

20. II. Velocity and Accleration :
1. Velocity:
• Khái niệm:
Velocity (gần giống như vector) là sự tổng hợp của
• Direction (phương và hướng)
• Speed (độ dài đoẳn thằng – được tính bằng pitxel).
• Sự khác biệt lớn nhất giữa vector và velocity là
magnitude(hay độ lớn)của vector luôn dương trong
khi velocit có speed âm nghĩa là vector đó có
hướng đối diện .

21. • Một số vector thông thường

22. Một velocity có speed âm nghĩa là nó
quay về phía đối diện:

23. • Ứng dụng :
– Velocity thường được dùng để xác định vị trí
và hướng của đối tượng tại thời điểm tiếp
theo (đói với Flash thì thừơng đó là các
Frame kế tiếp).
– Velocity thường đựoc xác định nhờ vào :
• Toạ độ ban đầu
• Speed định sẵn (hay radius);
• Góc quay kế tiếp hoặc toạ độ điểm kế .

24. – Biết trước góc quay :
• Thường là các ứng dụng di chuyển đối tượng theo
bàn phím
– Biết trước toạ độ :
• Thường để xác định hướng di chuyển cho các đối
tượng tới các đối tượng khác (đuổi theo) như di
chuyển theo chuột).

25. 2. Accleration:
• Khái niệm :
– Accleration (gia tốc) là sự thay đổi của
velocity theo hướng tăng dần hay giảm dần ,
– Velocity thay đổi vị trí của đối tượng
,accleration thay đổi velocity.

26. • Ứng dụng:
– Accleration sử dụng để tạo ra gia tốc cho đối
tượng (phương tiện di chuyển)
– Accleration tạo ra môi trường “giả trọng lực”.

27. III. Boundary and Friction:
1. Boundary:
– Khái niệm:
• Environments boundary là khái niệm để chỉ khu vực
hay giới hạn vùng quan sát (trong Flash thì giới hạn của
chúng ta là toàn bộ hay 1 phần của stage).Trong đa số
trường hợp thì environments boundary thường là các
khối hình chữ nhật.
– Ví dụ:
– Khi ta nói một đối tượng ball có environtment boundary là
stage thì có nghĩa là nó bị bao quanh bởi bốn đường
biên của stage là top ,bottom, right, left.

28. if(ball.x > stage.stageWidth) {
// do something
} else if(ball.x < 0) {
// do something
}
if(ball.y > stage.stageHeight) {
// do something
} else if(ball.y < 0) {
// do something
}

29. • Boundary có nhiều ứng dụng tùy thuộc theo những
mục đích riêng, chủ yếu có bốn cách ứng xử khi
đối tượng vượt ra khỏi boundary :
– Nó bị xóa đi
– Đưa trở lại màn hình và coi như là một đối tượng (ví dụ
như game paddleball).
– Đưa trở lại màn hình ở một vị trí khác
– Bật ngược trở lại (Bouncing).
• Bouncing:
– Khi một vật bật ngược trở lại thi nó thường có :
» Ngược chiều x: nếu va vào right hay left;
» Ngược chiêu y : nếu va vào top hay bottom

31. 2. Friction:
• Khái niệm:
– Friction (lực ma sát) là khái niệm để chỉ lực tác động khiến cho
veclocity của đối tượng giảm dần về 0 (chỉ giảm speed của
veclocity) .
• Ứng dụng:
– Normal way:
» Lấy độ lớn của veclocity trừ đi friction :
speed- = friction.
Tuy nhiên friction chỉ có thể giảm veclocity của đối tượng về 0
nên cần có thêm điều kiện
if(speed > friction) speed -= friction;
else speed = 0;

32. Easy way:
Mặc định nếu như ko có friction thì veclocity của đối tượng
sẽ có speed tối đa (speed*1) , nếu có thêm friction, thay
vì trừ đi ta sẽ nhân với hiệu của 1 và friction. Chẳng hạn
như friction bằng 0.3 thì :
vx*=0.7;
vy*=0.7;
Với cách này ta sẽ không phải quan tâm đến việc speed có
lớn hơn friction hay ko

33. IV. Easing and Spring:
Easing và Spring là 2 khái niệm để chỉ cách di
chuyển của một đối tượng, cả 2 kỹ thuật trên đều có
những điểm chung :
– Gán 1 điểm đích
– Xác định khoảng cách giữa đối tượng và đích
– Chuyển động của đối tượng tỷ lệ với khoảng cách, khoảng
cách càng lớn chuyển động càng lớn

34. 1. Easing:
– Kỹ thuật Easing (chậm dần) được sử dụng thông qua các bước sau:
1. Xác định tỷ lệ chuyển động, số này phải là một phân số của 1(1/2,
1/3, 1/4, 1/5 ….)
2. Xác định đích
3. Tính khoảng cách giữa đích và đối tượng
4. Nhân khoảng cách với tỷ lệ chuyện động xác định ở trên, kết quả
sẽ là veclocity của đối tượng.
5. Cộng veclocity đó với vị trí hiện tại
6. Làm lại bước 3 cho đến khi đối tượng đến đích .

36. • Ví dụ:
Tạo một chuyển động spring của đối tượng ball có
các số liệu sau:
• Tọa độ ban đầu là (0,200);
• Đích là trung tâm stage
• Tỷ lệ chuyển động là 0.2;
Code:
//tỷ lệ chuyển động
var spring:Number=0.2;
//đích đến
var targetX:Number = stage.stageWidth/2;
var targetY:Number = stage.stageHeight/2;
//tạo đối tượng và xác định tọa độ
var ball:Ball=new Ball();
ball.x=0;
ball.y=200;

37. //bắt sự kiện enterframe
addEventListener(Event.EnterFrame, actionOnFrame);
function actionOnFrame(e:Event):void{
//khoảng cách
var dx:Number = ball.x-target.x;
var dy:Number = ball.y-target.y;
//nhan voi ty le
var vx:Number = dx*spring;
var vy:Number = dy*spring;
//cong voi vi tri hien tai
ball.x+=vx;
ball.y+=vy;
}

38. 2. Spring:
Kỹ thuật Spring (lực kéo) được sử dụng thông qua các
bước sau :
1. Xác định tỷ lệ chuyển động, số này phải là một phân số của 1(1/2,
1/3, 1/4, 1/5 ….)
2. Xác định đích
3. Tính khoảng cách giữa đích và đối tượng
4. Nhân khoảng cách với tỷ lệ chuyện động xác định ở trên, kết quả
sẽ là accleration của đối tượng.
5. Cộng accleration đó với veclocity hiện tại.
Khi thử làm một ví dụ giống như trên bạn sẽ thấy một vấn đề đó
là các chuyển động đó sẽ diễn ra liên tục không bao giờ ngững,
cần sử dụng friction để làm chậm chuyển động đó lại .

39. var spring:Number = 0.2;
var targetX:Number = stage.stageWidth/2;
var targetY:Number = stage.stageHeight/2;
var ball:Ball=new Ball();
ball.x=0;
ball.y=200;
addChild(ball)
//khởi tạo veclocity và accleration
var vx:Number=0;
var vy:Number=0
var ax:Number=0;
var ay:Number=0;
//bắt sự kiện enterframe
addEventListener(Event.ENTER_FRAME, actionOnFrame);
function actionOnFrame(e:Event):void{
//khoảng cách
var dx:Number = targetX – ball.x;
var dy:Number = targetY – ball.y;
//nhan voi ty le
var ax:Number = dx*spring;
var ay:Number = dy*spring;
//cong voi veclocity hien tai
vx+=ax;
vy+=ay;
ball.x+=vx;
ball.y+=vy;
}
var spring:Number = 0.2;
var friction:Number=0.95;
var targetX:Number = stage.stageWidth/2;
var targetY:Number = stage.stageHeight/2;
var ball:Ball=new Ball();
ball.x=0;
ball.y=200;
addChild(ball)
//khởi tạo veclocity và accleration
var vx:Number=0;
var vy:Number=0
var ax:Number=0;
var ay:Number=0;
//bắt sự kiện enterframe
addEventListener(Event.ENTER_FRAME,
actionOnFrame);
function actionOnFrame(e:Event):void{
//khoảng cách
var dx:Number = targetX – ball.x;
var dy:Number = targetY – ball.y;
//nhan voi ty le
var ax:Number = dx*spring;
var ay:Number = dy*spring;
//cong voi veclocity hien tai
vx+=ax;vx*=friction;
vy+=ay;vy*=friction;
ball.x+=vx;
ball.y+=vy;
}

40. Home work

41. 1. Tạo một đối tượng “mũi tên” trên màn hình sao cho đầu
mũi tên đó luôn quay theo hướng của con chuột.
2. Tạo thêm nhiều đối tượng “ball” xuất hiện và di chuyển
trên màn hình “ngang dọc” tùy ý sao cho: đầu mũi tên
luôn hướng về quả bóng ở gần nó nhất.
3. Tạo một đối tượng “car” trên màn hình có khả năng di
chuyển với đầy đủ các hiệu ứng:
• Gia tốc
• Lực ma sát.