FlashCS4 プログレスバーの作成

質問

Flash CS4を使用しています。
CS4は、まだ解説書があまり販売していないため、分りません。
SWFファイルを作りました。これにプログレスバーをつけたいのですが、flaファイルにどのようなアクションスクリプトを書けば良いのでしょうか？CS4での作成方法を教えてください。
購入したばかりで初心者です。
よろしくお願いします。

回答No.2

BlurFiltan · ベストアンサー

＃１です。

> これに、「Now Loading...」と「100％」
> も付け加えるには …

・ 「Now Loading...」

これに関してはわかりません。
わからないというのは 「どうしたいのかがわからない」 ということです。

フレーム1 のみのステージ上に 「Now Loading...」 と文字を打っておくだけでも良いと思います。

また，
「Now Loading　 」→「Now Loading .　」→「Now Loading . .　」→「Now Loading . . .」
のように 「.」 が増えるアニメーション（パラパラマンガ）をムービークリップの中のタイムラインに作っておいて，
そのムービークリップを フレーム1 のみのステージ上に配置しても良いと思いますし。

適当にしてください。としか言えませんね。

・ 「100％」

これに関してはわかります。

ツールパネルのテキストツール（「T」ボタン）を選択して，
「プロパティパネル」より「ダイナミックテキスト」を選択し 【図↓の緑関係】，
プログレスバーを配置したレイヤーと同じレイヤーのステージ上をクリックします。

するとステージ上にダイナミックテキストのテキストフィールドができますから，
そのテキストフィールドを選択した状態で，
「プロパティパネル」より各種設定をしていきます 【図↓の赤関係】。

一番大切なのがインスタンス名です。
ここでは 「load_txt」 というインスタンス名を付けることにします。

フォントファミリーは「_等幅」や「_ゴシック」などのように，
前にアンダースコアが付いた「デバイスフォント」にするのが良いです。

一般的には ダイナミックテキスト にはフォントを埋め込まないというのが基本です。
埋め込まないフォントを使う場合，
例えば 「AF Adobe隷書体」 などというフォントをダイナミックテキストに指定したとき，
その 「AF Adobe隷書体」 などというフォントが閲覧者のPCに入っていなければ，
どんなフォントで表示されるかわかりません。
実際には何かの代替フォントが選ばれるので，「文字化け」までは起こらないとは思いますが，
代替フォントとして何が選ばれるかまでは推測できません。

「_等幅」や「_ゴシック」などの「デバイスフォント」にしておくと，
だいたいオーソドックスな 「等幅フォント」 や 「ゴシックフォント(たいていプロポーショナルのゴシック)」が表示されるので，
妙なことになるということが少なくなります。

ご質問の場合は，表示文字がカチャガチャ変わる％表示です。
この場合プロポーショナルを避けた方がレイアウト的にガチャガチャしにくくなるので，
「デバイスフォント」の中でも「_等幅」を選ぶのをお薦めします。

その他はどうでも良いですが，
だいたい下の図にあるように設定してもらうと良いのではないかと思います。

そして，やっと ActionScript ですが，
これは至って簡単と言えば簡単です。

＃１ のスクリプトで，すでに毎フレーム時間ごとにロードした割合を取得するようにしてありますから，
そのスクリプトに１行付け加えれば良いだけです。

-----------------------------------------------
this.stop();
bar_mc.scaleX=0;
this.addEventListener(Event.ENTER_FRAME,watchLoading);

function watchLoading(evt:Event) {
var per:Number=this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal;

// 「load_txt」に (per×100)の小数を四捨五入した値 & 「％」 を表示
load_txt.text = Math.round(per*100)+"％";

bar_mc.scaleX=per;
if (per>=1) {
this.play();
this.removeEventListener(Event.ENTER_FRAME,watchLoading);
}
}
-----------------------------------------------

付け加えたのは
load_txt.text = Math.round(per*100)+"％";
この１行とその注釈行だけです。

代表として，この１行に関してのみくわしく説明してみます。

上の１行は大まかには，

　「load_txt」というインスタンスの「text」プロパティに
　変数 per に 100 を掛けた数の小数点以下を丸めた数と
　「％」 という文字を連結して代入

という意味になります。

仮に 「全バイト数 が 1000バイト」 で 「ロード済みバイト数 が 286バイト」 であったとします。

変数 per には 「ロード済みバイト数/全バイト数」 が取得されますから，
仮に 「全バイト数 が 1000バイト」 で 「ロード済みバイト数 が 286バイト」 である場合
変数 per には　286/1000＝0.286　が代入されることになります。
※注：本当は割りきれないような長い数になる場合が多いです。

この 0.286 を 100％ で表すには 100 を掛ければ良いということになります。
0.286×100＝28.6(％)

28.6の小数部分を丸める(=小数部分を五捨五入する(=小数第一位を四捨五入する))には，
Mathクラスの round メソッドを使うと簡単にできます。
Math.round(28.6) → 29 となります。

