円グラフのようなローダーを・・・

質問

初心者故に、分かりづらい点や無作法があるかと思います。
分かりづらい点に関しては加えて解説をしたいと思います。

円グラフのようなローダーを作りたく、シェイプトゥイーン等を使って見たのですが、一向に出来ません。
５０コマ目に半円、１００コマ目に円を置いて、シェイプトゥイーンをするのにはやはり無理がありすぎるのでしょうか。

作り方や参考サイトをご存知の方がいらっしゃいましたら、教えて頂けるとありがたいです。
棒グラフタイプのローダーで１００％になると再生開始、というのは作れますので、円グラフのシェイプに関しての疑問ということでお願いします。

回答No.2

DPE · ベストアンサー

マスクとモーショントゥイーンを使ってみてはいかがでしょうか。

円グラフは半円ずつ考えます。
１つの円を半分に切り、右半円と左半円をそれぞれシンボルに変換します。

この２枚を中央で合わせて配置するわけですが、左半円をマスク画像、右半円をマスクの対象とします。
Flash のマスクは、マスク画像と重なっている部分だけが表示される仕組みです。
左半円と右半円が中央で向かい合わせになっている時、左半円は右半円と全く重なっていませんから、マスク対象である右半円はどの部分も表示されません。
これはつまり、グラフでいうと 0 ％の状態です。

マスク画像である左半円を、中心線の中央部分（円の中心にあたるところ）を軸にして 180°、50 フレームのモーショントゥイーンで回転させます。
すると、１フレームにつき 3.6°ずつ傾いて徐々に右半円と重なる部分が増えていくので、右半円と重なった部分が扇形に開いていくように見えます。
トゥイーン終了時には、右半円と左半円が完全に重なります。
右半円が全て表示される状態で、グラフでいうと 50 ％にあたります。

51 ％以上を表す左側も同様に考えます。
ただし、51 ％以上の場合は右半分が常に表示されていなければなりません。
そこで、先の右半円と左半円とは別のレイヤーを用意して、先のレイヤーで右半円を常に表示しながら左半円のアニメを作ります。

考え方は同じなのですが、今度は右半円がマスク画像、左半円がマスク対象となります。
51 ％からスタートしますから、トゥイーンの最初のフレームではマスクを予め 3.6°傾けておきます。

このようなアニメを、100 フレーム・・・まあ、0 ％の状態を入れて 101 フレームのムービークリップとして作っておきます。
あとは gotoAndStop( 完了率 + 1 )で、パーセントに応じたグラフを表示することができます。

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

文章だけですと説明が難しいのですが。

まず、「挿入」→「新規シンボル」でムービークリップを１つ作ります。
このシンボルが実際の円グラフになります。

シンボルの編集画面になったら、「楕円」ツールで円を描きます。
Flash の描画ツールでは、上に何か図形を描くと、その図形によりもとの絵が分断されます。
この点を利用すると、簡単に半円２つにすることができます。円の上に直線を描き、半円２つに分割してください。

分割した半円を、それぞれシンボルに変換します。
種類はムービークリップかグラフィックのどちらでも構いません。
ここではとりあえず、ムービークリップに変換したとします。
それぞれのシンボルを”右半円”と”左半円”とします。

変換する時に、シンボルの基準点をどこに置くかを設定します。
基準点は、２つを貼り合わせて円にした時に、円の中心になる位置にします。
つまり、”右半円”シンボルは左端の中央、”左半円”シンボルは右端の中央です。

***************************

この２つを、マスクを使って必要な部分だけを表示するようにモーショントゥイーンを作ります。

”円グラフ”シンボルの中にレイヤーを３つ追加して、合計４つにしてください。
次のような構成にします。（重ね順も、上からこの通りです）

　・マスク・右：　右半円を表示するためのマスク。”左半円”のシンボルを配置します。
　　・右半円　：　グラフの右側を実際に表示するための、”右半円”のシンボルを配置します。

　・マスク・左：　左半円を表示するためのマスク。”右半円”のシンボルを配置します。
　　・左半円　：　グラフの左側を実際に表示するための、”左半円”のシンボルを配置します。

