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

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

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

課題４：ボタンで１枚めくりなさい。→nextFrame(); prevFrame();

●ステップ１：ボタンで１枚ずつめくりなさい。

今回は「フリップ」の作り方を復習します。
「フリップ」とは何か、説明するより実物を見てもらった方が早いでしょう。
前回講座（Flash使い方教室１／課題１９）から幾つか紹介します。

1.パワーポイント風フリップ（TOSSランドとは？）

「パワーポイント」のスライドショー（プレゼン）をイメージしてみました。
「次へ」ボタンをクリックするたびに、重要語句が１つずつ表示されます。

→赤玉の中を見てみたい

2.板書風フリップ（面積を求める問題）

板書をイメージした作例です。
言葉の式→数字の式→計算→答え→マルつけ…と次々表示されていきます。

→赤玉の中を見てみたい

3.筆順提示フリップ

漢字の筆順を説明するためのフリップです。
「いち」→「にー」→「い」→「さん」と表示されていきます。

→赤玉の中を見てみたい
ボタン操作で１枚ずつめくれていくのがお分かりでしょうか？
「右向き三角」をクリックすると、次の用紙（フレーム）が表示されます。
「左向き三角」をクリックすると、１つ前の用紙（フレーム）が表示されます。
このようなスライドや紙芝居（みたいなもの）を、講師は「フリップ」と呼んでいます。(*1)
TOSSランドで検索したサイトや、各地のTOSSのイベントで「フリップ」を見たことがある人も多いことでしょう。(*3)

*1：講師が便宜上つけた名前です。(*2)
　"Flash"の入門書の類を紐解くと、「電子紙芝居」「インタラクティブ紙芝居」「プレゼン」などと様々な呼び方をしています。

*2：なぜ「フリップ」と名づけたかは、前回講座を参考にしてください。
　→Flash使い方教室１／課題１９／エクストラステップ

*3：社会科や総合的な学習の授業用に、写真やグラフなどを提示するフリップが特に良く見るパターンです。

●ステップ２：「花鳥風月」と書いて、止めなさい。

それでは実際に「フリップ」を作る活動に入りましょう。
あまり凝ったものを作ると大変なので、シンプルなものを作って勉強することにします。(*1)
"Flash"を起動しなさい。
「テキストツール」と「自由変形ツール」で、ステージ一杯に「花」と書きなさい。
色や書体は好きなもので構いません。
次に２つ目の「フレーム（用紙）」を用意します。
「タイムライン（時間割）」の２コマ目を右クリック→「空白キーフレームの挿入」。
ステージ一杯に「鳥」と書きなさい。
「花」と同じく、色や書体は好きなもので構いません。
以同様の手順で、あと２文字書きます。
３つ目の「フレーム」に「風」、４つ目の「フレーム」に「月」と書きなさい。
「Ctrl」＋「Enter」で「ムービープレビュー」を表示してご覧なさい。
「花」→「鳥」→「風」→「月」→「花」……の順に、フラッシュカードがめくれていきます。
→参照用白玉ファイル(04a.swf)
「ムービープレビュー」を終了しなさい。
１フレーム目（１コマ目）の「花」が表示されたまま、「止まる（ストップする）」ようにします。（趣意説明）
「タイムライン（時間割）」左側の「レイヤー１」を右クリック→「レイヤーを挿入」
「レイヤー２」が挿入され、「タイムライン」が２段重ねになります。
２つの「レイヤー名」を書き直しなさい。
「レイヤー１」が「文字」、「レイヤー２」が「スクリプト」です。
「文字」レイヤーを「ロック」しなさい。
１フレーム目（「花」と書かれたフレーム）に、「止まれ（ストップ）！」と書き込みます。（趣意説明）
"Flash MX"の人は、「スクリプト」レイヤーの１フレーム目を右クリック→「アクション」。
"Flash MX 2004"の人は、「スクリプト」レイヤーの１フレーム目をクリック。
画面下「▼アクション－フレーム」をクリック。
今開いた「アクション」の１行目をクリック。
「黒い縦線」がチカチカ点滅します。
文字入力を「半角英数字」にしなさい。
「ESC」→「Ｓ」→「Ｔ」と、３つのキーを順番に指で押しなさい。
瞬時に「stop();」というスクリプトが書き込まれます。
「Ctrl」＋「Enter」で、「ムービープレビュー」をしてご覧なさい。
１コマ目の「花」が表示されたまま、「ストップ」しています。
「花」→「鳥」→「風」→「月」→「花」……のように「無限ループ」しません。

→参照用白玉ファイル(04b.swf)

「ムービープレビュー」を終了しなさい。
画面下「▼アクション－フレーム」をクリックして、「アクション」パネルを閉じておきなさい。(*2)

*1：毎度おなじみで芸が無いのですが、適当な４文字熟語を使います。
　作るボタンの数も、最低限の２個までにします。

