マスクの形を自由自在に変えたい

質問

Flash8を使っています。
質問のタイトルが的を得ているかどうかは自信ありませんが、以下のようなことをしようと思っています。

一番下のレイヤーには絵が描いてあります。
その上のレイヤーには、円形のマスクがあります。ですから、絵は円の上しか見えていない状態です。

このマスクなのですが、0度から360度まで自由自在に形を変えたいのです。
まだ考えは十分に煮詰まっていないのですが、３枚目のレイヤーに０度の辺を表示し、マスクはその後ろに隠れるようなもの（例えば0.5度の扇形）にしてあらかじめ配置しておき、４枚目のレイヤーには０度の辺上のつまみ（のようなもの）を作っておき、それをドラッグすると、つまみの座標を利用して、必要な数だけマスクを複製するとできる・・・？などと考えております。角度は１度単位の表示です。

もしかするととってもチンプンカンプンのことを言っているかもしれませんが、何か別の方法でも出来そうであれば、是非教えてください。

何卒宜しくお願い致します。

回答No.4

noname#35109 · ベストアンサー

？？？

＃１＆２＆３ です。

>> マウスポインタを近づけると指の形に変わり
>> 「このコントロールをアクティブ化して使用するには
>> クリックしてください」というメッセージが出てきます。

あの…
それは全く別問題です。
今年の４月ごろの Windows XP SP2 の更新による，
IE6（インターネットエクスプローラ6）のアップグレード更新によるもので，
妙なアップデートをされたからそうなるだけです。
IE の問題でとりあえずその話は置いておきましょう。

だいたい，パブリッシュされた HTML をブラウザで開かれていらっしゃるのですか？
最終的にはそうしますけど，作成段階ではいちいちそんなてまなことは普通しません。

Flash ツールバー の「制御」→「ムービープレビュー」で確かめながら作成するものです。
＃１のスクリプトに

// ↓補正値の確確認（不要）
//trace(deg2);

という本当は不要な行をわざと書いていますが，
本来

// ↓補正値の確確認（不要）
trace(deg2);

このようにして，「//」を取って，
変数 deg2 にどういう値が入っているのかを見るために書いているのです。
trace();
が実行されるのは，「ムービープレビュー」のときだけです。
そうやって，
実際に変数にどういう値が実際に代入されているのかを見ながら，作成していくのです。

そういう前提で，次に進みます。

> その通りしてみても何の変化もありません。
> スクリプトはコピペして使わせていただいてお
> りますので何の問題もないかと思うのですが・・・。(/_;)

新規ドキュメントを作成して，
丸い塗りを書いてください。

そして，その丸い塗りを「ムービークリップ」にしてください。
そして，その丸い塗りのムービークリップを選択した状態で，
下のプロパティインスペクタで，

controller というインスタンス名を付けてください。

プロパティインスペクタの左の方

　歯車　　[ムービークリップ　　 ｖ]
　　　　　　[ 　<インスタンス名>　]

となっている部分ですよ。
そこを，

　歯車　　[ムービークリップ　　 ｖ]
　　　　　　[controller　　　　　　]

にするのです。
そして，レイヤーを追加して
１フレーム２レイヤーにして新しくできたフレームに

--------------------------------
_root.controller.onRelease = function() {
trace("やあ，こんにちは！");
};
--------------------------------

そして，「制御」→「ムービープレビュー」で，
そのその丸い塗りのムービークリップであるインスタンス名controllerにカーソルを持っていってください。
そして，クリックすると，

　やあ，こんにちは！

が「出力」パネルに出力されるはずです。

そういうように trace(); は使う物で，
うえのように新規ドキュメントから実験してみても，

カーソルが指に代わらない場合，または

　やあ，こんにちは！

trece されない場合は，根本的に何かが間違っているのです。
場合によっては，Flash 8 再インストールの必要もあるかもしれません。

うえのようにして，

　やあ，こんにちは！

が trece されたのでしたら，
新規ドキュメントで作成したこファイルではなく，
もとの＃１を参考に作ったファイルの作り方が根本的におかしいということになります。

それ以上は何とも言えません。

