YOMEDIA
Hiệu ứng slice 3D (slice engine _phần I)
Chia sẻ: Dam Huy Tho
| Ngày:
| Loại File: DOC
| Số trang:12
102
lượt xem
20
download
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
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.
AMBIENT/
Chủ đề:
Nội dung Text: Hiệu ứng slice 3D (slice engine _phần I)
- Hiệu ứng slice 3D (slice engine _phần I)
(Thứ Hai, 25/02/200810: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 (yaxis)
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 (xaxis)
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
- 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/200810: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
- 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
- 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
Thêm tài liệu vào bộ sưu tập có sẵn:
Báo xấu
LAVA
ERROR:connection to 10.20.1.100:9315 failed (errno=111, msg=Connection refused)
ERROR:connection to 10.20.1.100:9315 failed (errno=111, msg=Connection refused)
Đang xử lý...
Thêm vào BST
Báo xấu
