自分で描いた絵が動き出す！アニメーション×プログラミングを開催した話

2015年1月22日 · in blog

2015/1/18に三重県津市で開催した子ども向けプログラミングワークショップ「自分で描いた絵が動き出す！アニメーション×プログラミング」の様子。

今回のワークショップは三重県文化振興事業団主催の“子どもが楽しめる世界の映画祭” 三重そうぶんシネマスクエア2014 for Kidsの共催イベントとして行いました。メインの映画祭は「１歳からでも映画館で映画が楽しめる」みたいなイベント。

他には声優体験ワークショップ、工作なんかもあり、その内の一つとして子ども向けプログラミングワークショップを行いました。

こんなチラシが周辺市小学校全ての児童に配られた。会場は県立の大きな施設。

来ていただいた人数と年齢

募集は定員20名、多少キャンセルが出るだろうと前日までは21人OKにしていたのですが、前夜に１名、当日５名の方が欠席し、最終的には15名で。

季節がらインフルエンザも流行っており、子ども向けのイベントなので本人はもちろん、親、兄妹のどなたかが調子悪いとキャンセルになっちゃうのですね。年齢は8～12歳。男女比などは下部参照。スタッフは計9名で行いました。

やったこと

共催イベントと言うことで「Scratchで作れて映画に関連する何か」と言うのを考えました。

以前おこなった透過スクリーン×アニメーションでは内容が同じなので（僕が）面白くないし、写真パラパラ映像化、映画のスクリーンで映す、施設建物の何かへのプロジェクションマッピングなども考えたのですが、主催者側と打ち合わせの結果「Scratchを用いてアニメーションを作りでかいところで映し他の来場者に見てもらう」に決まりました。

イベント前の様子。色んな飾り付けがされてて可愛い。完成作品を展示するまではScratchを使った声に反応して動く作品を展示。

PC＆プロジェクタを２セット用意し左右でつながる１つの作品にした

自分が作った作品で皆が遊んでくれるのはすごく嬉しく、ずっと見ていたかった

本作品ができあがる夕方まで流していたScratchを使った音に反応する作品の動画（音量注意）

流れ

Scratchの操作説明（○歩動く、繰り返し、ペイント）
絵を２つ用意しアニメーションさせる（元画像を編集し絵を増やす）
紙に作りたい作品を書いてもらう
紙に作品の動いてほしいところを丸してもらう
紙に「マイクで声を出したとき」 or 「端についたとき」に、何が起こって欲しいかを書いてもらう
紙に従いScratchで絵を描く
紙に従いScratchでプログラムをかく
マイクに反応して特定位置に移動するスクリプトの配置
「スプライトの書き出し」で絵+スクリプトのみ保存
USBメモリで回収
２つのプログラムに回収した各スプライトを読み込む
少し修正
２台のPCでそれぞれScratchを起動し、プロジェクタでつながって表示させ展示

やって良かったのが、いきなりPCの前で作り出すのではなく一端紙に書かせたところ。

これは以前センサーボード+Scratchを使った工作ワークショップをしたときに、見学に来ていた元学校の先生にアドバイスを頂いた部分で、PCの前だと勢いでやってみる→失敗を繰り返し無駄に時間を食ってしまうのですが、まずは紙に考えをまとめてから作り出すと、PC上で上手く絵が描けなくても他の絵に挑戦せず紙を見ながらなんとか頑張れるなど、結果として早く成果物ができました。急がば回れ。

紙に書いて貰うことで考えもまとまるし、色んな意味でぶれなくなり時間短縮につながった

印象的だったのは男の子と女の子で作られるキャラクターが異なることと、下級生よりも上級生の方が絵を描くのに時間がかかること。下級生はガッーーーと書いて完成するのですが、上級生は書いたり消したりを繰り返していました。出来ることが増えると色々やりたくなるんですかね。

何コレ？「ナマコ」

ピンクのイルカ！

ががーっと書いていく下級生達

上級生は納得いくまで何度も書き直す

座席はコの字型にしてスタッフが動きやすく

