TOSSランド＞TOSSコミュニティ＞その他

Flash 使い方教室２～初級スクリプト編～

作成者：TOSSオホーツク・山田正和
作成日：2004年9月30日(木)
最終更新日：2004年10月10日(日)
©Two-Way All rights reserved
TOSSランドは世界一の教育情報ポータルサイトです。
TOSSランドの正式名称はインターネットランド（登録商標4468327号）と言います。

課題１１：ドロップしたら固まりなさい。

●ステップ１：１つの教材を細分化して考えなさい。

ドラッグ＆ドロップを利用した教材の中には、「重なり判定（ヒットテスト）」を行うタイプがあります。(*1)
「標的（正解の絵など）」に重ねることで、マルが付いたり正解音が鳴ったりする教材です。
この手の教材は、幾つかの技が組み合わさって出来ています。

(１)ボタンを包んだムービークリップを、ドラッグ＆ドロップさせる技

→前回課題（課題９）で学習したばかりの技。

(２)ドロップ時に、赤マルを表示させる技

→まだ学習していない技。

(３)ドロップ時に、正解音を鳴らす技

→まだ学習していない技。

(４)ドロップ時に、ムービークリップを固める技（以後ドラッグ＆ドロップを出来なくする技）

→まだ学習していない技。

(５)ドロップ時に、ムービークリップを「標的」にピッタリ重ねる技（微妙な位置のズレを修正する技）

→まだ学習していない技。

(６)「重なり判定」が有効な時だけ、（２）～（５）を実行する技

→まだ学習していない技。
今回の課題（課題１１）では、比較的簡単な（２）と（４）の技だけを先に学習します。

(２)ドロップ時に、マルを表示させる技

→今回は、「標的」に重ねなくても（どこにドロップしても）赤マルが表示されるようにする。

(４)ドロップ時に、ムービークリップを固める技（以後ドラッグ＆ドロップを出来なくする技）

→今回は、「標的」に重ねなくても（どこにドロップしても）固まるようにする。
残りの難しい技は、後（あと）の方の課題で学習する予定です。
いずれ取り組む完成品（重なり判定付ドラッグ＆ドロップ）のために、今回は「部品（パーツ）」の作り方をしっかり学習しておいてください。

*1：「ヒットテスト（hit test）」は、文字通り「当たり判定」「命中判定」などと呼ぶ場合もあります。
　ここでは「ドラッグ＆ドロップで標的に重ねる」動作から考えて、「重なり判定」と訳しておきました。

●ステップ２：助走問題「クリックで赤マルを表示するフリップ」を作りなさい。

