function onwindowResize():Void { 内の if (sw >= original_w && sh >= original_h) { 以下
オリジナルの写真サイズ（ここでは1200）と、表示されているウインドウのサイズを比較し、写真全体が縦横比を保ったまま表示されるように表示比率を設定する。 var mask_mc = thumbContainer.createEmptyMovieClip("mask_mc" + i, j);
マスクインスタンスの作成。 初期表示のサムネイルサイズと同一、同一サイズで矩形を描き、各サムネイルのマスクとする。 ロールオーバーでサムネイルが拡大されても、初期表示領域内だけが見えるようにするため。
スクリプト Frame1に記述 （as3.0）
import flash.filters.ColorMatrixFilter;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.events.Event;
import fl.transitions.*;
import fl.transitions.easing.*;
//表示写真の数、幅、高さ
var img_num:Number = 16;
var original_w:Number = 1200;
var original_h:Number = 675;
//サムネイルの幅、高さ、表示列数、表示間隔
var th_w:Number = 300;
var th_h:Number = 169;
var col_num:Number = 4;
var space:Number = 3;
//サムネイル初期表示倍率
var scale0:Number = 0.6;
//表示写真クリックの有無
var large_mcClick:Boolean;
//表示写真の表示倍率
var imgScale:Number;
var mcx:Number;
var mcy:Number;
//画面表示初期設定、リサイズリスナーセット
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeListener);
function resizeListener(event:Event):void {
onwindowResize();
}
//サムネイル収納ＭＣ作成、幅、高さ設定
var thumbContainer:MovieClip = new MovieClip();
var thumbContainer_w = (th_w*scale0 + space)*col_num;
var thumbContainer_h = (th_h*scale0 + space)*img_num/col_num;
addChild(thumbContainer);
//写真表示用ＭＣの作成
var large_mc:MovieClip = new MovieClip();
addChild(large_mc);
onwindowResize();
//画面サイズに応じたサムネイル、写真の配置
function onwindowResize():void {
var sw:Number = stage.stageWidth;
var sh:Number = stage.stageHeight;
thumbContainer.x = sw / 2 - thumbContainer_w / 2;
thumbContainer.y = sh / 2 - thumbContainer_h / 2;
if (sw >= original_w && sh >= original_h) {
imgScale = 1;
} else if (sw>original_w && sh <= original_h) {
imgScale = sh / original_h;
} else if (sw<=original_w && sh > original_h) {
imgScale = sw / original_w;
} else {
if (sw / original_w <= sh / original_h) {
imgScale = sw / original_w;
} else {
imgScale = sh / original_h;
}
}
}
for (var i:uint; i<=img_num; i++) {
//サムネイル、マスクの作成・配置
var thumb_mc:MovieClip = new MovieClip();
var mask_mc:MovieClip = new MovieClip();
drawRec(mask_mc);
thumbContainer.addChild(thumb_mc);
thumbContainer.addChild(mask_mc);
thumb_mc.buttonMode = true;
thumb_mc.x = th_w*scale0/2+(i-1)%col_num*(th_w*scale0+space);
thumb_mc.y = th_h*scale0/2+Math.floor((i-1)/col_num)*(th_h*scale0+space);
thumb_mc.scaleX = scale0;
thumb_mc.scaleY = scale0;
thumb_mc.centerX = thumb_mc.x;
thumb_mc.centerY = thumb_mc.y;
thumb_mc.num = i;
mask_mc.x = (i-1)%col_num*(th_w*scale0+space);
mask_mc.y = Math.floor((i-1)/col_num)*(th_h*scale0+space);
thumb_mc.mask = mask_mc;
//thumb_mcの入れ子in_mcを作成しそこにサムネイル画像をロード
var in_mc:MovieClip = new MovieClip();
in_mc.x = - th_w / 2;
in_mc.y = - th_h / 2;
thumb_mc.addChild(in_mc);
var mcLoader:Loader = new Loader();
var url = "img/mp" + i + ".jpg";
in_mc.addChild(mcLoader);
var urlReq:URLRequest = new URLRequest(url);
mcLoader.load(urlReq);
colorConvert(thumb_mc,"gray");//グレースケールモードに
thumb_mc.addEventListener(MouseEvent.ROLL_OVER,rOver);
thumb_mc.addEventListener(MouseEvent.ROLL_OUT,rOut);
thumb_mc.addEventListener(MouseEvent.CLICK,cLick);
}
//サムネイルのロールオーバー
function rOver(event:MouseEvent):void {
var mc:MovieClip = event.target as MovieClip;
mc.over = true;
colorConvert(mc,"normal");//通常カラーモードに
mc.addEventListener(Event.ENTER_FRAME,thumbEnterframe);
}
//サムネイルのロールアウト
function rOut(event:MouseEvent):void {
var mc:MovieClip = event.target as MovieClip;
mc.over = false;
colorConvert(event.target,"gray");//グレースケールモードに
}
//サムネイルのFrame毎のアクション
//RollOverで拡大・マウスに反応、RollOutで戻す
function thumbEnterframe(event:Event):void {
var mc = event.target as MovieClip;
if (mc.over) {
mc.x += (mc.centerX+(mc.centerX-(mouseX-thumbContainer.x))*(1-scale0)/scale0-mc.x)/3;
mc.y += (mc.centerY+(mc.centerY-(mouseY-thumbContainer.y))*(1-scale0)/scale0-mc.y)/3;
mc.scaleX += (1 - mc.scaleX)/3;
mc.scaleY += (1 - mc.scaleY)/3;
mcx = mc.x;
mcy = mc.y;
} else {
mc.x += (th_w*scale0/2+(mc.num-1)%col_num*(th_w*scale0+space) - mc.x)/3;
mc.y += (th_h*scale0/2+Math.floor((mc.num-1)/col_num)*(th_h*scale0+space)-mc.y)/3;
mc.scaleX += (scale0 - mc.scaleX)/3;
mc.scaleY += (scale0 - mc.scaleY)/3;
}
}
//写真のロード･表示
function cLick(event:MouseEvent):void {
var mc = event.currentTarget as MovieClip;
var th_x=thumbContainer.x+(mc.num-1)%col_num*(th_w*scale0+space);
var th_y=thumbContainer.y+Math.floor((mc.num-1)/col_num)*(th_h*scale0+space);//mc.y;
var url = "img/p" + mc.num + ".jpg";
var imgLoader:Loader = new Loader();
large_mc.addChild(imgLoader);
var urlReq:URLRequest = new URLRequest(url);
imgLoader.load(urlReq);
imgLoader.contentLoaderInfo.addEventListener( Event.COMPLETE , imgDisplay);
function imgDisplay(event:Event) {
large_mcClick = false;
thumbContainer.visible = false;
large_mc.width = th_w;
large_mc.height = th_h;
large_mc.x = thumbContainer.x + mcx - th_w/2;
large_mc.y = thumbContainer.y + mcy - th_h/2;
//large_mc.x = th_x - th_w / 2;
//large_mc.y = th_y;
large_mc.targetSX = thumbContainer.x+(mc.num-1)%col_num*(th_w*scale0+space);
large_mc.targetSY = thumbContainer.y+Math.floor((mc.num-1)/col_num)*(th_h*scale0+space);
large_mc.addEventListener(Event.ENTER_FRAME,large_mcEnterframe);
large_mc.addEventListener(MouseEvent.CLICK,toThumb);
function toThumb(event:MouseEvent):void {
large_mcClick = true;
thumbContainer.visible = true;
large_mc.removeEventListener(MouseEvent.CLICK,toThumb);
}
}
}
//写真のFrame毎のアクション
//サムネイルのクリックで拡大表示
//拡大写真クリックで縮小し元の位置に
function large_mcEnterframe(event:Event):void {
var large_mc = event.target as MovieClip;
large_mc.visible = true;
large_mc.buttonMode = true;
var targetLX = stage.stageWidth / 2 - original_w * imgScale / 2;
var targetLY = stage.stageHeight / 2 - original_h * imgScale / 2;
if (large_mcClick) {
large_mc.width += (th_w*scale0 - large_mc.width)/5;
large_mc.height += (th_h*scale0 - large_mc.height)/5;
large_mc.x += (large_mc.targetSX - large_mc.x)/5;
large_mc.y += (large_mc.targetSY - large_mc.y)/5;
if (Math.abs(th_w*scale0 - large_mc.width
) < 1) {
large_mc.removeEventListener(MouseEvent.CLICK,large_mcEnterframe);
large_mc.visible = false;
large_mc = null;
}
} else {
large_mc.width += (original_w*imgScale - large_mc.width)/7;
large_mc.height += (original_h*imgScale - large_mc.height)/7;
large_mc.x += (targetLX - large_mc.x)/7;
large_mc.y += (targetLY - large_mc.y)/7;
colorConvert(large_mc,"normal");
}
}
//カラーの設定関数
function colorConvert(image, colorMode) {
if (colorMode == "normal") {
var matrix:Array = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0];
} else if (colorMode == "gray") {
matrix = [0.3,0.59,0.11,0,0,0.3,0.59,0.11,0,0,0.3,0.59,0.11,0,0,0,0,0,1,0];
}
var colorFilter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
image.filters = [colorFilter];
}
//マスク矩形描画関数
function drawRec(mc):void {
var shape = new Shape();
mc.addChild(shape);
var gr = shape.graphics;
gr.beginFill(0x000000,1);
gr.drawRect(0,0,th_w*scale0,th_h*scale0);
gr.endFill();
}
