FLASHのお勉強 ーアクションスクリプトの実践的事始めー

(35) 拡大・スライド機能付きビューアー

  2006/11/11
 最近、googlemap をはじめ、地図閲覧ソフトがダイナミックになってきて、マウスの操作に従って拡大やスライドが自由自在に出来るようになってきた。 今回のお勉強は、その域にはだいぶ達していないが、写真のビューアーに、簡単な拡大とスライド機能を付与したもののお勉強である。 このビューアーを作ってみようと思ったきっかけは、遠くに見える山並みを拡大して見たい思ったからで、ここではそのような写真を題材にしている。 もっとこのビューアーに向いた写真、例えば、地図とか大都市の町並みの写真とかを使った方が良かったかも知れない。
 画像の写真は、将来の機能拡大を考えて、外部ファイルをMovieClipLoaderクラスを使って読み込むタイプのものとした。もちろん、写真をムービークリップにloadMovie関数を使って読み込んでも、あるいは、ステージにあらかじめ配置しておいても同様の結果が得られる。
 縮小をかけ続けると、写真がスクリーンよりも若干小さくなるなど、改良の余地はまだまだあるし、複数の写真を入れ替える機能を付けたいなどの思いはあるが、この時点でひとまず掲げることにしたい。
ステージの準備
 サイズ500×400、背景色黒、12fpsのステージを準備する。 ステージ上部中央に、ダイナミックテキストボックス(pict_title)を設置する(FontSize:19、色:白)。 その下(x-50,y=50)にw400、h250の灰色矩形を描き、シンボルに変換する(screen)。 矩形の周囲に適当に縁取りのフレームを描く。
 スクリーンの下に、四方に向いた三角形のインスタンスを4個配置し、それぞれ、a_left、a_right、a_up、a_downと命名する。 四つの三角形の真ん中に拡大用のボタン(z_in)及び縮小用のボタン(z_out)を配置する。
 表示用の写真(pict1.jpg、w1600、h1000)をswfファイルと同じフォルダーに置く。
スクリプト(Script)
シーン1_rootに


pict_title.text = "御嶽山から北アルプス方面を望む";
//screen's x&y
var x0 = 50;
var y0 = 50;
//screen width & height
var ws = screen._width;
var hs = screen._height;
//transporting & zooming speed
var rate = 5;
//import photo
var pict_mc = createEmptyMovieClip("pict", 1);
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.addListener(this);
mcLoader.loadClip("pict1.jpg", pict_mc);
function onLoadInit(pict_mc) {
  pict_mc._xscale = pict_mc._yscale=50;
  pict_mc._x = -150;
  pict_mc._y = -75;
  pict_mc.setMask(screen);
}
//imported photo size
var wp = 800;
var hp = 500;

z_in.onPress = function() {
  _root.onEnterFrame = function() {
     if (pict_mc._xscale<150) {
       pict_mc._xscale += rate;
       pict_mc._yscale += rate;
       pict_mc._x -= (x0+ws/2-pict_mc._x)*rate/pict_mc._xscale;
       pict_mc._y -= (y0+hs/2-pict_mc._y)*rate/pict_mc._yscale;
     }
   };
};
z_out.onPress = function() {
  _root.onEnterFrame = function() {
     if (pict_mc._xscale>25 && pict_mc._x<=x0) {
       pict_mc._xscale -= rate;
       pict_mc._yscale -= rate;
       pict_mc._x += (x0+ws/2-pict_mc._x)*rate/pict_mc._xscale;
       pict_mc._y += (y0+hs/2-pict_mc._y)*rate/pict_mc._yscale;
     }
   };
};
a_left.onPress = function() {
  _root.onEnterFrame = function() {
     if (pict_mc._x<=x0) {
       pict_mc._x += rate*2;
     }
  };
};
a_right.onPress = function() {
  _root.onEnterFrame = function() {
     if (pict_mc._x>=x0+ws-wp*pict_mc._xscale/50) {
       pict_mc._x -= rate*2;
     }
  };
};
a_up.onPress = function() {
  _root.onEnterFrame = function() {
     if (pict_mc._y<=y0) {
       pict_mc._y += rate*2;
     }
  };
};
a_down.onPress = function() {
  _root.onEnterFrame = function() {
     if (pict_mc._y>=y0+hs-hp*pict_mc._yscale/50) {
       pict_mc._y -= rate*2;
     }
  };
};
var mouselistner:Object = new Object();
mouselistner.onMouseUp = function() {
  _root.onEnterFrame = function() {
  };
};
Mouse.addListener(mouselistner);




ダイナミックテキストの中身

スクリーンの座標


スクリーンのサイズ


速度係数

ムービークリップの作成
オブジェクトの定義
イベントリスナーのセット
pict1.jpgの読み込み
読み込んだ暁には
大きさを50%に
配置するx座標
      y座標
スクリーンをマスクに、写真をその対象に

読み込んだ後の写真のサイズ


拡大:

大きさ150%以上にならない範囲で、1FRAME毎にrate分大きく

大きくなってずれた分の補正




縮小:

大きさが25%以上で、しかもx座標がx0を超えない範囲で1FRAME毎にrate分小さく






レフトボタンが押されたら

x0を超えない範囲で
rateの2倍だけ右方向へ


ライトボタンが押されたら

写真右がスクリーン右の座標以下となる範囲内で、rateの2倍だけ左方向へ


アップボタンが押されたら

y0を超えない範囲で
rateの2倍だけ下へ



ダウンボタンが押されたら

写真の下がスクリーンの下よりあがらない範囲で、rateの2倍だけ上へ


マウスリスナーオブジェクト
マウスが離されたら(ボタンのプレスが中止されたら)
何もしない(拡大、縮小、移動などの動きを止めて待機)
マウスリスナーのセット
 
flashirohaサイト内  Web全体 
HOME   お勉強総リスト