フォトビューアー16とまったく同じであるが、念のため以下に示す。
●720*470のステージ(12fps)を設定(背景色、ステージサイズは目的に応じて任意でよい)
●ステージに静止テキストで、タイトルや日付など任意の文字を配置する(任意)。ここでは、ステージ右部に <--Mouse Drag-->
●imgフォルダにサムネイル画像(100*50、sp1.jpg,sp2.jpg,,,,)と写真ファイル(ステージに収まる任意サイズの写真、Lp1.jpg,,,,,,,,)を格納する。 ここでの写真は、22年7月末穂高に出かけた時撮影した写真を使った(同行の長野さんの撮った写真も入っています)
//各クラスのインポート
import flash.geom.Matrix;
import flash.filters.BlurFilter;
import mx.transitions.Tween;
import mx.transitions.easing.*;
//各種変数の定義
var num:Number = 30;//パネル(サムネイル)の数
var speed0:Number = 0.0002;//マウスイベントが発生していない時の移動速度
var speed:Number = 0;//マウスに反応して移動する時の角速度
var diff:Number = 0;//フレームごとのspeedの増分
var rd:Number;//各パネルの表示角
var a:Number;//Matrix定義プロパティーの一つ(b,c,d,mcx,mcyも同様)、「ムービークリップの変形にMatrixを使ってみる」を参照
var depth:Number;//各パネルの深度
var v:Number;//Blur(ぼかし)定義プロパティー
var dir:Number = -1;//初期移動方向
var movey:Number = 0;//マウスドラッグの距離
var jpg:String;//拡大写真のurl
var settingTime:Number;//タイマーのセット時間
//サムネイル格納ムービークリップの作成
this.createEmptyMovieClip("thumbnailContainer",this.getNextHighestDepth());
//拡大写真読み込み用ムービークリップの作成
this.createEmptyMovieClip("load_mc",this.getNextHighestDepth());
//サムネイルの表示と円運動関数の呼び出し
for (i = 1; i <= num; i++) {
var mc = thumbnailContainer.createEmptyMovieClip("sp" + i, i);
thumb_mc = mc.createEmptyMovieClip("ps", i);
thumb_mc.loadMovie("img/sp" + i + ".jpg");
thumb_mc._x = -50;
thumb_mc._y = -25;
addFrame(mc,0xffffff);
mc.n = i;
mc.onRollOver = rollover;
mc.onRollOut = rollout;
mc.onRelease = releas;
mc.onEnterFrame = circulating;
}
//Mouseイベント
function rollover() {
addFrame(this,0xff0000);
this._y -= 7;
}
function rollout() {
addFrame(this,0xffffff);
}
function releas() {
loadPic(this.n);
}
//円運動関数
function circulating() {
if (getTimer() - settingTime > 1500) {
settingTime = null;
mousedown = false;
}
if (mousedown) {
diff += (speed - diff) / 200;
} else {
diff -= dir * speed0;
}
rd = diff + this.n / num * Math.PI * 2;
a = Math.sin(rd);
b = 0;
c = 0;
d = Math.sin(rd);
mcx = 350 + 150 * Math.cos(rd);
mcy = 250 - 150 * Math.cos(rd);
var myMatrix:Matrix = new Matrix(a, b, c, d, mcx, mcy);
this.transform.matrix = myMatrix;
if (Math.sin(rd) < 0) {
this._visible = false;
} else
{
this._visible = true;
if (Math.cos(rd) < 0) {
this._alpha = 100+300 * Math.cos(rd);
this._xscale=this._yscale=100*(1-2*Math.cos(rd));
depth = this.n + 200;
} else
{
this._alpha = 100;
depth = Math.floor((1 + Math.sin(rd)) * 100);
}
}
this.swapDepths(depth);
}
//マウスドラッグ操作
var mouseListener = new Object();
mouseListener.onMouseDown = function()
{
mousedown = true;
preMousey = _ymouse;
speed = diff;
mouseListener.onMouseMove = function()
{
settingTime = null;
movey = -(_ymouse - preMousey);
if (movey >= 0)
{
speed -= Math.ceil(movey / 100) / 50;
dir = +1;
}
else
{
speed -= Math.floor(movey / 100) / 50;
dir = -1;
}
preMousey = _ymouse;
};
mouseListener.onMouseUp = function()
{
settingTime = getTimer();
speed += 0;
delete this.onMouseMove;
};
};
Mouse.addListener(mouseListener);
//拡大写真の表示
function loadPic(picNo)
{
thumbnailContainer._visible = false;
var mcLoader:MovieClipLoader = new MovieClipLoader();
jpg = "img/Lp" + picNo + ".jpg";
mcLoader.loadClip(jpg,load_mc);
var oListener:Object = new Object();
oListener.onLoadInit = function()
{
startx = Stage.width / 2;
starty = Stage.height / 2;
load_mc._xscale = load_mc._yscale = 70;
load_mc_w = load_mc._width / 2;
load_mc_h = load_mc._height / 2;
load_mcx = Stage.width / 2 - load_mc_w;
load_mcy = Stage.height / 2 - load_mc_h;
new Tween(load_mc, "_x", Regular.easeOut, startx, load_mcx, 0.5, true);
new Tween(load_mc, "_y", Regular.easeOut, starty, load_mcy, 0.5, true);
new Tween(load_mc, "_alpha", Regular.easeOut, 0, 100, 1, true);
new Tween(load_mc, "_xscale", Regular.easeOut, 0, 70, 0.5, true);
new Tween(load_mc, "_yscale", Regular.easeOut, 0, 70, 0.5, true);
load_mc.onRelease = load_mcRels;
};
mcLoader.addListener(oListener);
}
//拡大写真の消去とサムネイル群表示
function load_mcRels()
{
mcTween = new Tween(load_mc, "_alpha", Regular.easeOut, 100, 0, 1, true);
thumbnailContainer._visible = true;
new Tween(thumbnailContainer, "_alpha", Regular.easeOut, 0, 100, 1, true);
mcTween.onMotionFinished = function()
{
load_mc.unloadMovie();
};
}
//サムネイル枠線付与関数
function addFrame(mc, color)
{
mc.clear();
var tw = 100;
var th = 50;
mc.lineStyle("2",color);
mc.moveTo(-tw / 2,-th / 2);
mc.lineTo(-tw / 2,th / 2);
mc.lineTo(tw / 2,th / 2);
mc.lineTo(tw / 2,-th / 2);
mc.lineTo(-tw / 2,-th / 2);
}
以下の例はいずれもサムネイル表示のみ示していて、サムネイルのリリースで拡大写真を表示させるところは上の例と同じであるので省略している。 いずれも、マウスの上下ドラッグでサムネイルが移動するアクションは動作するようにしている。
SAMPLE2
SAMPLE3
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。
ステージなどの準備
ステージなどの準備
SAMPLE1と同じ
SAMPLE1と同じであるが、円形サムネイルをライブラリーに格納しリンケージを sp1,sp2,,,, で設定する
スクリプト (as2.0,FRAME1に記述 )
円運動、Mouse操作関数のみ記載(他はSAMPLE1と同じ)
スクリプト (as2.0,FRAME1に記述 )
SAMPLE2と異なる個所のみ記載
//円運動関数
function circulating()
{
if (getTimer() - settingTime > 1500)
{
settingTime = null;
mousedown = false;
}
if (mousedown)
{
diff += (speed - diff) / 200;
}
else
{
diff -= dir * speed0;
}
rd = diff + this.n / num * Math.PI * 2;
a = Math.sin(rd);
b = 0;
c = 0;
d = 1;
mcx = 150 + 5 * Math.sin(rd + mcy / 10);
mcy = 150 + 250 * Math.cos(rd);
var myMatrix:Matrix = new Matrix(a, b, c, d, mcx, mcy);
this.transform.matrix = myMatrix;
if (Math.sin(rd) < 0)
{
this._visible = false;
}
else
{
this._visible = true;
if (Math.cos(rd) < 0)
{
this._alpha = 100+300 * Math.cos(rd);
this._xscale=this._yscale=100*(1-Math.cos(rd));
depth = this.n + 200;
}
else
{
this._alpha = 100;
depth = Math.floor((1 + Math.sin(rd)) * 100);
}
}
this.swapDepths(depth);
}
//マウスドラッグ操作
var mouseListener = new Object();
mouseListener.onMouseDown = function()
{
mousedown = true;
preMousey = _ymouse;
speed = diff;
mouseListener.onMouseMove = function()
{
settingTime = null;
movey = -(_ymouse - preMousey);
if (movey >= 0)
{
speed += Math.ceil(movey / 100) / 100;
dir = -1;
}
else
{
speed += Math.floor(movey / 100) / 100;
dir = +1;
}
preMousey = _ymouse;
};
mouseListener.onMouseUp = function()
{
settingTime = getTimer();
speed += 0;
delete this.onMouseMove;
};
};
Mouse.addListener(mouseListener);
import flash.filters.GlowFilter;
//グローフィルターの設定
var glow1:GlowFilter = new GlowFilter(0xffffff, 0.8, 2, 2, 8, 3);
var glow2:GlowFilter = new GlowFilter(0xff0000, 0.4, 10, 10, 8, 3);
/*ここの部分を以下に変更
var mc = thumbnailContainer.createEmptyMovieClip("sp" + i, i);
thumb_mc = mc.createEmptyMovieClip("ps", i);
thumb_mc.loadMovie("img/sp" + i + ".jpg");
thumb_mc._x = -50;
thumb_mc._y = -25;
addFrame(mc,0xffffff);
*/
var mc = thumbnailContainer.createEmptyMovieClip("thumb" + i, i);
thumb_mc = mc.createEmptyMovieClip("ps", i);
thumb_mc.attachMovie("sp"+i,"sp"+i,i);
thumb_mc._x = -50;
thumb_mc._y = -25;
thumb_mc.filters = [glow1];
//mcx = 150 + 5 * Math.sin(rd + mcy / 10); を以下に変更
mcx = 150 + 15 * Math.sin(rd + mcy / 5);
//if (Math.cos(rd) < 0) { を以下に変更
if (Math.cos(rd + Math.PI/2) < 0) {
/*
円形サムネイルは、ここではFLASHの描画ツールを使って作成した
・ステージに矩形サムネイルを読み込み、シェイプに分解する(Ctrl B)
・サムネイルサイズの円形がくりぬかれた矩形シェイプ(矩形サムネイルを覆うサイズ)を描画し、サムネイル(シェイプ)の上に重ね合わせる
・両者を一時選択状態にした後、選択を解き、円形部だけを選択し、ドラッグして切り離す
・切り離した円形部をシンボル(ムービークリップ、基準点左上)に変換し、リンケージを設定する
・ステージから削除する
*/