マウスオーバーで拡大するイメージギャラリー

zoom_image



普段は一部分だけが表示されていて、マウスオーバーすると全体が表示されるというイメージギャラリーの作り方です
解説はつづきから




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



まずは使いたい画像を読み込み
画像サイズは各々280×210




そろぞれシンボルに変換
シンボル名を左上をupLeft、右上をupRight、左下をdownLeft、右下をdownRightに
インスタンス名を左上をimg0、右上をimg1、左下をimg2、右下をimg3に





upLeftをダブルクリックし、シンボル編集モードに
新規レイヤーを追加して、レイヤー名をmaskに





maskレイヤーに140×105の矩形を描き、基準点を左上にしてシンボルに変換
インスタンス名をmaskObjに
それを画像の左上に配置
maskレイヤーを右クリックし、マスクをかける




他のシンボルも同じように矩形をつくってマスクをかける
基準点とマスクの位置は、右上の画像は右上に、左下の画像は左下に、右下の画像は右下に
マスクのインスタンス名はすべてmaskObjで





シーン1に戻って、シンボル位置を調整




新規レイヤーを作成し、ActionScriptを記述

//インスタンスを配列に格納
var imgArray:Array = [img0,img1,img2,img3];

var num:int = -1;    //インスタンスを判別するための変数

addEventListener(Event.ENTER_FRAME,enterframeHandler);
function enterframeHandler(event:Event):void {
    var scale:int;    //大きさ比率

    for (var i=0; i<imgArray.length; i++) {
        //マウスオーバーした画像のnumと同じ番号の配列の大きさを2倍に
        if (num == i) {
            scale = 2;
        //それ以外は元の大きさに
        } else {
            scale = 1;
        }
        //マスクの大きさを目標値に徐々に変化
        imgArray[i].maskObj.scaleX += (scale-imgArray[i].maskObj.scaleX)/5;
        imgArray[i].maskObj.scaleY += (scale-imgArray[i].maskObj.scaleY)/5;
    }
}

//マウスオーバー時の処理
addEventListener(MouseEvent.MOUSE_OVER,zoomIN);
function zoomIN(e:MouseEvent):void {
    //マウスオーバーされたインスタンスのインスタンス名取得
    var str = e.target.name;
    //インスタンス名から番号を取得、numに代入
    num= int(str.slice(-1,4));

    //マウスオーバーされたインスタンスが最前面にくるように
    var _mc = e.target;
    var lastIndex:int = numChildren - 1;
    setChildIndex(_mc,lastIndex);
}

//マウスアウト時の処理
addEventListener(MouseEvent.MOUSE_OUT,zoomOUT);
function zoomOUT(e:MouseEvent):void {
    num= -1;    //何も選ばれていない状態に
}


背景を加えてムービープレビューすると以下のようになるかと思います





以上、マウスオーバーで拡大するイメージギャラリーの作り方でした