Hiệu ứng slice 3D (slice engine _phần I)
(Thứ Hai, 25/02/2008-10:18 AM)
Điều mà chúng ta cố gắng tạo ra là mô phỏng một vật thể 3D
(Three - Dimensional) trong một không gian 2D (Two -
Dimensional). Ở đây chúng ta sẽ phân tích quá trình mô phỏng 1
hòn đảo theo kĩ thuật Slice 3D.
NGUYÊN LÍ CƠ BẢN
Điều mà chúng ta cố gắng tạo ra là mô phỏng một vật thể 3D (Three - Dimensional)
trong một không gian 2D (Two - Dimensional).Ở đây chúng ta sẽ phân tích quá trình
mô phỏng 1 hòn đảo theo kĩ thuật Slice 3D.
Nguyên lí cơ bản là tạo ra 1 series các lớp đồng mức của hòn đảo, sau đó đặt các lớp
này chồng lên nhau và sử dụng chuột để tương tác thể hiện các góc độ của vật thể
Để mô phỏng vật thể 3D, từng slice phải bị kéo nghiêng, ta có thể làm điều này thủ
công bằng cách dùng công cụ Free Transform
Nhìn hình sau sẽ rõ hơn
Như bạn thấy, tất cả các slice đều bị xoay hoặc nghiêng đi một góc bằng nhau tạo ra
một ảo giác đó là vật thể 3D.
TẠO RA MOVIE CLIP CỦA VẬT THỂ
Phần này hướng dẫn chúng ta làm mc chứa các slice của hòn đảo để sử dụng viết code
sau này.
B1: Chúng ta có thể tham khảo trong file sau step1_final.fla. Nhưng tác giả khuyên
chúng ta tự tạo ra mc này. Trên stage, dùng Pencil, để filter là Smooth, vẽ một đường
đồng mức, đường này là to nhất vì nó thấp nhất trong hòn đảo. Fill nó bằng linear hay
solid cũng được, nhớ rằng đây là một hòn đảo, vì vậy bạn nên chọn màu đất như màu
nâu chẳng hạn.
B2: Convert nó thành mc, tên: slice container
B3: Nhấp đôi vào mc trên library (Edit), tạo một keyframe tại frame 15. Tại đây, scale
cái đường đồng mức hồi nãy cho nhỏ lại, tượng trưng cho đường trên cùng của hòn
đảo. Fill nó bằng linear hay solid, nhưng phải khác với kiểu filled ở keyframe 1.
B4: Tạo Shape tween, bật Onion skin và Onion skin outlines lên bạn sẽ dễ hình dung
hơn

TẠO CÁC GLOBAL VAR VÀ ẤN ĐỊNH GIÁ TRỊ
Phần nay hướng dẫn bạn tạo và ấn định các global var cần thiết trong kĩ thuật slice
3D. Bạn cần phải linkage cái mc slice container để attach vào stage về sau này, bạn
nhấp chuột phải vào mc trên library, chọn linkage, check vào ô "Export for
ActionScript", điền tên vào là inner
Tiếp theo tại frame 1 bạn code như sau, mình sẽ chú thích luôn trong đó:
Code:
// cái này làm giảm cường độ hoạt động của CPU để những máy yếu có thể chạy mà
không bị giật
_quality = "low";
//số slice
sliceNum = 15;
//khoảng cách giửa 2 slice liên tiếp
step = 4;
//góc tạo bởi sườn của hòn đảo với trục tung (y-axis)
angle = 20;
//kiểm soát độ nhạy của việc xoay hòn đảo theo chiều dọc, dựa trên trục tung
scaleFactor = 0.5;
//kiểm soát độ nhạy của việc xoay hòn đảo theo chiều ngang, dựa trên trục hoành (x-
axis)
rotSpeed = 0.05;
//var chứa vị trí của mc trên stage
offsetX = 200;
offsetY = 200;
//tạo mc base chứa các slice
createEmptyMovieClip("base", 0);
//vị trí của base mc trên stage
base._x = offsetX;
base._y = offsetY;
Bạn có thể tham khảo trong file này step2_final.fla