まず助走問題に取り組みます。
これから「ボタンをクリックすると、赤マルが表示されるフリップ」を作ってもらいます。（趣意説明）
"Flash"を起動しなさい。
「楕円（だえん）ツール」を使って、ステージやや左上に円を書きなさい。
面積はステージの１０分の１程度、色や線の太さは特に問いません。
今描いた円を「ボタン」に変換しなさい。
円の「ぬり色」をダブルクリック→そのまま右クリック→「シンボルに変換」です。
シンボル名は分かりやすければ何でも良いのですが、ここでは「円ボタン」としておきます。
「円ボタン」にスクリプトを書き込んで、「次へボタン」として機能するようにしなさい。
```
on(release){
	nextFrame();
}
```
２枚目の用紙（フレーム）を用意して、「赤マルを付けた円ボタン」を描きます。（趣意説明）
「タイムライン（時間割）」の２フレーム目を右クリック→「キーフレームの挿入」。
これで、１フレーム目と全く同じ絵が描かれたフレームが用意されました。
２フレーム目の「円ボタン」を、赤マルで囲みなさい。
「楕円（だえん）ツール」を使って、「線の色」が赤で、「ぬり色」が無色の円を書き足すのです。(*1)
「タイムライン（時間割）」左側の「レイヤー１」を右クリック→「レイヤーを挿入」。
これで「タイムライン」が２段重ねになりました。
２つの「レイヤー名」を書き直しなさい。
「レイヤー１」が「ボタン」、「レイヤー２」が「スクリプト」です。
「ボタン」レイヤーを「ロック」しなさい。
「スクリプト」レイヤーの１フレーム目に、「止まれ（ストップ）！」と書き込みなさい。
```
stop();
```
「ムービープレビュー」を試してご覧なさい。
「ボタンをクリックすると、赤マルが表示されるフリップ」が出来ています。
→動作参照用白玉ファイル(11c.swf)
赤マル（２フレーム目）を表示させた後、再び「矢印（マウスカーソル）」を「円ボタン」に重ねてご覧なさい。
「矢印」が「指マーク（「この円はボタンですよ」という表示）」に変ります。
今作っているフリップは、全部で２フレームしかありません。
ですから赤マル（２フレーム目）を表示させた後に、ステージ上にボタンがある状態は少々不自然です。
「教材を操作している人に、３フレーム目があるのではないか？」と誤解させてしまうからです。
「ムービープレビュー」を終了しなさい。
これから赤マル（２フレーム目）を表示させた後、「指マーク」に変らないようにします。
２フレーム目の「円ボタン」を、ボタンではない、ただの「円の絵」に変えるのです。（趣意説明）
「スクリプト」レイヤーを「ロック」しなさい。
「ボタン」レイヤーの「ロック」を解除しなさい。
「矢印ツール／選択ツール」で、２フレーム目の「円ボタン」をクリック。
「プロパティ」パネルの左端の欄を、「ボタン」から「グラフィック」に変更しなさい。
今まで「ボタン」だった「属性（property）」を、強制的に「グラフィック」へと変更するのです。(*4)
「ムービープレビュー」を試してご覧なさい。
赤マル（２フレーム目）を表示させた後は、「指マーク」に変りません。
→動作参照用白玉ファイル(11d.swf)
「ムービープレビュー」を終了しなさい。
ファイルを保存して、次のステップに進みなさい。
ファイル名は"kadai11A.fla"としておきます。

*1：フリーハンドで赤マルを描くことも出来ますが、ここでは「楕円ツール」を使いました。(*2)(*3)

*2：念のために書いておきますが、「楕円ツール」で「真円」を描く方法は「Shift」キーです。
　「Shift」キーを押しながら「楕円ツール」を使うと、「真円（つぶれていない円）」を描くことができるのです。

*3：フリーハンドで描きたい場合は、「鉛筆ツール」や「ブラシツール」を使います。
　詳しくは前回講座（Flash使い方教室１）を参考にしてください。

*4：唐突な登場ですが、「プロパティ」パネルの新技です。
　要するに、「ボタン」から「ボタンとしての性質（属性）」を奪っている（封印している）わけです。(*5)

*5：「ステージ上のボタン」を強制的に「グラフィック」へ変更しても、「ライブラリの中のボタン」は「ボタン」のままです。

●ステップ３：本題「ドロップすると赤マルを表示するドラッグ＆ドロップ」を作りなさい。

