この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです。
FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(18) マウストレイルとフォトビューアーとの組み合わせ
 写真を見せるビューアーに、切り替え用マウストレイルで、味付けしてみました。

 このSAMPLEでは、単に4枚の写真を切り替えて見せるだけですが、ページ切り替えにも使えそうですね。 メインメニューにも応用できそうです。
SAMPLE
ステージの準備
●600*400のステージ(24fps)を設定
●300*200の矩形を描き(枠線なし、色:黒)、シンボルに変換、areaと名付け、同名でリンケージ
●星(径30)を描き、シンボルに変換、同名でリンケージ
  編集画面のタイムラインで、FRAME20,40にキーフレーム、FRAME50にフレームを挿入
  Frame1-20、Frame21-40にモーションとウイーンを作成、FRAME20でアルファを40にセット
●ライブラリーに4枚の写真を読み込み、シンボルに変換(pic1,pic2,pic3,pic4)、同名でリンケージ
  4枚の写真は以下のサイトからDLさせて頂きました。
   Tokyo: http://hand.blog2.fc2.com/blog-entry-469.html
   Hong Kong:http://commons.wikimedia.org/wiki/Image:Hong_Kong_Harbour_Night_View_by_Che.jpg
   New York:http://www.jaist.ac.jp/~skeiji/
   Perth:http://www.pbase.com/chyeheng/image/12736509
●ステージからすべてのインスタンスを削除、何もない状態に
スクリプトflaファイル
_root、FRAME1に記述
var str:Array = new Array("Tokyo    ", "Hong Kong", "New York ", "Perth    ");
var star:Array = new Array();
var area:Array = new Array();
var pic:Array = new Array();
starAttach();
areaAttach();
function starAttach() {
        for (i=1; i<=4; i++) {
                star[i] = attachMovie("star", "star"+i, 10+i);
                star[i]._alpha = 30;
                star[i]._x = 150+300*((i+1)%2);
                star[i]._y = 100+200*Math.floor((i-1)/2);
        }
}
function areaAttach() {
        for (k=1; k<=4; k++) {
                area[k] = attachMovie("area", "area"+k, k);
                area[k].k = k;
                area[k]._x = 150+300*((k+1)%2);
                area[k]._y = 100+200*Math.floor((k-1)/2);
                area[k].onRollOver = function() {
                        rollov(this.k);
                };
                area[k].onRollOut = function() {
                        rollot(this.k);
                };
                area[k].onRelease = function() {
                        nightview(this.k);
                };
        }
}
function rollov(k) {
        star[k].onEnterFrame = function() {
                this._x += (_xmouse-this._x)/5;
                this._y += (_ymouse-this._y)/5;
                this._rotation += 30;
                this._alpha += (100-this._alpha)/3;
        };
        textOn(k);
}
function rollot(k) {
        star[k].onEnterFrame = function() {
                this._x += (150+300*((k+1)%2)-this._x)/3;
                this._y += (100+200*Math.floor((k-1)/2)-this._y)/3;
                this._rotation += 0;
                this._alpha += (30-this._alpha)/3;
        };
}
function nightview(n) {
        for (j=1; j<=4; j++) {
                if (j == n) {
                        pic[j] = area[j].attachMovie("pic"+j, "pic"+j, j);
                        pic[j]._xscale = 50;
                        pic[j]._yscale = 50;
                        area[j].swapDepths(5);
                } else {
                        pic[j].removeMovieClip();
                        star[j]._visible = false;
                }
        }
        area[n].onEnterFrame = function() {
                this._xscale += (200-this._xscale)/5;
                this._yscale += (200-this._yscale)/5;
                this._x += (300-this._x)/5;
                this._y += (200-this._y)/5;
                this.onRelease = function() {
                        this.removeMovieClip();
                        starAttach();
                        areaAttach();
                };
        };
}
function textOn(k) {
        $str = str[k-1];
        for (q=0; q<$str.length; q++) {
                mc = _root.createEmptyMovieClip("tf_mc"+q, 20+q);
                mc._x = 150+300*((k+1)%2);
                mc._y = 100+200*Math.floor((k-1)/2);
                mc.createTextField("tf", 20+q, 20, 0, 20, 20);
                mc.tf.text = $str.charAt(q);
                mc.tf.onRollOver = function() {
                        rollov(k);
                };
                t_fmt = new TextFormat();
                t_fmt.size = 15;
                t_fmt.bold = true;
                t_fmt.color = 0xffffff;
                mc.tf.setTextFormat(t_fmt);
                if (q) {
                        r = q-1;
                        mc.pre_mc = _root["tf_mc"+r];
                        mc.onEnterFrame = function() {
                                this._x += (this.pre_mc._x+10-this._x)/2;
                                this._y += (this.pre_mc._y-this._y)/2;
                                if (this.hitTest(_xmouse, _ymouse, true)) {
                                        this._visible = false;
                                } else {
                                        this._visible = true;
                                }
                        };
                } else {
                        mc.onEnterFrame = function() {
                                this._x += (_xmouse+20-this._x)/1.5;
                                this._y += (_ymouse-10-this._y)/1.5;
                                if (this.hitTest(_xmouse, _ymouse, true)) {
                                        this._visible = false;
                                } else {
                                        this._visible = true;
                                }
                        };
                }
        }
}
スクリプトの説明
var str:Array = new Array("Tokyo  ", "Hong Kong", "New York ", "Perth  ");
  ロールオーバーで現れる文字列を配列定義、すべての文字数が最大数(9)となるように、スペースを加える
function starAttach() , function areaAttach()
  ステージを4分割するように area を4枚配置し、それぞれの中心にstarを配置する
area[k].onRollOver = function() {
  ロールオーバーされたarea番号を引数として、関数rollovに引き渡す
  rollov で、星が明るくなってマウスを回転しながら追跡し、該当番号の文字列が現れ、星を追跡する
  文字列のトレイルについては、基本編(8)「マウストレイル」を参照のこと
  なお、マウスが文字列に接触すると、ロールアウト状態になってしまうため、hitTest 判定をして、
  接触したら _visiblefalse にしてそれを避けるようにしている
area[k].onRollOut = function() {
  ロールアウトされたarea番号を引数に、rollov関数を呼ぶ
  この関数で、starはもとに位置に、回転を止め、アルファ値を戻す
area[k].onRelease = function() {
 areaがクリックされたら、該当する写真をステージに配置し、それ以前に表示されているものを削除
  最初は、該当areaの位置に、areaを同じ大きさに配置し、時間とともに、拡大しステージ一杯に配置
  写真をattachしたareaの深度をarea仲間の一番上に置く(swapDepths
  星と文字列は消えずに残り、ステージ全面で移動可能になる
  表示されている写真がリリースされたら、写真を消し、元の状態に戻す。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しました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講座総リスト   アクションスクリプトの実践的事始め-活用編(19)