お礼

何回見直しても、間違っているところが分からなかったのですが、新規ドキュメントを作成して、ムービークリップだけ流用したらできました。
どうしてなのか全く分かりませんが、とにかく出来たので助かりました。
何度も回答をいただきありがとうございました。

回答No.3

noname#35109

＃１＆２です

>> 最初はContorollerを右側水平位置にしているからかな？
>> と思ったのですが、垂直上側にしてもやはり動きません。

ええ，＃１のスクリプトをそのまま使う場合は，
書いている通り，

　●　 ←つまみになる部分
　｜　 ┐
　｜　 │
　｜　 ├最初0度のときの基準の線になる
　｜　 │
　｜　 ┘

のように縦につくらないとうまく動きません。

>> 垂直上側にしてもやはり動きません。

垂直上側にする（置く）のではなくて，
作る段階での話です。
待ち針のつまみの部分を，垂直上側に置いた状態で描いて
その状態でムービークリップシンボルに変換するのです。
そのときの状態が，
_root.controller._rotation = 0
の状態です。

＃１の作り方例では，
縦向きの例を書いたわけで，どんな向きでも実際は良いのですか，
その場合はまたスクリプトが変わります。

また＃１では時計回りに回したとき，
扇が広がるようにしてあります。
反時計回りに回したときに扇が広がって欲しい場合は，またスクリプトが変わります。

とにかく，
つまみを回すと言っても，どの状態からどちら向きに回すかの組み合わせを考えると，
たくさんの場合が出てきますから，いちいちは書けません。
ですから，取りあえずは今現在のものを正常に動かせる状態に持っていって，
そこから，色々な場合について考えるか，
もしくは，
どういう場合どうしたいのかということをはっきりさせて，
補足していただくしかでしょうね。
あまり複雑なこと補足で書かれてもわたしも途中で挫折するとは思いますが。

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

確認事項ですが，
「controller」のつまみの部分にマウスを持っていったとき，
指マークのカーソルに変わりますか？
変われば，少なくとも，

// controller にマウスダウンで flg (フラグ)を 1 にする
_root.controller.onPress = function() {
_root.flg = 1;
};
// controller からマウスアップで flg を 0 にする
_root.controller.onRelease = function() {
_root.flg = 0;
};
_root.controller.onReleaseOutside = function() {
_root.flg = 0;
};

ここまでは実行されていることになります。
指マークに変わるか変わらないかは，作図する向きとは関係がありません。
どんな向きに作っても，面の部分があれば，そこでカーソルが指マークに変わります。

もし変わらなければ，
インスタンスの作り忘れや
インスタンス名の付け忘れや付け間違いが考えられます。

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

あと，
動く動かないとは関係がありませんが，

　□　レイヤー　筆 ・ ・ ・ |●| ← controller
　●　レイヤー　筆 ・ ・ ・ |●| ← graph

この２つのインスタンス名のムービークリップの座標の位置関係を書いていませんでしたね。

　　●　 ←つまみになる部分（controller）
　　｜　 ┐
　　｜　 │
　　｜　 ├最初0度のときの基準の線になる
　　｜　 │（controller）
　　◎　 ┘
　　↑
　graph

こういう位置（座標）関係です。
graph の基準点（中央）と controller の基準点（下の真ん中）をぴったり合わせる位置関係です。

graph の基準点を基準として，マウスの角度を求めて，
つまみである controller を回転させて，
それと同時に，扇（fan） を１度間隔で graph の中に attachMovie していっています。
すべての中心は graph の基準点です。
そこを基準にすべてのものが回転したり attachMovie されたりする仕組みになっています。

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

それと，これも動く動かないとは関係ない話ですが，
若干訂正です。

～ ～ ～ ＃１より引用～ ～ ～ ～ ～ ～

するとやたら細い塗りの ▼ ができるという感じです。
図示できませんが，近い物を図示すると次のような感じです。

　┌─┐
　｜　 /
　｜　/
　｜ /
　｜/
　 レ ←ココの角度が１度

その ▼ をムービークリップに変換します。
このときの基準点も下の中央にしてください。

