Giả hiệu ứng chuyển tiếp của từng pixer

[vualaptrinh]

Flash không có hỗ trợ hiệu ứng chuyển tiếp từng pixel như trong Director, bởi vì Flash sử dụng chương trình dịch hình ảnh bằng vector, và không cho phép người dùng tác động vào từng pixel trên màn hình. Vì vậy mẹo này sẽ tạo ra những ô nhỏ như từng pixel để mask hình 1 đi và cho hiện ra hình 2. Xem flash mình hoạ dưới đây:




Mẹo này làm trong 3 bước sau:
1. Tạo ra 1 hình giả pixel, với kích thước 4x4
2. Tạo ra nhiều bản sao từ bước 1 với MovieClip.
3. Tạo sự chuyển tiếp giữa 2 tấm hình bằng script để làm biến mất từng pixel một, và dùng tất cả các pixel như 1 cái mask

Chúng ta có hàng ngàn pixel giả, nếu mà dùng onEnterFrame thì sẽ dễ dàng làm đứng máy, vì vậy chúng ta sẽ dùng setInterval()

Bước I: Tạo pixel bằng cách tạo 1 hình vuông
Vào File > New > Flash Document
Tạo stage với kích thước 200x200 và màu trắng (Modify > Document)
Vẽ 1 hình vuông không có đường viền (nếu có đường viền thì hiệu ứng sẽ chậm đi)
Vào Properties panel (Window > Properties) và chỉnh chiều cao, chiều ngang của hình vuông thành 4, chỉnh toạ độ X và Y thành 0. Xem hình minh họa

Chuyển hình vuông thành đối tượng movie clip, bằng cách chọn hình vuông (với Selection tool) và nhấn F8 (hay có thể vào Modify > Convert to Symbol), Flash sẽ cho ra window Symbol Properties. Đặt tên cho movie clip là "dot" và chọn các option như hình sau

Sau đó bạn có thể xoá cái hình mới vẽ trên stage đi vì chúng ta sẽ gọi movie clip này từ "thư viện".

Bước II: tạo ra nhiều bản sao từ movie clip "dot"

Trên Timeline, tạo ra 1 layer, đặt tên là "action", và trong Frame 1, viết đoạn code sau vào Action panel (F9)

ActionScript
function drawGrid (theWidth:Number, theHeight:Number):Void {
var initDot:Object = new Object( );
var k:Number = 0;
for (var i:Number = 0; i < theWidth; i += 4) {
for (var j:Number = 0; j < theHeight; j += 4) {
var dotName:String = "dot" + i + "_" + j;
initDot._x = i;
initDot._y = j;
this.attachMovie("dot", dotName, k, initDot);
k++;
}
}
}

drawGrid(200, 200);

Đoạn code trên tạo ra 1 hình vuông 200x200 pixel gồm có những movie clip "dot". Mỗi "pixel" được đặt được ở vị trí (i,j) và ở "depth" k trên Stage, và có tên là doti_j. Bản sao đầu tiên của "dot" là dot0_0 ở trên góc trái và cuối cùng là dot199_199 ở góc dưới bên phải.

Lưu Ý: hiệu ứng này tạo ra 2500 movieclip nhỏ, và Flash thường thì chạy rất chậm nếu như có 3000 tới 4000 movie clip cùng lúc xuất hiện trên stage, vì vậy bạn không nên tạo hơn nhiều 2500 movie clip. Nếu bạn cần tạo ra mask lớn hơn 200x200, thì nên tạo những "pixel" lớn hơn

Bước III: Điều khiển các "pixel"

Chúng ta cần phải làm cho các "pixel" biến mất thì mới làm cho hình đâu mất đi và hiện hình thứ 2 ra. Chúng ta dùng setInterval(object,method,timer) để gọi hàm Object.method() cho một khoảng thời gian cố định. Chúng ta sửa đoạn code trên thành

ActionScript
function drawGrid(theWidth:Number, theHeight:Number, imageClip:MovieClip):Void {
var initDot = new Object( );
var k:Number = 0;
// Create a mask clip to hold all the dots
this.createEmptyMovieClip("mask", 1);
// Assign it as the masking clip
imageClip.setMask(mask);
for (var i:Number = 0; i < theWidth; i += 4) {
for (var j:Number = 0; j < theHeight; j += 4) {
var dotName:String = "dot" + i + "_" + j;
initDot._x = i;
initDot._y = j;
initDot.timer = 1000 + Math.ceil(Math.random( )*800);
// Place the masking dots within the container mask clip
mask.attachMovie("dot", dotName, k, initDot);
k++;
}
}
}

drawGrid(200, 200, image1_mc);

Bây giờ chúng ta có tất cả các pixel ở trong 1 movie clip tên "mask" và sử dùng movie clip này để mask movie clip có hình đầu tiên. Chúng ta đã có cái "timer" rồi, bây giờ dựa trên giá trị này để ra lệnh cho các pixel biến mất đi. Chúng ta vào trong cái movie clip "dot" và thêm 1 layer nữa là "action" và viết đoạn code sau vào frame đầu tiên (và cũng là frame duy nhất của movie clip "dot")

ActionScript
removeMe = function ( ) {
clearInterval(countDown);
this.removeMovieClip( );

};

var countDown = setInterval(this, "removeMe", timer);


Sử dụng hiệu ứng
Để sự dụng hiệu ứng này, bạn tạo ra sự chuyển tiếp giữa 2 layer, cái hình đầu tiên phải nằm trên layer có cái hình thứ 2 (bạn nhớ đặt tên cho cái hình đầu tiên là "image1_mc" cho giống như đoạn code trên)

Phát triển thêm cho hiệu ứng
Thay đổi khoảng cách biến mất giữa các "pixel", bạn có thể tạo ra nhiều hiệu ứng khác. Ví dụ dựa vào vị trí của các "pixel", chúng ta có thể tạo ra hiệu ứng chuyển tiếp từ trái sang phải

ActionScript
initDot.timer = 1000 + (Math.random( )*(initDot._x)*10);

hay xéo xuống

ActionScript
initDot.timer = 1000 + (Math.random( )*(initDot._x + initDot._y)*5);
Xin thong bao day cung la bai viet toi sưu tam tren mang nen co gi thi lien he voi minh nha

Xem thêm bài viết cùng chuyên mục:

• Download Macromedia Packet !!!!
• Làm trong suốt cửa sổ thế nào , em đang rất...
• Giả hiệu ứng chuyển tiếp của từng pixer
• Ebook Flash Tiếng Việt !
• Tao button dong cho web cua ban

[vualaptrinh]

Nhũng hinh anh minh hoa minh se post sau nha!!!

[danger]

nhìn thì hay nhưng mà không có hình minh họa trông lóa mắt quá @_@

[laanhtuan]

ý tưởng hay lắm nhưng cũ rồi
hình minh họa đây

cái này em cũng siêu tầm được ,có gì PM nghen :xuong