このFlash講座1234は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです
FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(19) FLASHフォトビューアー2
カブト虫
 カブトムシ、クワガタムシの展覧会で写真を撮る機会に恵まれました。 
これをFLASHのビュアーで見せるために作成してみました。

 虫たちがうごめく状態を表現しようと思って作成しました。 「?」 理解に苦しむ方も多いでしょう。 ざ、残念! その目的にかなったかどうかは別として、アクセントのあるビューアーができたように思います。(笑)

※画像にマウスを近づけると、カブト虫が急にザワザワしませんか? これは僕の手が忍び寄って来た事を感じたカブト虫が、いそいそと逃げ惑う様子を表現したのです。 「!」 分かりましたって? へへへへ。

し〜ん。
SAMPLE
ステージの準備
●500*520、背景色黒のステージ(12fps)を設定
●ステージ右下にダイナミックテキストボックスを配置、インスタンス名をmsgBoxとする
  FONTは好みのもの(sampleはLucida Sans Typewriter)、サイズ20pt
●480*480の矩形を描きシンボルに変換 _hitArea と名付け、同名でリンケージを設定、ステージから削除
●100*100のサムネイル用写真を25枚読み込み、シンボルに変換、名前、リンケージををks1,ks2,ks3,,,,ks25とする
●同じフォルダに、サムネイルに相当する表示用写真25枚を保管する(k1,k2,k3,,,,k25)
スクリプト_root、FRAME1に記述
var sc:Array = new Array();
var pic_n = 25;
var row_n = 5;
attachMovie("_hitArea", "_hitArea", 100);
_hitArea._x = 15;
_hitArea._y = 15;
_hitArea._alpha = 0;
main();
function main() {
        msgBox.text = "";
        for (i=1; i<=pic_n; i++) {
                sc[i] = attachMovie("ks"+i, "ks"+i, i);
                sc[i]._x = 50+100*((i-1)%row_n);
                sc[i]._y = 50+100*Math.floor((i-1)/row_n);
                sc[i]._xscale = sc[i]._yscale=100/145*100;
                sc[i]._alpha = 60;
                sc[i].num = i;
                sc[i].onRollOver = rollover;
                sc[i].onRollOut = rollout;
                sc[i].onRelease = function() {
                        for (j=1; j<=pic_n; j++) {
                                sc[j]._visible = false;
                        }
                        loadPhoto(this.num);
                        msgBox.text = "Click Me!";
                };
                sc[i].onEnterFrame = rolloverExpsn;
        }
}
function rolloverExpsn() {
        n = this.num;
        if (_hitArea.hitTest(_xmouse, _ymouse, true)) {
                this._xscale += (100-Math.sqrt(Math.pow((_xmouse-this._x), 2)
                        +Math.pow((_ymouse-this._y), 2))/10-this._xscale)/2;
                this._yscale += (100-Math.sqrt(Math.pow((_xmouse-this._x), 2)
                        +Math.pow((_ymouse-this._y), 2))/10-this._yscale)/2;
                this._y += (50+100*Math.floor((n-1)/row_n)
                        +Math.abs(_xmouse-this._x)/500*50-this._y);
        } else {
                this._xscale += (100/145*100-this._xscale)/3;
                this._yscale += (100/145*100-this._yscale)/3;
                this._x = 50+100*((n-1)%row_n);
                this._y = 50+100*Math.floor((n-1)/row_n);
        }
}
function rollover() {
        this._alpha = 100;
}
function rollout() {
        this._alpha = 60;
}
function loadPhoto(n) {
        jpg = "k"+n+".jpg";
        load_mc = _root.createEmptyMovieClip("load_mc", 120);
        var mcLoader:MovieClipLoader = new MovieClipLoader();
        mcLoader.loadClip(jpg, load_mc);
        load_mc._xscale = load_mc._yscale=20;
        onEnterFrame = function () {
                load_mc._x = _xmouse-50;
                load_mc._y = _ymouse-50;
                load_mc.onRelease = photoExpn;
        };
}
function photoExpn() {
        delete onEnterFrame;
        this.onEnterFrame = function() {
                this._x += (0-this._x)/3;
                this._y += (10-this._y)/3;
                this._xscale += (100-this._xscale)/3;
                this._yscale += (100-this._yscale)/3;
                this.onRelease = function() {
                        delete this.onEnterFrame;
                        this.removeMovieClip();
                        main();
                };
        };
}
スクリプトの説明
var pic_n = 25;  var row_n = 5;
  サムネイルの総数と並べる列数(一行あたりの枚数)
attachMovie("_hitArea", "_hitArea", 100);
  mouseがのると反応させるための矩形(_hitArea)を配置し、アルファ値を0にして見えないようにする
function main() { 
  初期設定(サムネイルを並べ、表示サイズを69%に、アルファ値を60%に)
  リリースですべてのサムネイルを消して関数loadPhotoを参照、メッセージボックスに"Click Me"を表示
function rolloverExpsn() {
  マウスがhitArea内にあるときに、マウスのある位置のサムネイルを大きく、離れるほど小さく表示させる
  同時に、マウスのある位置のサムネイルを若干上に持ち上げる
  if (_hitArea.hitTest(_xmouse, _ymouse, true)) {
  もしマウスがhitArea内にある時は
  this._xscale += (100-Math.sqrt(Math.pow((_xmouse-this._x), 2) +Math.pow((_ymouse-this._y), 2))/10-this._xscale)/2;
  マウスからの距離(ルート(x軸距離の二乗+y軸距離の二乗))で_xscaleを調節
  else {
  そうでなかったら(hitArea外だったら)、表示scale、表示位置を元に戻す
function loadPhoto(n) {
  リリースされたサムネイルに相当する500*500の写真をロードし、サムネイルの大きさと同じ大きさに縮小して表示
  表示位置をマウス座標-50に配置(サムネイルの中心にマウスがのる)、サムネイルはマウスの移動にフォローする
function photoExpn() {
  縮小表示されている写真がリリースされたとき、ステージ中央に拡大表示させる関数
  拡大写真がリリースされたら、表示写真を削除し初期状態に戻す(main();)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しました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講座総リスト    アクションスクリプトの実践的事始め-活用編(20)