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

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

[滝沢渚,@IT]
前のページへ 1|2       

【Step1】企画・手書き

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

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

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

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

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

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

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

  • ※注4:Adobe Illustrator
    アドビシステムズが提供しているドロー系グラフィックツール
図3 Illustratorでトレース 図3 Illustratorでトレース

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

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

【Step3】Flashに読み込み

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

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

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

図6 「Flashファイル(モバイル)」を指定 図6 「Flashファイル(モバイル)」を指定

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

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

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

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

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

図8 パーツのシンボル化 図8 パーツのシンボル化

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

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

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

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

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

  • ※注5:ぱらぱら漫画
    アニメーションを作る方法の1つ。静止画を連続で表示することによって映像として見せている
図10 パーツに動きを付ける(画像をクリックすると拡大します) 図10 パーツに動きを付ける(画像をクリックすると拡大します)

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

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

  • ※注6:インスタンス
    シンボルのコピー。同じシンボルを参照していれば、ファイルのサイズを小さく抑えられる
図11 インスタンス名「girlmove」(画像をクリックすると拡大します) 図11 インスタンス名「girlmove」(画像をクリックすると拡大します)

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

  • ※注7:モーショントゥイーン
    移動や拡大、透明度などの設定が可能。アニメーションの開始点と終了点のキーフレームを作成すると、中間処理はFlashによって作成される
図12 ガールが上下に動くモーショントゥイーン(画像をクリックすると拡大します) 図12 ガールが上下に動くモーショントゥイーン(画像をクリックすると拡大します)

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

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

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

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

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

図14 電池残量プログラム 図14 電池残量プログラム

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

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

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

 このようにして、完成。

図16 完成図 図16 完成図

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

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

  • ※注8:Adobe Device Central
    制作したコンテンツがケータイで正しく動作するのか、検証しながら仕上げることができるソフトウェア
  • ※注9:エミュレート
    実際に該当端末/環境で使用できるかどうかを試すために、制作したコンテンツを仮想端末/環境で動かすこと
図17 Device Controlでチェック(画像をクリックすると拡大します) 図17 Device Controlでチェック(画像をクリックすると拡大します)

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

【@IT関連記事】

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

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

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


「D89クリップ」バックナンバー
前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。