*2："Flash"の画面を広く使うため、使い終わったパネルは小まめに閉じておきます。
　ディスプレイが小さなノートパソコンの場合には、特に有効となる習慣です。
　デスクトップ・パソコンなど、大型のディスプレイを使用している場合なら、それほど意味はありませんが。

●ステップ３：「次へ進む」ボタンを作りなさい。

１コマ目（「花」）で「ストップ」したままのフラッシュカードに、「次へ１コマ進む」ボタンを付けます。
まずは、ボタン用のレイヤーを作ります。（趣意説明）
「タイムライン」左側の「文字」を右クリック→「レイヤーを挿入」。
「レイヤー３」が出来て、レイヤーが３段重ねになります。
「レイヤー名」を「レイヤー３」から「ボタン」へ書き直しなさい。
「スクリプト」レイヤーを「ロック」しなさい。
次に、文字を「シンボル」に変換して、「ボタン」にします。（趣意説明）
「タイムライン」の「ボタン」レイヤーの１フレーム目をクリック。
「テキストツール」と「自由変形ツール」を使って、ステージの右下すみに「右向き▲」を書きなさい。
文字の大きさは「花」の４分の１以下。色や書体は、好きなもので構いません。
「矢印ツール／選択ツール」で、「右向き▲」を右クリック→「シンボルに変換」。
名前は「シンボル１」ではなく「三角ボタン」とします。
タイプ「ボタン」を選んだら、「ＯＫ」をクリック。
最後に「スクリプト」を書き込んで、「ボタン」が機能するようにします。（趣意説明）
"Flash MX"の人は、「矢印ツール／選択ツール」で「右向き▲」ボタンを右クリック→「アクション」。
"Flash MX 2004"の人は、「矢印ツール／選択ツール」で「右向き▲」ボタンをクリック。
画面下「▼アクション－ボタン」をクリック。
「アクション」パネルの１行目をクリック。
「黒い縦線」がチカチカ点滅します。
文字入力を「半角英数字」にしなさい。
「ESC」→「Ｏ」→「Ｎ」と、３つのキーを順番に指で押しなさい。
瞬時に「on()」というスクリプトが書き込まれ、その右横に「コードヒント（符号の手がかり）」の小窓が開きます。
「↓」キーで「release」を選んで、「Enter」キーを指で押しなさい。
「→」キーを何度か指で押して、「黒い縦線」が１行目の行末になるようにしなさい。
「ESC」→「Ｎ」→「Ｆ」と、３つのキーを順番に指で押しなさい。
瞬時に「nextFrame();」というスクリプトが書き込まれます。
シマシマ（縞々）のマークをクリックしなさい。(*1)
書き込んだスクリプトが自動整形（フォーマット）されて、見やすくなります。
これで「次へ１コマ進む」ボタンが完成しました。
「Ctrl」＋「Enter」で、「ムービープレビュー」をしてご覧なさい。
ボタンをクリックするたびに、「花」→「鳥」→「風」→「月」と進んで行きます。
→動作参照用Flash（04c.swf）
「ネクスト（next）」は、英語で「次の～」「隣の～」の意味です。
「フレーム(frame)」は、英語で「骨組み」「体格」「フィルムの１コマ」の意味です。
「スクリプト」の「ネクスト・フレーム／nextFrame();」は、「次のコマへ進め」という指示（呪文）です。
「オン・リリース（on(release){　})」と組み合わせることで、「（マウスでクリックした時）次へ１コマ進む」ボタンを作ることができます。
「ネクスト（Next）」と「フレーム(Frame)」なので、「ESC」→「Ｎ」→「Ｆ」で書き込むことができるのです。
「ムービープレビュー」を終了しなさい。
画面下「▼アクション－ボタン」をクリックして、「アクション」パネルを閉じておきなさい。

*1：「Shift」＋「Ctrl」＋「F」のキーボード操作でも、同様の結果になります。

●ステップ４：「前へ戻る」ボタンを作りなさい。

