第1回 花びらの描画とシンボル変換 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて


Lesson2 花咲くActionScript -試行錯誤を楽しむ-


Lesson2となる今回からはあらかじめ決まった完成形を求めるのではなく、制作の過程を楽しみながら ActionScriptに親しんでいただきたい。通常の制作現場ではクライアントの要望に沿った仕様に基づき、納期に追われながらひたすら完成形を求め て仕事を進めているはずだ。もちろん私もそうした一人である。多くの仕事をこなすことでFlashのスキルはアップし、作業スピードも上がる。

しかし、何か釈然としない気持ちや焦りが芽生えてきている人もいるのではないだろうか? その多くは自分が習 得・チャレンジしてみたいことと、クライアントから求められる内容との“隔たり”から発生しているように思う。それを払拭するためには、やはり自分なりの 実験、研究を続けていくことが大事だ。そうして身につける技術が現状では要求されていないものでも、いずれ求められることになる。よい研究の成果が出れ ば、逆にクライアントに提案することもできる。チャレンジ精神がおもしろい作品を生み出すのだから。

それでは、楽しみながら実験を始めよう!

(解説:茅原 伸幸)

第1回 花びらの描画とシンボル変換


Lesson2の目標(完成形)を、ひとまず次の作品に定める。


【サンプル1】画面内をクリックしながらマウスを動かしてみよう

■Point 「MovieClip.attachMovie メソッド」と「for文」の組み合わせ


制作過程を楽しむには、できるだけ少ない労力で効果の大きいものがお得感があってよい。Action Scriptの中で最も効率的な使い方ができ、得した気分になれるものは「MovieClip.attachMovie メソッド」と「for文」の組み合わせではないだろうか。

「MovieClip.attachMovie メソッド」はライブラリからシンボルを取得し、ムービークリップに割り当てるものだ。ひとつのシンボルを使い回すことができるため、とても効率がいい。もし、“ActionScript好感度ランキング”のようなものがあったとしたら、必ず上位に入ってくるだろう。「for文」はループ処理を文句も言わずに(たまに、いうことをきいてくれないこともあるが……)、延々とこなしてくれるとてもかわいい存在だ。

「MovieClip.attachMovie メソッド」はとても有効なものだが、アクションスクリプトの勉強を始めたばかりの人にとっては、取っつきにくい存在でもある。まだマスターしていない人は必ず自分のものにしてもらいたい。それでは簡単なサンプルを作って試してみよう。

花びらをシンボルに変換する


まずは、花びらを1枚だけ描画しよう。ここでは精巧に描画する必要はない。整然と並べば、たいていのものがキレイに見えるはずだ。描画したら、花びらを選択しシンボルに変換する【図1】。

【図1】このときにリンケージ項目が見えていなければ、「詳細」ボタンを押して「リンケージ」の項目を表示しておこう



【図1】このときに「リンケージ」の項目が見えていなければ、「詳細」ボタンを押して「リンケージ」の項目を表示しておこう




リンケージの設定


名前を付けた後、リンケージの項目の「ActionScriptに書き出し」にチェックを入れる。すると、「識別子」の入力欄に先程入力した名前(ここではhanabira)が入り、「最初のフレームに書き出し」にチェックが入る。通常はこのままOKでよいだろう。

【図2】識別子の名前はしっかり覚えておこう


【図2】識別子の名前はしっかり覚えておこう


ただ、この「最初のフレームに書き出し」がけっこう“曲者“で、作成したシンボルのサイズが大きい場合は注意したほうがよい。というのもローディングを設置した場合、その設置したフレーム1よりも先に読み込むようになるため、せっかく作ったローディングが機能しないことになる。例えば、なぜかローディングが30%など中途半端なところからスタートする……などというときには、このリンケージを確認した方がよい(特にサウンドをリンケージでActionScriptに書き出しをしている場合に陥りやすい)。もしそうなった場合は、「最初のフレームに書き出し」のチェックを外し、実際に利用するフレームよりも前にステージの見えない位置にでもインスタンスを配置しておくといい。

また、すでに作成済みのシンボルにリンケージを設定する場合は、ライブラリから該当ムービークリップを選択する。右クリック→リンケージ……の手順【図3】でリンケージプロパティを開き、「ActionScriptに書き出し」にチェックを入れ、「識別子」を設定しよう。

【図3】ライブラリからリンケージを変更する場合




【図3】ライブラリからリンケージを変更する場合





無事リンケージを設定したシンボルに変換できたら、花びらをダブルクリック。シンボルの編集画面に入り、基準点をずらしておこう【図4】。

【図4】この基準点を中心に回転させながら配置することになる



【図4】この基準点を中心に回転させながら配置することになる



ここまで準備できたらステージ上から花びらを削除しておこう。ライブラリに登録されているシンボルからインスタンスが動的に生成されるため、ステージ上には何もなくてもOKだ。そして、「フレーム1」のフレームアクションに次のスクリプトを記述しよう。

【図5】図のコメントの説明も参照してほしい


【図5】図のコメントの説明も参照してほしい



「attachMovieメソッド」の内容を解説していくと、まず最初の"hanabira"はシンボルに変換した際にリンケージで設定した識別子のこと。識別子の名前は必ず一致させるようにしよう。次の項目の"hanabira"+iは、ムービークリップに割り当てられる一意のインスタンス名だ。"hanabira"としているが、こちらは識別子と必ずしも同じにする必要はない。iはfor文で0から7までの間を+1しながらループするので、具体的なインスタンス名は「hanabira0」から「hanabira7」までの8つが_rootに配置されることになる。最後のiはインスタンスが配置される重ね順の深度を示している。数字が大きいほど画面前部に表示される。

ここまでが、次のサンプルとなる。


【サンプル2】クリックする度に花の位置が変るのは深度が毎回同じため、先のものと入れ替わっているからだ

今回は導入部で基礎的なことで終わってしまった。次回からこれを元に、いろいろ段階的に発展させていこうと思う。


次回へつづく



[プロフィール]
かやはら・のぶゆき●1972年生まれ、広島在住。広島大学経済学部卒業後、紆余曲折の末、2006年5月に株式会社メディア・パルサーを設立。若手を鍛えながらFlash制作に勤しむ。二児のパパ。
http://www.procreo.jp/


twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在