この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです![]() |
||
FLASH講座 ーアクションスクリプトの実践的事始めー
|
||
FLASH画面上で作用するアクセスカウンターについては、「(6)FLASH画面にアクセスカウンター」ですでに講座にしましたが、今回は、もう少しダイナミックに数字が表示されるカウンターの作成についてです。 このカウンターも、(6)で使用した cgi を使っており、また、cgi とのデータのやり取りのスクリプトは共通です。 (6)では、データをテキストのまま画面に設置されたテキストフィールドに表示させていましたが、今回は、読み込んだ数字(テキスト)をあらかじめ登録していた数字のインスタンスに変換して、ムービークリップとして動きを付与させるようにしました。 今回はその一例を示しますが、本スクリプトを応用すれば、いろいろな動きのアクセスカウンターを作成することができますので、ぜひ皆さんも独自のカウンターを作成してください。 なお、cgi 及び、cgiとの交信については(6)を参照のこと。 |
||
|
||
ステージの設定 背景色黒、200×50のサイズを持つステージを設定する。 フレームレートは、12とする。 数字シンボルの作成 ステージにテキストツールで数字の 0 を描く。(色は黒、サイズは15pt、フォントはIMPACT) 色、サイズはスクリプトで設定できるので、適当でよい。 この数字(0)をシンボルに変換し、基準点を中央、名前をc0、リンケージをc0で設定する。 次いで、このc0を複製し、これを編集画面で、数字を1に変え、名前をc1、リンケージをc1に変えて、数字1のシンボルを作成する。 2から9までの数字についても同様にシンボルを作成する。 ステージ上からc0を削除し、全てのシンボルをライブラリーに格納する。 |
||
以下にスクリプトを掲載しますが、各フレームにキーフレームを挿入し、書き込んでください。 | ||
スクリプト(FRAME1) 配列設定、cgiとの交信 var cnt:Array=new Array; var vx:Array=new Array; var vy:Array=new Array; var ax:Array=new Array; var ay:Array=new Array; myLoadVars = new LoadVars(); myLoadVars.onLoad = function(success) { if (success) { c_text = this.count; gotoAndPlay(2); } } myLoadVars.sendAndLoad("counter4flash.cgi",myLoadVars); |
配列群の定義 Flashとサーバーの間でデータをやり取りするために定義されるオブジェクト データの読み込みに成功したら cgiにカウントされている数字(count)をc_textとする。 FRAME2に移動し再生(データの読み込み終了まで待つ) cgiを呼び出しデータをmyLoadVarsに取り込む |
|
スクリプト(FRAME2) 数字の表示 var kaisuu=0; n = c_text.split(""); speed = 3; //4) acc1=0.9; acc2=0.7; //5) for ( i=0; i<c_text.length; i++) { _root.attachMovie("c"+n[i], "cnt"+i,i); cnt[i]=eval("cnt"+i); cnt[i]._x = -30+10*(i-1); cnt[i]._y = 10; c_color = new Color(cnt[i]); c_color.setRGB( 255<<16 | Math.floor(Math.random()*255)<<8 | Math.floor(Math.random()*255) ); //3) cnt[i].num = i; cnt[i].lag = getTimer(); cnt[i]._xscale = cnt[i]._yscale = 50; //1) vx[i] = 0; vy[i] = 0; ay[i]=0; ax[i]=0; cnt[i]._alpha = 0; cnt[i].onEnterFrame = act; } function act() { tn=this.num; if ( getTimer()>this.lag+200*tn) { //6) vx[tn] = acc1*vx[tn] + (200-cnt[tn]._xscale)/speed;//2) vy[tn] = acc1*vy[tn] + (200-cnt[tn]._yscale)/speed; cnt[tn]._xscale += vx[tn]; cnt[tn]._yscale += vy[tn]; ax[tn] = acc2*ax[tn] + (50+16*(tn-1)-cnt[tn]._x)/speed; cnt[tn]._x += ax[tn]; ay[tn] = acc2*ay[tn] + (30-cnt[tn]._y)/speed; cnt[tn]._y += ay[tn]; cnt[tn]._alpha += (100-cnt[tn]._alpha)/speed; }} |
FRAME52から戻ったときに、変数を0に戻す c_text(cgiから受け取った6桁の数字)を一字ずつに分けて配列nに組み込む イージングの速度係数 加速度係数 配列nのデータを配列cntのインスタンスとしてステージに表示 配列nが順に 0 0 1 5 8 4 とすると、 シンボル c0 c0 c1 c5 c8 c4 に変換し、 配列cntの [1] [2] [3] [4] [5] [6] に設定する 表示色の設定 RのFFを固定して、G、Bを乱数で発生 (濃い色は見にくいため暖色系の薄い色を発生) 各数字の表示に時間差をつけるためのタイマー設定 初期の文字大きさ 加速度係数の初期化 初期アルファー値0 フレームアクションの呼び出し フレームアクションの定義 数字インスタンス配列の順番をtnに代入 もし200ミリ秒×順番が過ぎたら、 数字インスタンスの大きさを変化させる 数字インスタンスの配置(座標)を移動させる アルファーを100に戻す |
|
スクリプト(FRAME50) 数字の色を設定 for ( i=0; i<c_text.length; i++) { c_color = new Color(cnt[i]); c_color.setRGB( 255<<16 | Math.floor(Math.random()*255)<<8 | Math.floor(Math.random()*255) ); } |
各数字ごとに文字色をランダムに発生させる (R値だけはFFに固定) |
|
スクリプト(FRAME52) 数字の色を瞬かせる kaisuu++ if (kaisuu>30) { gotoAndPlay(2); } else{gotoAndPlay(50);} //7) |
回数をカウント 30回を超えたら FRAME2に戻る 30回まではFRAME50に戻り色を変える |
|
(変更の仕方) 表示サイズ:注1)で初期サイズ、注2)で表示サイズ 表 示 色:好みの色にするときは、#0xFFFFFF などのように色番号をsetRGB()のカッコ内に入れる(注3)) 表示文字の動き:速度・・注4)、加速度・・注5) タイムラグ:文字表示のラグ・・注6) 色の瞬き方:瞬きの間隔は、FRAME50からのFRAME数で、瞬きの回数は、kaisuuで(注7)) 文字の動き:function act() で、さまざまな趣向を考えて作成してみてください なお、数字はwebで配布されている gif フォーマットの画像をシンボル化し、インスタンス名をc0,,c9としても使えます。 |
||
テキストアクションの要素例 私の作成したいくつかの例を示す。座標移動、拡大・縮小、透明化などと組み合わせるとどうでしょう。 スクリプトは、上記function act(){ } 内に記載するものと、定義項目のみ記載する。なお、数字はc_text="00123456"で設定。 なお、ピンクのスクリプトは、function 内ではなく、文頭などに初期設定として記述します。 |
||
tn=this.num; r=70; if ( getTimer()>this.lag+200*tn && getTimer()<this.lag+200*tn+3000) { cnt[tn]._rotation += r; } if (getTimer()>this.lag+200*tn+3000) { cnt[tn]._rotation =0; } |
||
tn=this.num; r=50; if ( getTimer()<this.lag+3000) { cnt[tn]._rotation += r; } if (getTimer()>this.lag+3000) { cnt[tn]._rotation =0; } |
||
r=0; k=0; tn=this.num; r = 45*Math.cos(k/180); if ( getTimer()>this.lag+300*tn && getTimer()<this.lag+300*tn+4000) { cnt[tn]._rotation = r; } if (getTimer()>this.lag+300*tn+4000) { cnt[tn]._rotation +=(0-cnt[tn]._rotation)/2; } K+=10; } |
||
h=-30; //この例だけは、フレームレートが30 tn=this.num; cnt[tn]._xscale += h; if ( cnt[tn]._xscale<-200 || cnt[tn]._xscale>200) { h= -h; } |
||
h=0; tn=this.num; if ( getTimer()>this.lag+200*tn && getTimer()<this.lag+200*tn+4000) { cnt[tn]._y =30+7*Math.cos((h-tn*7)/10); } if (getTimer()>this.lag+200*tn+4000) { cnt[tn]._y +=(30-cnt[tn]._y)/2; } h+=1; |
||
なお、今回記載のカウンターをそのままFLASH画面に直接表示させる場合、ベースのアクション、タイムラインの状況によっては、動きを一つに制限するなどの制約がありそうです。 htmlで画面に挿入するのは、ご覧のとおり問題ありません。 | ||
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
|
||
HOME Flash講座総リスト (3)外部ムービー読み込みで文字を踊らす |