検索
連載

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

トイレメーカーのサラリーマンはいかにしてFlashアニメ作家になったのか？ クリエイターになる1つの方法を聞くとともにFlash待ち受けの簡単な作り方を教えよう

Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

【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クリップ」バックナンバー

Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る