この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです">
このflash講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです
FLASH講座　ーアクションスクリプトの実践的事始めー
活用編
(6)スライド式ナビゲーション＆ギャラリー
　本日のflash講座は、ロールオーバーするとメニューバーが流れ、マウスを置いたメニューが左からバー一杯に流れ込み、クリックすると今度は、表示目的の写真が画面上から流れ込むタイプのフォトギャラリーを作成しました。
　まずは以下にサンプルを示します。
なお、ここで使用した写真は、以下のサイトからDLしました。いずれも素晴らしい写真満載のサイトです。
　　海：　　http://www.e-beach.info/wallmain.htm
　　川：　　http://www.yunphoto.net
　　山：　　http://snowman.whitering.net/kabegami/yama.htm
　　古都： http://www.photokyoto.com/kyoto/site-kiyomizudera/site_kiyomizudera.htm
　　都会： http://www.ne.jp/asahi/to/apple/tokyo1/tokyo2.htm
ステージの設定・及び準備
（１）w506、h465、黒のステージ、フレームレート30fpsを設定
（２）ステージに写真表示用スクリーンを配置（w500,h400,x3,y3、色グレー、インスタンス名：screen）
（３）w500､h400の写真5枚をステージに読み込みシンボルに変換、シンボル名、リンケージ名をpicL1...picL5とし、
　　　ステージから削除する
（４）上記写真の縦方向の一部を切り取り（w500,h50）、さらに、横方向をw100に縮小させる
　　　各縮小写真に、海、川などの文字を書き、シンボルに変換、シンボル名、リンケージ名をpic1...pic5とする
（５）メニュー写真のバック用に黒の矩形描画（w500,h62）をシンボル名、リンケージ名backで作成
スクリプト（_rootに）
var pic:Array = new Array();
var ro_x:Array = new Array();
var rl_y:Array = new Array();
pic_num = 5;
bar_w = 100;　bar_h = 50;
x0 = 3;　y0 = 406;
count = 1;

//Background of menu bar
_root.attachMovie("back", "back", 0);
_root.back._x = x0;
_root.back._y = 403;

//menu bar
for (i=1; i<=pic_num; i++) {
　_root.attachMovie("pic"+i, "pic"+i, i);
　pic[i] = eval("pic"+i);
　pic[i]._x = x0+bar_w*(i-1);
　pic[i]._y = y0;
　pic[i].num = i;
　pic[i].onRollOver = rover_mc;
　pic[i].onRollOut = rout_mc;
　pic[i].onRelease = rls_mc;
}
function rover_mc() {
n = this.num;
for (i=1; i<=pic_num; i++) {
　if (count<=pic_num) {
　　pic[i]._xscale = 500;
　　if (i>=n) {
　　　pic[i]._x = x0+500*(i-n)-2000;
　　}
　　if (i<n) {
　　　pic[i]._x = x0+500*(i-n+1);
　　}
　　ro_x[i] = pic[i]._x;
　　count++;
　}
}
　_root.onEnterFrame = function() {
　　for (k=1; k<=pic_num; k++) {
　　　pic[k]._x += (ro_x[k]+2000-pic[k]._x)/5;
　　}
　};
}
function rout_mc() {
　_root.onEnterFrame = function() {
　　mx = _root._xmouse;
　　my = _root._ymouse;
　　if (mx<x0 || mx>x0+pic_num*bar_w || my>y0+50 || my<y0) {
　　　count = 1;
　　　for (i=1; i<=pic_num; i++) {
　　　　pic[i]._xscale += (100-pic[i]._xscale)/5;
　　　　pic[i]._x += (x0+100*(i-1)-pic[i]._x)/2;
　　　}
　　}
　};
}
function rls_mc() {
　n = this.num;
　for (i=1; i<=pic_num; i++) {
　　_root.screen.picL[i]._yscale = 100;
　　_root.screen.picL[i]._alpha = 100;
　　if (i>=n) {
　　　_root.screen.picL[i]._y = 400*(i-n)-1600;
　　}
　　if (i<n) {
　　　_root.screen.picL[i]._y = 400*(i-n+1);
　　}
　　rl_y[i] = _root.screen.picL[i]._y;
　}
　_root.screen.onEnterFrame = function() {
　　for (k=1; k<=pic_num; k++) {
　　　_root.screen.picL[k]._y += (rl_y[k]+1600-_root.screen.picL[k]._y)/5;
　　}
　};
}		 配列の定義



メニュー（ナビ）バーのサイズ
メニューバーの配置(左上)座標
ロールオーバ時アクションを1回でとめるためのカウント


メニューバー背景の配置




メニューバーを配置




イベント時のバーのナンバーを取得
ロールオーバー時のアクション呼び出し
ロールアウト時
リリース時

ロールオーバー時
ロールオーバーされたメニューの番号n取得
縮小写真1-5に対して
もしcountが5以下なら
横幅を500に
写真番号がｎ以上だったら
クリックされたバーのｘ座標を-2000とし、以下、
　順番に右方向に並べる
ｎより小さかったら


縮小写真それぞれのｘ座標取得
countに1を加える


_rootのフレームアクション

先に取得したx座標に2000加えた座標に移動
（クリックしたバーが5倍になってスライドしながら登場し止まる(イージング)）

ロールアウト時



もし、マウスがメニューバー範囲を外れたら
countを1に戻す

それぞれのメニュー写真を初期値に縮小
初期x座標に戻す




リリース時
リリースされた番号を取得

ここからは、メニューバーのスクリプトを縦方向に変えただけ

　すなわち、screenに配置された各写真をノーマルなサイズに戻し（最初は5分の1になっている)、クリックされた番号の写真をｙがｰ1600の位置に、それ以外の写真を順番に800,400,0に配置し、そのまま、クリックされた写真が0位置になる（画面に表示される）ようにスライドさせている


screenに配置された写真のフレームアクション


クリック時に配置された位置から、1600を加えたy座標に移動し止まる
スクリプト（screenに）
//Large Picture MC
onClipEvent(load){
　var picL:Array = new Array();
　pic_num=5;

　for (i=1; i<=pic_num; i++) {
　　this.attachMovie("picL"+i, "picL"+i, -i);
　　picL[i] = eval("picL"+i);
　　picL[i]._yscale = 20;
　　picL[i]._alpha = 30;
　　picL[i]._x = 0;
　　picL[i]._y = 400/pic_num*(i-1);
　}
}
 写真はムービークリップscreenに配置する
（メニュ-バーのフレームアクションと本写真のフレームアクションを同時に_rootにおくと干渉するため)



最初は、写真の高さを5分の1に縮めて5枚が全部並ぶように配置し、アルファー値を30に落としておく
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しました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講座総リスト　　　アクションスクリプトの実践的事始め-活用編(7)