クリエイターであるためにFlash待ち受けを出し続ける：D89クリップ（9）（2/2 ページ）

» 2009年06月05日 00時00分公開

[滝沢渚，＠IT]

前のページへ 1|2 　　　　　　

【Step1】企画・手書き

　鉛筆と紙を用意して絵を描きながら企画を考える。ケータイのFlash待ち受けは電池残量や時刻が取得できるので、そのことを頭に入れつつアイデアを練ろう。

　後からトレース（下絵をなぞること）することを考えて、絵を丁寧に描くと効率的だ。

図1　ダーヤマ氏の手描きイラスト

【Step2】スキャン＆トレース

　描いたイラストをスキャンする。スキャナがなければ、デジタルカメラで撮影して取り込むこともできる。

図2　描いたイラストをスキャン

　スキャンした画像をAdobe Illustrator（_※注4以下、Illustrator）に配置し、トレースする。Illustratorがなければ、直接Flashに配置してトレースしてもOK。

※注4：Adobe Illustrator
アドビシステムズが提供しているドロー系グラフィックツール

図3　Illustratorでトレース

　今回は手書き風味を出すために、線を少しよれよれに書く。色を塗る際に、Flashで塗った方が簡単なパーツは、違う色（今回は、青）で線を描いておくと後で作業しやすい。

図4　Flashで塗った方が簡単なパーツを明確にする

【Step3】Flashに読み込み

　新規ドキュメントで、240×320のファイルを作る。

図5　240×320のファイルを作る

　このとき、モバイル用に「Flashファイル（モバイル）」を指定する。縦方向は中心を基点に500pxまで作っておくと、多くの機種に対応できる。

図6　「Flashファイル（モバイル）」を指定

　いろいろな画面サイズのケータイに対応するために、あらかじめ240×320、240×400、240×432などの枠の画像を作ってガイドとして配置しておくと、レイアウトするときに便利だ。

図7　IllustratorからFlashへ大まかに配置

　Illustratorからコピー＆ペーストでイラストにFlash配置し、画像をバランスよく移動する。

【Step4】パーツにして色を付ける

　パーツごとにシンボル化する。これにより、図形やアニメーションが管理しやすくなる。

図8　パーツのシンボル化

　【Step2】で塗り残したパーツに色を付ける。

図9　パーツの要素分解と色付け（富士山）

　［Ctrl］＋［B］キーでイラストを分解して色を塗り、ガイド線を削除する。

【Step5】パーツに動きを付ける

　パーツに動きを付けていく。今回はタイムラインを使ってぱらぱら漫画_{（※注5）}方式で動きを付ける。

※注5：ぱらぱら漫画
アニメーションを作る方法の1つ。静止画を連続で表示することによって映像として見せている

図10　パーツに動きを付ける（画像をクリックすると拡大します）

　左上のタイムラインの1コマ目は羽が上がっている状態、2コマ目は羽が下がっている状態に設定する。常に羽ばたいている動作にするために、3コマ目にループ処理をする。

　後のプログラミングで命令するときに対象の名前を指定するため、インスタンス_{（※注6）}に名前を付けておく。今回は、このインスタンスを「girlmove」と名付ける。

※注6：インスタンス
シンボルのコピー。同じシンボルを参照していれば、ファイルのサイズを小さく抑えられる

図11　インスタンス名「girlmove」（画像をクリックすると拡大します）

　ガールを上下に動かす。この場合は、モーショントゥイーン_{（※注7）}で動きを付けた。

※注7：モーショントゥイーン
移動や拡大、透明度などの設定が可能。アニメーションの開始点と終了点のキーフレームを作成すると、中間処理はFlashによって作成される

図12　ガールが上下に動くモーショントゥイーン（画像をクリックすると拡大します）

　左上のタイムラインで「girl」を選択してモーショントゥイーンを作成する。モーショントゥイーンでは、インスタンスを移動や拡大、透明度などがタイムライン上で設定できる。

図13　ガールが上下に動くループ処理

　「鳥」と同じように、常に動作するようにタイムラインの最終コマにループ処理をする。

【Step6】ActionScriptでプログラミング

　電池残量のActionScriptのプログラムを書き込む。

図14　電池残量プログラム

　今回は電池残量により風船の数が変化するように設定した。残量を取得して「girl」の各ラベルに飛ばす。

　タイムラインに電池残量のパターンを作る。電池残量が0のときに風船を2つ、1のときは4つ、2のときは6つ、電池残量がmaxのときは8つの風船をタイムラインに配置する。

図15　電池残量タイムラインのラベルを作成

　このようにして、完成。

図16　完成図

【Step7】ケータイでどう動くかチェック

　最後にAdobe Device Central_{（※注8）}で、ケータイ上での動作をエミュレート_{（※注9）}してチェックする。

※注8：Adobe Device Central
制作したコンテンツがケータイで正しく動作するのか、検証しながら仕上げることができるソフトウェア
※注9：エミュレート
実際に該当端末／環境で使用できるかどうかを試すために、制作したコンテンツを仮想端末／環境で動かすこと

図17　Device Controlでチェック（画像をクリックすると拡大します）

　右の方の設定項目を入力し確認。電波、電池、日にちなどを設定する。

【＠IT関連記事】

一撃デザインの種明かし
Webサービスのアイデアをデザインとして形にするためのハウツー。まずは、一度会ったら忘れられない名物「漫画名刺」の作り方からスタート！
デザインハック＜リッチクライアント

D89 デザインTips - デザインのハウツーテクニック集
Wデザイン初級者でも分かるデザインツール基礎／応用Tips（ハウツー・小技・テクニック）集です。［写真加工／フォトレタッチ編］［イラスト／ドロー編］［アニメーション編］など、随時公開していきます
デザインハック＜リッチクライアント

デザインツールで始めるSilverlightアニメ/グラフィック
Silverlight 2で.NET技術をカッコよく使おう（3）　「Silverlightってプログラマのものでしょ」と思っていませんか？アニメやグラフィックを制作できるツールもあるんです
「リッチクライアント＆帳票」フォーラム 2009/2/27

「次回」へ

「D89クリップ」バックナンバー