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

FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(10) 拡大・スライド機能付きビューアー

 最近、googlemap をはじめ、地図閲覧ソフトがダイナミックになり、マウスの操作に従って拡大やスライドが自由自在に出来るようになってきました。 

 今回のflash講座は、その域には随分達していませんが、写真のビューアーに、簡単な拡大とスライド機能を付与したものです。 このビューアーを作ってみようと思ったきっかけは、遠くに見える山並みを拡大して見たいと思ったからで、ここではそのような写真を題材にしています。 もっとこのビューアーに向いた写真、例えば、地図とか大都市の町並みの写真とかを使った方が良かったかも知れません。
 
 画像の写真は、将来の機能拡大を考えて、外部ファイルを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倍だけ上へ


マウスリスナーオブジェクト
マウスが離されたら(ボタンのプレスが中止されたら)
何もしない(拡大、縮小、移動などの動きを止めて待機)
マウスリスナーのセット
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しました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講座総リスト    アクションスクリプトの実践的事始め-活用編(11)