FLASHのお勉強　ーアクションスクリプトの実践的事始めー

（１８）　プレゼンテーションー棒グラフ
2005/5/5

プレゼンテーションの定番と言えばパワーポイント。　その地位はゆるぎ無いものだが、FLASHを使えばもっとダイナミックなプレゼンが出来るのではないだろうか。　もちろん、FLASHムービーをパワーポイントのプレゼンに組み込んでも(挿入しても)いいし、FLASHオンリーのプレゼンを作成するのも面白いかもしれない。　FLASHで作成すれば、そのままWebで公開できるというメリットもある。FLASHムービーでのプレゼンを考えるとき、パワーポイントではできない動きを画像やテキストに付与しなければ意味がない。　ただいたずらに動かしまくるのではなく、聞き手を引き付けるムービーでなくてはならない。　したがって、どのようなムービーにするかがかぎとなるが、ここでのお勉強は、そういったデザインではなくFLASH作成のテクニックである。　プレゼンの一部にしかならないが、ポイントでの説明にグラフが良く使われる。　まずその中でも良く使われる棒グラフの作成について本稿で勉強することにしたい。
　　

　　売上高タブ、
　　経常利益タブを
　　クリックすると
　　グラフが現れます。

　　REPLAYはブラウザの
　　更新ボタンで
ステージの準備：
　グラフ描画エリア、売上高タブ、経常利益タブはFireworksで標準装備のアセット・スタイルの塗りを使って作成した。　両タブにはスクリプトを書き込むので、シンボル（ムービークリップ）に変換しておく。
　タブをクリックしたらグラフエリア中央上部にフェイドインするタイトル（「売上高推移｣、「経常利益｣）はシンボルとして配置し、インスタンス名をtitle1、title2とする。
　棒グラフ描画後にグラフ右側に出るコメントは外部ｓｗｆファイルを読み込む形式をとっているので、読み込むためのムービークリップ（シンボルの挿入でcommentというインスタンス名の矩形を作成し、同名でリンケージを設定)を作成する。
　コメントの外部ファイルは、「右肩上がりの急成長」及び「高収益の維持｣というテキストを棒グラフの表示が終わったタイミングで表示させるFLASHファイルで、ここでは、SWiSHを使って作成した。　コメントを印象付けるために簡単なエフェクトを付けて出現させているが、出現のタイミングは3秒相当のFRAME数をエフェクトの前に挿入して調整した。　ファイル名を、comment1、comment2とした。
　棒グラフの最小単位（幅63、高さ9）の矩形をシンボルの挿入で作成し、基準点を下部中央にし、放射状グラデーションを施し、インスタンス名をbasebar1、basebar2、リンケージをbar1、bar2とする。
スクリプト

スクリプト（ROOT、FRAME1)

var bar1:Array=new Array;
var bar2:Array=new Array;
var bar1x:Array=new Array("99","00","01","02","03","04")
var bar1y:Array=new Array(50,100,130,170,200,220);
var bar2y:Array=new Array(12,19,22,25,30,36)
var bar1_num=bar2_num=6;
var basebar1_height=basebar2_height=10;
_root.title1._alpha = _root.title2._alpha= 0;

_root.attachMovie("comment","comment1", 200 );
comment1._x = 400;
comment1._y = 170;
_root.attachMovie("comment","comment2", 201 );
comment2._x = 400;
comment2._y = 240;

xtxtformat = new TextFormat();
xtxtformat.size=14;
xtxtformat.bold=true;
xtxtformat.font="_sans";
ytxt1format = new TextFormat();
ytxt1format.size=14;
ytxt1format.bold=true;
ytxt1format.font="_sans";
ytxt1format.color=0x996600;
ytxt2format = new TextFormat();
ytxt2format.size=14;
ytxt2format.bold=true;
ytxt2format.font="_sans";
ytxt2format.color=0x339999;

for (i=0; i<=bar1_num-1; i++) {
_root.attachMovie("bar1","bar1"+i, i );
bar1[i] = eval("bar1"+i);
bar1[i]._width = 500/bar1_num*0.7;
bar1[i]._visible = false;
bar1[i]._x = 100+500/bar1_num*i;
bar1[i]._y = 340;
bar1[i].num = i;
bar1[i].onEnterFrame = yset;
}

for (j=0; j<=bar2_num-1; j++) {
_root.attachMovie("bar2","bar2"+j, 100+j );
bar2[j] = eval("bar2"+j);
bar2[j]._width = 500/bar2_num*0.7;
bar2[j]._visible = false;
bar2[j]._x = 100+500/bar2_num*j;
bar2[j]._y = 340;
bar2[j].num2 = j;
bar2[j].onEnterFrame = yset2;
}