これから「ドロップすると、赤マルが表示されるドラッグ＆ドロップ」を作ってもらいます。（趣意説明）
ステップ４の助走問題を作ることができた人にとっては、それほど難しい作業ではありません。
これから学習する内容は、「ボタンをクリックすると、赤マルが表示されるフリップ」の応用だからです。
"Flash"画面の左上を、「ファイル」→「新規作成」とクリック。
新しいファイル（ステップ２で作った"kadai11A.fla"とは違うファイル）が用意されます。
「楕円（だえん）ツール」を使って、ステージやや左上に円を書きなさい。
面積はステージの１０分の１程度、色や線の太さは特に問いません。
今描いた円を「ボタン」に変換しなさい。
円の「ぬり色」をダブルクリック→そのまま右クリック→「シンボルに変換」です。
シンボル名は分かりやすければ何でも良いのですが、ここでは「円ボタン」としておきます。
「円ボタン」に「ドラッグ＆ドロップ」のスクリプトを書き込みなさい。
```
on(press){
	startDrag(this);
}
on(release){
	stopDrag();
}
```
スクリプトを書き込んだ「円ボタン」を、「目に見えない魔力の壁（ムービークリップ）」で包みなさい。
シンボル名は分かりやすければ何でも良いのですが、ここでは「円ドラッグ」としておきます。
「矢印ツール／選択ツール」で、ステージ上の「円ドラッグ」をダブルクリックしなさい。
"Flash"が「ムービークリップ」の編集モードに切り替わります。(*1)
これから「円ドラッグ（円ボタンを包んだムービークリップ）」の中を、編集（改造）していきます。（趣意説明）
編集（改造）と言っても、ステップ４とほぼ同じ作業なので簡単です。
「円ボタン」にスクリプトを書き足して、「次へボタン」として「も」機能するようにしなさい。
「オン・リリース」のところに、「ネクスト・フレーム」を書き足すのです。
```
on(press){
	startDrag(this);
}
on(release){
	stopDrag();
	nextFrame();
}
```
２枚目の用紙（フレーム）を用意して、「赤マルを付けた円ボタン」を描きます。（趣意説明）
「タイムライン（時間割）」の２フレーム目を右クリック→「キーフレームの挿入」。
これで、１フレーム目と全く同じ絵が描かれたフレームが用意されました。
２フレーム目の「円ボタン」を、赤マルで囲みなさい。
「楕円（だえん）ツール」を使って、「線の色」が赤で、「ぬり色」が無色の円を書き足すのです。
「タイムライン（時間割）」左側の「レイヤー１」を右クリック→「レイヤーを挿入」。
これで「タイムライン」が２段重ねになりました。
２つの「レイヤー名」を書き直しなさい。
「レイヤー１」が「ボタン」、「レイヤー２」が「スクリプト」です。
「ボタン」レイヤーを「ロック」しなさい。
「スクリプト」レイヤーの１フレーム目に、「止まれ（ストップ）！」と書き込みなさい。
```
stop();
```
「ムービープレビュー」を試してご覧なさい。
「ドロップすると、赤マルが表示されるドラッグ＆ドロップ」が出来ています。
→動作参照用白玉ファイル(11e.swf)
「ムービープレビュー」を終了しなさい。
赤マルを表示させた後、「指マーク」に変らないようにします。
２フレーム目の「円ボタン」を、ボタンではない、ただの「円の絵」に変えるのです。（趣意説明）
「矢印ツール／選択ツール」で、２フレーム目の「円ボタン」をクリック。
「プロパティ」パネルの左端の欄を、「ボタン」から「グラフィック」に変更しなさい。
今まで「ボタン」だった「属性（property）」を、強制的に「グラフィック」へと変更するのです。
「ムービープレビュー」を試してご覧なさい。
赤マル（２フレーム目）を表示させた後は、「指マーク」に変りません。
「指マーク」に変らないということは、赤マルを表示させた後は「ドラッグ＆ドロップ」が出来ないということでもあります。

今回学習する技（ステップ１を参照のこと）

(２)ドロップ時に、マルを表示させる技

(４)ドロップ時に、ムービークリップを固める技（以後ドラッグ＆ドロップを出来なくする技）

→動作参照用白玉ファイル(11f.swf)
「ムービープレビュー」を終了しなさい。
「シーン１」をクリックしなさい。
「ムービークリップ」編集モードから、通常モードに切り替わります。
このステップでは「ムービークリップの中」に「フリップ」を作りました。
言うならば、「フラッシュ作品の中」に「フラッシュ作品」を作るような作業です。
このような「フラッシュ作品の中にフラッシュ作品を作る技」は、「ムービークリップ」の使い方の中でも最も重要な技の１つです。
上手く使いこなすと、様々な応用が利いて便利な技なのですが、作業内容を上手くイメージできないかもしれません。(*2)
いずれまた、機会を見つけて学習したいと考えています。(*3)
"kadai11B.fla"のファイル名で、ファイルを保存しなさい。
長くなって来たので、今回の課題はここまでです。

*1：厳密に言えば、「ムービークリップ編集モード」というより「シンボル編集モード」です。
　「シンボル編集モード」についての詳細は、前回講座（Flash使い方教室１）・課題１０を参照してください。

*2：前回講座（Flash使い方教室１）でも、上手く教えることが出来ませんでした。
　全ての課題をクリアした受講生の方でも、「ムービークリップ」の実態を完全には理解できていないと思います。

*3：分量が上手く収まれば、後半の課題に盛り込みます。
　……無理なら「Flash使い方教室３　～ムービークリップ編～」を考える必要がありますね。

▲このページの先頭に戻る →課題１２へ