連載
» 2009年06月25日 00時00分 UPDATE

一撃デザインの種明かし(4):常識破りの携帯Flashアニメーション術 (1/2)

携帯Flash開発で、アウトラインの制限をなくし、より豊かなアニメーションにする方法や、空間を感じさせる演出、最適な再生速度を考える

[カヤックモバイル$,面白法人カヤック]

 連載第2回「ケータイFlashでさくさく動くIllustratorデータの作り方」の記事でも紹介した“ポケットフレンズ・コンチ”。

 連載第2回では、『携帯Flashで動かしやすいキャラクターデザイン』をテーマにIllustratorデータ作成のテクニックを解説しました。

 今回は、そのコンチを実際に携帯Flash(Flash Lite)で動かしてみます。

携帯Flashの常識を打ち破れ!

 携帯Flashでキャラクターを動かす際、処理速度が遅い、データが重い、アニメーションが制限される、という理由でアウトラインがないキャラクターをデザインすることが常識とされてきました。

 が、連載第2回でも解説しましたが、ビジュアルを重視する“ポケットフレンズ・コンチ”では、デザインを優先するためアウトラインを保持しつつも、アニメーションの質を下げないようにいろいろと工夫をしています。

着せ替えて自分の好きなコンチを作ることができるだけでなく、いろんな動きを覚えさせられます こんな自分だけの携帯待ち受けも作れます

 処理速度やデータ容量については、連載第2回の記事をご覧ください。ちなみに、アウトラインがある場合にアニメーションがどのように制限されるかというと、このようになります。

アウトラインがあると関節の稼働領域が制限される

 このように線が切れてアニメーションが不自然になってしまうため、アウトラインがあるとパーツをあまり動かすことができません。

制限を感じさせないアニメーション

 アウトラインが付いていると関節の稼働領域が制限されるので、大半のFlashアニメーターは嫌がるものです。

 しかし、工夫をすれば意外と苦にはなりません。“歩き”の動作でどういう工夫をしているか見てみましょう。

コンチの通常の歩き

 このアニメーションで工夫しているポイントは……、

傾斜変形がポイントですね

 アウトラインを体にめり込ませないだけで、足が後ろに行っているように見せることができます。機嫌がいいときはコンチを跳ねさせてみましょう!

コンチをちゃんとお世話すると機嫌が良くなります

 これは“歩き”を基に簡単に作れます。

これは簡単!

 ひとコマ追加するだけでも動きにバリエーションを出せます。続いて、横だけでなく前にも歩かせてみましょう。

サービス中にこの動きはまだありません

 前歩きの方が簡単です。

一番単純な動作です

 このように、ちょっとした工夫でアウトラインの制限はなくなり、より豊かなアニメーションを付けられるようになります。

       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

Touch Barという新UIを得た「MacBook Pro」、プレゼント!

この記事に関連するホワイトペーパー

RSSについて

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

メールマガジン登録

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