Docstoc

Hieu ung Slide 3D

Document Sample
Hieu ung Slide 3D Powered By Docstoc
					 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

				
DOCUMENT INFO
Description: Hieu ung Slide 3D