画面全体にマスク

質問

参考
http://ficc.jp/

こちらのページの最下部、「非公開作品集」をクリックしたときのように、ブラウザのサイズに関わらず画面全体にマスクをし、その上にFlashからHTMLを読み込んだオブジェクトをおきたいと思っています。

画面全体に対するマスクをかける方法について、何かヒントいただけないでしょうか？

回答No.1

noname#35109 · ベストアンサー

マスクをかけるというのは，
Flash の場合「マスクをかけて部分的に何かを表示させる」という意味になるので，
ご質問で書かれている URL のものとは普通は逆の意味というか，
全然違った意味になります。

「マスクとは？」
http://www.1art.jp/flash/le/lesson9/lesson9-2.htm

ですから，もし，
「Flash マスク 方法」などと検索エンジンで検索して探しても，
おそらく書かれているもののヒントにはたどり着きません。

また，
HTMLを読み込んだオブジェクトが表示されているわけではなく，
単に，ステージ全体の一番上のレイヤー，もしくは，一番上の深度に，
ムービークリップを出没させているだけです。

あと，
「HTMLを読み込んだオブジェクト」という意味がわかりません。
したがって，その点は除いて，

> ブラウザのサイズに関わらず画面全体にマスクをし、

という部分だけ回答します。
（「という部分だけ」と言ってもこの説明は長いです。）

私自身も何度か同様のご質問に回答したことがあるのですが，
原理はこれです↓。

「Flashの表示サイズを動的に変更させる方法」
http://oshiete1.goo.ne.jp/qa2479358.html
　↑教えて!goo　↓OKWave　（同じです）
http://okwave.jp/qa2479358.html

上のURLでは，
もっと詳細に色々な場所にムービークリップを配置する方法を書いていますが，
今回の件では全てが必要ではありません。
必要なのはこれだけです↓。

　// ムービーの拡大・縮小をなしにする
　Stage.scaleMode = "noScale";

これで，
ブラウザの窓の大きさによって中身の大きさを変えないようにします。
それだけです。
そして，
物（ムービークリップ）を指定座標（真ん中）に配置＆表示させるのです。

前置きは以上です。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

それでは，
具体的なサンプル（本番ではありません）の作り方を説明します。

まず Flash で新規ドキュメントを作成して，
任意のフォルダに任意の名前で FLA ファイルを保存してください。

保存できましたら，
ステージ上に 400×400px ほどの四角を 矩形ツール でステージ中央あたりに描いてください。
枠の線は要りません。
塗りの色は アルファ50％（半透明） くらいの黒が良いと思います。

半透明の黒い四角が描けましたら，
その四角を選択して，
「修正」→「シンボルに変換」（または，右クリック→「シンボルに変換」）で，
ムービークリップに変換します。
このときの基準点が大切で，基準点を中央にしてください。
「シンボルに変換」ダイアログのようす↓。

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

ムービークリップに変換できましたら，
さらにもう一度ムービークリップに変換します。
つまり，
親ムービークリップの中に子ムービークリップが入っているという，
入れ子状態のムービークリップを作ると言うことです。
このときの基準点も中央にしてください。

変換できましたら，
その親ムービークリップを選択して，
下のプロパティインスペクタ（プロパティパネル）でインスタンス名を付けます。
インスタンス名は何でも良いのですが，
この説明では 「Buttai」（物体） というインスタンス名を付けることにしておきます。
「Buttai」 は全て半角文字にしてください。

次に 「Buttai」 をダブルクリック（もしくは，右クリック→「同じ位置で編集」）して，
「Buttai」 内のタイムラインの編集に移ります。

「Buttai」 内のタイムラインは１フレーム１レイヤーになっているはずです

　□　レイヤー　筆・・|●| ←黒半透明ムービークリップがある

それを，３レイヤー20フレームにします↓。

　□　レイヤー　筆・・|○　　　　　　　　　[]|
　□　レイヤー　筆・・|○　　　　　　　　　[]|
　□　レイヤー　筆・・|●///////////[]|

