写真を割るアニメーション

クリックすると写真が割れます
忘れてしまいたいあんなことやこんなことも割ってしまいましょう
解説はつづきから

新規ファイル作成
ステージ設定はサイズを400×300、フレームレートを30に

まずはステージ中央に160×120の矩形をシェイプで
塗りは好きな色で、線はなし

それを選択ツールで部分的に選択し、色を変える

選択や解除をShiftキーをうまく使いながら繰り返し、縦4、横5の20にわける

選択ツールで角を移動させて、割れた感じがでるように変形させる
(大外の長方形は崩れないように)

20個にわけた破片をそれぞれムービークリップシンボルに変換
インスタンス名をpiece0、piece1、piece2、･･･piece19とつける

新規レイヤーを追加し、写真を160×120のサイズにしてステージ中央に配置

写真をムービークリップシンボルに変換
ActionScriptに書き出しにチェックを入れて、クラス名をImgに
ステージにある写真のインスタンス名をpictureに

新規レイヤーを追加
各レイヤーの5フレーム目を選択してフレームを挿入(F5キー)
レイヤー3の1フレーム目を選択してActionScriptを記述

this.stop();    //このフレームでストップ

//割れる位置の基準点
var bx:int;
var by:int;

//boxを収納する大元の配列
var obj:Array = new Array();
//写真の配列と破片の配列を収納する配列
var box:Array = new Array();
//写真を収納する配列
var imgArray:Array = new Array();
//破片を収納する配列
var pArray:Array = new Array();

//平面方向の回転速度
var speed:Array = new Array();
//奥行き方向の回転速度
var rot:Array = new Array();


for (var i=0; i<20; i++) {
    //空のスプライトを配列に格納し、一番背面に設置
    obj.push(new Sprite());
    addChildAt(obj[i],0);
    //作成したスプライトの位置を
    //それぞれステージ上の破片と同じ位置に
    obj[i].x = this["piece"+i].x;
    obj[i].y = this["piece"+i].y;

    //再び空のスプライトを作成し、objに入れ子にする
    box.push(new Sprite());
    obj[i].addChild(box[i]);

    //写真をステージに追加し、配列に格納
    var img:Img = new Img();
    addChild(img);
    imgArray.push(img);

    //ステージ上の破片を配列に格納
    pArray.push(this["piece"+i]);

    //写真と破片をboxに入れ子に
    box[i].addChild(imgArray[i]);
    box[i].addChild(pArray[i]);

    //写真の位置調整
    imgArray[i].x -= pArray[i].x-200;
    imgArray[i].y -= pArray[i].y-150;
    //破片の位置調整
    pArray[i].x = 0;
    pArray[i].y = 0;

    speed[i] = Math.random()*40-20;    //平面回転速度設定
    rot[i]=0;    //奥行き回転速度初期値

    imgArray[i].mask = pArray[i];    //写真に破片でマスク
    picture.buttonMode = true;    //pictureを指カーソルに
}

//pictureをクリックしたときの設定
picture.addEventListener(MouseEvent.CLICK,clickHandler);
function clickHandler(e:MouseEvent):void {

    //クリック位置によって割れる基準点決定
    bx = mouseX-400;
    by = mouseY-300;

    picture.visible = false;    //pictureを非表示に

    //破片の動き設定追加
    addEventListener(Event.ENTER_FRAME,movePiece);
}

//破片の動き設定
function movePiece(e:Event):void {
    for (i=0; i<20; i++) {
        //破片の移動(割れる基準点からの距離で移動量変化)
        obj[i].x += (obj[i].x-bx-400)/5;
        obj[i].y += (obj[i].y-by-300)/5;
        //破片の大きさを徐々に大きく
        obj[i].scaleX = obj[i].scaleY += 0.05;
        //破片を徐々に透明に
        obj[i].alpha -= 0.05;
        //破片の平面方向の回転
        obj[i].rotation += speed[i];
        //破片の奥行き方向への回転
        rot[i] += speed[i]/50;
        box[i].scaleX = Math.sin(rot[i]);

        //破片が完全に透明になったときの設定
        if (obj[i].alpha<0) {
            //破片の動き削除
            removeEventListener(Event.ENTER_FRAME,movePiece);

            obj[i].visible = false;    //破片を非表示に
            picture.visible = true;    //pictureを表示
            //5フレーム目に移動(また1フレーム目に戻ってきてとまる)
            gotoAndPlay(5);
        }
    }
}

これでムービープレビューすると以下のようになってるかと思います

以上、写真を割るアニメーションの作り方でした