-----------------------------------------
名前(N)：[ 任意の名前　　　　　　　　　]
タイプ(T)： ◎ ムービークリップ　基準点（R）：□□□
　　　　　　○ ボタン　　　　　　　　　　　　　　　 □□□
　　　　　　○ グラフィック　　　　　　　　　　　　 □■□
-----------------------------------------

～ ～ ～ ～ ～ ～ ～ ～ ～ ～ ～ ～

と書きましたが，
厳密には，

～ ～ ～ ～ ～ ～ ～ ～ ～ ～ ～ ～
このときの基準点も "下の左" にしてください。

-----------------------------------------
名前(N)：[ 任意の名前　　　　　　　　　]
タイプ(T)： ◎ ムービークリップ　基準点（R）：□□□
　　　　　　○ ボタン　　　　　　　　　　　　　　　 □□□
　　　　　　○ グラフィック　　　　　　　　　　　　 ■□□
-----------------------------------------
～ ～ ～ ～ ～ ～ ～ ～ ～ ～ ～ ～

ですね。
私がチョット勘違いをして，基準点を "下の中央" にして作ってしまったため，
上のように書いてしまいました。
実際にはそれでも動作しますし，扇は広がります。
でも厳密に言えば，基準点は "下の左" にするのが正解です。

基準点を "下の中央" にして作ると，
少し隙間ができる可能性があります。動作自体はほとんどかわりません。

補足

何度も補足を書いて申し訳ありません。
パブリッシュしてcontrollerにマウスポインタを近づけると指の形に変わり「このコントロールをアクティブ化して使用するにはクリックしてください」というメッセージが出てきます。そしてクリックするのですが、何の変化もないのです。controllerも動きません。
更新ボタンを押すと「このコントロールをアクティブ化して使用するにはSpaceキーまたはEnterキーを押してください」とメッセージが出て、その通りしてみても何の変化もありません。
スクリプトはコピペして使わせていただいておりますので何の問題もないかと思うのですが・・・。(/_;)

回答No.2

noname#35109

＃１です。

何か言い忘れがある…
と思っていたら，やっぱり言い忘れがありました。

　●　 ←つまみになる部分
　｜　 ┐
　｜　 │
　｜　 ├最初0度のときの基準の線になる
　｜　 │
　｜　 ┘

これのムービークリップのインスタンス名を書き忘れていました。
スクリプトを見ればわかると思いますが，「controller」です。

念のため，
完成状態の _root のタイムラインのフレームをインスタンス名を使って書くと
次のようになります。

　　　　　　　　　　 目錠□ １
　□　レイヤー　筆 ・ ・ ・ |○| ←スクリプトを書く
　□　レイヤー　筆 ・ ・ ・ |●| ← controller
　●　レイヤー　筆 ・ ・ ・ |●| ← graph
　　●　レイヤー筆 ・ ・ ・ |●| ←「絵」

そしてさらに念のため，
実際の角度１度の扇はステージ上に配置しませんが，
リンケージの識別子が 「fan」 です。
また，
ボタンシンボルやグラフィックシンボルは使用しません。
＃１で書いたのは
全てムービークリップシンボルかムービークリップシンボルのインスタンスの作成手順です。

補足

回答ありがとうございます。
昨日早速してみました。うまくいかなかったのでもう一度考えてみたのですが、やはりControllerを動かすことができません（涙）
最初はContorollerを右側水平位置にしているからかな？と思ったのですが、垂直上側にしてもやはり動きません。
パブリッシュすると画面上にcontrollerだけが表示されている状態になっています。
どこが悪いか調べる方法はないでしょうか・・・。

回答No.1

noname#35109

> まだ考えは十分に煮詰まっていないのですが…

からの数行は意味がよくわからない部分が多いですが，
その下に，

> 必要な数だけマスクを複製するとできる・・・？
> などと考えております。角度は１度単位の表示です。

と書かれている路線は，ＯＫだと思いますよ。
本家 Adobe ↓ にもその方法が書かれています。