一番下の黒半透明ムービークリップがあるレイヤーのフレーム１を選択し，
フレーム2にドラッグ＆ドロップし，
下から２番目のレイヤーの フレーム2 を選択し，空白キーフレームを挿入し，
いちばん上のレイヤーの最後のフレームも，空白キーフレームにしてください。

　□　レイヤー　筆・・|○ 　　　　　　　[]|○|
　□　レイヤー　筆・・|○|○ 　　　　　　　[]|
　□　レイヤー　筆・・|○|●/////////[]|

そしたら，
ステージ上の半透明黒のムービークリップを選択して，
下のアクションパネルを表示させ，
白いスクリプトを書く部分に，

--------------------
onClipEvent (load) {
// ハンドカーソルにならないようにする
this.useHandCursor = false;
}
// クリック時
on (release) {
// 親ムービークリップをフレーム1に戻す
this._parent.gotoAndStop(1);
}
--------------------

と書いてください。
これで，黒い半透明の部分をクリックしたときに，
最初のフレームに戻るボタン機能が付いたムービークリップができます。

２番目のレイヤーの フレーム2 を選択して，
ステージ中央に，今度は 横×縦＝200×100px ほどの，
黄色の塗の四角でも描いてください。アルファは不要です。
これは，ムービークリップの基準点を中央に合わせた方が良いので，
「ウィンドウ」→「整列」にチェックを入れて「整列パネル」を表示させて，
「ステージを基準」ボタンを押した状態で，
「整列」を「中央揃え（水平方向）」，
「分布」を「中央分布（垂直方向）」にして，
きっちり四角の中央と，ムービークリップの基準点が等しくなるように配置してください。

配置できましたら，
黄色の四角を選択し，ムービークリップに変換します。
このときの基準点も中央にしてください。

変換できましたら，
一番下のレイヤーと２番目のレイヤーの最終フレームをキーフレームにしてください。

　□　レイヤー　筆・・|○ 　　　　　　　[]|○|
　□　レイヤー　筆・・|○|●///////[]|●|
　□　レイヤー　筆・・|○|●///////[]|●|

そして，
一番下のレイヤーと２番目のレイヤーの フレーム2 を選択して，
下のプロパティインスペクタの真ん中上あたり，

　トゥイーン：[なし　　　　　ｖ]

となっている部分を

　トゥイーン：[モーション　　ｖ]

にしてください。

　□　レイヤー　筆・・|○ 　　　　　　　[]|○|
　□　レイヤー　筆・・|○|●>------>|●|
　□　レイヤー　筆・・|○|●>------>|●|

そして，
フレーム2 にあるステージ上の半透明黒のムービークリップと黄色のムービークリップを選択し，
下のプロパティインスペクタで，

　カラー：[アルファ　　　ｖ]　[0％　]ｖ

にしてください。
要は，アルファ0→アルファ100％のモーショントゥイーンを作ったわけです。

一番上のレイヤーは空白キーフレームを作っただけで何もしていませんね。
一番上のレイヤーの フレーム1 を選択して，
下のアクションパネルを表示させ，

--------------------
this.stop();
--------------------

と書いてください（コピペ可）。
これでこのムービークリップは勝手に再生されません。
一番上のレイヤーの 最終フレーム の空白キーフレームにも，

--------------------
this.stop();
--------------------

と書いてください。
すると，最終フレームで止まるアニメーションができます。

これで 「Buttai」 内の編集は終わりです。
「編集」→「ドキュメントの編集」で，メインムービーのタイムラインの編集に戻ります。

メインムービーのタイムラインに戻ると，
ステージ中央辺りに　○　があるだけで，
他は何もないと思います。
この ○ が，さっきまで編集していたムービークリップ 「Buttai」 です。
この ○ も整列パネルで，
「ステージを基準」ボタンを押した状態で，
「整列」を「中央揃え（水平方向）」，
「分布」を「中央分布（垂直方向）」にして，
ムービークリップの基準点がステージ中央に来るように配置してください。

メインムービーのタイムラインは１フレーム１レイヤーになっているはずです

　□　レイヤー　筆・・|●| ← 「Buttai」 がある

それを，３レイヤー1フレームにします。
また， 「Buttai」 があるレイヤーは真ん中の上から２番目に移動させてください。

