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

Thảo luận trong 'Bài hướng dẫn'

Lượt xem: 3,635

  1. vualaptrinh New Member

    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



  2. vualaptrinh

    vualaptrinh New Member

    Tham gia ngày:
    15/3/06
    Bài viết:
    15
    Đã được thích:
    0
    Hinh ảnh

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

    danger ~ ếch.thế thôi.~

    Tham gia ngày:
    23/6/05
    Bài viết:
    1,060
    Đã được thích:
    0
    nhìn thì hay nhưng mà không có hình minh họa trông lóa mắt quá @[email protected]
  4. laanhtuan

    laanhtuan New Member

    Tham gia ngày:
    27/3/06
    Bài viết:
    11
    Đã được thích:
    0

Chia sẻ trang này