XML を利用したインタラクティブな円グラフの作成　より
「ムービークリップを用意する」 (P.3)
http://www.adobe.com/jp/devnet/flash/articles/ad-mix02.html
--- 引用 ------
> 円グラフ表示ムービークリップには、
> 円を3.6度分切り出した扇形のグラフィックを用意します。
> このムービークリップは、回転させながら複製するので、
> 基準点が円の中心部分になるように作成します。

他にも方法はあると思いますが，
一応書かれている方法も順当な方法だと思います。

しかし，

> ０度の辺上のつまみ（のようなもの）を作っておき、
> それをドラッグすると、つまみの座標を利用して、
> 必要な数だけマスクを複製

ここをどうするかですね。難しいですね。

あまり自信はありませんが，
一応なんとかできたので，その方法を書いておきます。

先に，レイヤーの構造から。
図示するとこんな感じのが完成状態です↓。

　　　　　　　　　　 目錠□ １
　□　レイヤー　筆 ・ ・ ・ |○| ←スクリプトを書く
　□　レイヤー　筆 ・ ・ ・ |●| ←つまみと線ムービークリップ
　●　レイヤー　筆 ・ ・ ・ |●| ←扇のムービークリップ
　　●　レイヤー筆 ・ ・ ・ |●| ←「絵」

下のレイヤーから説明すると，
「絵」 は，ご質問で書かれている，
>> 一番下のレイヤーには絵が描いてあります。
の絵のことです。

次に 扇のムービークリップ ですが，
これが，「絵」にかけるマスクで，そのレイヤーはマスクレイヤーにしておきます。
扇 はまずステージ上に小さな（直径1mmほど）の ●（丸） を塗りで描いてください。
色は何色の塗りでも良いです。
小さな ● を描いたら，その ● を「修正」→「シンボルに変換」でムービークリップにしてください。
そのときの基準点は，中央 にしてください。

-----------------------------------------
名前(N)：[ 任意の名前　　　　　　　　　]
タイプ(T)： ◎ ムービークリップ　基準点（R）：□□□
　　　　　　○ ボタン　　　　　　　　　　　　　　　 □■□
　　　　　　○ グラフィック　　　　　　　　　　　　 □□□
-----------------------------------------

ムービークリップ に変換できたら，
その ●ムービークリップ を選択して，下のプロパティインスペクタより，インスタンス名を付けます。
この説明では，円グラフみたいなので 「graph」 というインスタンス名を付けることにします。
この 「graph」 ムービークリップ 内に，
後で説明する角度１度の扇（三角）のムービークリップをActionScriptで配置していきます。
その配置するためのムービークリップです。

次に１つ上のレイヤーについてです。
つまみと線のムービークリップを置くわけですが，
つまみの部分の ● と，その下に線（０度の基準線）を描いてください。
一応縦向きに描いた場合で説明します。
ステージ上の ● と 線 を図示すると次のような感じです。

　●　 ←つまみになる部分
　｜　 ┐
　｜　 │
　｜　 ├最初0度のときの基準の線になる
　｜　 │
　｜　 ┘

縫い物の待ち針みたいな形です。
その ● と 線 を両方ともを選択してムービークリップに変換してください。
そのときの基準点は，下の中央が良いです。

-----------------------------------------
名前(N)：[ 任意の名前　　　　　　　　　]
タイプ(T)： ◎ ムービークリップ　基準点（R）：□□□
　　　　　　○ ボタン　　　　　　　　　　　　　　　 □□□
　　　　　　○ グラフィック　　　　　　　　　　　　 □■□
-----------------------------------------

※なおこの最初0度のときの基準の線ですが，
　作った後に不要だと思ったらそのとき消してください。
　この線があったほうが作成上作りやすいので，
　この線を入れています。

次に，１度の扇を描くのですが，
その１度の扇用のレイヤーは不要です。
どのレイヤーでも良いので，１度の扇と言うかやたら細長い ▼（三角） を塗りで用意してください。
これはなかなか苦労しました（私は）。

