Flash 使い方教室

作成者：TOSSオホーツク・山田正和
作成日：2003年 2月23日(日)
最終更新日：2003年 2月25日(火)
修正箇所：ステップ５へ若干の加筆修正。

課題１２：４枚の用紙（フレーム）に書きなさい。

●ステップ１：１枚目の用紙に「赤」と書きなさい

フラッシュカードを知っていますか？
かけ算九九や英単語などを唱えさせる時に使う、紙のカードです。
今回は、Flash でフラッシュカードを作ります。
Flashで作る動画の基本形がフラッシュカードだからです。
まず、FlashMX を起動しなさい。
ステージ一杯の大きさに「赤」と書きなさい。(*1)
色や書体は好きなもので構いません。
紙のフラッシュカードを作るには、ケント紙や白ボール紙を使います。
イメージしてください。今、１枚目の紙に大きく「赤」と書いたところです。

*1：覚えていますか？　「テキストツール」で字を書いてから、「自由変形ツール」で拡大するのです。

●ステップ２：２枚目の用紙に「ｒｅｄ」と書きなさい

では、２枚目の紙を用意しましょう。
画面の上の方に、「タイムライン（時間割）」パネルがあります。
「タイムライン」の２コマ目を右クリック。
メニューの上から５行目、「空白キーフレームの挿入」をクリック。
ステージが真っ白になりますが、驚かないでください。
「赤」と書いた１枚目の上に、新しい２枚目の紙が重なっているだけです。
「タイムライン」の１コマ目をクリックすれば、いつでも１枚目（「赤」と書いた用紙）を見ることができます。
試しに「タイムライン」の１コマ目をクリックしてごらんなさい。
１枚目（「赤」と書いた用紙）がステージに表示されます。(*1)
「タイムライン」の２コマ目をクリックしなさい。
２枚目（新しい白紙の用紙）がステージに表示されます。(*1)
２枚目の用紙に大きく「ｒｅｄ」と書きなさい。(*2)
色や書体は好きなもので構いません。全角・半角も、どちらでも構いません。
イメージして下さい。あなたの手もとには、「赤」と「ｒｅｄ」の２枚の紙が重ねて置いてあります。

*1：念のために書いておきますが、ここに貼ってある説明画像は合成写真です。
　「タイムライン」の一部と「ステージ」の一部を貼りあわせています。
　１００％同じ画面にならないからと言って、あせらないでください。

*2：「テキストツール」で書いてから、「自由変形ツール」で拡大です。
　３文字に増えましたが、ステップ１と全く同じ手順です。

●ステップ３：３～４枚目の用紙に書きなさい

たった２枚のフラッシュカードでは、さみしすぎます。
３枚目と４枚目を作ってから「書き出し」してみましょう。
まず、３枚目に「青」と書きます。
「タイムライン」の３コマ目を右クリック。
メニュー５行目、「空白キーフレームの挿入」をクリック。
３枚目の用紙に大きく「青」と書きなさい。
色や書体は好きなもので構いません。
続けて４枚目に「ｂｌｕｅ」と書きます。
「タイムライン」の４コマ目を右クリック。
メニュー５行目、「空白キーフレームの挿入」をクリック。
４枚目の用紙に大きく「ｂｌｕｅ」と書きなさい。
色や書体は好きなもので構いません。全角・半角も、どちらでも構いません。
イメージして下さい。あなたの手もとには、「赤」「ｒｅｄ」「青」「ｂｌｕｅ」の４枚の紙が重ねて置いてあります。

●ステップ４：フィルムのように並べてみなさい

ステップ１～３で書いた用紙を、確認してみましょう。
４枚の用紙を、横にズラッと並べてみるのです。
「タイムライン（時間割）」の右上、漢字の「王」が横になった記号があります。
その「横の王さま」記号をクリック。
メニューの一番下、「全体のプレビュー」をクリックしなさい。
「タイムライン（時間割）」に、４枚の用紙がズラッと並びます。
まるで映画のフィルムのように見えますよね？
映画のフィルムの１コマ１コマを、英語で「フレーム（Frame）」と言います。
そのため「タイムライン（時間割）」に並んだ１コマ１コマも、「フレーム」と呼びます。
ステップ１～３の作業を、「フレーム」と言う言葉を使って言い直してみます。
ステップ１：１フレーム目に大きく「赤」と書いた。

ステップ２：２フレーム目に大きく「ｒｅｄ」と書いた。

