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

FLASH講座 ーアクションスクリプトの実践的事始めー
実務編 
(1)プレゼンテーションー棒グラフ 

 プレゼンテーションの定番と言えばパワーポイントですね。 その地位はゆるぎ無いものですが、FLASHを使えばもっとダイナミックなプレゼンが出来るのではないでしょうか。

 もちろん、FLASHムービーをパワーポイントのプレゼンに組み込んでも(挿入しても)いいですし、FLASHオンリーのプレゼンを作成するのも面白いかもしれません。 FLASHで作成すれば、そのままWebで公開できるというメリットもあります。

FLASHムービーでのプレゼンを考えるとき、パワーポイントではできない動きを画像やテキストに付与しなければ意味がありません。 ただいたずらに動かしまくるのではなく、聞き手を引き付けるムービーでなくてはなりません。 したがって、どのようなムービーにするかがかぎとなりますが、ここでの講座は、そういったデザインではなくFLASH作成のテクニックです。

 プレゼンの一部にしかなりませんが、ポイントでの説明にグラフが良く使わます。 まずその中でも良く使われる棒グラフの作成について本稿で受講していただきます。
  

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

  REPLAYはブラウザの
  更新ボタンで
ステージの準備
 グラフ描画エリア、売上高タブ、経常利益タブはFireworksで標準装備のアセット・スタイルの塗りを使って作成した。 両タブにはスクリプトを書き込むので、シンボル(ムービークリップ)に変換しておく。
 タブをクリックしたらグラフエリア中央上部にフェイドインするタイトル(「売上高推移」、「経常利益」)はシンボルとして配置し、インスタンス名をtitle1、title2とする。
 棒グラフ描画後にグラフ右側に出るコメントは外部swfファイルを読み込む形式をとっているので、読み込むためのムービークリップ(シンボルの挿入で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]のy座標
処理中の i の取り込み
時間の進行とともに yset を実行


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










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

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

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



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















 

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

 
経常利益タブがクリックされたら
 flag を2とする
 タイマー時間を取得しtiming2と置く
 ムビークリップ comment にcomment2.swfを読み込む
このサンプルはプレゼンテーションのほんの一部についての提案に過ぎない。 このサンプルに関しても、グラフ表示エリアをダイナミックに登場させたり、いろいろな演出が可能であろう。 今後のプレゼンテーションで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講座総リスト      実務編 (2) flash アクションスクリプト 実務編 (3)