マウスオーバーで拡大するイメージギャラリー
普段は一部分だけが表示されていて、マウスオーバーすると全体が表示されるというイメージギャラリーの作り方です
解説はつづきから
新規ファイル作成
ステージ設定はサイズを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; //何も選ばれていない状態に }
背景を加えてムービープレビューすると以下のようになるかと思います
以上、マウスオーバーで拡大するイメージギャラリーの作り方でした