休憩時間に入り口の作品を見て貰ったりの図

あと、今回初めて（本人の希望で）経験者の子にアドバイス役をやってもらいました。始まった直後は大丈夫かなぁと言う対応だったのですが、中盤からはガンガン質問に答え、各参加者のマウスを取り上げ希望を叶えて行っていました。参加者の子どもも年齢が近いせいで質問しやすかったみたい。

大人は「教育的にこちらが作ってしまっては」や「考える力を伸ばすために」なんて考えて、なかなか突っ込めないのですが、質問した方も「へーこうすれば良いんだ」みたいな感じで進め、なんだかうまくいってるように見えました。

スタッフのたくろうくん。ざくざく答えてかっくいい。写真がうしろ姿しか無くてごめん。

スプライトの書き出しを使うと、絵とスクリプトのみ単体で書き出すことができる

大変だったのは回収したスプライトを１つのプロジェクトにまとめ、こちらの想定通り動かす（声に反応して特定座標へ移動）こと。他のイベントとの兼ね合いで大きなスクリーンで発表する開始時間が決まっていたのですが、各自のプログラムはかなり自由に書かかれてるので、短時間で修正するのがかなり大変でした。

終わってお疲れの参加者と、右後ろでスタッフがまとめ作業に苦しんでいる様子

で、最終的にできた作品はこちら。

映像ではわかりにくいのですが、各自が作った海の生き物達が、声に反応して大きな魚になります。若干、自由に動く魚もいましたが概ね見られる感じになっており、参加者だけはなく不特定多数の人に見てもらい、声を出して遊んでもらえて、作った子供たちも楽しそうでした。

スイミー＆チームラボ「お絵かき水族館」へのオマージュ。映画の終了時間にあわせての発表だったので沢山の人に見てもらえた

こんな感じで２つに別れてます

出来上がった作品

午前中のデモ作品

子ども達の反応

アンケートは展示前に取ったものです（時間の関係で後ほど掲載ます）。いつもよりも30分長くやった（計2.5時間）ため、殆どの子供が「長かった」と言っていますが、最後は１時間強休憩なしだったのでコチラのミスです。ごめんなさい。ほぼ全員が「面白かった」に付けていてうれしいです。「次回も来たい」も多くなっていますが、今までは広報系に載ったイベントの次回へのリピート率は低く（親御さんがWeb検索して来てる方のリピート率は高い）、今回はどうなのかは気になります。

広報系からの参加者のリピート率の低さに関してはずっと気になっていたのですが、やっぱり親御さんが積極的でないと?（なんとなくの想像）家で一人でやってても出来ることが限られてて飽きちゃうのかなぁと感じてます。ここに関しては今まではScratch2.0の「中を見る」（ソースコードを見る機能）を最後に説明していたのですが、今回は積極的に書籍を勧めました。”中を見る”は他人のコードなので初心者にはハードル高い。

最後じゃんけん大会でプレゼントとかしたら楽しそうなので良かったら送ってくださいw ＞日経BP社さん、カットシステムさん。

おすすめした本たち

最後に

今回は用意も大変で参加人数も多く疲れましたが、プログラミング？って方にもチラシを沢山配れ、やって良かったイベントでした。

一緒に頑張ってくれた、青柳さん、田中さん、阪さん、松浦さん、河村さん、山下さん、たくろうくん、めぐー、参加してくれた皆さん、作品で遊んでくれた皆さん、文化センターの山舗さん。ありがとうございました。

LittleCoderMieでは今後も楽しいイベントをやってく為に、皆さんのご協力（＝寄付）、「若い人材」を募集中です。詳しくはトップページをご覧ください。

次回は春に開催予定です。

メンバーの方の記事

違う視点からのレポートで楽しいです。

シネマスクエア2014 for Kids × Little Coder Mieを開催しましたよ、という話 / 阪さん@ジーニーズ
http://blog.genies.jp/2015/01/2014-for-kidslittle-coder-mie.html
「楽しい」をサポート / 河村さん@b-Cafe
http://bcafe2.mie1.net/e530459.html