スマホサイト・アプリをつくろう。

今回は写真を順に表示するサンプルについて説明します。
遠近感を持たせたスクロールと画像閲覧機能をつけています。
※今回のサンプルはFlashLite1.1対応です。
　
スクロールの方法は以前紹介させていただいた以下のサンプルを参考にして下さい。
参照：ケータイFlashで縦スクロールするページを作ってみよう（３ボタン制御編）
　
遠近感を持たせたギャラリー表示については下記書籍を参考にさせて頂いています。
携帯Flashサイト&ゲーム制作入門
スクリプト構成を整理し、写真を大きい画像で表示できるようにしました。
　
　

遠近感を持たせて表示するしくみ

今回のサンプルではY座標の他に、X座標・拡大率・アルファを変更するようにしています。
　
１．ボタンを上下に押すとロールオーバーしているボタンが変更され、どちら向けにボタンを押したかを取得します。
　
２．現在の選択画像の番号を元に、それぞれの画像の座標・拡大率・アルファの最終値を指定します。
ループさせることでそれぞれの画像が除々に目的値に向けて動くようになります。
　
３．決定をクリックすると選択されている画像を元サイズで表示させ、選択されていない画像はアルファを0にしていきます。
ループさせることでそれぞれの画像が除々に目的の状態に向けて変化していきます。
　
４．画像を大きく表示している状態で再度決定ボタンまたは上下ボタンを押すと、再び遠近感のある状態に向けて動き出します。
　
　

swfファイルを用意する

swfファイルの作り方を説明していきます。
　
まず240×240pxでFlashLiteのバージョンを1.1にします。
　
次にレイヤーを５つ追加します。
上から順に、label,action,button,photo,text,backとします。
　
次にフレームを６フレーム目まで広げます。
　
labelレイヤーは2フレーム目、3フレーム目、5フレーム目にキーフレームを追加します。
フレームラベルをそれぞれ以下のように設定します。
2フレーム目：motion
3フレーム目：move
5フレーム目：zoom
　
actionレイヤーは全てキーフレームにします。
→[図85]
　
次にシェイプでボタンを作成し、３つにコピーして上から順に配置します。
ボタンはbuttonレイヤーに配置します。
→[図86]
　
次に200×150pxのjpeg画像を８枚ライブラリに読み込みます。
画像はそれぞれムービークリップimg1～img8にします。
　
ムービークリップimg1～img8をステージに配置してそれぞれインスタンス名img1～img8を設定します。
→[図87]
　
backレイヤーには240×240pxのグラデーションさせたシェイプをグラフィックシンボルとして配置します。
　
textレイヤーには静止テキスト（_等幅で12pt）を配置します。ここではコピーライトの文字列を設定しました。
→[図88]
　
それぞれのボタンにアクションを設定していきます。
１番目のボタン
→[図89]

on (rollOver) {
    if (btnNo == 2) {
        btnDir = "up";
    } else {
        btnDir = "down";
    }
    call("motion");
    // ズーム状態は解除
    zoom = false;
    // サムネイルを表示
    gotoAndPlay("move");
    btnNo = 1;
}
on (press) {
    // ズーム状態でない場合は
    if (zoom == false) {
        // ズーム
        zoom = true;
        gotoAndPlay("zoom");
    } else {
        // サムネイルに戻る
        zoom = false;
        gotoAndPlay("move");
    }
}

　
２番目のボタン

on (rollOver) {
    if (btnNo == 3) {
        btnDir = "up";
    } else {
        btnDir = "down";
    }
    zoom = false;
    call("motion");
    gotoAndPlay("move");
    btnNo = 2;
}
on (press) {
    if (zoom == false) {
        zoom = true;
        gotoAndPlay("zoom");
    } else {
        zoom = false;
        gotoAndPlay("move");
    }
    
}

　
３番目のボタン

on (rollOver) {
    if (btnNo == 0) {
        btnDir = "up";
    } else if (btnNo == 1) {
        btnDir = "up";
    } else {
        btnDir = "down";
    }
    zoom = false;
    call("motion");
    gotoAndPlay("move");
    btnNo = 3;
}
on (press) {
    if (zoom == false) {
        zoom = true;
        gotoAndPlay("zoom");
    } else {
        zoom = false;
        gotoAndPlay("move");
    }
}

　
次にフレームアクションを指定します。
１フレーム目
→[図90]