私がしたその ▼ を作る方法を書いておくと，
上で作った「つまみと線」の線だけを _root のステージ上の任意のレイヤーにコピーしてきて
その線の太さを「極細線」にしてグループ化し（線１本でもグループ化），
そのグループ化した線のコピペでもう１本増やし，
コピペで増やした方の線を「修正」→「変形」→「伸縮と回転」で，
「回転」を １度 にして「OK」。
そして２本の線を両方とも選択して「整列」パネルより，
「左揃え」の「下揃え」にして整列させ，両方のグループを分解。
表示を800％にして，三角形になるように V になった線の上の辺を線で結び，
できた長細い ▽ を任意の色で塗りつぶして線を消す。
するとやたら細い塗りの ▼ ができるという感じです。
図示できませんが，近い物を図示すると次のような感じです。

　┌─┐
　｜　 /
　｜　/
　｜ /
　｜/
　 レ ←ココの角度が１度

その ▼ をムービークリップに変換します。
このときの基準点も下の中央にしてください。

-----------------------------------------
名前(N)：[ 任意の名前　　　　　　　　　]
タイプ(T)： ◎ ムービークリップ　基準点（R）：□□□
　　　　　　○ ボタン　　　　　　　　　　　　　　　 □□□
　　　　　　○ グラフィック　　　　　　　　　　　　 □■□
-----------------------------------------

この ▼ ですが，
ムービークリップに変換したら，
そのムービークリップをライブラリからスクリプトで呼び出して使用しますから，
ステージ上にはもう必要ありません。
ですから，ステージ上から消してください。

次に，ライブラリパネルを表示させると，
▼のムービークリップシンボルがあると思います。
この▼を選択して，「右クリック」→「リンケージ」で「リンケージプロパティ」ダイアログを表示させて，

　リンケージ(V)：　□ActionScript に書き出し(X)

にチェックを入れてください。
勝手に，

　　　　□最初のフレームに書き出し(F)

にもチェックが入りますが，それはそのまま気にせず，チェックが入った状態にしておいて，
識別子(I)：　に識別子を付けます。
この説明では「fan」という識別子を付けておきます。
（扇を英和辞典で調べたら fan だったため fan にします。）

そして，
一番上のフレームにスクリプトを書きます。
スクリプトは本当に自信ありませんが次の書きます（コピペ可能）。

---------------------------------------------------
// controller にマウスダウンで flg (フラグ)を 1 にする
_root.controller.onPress = function() {
_root.flg = 1;
};
// controller からマウスアップで flg を 0 にする
_root.controller.onRelease = function() {
_root.flg = 0;
};
_root.controller.onReleaseOutside = function() {
_root.flg = 0;
};

// マウスが動くたびに実行
_root.graph.onMouseMove = function() {

if (_root.flg == 1) {

// graph から見たときのマウスの角度を算出（ラジアン）
var rad = Math.atan2(this._ymouse, this._xmouse);
// rad の値を度（デグリー）に変換
var deg = rad*180/Math.PI;
// controller を回転させる
_root.controller._rotation = deg+90;

// fan を回転させる値の補正
if (Math.floor(deg+90)>=0) {
var deg2 = Math.floor(deg+90);
} else {
var deg2 = Math.floor(deg+450);
}
// ↓補正値の確確認（不要）
//trace(deg2);

// fan0～fan360を消す
for (var i = 0; i<=360; i++) {
this["fan"+i].removeMovieClip();
}

// fan0 ～ fan(deg2) までを attachMovie
for (var i = 0; i<=deg2; i++) {
this.attachMovie("fan", "fan"+i, i);
this["fan"+i]._rotation = i;
}

// 処理後 即更新
updateAfterEvent();

}

};
---------------------------------------------------

一応は動作確認済みで動きました。
でも，私は数学が苦手で，動くには動きますが，
どうも遠回りなことをしている気がしてなりません。

他に回答される方がいらっしゃいましたら，
どうぞたたき台にでもしてください。

作り方の説明ばかりで長くなってしまいましたが，
だいたい以上です。

関連ＵＲＬ↓

リンケージとは？
http://www.1art.jp/flash/le/lessona/lessona.htm

２つの座標から角度を求める
http://hakuhin.hp.infoseek.co.jp/main/as/math.html#MATH_01