Hiệu ứng slice 3D (slice engine _phần I) potx

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 . 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. dọc Code: base[" ;slice& quot;+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. nãy Code: for (i=0;i<sliceNum;i++) { //tạo mc chứa các slice base.createEmptyMovieClip(" ;slice& quot;+i ,i); //đưa các slice từ mc slice container vào mc mới base[" ;slice& quot;+i].attachMovie("inner","inner"+i ,i); //định