今度は「前へ１コマ戻る」ボタンを付けます。
「タイムライン」の「ボタン」レイヤーの１フレーム目をクリック。
まずは２個目のボタンをステージ上に作ります。（趣意説明）
同じ作業を２回やるのは面倒なので、前のステップで作った「シンボル」を使いまわします。
キーボードの「Ctrl」キーと「Ｌ」キーを同時に指で押しなさい。
「ライブラリ（「シンボル」が保存されている「ハンコケース」みたいなもの）」が開きます。
「ライブラリ」の中にある「三角ボタン」を、ステージ左下にドラッグ＆ドロップしなさい。
前回講座で学習したのですが、覚えていましたか？
このように、一度描いた絵や文字を「使いまわす」ために「シンボル」があるのでしたよね。
今ドラッグ＆ドロップした「三角ボタン」を、「自由変形ツール」で１８０度回転させなさい。
「左向き▲」にするのです。
最後に「スクリプト」を書き込んで、「ボタン」が機能するようにします。（趣意説明）
"Flash MX"の人は、「矢印ツール／選択ツール」で「左向き▲」ボタンを右クリック→「アクション」。
"Flash MX 2004"の人は、「矢印ツール／選択ツール」で「左向き▲」ボタンをクリック。
画面下「▼アクション－ボタン」をクリック。
「アクション」パネルの１行目をクリック。
「黒い縦線」がチカチカ点滅します。
文字入力を「半角英数字」にしなさい。
「ESC」→「Ｏ」→「Ｎ」で、「on()」というスクリプトを書き込みなさい。
「コードヒント」は、「release」を選びなさい。
「→」キーを何度か指で押して、「黒い縦線」が１行目の行末になるようにしなさい。
「ESC」→「Ｐ」→「Ｆ」と、３つのキーを順番に指で押しなさい。
瞬時に「prevFrame();」というスクリプトが書き込まれます。
書き込んだスクリプトが自動整形（フォーマット）しなさい。(*1)
これで「前へ１コマ戻る」ボタンが完成しました。
「Ctrl」＋「Enter」で、「ムービープレビュー」をしてご覧なさい。
２つのボタンをクリックすることで、「花」⇔「鳥」⇔「風」⇔「月」と表示されます。
→動作参照用Flash（04d.swf）
「prev」は、英語の「previous（プレビアス）」の省略形です。
「previous（プレビアス）」は、英語で「前の～」「先の～」「以前の～」の意味です。
「スクリプト」の「プレビアス・フレーム／prevFrame();」は、「前のコマへ戻れ」という指示（呪文）です。
「オン・リリース（on(release){　})」と組み合わせることで、「（マウスでクリックした時）前へ１コマ戻る」ボタンを作ることができます。
「プレビアス（Prev(ious)）」と「フレーム(Frame)」なので、「ESC」→「Ｐ」→「Ｆ」で書き込むことができるのです。
「ムービープレビュー」を終了しなさい。
画面下「▼アクション－ボタン」をクリックして、「アクション」パネルを閉じておきなさい。

*1：マウス操作だと、「シマシマ」マークをクリック。
　キーボード操作だと、「Shift」＋「Ctrl」＋「Ｆ」。

●ステップ５：５つの呪文を確認しなさい。

課題１～４の間に、全部で５つの「アクション・スクリプト」を勉強しました。
表にしてまとめておきますので、参考にしてください。

登場順	スクリプト	読み	働き	キーボード操作
1	stop();	ストップ	止まれ！	「ESC」→「S」→「T」
2	play();	プレイ	動け！	「ESC」→「P」→「L」
3	on(release){ 　 }	オン・リリース	クリックした時～（マウスを押して離した時～）	「ESC」→「O」→「N」
4	nextFrame();	ネクスト・フレーム	次のコマへ進め！	「ESC」→「N」→「F」
5	prevFrame();	プレビアス・フレーム	前のコマへ戻れ！	「ESC」→「P」→「F」

「キーボード操作を覚えるのが苦手」という方がいるかもしれません。
ですが「キーボード操作」の方が素早くスクリプトを書き込むことができるので便利です。
「頭文字」さえ意識すれば、「キーボード操作」を覚えることもそれほど難しくはありません。
頑張ってみてください。
~~「kadai3.fla」~~「kadai4.fla」というファイル名で「保存」しなさい。
長くなって来たので、今回の課題はここまでです。
"Flash"を終了しておいてください。
以下余談ですが、今回の課題では、ごくシンプルな「フリップ」を作りました。
シンプルすぎるので、実際の授業に使うには幾つか改良の余地が残っています。
一応、簡単に解決策を書いておきますので、興味のある方は研究してみてください。

１：「最初に戻る（表紙に戻る）」ボタンも欲しい。

課題７まで進めば、作ることができます。
待ちきれない人は「Flash初心者向けサンプル集」にある、「フリップ用操作ボタン」を使ってください。
必要なスクリプトが既に書き込まれている、ボタンの詰め合わせセットです。

→Flash初心者向けサンプル集／4.画像素材

２：マウスで触れたら、ボタンの色が変わるようにしたい。

前回講座を参考にしてください。

→Flash使い方教室１／課題２０：ボタンをパワーアップしなさい。

３：不要なボタンが表示されないようにしたい。

最終フレーム目では「次へ進む」ボタンが表示されない。
そして１フレーム目では「前に戻る」ボタンが表示されない。
このようにしたい場合、解決策は２つあります。
１つ目は「ボタン」レイヤーを２つに分け、上手く配置する方法です。

→赤玉ファイルのサンプル（kadai3+.fla）
２つ目は「Flash初心者向けサンプル集」にある、「自動出現型ボタンセット」を使うことです。
→Flash初心者向けサンプル集／4.画像素材

５：ADHD傾向の子の注意がそれてしまうので、ボタンを目立たないようにしたい。

ボタンを「隠しボタン」や「透明ボタン」にすることで解決します。
「隠しボタン」は、構造が若干複雑になる可能性があるので、ここでは解説しません。
「透明ボタン」の作り方は、次回・課題５で勉強しますので、ご期待ください。

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