●html、ｓｗｆファイルと同じディレクトリーにimgフォルダを作り、その中に、サムネイル画像（86*49 の ps1.jpg,ps2.jpg,,,,ps21.jpg）、 及び、拡大画像（720*406 の pl1.jpg,pl2.jpg,,,,pl21.jpg）を置く。
●プロパティインスペクターの「クラス」に photoviewer23 と記述する。 |
package {
import flash.display.*;
import flash.events.MouseEvent;
import flash.display.Loader;
import flash.net.URLRequest;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.events.Event;
import flash.filters.GlowFilter;
import flash.filters.DropShadowFilter;
//ステージの設定
[SWF(width=720, height=406, frameRate=24, backgroundColor=0x000000)]
//クラス
public class photoviewer23 extends Sprite {
private var picNum=21;//写真枚数
private var col:Number=7;//列数
private var th_w:Number=86;//サムネイルの幅
private var th_h:Number=49;//サムネイルの高さ
private var cx:Number=stage.stageWidth/2;//ステージの中心座標
private var cy:Number=stage.stageHeight/2;
private var centerXNo:Number=Math.floor(col/2);//横中心位置の写真番号
private var centerYNo:Number=Math.floor(picNum/col/2);//縦中心位置の写真番号
private var deg:Number=45;//rotationY回転角度
private var largepic_w:Number;//写真の幅
private var largepic_h:Number;//写真の高さ
private var glow1:GlowFilter=new GlowFilter(0xffffff,0.8,1.3,1.3,8,3);
private var glow2:GlowFilter=new GlowFilter(0xff0033,0.8,1.3,1.3,8,3);
//コンストラクタ
public function photoviewer23() {
stage.align="LT";
for (var i:uint=0; i<picNum; i++) {
var thumb_mc:MovieClip = new MovieClip();//サムネイル格納用MC
addChild(thumb_mc);
thumb_mc.x=cx;
thumb_mc.y=cy;
var nestedmc:MovieClip = new MovieClip();//サムネイル読み込み用入れ子MC
thumb_mc.addChild(nestedmc);
nestedmc.buttonMode=true;
nestedmc.x = -(th_w+5)*(centerXNo - i%col) - th_w/2;
nestedmc.y = -(th_h+5)*(centerYNo - Math.floor(i/col)) - th_h/2;
nestedmc.filters=[glow1];
var n:Number=i+1;
nestedmc.num=n;
var url:String="img/ps"+n+".jpg";//サムネイルのurl
loadPic(nestedmc, url);//読み込み・表示関数の参照
//rotationYプロパティの付与
thumb_mc.rotationY = -deg*(centerXNo - i%col)/Math.abs(centerXNo - i%col);
thumb_mc.rotY = -deg*(centerXNo - i%col)/Math.abs(centerXNo - i%col);
//深度の取得
thumb_mc.depth=getChildIndex(thumb_mc);
if (i%col==centerXNo) {
//中央のサムネイルの高さ補正
thumb_mc.scaleY=1+th_h/th_w*Math.sin(deg/360);
} else {
//左右のサムネイルのx座標を左右に移動（中央から離して補正）
nestedmc.x -= 15*(centerXNo - i%col)/Math.abs(centerXNo - i%col);
}
nestedmc.addEventListener(MouseEvent.ROLL_OVER, rollover);
nestedmc.addEventListener(MouseEvent.ROLL_OUT, rollout);
nestedmc.addEventListener(MouseEvent.CLICK, click);
}
}
private function rollover(event:MouseEvent):void {
var mc=event.target as MovieClip;
mc.filters=[glow2];
}
private function rollout(event:MouseEvent):void {
var mc=event.target as MovieClip;
mc.filters=[glow1];
}
private function click(event:MouseEvent):void {
//サムネイルのクリックで中央に移動・拡大
var mc=event.target.parent as MovieClip;
var mcx=mc.x;
var mcy=mc.y;
var tw1=new Tween(mc,"x",Regular.easeOut,mcx,-3/2*th_w,1,true);
var tw2=new Tween(mc,"y",Regular.easeOut,mcy,-3/2*th_h,1,true);
var twr=new Tween(mc.parent,"rotationY",Regular.easeOut,mc.parent.rotY,0,1,true);
var tw3=new Tween(mc,"scaleX",Regular.easeOut,1,3,1,true);
var tw4=new Tween(mc,"scaleY",Regular.easeOut,1,3,1,true);
setChildIndex(mc.parent,picNum-1);
//サムネイルが中央に達したら写真を同位置、同サイズで表示、次いで拡大表示
tw4.addEventListener(TweenEvent.MOTION_FINISH,photoDisplay);
var photo_mc = new MovieClip();
addChild(photo_mc);
photo_mc.x=cx-3/2*th_w;
photo_mc.y=cy-3/2*th_h;
function photoDisplay(event:TweenEvent):void {
var url2:String="img/pl"+mc.num+".jpg";
loadPic2(photo_mc, url2);
}
photo_mc.buttonMode=true;
//写真クリックでフェイドアウト、削除、サムネイルを元の位置に
photo_mc.addEventListener(MouseEvent.CLICK, closePhoto);
function closePhoto(event:MouseEvent):void {
photo_mc.removeEventListener(MouseEvent.CLICK, closePhoto);
mc.x=mcx;
mc.y=mcy;
mc.scaleX=mc.scaleY=1;
mc.parent.rotationY=mc.parent.rotY;
var tw=new Tween(photo_mc,"alpha",None.easeOut,1,0,0.7,true);
tw.addEventListener(TweenEvent.MOTION_FINISH,removePhoto);
function removePhoto(event:TweenEvent) {
removeChild(photo_mc);
photo_mc=null;
}
}
}
//サムネイル写真の読み込み、表示
private function loadPic(load_mc, url):void {
var mcLoader=new Loader();
load_mc.addChild(mcLoader);
//load_mc.scaleX=load_mc.scaleY=60/90;
var urlReq:URLRequest=new URLRequest(url);
mcLoader.load(urlReq);
}
//拡大写真の読み込み、表示、拡大
private function loadPic2(load_mc, url):void {
var mcLoader=new Loader();
load_mc.addChild(mcLoader);
var urlReq:URLRequest=new URLRequest(url);
mcLoader.load(urlReq);
mcLoader.contentLoaderInfo.addEventListener( Event.COMPLETE , loadedPic);
function loadedPic(event:Event) {
largepic_w=load_mc.width;
largepic_h=load_mc.height;
load_mc.width=3*th_w;
load_mc.height=3*th_h;
load_mc.addEventListener(Event.ENTER_FRAME, tween);
function tween(event:Event) {
load_mc.width += (largepic_w - load_mc.width)/6;
load_mc.height += (largepic_h - load_mc.height)/6;
load_mc.x += (cx-largepic_w/2 - load_mc.x)/6;
load_mc.y += (cy-largepic_h/2 - load_mc.y)/6;
if (load_mc.y - (cy-largepic_h/2)<1) {
load_mc.width=largepic_w;
load_mc.height=largepic_h;
load_mc.x=cx-largepic_w/2;
load_mc.y=cy-largepic_h/2;
load_mc.removeEventListener(Event.ENTER_FRAME, tween);
}
}
}
}
}
}
|
