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

FLASH講座 ーアクションスクリプトの実践的事始めー
応用編
(2) アクセスカウンター [2]

 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で画面に挿入するのは、ご覧のとおり問題ありません。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しました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講座総リスト    (3)外部ムービー読み込みで文字を踊らす