上で求められた 「29」 は 「数値」 です。
「"％"」 は 「文字列(この場合は文字)」 です。

「＋」は加算演算子で「数値加算」にも「文字列加算(文字列連結)」にも使えます。
この加算演算子には次のような規則があります。
「数値」＋「数値」 → 「数値」
「文字列」＋「数値」 → 「文字列」
「数値」＋「文字列」 → 「文字列」
「文字列」＋「文字列」 → 「文字列」

29+"％"　は　 「数値」＋「文字列」 ですから 「文字列」 が求められます。
29+"％" → "29％"

したがって，
「全バイト数 が 1000バイト」 で 「ロード済みバイト数 が 286バイト」 だった場合，

load_txt.text ="29％";

となります。

テキストフィールドの text プロパティに文字列や数値を代入すると，
その文字列や数値がテキストフィールドに表示されます。

したがって 「29％」 が 「load_txt」 に表示されるということになります。

１行だけをやたら詳しく説明しましたが，他もだいたい同じようなものです。

　Aをさせるには，Bを求める必要があって，
　　Bを求めるには，Cを取得する必要があって，
　　　Cを取得するには，DクラスのEメソッドを使うと便利。

このように，知識をたどって考えながらプログラミングします。

上の場合，
「DクラスのEメソッド」 を 「知っておく」 か「調べて見つける」 かしなければ，
「Aをさせることはできない。」または「Aをさせるのにもっと回り道をしなければならない。」
ということになります。

「知ることも」大切ですし，「知ったものの使い方を考えること」も大切です。
スクリプト全体的にだいたい同じようなものです。

お礼

本当にありがとうございました。
成功しました！
手順や画像もあって、初心者の私にもとても分りやすかったです。
BlurFiltanさんは、何かの解説書を書かれている方なのでしょうか。
解説書よりも分りやすい説明です。
テキストの種類や、選択の仕方、スクリプトの意味なども丁寧に教えて下さり感謝しております。
CS４を購入したのに、解説書の方が販売されていない今、とても困っておりました。
ありがとうございました。

回答No.1

BlurFiltan

プログレスバー とはムービーのロードを監視する
「Now Loading...」 みたいなもののことですよね。

そのプログレスバー を作成するときの根本は，
Flash 4 ぐらいから Flash CS4 まで 10年間くらいで全く変わりません。

　「１フレーム進む時間毎などに，
　 ファイル全体のうちロードされた割合を随時取得して，
　 それをバーの長さなどに反映させて
　 ビジュアル的に見えるようにする。」

ということです。

ご質問も，
「Flash CS4 での作成方法」 というよりも，
「"ActionScript 3.0" での "シンプルなもの" の作成方法」 と考えて良いでしょうか？

まずステージ上に，矩形ツール で適当な長さの横長の「塗り」の長方形を描きます。
塗りの色は何色でも良いです。
線は入れずに「塗りだけ」の横長長方形を用意する方が良いと思います。

その 横長の塗りの長方形 を選択して，
「修正」→「シンボルに変換」で，ムービークリップに変換します。
このとき 「基準点」 を 「左上」 または 「左中」 に設定しておくのが良いと思います。

　---基準点の設定---
　「左上」 または 「左中」
　■□□　　　　　□□□
　□□□　　　　　■□□
　□□□　　　　　□□□

ムービークリップになった横長長方形を選択して，
おそらく ステージの右 にある「プロパティ」パネルでインスタンス名を付けます。
「プロパティ」パネルの
　[ <インスタンス名>　　]
となっているテキストボックスにインスタンス名を記入するのですが，
ここでは，「bar_mc」 というインスタンス名を付けることにしておきます。

そのムービークリップ「bar_mc」があるレイヤーの上に新しくレイヤーを追加して，
その新レイヤーをActionScript専用レイヤーということに自分で勝手に決めます。

そして，
その新レイヤーのフレーム1の空白キーフレームを選択して，
アクションパネルを表示させ，
アクションパネルの ActionScript を書く部分に次のようなスクリプトを書きます。

-----------------------------------------------
// このタイムラインの再生を停止
this.stop();

// 「bar_mc」の横サイズの割合を 0 にする
bar_mc.scaleX=0;

// このタイムラインにイベントリスナーを登録
// 引数(イベント.毎フレーム実行，実行関数watchLoading)
this.addEventListener(Event.ENTER_FRAME,watchLoading);

// 関数 watchLoading の定義
function watchLoading(evt:Event) {
//
// このタイムラインの全バイト数中のロードされたバイト数の割合を取得
var per:Number=this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal;
//
// 「bar_mc」の横サイズの割合を ロードされたバイト数の割合にする
bar_mc.scaleX=per;
//
// もし ロードされたバイト数の割合 が 1 以上になれば
if (per>=1) {
// このタイムラインの再生を開始
this.play();
// このタイムラインに登録したイベントリスナーを削除
this.removeEventListener(Event.ENTER_FRAME,watchLoading);
}
}
-----------------------------------------------