ĐƯA CÁC SLICE VÀO MC BASE
Bạn đã tạo ra các biến số, bây giờ bạn sẽ đi vào việc tạo hình hòn đảo dựa trên mc
slice container (nên nhớ là bạn đã linage mc này tên là inner nhé, bạn sẽ dùng tên
này trong code chứ không dùng tên slice container nữa).
Đầu tiên, bạn cần tạo một vòng lặp để attach các slice vào và thay đổi thuộc tính của
nó. Thêm vào đoạn code sau đây tiếp theo đoạn code lúc nãy
Code:
for (i=0;i<sliceNum;i++) {
//tạo mc chứa các slice
base.createEmptyMovieClip("slice"+i,i);
//đưa các slice từ mc slice container vào mc mới
base["slice"+i].attachMovie("inner","inner"+i,i);
//định vị trí của mc mới dọc theo trục tung
base["slice"+i]._y = - i*step*Math.cos (angle*Math.PI/180);
//tính toán scale mc theo trục tung sao cho góc nhìn là 20 độ
base["slice"+i]._yscale = Math.sin (angle*Math.PI/180)*100;
//đi tới frame tiếp theo để tiếp tục vòng lặp
base["slice"+i]["inner"+i].gotoAndStop(i+1);
//đặt var cho từng slice tương ứng với vị trí của nó trong hòn đảo
base["slice"+i].myNum = i;
}
Bây giờ đoạn code của chúng ta trông như sau:
Code:
_quality = "low";
sliceNum = 15;
step = 4;
angle = 20;
scaleFactor = 0.5;
rotSpeed = 0.05;
offsetX = 200;

offsetY = 200;
createEmptyMovieClip("base", 0);
base._x = offsetX;
base._y = offsetY;
for (i=0;i<sliceNum;i++) {
base.createEmptyMovieClip("slice"+i,i);
base["slice"+i].attachMovie("inner","inner"+i,i);
base["slice"+i]._y = - i*step*Math.cos (angle*Math.PI/180);
base["slice"+i]._yscale = Math.sin (angle*Math.PI/180)*100;
base["slice"+i]["inner"+i].gotoAndStop(i+1);
base["slice"+i].myNum = i;
}
Đoạn code này sẽ dựng hình hòn đảo ở dạng tĩnh với góc nhìn là 20 độ, ở những phần
sau chúng ta sẽ cho nó tương tác với chuột.
Bạn cần phải đặt những slice chồng lên nhau theo thứ tự, vì vậy bạn đặt chúng dọc
theo trục tung. Các slice sẽ được đặt từ vị trí gốc tọa độ 0 trở lên trên. Vì Flash sử
dụng hệ trục tung ngược: phần trục âm sẽ giảm dần hướng lên trên, bạn cần chú ý
điều này. Khoảng cách giữa các slice với nhau chính là biến step má chúng ta đã gán
lúc nãy. Bạn xem hình sau:
và khi bạn xoay vật thể theo chiều dọc, tức là angle tăng, do đó step giảm
do đó thuộc tính y của slice sẽ được tính bằng công thức
Code:
y = step * Cosin (angle*Pi/180)
lưu ý rằng angle trong Flash được tính bằng radian nên cần nhân lên với Pi/180, và
đoạn code hoàn chỉnh xác định vị trí y của mc mới chứa các slice như sau
Code:
base["slice"+i]._y = - i*step*Math.cos (angle*Math.PI/180);
thay vì dùng cosin, ta dùng sin để xác định scale các slice theo chiều dọc
Code:
base["slice"+i]._yscale = Math.sin (angle*Math.PI/180)*100;

