Image Animation Follow Mouse

Hướng dẫn tạo hiệu ứng cắt hình chạy theo chuột

* Xem kết quả tại đây!!

Bước 1:

_ Tạo FLA Document “ImageAnimation.fla” kích thướt 480×320

_ Import 1 tấm hình kích thướt 480×320 convert thành movieClip và đặt tên cho nó là “imgDataMc”

Bước 2:

Tạo class “OverImageAnimation.as” trong thư mục “com/imageOverAnimation”

CODE:

package com.imageOverAnimation {
import flash.display.MovieClip;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.events.Event;
import flash.events.MouseEvent;

import gs.TweenMax;

import proxy.Proxy;

/**
* @author yoko
*/
public class OverImageAnimation {
private var ROOT : MovieClip;
private var MAIN_IMG : MovieClip;
private var IMG_PIECE_HOLDER : MovieClip;
private var IMG_PIECE_BITMAP : Bitmap;
private var IMG_MAIN_BITMAP : BitmapData;
private var PIECE_WIDTH : Number = 20;
private var PIECE_HEIGHT : Number = 20;
private var COLUMNS : Number,ROWS : Number;
private var INDEX : Number = 0;

public function OverImageAnimation(mainTimeLine : MovieClip) {
ROOT = mainTimeLine;
MAIN_IMG = ROOT.imgDataMc;

IMG_MAIN_BITMAP = new BitmapData(MAIN_IMG.width, MAIN_IMG.height, true);
IMG_MAIN_BITMAP.draw(MAIN_IMG);

COLUMNS = MAIN_IMG.width / PIECE_WIDTH;
ROWS = MAIN_IMG.height / PIECE_HEIGHT;

createPiece();
}

private function createPiece() : void {
for(var i : uint = 0;i < COLUMNS;i++) {
for(var j : uint = 0;j < ROWS;j++) {
IMG_PIECE_HOLDER = new MovieClip();

IMG_PIECE_BITMAP = new Bitmap();
IMG_PIECE_BITMAP.bitmapData = new BitmapData(PIECE_WIDTH, PIECE_HEIGHT);
IMG_PIECE_BITMAP.bitmapData.copyPixels(IMG_MAIN_BITMAP, new Rectangle(i * PIECE_WIDTH, j * PIECE_HEIGHT, PIECE_WIDTH, PIECE_HEIGHT), new Point(1, 1));

IMG_PIECE_HOLDER.addChild(IMG_PIECE_BITMAP);
IMG_PIECE_HOLDER.x = i * PIECE_WIDTH;
IMG_PIECE_HOLDER.y = j * PIECE_HEIGHT;
IMG_PIECE_HOLDER.origX = IMG_PIECE_HOLDER.x;
IMG_PIECE_HOLDER.origY = IMG_PIECE_HOLDER.y;

IMG_PIECE_HOLDER.addEventListener(MouseEvent.MOUSE_OVER, overHandler);

ROOT.addChild(IMG_PIECE_HOLDER);

INDEX++;
}
// end j
}
// end i
}

private function overHandler(evt : Event) : void {
var imagePieceHolder : MovieClip = evt.target as MovieClip;

var randomX : Number = Math.random() * 1000 – 500;
var randomY : Number = Math.random() * 1000 – 500;
var targetX : Number = imagePieceHolder.x + randomX;
var targetY : Number = imagePieceHolder.y + randomY;

TweenMax.to(imagePieceHolder, 1, {rotation:Math.random() * 360 – 180, x:targetX, y:targetY, onComplete:Proxy.create(outTweenFinished, imagePieceHolder)});

ROOT.setChildIndex(imagePieceHolder, INDEX – 1);

imagePieceHolder.removeEventListener(MouseEvent.MOUSE_OVER, overHandler);
}

private function outTweenFinished(imagePieceHolder : MovieClip) : void {
var origX : Number = imagePieceHolder.origX;
var origY : Number = imagePieceHolder.origY;
TweenMax.to(imagePieceHolder, 1, {rotation:0, x:origX, y:origY, onComplete:Proxy.create(inTweenFinished, imagePieceHolder)});
}

private function inTweenFinished(imagePieceHolder : MovieClip) : void {
imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
}
}
// end class
}

Bước 3:

_ Mở file “ImageAnimation.fla” tạo thêm 1 layer mới code

CODE

import com.imageOverAnimation.OverImageAnimation;
new OverImageAnimation(this);

_ Lưu lại và chạy thử để xem kết quả