Flashを教材として使う!

千秀小、2組(個別支援級)のコンテンツを見てもらえばわかると思いますが、「変身!絵しりとり!!」というコンテンツを作っています。今では子どもがパソコン起動から終了まで全て一人でやっています。

絵しりとりの構造は次の通り。
レイヤー5つ
1.アクション
2.テキスト(しりとりの言葉)
3.nextボタン
4.backボタン
5.絵

各レイヤーを説明する前に、絵しりとりは15フレーム単位で構成されていることを断っておきます。

1.アクションレイヤー
アクションレイヤーとは、Flashを作る上で必ずと言ってよいほど作るレイヤーです。
オブジェクトはからっぽ。ムービーをコントロールするためのActionScriptを記述するためのレイヤーです。
一応初心者のために、ActionScriptとは、JavaScript(ECMAScript)から派生したFlash独自のプログラミング言語です。
絵の入っているフレーム(最初だけ1)1、15、30、45、、、フレーム(15の倍数フレーム)にはムービーを停止するstopの命令を入れます。そして次のフレーム(15の倍数+1フレーム目)には再びムービーを再生するためのplayの命令を入れます。これで絵のあるフレームでアニメーションが停止し、それ以外では再生する仕掛けができました。

2.テキストレイヤー
説明はとくにいりませんね。1フレーム目と15の倍数フレームに絵に対応するしりとりの言葉をいれます。

3.nextボタンレイヤー
絵の入っているレイヤーにくるとムービーは停止します(Actionレイヤーによって)。なので、次に進むためにボタンを配置します。
ここで気をつけなければいけないことは、ActionScriptをフレームに記述するのではなく、ボタン(インスタンス)に記述することです。配置したボタンに「ボタンの上でマウスをクリック(正確にはマウスボタンを押して話したタイミング)したら次のフレーム(15+1フレーム目)に進む」という命令を記述します。これはNextFrameという関数が用意されています。
絵の入っているフレームの次にフレームにジャンプさせれば、あとはActionレイヤーの命令でムービーが再生され、また絵の入っているフレームで停止してくれます。

4.backボタンレイヤー
nextボタンレイヤーに似ていますが、命令の要領が異なります。
nextボタンレイヤー同様、絵の入っているレイヤー(15の倍数フレーム)に一つ前の絵に戻るためのボタンを配置します。戻る必要がなければいらないレイヤーではありますね。
ただし、「一つ前のフレームに戻る」という命令では、ムービーは再生が続いているのですぐにもとのフレームに戻ってしまいます。なので、一つ前の絵のフレームまで戻るように命令を記述します。注意点は同じく、フレームに記述するのではなく、インスタンスに記述するということです。「ボタンの上でマウスをクリックして話したら:on(release)、○フレーム目に行く:goto(”現在のフレームマイナス15”)」と記述します。
これで、前の絵まで戻ります。そして絵の入っているフレームにはActionレイヤーにて停止の命令が入っているので止まるということですね。

5.絵レイヤー
これがコンテンツですよね。15の倍数フレームに、絵を描いていきます。ただし、インスタンスではなく、線と塗りだけで描きます。
絵が描けたら、15の倍数+1フレーム目をクリックして、プロパティからトゥイーン「シェイプ」を選びます。
これで完成です☆シェイプトゥイーンというのは、初めのフレームと最後のフレームから自動的に間のコマを作ってくれるものです。これがFlashの一番の醍醐味じゃないかな。Flashは実は非常にシンプルなものですよね。要領としてはぱらぱらマンガと一緒なのだから。


注意点は、絵はなるべくシンプルな構造にすること。四角形ツールやペンツールを利用して、できる限りブラシツールは使わないことです。
Flashはファイルサイズが非常に小さいですが、トゥイーン部分は演算処理のため、クライアントPCのスペックに大きく依存します。ブラシで細かく絵を描くと、トゥイーンするのがとても遅くなってしまいます。

安価なFlash Makerなどでどのように作れるかはしりませんが、Flashをお持ちの方はぜひ試してみてください。
子どもでできるようになるくらいですから、楽しいですよ☆
情報としては、本家Macromediaからバージョン8が出て、エントリーユーザー向けにFlash Basic 8があります。あ、でもエデュケーション版で通常のものを買ったほうが安いか。個人的には統合ソフト「Studio8」を強くオススメします。
2005年11月17日(木) 21:48:00 Modified by web_encounter




スマートフォン版で見る