本編のコンテンツの方ですが，
これは フレーム1 は 空白キーフレーム にして，
フレーム2 以降に作成します【図】↓。

これで，完成と言えば完成ですから，
「制御」→「ムービープレビュー」で動作検証です！

…と行きたいところですが，
動作検証は「ローカルPC」で行うわけですから，
ロードなど一瞬で済んでしまうので，普通にムービープレビューしてもバー「bar_mc」の伸びる様子など全く見えないと思います。
と言いますか，
もしバーの伸びる様子が見えたとするなら，それはおそらく「作成失敗」です。

そこで，
「制御」→「ムービープレビュー」したら出てくるプレビュー画面の
「表示」→「ダウンロード設定(D)」で適当な回線速度を選んで，
「表示」→「ダウンロードのシミュレート(S)」にチェックを入れ，
シミュレーションされたロード状況で動作検証をします。

当然ですが，
コンテンツに少々重い物(JPEGなど)を配置しておかないと，
バーの伸びる様子など見えませんよ。

＝＝＝ ＝＝＝ ＝＝＝

凝りだすと，いくらでも凝りが出て来てキリがなくなってしまいますが，
上で作成したものは，「純粋で素直」にプログレスバーを作成したものです。

上のように「純粋で素直」に作ったものだと，
「早い回線だと，せっかく作ったプログレスバーなど全く見えないじゃん！」
などという「不純な気持」が湧いて来る場合があります。

プログレスバー（というかロード待ち）を入れざるを得ない状況もあるので，
一概に プログレスバー に反対することはできませんが，
そもそもプログレスバーなど見せるというのが閲覧者にイライラを与える原因になります。
本来はコンテンツでも何でもない意味ナシのプログレスバーをダラダラ見せるより，
ロードに間を開けないコンテンツの作り方を工夫すべきです。
したがってもし，
「早い回線だと，せっかく作ったプログレスバーなど全く見えないじゃん！」
などという気持が生じた場合，
それは作者の自己中の「不純な気持」の現れだと思います。

しかしまあ，
そういう「不純な気持」も起こることも確かなわけで，
実際にどんな回線で見てもプログレスバーが必ず表示されるというサイトは多いです。

そういうどんな回線で見ても表示されるローディングバーを作る場合は，
気持と同じくスクリプトにも不純物をわざと混入します。

-----------------------------------------------
// このタイムラインの再生を停止
this.stop();

// 「bar_mc」の横サイズの割合を 0 にする
bar_mc.scaleX=0;

// 変数 impurities の初期化
var impurities:Number=0;

// このタイムラインにイベントリスナーを登録
// 引数(イベント.毎フレーム実行，実行関数watchLoading)
this.addEventListener(Event.ENTER_FRAME,watchLoading);

// 関数 watchLoading の定義
function watchLoading(evt:Event) {
//
// impurities に 2/100 を加算
impurities+=2/100;
//
// このタイムラインの全バイト数中のロードされたバイト数の割合を取得
var per:Number=this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal;
//
// 「bar_mc」の横サイズの割合を
// ロードされたバイト数の割合とimpuritiesを比べた小さい方の割合にする
bar_mc.scaleX=Math.min(per,impurities);
//
// もし ロードされたバイト数の割合と
// impuritiesを比べた小さい方の数 が 1 以上になれば
if (Math.min(per,impurities)>=1) {
// このタイムラインの再生を開始
this.play();
// このタイムラインに登録したイベントリスナーを削除
this.removeEventListener(Event.ENTER_FRAME,watchLoading);
}
}
-----------------------------------------------

↑これだとコンテンツが軽くても，
また，ダウンロードのシミュレート機能を使わなくても，
impurities(不純物)が足を引っぱってくれますから「bar_mc」の伸びる様子が観察できます。

上で書いた，「不純な気持」や「不純物」というのは半分冗談ですが，
まあ，プログレスバーのようなものに凝るよりコンテンツ自体を充実させた方が良いでしょうね。

補足

ありがとうございます！
スゴイです！ご丁寧にご説明ありがとうございます。
画像もあり、初心者の私でもとてもわかりやすかったです。
うまくできました。
これに、「Now Loading...」と「100％」
も付け加えるにはどのようにアクションスクリプトを
以下に加えればよろしいのでしょうか？
よろしくお願いします。

this.stop();
bar_mc.scaleX=0;
this.addEventListener(Event.ENTER_FRAME,watchLoading);
function watchLoading(evt:Event) {
var per:Number=this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal;
bar_mc.scaleX=per;
if (per>=1) {
this.play();
this.removeEventListener(Event.ENTER_FRAME,watchLoading);
}
}