AIと戦って、あなたの人生のリスク診断 >>

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

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




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

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

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


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

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


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

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

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


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

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


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

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

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

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


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

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

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


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


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

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


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


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

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


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

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

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

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


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


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

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

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

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


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

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


 _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();


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

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


長くなってすみませんでした。
不明な点がありましたら、補足してください。
    • good
    • 0
この回答へのお礼

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

お礼日時:2007/03/25 21:56

普通は,


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

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

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

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

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


1度の扇を描いてムービークリップに変換して,
そのムービークリップをさらにムービークリップの中に入れて,
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();
}
//
// ローダー
// 1フレーム進む時間ごとに毎回実行
_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();

この辺は変えてください。
    • good
    • 0
この回答へのお礼

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

お礼日時:2007/03/25 22:08

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qグラデーションマスクのかけ方がうまくいきません。

こんばんわ、FLASH上であるMCにグラデーションマスクを適用して徐々に消えていくMCを作ろうと思い、元MCの上のレイヤーにマスク用のグラフィックを置いてマスクを適用しましたが、うまくいきません。
どううまくいかないかというと、マスクは適用されているのにグラデーションが適用されてない、、です。
グラデーションははじめフォトショップで作成してPNG-24で書き出しステージに配置してのですが、無理でした。
それで苦手なのですが、FLASH上でグラデーションを作成し適用したのですが、うまくいきませんでした。
何が原因でしょうか?
もしお分かりになる方がおられましたらよろしくお願いいたします。

Aベストアンサー

おそらく、ムービークリップにグラデーションのかかった半透明効果を適用するといった、半透明マスクのことだと思います。

残念ながら、Flash のマスクレイヤーと MovieClip クラスの setMask メソッドで作るマスクに半透明マスク機能はありません。
マスク画像の色とアルファ情報はマスク処理の際に全て無視され、”マスク画像と重なっている部分だけを表示する”という単純なマスクとして機能します。


BitmapData クラスの copyChannel か copyPixels メソッドを利用すると、半透明マスクと似たようなことができます。
copyChannel を使う場合は、透過(アルファチャンネル)ありの BitmapData オブジェクトを2つ用意し、1つには画像、1つにはマスク画像を描画します。
マスク画像のアルファチャンネル( copyChannel メソッドの引数では 8 )をマスク対象のアルファチャンネルにコピーして表示すると、半透明マスクと同様の効果になります。

ちなみに、Flash で描画した画像だけでなく、アルファ情報を持っている PNG や透過 GIF を BitmapData オブジェクトに絵を取り込んで半透明マスクとして使うこともできます。
loadBitmap メソッドを使うと、リンケージを設定したシンボルをライブラリから直接 BitmapData オブジェクトに取り込めます。

BitmapData クラスはいろいろなことができて面白いのですが、大量のメモリを消費します。
用が済んだら dispose メソッドで使ったメモリを解放してください。


背景が単色の場合は、背景と同じ色でアルファだけのグラデーションを作って対象に重ねておいても、半透明マスクのような雰囲気が出ます。
汎用性はありませんけれど、こんなものでごまかす方法もあるということで、ご参考までに。

おそらく、ムービークリップにグラデーションのかかった半透明効果を適用するといった、半透明マスクのことだと思います。

残念ながら、Flash のマスクレイヤーと MovieClip クラスの setMask メソッドで作るマスクに半透明マスク機能はありません。
マスク画像の色とアルファ情報はマスク処理の際に全て無視され、”マスク画像と重なっている部分だけを表示する”という単純なマスクとして機能します。


BitmapData クラスの copyChannel か copyPixels メソッドを利用すると、半透明マスクと似たようなこ...続きを読む

Qマスクにグラデーションをかけるには???

あるテキストにマスクの処理を施している最中なのですが、

テキストが中心からだんだん端のほうの文までグラデーションをかけながら表示させるにはどうしたらいいんでしょうか?

中心から端にかけて浮き上がってくるみたいな感じです。

すでに表示されている部分は色は変わらず、

表示される端のほうが背景と透明化(?)しているみたいな感じです。

ただ単にテキストが中心から端のほうまで表示されるのはきれいじゃなかったです。

これはどうやったらいいんでしょうか><

Aベストアンサー

#1 です。

