このFlash講座1234は,flashソフトを用いてflashアニメなどの制作をスクリプトを通して無料で公開したものです。
FLASH講座ーアクションスクリプトの実践的事始めー
活用編
(16) フォト・ビューアー(Photo Viewer)
 平和コンサート
  
 サムネイルを並べておき、選択してクリックします。 するとその写真(画像)が拡大して表示されます。 という普通のビューアーです。 そして拡大表示された写真をクリックすると、元の選択画面に戻るようにしました。

 ここでは、9枚のサムネイルを並べましたが、枚数の違うビューアーにすることも可能です。 選択画面でのロールオーバー効果も、フレームの色が変わる単純なものにしました。
SAMPLE
ステージの準備
●600*500のステージ(背景色黒、12fps)を設定
●ステージ上部に、viewerのタイトルを静止テキストで記述する。
●600*460の黒色矩形を描きステージの下に寄せて配置、シンボル(ムービークリップ)に変換、インスタンス名:back
●ステージに60*45のサムネイル(ここでは9枚)を3列3行に配置、各サムネイルをシンボルに変換、インスタンス名を、p1,p2,p3,,,p9とする
●塗りの無い線だけの矩形(60*45)を描き、ムービークリップ(frame)とする 色は#99ffff
●frameをp1からp9までのサムネイルにそれぞれ重ね、インスタンス名をframe1,frame2,,,,frame9とする
●60*45の矩形を描き、シンボル(ムービークリップ)に変換、リンケージを同名で設定
●サムネイルに相当する600*450の写真9枚(pic1.jpgからの連番でpic9.jpgまで)を、同じフォルダにおいて置く
スクリプト
_root、FRAME1に記述
var frameColor:Array = new Array();
for (f=1; f<=9; f++) {
        frameColor[f] = new Color(_root["frame"+f]);
}
for (i=1; i<=9; i++) {
        mc = _root["p"+i];
        mc.n = i;
        mc.onRollOver = function() {
                frameColor[this.n].setRGB(0xff0000);
        };
        mc.onRollOut = function() {
                frameColor[this.n].setRGB(0x99ffff);
        };
        mc.onRelease = function() {
                back._visible = true;
                for (j=1; j<=9; j++) {
                        _root["p"+j]._visible = false;
                        _root["frame"+j]._visible = false;
                }
                px = _root["p"+this.n]._x;
                py = _root["p"+this.n]._y;
                loadPic(this.n, px, py);
        };
}
function loadPic(n, px, py) {
        load_mc = _root.createEmptyMovieClip("load_mc", 1);
        var mcLoader:MovieClipLoader = new MovieClipLoader();
        mcLoader.loadClip("pic"+n+".jpg", load_mc);
        with (load_mc) {
                _x = px-60;
                _y = py-45;
                _alpha = 0;
                _xscale = _yscale=20;
        }
        _root.onEnterFrame = function() {
                with (load_mc) {
                        _x += (0-_x)/5;
                        _y += (50-_y)/5;
                        _xscale += (100-_xscale)/5;
                        _yscale += (100-_yscale)/5;
                        _alpha += (100-_alpha)/5;
                }
                if (load_mc._xscale>98) {
                        back.onPress = function() {
                                load_mc.removeMovieClip();
                                delete onEnterFrame;
                                back._visible = false;
                                for (k=1; k<=9; k++) {
                                        _root["p"+k]._visible = true;
                                        _root["frame"+k]._visible = true;
                                }
                        };
                }
        };
}
スクリプトの説明
frameColor[f] = new Color(_root["frame"+f]);
  インスタンス frame1,,,frame9 の色をカラーオブジェクトの配列として定義
mc = _root["p"+i];  mc.n = i;
  サムネイルをムービークリップ mc として扱う。 n:どのサムネイルかを識別するために番号を記憶する
frameColor[this.n].setRGB(0xff0000);
  ロールオーバーされた番号に相当するframeの色を赤色にする
mc.onRelease { 以下
  backをアクティブに(クリックを受け付けられるような状態に)する
  p1-p9のサムネイルを消して、ロールオーバーやクリックを受け付けないようにする
  クリックされたサムネイルの座標を、(px,py)として取得
  this.n (クリックされた写真の番号)、px、pyを引数に、関数loadPicを参照
loadPic関数:写真をサムネイルの大きさで、サムネイルと同じ座標に読み込んで、拡大させながらステージ中央に表示させる。 すなわち、MovieClipLoaderクラスを使って、
  mcLoader.loadClip("pic"+n+".jpg", load_mc);でムービークリップload_mcに該当する番号の写真を読み込む。
  写真のscaleを20にするのは、サムネイルと同じ大きさにするため。
_root.onEnterFrame=function() { 以下
  写真を600*450(_scaleが100)に拡大させながら、ステージ中央に表示させる
  もし、_scaleが98以上になった状態で(最終的には、フレームが若干進むので600pixにほぼ達している)、
  back(ほぼステージ)がクリックされたら、表示拡大写真を削除し、タイムラインの進行を止め、
  元の状態に戻す。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しました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講座総リスト   アクションスクリプトの実践的事始め-活用編(17)