ステップ３：３フレーム目に大きく「青」、４フレーム目に大きく「ｂｌｕｅ」と書いた。
全てのフレームをズラッと並べる、「全体のプレビュー」は大変便利な機能です。
ですが小さい画面をいくつも並べるため、モニターが小さなノートパソコンではステージが見づらくなってしまうことがあります。
また古いパソコンの多くは、画面表示能力が低いため、機械に負担がかかってしまいます。
ですから、「全体のプレビュー」は必要最小限の利用にとどめた方が無難です。
確認が終ったら、「タイムライン（時間割）」を元の状態に戻しましょう。
「タイムライン（時間割）」の右上、「横の王さま」記号をクリック。
メニュー上から３つ目、「標準」をクリックしなさい。

●ステップ５：書き出しなさい

では、作ったフラッシュカードを書き出してみましょう。
まず"kadai12.fla"の名前で保存しなさい。
保存する場所はもちろん「Flash使い方教室」フォルダです。
「Ctrl」＋「Enter」で書き出しなさい。
周りのパネルが消えて、「ムービープレビュー（試写会）」画面になります。
驚きましたか？
あまりにも速いスピードで、「赤」→「ｒｅｄ」→「青」→「ｂｌｕｅ」と表示されるので、面食らった人も多いことでしょう。
こんなスピードのフラッシュカードでは、授業に使うことができません。
ですから、カードをめくる速さを変えます。
いったん、「ムービープレビュー（試写会）」を終りましょう。
画面右上、２段目の「×」をクリックするのです。
「プロパティ」パネルを開きなさい。
「プロパティ」パネルの右の方に、「フレームレート」という欄があります。(*1)
今「フレームレート」が「１２ｆｐｓ」になっています。
これは「１秒間に１２枚の用紙（フレーム）をめくる」という意味です。(*2)
「１秒間に１２フレーム（０.０８３…秒で１コマ）」では速すぎて当然です。
「フレームレート」の「１２ｆｐｓ」の欄をクリック。
キーボードを使って、「１２ｆｐｓ」を「２ｆｐｓ」に書き直しなさい。（*3）
「２ｆｐｓ」は「１秒間に２枚の用紙（フレーム）をめくる」という意味です。
学級の実態にもよりますが、フラッシュカードとして授業で使うなら、このぐらいの速さ（０.５秒で１コマ）でないと困ります。
では、もう一度「Ctrl」＋「Enter」で、書き出してみましょう。
「ムービープレビュー（試写会）」の表示スピードが、「１秒間に２枚の用紙（フレーム）をめくる」になっていますよね？
画面右上、２段目の「×」をクリックして、「ムービープレビュー（試写会）」を終りなさい。
今日は、先に"FlashMX"を終了しましょう。
「フレームレート」を変えたので、まず上書き保存します。(*4)
"FlashMX"を終了しなさい。

*1：「プロパティ」パネルの表示が画面写真と違う場合は、「矢印ツール」でステージに何も無いところクリックしてみてください。

*2：数学になってしまいますが、「フレーム・パー・セカンド（Frame Per Second）」で「ｆｐｓ」です。

*3：書き直した後、「Enter」を押すのを忘れないでください。

*4：画面左上「ファイル」→「保存」です。

●ステップ６：全画面表示で確認しなさい。

「デスクトップ」上の「マイドキュメント」をクリック。
「Flash使い方教室」フォルダを開いて、"kadai12.swf"をダブルクリック。
「フラッシュプレイヤー」が動き出して、今回作ったフラッシュカードを表示します。(*1)
「Ctrl」＋「Ｆ」で全画面表示にしなさい。
今回作った、フラッシュカードは Flash の基本形です。
全てのFlashコンテンツは、フラッシュカードの発展形なのです。
ですから今回の課題を無事クリアできた方は、安心してください。
少しずつ勉強すれば、あなたにも、もっと複雑なコンテンツを作ることができます。
「Ctrl」＋「Ｆ」で全画面表示を終了。
「×」をクリックして、フラッシュプレイヤーを終了しなさい。
今回の学習はここまでです。
時間と気力に余裕のある人は、５～６枚目のフレームを書き足したり、フレームレートを変えてみても構いません。

*1：今回作ったフラッシュカードは、授業で使うには、ちょっと機能が足りません。
　一時停止・逆回転・速度変更などの機能が欲しいところです。
　今回のフラッシュカードに、もう少しだけ機能を追加したものが「Flash初心者向けサンプル集」にあります。
　興味のある方は「改造用雛形」のページを見てください。

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