Flash 8 以上では,#1の方法以外に別の方法があることに最近気づきました。
ご使用の Flash のバージョンを書かれていませんが,
Flash 8 (Basic 8 でもOK)以上に限定すると,
グラデーションマスクを簡単にかけることができます。

 ---用意するもの----------------------
 ・マスク用グラデーション塗り入りムービークリップ
 ・テキスト入りムービークリップ
 ・背景(JPEG でも シェイプ画でも何でも可)
 -----------------------------------


◎マスク用グラデーション塗り入りムービークリップの作成

まず,ステージ上に,
黒アルファ100%→黒アルファ100%→黒アルファ0%
の横に細長い長方形のグラデーション塗りを描きます。

 ↓アルファ100    ↓アルファ100    ↓アルファ0
 ■■■■■■■■■回■回回□回□□
 ■■■■■■■■■回■回回□回□□
             | グラデーション

次に,
横に細長い長方形のグラデーション塗りを選択して,
ムービークリップに変換し,インスタンス名を付けます。
この説明では,
「myMask」 というインスタンス名を付けたとしておきます。



◎テキスト入りムービークリップの作成

上で作った 「myMask」 の下に新しいレイヤーを追加して,
そのレイヤーのステージ上に何かテキストを書きます。
例えば『あおうえお』を書きます。
その『あおうえお』を選択してムービークリップに変換し,
そのムービークリップにインスタンス名を付けます。
この説明では,
「myText」 というインスタンス名を付けたとしておきます。



◎背景の用意

上で作った「myText」 の下に新しいレイヤーを追加して,
そのレイヤーのステージ上に何か背景を置くか描くかします。



◎スクリプト

上で作った 「myMask」 の "上" に新しいレイヤーを追加して,
そのレイヤーのフレームにスクリプトを書きます。

 □ レイヤー 筆・・|○| ←スクリプト
 □ レイヤー 筆・・|●| ←「myMask」
 □ レイヤー 筆・・|●| ←「myText」
 □ レイヤー 筆・・|●| ←背景


フレーム の スクリプト

---------------------------------------
// 「myMask」のビットマップキャッシュを有効にする
myMask.cacheAsBitmap = true;
// 「myText」のビットマップキャッシュを有効にする
myText.cacheAsBitmap = true;
// 「myText」 に 「myMask」 のマスクをかける
myText.setMask(myMask);
---------------------------------------



後は,
マスク 「myMask」を「myText」の上でモーショントゥイーンさせてもらえばOKです。

 □ レイヤー 筆・・|○       []| ←スクリプト
 □ レイヤー 筆・・|●>---->[]|●| ←「myMask」
 □ レイヤー 筆・・|●/////////[]| ←「myText」
 □ レイヤー 筆・・|●/////////[]| ←背景


※上記スクリプトのように
  マスク側も,マスクをかけられる側も,
  ビットマップキャッシュを有効にする必要があります。

※レイヤーの設定でマスクをかけることはできません。
  必ず setMask でマスクをかけるようにします。

※上のようにして作成したものは,
  Flash Player 8 以上のみで正常に動作します。

※Flash Playar 7 と 6 のバージョンでは,
  グラデーションがかからないのは当然のこと,
  マスク自体の効果もなくなります。
  (文字はずっと表示されっぱなしになります)

※Flash Playar 5 以下のバージョンでは,
  グラデーションがかからないのは当然のこと,
  マスクも文字も全く表示されなくなります。

※Flash Player 8 以上は,
  Windows 95 以下,MacOS9.x 以下には,
  インストールすることができません。



Flashドキュメンテーション
「アルファチャンネルマスクについて」
http://livedocs.macromedia.com/flash/8_jp/main/00001410.html
「ムービークリップのキャッシュ」
http://livedocs.macromedia.com/flash/8_jp/main/00001406.html
 

#1 です。

Flash 8 以上では,#1の方法以外に別の方法があることに最近気づきました。
ご使用の Flash のバージョンを書かれていませんが,
Flash 8 (Basic 8 でもOK)以上に限定すると,
グラデーションマスクを簡単にかけることができます。

 ---用意するもの----------------------
 ・マスク用グラデーション塗り入りムービークリップ
 ・テキスト入りムービークリップ
 ・背景(JPEG でも シェイプ画でも何でも可)
 -----------------------------------


◎マスク用グラデーショ...続きを読む


人気Q&Aランキング