FLASH講座1234_アクションスクリプトaction script

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

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

　FLASH画面上で作用するアクセスカウンターについては、「（６）FLASH画面にアクセスカウンター」ですでに講座にしましたが、今回は、もう少しダイナミックに数字が表示されるカウンターの作成についてです。

　このカウンターも、（６）で使用した cｇi を使っており、また、ｃｇｉとのデータのやり取りのスクリプトは共通です。　（６）では、データをテキストのまま画面に設置されたテキストフィールドに表示させていましたが、今回は、読み込んだ数字（テキスト）をあらかじめ登録していた数字のインスタンスに変換して、ムービークリップとして動きを付与させるようにしました。

　今回はその一例を示しますが、本スクリプトを応用すれば、いろいろな動きのアクセスカウンターを作成することができますので、ぜひ皆さんも独自のカウンターを作成してください。
　なお、cgi 及び、cgiとの交信については（６）を参照のこと。

ステージの設定
　　背景色黒、２００×５０のサイズを持つステージを設定する。
　　フレームレートは、１２とする。
数字シンボルの作成
　ステージにテキストツールで数字の 0 を描く。（色は黒、サイズは１５ｐｔ、フォントはIMPACT）
　色、サイズはスクリプトで設定できるので、適当でよい。
　この数字（０）をシンボルに変換し、基準点を中央、名前をｃ０、リンケージをｃ０で設定する。
　次いで、このｃ０を複製し、これを編集画面で、数字を１に変え、名前をｃ１、リンケージをｃ１に変えて、数字1のシンボルを作成する。
　２から９までの数字についても同様にシンボルを作成する。
　ステージ上からｃ０を削除し、全てのシンボルをライブラリーに格納する。

以下にスクリプトを掲載しますが、各フレームにキーフレームを挿入し、書き込んでください。

スクリプト（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とサーバーの間でデータをやり取りするために定義されるオブジェクト
データの読み込みに成功したら

ｃｇｉにカウントされている数字（count）をc_textとする。
FRAME2に移動し再生（データの読み込み終了まで待つ)

ｃｇｉを呼び出しデータをmyLoadVarsに取り込む

スクリプト（FRAME２)　数字の表示

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; //１）
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;
}}

FRAME５２から戻ったときに、変数を０に戻す
c_text（cgiから受け取った6桁の数字)を一字ずつに分けて配列ｎに組み込む
イージングの速度係数
加速度係数

配列ｎのデータを配列cntのインスタンスとしてステージに表示
　　配列ｎが順に　０　０　１　５　８　４　とすると、
　　シンボル　　　c0 c0 c1 c5 c8 c4　に変換し、
　　配列cntの　[1] [2] [3] [4] [5] [6] に設定する
表示色の設定

ＲのFFを固定して、G、Bを乱数で発生
　（濃い色は見にくいため暖色系の薄い色を発生）

各数字の表示に時間差をつけるためのタイマー設定
初期の文字大きさ
加速度係数の初期化
初期アルファー値０

フレームアクションの呼び出し

フレームアクションの定義
数字インスタンス配列の順番をｔｎに代入
もし２００ミリ秒×順番が過ぎたら、
数字インスタンスの大きさを変化させる

数字インスタンスの配置(座標)を移動させる

アルファーを１００に戻す

スクリプト（FRAME５０)　数字の色を設定

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) );
}

各数字ごとに文字色をランダムに発生させる
（Ｒ値だけはＦＦに固定)

スクリプト（FRAME５２)　数字の色を瞬かせる

kaisuu++
if (kaisuu>30) {
gotoAndPlay(2);
} else{gotoAndPlay(50);} //7)

回数をカウント
３０回を超えたら
FRAME２に戻る
３０回まではFRAME５０に戻り色を変える

（変更の仕方）
　　表示サイズ：注１）で初期サイズ、注2)で表示サイズ
　　表　示　色：好みの色にするときは、#0xFFFFFF　などのように色番号をsetRGB（）のカッコ内に入れる(注3))
　　表示文字の動き：速度・・注4）、加速度・・注5)
　　タイムラグ：文字表示のラグ・・注6）
　　色の瞬き方：瞬きの間隔は、FRAME50からのFRAME数で、瞬きの回数は、kaisuuで（注7)）
　　文字の動き：function act() で、さまざまな趣向を考えて作成してみてください
　　なお、数字はwebで配布されている gif フォーマットの画像をシンボル化し、インスタンス名をｃ0,,ｃ9としても使えます。

テキストアクションの要素例
　　私の作成したいくつかの例を示す。座標移動、拡大･縮小、透明化などと組み合わせるとどうでしょう。
　　スクリプトは、上記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画面に直接表示させる場合、ベースのアクション、タイムラインの状況によっては、動きを一つに制限するなどの制約がありそうです。　ｈｔｍｌで画面に挿入するのは、ご覧のとおり問題ありません。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

　このサイトで使用しました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）外部ムービー読み込みで文字を踊らす

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

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