この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです

FLASH講座　ーケータイ（携帯） de FLASHー
携帯編
(7) FlashLite2.0 で画像ビューアー（Viewer）
　今回は、Flash Lite 2.0 対応、画像ビューアーです。　ギャラリーと読んでもいいかもしれないが、今回のビューアーはナビゲーション用のボタンなどにも応用がききそうです。　

　画面一杯に表示されたサムネイル（ここでは20枚）を上下左右の（十字）方向キーで移動するガイドで選択し、決定ボタン（エンターキー）を押すと選択された画像が画面一杯に拡大されるもので、標準で付いているビューアーと機能はほぼ同じです。

　ただし、このビューアーには、ガイドが移動するときとか、拡大するときとかに好みのエフェクトを付けられたり、決定ボタンを押したときに起こすイベントを工夫できる（例えば他のページに飛ぶとか）などの利点があります。
SAMPLE
　このサンプルは、FlashLite2.0でパブリッシュしたもので、一度FLASH部をクリックすると、PCの４方向矢印キーとエンターキーで作動する。

　携帯用スクリプトは、softbank 811SH で無事動くことが確認できている。

携帯用SAMPLE（swfファイル）は、flash講座 de syanari に。

　　flashde.syanari.comのQR-Code
ステージの準備（ＦＬＡＳＨ８でＦｌａｓｈＬｉｔｅ2.0ファイルを作成する場合)
パブリッシュ設定（あらかじめMacromediaのサイトから"fl8_flashlite2_update_jp.exe"をDLしてインストールしておく）
●ステージのサイズを240,320に設定
●パブリッシュの設定ウインドウを開き、バージョンをFlashLite2.0に、アクションスクリプトのバージョンをActionScript2.0に
●Ctrl＋Enterでプレビューさせるとデバイス選択画面が出るので、スタンドアローンプレイヤー、一般携帯電話を選択
ステージの準備
●背景色は好みで、フレームレートは12fps
●表示する画像（225×225）を用意し（Sampleでは20枚）、シンボルに変換（サイズを50×50に縮小）、pic1,pic2,,,,,pic20と連番にして名付ける。同名で、リンケージを設定する。　このSAMPLEの場合は、実際の画像は4枚、テキスト文をシンボル化したものが1枚で、残りは単に数字を書いた矩形をシンボル化したものである（基準点は中心）。
なお、画像サンプルには、A-1studio（http://www.a-1studio.com/）さんの素材を使わせていただきました。
●選択用のガイド（これが移動する）ととして、枠線のみの矩形を描き、guideというシンボルを作成、同名でリンケージを設定する(Sampleの場合基準点は、左上）
FlashLite2.0対応スクリプト 
fscommand2("FullScreen", true);
var cell_mc:Array = new Array();
for (i=1; i<=20; i++) {
  cell_mc[i] = attachMovie("pic"+i, "pic"+i, -i);
  cell_mc[i]._x = 35+55*((i-1)%4);
  cell_mc[i]._y = 35+55*Math.floor((i-1)/4);
}
attachMovie("guide", "guide", 1);
guide._x = guide._y=10;
var n = 1;

var myListener:Object = new Object();
myListener.onKeyDown = function() {
  if (Key.getCode() == Key.RIGHT) {
    if (guide._x>150) {
      guide._x = 10;
      if (guide._y>225) {
        guide._y = 10;
      } else {
        guide._y += 55;
      }
    } else {
      guide._x += 55;
    }
    p_number(guide._x, guide._y);
  }
  if (Key.getCode() == Key.LEFT) {
    if (guide._x<50) {
      guide._x = 175;
      if (guide._y<50) {
        guide._y = 230;
      } else {
        guide._y -= 55;
      }
    } else {
      guide._x -= 55;
    }
    p_number(guide._x, guide._y);
  }
  if (Key.getCode() == Key.DOWN) {
　  if (guide._y>220) {
      guide._y = 10;
      if (guide._x>150) {
        guide._x = 10;
      } else {
        guide._x += 55;
      }
    } else {
      guide._y += 55;
    }
    p_number(guide._x, guide._y);
  }
  if (Key.getCode() == Key.UP) {
    if (guide._y<50) {
      guide._y = 230;
      if (guide._x<50) {
        guide._x = 175;
      } else {
        guide._x -= 55;
      }
    } else {
      guide._y -= 55;
    }
    p_number(guide._x, guide._y);
  }
  if (Key.getCode() == Key.ENTER) {
    for (i=1; i<=20; i++) {
      if (i == n) {
        cell_mc[i].onEnterFrame = function() {
          this._x += (120-this._x)/3;
          this._y += (150-this._y)/3;
          this._xscale += (450-this._xscale)/3;
          this._yscale += (450-this._yscale)/3;
          if (this._xscale>445) {
            this._xscale = this._yscale=450;
            delete this.onEnterFrame;
          }
        };
          guide._visible = false;
      } else {
        cell_mc[i]._xscale = cell_mc[i]._yscale=1;
      }
    }
  } else {
    for (i=1; i<=20; i++) {
      cell_mc[i]._x = 35+55*((i-1)%4);
      cell_mc[i]._y = 35+55*Math.floor((i-1)/4);
      cell_mc[i]._xscale = cell_mc[i]._yscale=100;
    }
    guide._visible = true;
  }
};
Key.addListener(myListener);

function p_number(x, y) {
  n = (x-10)/55+1+(y-10)/55*4;
}

配列の定義
枚数分だけ
ライブラリーのサムネイルを配列にして表示
x座標（１行4枚）
ｙ座標（4枚ごとに1行ずらす）

選択用矩形（枠線のみ）
座標
何番目のサムネイルかの指標


リスナーオブジェクト
キーが押されたら
そのキーが右へキーだったら
座標ｘが150を超えたら
　ｘを10に戻す
　もしｙが225を超えたら
　　ｙを10に戻す
　そうでなければ（ｙが225より小さい）
　　ｙに55を足す
そうでなければ（ｘが150より小）
ｘに55を足す

関数p_numberへ（引数：座標）

そのキーが左へキーだったら












そのキーが下へキーだったら












そのキーが上へキーだったら












そのキーが決定キーだったら
枚数分だけ順に
もし、i が n だったら（選択されていたら）

ｘ、ｙ座標を真ん中に

大きさを4.5倍に近づける

大きさが4.45倍になったら

フレームアクションの削除


ガイド（選択用矩形）を見えなくする
そうでなければ（選択外）
大きさを１に（見えなくする）


決定キー以外が押されたら

セルの配置を元通りに

大きさを元通りに

ガイドを見えるようにする


リスナーの追加

関数p_number
座標から何番目のサムネイルかを計算
なお、後半のスクリプトを以下のように変更すると、ENTER（決定)キーでも拡大画像を元に戻せるようになります。 

  if (Key.getCode() == Key.ENTER) {
    for (i=1; i<=20; i++) {
      if (cell_mc[i]._xscale == 100) {
        if (i == n) {
          cell_mc[i].onEnterFrame = function() {
            this._x += (120-this._x)/3;
            this._y += (150-this._y)/3;
            this._xscale += (450-this._xscale)/3;
            this._yscale += (450-this._yscale)/3;
            if (this._xscale>445) {
              this._xscale = this._yscale=450;
              delete this.onEnterFrame;
            }
          };
            guide._visible = false;
        } else {
            cell_mc[i]._xscale = cell_mc[i]._yscale=1;
        }
      } else {
        for (i=1; i<=20; i++) {
          cell_mc[i]._x = 35+55*((i-1)%4);
          cell_mc[i]._y = 35+55*Math.floor((i-1)/4);
          cell_mc[i]._xscale = cell_mc[i]._yscale=100;
        }
        guide._visible = true;
      }
    }
  } else {
     for (i=1; i<=20; i++) {
       cell_mc[i]._x = 35+55*((i-1)%4);
       cell_mc[i]._y = 35+55*Math.floor((i-1)/4);
       cell_mc[i]._xscale = cell_mc[i]._yscale=100;
     }
     guide._visible = true;
   }
};
Key.addListener(myListener);

function p_number(x, y) {
  n = (x-10)/55+1+(y-10)/55*4;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
　このサイトで使用しました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講座総リスト　　　　ケータイ de FLASH　携帯編(8)