function yset() {
if ( flag==1 && getTimer()>timing+500*(this.num+1)) {
this._visible = true;
this._yscale += (100*bar1y[this.num]/basebar1_height
　　 - this._yscale)/3;
_root.createTextField("xtext"+this.num,bar1_num+this.num,
　　100+500/bar1_num*this.num-10,345,this._width,20);
_root.createTextField("ytext1"+this.num,bar1_num*2+this.num,　　100+500/bar1_num*this.num-10,320-bar1y[this.num],this._width,20);
_root["xtext"+this.num].text = "'"+bar1x[this.num];
_root["ytext1"+this.num].text = bar1y[this.num];
_root["xtext"+this.num].setTextFormat(xtxtformat);
_root["ytext1"+this.num].setTextFormat(ytxt1format);
_root.title1._alpha += (100-_root.title1._alpha)/20;
}
}

function yset2() {
if ( flag==2 && getTimer()>timing2+500*(this.num2+1)) {
this._visible = true;
this._yscale += (100*bar2y[this.num2]/basebar2_height - this._yscale)/3;
_root.createTextField("xtext"+this.num2,bar2_num+this.num2,
　　100+500/bar2_num*this.num2-10,345,this._width,20);
_root.createTextField("ytext2"+this.num2,100+bar2_num*2+this.num2,
100+500/bar2_num*this.num2-10,320-bar2y[this.num2],this._width,20);
_root["xtext"+this.num2].text = "'"+bar1x[this.num2];
_root["ytext2"+this.num2].text = bar2y[this.num2];
_root["xtext"+this.num2].setTextFormat(xtxtformat);
_root["ytext2"+this.num2].setTextFormat(ytxt2format);
_root.title2._alpha += (100-_root.title2._alpha)/20;
}
}

売上高ボタン（ダブ)
on(release) {
_root.flag = 1;
_root.timing = getTimer();
_root.comment1.loadMovie("comment1.swf");
}
経常利益ボタン（タブ）
on(release) {
_root.flag = 2;
_root.timing2 = getTimer();
_root.comment2.loadMovie("comment2.swf");
}
　
　

配列bar1の定義
配列bar2の定義
x軸（年度)
売上高
経常利益
データ数
棒グラフの元となる最小単位(矩形の高さ)
表示開始時にタイトルを表示しない

シンボルcommentにcomment1という名でインスタンスを作成（200は深度：手前に表示するため大きくとる)

シンボルcommentにcomment2という名でインスタンスを作成


下のスクリプトで作成するテキストフィールドに記載される文字の書式の設定













売上高配列データの設定（ここでは0-6）
bar10からbar15までの最小単位を配置
bar1[0]からbar1[5]までを配列として定義
bar1[i]の幅の定義
初期は表示させない
bar[i]のx座標
bar[i]のｙ座標
処理中の ｉ の取り込み
時間の進行とともに　yset　を実行


経常利益配列データの設定










ファンクションyset
もしflagが１に等しく（売上タブがクリックされ)、クリック後に一定時間が経過したら、順次以下を実施
棒を表示状態にする
棒の高さを配列データにしたがって大きくする
（遅延効果つき)
ｘ軸に年度配列データ用テキストフィールドを配置

棒の上の部分に売上データ用のテキストフィールド配置

xtextに配列bar1xデータを表示
ytext1に配列bar1yデータを表示
xtextに書式xtxtformatを適用
ytext1に書式ｙtxt1formatを適用
title1（売上高推移）をフェードインさせる



ファンクションyset2
もしflagが2に等しく（経常タブがクリックされ)、クリック後に一定時間が経過したら、順次以下を実施















　

売上高タブがクリックされたら
　flag を１とする
　タイマー時間を取得しtimingと置く
　ムビークリップ comment にcomment1.swfを読み込む

　
経常利益タブがクリックされたら
　flag を２とする
　タイマー時間を取得しtiming2と置く
　ムビークリップ comment にcomment2.swfを読み込む
このサンプルはプレゼンテーションのほんの一部についての提案に過ぎない。　このサンプルに関しても、グラフ表示エリアをダイナミックに登場させたり、いろいろな演出が可能であろう。　今後のプレゼンテーションでFLASHがより使われるようになることは容易に予想できる。　単なる派手な動きを良しとするのではなく、効果的であったり、相手を引き付けるためであったり、より分かり易い内容にするためであったりと、いろいろな有用さが考えられると思う。　本サイトでも機会を捉えて提案を続けて行きたい。
　HOME　　　お勉強総リスト