各レイヤーのフレームの構成は次の通りです。

　・「マスク・右」レイヤー
　　　フレーム１～ 51 まで、”左半円”のシンボルを 180°回転させるモーショントゥイーン。
　　　フレーム 52 以降は、トゥイーン終了時の絵をフレーム 101 までそのまま表示。

　・「右半円」レイヤー
　　　フレーム１～ 101 まで、”右半円”のシンボルを常に表示。

↑ここまでで、0 ～ 50 ％まで表示できる円グラフになります。
フレーム 52 からは別のレイヤーに左半円のアニメを用意して、51 ％以上も表示できるようにします。

　・「マスク・左」レイヤー
　　　フレーム１～ 51 は空白。
　　　フレーム 52 ～ 101 まで、”右半円”シンボルを 3.6 °から 180°まで回転させるモーショントゥイーン。

　・「左半円」レイヤー
　　　フレーム１～ 51 は空白、フレーム 52 ～ 101 まで”左半円”シンボルを常に表示。

「マスク・右」と「マスク・左」レイヤーを、マスクレイヤーにします。
レイヤーの名前が表示されている部分で右クリック（ Mac では control ＋クリック）してメニューを出し、”マスク”を選択してください。
それぞれ、自分のすぐ下の「右半円」と「左半円」レイヤーをマスクの対象になるように設定してください。

***************************

モーショントゥイーンで変形させる時は、変形の中心になる点の場所が大切です。
オブジェクト内に表示される○印の位置が、トゥイーンの際の中心点になります。
○印は、「自由変形」ツールを選択している時に○印をドラッグすると移動できます。

今回は、常に円の中心を基準にトゥイーンが実行されるように決めます。
左半円のマスクは右端・中央に、右半円のマスクは左端・中央に○印を置いてください。
シンボルに変換する際の基準点をこの位置に指定したのであれば、○印をダブルクリックすると自動的にこの点に移動します。

左側（ 51 ～ 100 ％）を表示する部分のモーショントゥイーン（「マスク・左」レイヤーのトゥイーン）は、”右半円”シンボルを 3.6 °傾けた状態からスタートさせます。
フレーム 51 で既に 50 ％の状態を表示できるようになっているので、シンボルの角度を 0 °からスタートさせると 50 ％の状態が２フレーム続いてしまいます。
これを避けるために、3.6 °傾いた状態からアニメを作ります。
「変形」パネルで回転角度を入力すると簡単です。

以上で円グラフのシンボルは完成です。
次は、完了率を算出して実際に表示するためのスクリプトを書きます。

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

円グラフのシンボルをステージに配置して、インスタンス名を付けてください。
ここでは仮に” prog_graph ”と付けたとします。

アニメは 0 ％の状態から始まっていますが、ムービークリップのフレームは１から始まりますので、完了率に１を加算して表示を切り替えます。

お使いの Flash のバージョンが書かれていませんが、とりあえず Flash MX 以降として話を進めます。
読み込み完了率を算出し、円グラフで表示するスクリプトは次のようになります。
このスクリプトは、メインのタイムラインのフレーム１に設定してください。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

　_root.onEnterFrame = function()
　{
　　var loaded , total , per;

　　//完了率を算出
　　loaded = _root.getBytesLoaded();
　　total = _root.getBytesTotal();
　　per = Math.floor( loaded / total * 100 );

　　//完了率に該当する円グラフのフレームを表示
　　prog_graph.gotoAndStop( per + 1 );

　　//100％完了したら先に進んで終了
　　if( per >= 100 )
　　{
　　　gotoAndPlay( 2 );
　　　delete _root.onEnterFrame;
　　}
　};

　stop();

「ムービープレビュー」で「表示」メニュー→「ダウンロードのシミュレート」にチェックを入れて、動作を確認してみてください。

完了率を実際に表示するスクリプトを書かずに”円グラフ”のムービークリップだけを配置してプレビューしてみると、円グラフが増えていく動きを確認することができます。
グラフの増え方が上手くいかない場合は、トゥイーンの際の中心点の位置がズレていないか・マスクやトゥイーンの設定がきちんとできているかなどの点をチェックしてみてください。

