今だけ人気マンガ100円レンタル特集♪

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

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

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

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

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

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

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

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

A 回答 (2件)

#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/0 …
「ムービークリップのキャッシュ」
http://livedocs.macromedia.com/flash/8_jp/main/0 …
 
    • good
    • 0

マスクにはグラデーションはかけられません。



また,文字のアルファ変化も
1文字1文字別のムービークリップに入れて,
1文字ずつのムービークリップのアルファを変化させるような面倒なことをしなければなりません。

ですから,
簡易的には次のURLのようにするのが良いと思いますよ。

フェードインする文字 FLASHRAVE - FLASH 講座 -
http://flashrave.org/anima/fade_in/index.html
    • good
    • 0

この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ベストアンサー

Flash 8(Professional 8 でも Basic 8 でも)以上をお持ちですと,
グラデーションマスクはかけられます。

マスクをかけるものも,マスクをかけられるものもムービークリップにして,
その両方とものビットマップキャッシュを有効にます。
  → MovieClip.cacheAsBitmap = true;
そして,マスクをかけるのです。
  → MovieClip.setMask();
マスクを透明から不透明のグラデーションにしておけば,
グラデーションマスクがかかります。

仮に階層がつぎのようなものであった場合,
 _root
  ├ mask_mc (マスクになるグラデーションMC)
  ├ gazou_mc(マスクをかけるMC)
  └ 背景

_root のフレームに次のように書きます。

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


この方法を説明したサイトが Adobe Flash では見つからないのですよ。
Suzuka でよろしければ,図的に説明したり,サンプルファイル(といっても FLAファイル ではなくSuzuka用CSFファイル)があるページなら知ってます。

Suzuka 基礎・基本 マスク・グラデーションマスク
http://suzupara.iinaa.net/kiso111.html

このページの後半分くらいがグラデーションマスクの説明です。



Flash 8 以上を持っていない場合,もしくは Flash Player 8 以上の SWFをパブリッシュしたくない場合は,
(そして Suzukaも使わない場合は),
次のページが参考になるかもしれません。

画像ロールイン・ロールアウト
http://oshiete1.goo.ne.jp/qa2580226.html
 ↑教えて!goo ↓OKWave (同じです)
http://okwave.jp/qa2580226.html

Flash 8(Professional 8 でも Basic 8 でも)以上をお持ちですと,
グラデーションマスクはかけられます。

マスクをかけるものも,マスクをかけられるものもムービークリップにして,
その両方とものビットマップキャッシュを有効にます。
  → MovieClip.cacheAsBitmap = true;
そして,マスクをかけるのです。
  → MovieClip.setMask();
マスクを透明から不透明のグラデーションにしておけば,
グラデーションマスクがかかります。

仮に階層がつぎのようなものであった場合,
 _root
  ...続きを読む

Qムービークリップの基準点を途中で変更することは

ムービークリップに変換してそのときに始めは基準点を左上にしていたのですが、途中、真ん中に変更しないといけない事になってしまいました。
それでどこを探しても基準点を変更するところが見当たりません。
どうすれば変更する事ができるのでしょうか?
もしかして始めから作り直さないといけないのでしょうか?
よろしくお願いいたします。

Aベストアンサー

簡単にできますよ。
基本は下記URLのような感じで,
「シンボルの編集」→「図形の中心を基準点に持ってくるように移動」でしょうね。
ドラッグすると,確かにどんな位置にも変更できます。

「インスタンスの基準点」
http://homepage3.nifty.com/ginga-b/MX/inst_refpoint.html
 > インスタンスの基準点を変更したい場合は、
 > そのインスタンスをダブルクリックし、シンボル編集画面で編集します。
 > シンボル編集画面に表示される十字が基準点です。
 > 図形を選択・移動して、基準点との位置関係を変更します。

Flashドキュメンテーション
「シンボルの編集」
http://livedocs.macromedia.com/flash/8_jp/main/00000444.html
 > 3.基準点を変更するには、ステージ上でシンボルをドラッグします。
 > シンボルの基準点は十字カーソルで示されます。