　□　レイヤー　筆・・|○|
　□　レイヤー　筆・・|●|
　□　レイヤー　筆・・|○|

移動できましたら，
一番下のレイヤーを選択して，
横×縦＝100×20px ほどの小さめの四角い塗りを書いてください。
塗の色は適当で良いです。

その塗を選択して，
今度はボタンシンボルに変換してください。
基準点は中央でも中央でなくてもどこでもかまいません。

そのボタンに次のようなスクリプトを書きます。

--------------------
on (release) {
// Buttai を再生させる
_root.Buttai.play();
}
--------------------

これでこのボタンをクリックすると，
ムービークリップ Buttai の再生が開始されます。

ここまでできましたら，
パブリッシュやムービープレビューで動作確認してみてください。

最初に書いた半透明の黒の塗が，
400×400px ほどですからステージ全体は覆いかぶさらないと思いますが，
この半透明の黒の塗りを後からでも 2000×2000pxくらいに拡大してやれば良いだけです。

あとは，
ステージのサイズが変わったときも，
常に同じサイズで黄色い四角がステージ中央に表示されれば良いわけです。

メインムービーのタイムラインの一番上のレイヤーのフレーム1の空白キーフレームを選択して，
次のように書いてください。

------------------------------------
// ムービーの拡大・縮小をなしにする
Stage.scaleMode = "noScale";
------------------------------------

これでできあがりです。

最後に，
「ファイル」→「パブリッシュ設定」で，「HTML」タブを選択し，

　サイズ：[ パーセント　　　　ｖ]
　　　　　幅(W)：　　　高さ(E)：
　　　　　[100　] × [100　] パーセント

にしてパブリッシュし，
HTML を開いて窓を拡大縮小させてみれば結果がわかると思います。

これらのことに関しましては次のURLが参考になると思います↓。

「表示に関する情報について」
http://hakuhin.hp.infoseek.co.jp/main/as/stage.html

また，
黄色いムービークリップは黄色いムービークリップで，
何か on (release) {} などを書いたりすると，
そのエリアでは黒半透明のボタンは無効になります。
その辺りは何か作ってみてください。

説明は長くなってしまいましたが，やることやスクリプトは簡単でしょう。
別に特別なことが必要なわけではありません。
上のレイヤーのムービークリップを stop(); や play(); gotoAndStop(); させているだけです。

たいていそんな物ですよ。
「質問者さまがおっしゃるところのマスク」 のようなものを出没させたいのでしたら，
素直にマスクのようなものを描いて出没させれば良いだけです。
黒い半透明が嫌でしたら，アルファ0 の全く透明な塗を用意して，
その上に書かれているURLのように斜線をたくさん引いても良いです。
また，
ダイアログのようなものを出没させたいのでしたら，
素直にダイアログのようなものを描いて出没させれば良いだけです。
Flash は極めて主観的ですし，思ったままに何でも作成できます。

大体以上です。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

> FlashからHTMLを読み込んだオブジェクトをおきたい

これの意味がわからなくて心の中に引っ掛かります。
Flash とは無関係なご質問，または，
Flash は絡んでいても本体は Flash ではないご質問のように思うのですが...。
つまり，ひょっとして Flash ではなく，
JavaScript の Lightbox に関することではないかと思ったのです。
違っていたらすみません。
一応 Lightbox に関する参考URLを書いておきます↓。

「Highslide JS-サムネール画像を拡大表示するスマートなjavascript」
http://weblibrary.s224.xrea.com/weblog/webdesign/javascript_high.html

もしこれだと Flash と絡めるのは非常に厄介か，不可能なことだと思います。
不可能というのは，
仮にLightbox と Flash が共存できたとしても，できる環境が限られてしまう可能性があるということです。
例えば
「Windows限定の，IE限定の，JavaScript有効限定の，……　であれば表示可能」
みたいな感じになる可能性があります。
環境がかなり限られるのでしたら，不可能と同じだと言うことで，やめた方が良いと思います。

お礼