長くなってすみませんでした。
不明な点がありましたら、補足してください。

お礼

ご丁寧な解説をありがとうございました。
参考に作り変えた結果、無事に表示が出来ました。
本当に行き詰っていたので、大変助かりました。
本当にありがとうございました。

回答No.1

noname#35109

普通は，
シェイプトゥイーンでするのではなくて，
角度の小さい扇を描いて，それを複製します。

ローディングなどとは全く関係ない話が主体ですが，
円グラフを作成する部分だけは，
このご質問に関連しています↓。

～ 本家 Adobe より ～
「XML を利用したインタラクティブな円グラフの作成」
http://www.adobe.com/jp/devnet/flash/articles/ad-mix.html

上記ページから ２ページ後 に，
http://www.adobe.com/jp/devnet/flash/articles/ad-mix02.html
> 円を3.6度分切り出した扇形のグラフィックを用意します。
> このムービークリップは、回転させながら複製するので、
> 基準点が円の中心部分になるように作成します。

と書いてありますね。
こんな感じで細い扇を描いて複製すれば，
円グラフが描けます。

１度の扇を描いてムービークリップに変換して，
そのムービークリップをさらにムービークリップの中に入れて，
360フレームでだんだん扇ができるようにして，
そのムービークリップのタイムラインをローディングのパーセンテージで進めるようにしてもかまいませんよ。

しかし，かなり面倒ですし，
複製は手動より ActionScript の方が，簡単で綺麗（綺麗な角度と位置）に複製できます。
また，
細い扇など描くのも面倒くさいですから，
扇の作図や，ローディングの割合によって，
その細い扇を複製するのまで，
全て ActionScript でするようにしたものを作ってみました。

それが，次の ActionScript です。

_root の フレーム1 に書いて（コピペして） くださると，
そのまま使えると思います。

-----------------------------------------------
// とりあえずストップ
stop();
//
// 扇の中心の x座標（※可変(一応真ん中)）
var o_x = Stage.width/2;
// 扇の中心の y座標（※可変(一応真ん中)）
var o_y = Stage.height/2;
// 扇の半径を設定（※可変）
var o_l = 100;
// 始まる角度の指定(上から)
var o_r = 90;
//
// ---扇を作成------
// 空のMC「ougi」を 深度1 に作成
_root.createEmptyMovieClip("ougi", 1);
_root.ougi._x = o_x;
_root.ougi._y = o_y;
_root.ougi._rotation = o_r;
//
// 空のMC「tri」を 「ougi」 の深度0 に作成
_root.ougi.createEmptyMovieClip("tri", 0);
with (_root.ougi.tri) {
// 青色の塗り(※可変)
beginFill(0x0000ff, 100);
lineStyle(1, 0x0000ff, 0);
moveTo(0, 0);
lineTo(-o_l, 0);
lineTo(-o_l*Math.cos(Math.PI/180), o_l*Math.sin(Math.PI/180));
endFill();
}
//
// ローダー
// １フレーム進む時間ごとに毎回実行
_root.ougi.onEnterFrame = function() {
// ロードされた割合を計算
var ratio = _root.getBytesLoaded()/_root.getBytesTotal();
var deg = Math.round(ratio*360);
// tri0 ～ tri(deg2) までを 複製＆回転
for (var i = 1; i<=deg; i++) {
_root.ougi.tri.duplicateMovieClip("tri"+i, i);
_root.ougi["tri"+i]._rotation = i;
}
// もし100％ロードされたら
if (ratio>=1) {
// MC「ougi」を削除
_root.ougi.removeMovieClip();
// 再生開始（※可変）
_root.play();
// onEnterFrame を削除
delete _root.ougi.onEnterFrame;
}
};
-----------------------------------------------

上記スクリプトでは，
ロード完了次第，フレーム2に行くようになっていますが，

　// 再生開始（※可変）
　_root.play();

この辺は変えてください。

お礼

ASで全て描画してしまうという手段があったんですね！
解決手段から解決方法までお教えいただき、本当にありがとうございました。
こちらの方法も成功いたしましたので、場合と状況により使い分けをしていきたいと思います。