でも,そのドラッグというのが原始的でしたら,
「シンボルの編集」でシンボル編集画面に移って,
シンボル内の絵や画像全てを選択し,
「ウィンドウ」→「整列」 にチェックを入れて(入っていればそのまま)で「整列パネル」を表示させて,
( http://flash.webkun.org/02.html 一番下の図が整列パネル)
一番右の「ステージを基準」を押した状態にして,
左の上の 「串」 みたいな「中央揃え(水平方向)ボタン」と,
「串」 が横になったみたいな「中央揃え(垂直方向)ボタン」をクリックすると,
ピッタリと絵や画像の中心に基準点が来ます。
(ピッタリと基準点を中心に絵や画像が移動します。)

簡単にできますよ。
基本は下記URLのような感じで,
「シンボルの編集」→「図形の中心を基準点に持ってくるように移動」でしょうね。
ドラッグすると,確かにどんな位置にも変更できます。

「インスタンスの基準点」
http://homepage3.nifty.com/ginga-b/MX/inst_refpoint.html
 > インスタンスの基準点を変更したい場合は、
 > そのインスタンスをダブルクリックし、シンボル編集画面で編集します。
 > シンボル編集画面に表示される十字が基準点です。
 > 図形を選択・移動して、基準点との位置...続きを読む

QFlashで、文字や絵を「ジュワー」と出すアニメーションの作り方

初心者用の本をやっと1冊読み終えたくらいのFlash初心者です。
で、まこと基本的な事で申し訳ないのですが
キャンバスに何もない状態から、文字や絵がジュワーと出てきてじょじょにはっきりしてくる。という
よくある仕掛けはどのように作ればいいのでしょうか・・・
前にSwichを使っていたときは簡単に出来たのですが
FlashMXだとさっぱりです(--;)

あと、こういう基本的なチュートリアルが載っているサイトをご存知でしたら教えてください。
他のソフトの解説ページにくらべると、
Flashの解説ページって極端に少ない気がします・・・
やっぱ皆さん、タダじゃ教えられないよ!って感じなんでしょうかね。本いっぱい出てるし。

私はもう本を買うお金も残っていないし、何より時間がありません(--;)
よろしくご教授くださいませ。

Aベストアンサー

いわゆるフェードイン(だんだん浮き出してくるようなアニメ)だと思うのですが、いかがでしょう。
フェードインは Flash の代表的なアニメーション技術であるモーショントゥイーンを使って、簡単に作れます。

モーショントゥイーンの作り方は大丈夫でしょうか?
まず、描画ツールで描いた絵(シェイプ)や文字の状態では、モーショントゥイーンはできません。「挿入」→「シンボルに変換」で、ムービークリップに変換しましょう。
モーショントゥイーンは、アニメの最初と最後のフレームを作るだけで間のコマを自動的に作成してくれる機能です。簡単な移動・拡大縮小・フェードイン/アウト(アルファのアニメ)・色が変わるアニメなどは、全てモーショントゥイーンで作れます。
フェードインの考え方は、アルファ(透明度)のアニメです。最初のフレームでアルファを0%(完全に透明)に、最後のフレームではアルファを 100 %(完全に不透明)にしてモーショントゥイーンを設定すると、その間のコマが自動的に作成され、フェードインのアニメになります。

ここでは仮に、10 フレームでフェードインしてくるアニメだとします。
フレーム1に「キーフレームの挿入」でキーフレームを作り、先ほど作ったムービークリップを配置します。ステージにある絵などをムービークリップに変換した直後は、その絵がムービークリップ(のインスタンス)になって残っていますので、これをそのまま利用しても構いません。
次に、フレーム 10 にも同様にしてキーフレームを作ります。直前のキーフレームと同じ内容のキーフレームが作成されますから、フレーム1と同じ内容のキーフレームが作られているかと思います。
タイムラインを見ると、フレーム1とフレーム 10 の間が、薄いグレーで塗りつぶされているかと思います。その部分を選択して、右クリック( Mac では control +クリック)→「モーショントゥイーンの作成」を選択してください。グレーの部分が薄い青紫に変わり、矢印が表示されるかと思います。これが、モーショントゥイーンが設定されている印です。
もし、矢印ではなく点線になっている場合は、最後のキーフレームが不明になっているということです。この状態ではモーショントゥイーンが正常に実行されません。
モーショントゥイーンは、最初と最後が同じムービークリップであることが条件となります。一見、同じムービークリップを配置しているように見えても、カットやペーストなどを繰り返したりすると、 Flash の中では、”トゥイーン開始のフレームのムービークリップと、終了のムービークリップは違うもの”と認識されることがあるようですので、ご注意ください。
話がそれましたが・・・
フレーム1がフェードインの開始フレームです。フレーム1のムービークリップを選択すると、「プロパティ」パネルに様々な情報が表示されるかと思います。
このパネルの右の方に「カラー」というリストがあります。このリストから「アルファ」を選択してください。すると、隣に「%」のボックスが表示されますので、スライダを調節するか数値を入力して、0%に設定します。
フレーム 10 では「アルファ」は 100 %に設定します。今回は最初から 100 %になっているかと思いますが、100 %になっていない場合は、同じ要領で 100 %に設定します。
簡単なトゥイーンであれば、「ムービープレビュー」でなくとも、編集画面で確認できます。「制御」メニューの「再生」で、確認してみてください。

モーショントゥイーンは、いろいろと組み合わせてアニメを作ることもできます。
今回はアルファだけを操作しましたが、例えばフレーム 10 でムービークリップを拡大したり位置を変えたりすると、フェードインしながら徐々に大きくなったり移動したりするアニメになります。
なお、Flash では、1つのレイヤーにつき1つのシンボルでしかトゥイーンを作れないようになっています。文字と絵など、2つ以上のシンボルを同時に動かしたい場合は、シンボルごとにレイヤーを分け、それぞれ個別にトゥイーンを設定します。

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

いわゆるフェードイン(だんだん浮き出してくるようなアニメ)だと思うのですが、いかがでしょう。
フェードインは Flash の代表的なアニメーション技術であるモーショントゥイーンを使って、簡単に作れます。

モーショントゥイーンの作り方は大丈夫でしょうか?
まず、描画ツールで描いた絵(シェイプ)や文字の状態では、モーショントゥイーンはできません。「挿入」→「シンボルに変換」で、ムービークリップに変換しましょう。
モーショントゥイーンは、アニメの最初と最後のフレームを作るだけで間のコ...続きを読む

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

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

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

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

Aベストアンサー

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


円グラフは半円ずつ考えます。
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();


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

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


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

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


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

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

QFlashでのマスクぼかし

Mac版のFlashMXを使用しています。使い初めで書籍を見ながら色々と試しておりますが、レイヤーマスクについての質問です。

レイヤーに黒の四角を書き、修正メニュー→シェイプ→ソフトエッジで回りをぼかし、黒四角の回りをぼかしています。一つ下のレイヤーに緑をベタ塗りにしています。上のレイヤーの黒四角を選んでマスクするのですが、回りがぼけてくれません。角丸の緑の四角ができてしまいます。私のイメージでは緑四角で回りがぼけるはずなんですが。

何か他に方法があるのでしょうか。
宜しくお願い致します。

Aベストアンサー

MXではそう簡単にはできませんよ。
そもそもマスクの方のアルファ自体が
マスクをかけるものに適用されませんから。

それが簡単にできるようになったのは Flash 8 以降です。
簡単にできると言っても,
マスクの方もマスクをかけられる方も,両方ともムービークリップで,
なおかつ setMask というActionScript でマスクをかけることは必須ですが。

MXだと次のようにすると一応できますが。

黒四角にかけるソフトエッジのステップ数を5にしたとします。
そして全てのソフトエッジでできた角丸の塗りを,
別レイヤーで元と同じに座標に配置します。
そしてその別レイヤーに配置した塗りで,
複数の同じ緑四角にマスクをかければ一応はできます。

ステップ5で ■ にソフトエッジをかけた状態↓。

  回回回回回回回回回回
 回田田田田田田田田田田回
 回田困困困困困困困困田回
 回田困圏圏圏圏圏圏困田回
 回田困圏■■■■圏困田回
 回田困圏■■■■圏困田回
 回田困圏■■■■圏困田回
 回田困圏圏圏圏圏圏困田回
 回田困困困困困困困困田回
 回田田田田田田田田田田回
  回回回回回回回回回回

全てのソフトエッジでできた塗りを別レイヤーに配置して,
複数のアルファを変えた緑四角にマスクをかけた状態の
横から見たイメージ図↓。

        ↓マスク(元の黒四角)
      ■■■■   
 □□□□□□□□□□□□←緑四角(MC)アルファ100
     圏      圏←マスク
 □□□□□□□□□□□□←緑四角(MC)アルファ80
    困        困←マスク
 □□□□□□□□□□□□←緑四角(MC)アルファ60
   田          田←マスク
 □□□□□□□□□□□□←緑四角(MC)アルファ40
  回            回 ←マスク
 □□□□□□□□□□□□←緑四角(MC)アルファ20


~・~・~・~・~・~・~・~・~・~・~・~・~

以下は補足ですが,
何を補足するのかだいたいはおわかりになると思います。

Flash は バージョン8 において超飛躍的に画像処理系が進化しました。
FlashMX正式ライセンスをお持ちだと,
今なら2万数千円で Flash CS3 Professional にアップグレードできます。

Adobe - Adobe Flash CS3 アップグレード対象製品
http://store.adobe.com/store/jp/popup/software/flash/upgrade_eligibility.html

Flash MX の1つ前のバージョン Flash 5 は,もうアップグレードの対象となっていません。
MX で四苦八苦するよりは,Flash 8 以上の購入やアップグレードの検討をお薦めします。
この件に限らず,
ブラーフィルター(私の名の由来)やドロップシャドウやグローなどフィルター系の表現や,
画像どうしの加算や乗算などのブレンド表現などなどなど,
ものすごくデザイン的な表現力がアップしました。
遊んでいるだけで楽しいです。

一応,ご質問の件を Flash 8 でする場合の参考 URL を書いておきます。

にゃあプロジェクト - ウェブログ - グラデーション・マスク
http://www.project-nya.jp/modules/weblog/details.php?blog_id=462

setMask()で透過値が有効なマスク処理
http://wasavi-design.com/tips/files/2007/04/000178.html


また,この程度のことであれば,
最近はフリーソフトでも楽々でできてしまいます。
(このソフトはWindows版しかありませんが。)

Suzuka & ParaDraw 講座/マスク・グラデーションマスク
http://suzupara.iinaa.net/kiso111.html

というような感じで機能的にはフリーソフトにすでに抜かれている状態です。

SWFファイルの信頼性などから考えると,
Flash MX よりフリーソフトの方が良いとは言えませんが,
すでにこのような状態ですし,またアップグレード対象最低バージョンですから,
アップグレードされた方が良いのでは?
と思います。

MXではそう簡単にはできませんよ。
そもそもマスクの方のアルファ自体が
マスクをかけるものに適用されませんから。

それが簡単にできるようになったのは Flash 8 以降です。
簡単にできると言っても,
マスクの方もマスクをかけられる方も,両方ともムービークリップで,
なおかつ setMask というActionScript でマスクをかけることは必須ですが。

MXだと次のようにすると一応できますが。

黒四角にかけるソフトエッジのステップ数を5にしたとします。
そして全てのソフトエッジでできた角丸の塗...続きを読む

Qsuzukaでマスクにpngが使えない

FLASH作成ソフトのsuzukaでアニメーションを作っています。

透過済みのpng画像の上にマスクでベクタ画像を表示したいのですが、
png画像にマスクをしても、ベクタ画像がpng画像の形にならず
失敗してしまいます。
透過していてもpng画像はマスクに使えないのでしょうか?

Aベストアンサー

Flash のマスクは本来 「ベクタ画像の"形"」 でかけるものですから
できないのが普通ですし、PNGをマスクにする必要性が特に(あまり)見つからないので、
今までやってみたことはありませんでしたが...
しかし、
このご質問を見て実際にやってみましたら、透過(またはアルファ入り)PNGもマスクにできることがわかりました。

ただし条件付きです。

まず、
Suzuka の 「ファイル」→「プロジェクトのプロパティ」で
「SWFバージョン」の項目を 「SWF8」 にする必要があります。
(少なくとも携帯用 SWF4 では無理ということになります。)

そして、
レイヤーのマスク機能でマスクをかけるのではなくて、
ActionScript でマスクをかける必要があります。

さらに、
「マスクになるPNG」も「マスクをかけられる画像」も、
両方ともスプライト(ムービークリップ)の中に入れておく必要があります。



「シンボルリスト」内にスプライトを 2つ 追加して、
1つの スプライト 内の編集に入り、
そのスプライト内のレイヤーに、マスクになる PNG を追加します。
もう 1つの スプライト 内の編集に入り、
そのスプライト内のレイヤーに、マスクをかける画像を追加します。

その 「PNG入りスプライト」 と 「マスクをかけられる画像入りスプライト」 を
メインのレイヤーに追加します。

「PNG入りスプライト」 を配置したレイヤー名の部分をダブルクリックするなどして
「レイヤーのプロパティ」 パネルで任意の インスタンス名 を付けます。
ここでは 「png_mc」 という インスタンス名 を付けることにしておきます。

また、
「マスクをかけられる画像入りスプライト」 を配置したレイヤー名の部分もダブルクリックするなどして
「レイヤーのプロパティ」 パネルで任意の インスタンス名 を付けます。
ここでは 「my_mc」 という インスタンス名 を付けることにしておきます。

メインのタイムラインの一番上のレイヤー名を右クリックするなどして
「アクションレイヤーを挿入」 します。

そのアクションレイヤーのキーフレームを選択して、
キャンバス右側のパネルにある右下の「スクリプトを編集」ボタンをクリックし、
出てくる「スクリプトエディタ」パネルに次のように書きます。

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

そして、
「ウィンドウ」→「プレビュー」などをすればマスクがかかっているのが確認できると思います。

以上の操作を1枚の画像にまとめたのが 【下の図】↓ です。

「透過していない部分」か「透過している部分」かの違いで、
「マスクになる部分」か「マスクにならない部分」が別れるのがわかると思います。

またそれに加えて 「アルファ」 のマスクもかかっているのがわかると思います。

 (マスクは結局 "形" になるだけですから
 マスクになるPNGの絵柄に凝っても意味がないのですが、
 「Air Chrysalis (空気さなぎ)」 でも描いてみました。
 (「Air Cocoon」 と訳すべきだったのだろうか???)
 何でも良いですが、時のものを描いてみたただけのことで
 絵柄に特に深い意味はありません。)



PNG を使った説明ではありませんが、
上に書いたことの大半は次↓のページに書いてあることです。
上に書いたスクリプトも、
次のページで書いてあるスクリプトをほぼそのまま使用しています。

「マスク・グラデーションマスク」
http://suzupara.iinaa.net/kiso111.html

Flash のマスクは本来 「ベクタ画像の"形"」 でかけるものですから
できないのが普通ですし、PNGをマスクにする必要性が特に(あまり)見つからないので、
今までやってみたことはありませんでしたが...
しかし、
このご質問を見て実際にやってみましたら、透過(またはアルファ入り)PNGもマスクにできることがわかりました。

ただし条件付きです。

まず、
Suzuka の 「ファイル」→「プロジェクトのプロパティ」で
「SWFバージョン」の項目を 「SWF8」 にする必要があります。
(少なくとも携帯用 SWF4...続きを読む


人気Q&Aランキング