// フォーカス枠を表示しない
_focusrect = false;
// 最初は未選択なので初期ボタン番号は0
btnNo = 0;
// 選択番号は1とする
selectNo = 1;
// ズームの初期値はfalse
zoom = false;
// 拡大率
scale1 = 50;
scale2 = 35;
scale3 = 30;
scale4 = 25;
scale5 = 20;
scale6 = 25;
scale7 = 30;
scale8 = 35;
// X座標
x1 = 70;
x2 = 180;
x3 = 170;
x4 = 130;
x5 = 100;
x6 = 60;
x7 = 10;
x8 = -10;
// Y座標
y1 = 120;
y2 = 100;
y3 = 65;
y4 = 50;
y5 = 40;
y6 = 50;
y7 = 60;
y8 = 100;
// アルファ
alpha1 = 100;
alpha2 = 70;
alpha3 = 60;
alpha4 = 50;
alpha5 = 40;
alpha6 = 50;
alpha7 = 60;
alpha8 = 70;
// 初期配置
for (i=1; i<=8; i++) {
    // 各画像について実行
    tellTarget ("img" add (((1+i+6)%8)+1)) {
        // 拡大率の初期値を変更
        _xscale = eval("/:scale" add /:i);
        _yscale = eval("/:scale" add /:i);
        // 座標の初期値を変更
        _x = eval("/:x" add /:i);
        _y = eval("/:y" add /:i);
        // アルファの初期値を変更
        _alpha = eval("/:alpha" add /:i);
    }
}
stop();

　
２フレーム目

// ボタンの上下移動を元にスクロール番号を増減
if (btnDir eq "up") {
    selectNo--;
}
if (btnDir eq "down") {
    selectNo++;
}
// スクロール番号はループさせる
if (selectNo<1) {
    selectNo = 8;
} else if (selectNo>8) {
    selectNo = 1;
}

　
３フレーム目
→[図91]

for (i=1; i<=8; i++) {
    // 各画像について実行
    tellTarget ("img" add (((selectNo+i+6)%8)+1)) {
        // 拡大率の最終値を変更
        _xscale += (eval("/:scale" add /:i)-_xscale)/2;
        _yscale += (eval("/:scale" add /:i)-_yscale)/2;
        // 座標の最終値を変更
        _x += (eval("/:x" add /:i)-_x)/2;
        _y += (eval("/:y" add /:i)-_y)/2;
        // アルファを変更
        _alpha = eval("/:alpha" add /:i);
    }
}

　
４フレーム目

gotoAndPlay("move");

　
５フレーム目
→[図92]

// 選択中の画像に対して実行
tellTarget ("img" add selectNo) {
    // 元画像のサイズを指定
    _xscale += (100-_xscale)/2;
    _yscale += (100-_yscale)/2;
    // 位置を指定
    _x += (20-_x)/2;
    _y += (45-_y)/2;
    // アルファは100になるように指定
    _alpha += (100-_alpha)/2;
}
for (i=2; i<=8; i++) {
    // 未選択の画像に対して実行
    tellTarget ("img" add (((selectNo+i+6)%8)+1)) {
        // アルファを0に向かって変更
        _alpha += (0-_alpha)/2;
    }
}

　
６フレーム目

gotoAndPlay("zoom");

　
ここまで完了したら、パブリッシュしてサーバーにアップロードします。
→[図93]
　
　

まとめ

上下キーでサムネイル画像が回転していきます。
決定キーで一番手前の画像が拡大したり元に戻ったりするのが確認できます。
　
参考にしたFlashでは画像の回転をフレーム制御していたのですが、このサンプルではアクションで全ての画像を動かすようにしています。
また、元のサイズで表示する機能も追加しています。
　
埋め込む画像の縦横サイズは240×180pxくらいにしたかったのですが、ファイルサイズが制限の100KBを超えないように200×150pxにしています。
　
フレームレートや設定値を変更すれば動きを変えることが可能です。
　
本サンプルは一例として参考にしていただければと思います。
　
　

flaファイルサンプル

sample2680.zip※Flash8形式
→こちらよりダウンロードしていただけます。
　
　

参考書籍

携帯Flashサイト&ゲーム制作入門
→こちらの書籍を参考にさせて頂きました。
本稿で参考にさせて頂いたもの以外にもたくさんのデザインサンプルがありますのでオススメです。
　
　

実行例

実行例はこちらからご確認下さい。

→URLをメールで送る
http://ookura.tanikaze.com/Sample/post2680/