このFlash講座1234は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです
|
FLASH講座ーアクションスクリプトの実践的事始めー
活用編
(17) FLASHで3DFlip風アルバム 花のアルバム |
Vista エアロ（Aero） 一環の売りもの「３Dフリップ（flip）」風ですが、そんなものを作ってみました。
Matrixを使いこなして作ったわけでなく、かなり原始的な作り方のものですが、参考になればと思います。
ここでは、私が植物公園で撮影した写真を見るためのアルバム形式にしました。 しかし、ページビュアーとしても使えます。
なお、ここで示すSAMPLEは、plane（３D風のプレーン）をクリックして登場するアルバムページの1から4までは、写真をスクリプトで並べています。 しかし最後の5ページ目は、別途作成した広島植物公園に関するムービークリップを表示してます。
これらの写真は、同公園のホームページからいただき、クリックすると同公園サイトの関係ページを表示します。 |
|
|
| SAMPLE |
|
|
| ステージの準備 |
●700*500のステージ（24fps）を設定、背景色は#333366
●ステージ左下に平面パネル（plane)を順送りにするための進めボタン（インスタンス名 btn ）と plane 表示を初期状態に戻すためのボタン（インスタンス名：wChange）を配置する
●ライブラリーにサムネイル用の写真（100*75）を読み込み、シンボルに変換、名前を付け、同名でリンケージを設定
サムネイルの命名：P + (プレーン番号) + (そのシリーズの写真番号)
例えば、プレーン１シリーズの2番目の写真は「p12」、12番目の写真は「p112」
●表示する数のプレーン分だけプレーンを作り、plane1,plane2,,,と名前を付ける（同名でリンケージ）
<plane の作り方>
・「挿入」「新規シンボル」でplane1（同名でリンケージ）を作り、その編集画面で600*450の矩形を描き（左上が座標（0,0）、背景色：#CCCCCC、透過度：80）、タイトルとサムネイル写真（ビットマップ）を並べる。
・全体を選んで、分解を施し（タイトルテキストは分解2回）シェイプに変換する。
・全体を選び、「修正」「変形」「歪曲」で矩形の3隅をずらして、360*343.5のサイズで、３D風の矩形とした
（３D風の矩形は、vistaの3Dflip画面をキャプチャーして切り抜いたものを編集画面に読み込み型紙とした）
・編集画面タイムラインでframe1からframe10の間でモーショントゥイーンを作成、変形点を左上にして、frame10で横幅を460に、アルファを0にセットする。 FRAME1,10で
stop(); を記述する
●上記タイトル（見出し）部は別途シンボルに変換し、title1,title2,,と命名（リンケージも）
●title5は初期最前面のplane5がフォトアルバムのページではなく、広島植物公園の紹介ページなので、title5として、600*450のムービークリップページを作成し表示させている。 各写真の内部フレームに、getURLスクリプトを記述し、関連URLをクリックされた時に呼び出すようにしている。
●新規シンボルとして、600*450の矩形（背景色：#EEEEEE）を作成し、名前、リンケージ名を screen とする
●サムネイルがクリックされたとき表示する写真を同じフォルダに置いておく（同じフォルダでない場合は、パスを通す）
写真の名前は、pic + (プレーン番号) + (そのシリーズの写真番号) .jpg |
スクリプト（ｆｌａファイル）
_root、FRAME1に記述 |
|
var plane:Array = new Array();
var pic_num:Array = new Array(12, 5, 9, 9, 1);
var number = 5;
var interval = 300/number;
main();
function main() {
wChange._visible = false;
attachMovie("screen", "screen", 100);
screen._x = 50;
screen._y = 20;
screen._alpha = 0;
vx=vy=0;
for (i=1; i<=number; i++) {
plane[i] = attachMovie("plane"+i, "plane"+i, i);
plane[i].targetx = 50+interval*(i-1);
plane[i].targety = 30+20*(i-1);
plane[i].depth = i;
plane[i].num = i;
plane[i].m = pic_num[i-1];
plane[i].expansion = false;
plane[i]._xscale = 100-5*(number-i);
plane[i]._yscale = 100-5*(number-i);
plane[i].onRollOver = rollover;
plane[i].onRollOut = rollout;
plane[i].onRelease = releas;
plane[i].onEnterFrame = function() {
vx = 0.3*vx + (this.targetx-this._x)/3;
this._x += vx;
vy = 0.5*vy + (this.targety-this._y)/3;
this._y += vy;
this._xscale += (this.targets-this._xscale)/4;
this._yscale += (this.targets-this._yscale)/4;
};
}
}
|
アルバムページを配列で定義
各ページで表示する写真の枚数
プレーンの数
プレーンの表示間隔
ウインドウ切替ボタン非表示
サムネイル表示用screen
planeインスタンスを配列で作成
planeの深度、
番号の格納
写真枚数の取得
まだ拡大していない（未クリック）
奥に行くほどplaneサイズを小さく
FRAMEが進む毎に
btnクリックで発生する
targetの座標に移動し、
targetの大きさに
|
|
btn.onRelease = function() {
for (k=1; k<=number; k++) {
if (plane[k]._x>250) {
plane[k].targetx = 50;
plane[k].targety = 30;
plane[k].targets = 100-5*(number-1);
plane[k].swapDepths(1);
} else {
plane[k].targetx = plane[k]._x+interval;
plane[k].targety = plane[k]._y+20;
plane[k].targets = plane[k]._xscale+5;
plane[k].swapDepths(plane[k+1]);
}
plane[k].depth = plane[k].getDepth();
}
};
function rollover() {
this.targety -= 20;
}
function rollout() {
this.targety += 20;
} |
一番手前のplaneは最後尾に
大きさを小さく
深度を小さく（背面に）
そうでないものは、前へ
サイズを大きく
深度を大きく（前面に）
各planeの深度を格納
ロールオーバーでplaneを上に |
|
function releas() {
wchange = false;
if (!this.expansion) {
this.gotoAndPlay(1);
wChange._visible = true;
this.onEnterFrame = function() {
this._x += (50-this._x)/3;
this._y += (20-this._y)/3;
this._xscale += (130-this._xscale)/3;
this._yscale += (130-this._yscale)/3;
this.swapDepths(5);
this.expansion = true;
var pD:photoDisplay = new photoDisplay(this.num, this.m);
};
}
}
wChange.onRelease = function() {
wchange = true;
screen.removeMovieClip();
load_mc.removeMovieClip();
main();
}; |
planeがリリースされたら
もし、拡大前なら
planeの内部タイムラインのframe1へ
wChangeボタンを表示
深度を５（最前面）に
plane番号、写真枚数を引数に
asファイルを参照
ウインドウ切替ボタンのリリースで
screen表示、load_mcにロードされている写真をキャンセル
|
|
| スクリプト（photoDislay.asファイル） |
|
class photoDisplay extends MovieClip {
var k:Number;
var mc:MovieClip;
var loadPic:Function;
var rollover:Function;
var rollout:Function;
var screen:MovieClip;
public function photoDisplay(n:Number, m:Number) {
var title_mc:MovieClip = _root.screen.attachMovie("title"+n, "title"+n, 100);
title_mc._x = 50;
title_mc._y = 10;
for (var i:Number = 1; i<=m; i++) {
mc = _root.screen.attachMovie("p"+n+i, "pic"+n+i, 100+n+i);
mc.k = i;
mc._x = 50+(i+3)%4*130;
mc._y = 80+100*Math.floor((i-1)/4);
mc.onRollOver = rollover;
mc.onRollOut = rollout;
mc.onPress = function() {
loadPic(n, this.k);
};
_root.screen.onEnterFrame = function() {
this._alpha += (100-this._alpha)/15;
};
}
function rollover() {
this._alpha = 70;
}
function rollout() {
this._alpha = 100;
}
function loadPic(n, k) {
var load_mc:MovieClip = _root.createEmptyMovieClip("load_mc", 200);
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.loadClip("img/pic"+n+k+".jpg", load_mc);
load_mc._x = _root._xmouse-65/2;
load_mc._y = _root._ymouse;
load_mc._alpha = 0;
load_mc._xscale = load_mc._yscale=100/600*100;
_root.onEnterFrame = function() {
load_mc._x += (55-load_mc._x)/3;
load_mc._y += (25-load_mc._y)/3;
load_mc._xscale += (100-load_mc._xscale)/5;
load_mc._yscale += (100-load_mc._yscale)/5;
load_mc._alpha += (100-load_mc._alpha)/5;
if (load_mc._xscale>98) {
load_mc.onPress = function() {
load_mc.removeMovieClip();
};
delete this.onEnterFrame;
}
};
}
}
}
|
|
| スクリプトの説明 |
●class photoDisplay extends MovieClip { クラスの定義
●public function photoDisplay(n:Number, m:Number)
コンストラクタ関数（この場合はここに全部収納)の定義
●var title_mc:MovieClip = _root.screen.attachMovie("title"+n,
"title"+n, 100);
表示ページの表題をムービークリップscreenにattachし、インスタンスとしてステージに
●mc = _root.screen.attachMovie("p"+n+i, "pic"+n+i,
100+n+i);
n番目のページのサムネイルを順番にインスタンスとして表示
●loadPic(n, this.k);
サムネイルがクリックされたら、該当する写真をステージに表示するための関数loadPicに引数を受け渡す
●loadPic関数では、まず、サムネイルの大きさに縮小した写真をマウス位置に表示し、拡大しながら、スクリーン一杯に表示する
●写真表示がほぼ終わったら、onEnterFrame作業を削除し、もし、写真がクリックされたら、load_mcにロードされた写真を削除する（消える） |
|
|
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
このサイトで使用しましたflashソフトはflash mx 2004年版（Flash Japan）- flash8 及び FlashCS3-2007年版です。
flash講座（フラッシュ講座）は、Yoshioka氏（通称、ひげ親父）による制作です。 コツコツと作られたflash素材（flashアニメ、スクリプト）はユーザーの方により保存変更され動画flash（動画フラッシュ）や携帯flash（待受flash）として利用されて来ました。
氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。
macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。
（by Hiraoka） |
|
|
| HOME Flash講座総リスト アクションスクリプトの実践的事始め-活用編(18) |
