●680*580のステージ（12fps）を設定（背景色、ステージサイズは目的に応じて任意でよい）
●プロパティタブでクラス名（ここでは、photoviewer31）を記入
●ステージ右下に、r_btn（サムネイル表示に戻る）、f_btn（送りボタン）、b_btn(戻りボタン）を作成･配置し、3つのボタンを一括してムービークリップ buttonsBar の入れ子にしておく。
●swfと同じディレクトリにphotosフォルダを置き、その中に拡大写真（560*420、p1.jpg,p2.jpg,,,）、サムネイル写真（100*75、ps1.jpg,,,,）
をそれぞれ５５枚を格納しておく
|
package {
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Shape;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.geom.Matrix;
import flash.filters.GlowFilter;
import flash.events.Event;
import flash.events.MouseEvent;
public class photoviewer31 extends Sprite {
//グローフィルターの設定(写真の枠取り)
private var glow1:GlowFilter=new GlowFilter(0xeeffff,1,3,3,8,3,true);
private var glow2:GlowFilter=new GlowFilter(0xff0000,1,3,3,8,3,true);
private var glow3:GlowFilter=new GlowFilter(0xffffff,0.8,16,16,8,1,true);
//各種変数の定義
private static const numx:int = 11;//縦の列数
private static const numy:int = 5;//横の列数
private static const ps_w:Number = 200;//サムネイルの横幅
private static const ps_h:Number = 150;//高さ
private static const p_w:Number = 560;//拡大写真の横幅
private static const p_h:Number = 420;//高さ
private static const rotX:Number = 40;//rotationX(角度)
private var groupxR:Number;//サムネイル群の横径
private var blackScreen:Shape;//ステージを覆う半透明黒スクリーン
private var cylinder_mc:MovieClip;//サムネイル群格納ＭＣ
private var l_mc:MovieClip;//拡大写真表示用ＭＣ
private var count:Number = 0;//サムネイルの通し番号
private var kcount:Number;//サムネイルの通し番号（深度調節用）
private var photoNo:Number;//写真番号
private var ke = [];//深度管理用関数最終的に返される配列
public function photoviewer31() {
//全サムネイル収納用ＭＣ
cylinder_mc = new MovieClip();
addChild(cylinder_mc);
cylinder_mc.x=stage.stageWidth/2;
cylinder_mc.y=stage.stageHeight/2;
//サムネイル群インスタンスの作成
for (var i:uint=1; i<=numx; i++) {
for (var j:uint=1; j<=numy; j++) {
var mc = new MovieClip();
cylinder_mc.addChild(mc);
var in_mc = new MovieClip();
mc.addChild(in_mc);
in_mc.x=- ps_w/4;
in_mc.y=- ps_h/4;
loadPic(in_mc,"ps",count+1);
mc.filters=[glow1];
mc.name="mc"+i+j;
mc.nox=i;
mc.noy=j;
mc.buttonMode=true;
count++;
mc.pos=count;
mc.addEventListener(MouseEvent.ROLL_OVER, rOver);
mc.addEventListener(MouseEvent.ROLL_OUT, rOut);
mc.addEventListener(MouseEvent.CLICK, loadlargePic);
}
}
//サムネイルの配置
setSlide();
//ボタン類の設定
buttonsBar.r_btn.buttonMode=true;
buttonsBar.f_btn.buttonMode=true;
buttonsBar.b_btn.buttonMode=true;
buttonsBar.visible=false;
buttonsBar.r_btn.addEventListener(MouseEvent.CLICK, removePic);
buttonsBar.f_btn.addEventListener(MouseEvent.CLICK, forwardPic);
buttonsBar.b_btn.addEventListener(MouseEvent.CLICK, backwardPic);
//FRAME毎のモーション;
addEventListener(Event.ENTER_FRAME, flowSlide);
}
//サムネイルのロールオーバー・アウト(枠の色を変える)
private function rOver(event:MouseEvent):void {
event.target.filters=[glow2];
}
private function rOut(event:MouseEvent):void {
event.target.filters=[glow1];
}
//サムネイルの配置
private function setSlide():void {
for (var i:uint=1; i<=numx; i++) {
for (var j:uint=1; j<=numy; j++) {
var mc=MovieClip(cylinder_mc.getChildByName("mc"+i+j));
mc.rdx = (i-1)/numx*2*Math.PI + Math.PI*3/2;
mc.rdy = (Math.ceil(numy/2)-j)/(numy+3)*Math.PI+Math.PI*3/2;
mc.yPosition=- groupxR*Math.sin(mc.rdx);
}
}
}
//サムネイルの移動に伴う変形・深度調整
private function arrangeSlide(mc):void {
var a=- Math.sin(mc.rdx);
var b=0;
var c=0;
var d=1;
groupxR = 200-40*Math.cos((Math.ceil(numy/2)-mc.noy)*Math.PI/8);
var mcx=groupxR*Math.cos(mc.rdx);
var mcy=ps_h/2*(Math.ceil(numy/2)-mc.noy);
var myMatrix:Matrix=new Matrix(a,b,c,d,mcx,mcy);
mc.transform.matrix=myMatrix;
mc.rotationX=- rotX*Math.cos(mc.rdy);
kcount=0;
depthControll();
cylinder_mc.setChildIndex(mc,ke[mc.pos-1]);
}
//サムネイルのFRAME毎の移動と位置による変形の調整
private function flowSlide(event:Event):void {
for (var j:uint=1; j<=numx; j++) {
for (var k:uint=1; k<=numy; k++) {
var f_mc:MovieClip=MovieClip(cylinder_mc.getChildByName("mc"+j+k));
f_mc.rdx += 0.0003*(stage.stageWidth/2 - mouseX);
f_mc.yPosition=- Math.sin(f_mc.rdx);
arrangeSlide(f_mc);
if (Math.sin(f_mc.rdx)>0) {
f_mc.rotationX*=-1;
} else {
f_mc.rotationX*=1;
}
}
}
}
//拡大写真のロード・表示
private function loadlargePic(event:MouseEvent):void {
var c_mc=event.currentTarget as MovieClip;
photoNo=c_mc.pos;
l_mc = new MovieClip();
addChild(l_mc);
l_mc.buttonMode=true;
l_mc.filters=[glow3];
l_mc.x=stage.stageWidth/2-p_w/2;
l_mc.y=stage.stageHeight/2-p_h/2;
loadPic(l_mc,"p",photoNo);
blackScreenDraw();
buttonsBar.visible=true;
l_mc.addEventListener(MouseEvent.CLICK, removePic);
}
//拡大写真の除去
private function removePic(event:MouseEvent):void {
blackScreen.graphics.clear();
removeChild(l_mc);
l_mc=null;
buttonsBar.visible=false;
}
//写真の読み込み関数
private function loadPic(load_mc:MovieClip,Size:String,n:Number):void {
var mcLoader:Loader=new Loader ;
load_mc.addChild(mcLoader);
var url:String="photos/"+Size+n+".jpg";
var urlReq:URLRequest=new URLRequest(url);
mcLoader.load(urlReq);
}
//ネクスト、バックボタンの動作(表示写真の切り替え)
private function forwardPic(event:MouseEvent):void {
if (photoNo++>numx*numy-1) {
photoNo=1;
}
loadPic(l_mc,"p",photoNo);
}
private function backwardPic(event:MouseEvent):void {
if (photoNo--<2) {
photoNo=numx*numy;
}
loadPic(l_mc,"p",photoNo);
}
//深度管理用関数
private function depthControll():void {
var ka=[];
var kb=[];
var kc=[];
var kd=[];
for (var i:uint=0; i<numx; i++) {
for (var g:uint=0; g<numy; g++) {
var f=i+1;
var h=g+1;
var o_mc=MovieClip(cylinder_mc.getChildByName("mc"+f+h));
var currentyPosition=o_mc.yPosition;
ka[kcount]=[currentyPosition,kcount];
kcount++;
}
}
kb=ka.sortOn([0],[Array.NUMERIC]);
for (var j:uint=0; j<numx*numy; j++) {
kc[j]=[kb[j][1],j];
}
kd=kc.sortOn([0],[Array.NUMERIC]);
for (var k:uint=0; k<numx*numy; k++) {
ke[k]=kd[k][1];
}
}
//ステージを覆う矩形の描画（半透明ブラックスクリーン）
private function blackScreenDraw():void {
blackScreen = new Shape();
var gr=blackScreen.graphics;
gr.beginFill(0x000000,0.6);
gr.drawRect(0,0,stage.stageWidth,stage.stageHeight);
gr.endFill();
addChild(blackScreen);
setChildIndex(blackScreen,2);
}
}
} |