sassakun 様
ご回答ありがとうございました。
とても細かくご説明いただき、非常に参考になりました。
「マスク」と機能名としてではなく感覚的な意味で質問してしまい、ご迷惑をおかけしましたことをお詫びします。

>「HTMLを読み込んだオブジェクト」という意味がわかりません。

Flashのとあるオブジェクトの内容を、別ファイルであるHTMLから読み込む、というのを想定していたのですが、外部テキストの読み込み結果がHTML（と解釈して）表示できないという認識でよろしいでしょうか？
つまり、外部のテキストを読み込んだ際に、<br>タグなどはそのまま表示されてしまうのであれば、様式を固定して、XMLなどを読み込む方がよいということになりますね。

回答No.2

noname#35109

＃１です。

> Flashのとあるオブジェクトの内容を、
> 別ファイルであるHTMLから読み込む、
> というのを想定していたのですが、

そういうことですか。
Flash が表示されている HTML から何かを読み込む（例えば JPEG や 変数）のではなくて，
別ファイルの HTML ということですね。

HTML ファイルは基本的に無理です。
しかし，HTML のタグはある程度 Flash Player が解釈します。

結局，外部テキストファイルに

　変数＝値

の形でHTMLタグ入りのテキストデータを「値」として用意しておくと，
ある程度は ダイナミックテキスト内 に HTMLモドキ の値を代入できます。

ダイナミックテクストのプロパティで，
「テキストを HTML としてレンダリング」ボタン ( <> ←こんなボタン) を押した状態にして，
そのダイナミックテキストにタグ入りテキストデータを表示させるのです。

Flash のヘルプで，この辺から見られると，使用できるタグなどがわかります↓。
http://livedocs.macromedia.com/flash/8_jp/main/00001457.html

テキストのロードは，
書かれていらっしゃる通り LoadVars クラスのメソッドで良いです。

簡単に書くと，

「my_dada.txt」というファイルに，

-------------------------
mydata=aaaaa<br>bbbbb
-------------------------

というデータを用意しておいて，
LoadVarsクラスのメソッドで ダイナミックテキスト にその値を表示させるとき，
「HTMLとしてレンダリング」の設定をせすに，

ダイナミックテキストのインスタンス名.text = 値

として，ダイナミックテキストに値を表示させると
ダイナミックテキスト には，

--------------------------
aaaaa<br>bbbbb
--------------------------

と表示されてしまいますが，
「HTMLとしてレンダリング」の設定をして，

ダイナミックテキストのインスタンス名.htmlText = 値

として，ダイナミックテキストに値を表示させると
ダイナミックテキスト には，

--------------------------
aaaaa
bbbbb
--------------------------

と表示されるのです。

普通の変数の値と，HTMLタグ入り値を表示させる違いはそこだけです。

この辺が参考になりますでしょうか↓。

「*TextFieldのHTMLで遊ぶ」
http://hima.chu.jp/flash/tips/textfield_html.htm

「TextFieldに<img>タグで画像が表示できない」
http://www.fumiononaka.com/TechNotes/Flash/FN0401001.html

しかし，
ご質問で書かれているマスクの件と，
ダイナミックテキストを組み合わせるのは難しいですよ。
ダイナミックテキストにはアルファがかかりませんから，
アルファの変化によって「だんだん出てくるダイアログ」みたいなものには使えません。

スパット出てスパット消えるダイナミックテキストなら使えます。
また，アルファではなく他の出し方ならなんとかなるかもしれません。

ご質問で書かれているURLも，
テキスト入力のテキストフィールドを使用していますが，
これにもアルファがかからないので，
アルファが100になって，ダイアログが出きったところでテキストフィールドを出没させていますね。
それまでは単なる四角い枠だけを表示させています。
こういう工夫が必要になります。

お礼

sassakun 様
再度のご教示、重ね重ねありがとうございます。

テキストの表示につきましては、見せ方を工夫して違和感のない表現を探してみたいと思います。
（簡単に思いつくところではアルファグラデーションを持った画像をかぶせて、動かして下層にあるテキストを徐々に表示させるとか・・でしょうか）

また他の事でご質問させていただくこともあると思いますが、もしお答えいただける機会があれば、宜しくお願い致します。
ありがとうございました。