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

FLASH講座 ーケータイ(携帯) de FLASHー
携帯編
(7) FlashLite2.0 で画像ビューアー(Viewer)

 今回は、Flash Lite 2.0 対応、画像ビューアーです。 ギャラリーと読んでもいいかもしれないが、今回のビューアーはナビゲーション用のボタンなどにも応用がききそうです。 

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

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

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

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

  flashde.syanari.comのQR-Code
ステージの準備(FLASH8でFlashLite2.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-1studiohttp://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座標(1行4枚)
y座標(4枚ごとに1行ずらす)

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


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

関数p_numberへ(引数:座標)

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












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












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












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

x、y座標を真ん中に

大きさを4.5倍に近づける

大きさが4.45倍になったら

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


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


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

セルの配置を元通りに

大きさを元通りに

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


リスナーの追加

関数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)