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)