livedoorlivedoor ネットアニメ
livedoor | ネットアニメ > FLASHで作るはじめてのネットアニメ

FLASHで作るはじめてのネットアニメ

公開日:8月13日第3回

キャラクターを動かしてみよう(その1)

歩かせることが文字通りの第1歩。違和感を感じさせず歩かせるにはコツが要ります。さっそくその極意を公開

「鉛筆」ツールでトレスしてパーツごとに素材を作ろう

月見堂:それでは、実際に動かしていきましょう。

なかしま:お願いしまーす。がんばって動かしますよ!

月見堂:イイですね!ここからが本編みたいなものですから(笑)

月見堂:それでは、「新規でファイル」を作成してください。

なかしま:メニューの「ファイル」から新規……で、「AS3,0」を選ぶ…っと。

月見堂:OKです。ちなみに「AS3.0」とは今回から追加されたアクションスクリプトのバージョン3.0の事です。今回の企画にはあまり関係ないです。

なかしま:白いステージのあるまっさらな状態ができました。

月見堂:それではまず「ステージ(画面)のサイズ」を決めましょう。
テレビでいうと「インチ」サイズの事です。コレが大きいほど大きく表示出来ますが動画にしたとき描画に負担がかかるため再生速度が重くなる場合があります。

なかしま:ほぉー。

月見堂:デフォルト(初期設定)ですと、「550X400」ピクセル(px)になっていますが、ネットアニメでは横幅「320」px、縦幅「240」pxが応募規格になっているので、今回はこれにあわせる形でいきましょう。

なかしま:えっと……、「プロパティ」から、「サイズ」をクリックして「320X240」ピクセルにしました。(※ W:横幅、H:縦幅)

月見堂:それで「Enterキー」を押すと、多分白い……

なかしま:あれ?有効ではないと出てきてしまいました!!!!

月見堂:えっと……。「全角」ですねソレ(笑)数字は必ず「半角」で入れてください。

なかしま:「全角」ではだめなんですかぁ?

月見堂:残念ながら。英数字は必ず「半角」でお願いします。では、次は「フレームレート(fps)」を設定しましょう。

なかしま:「フレームレート」……ですか?

月見堂:はい。「1秒間に何枚の画を表示するか」いう数値になります。通常TVアニメーションでは「24」fpsが一般的ですが、今回は最初ですし特にこだわる必要もないのでそのままデフォルト設定の「12」fpsで行きましょうか。

なかしま:もし「12」fpsを「24」fpsに変えたとしたら、何が変わるんでしょうか?

月見堂:簡単に説明しますと、動きが「2倍」滑らかになります。下のムービーを参考にしてみて下さい。ここは、実際に作る人がいろいろいじってみて、体感して、自分が一番タイミングをつかみやすい自分なりのフレームレートを見つけてもらえればと思います。

■月見堂の補足

ちなみに実写や映画では「30」fpsが一般的です。理論上、fps数値が高いほど1秒間の表示枚数は増えますが、Flash(swf)の場合、使用している画素材が複雑などの理由で画面の描画に負担がある場合などは再生するPC環境によっては必ずしも設定したfpsで再生されるとは限りませんのでご注意下さい。これは実際の設定fpsと同期をはかるためのFlashの仕様です。ですから「パス」の少ないベクター画像などで軽めの画素材で作っておくなどもテクニックの一つですね!

なかしま:はい。

月見堂:それでは、先ほどのサイズを設定した「プロパティ」をもう一度開いてください。下に「フレームレート:12」と設定されているのを確認して下さい。

なかしま:確認しました!

月見堂:では、早速なにか素材を配置してみましょうか? とりあえず舞台(背景)を用意しましょう。第2回で作成した「02_06.zip」から最初の背景を抜き出しましょう。前回それに画コンテを元に作った素材をまとめておきましたよね?

なかしま:(データを開いて)えっと、欲しい背景をクリックして、「水色の枠」でちゃんと選択出来てるのが確認出来たら「コマンド(ctrl)+C」でコピーですよね。

月見堂:OKです。ではさっき新規作成したflaのほうのをまたアクティブにしてそちらの「レイヤー」へ貼り付け(ペースト:「コマンド(ctrl)+V」)ます。では、「レイヤー1」の「フレーム1」を選択してください。レイヤーには、分かりやすく画像のように「背景」など分かりやすく名前をつけておきましょう。「レイヤー名」をダブルクリックでリネーム出来ます。

なかしま:あれ・・・?
貼り付けたらステージが背景で隠れてわからなくなっちゃいましたね・・。

月見堂:ほんとですね。じゃあどこが実際のステージ範囲なのか作業中でも常にわかるように「ステージ枠」を一番上のレイヤーに作っておきましょうか。まずは「矩形ツール(R)」をつかって適当に四角形を作りましょう。

なかしま:「矩形(くけい)ツール」ってこれですか?

月見堂:そう、その四角いアイコンです。そのタブを選択したら「バケツツール」の選択色は無し、「鉛筆ツール」の色は視認性の高いビビットな「赤」にでもしましょうか。できたらステージ上でドラックして適当な四角形を作ってみて下さい。

なかしま:グイーーーーーンと・・・できました! でもこれステージの四角形とはなんか微妙に違いますよね・・。

月見堂:そのとおりです。なのでその作った枠を選択してステージのサイズと全く同じサイズの四角形にします。その四角形を選択して先ほどと同様「プロパティ」で「320×240」ピクセルに変更しましょう。

月見堂:で、ちょっと背景を消して実際のステージの位置を確認してみると・・・やっぱズレてますよね。

月見堂:作った「ステージ枠」をきっちりステージの四隅にあわせるように配置するためにここで「整列」パレットの説明をしてしまいましょう。メニューの「ウィンドウ(W)」→「整列(G)」、もしくは「コマンド(Ctrl)+K」で「整列」パレットが画面右に表示されます。

月見堂:これが、「整列」パレットです。オブジェクト(画素材)をきれいに整列させたいときに使います。

月見堂:先ほど作成した「赤枠」をしっかり選択したのを確認したら「整列パレット」の「ステージを基準」をクリックで選択しておき、「整列:」の「中央揃え(垂直方向)」と「中央揃え(水平方向)」をクリックして下さい。これで枠がステージを囲うようにど真ん中に来ましたね。
この赤枠内が「画面」です。こうやって派手な色で作っておくと素材がごちゃごちゃしてきたときでも実際の表示領域がわかりますよね。
一番上のレイヤーに作ってそのレイヤーを「ロック」しておいて下さい。背景を再表示して位置調整してみると・・・この「ステージ枠」内を撮影の対象領域として以降作業して行きます。この赤枠の外は撮影対象外という事です。

なかしま:ほぉー。

月見堂:ここまでステージの準備をざっと説明しました。

ダウンロードするここまで説明した結果のflaファイルをダウンロードできます。準備されたステージをご確認ください。

なかしま:「ステージ(画面)サイズ」を決めて、「フレームレート(fps)」を設定し、「整列パレット」を使用して画面に枠を作成する、という事ですよね?

月見堂:そうです。では、次から実際にこけももさんを動かしていきましょう。

前へ
次へ

1 |  | 

トップに戻る

広告