●725*450のステージ(24fps)を設定(背景色、ステージサイズは好みや写真サイズに応じて決める)。
●写真を送るボタン(リンケージ識別子:f_btn)、戻るボタン(リンケージ:b_btn)、画面拡大ボタン(リンケージ:expand_btn)、縮小ボタン(リンケージ:shrink_btn)を作成し(シンボル化、各25*25px)、ライブラリーに格納する。
●swfと同じディレクトリにimgフォルダを置き、その中に拡大写真(p1.jpg,p2.jpg,,,)、サムネイル写真(140*80、ps1.jpg,,,,)
それぞれ25枚を収納しておく。拡大写真のサイズは任意だが、ここでは幅が1200px位のものを使っている。
●swfを埋め込むhtmlで、埋め込みスクリプトの項の param allowFullScreen を true にする。
|
//Tween、easingクラスのインポート
import mx.transitions.Tween;
import mx.transitions.easing.*;
//グローフィルターの設定(写真の枠取り)
import flash.filters.GlowFilter;
var glow:GlowFilter = new GlowFilter(0xffffff, 0.8, 16, 16, 8, 1, true);
//画面表示の基本設定
Stage.align = "LT";
Stage.scaleMode = "noScale";
//スライド枚数
var pNum = 25;
//サムネイルの幅、高さ
var tw = 140;
var th = 80;
//サムネイル整列列数
var col = 5;
//サムネイル群収納用ムービークリップの作成と表示
this.createEmptyMovieClip("thumbnailContainer",this.getNextHighestDepth());
//サムネイルの初期表示
loadThumb();
//拡大写真読み込み用ムービークリップ
this.createEmptyMovieClip("load_mc",50);
load_mc.createEmptyMovieClip("in_mc",50);
//拡大写真表示領域
var screen_w = 725;
var screen_h = 410;
//拡大・縮小ボタンの作成、非表示
this.attachMovie("shrink_btn","shrink_btn",this.getNextHighestDepth());
this.attachMovie("expand_btn","expand_btn",this.getNextHighestDepth());
expand_btn._x = Stage.width - 50;
expand_btn._y = Stage.height - 30;
btnVisibility(2);
//送り・戻りボタンの作成、非表示
this.createEmptyMovieClip("buttons_mc",60);
buttons_mc.attachMovie("f_btn","f_btn",61);
buttons_mc.attachMovie("b_btn","b_btn",62);
buttons_mc._visible = false;
//escキーでノーマル表示に切り替わったらサムネイルを表示
myListener = new Object();
myListener.onResize = function() {
if (Stage["displayState"] == "normal") {
load_mcRels();
}
};
Stage.addListener(myListener);
//サムネイル群のロード・表示とイベント
function loadThumb() {
for (i = 1; i < pNum + 1; i++) {
mc = thumbnailContainer.createEmptyMovieClip("thumb" + i, i);
mc.createEmptyMovieClip("inside_mc",i);
mc.inside_mc._x = -tw / 2;
mc.inside_mc._y = -th / 2;
mc.inside_mc.loadMovie("img/ps" + i + ".jpg");
mc._x = Stage.width / 2;
mc._y = Stage.height / 2;
mc.order = i;
mc.onRelease = function() {
mcEnable(1);
picNo = this.order;
loadPic(picNo);
};
setThumb(mc);
}
}
//サムネイル群の配置
function setThumb(mc) {
pOrder = mc.order;
mc._x = targetx = (tw + 3) * (0.5 + ((pOrder - 1) % col));
mc._y = targety = (th + 3) * (0.5 + Math.floor((pOrder - 1) / col));
lag = pOrder * 0.05;
mcTween = new Tween(mc, "_alpha", None.easeOut, 0, 0, lag, true);
mcTween.onMotionFinished = function() {
new Tween(mc, "_alpha", None.easeOut, 0, 100, lag / 2, true);
};
}
//拡大写真のロードと表示
function loadPic(picNo) {
thumbnailContainer._visible = false;
btnVisibility(0);
buttons_mc._visible = true;
buttons_mc._x = Stage.width - 130;
buttons_mc._y = Stage.height - 30;
buttons_mc.f_btn._x = 40;
var mcLoader:MovieClipLoader = new MovieClipLoader();
jpg = "img/p" + picNo + ".jpg";
mcLoader.loadClip(jpg,load_mc.in_mc);
var oListener:Object = new Object();
oListener.onLoadInit = function() {
var load_mc_w = load_mc._width;
var load_mc_h = load_mc._height;
load_mc._x = screen_w / 2;
load_mc._y = screen_h / 2;
load_mc.in_mc._x = -load_mc_w / 2;
load_mc.in_mc._y = -load_mc_h / 2;
//写真表示領域に収まるように倍率を決める
var wh_ratio = load_mc_w / load_mc_h;
if (wh_ratio >= screen_w / screen_h) {
var xscale = screen_w / load_mc_w * 100;
var yscale = screen_w / load_mc_w * 100;
} else {
var xscale = screen_h / load_mc_h * 100;
var yscale = screen_h / load_mc_h * 100;
}
//FadeIn・拡大しながら表示
var tw3 = new Tween(load_mc, "_alpha", Regular.easeOut, 0, 100, 1, true);
var tw4 = new Tween(load_mc, "_xscale", Regular.easeOut, 0, xscale, 1, true);
var tw5 = new Tween(load_mc, "_yscale", Regular.easeOut, 0, yscale, 1, true);
tw5.onMotionFinished = function() {
load_mc.enabled = true;
load_mc.onRelease = load_mcRels;
//expand_btnクリックで拡大表示
expand_btn.onRelease = function() {
expandStage(load_mc);
btnVisibility(1);
shrink_btn._x = Stage.width / 2 + xscale / 100 * load_mc_w / 2 - 50;
shrink_btn._y = Stage.height / 2 + yscale / 100 * load_mc_h / 2 + 10;
};
};
};
mcLoader.addListener(oListener);
}
//拡大写真を非表示・サムネイル群再表示
function load_mcRels() {
Stage["displayState"] = "normal";
var tw6 = new Tween(load_mc, "_alpha", Regular.easeOut, 100, 0, 1, true);
thumbnailContainer._visible = true;
var tw7 = new Tween(thumbnailContainer, "_alpha", Regular.easeOut, 0, 100, 1, true);
tw7.onMotionFinished = function() {
load_mc.in_mc.unloadMovie();
load_mc._xscale = load_mc._yscale = 100;
load_mc.filters = null;
mcEnable(0);
btnVisibility(2);
delete load_mc.onEnterFrame;
buttons_mc._visible = false;
};
}
//全画面表示への切り替え
function expandStage(load_mc) {
new Tween(load_mc, "_alpha", Regular.easeOut, 20, 100, 0.5, true);
Stage["displayState"] = "fullScreen";
load_mc._x = Stage.width / 2;
load_mc._y = Stage.height / 2;
load_mc.filters = [glow];
load_mc.enabled = false;
load_mc.onEnterFrame = expandPic;
shrink_btn.onRelease = load_mcRels;
}
//送り、戻りボタンの操作
buttons_mc.f_btn.onRelease = function() {
if (picNo++ > pNum - 1) {
picNo = 1;
}
if (Stage["displayState"] == "normal") {
load_mc._xscale = load_mc._yscale = 100;
loadPic(picNo);
} else {
loadImg(picNo);
}
};
buttons_mc.b_btn.onRelease = function() {
if (picNo-- < 2) {
picNo = pNum;
}
if (Stage["displayState"] == "normal") {
load_mc._xscale = load_mc._yscale = 100;
loadPic(picNo);
} else {
loadImg(picNo);
}
};
//全画面表示における切り替え写真のロード・表示
function loadImg(picNo) {
var mcLoader:MovieClipLoader = new MovieClipLoader();
jpg = "img/p" + picNo + ".jpg";
mcLoader.loadClip(jpg,load_mc.in_mc);
var oListener:Object = new Object();
oListener.onLoadInit = function() {
var tw8 = new Tween(load_mc, "_alpha", Regular.easeOut, 0, 100, 1, true);
};
mcLoader.addListener(oListener);
}
//マウスホイールの動きで拡大・縮小スピードを設定
var wheelScrl = new Object();
var speed = 0;
wheelScrl.onMouseWheel = function(d) {
speed += d;
};
Mouse.addListener(wheelScrl);
//マウスロールに応じて拡大・縮小
function expandPic() {
this._xscale -= speed;
this._yscale -= speed;
speed *= 0.8;
if (this._xscale > 100) {
this._xscale = this._yscale = 100;
}
if (this._xscale < 20) {
this._xscale = this._yscale = 20;
}
shrink_btn._x = Stage.width / 2 + this._width / 2 - 50;
shrink_btn._y = Stage.height / 2 + this._height / 2 + 10;
buttons_mc._x = Stage.width / 2 + this._width / 2 - 130;
buttons_mc._y = Stage.height / 2 + this._height / 2 + 10;
}
//拡大・縮小ボタンの表示・非表示切り替え
function btnVisibility(vNo) {
if (vNo == 0) {
expand_btn._visible = true;
shrink_btn._visible = false;
} else if (vNo == 1) {
expand_btn._visible = false;
shrink_btn._visible = true;
} else {
expand_btn._visible = shrink_btn._visible = false;
}
}
//サムネイルのボタン操作有効・無効の切り替え
function mcEnable(bNum) {
for (i = 1; i < pNum + 1; i++) {
if (bNum == 0) {
thumbnailContainer["thumb" + i].enabled = true;
} else {
thumbnailContainer["thumb" + i].enabled = false;
}
}
}
|