Hiệu ứng slice 3D (slice engine _phần II)
(Thứ Hai, 25/02/2008-10:27 AM)
TƯƠNG TÁC
Có 2 dạng tương tác có thể đưa vào movie của bạn đó là: xoay theo chiều
ngang (rotational) và xoay theo góc độ (angular)
Rotational Interactivity
Trước khi đưa vào bất kì dạng tương tác nào bạn cần phải chú ý đặt thêm các
global var sao cho hợp lí. Trong trường hợp này bạn cần tạo một function tự
update liên tục khi vào frame mới nên bạn cần dùng onEnterFrame ở timeline
chính.
B1: bạn cần thêm đoạn code sau vào đoạn code lúc nãy (trước vòng lặp)
Code:
onEnterFrame = function() {
//định tốc độ xoay của hòn đảo dựa trên khoảng cách giữa mouse và vị
trí hòn đảo
rot = (this._xmouse - offsetX)*rotSpeed;
};
Bạn có thể tham khảo thêm file này step4_final.fla
B2: sau khi đặt var rot xong, bạn cần tạo một function nữa điều khiển hòn
đảo xoay. Thêm đoạn code này sau vòng lặp
Code:
function rotateMe() {
//điều khiển hòn đảo xoay
this._rotation +=_root.rot;
}
B3: như đã đề cập, kĩ thuật này dựa trên sự nghiêng đi của các slice, do đó ta
cần thêm vào đoạn code sau để làm việc đó cho từng slice (thêm vào sau
dòng này base["slice"+i]["inner"+i].gotoAndStop(i+1);
Code:
//điều khiển độ nghiêng của từng slice

base["slice"+i]["inner"+i].onEnterFrame = rotateMe;
Bây giờ đoạn code hoàn chỉnh của chúng ta như sau
Code:
_quality = "low";
sliceNum = 15;
step = 4;
angle = 20;
scaleFactor = 0.5;
rotSpeed = 0.05;
offsetX = 200;
offsetY = 200;
createEmptyMovieClip("base", 0);
base._x = offsetX;
base._y = offsetY;
onEnterFrame = function() {
rot = (this._xmouse - offsetX)*rotSpeed;
};
for (i=0;i<sliceNum;i++) {
base.createEmptyMovieClip("slice"+i,i);
base["slice"+i].attachMovie("inner","inner"+i,i);
base["slice"+i]._y = - i*step*Math.cos (angle*Math.PI/180);
base["slice"+i]._yscale = Math.sin (angle*Math.PI/180)*100;
base["slice"+i]["inner"+i].gotoAndStop(i+1);
base["slice"+i]["inner"+i].onEnterFrame = rotateMe;
base["slice"+i].myNum = i;
}
function rotateMe() {
this._rotation +=_root.rot;
}
Bạn sẽ thấy hòn đảo có thể xoay tròn quanh trục tung theo chuột của bạn.

Angular Interactivity
Bây giờ bạn sẽ thêm vào một ít code để cho hòn đảo có thể xoay theo góc độ
B1: bạn cần update cái var angle. Vì hòn đảo xoay theo chiều dọc nên chúng
ta sẽ dùng thuộc tính _ymouse để điều khiển tốc độ xoay. Bạn có thể tham
khảo file này step5_final.fla thêm vào đoạn code sau vào sau cái var rot vừa
đặt lúc nãy
Code:
/var này định tốc độ xoay theo chiều dọc
angle = (this._ymouse) *scaleFactor;
B2: sau khi đặt var angle mới xong, chúng ta không cần tới var angle cũ nữa,
nên xóa nó đi vì ở B3 bạn sẽ dùng function để update liên tục hai thuộc tính
_y và _yscale
Code:
//xóa cái này đi
angle = 20;
//cả cái này nữa
base["slice"+i]._y = - i*step*Math.cos (angle*Math.PI/180);
base["slice"+i]._yscale = Math.sin (angle*Math.PI/180)*100;
B3: bạn tạo function sau ở cuối đoạn code lúc nãy
Code:
function scaleMe() {
this._y = - this.myNum*_root.step*Math.cos
(_root.angle*Math.PI/180);
this._yscale = Math.sin (_root.angle*Math.PI/180)*100;
}
B4: một lần nữa bạn thêm đoạn code để scale từng slice, vào cuối vòng lặp
Code:
//scale từng slice khi vào Frame mới
base["slice"+i].onEnterFrame = scaleMe;
bây giờ đoạn code trông như sau

Code:
_quality = "low";
sliceNum = 15;
step = 4;
//angle = 20;
scaleFactor = 0.5;
rotSpeed = 0.05;
offsetX = 200;
offsetY = 200;
createEmptyMovieClip("base", 0);
base._x = offsetX;
base._y = offsetY;
onEnterFrame = function() {
rot = (this._xmouse - offsetX)*rotSpeed;
angle = (this._ymouse) *scaleFactor;
};
for (i=0;i<sliceNum;i++) {
base.createEmptyMovieClip("slice"+i,i);
base["slice"+i].attachMovie("inner","inner"+i,i);
// base["slice"+i]._y = - i*step*Math.cos (angle*Math.PI/180);
// base["slice"+i]._yscale = Math.sin (angle*Math.PI/180)*100;
base["slice"+i]["inner"+i].gotoAndStop(i+1);
base["slice"+i]["inner"+i].onEnterFrame = rotateMe;
base["slice"+i].myNum = i;
base["slice"+i].onEnterFrame = scaleMe;
}
function rotateMe() {
this._rotation +=_root.rot;
}
function scaleMe() {

this._y = - this.myNum*_root.step*Math.cos
(_root.angle*Math.PI/180);
this._yscale = Math.sin (_root.angle*Math.PI/180)*100;
}
Bạn test thử movie xem nào
Sản phẩm lúc này trông như sau