はじめてのflash

《#20》 3D変換（3）

DigiCon6.com管理人 — 2010-02-05T14:48:51+09:00

Digicon Magazine読者のみなさんこんにちは、ななきちです。

今回は、3D空間内での移動しているように表現できる［3D変換］ツールを使って、3D効果を使ったアニメーションを作成します。

まず最初に3D変換ツールの動きを紹介します。続いて、サンプルを一緒に仕上げましょう。

緑ラインはY軸（縦）方向に、赤ラインはX軸（横）方向に、XY軸の中心の点はZ軸（奥行き）方向に移動します。XY方向は、［選択］ツールでオブジェクトを縦横に移動したのと同じですが、Z軸を移動したときのオブジェクトの変換に注目してください。

ドラッグに合わせて奥行を表現するため、オブジェクトのサイズが変化します。

上へドラッグすると奥へ、下へドラッグすると前へ移動しているように変化します。

まずは、自由にドラッグしてみて、［3D変換］ツールの動作を試してみて下さい。

3D変換の解除

移動の設定を解除して元のオブジェクトの形状に戻したい場合は、オブジェクトを選択したまま、メニューバーから［修正メニュー→変形→変形の解除］を選択します。

変形の解除を実行すると、オブジェクトのサイズと位置が元に戻ります。

ここまでで、［3D変換］ツールの機能紹介は終わりです。

3D変換ツールを使ったアニメーション

次に、サンプルファイル「3Dtrance_start.fla」ファイルを開きます。

このファイルのロゴはシンボルインスタンスに変換されています。また、［タイムライン］は45フレームが用意され、モーショントゥイーンが作成されています。

ステージで、「Hello,」の文字を選択します。
次に、［タイムライン］パネルで15フレーム目を選択しておきます。

［3D変換］ツールでオブジェクトを移動し、右上の奥にあるようなイメージを作ります。

Z軸を右上にドラッグしていき、オブジェクトを縮小します。

Y軸を上方向にドラッグします。

X軸を右方向にドラッグします。

次に、［タイムライン］パネルで30フレーム目を選択します。

Z軸を下方向に動かしてオブジェクトを拡大、Y軸を下方向にドラッグ、X軸を右方向にドラッグして、新たな位置に配置します。

Z軸、Y軸、X軸をそれぞれ移動します。シンボルインスタンスを移動すると、モーショントゥイーンでどのようにオブジェクトが移動しているかを表す点線（ここでは、レイヤーと同じ紫色の点線）も表示されます。

45フレーム目を選択しておきます。

ここでは、アニメーションのループが自然になるように、ロゴを、1フレーム目と同じ場所、同じサイズに戻します。ドラッグしても調整できますが、数値でコントロールすると簡単です。

シンボルインスタンスを選択し、［プロパティ］パネル（表示されていない場合は、ツールバーの［ウィンドウ→プロパティ］を選択）の「3D 位置とビュー」で、1フレーム目の状態とい同じ数値、「X：47」「Y：120」「Z：0」に指定します。

Enterキーを押すと、次のようなアニメーションが確認できます。また、メニューバーから［ファイル→パブリッシュ］を実行するか、Ctrl＋Enterキーでパブリッシュプレビューを実行してFlashムービーを作成できます。

45フレーム目

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

続いて、15フレーム目、30フレーム目とも、［3D回転］ツールで、それぞれアイコンを変形した状態にしました。

3D回転ツールに切り換え

15フレーム目

30フレーム目

Enterキーを押して再生するなど、してみましょう。シンボルインスタンスの移動位置によって多少違ってきますが、最初に紹介したような立体ロゴモーションのムービーができあがっているはずです。

いかがですか？

このように、Flashのモーショントゥイーンに3D効果を加えることで、より迫力のあるムービーが手軽に作成可能になります。

《#19》 3D回転（2）

DigiCon6.com管理人 — 2010-01-22T15:41:54+09:00

Digicon Magazine読者のみなさんこんにちは、ななきちです。

前回は、Flashの3D空間表現の機能をはじめて使いました。その際使用したのが3D回転ツールですが、このツールでできる回転方法には、さまざまなものがあります。

そこで今回は、もう少し丁寧にこのツールの機能をおさらいしておきましょう。

ここではサンプルファイルのなかの「3Dposition.fla」を新たに開き、使用します。あらかじめ中心軸を移動しやすいようにオブジェクトを移動してあります。まず、とらのシンボルインスタンスを選択しておいて、［3D回転］ツールに切り換えます。

中心点をドラッグすると、自由な位置に移動できます。

中心位置あたりまで移動しました。

Y軸をドラッグしてみます。すると、オブジェクトが前に飛び出したり、奥にひっこんだりするように見えるでしょう。

時計回りに回転すると前のほうにオブジェクトが飛び出してきます。

そのままドラッグすると回転して、奥のほうへ

また先ほどと変わった効果ができますね。

もちろん、X軸、Z軸などの移動も可能です。

中心点を元の位置（オブジェクトの中央）に戻すには、中央点の上でダブルクリックします。

グローバル変形モード

この3D回転ツールには、［グローバル変形］オプションがあります。通常はこれがオンになっていますが、クリックでオフにすると、それぞれのガイドが球（3D）の状態で表示されます。

クリックしてオフにする

表示が変更されました

どちらでも、感覚的に使いやすいほうをお使いください。表示を元に戻すには、もう一度［グローバル変形］のオプションボタンをクリックします。

次は、複合的に操作をして、サンプルのムービーを仕上げます。

では、また次回！

《#18》 3D回転（1）

DigiCon6.com管理人 — 2010-01-08T14:55:22+09:00

Digicon Magazine読者のみなさんこんにちは、ななきちです。

Flashでは、擬似的な立体感（3D空間）を表現することができます。
オブジェクトを奥行きのあるかたちに変更したり、奥行きを感じさせるアニメーションも作成することができます。
今回から数回にわたって、3D空間を使ったアニメーションを作成していきましょう。

Flashでは、オブジェクトをあたかも奥行きがある空間内で回転させているように変形させる「3D回転ツール」と、オブジェクトを3D変換し移動を可能にさせる「3D変換ツール」が用意されています。
3Dに変換させるということは、横軸のX軸、縦軸のY軸に、奥行きを表すZ軸が加わった回転や移動が可能になるということです。

たとえば、設定によっては、下の例のように回転しているように見えたり、飛び出てくるように見える加工ができます。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

3D回転ツールでオブジェクトの回転を試す

では、文字が回転するアニメーションを実際に作ってみましょう。ダウンロードしたサンプルファイルから、「3D_start.fla」を開きます。
文字のオブジェクトを文字のまわりをドラッグで選択し、メニューバーから［修正―シンボルに変換］を選択して、ムービーシンボルに変換します。

ロゴを囲い込むように選択。

［シンボルに変換］を選ぶと、続けてシンボルに変換ダイアログが表示される。

名前をつけておき、「種類」では「ムービークリップ」を選択します。「OK」をクリックします。

［ライブラリ］にシンボルが登録されました。3D回転ツールを使用するには、このようにオブジェクトをシンボル化しておきます。

ツールパネルから、「3D回転ツール」を選択します。

「3D回転ツール」を選択します。

図のようなオーバーレイ（線や円のガイドライン）が表示されます。

このオーバーレイを使って、オブジェクトの各軸をドラッグして回転させていきます。
緑ラインはY軸（縦）を中心に回転、赤ラインはX軸（横）を中心に回転、青ラインはZ軸（奥行き）を中心に回転します。
またオレンジラインは、自由回転となっています。

試しに、自由にドラッグしてみて、ロゴが変形されるのを確認してください。

ここではまだ練習なので、回転の設定を解除して元の画像に戻しておきましょう。

3D回転を設定したオブジェクトを選択し、メニューバーから［修正―変形―変形の解除］を選択します。

3D回転ツールを使ったアニメーション

では、サンプルとしてX軸回転を使ったアニメーションを作ってみます。［タイムライン］パネルで、「hello」レイヤーの30フレーム目をクリックし、選択します。続けて、Shiftキーを押しながらと「bg」レイヤーの30フレーム目をクリックします。

これで、2つのレイヤーを選択できました。

メニューバーから［挿入―タイムライン―フレーム］を選択し、フレームを挿入します。

回転させたいオブジェクトが置いてあるのレイヤー（ここでは、「hello」レイヤー）を選択し、メニューバーから［挿入―モーショントゥイーン］を選択します。

30フレーム目を選択したままの状態で、ツールパネルで［3D回転ツール］を選び、赤い中央の線をドラッグして、オブジェクトを180度、回転してみましょう。

回転できたら、Ctrl＋Enterキーを押してパブリッシュプレビューを確認してみましょう。すると、最初に紹介した、文字がX軸を中心として回転するアニメーションができます。

上手にできましたか？

回転方法によって、さまざまなバリエーションが作れますので、次回以降でも紹介していきます。

では、また次回！

《#17》おさらい「シンボルとインスタンス」

DigiCon6.com管理人 — 2009-12-25T13:00:20+09:00

Digicon Magazine読者のみなさんこんにちは、ななきちです。

5月にスタートしたこの連載もいつの間にか7ヶ月が過ぎました。
今回は、2009年の最後ということで、いままでのレッスンを通して身をもって覚えてきたFlashムービー制作のポイントを、おさらいしていきましょう。

テーマは、「シンボルとインスタンス」についてです。

これまでのレッスンで、何度か“シンボル”と“インスタンス”を使ってきました。たとえば、第11回から第14回で作成したロボットの部品はシンボルでできています。
第5回から第10回までさまざまなアニメーションの基本を紹介したボールのサンプルや、第3回の色が変わるロールオーバーのボタンも、シンボルを使っています。

「シンボルとインスタンス」はFlashムービーを作成する上で、核となる部品なので、これが理解できれば、ムービーやアクションスクリプトの理解度もグンと深まります。

シンボルとは？

さまざまなデータを格納する「ライブラリ」パネルに格納されたオブジェクトが、シンボルです。

シンボルは、Flashムービーで使う部品のマスターデータ（元となる部品）のようなもので、ステージ上に配置して、何度でも使用可能です（ステージに配置した部品がインスタンスです）。

シンボルと、シンボルでないさまざまなオブジェクト（イラストや写真データ、文字データなど）との違いは、ライブラリに格納されているかどうかです。

シンボルとは、ライブラリに登録されたオブジェクト。

シンボルの作成

シンボルを作成するには、格納したいオブジェクトを選択した状態で、メニューバーから［修正ーシンボルに変換］を選択します。

おさらいですが、一緒に手順を試したいときは、サンプルデータをダウンロードし、その中に入っている「symbol_00.fla」を使ってください。

この場合は複数の図形があるので、［選択］ツールで図のまわりを囲むようにドラッグして選択します。

メニューバーの［修正ーシンボルに変換］を選択します。

「シンボルに変換」ダイアログボックスが開くので、シンボルの名称、シンボルの種類を選択します。

ここでは「種類」は「グラフィック」にしてシンボルに変換。

ライブラリにシンボルとして登録されました。「ライブラリ」パネルは、ステージの右側にあります。表示されないときは、メニューバーの［ウィンドウーライブラリ］で表示できます。

ライブラリに「うさぎ」という名前のグラフィックシンボルが登録された。

これのシンボルを、ステージ上に自由に配置することができます。

シンボル化されたオブジェクトは、ステージ上に配置されると、モーショントゥイーンでのアニメーション化や、アクションスクリプトでの制御が可能となります。

シンボルの種類

シンボルには以下の3つのタイプがあります。シンボルの種類は、オブジェクトをライブラリに格納する時に選択しますが、登録後に変更することも可能です。

【グラフィックシンボル】

グラフィックシンボルは、主に、静止画に使うシンボルです。
アクションスクリプトで制御することができません。

アニメーションにも使うことができますが、メインのタイムラインに依存するので、グラフィックシンボル内で設定したタイムラインのフレーム数と、同じ長さのフーム数をメインのタイムラインに設定する必要が出てきます。下のサンプルファイルは、「symbol_1.fla」です。

データ容量が軽いのが特徴です。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

グラフィックシンボル

【ボタンシンボル】

ボタンシンボルは、マウスオーバーやクリックなどで反応するシンボルです。

ボタンシンボルは、アクションスクリプトで制御することができます。ただし、ActionScript 3からは制約があります。

作成方法は第3回を参照して下さい。

下のサンプルファイルは、「symbol_2.fla」です。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

マウスを近づけてクリックして下さい。

【ムービークリップシンボル】

ムービークリップシンボルは、主に、アニメーションに使うシンボルです。
グラフィックシンボルとは違い、メインのタイムラインに依存することなく、自身のタイムラインに合わせてアニメーションの再生ができるため、メインのタイムラインが1フレームだけでも、アニメーションの再生が可能です。

例えば、雨がずっと降っている、星が終始またたいている、鳥や虫の羽がずっと羽ばたいている、などなど数コマでループ再現するアニメーションを格納します。
また、グラフィックシンボルとは違い、アクションスクリプトでの制御が可能です。

下のサンプルファイルは、「symbol_3.fla」です。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

ムービークリップシンボル

インスタンスとは？

ステージ上に配置したシンボルのことを「インスタンス」といいます。

インスタンスは、シンボルが親とするのであれば、子供（コピー）のようなものです。Windowsのショートカットアイコンや、Macのエイリアスに似ています。

インスタンスは、ステージ上にいくつも配置が可能です。

ステージに配置されたのがインスタンスです。

また、親である元のシンボルを編集すると、配置されたインスタンスすべてに変更が反映されます。

シンボルを変更すると、インスタンスすべてが変わる。ここでは目を変更してみました。

インスタンスの配置

ライブラリに登録されたシンボルは、ドラッグ＆ドロップでステージに配置できます。試してみたい場合は、サンプルデータの「symbol_04.fla」を使って下さい。

ライブラリの中の、シンボルアイコンを選択し、ステージに向けてドラッグ＆ドロップします。

インスタンスが配置されました。

もし不要になれば、ステージのインスタンスは、Delキーなどを押して削除できます。その場合も、ライブラリのシンボルが削除されることはありません。

シンボルの編集

シンボルを編集するには、ライブラリでシンボルアイコンをダブルクリックします。すると、メインのステージがシンボル編集画面に切り替わります。

メインのステージの左上にあるナビゲーションで、現在開いているシンボル名が確認できるようになっています。

もとのステージに戻るには、左上のナビゲーションで「シーン１」をクリックします。

シンボルは、ステージで選択したとき編集できない部分も、シンボル編集画面では、通常のオブジェクトのように編集できるようになります。

その他の特徴

インスタンスは個々の情報を持つことも可能で、インスタンスごとに位置情報やサイズ、動作、色情報などを持つことができます。

ステージにあるインスタンスを、それぞれ色を変えたり、サイズを変えたりできます。元データは同じシンボルのままです。こういったインスタンスの利用も今後もっと紹介していきたいと思います。

またインスタンス同士を組み合わせたものをシンボル化することも可能です（孫、ひ孫…とシンボルとインスタンスを制作していくことができます）。

うさぎに別のシンボルとして格納してある花をつけて、うさぎと花をひとつのシンボルとして格納しました。

うさぎインスタンスと、花インスタンスをまとめて、1つのシンボルとして登録。

シンボルはあくまでも元データで、ステージには配置されません。
インスタンスとしてステージに配置されることで、初めてFlashムービーのパーツとして再生可能になります。

”シンボル”と”インスタンス”は、文章だけではなかなか理解しきれない部分もあるので、お正月休みにでも、是非自分でFlashを触っていろいろ試してみて下さい。

経験上、私もこの違いを理解した後からFlashをより理解することが出来ました。ギターで言うところの”Fコード”！最初の難関です。もう一つ先のFlashの扉を開いてみましょう！

また今後も、理解しておきたいポイントをピックアップした、今回のようなレッスンも行いたいと思いっています。

では、みなさん良いお年を！
来年もよろしくお願いします★

《#16》前進するアニメーション

DigiCon6.com管理人 — 2009-12-11T17:01:57+09:00

Digicon Magazine読者のみなさんこんにちは、ななきちです。

前回のレッスンで制作した、シェイプ内にボーンを埋め込んだ尺取り虫のサンプルをもとに、アニメーションを作成していきます。

モーショントゥイーンの応用になります。

このファイルは、前回のレッスンで尺取り虫にシェイプボーンを埋め込んだFlashムービーに、少し加工を加えています。加工したポイントは2つ。
まず、背景にある雲のイラストを、新しいレイヤーに配置してあります。これはあとで、アニメーションが作りやすくなるためです。

また、タイムラインを15フレーム目まで延長し、ボーンツールを入れた尺取り虫も、アニメーションを作成してあります（このアニメーションの作り方は、「《#14》ボーンツール（4）」で紹介している流れと同様です）。

「walk_03.fla」との状態。15フレームあるアニメーションファイルになっています。これまでに紹介したスキルで作成できる準備だと思います。

「walk_03.fla」を開き、Enterキーを押して再生、またまCtrl＋Enterキーでパブリッシュプレビューを実行すると、尺取り虫の胴体がくねくねと動いていくのがわかります。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

walk_03.flaを再生した状態

背景を動かすモーショントゥイーンアニメーション

次に、前に進んでいくようなアニメーションをつくりましょう。背景の雲を左から右に流れるようにしましょう。

とても単純なことですが、こうすることで、尺取り虫が前進しているように見せることができます。

「cloud」レイヤーの１フレームを選択しておきます。メニューバーの「挿入―モーショントゥイーン」を選択します。

「cloud」レイヤーの1フレーム目を選択しておきます。

［挿入ーモーショントゥイーン］を選択

図の様なアラートのダイアログが表示されますので、［OK］をクリックします。

［OK］をクリック

「cloud」レイヤーの1フレーム目の雲のオブジェクトをドラッグして、ステージの外側左端に持っていきます。

雲のオブジェクトをステージの外側へ。するとムービーの最初の部分では雲は見えません。

ステージの外側が見えず、作業がしづらいときは、画面右上の表示倍率のポップアップで縮小表示にすると、ステージの外側まで表示され、作業しやすくなります。

ステージの外側が見えない場合は、画面を縮小表示します。

「cloud」レイヤーの15フレーム目をクリックして表示します。

15フレーム目をクリック

今度は、雲のオブジェクトをドラッグして、右端にもっていきます。このとき、雲は水平に動かすようにしましょう。

Enterキーを押してムービーを再生してみると、背景が動くことで、尺取り虫が前進しているようなアニメーションになります！

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

walk_03.flaの再生した状態

頭を動かすモーショントゥイーン

最後の仕上げをしましょう。

いまのままでは、まだちょっと不自然な気がします。それは、尺取り虫の胴体は動いているのに、頭が動いていないからです。
そこで、モーショントゥーインを使って5フレームごとに頭の位置を設定し、動かしていきます。

「head」レイヤーの１フレーム目をクリックして選択します。

「head」レイヤーをクリック

メニューバーから［挿入ーモーショントゥーイン］を選択します。

「cloud」レイヤーと同じく、図の様なアラートのダイアログが表示されますので、［OK］をクリックします。

［OK］をクリック

タイムラインで「head」レイヤーの5フレーム目をクリックしておきます。

頭を回転させるために、［変形］ツールを選択します。

［変形］ツールを選択

頭のオブジェクトを回転させます。その際に、中心点を注意して下さい。

ドラッグして○を回転の中心にする場所へ移動します。

四隅へカーソルを移動し、ドラッグすれば回転できます。5フレーム目はこのような角度です。

同じ様に10フレーム目で、下図のように回転します。

10フレーム目では、左に傾けました。

15フレーム目にも、頭の動きを設定します。

15フレーム目。まっすぐに戻すことで１フレーム目と繋がったときに自然な動きになります。

以上を設定し、Ctrl＋Enterキーでプレビューすると、最初に紹介したような、スームーズに尺取り虫が動いていくアニメーションになります。

いかがでしたか？次回は、これまで作ってきたアニメーションを通じて学んだ知識のおさらいをする予定です。

では、次回！

《#15》　ドラッグで動かすムービー

DigiCon6.com管理人 — 2009-11-27T11:23:11+09:00

Digicon Magazine読者のみなさんこんにちは、ななきちです。

前回までに、ボーンツールを使って、ちょっと複雑なアニメーションを完成しました。皆さん、だんだんとFlashが楽しくなってきたのではないでしょうか？

さて、今回は、ひとつのオブジェクト（シェイプ）内にボーンを設定して、ドラッグで変形できる尺取り虫くんのFlashムービーを作ります。

サンプルファイルをダウンロードして、「caterpillar_01.fla」を開きます。この尺取り虫のキャラクターの胴体に、ボーンツールを設定していきます。
胴体をクリックして選択すると、オブジェクトに四角い囲みがついています。

「描画オブジェクト」というデータ形式になっています。そのままだとボーンツールは使えません。

これは「描画オブジェクト」を「シェイプ」の状態に変換します。オブジェクトを選択した状態で、メニューバーの［挿入―分解］を選びます。

修正メニューから分解を選択

すると、オブジェクトから囲みが無くなります。「シェイプ」に変更されました。ボーンが作れるのは、「シェイプ」と「シンボル」という種類のオブジェクトなのです。

胴体が「シェイプ」になりました。準備完了。

ボーンツールを埋め込む

体の部分にボーンを埋め込めこんでいきます。［ツール］パネルから、［ボーンツール］を選択します。［ツール］パネルが表示されていないときは、メニューバーの［ウィンドウーツール］を選んで表示できます。

［ツール］パネルから、［ボーンツール］を選択

胴体にボーンを追加していきましょう。胴体の上で、頭のほうからしっぽに向かって、細かくドラッグを繰り替えし、短いボーンをたくさん作成します。2つ目以降のボーンは、前のボーンの終点（継ぎ目）からドラッグし始めてつくります。

このボーンを作る作業は、サンプルファイル「caterpillar_02.fla」で、できあがっているので参考にしてください。

胴体に骨を通す感じでボーンツールでドラッグしていきます。

上の作業では、細い胴体の部分に細かくボーンを作るので、けっこう作業がしづらいかもしれません。［ツール］パネルで［ズーム］ツールを選択し、作業する画面を拡大しておくと、ドラッグしやすくなるでしょう。

また、拡大した画面の表示を移動するのは、［ツール］パネルの［ハンドツール］を使用しましょう。

拡大・縮小の［ズームツール］、画面移動の［ハンドツール］

ズームツールでドラッグすると、作業箇所を拡大できます。

細かい作業もしやすくなります。画面の移動は［ハンドツール］で行って下さい。

作業が終わったら、右上のプルダウンメニューから「100％」や「すべて表示」を選択して、ドキュメント全体を表示し直します。

画面表示を元に戻すには、右上のポップアップメニューを使います。

ボーンの追加後、［選択ツール］を使ってステージ上でドラッグすると、胴体が動きます。ボーンを操作する練習として、くねくねと前後に動く表現を作ってみましょう。

ここではまず、回転がスムーズになるように、「回転させない関節」を指定します。

前から3番目くらいのボーンを選択して赤く反転されたら、［プロパティ］パネルの［結合］の欄で、［有効］のチェックを外します。対象のボーンが赤く反転しない場合は、もう一回同じ場所でクリックすると、選択できるはずです。

これで、この関節は回転しなくなります。

次に、しっぽ部分を選択ツールで選択します。赤く反転したら、ボーンの右端のほう（回転軸ではないほう）をつかむようにして、ドラッグします。

回転させない関節以外はすべて連動するので、一気に形を作ってみましょう。

一番端のボーンをドラッグして、くねっとした形にしてみます。

ドラッグするとこんな形状になりました。みなさんもいろいろ試してみてください。

ムービー上で動かせるようにする

ボーンツールには、Flashを見るユーザーもボーンを動かせるようにする機能があるので使ってみましょう。［タイムライン］パネルで、ボーンが配置されている「アーマチュア」レイヤーを選択します。

［プロパティパネル］には、「IKアーマチュア」のプロパティが表示されます。［プロパティパネル］が表示されていないときは、メニューバーの［ウィンドウープロパティ］を選択してみてください。

プロパティパネルの［オプション］で、［種類］から［実行時］を選択します。

［種類］で［実行時］を選びます。

設定後、Ctrl＋Enterキー（command＋returnキー）を押して、ムービープレビューを表示します。すると最初に紹介したムービーのように、ドラッグして変形が可能になるはずです。この完成ファイルは、サンプルファイルの「caterpillar_03.fla」です。

いかがですか？ボーンツールを使ったアニメーションのアイデア、みなさんも浮かんできましたか？

ではまた次回！

《#14》ボーンツール（4）

DigiCon6.com管理人 — 2009-11-13T11:57:25+09:00

Digicon Magazine読者のみなさんこんにちは、ななきちです。

今回は、ロボットのキャラクターの手足に「ボーンツール」を使ったアニメーションの最終回です。組み合わせて配置した手足をポーズさせながら、60フレームのアニメーションづくりにチャレンジします。

では、がんばっていきましょう。

まず、サンプルファイルをダウンロードしておきます。前回最後に紹介した、「bone_07.fla」は、ボーンツールの手や腕のパーツを配置しおわったキャラクターの入ったファイルです。ファイルを開き、選択ツールで腕部などをクリックすると、ボーンツールで作成されているパーツが選択表示されます。

まず、アニメーションを作成するために、タイムラインにフレームを作成します。「アーマチュア_1」レイヤーの60フレーム目を選択し、メニューバーから［挿入―タイムライン―フレーム］を選択します。

メニューバーから［挿入―タイムライン―フレーム］を選択すると、60フレーム目までのフレームが作成されます。メニュー選択の変わりに、F5キーを押しても同じ操作ができます。

キーフレームの作成

順番にキーフレームを作成していきましょう。

1）アニメーションを動かすフレーム（キーフレーム）にするフレームを、［タイムライン］パネルで選択する

2）ステージでボーンツールの部品をドラッグし、実際のポーズを作成

この繰り返しを行ってきます。では、はじめましょう。

まず、［タイムライン］パネルの「アーマチュア_1」レイヤーの5フレームをクリックします。

ステージでは、選択ツールで腕や足のパーツをドラッグし、図のように、手足を曲げ、ポーズをとらせました。ポーズの変更は、ポーズは、みなさんの好きなかたちにアレンジしてもよいでしょう。

5フレーム目のポーズ

［タイムライン］パネルを見ると、オブジェクトを動かした5フレーム目には、キーフレームが自然とできあがっています。次は、10フレーム目を選択します。

10フレーム目のポーズを変更します。

10フレーム目のポーズ

続いて、［タイムライン］パネルで15フレーム目を選択し（以後、タイムラインパネルの図は省略しています）、ここでもポーズを変えます。

15フレーム目のポーズ。首も左右に振れることに注目してください。

また、20フレーム、25フレーム、30フレーム、35フレームを選択しては、それぞれポーズを作ります。20フレームでポーズをつくったら、25、30、35では頭部だけ変更しています。再生したとき、首を振っているように見えます。

20、25，30、35フレーム目のポーズ

40フレーム目では、下のようなポーズに変更します。

40フレーム目のポーズ

ここからは再び、繰り返しのポーズを作成します。43～59フレーム目まで、2フレーム刻みに、右の手のひらだけを回転させて動かします。これで手を振っているようなアニメーションができあがります。

2フレームごとに手のひらだけ動かすことで、アニメーションでは手を振っているように見えます。

アニメーション作成後のタイムラインパネル。キーフレームが図ようにたくさん指定されました。

ここまでを完成したたものが冒頭に紹介しているアニメーションで、サンプルファイルは「bone_finish.fla」です。

みなさんも、作成しながら、または完成後にEnterキーを押してアニメーションを再生したり、 Ctrl＋Enterキーでパブリッシュプレビューして、アニメーションを楽しんで下さい。

次回は、ボーンツールについて、もう１つの作例を紹介しますよ。

ではまた次回！

《#13》ボーンツール（3）

DigiCon6.com管理人 — 2009-10-30T15:49:17+09:00

Digicon Magazine読者のみなさんこんにちは、ななきちです。

CS4で新登場した「ボーンツール」を使ったアニメーション制作も三回目です。今回は、ボーンツールのプロパティを設定して、腕らしく、180度の回転までに固定する設定してみましょう。

また、ボーンツールの削除についても触れます。

では、腕だけを使った演習から、次回は、ロボット全体に腕を取り付けた状態で、アニメーションを付けていきましょう。
下図のように、頭と胴の付け根をルートボーンにして、頭、腕、足にボーンを設定していきます。
パーツに対するボーンの付け方は今までの腕での設定と同じですが、パーツがたくさんあるので、根気がいる作業になります。あらかじめ、下図まで設定済みのファイルが「anime_07.fla」なので、こちらを使って下さい。

実際に図形を見たり、選択ツールで腕や足の部分を選択して動かしながら、関節のような回転制限がかかっていることを確認してみてください。ちなみに、この状態では、Enterキーを押して「再生」してもまだ何も動きはありません。

次回は、シンボル化されたオブジェクトではなく、シェイプに直接ボーンを埋め込みアニメーションをさせていく方法を勉強してみましょう。

例えばこの方法でリボンが波打つようなアニメーションや、尺取り虫の様なやわらかい動きのアニメーションを実現できます。

ではまた次回！

《#12》ボーンツール（2）

DigiCon6.com管理人 — 2009-10-16T17:01:14+09:00

Digicon Magazine読者のみなさんこんにちは、ななきちです。

CS4で新登場した「ボーンツール」を使ったアニメーション制作の第二回目です。
今回は、前回ボーンツールを使って作成したロボットの腕を、アニメーションさせていきます。

基本的な手順はトゥイーンアニメーションと同じ要領で作成できます。

《#11》ボーンツール（1）

DigiCon6.com管理人 — 2009-10-02T14:05:32+09:00

Digicon Magazine読者のみなさんこんにちは、ななきちです。

今回から数回にわたって、CS4で新登場した「ボーンツール」を使ったアニメーションを制作していきたいと思います。
ボーンツールを使うと、腕などの関節のような動きを滑らかに表現することができます。
この機能は、Flash CS4で新たに追加された機能で、3DCGアニメーション制作ではよく使われる、IK（インバース・キネマティック）という技術を使った機能です。

サンプルのファイルは、10回目までに使用していたものと変わって、AS 3.0形式のドキュメントになっています。

IKは、Action Script3.0を使うので、ゼロから自分で作成する際には、Flashファイル（AS 3.0）を選択し、新規ドキュメントを開いてください。

オブジェクトをシンボル化する

シンボルという概念は、以前ボタンを制作した際にも少し出てきました。
Flashでは、オブジェクトをアニメーションでの使用や、ActionScriptをそのオブジェクトに対して使用する場合には、「シンボル」に変換しライブラリに登録する必要があります。
今回のボーンツールを使ったアニメーションでも、同じくそれぞれのパーツごとにオブジェクトをシンボル化させます。

まず、手と台形のオブジェクトを一度に選択し、メニューバーから［修正?シンボルに変換］を選択します。

Shiftキーを押しながら２つのオブジェクトを選択します。

［シンボルに変換］を選択

［シンボルに変換］ダイアログボックスが表示されます。シンボル名を入力（ここでは「hand」とします）し、［種類］のプルダウンメニューからは、［グラフィック］を選択します。［OK］ボタンをクリックしてシンボルをライブラリへ登録します。

［種類］を［グラフィック］にして登録

［ライブラリ］パネルには、登録されたシンボルが表示されている

シンボル「hand」が登録できました。

腕の部分がすでにシンボル化されています。サンプルファイルでは、すでに「arm1」、「arm2」という2つのグラフィックシンボルがあるのが確認できます。

ボーンの設定

ここからいよいよボーンを設定していきます。［ツール］パネルから［ボーンツール］を選択します。

［ツール］パネルでボーンツールを選択

今回動かす腕は上腕、下腕、手の3つをボーンツールを使って連結させ、動かします。まず動きの中心点となる部分（ルートボーン）は上腕の左端部分になりますので、ボーンツールを選択後、ここを最初にクリックし、次の下腕までドラッグします（ドラッグ中に配置可能位置になるとボーンツールのポインタが白に変化します）。

腕の橋から中央の関節までドラッグ

次に、下腕から手までを同じ様にボーンツールを使ってドラッグしていきます。
これで3つの関節を結びつけることができました。その際、ルートボーンは大きな丸で表示されます。

左端の腕の根本がルートボーン

また、ボーンツールを使うとオブジェクトは、自動的にアーマチュアレイヤーが生成され格納されます。

「アーマチュア」レイヤーはボーンツール用のオブジェクトが配置されている

ボーンツールでのつながりの確認

ツールから選択ツールを選び、腕のオブジェクトを動かしてみると、腕がボーンツールにより連動して動いているのが、確認できます（この段階では、Enterキーを押して再生させてみようとしたり、Ctrl＋Enterキーを押してファイルをパブリッシュても動きませんから注意しましょう）。

handの部分を手を握るようにドラッグすると、滑らかに動く。

引き続き、ボーンツールの理解を深めつつ、この腕の部品を使ってアニメーションを作っていきたいと思います。

では、また次回！

はじめてのflash

《#20》 3D変換（3）

目次

3D変換ツールの概要

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

ツールパネルで［3D変換］ツールを選択

上へドラッグすると奥へ、下へドラッグすると前へ移動しているように変化します。

3D変換の解除

変形の解除を実行すると、オブジェクトのサイズと位置が元に戻ります。

3D変換ツールを使ったアニメーション

Z軸を右上にドラッグしていき、オブジェクトを縮小します。

Y軸を上方向にドラッグします。

X軸を右方向にドラッグします。

Z軸、Y軸、X軸をそれぞれ移動します。シンボルインスタンスを移動すると、モーショントゥイーンでどのようにオブジェクトが移動しているかを表す点線（ここでは、レイヤーと同じ紫色の点線）も表示されます。

45フレーム目

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

3D回転ツールに切り換え

15フレーム目

30フレーム目

《#19》 3D回転（2）

目次

X軸回転、Y軸回転、Z軸回転

ドラッグするのに合わせて3D状に回転し、変形します。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Y軸を回転する

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Z軸は、このようにふつうの回転ツールのように見える

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

自由回転

オレンジのライン上でカーソルを上下に移動すると、赤のラインのX軸回転と同じ操作になります。

左右に移動すると緑のラインのY軸回転と同じ操作になります。

回転軸を移動する

中心点をドラッグすると、自由な位置に移動できます。

中心位置あたりまで移動しました。

時計回りに回転すると前のほうにオブジェクトが飛び出してきます。

そのままドラッグすると回転して、奥のほうへ

グローバル変形モード

クリックしてオフにする

表示が変更されました

《#18》 3D回転（1）

目次

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

2種類の3D効果ツール

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

3D回転ツールでオブジェクトの回転を試す

ロゴを囲い込むように選択。

［シンボルに変換］を選ぶと、続けてシンボルに変換ダイアログが表示される。

名前をつけておき、「種類」では「ムービークリップ」を選択します。「OK」をクリックします。

［ライブラリ］にシンボルが登録されました。3D回転ツールを使用するには、このようにオブジェクトをシンボル化しておきます。

「3D回転ツール」を選択します。

3D回転ツールを使ったアニメーション

《#17》 おさらい「シンボルとインスタンス」

目次

シンボルとは？

シンボルとは、ライブラリに登録されたオブジェクト。

シンボルの作成

この場合は複数の図形があるので、［選択］ツールで図のまわりを囲むようにドラッグして選択します。

メニューバーの［修正ーシンボルに変換］を選択します。

ここでは「種類」は「グラフィック」にしてシンボルに変換。

ライブラリに「うさぎ」という名前のグラフィックシンボルが登録された。

シンボルの種類

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

グラフィックシンボル

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

マウスを近づけてクリックして下さい。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

ムービークリップシンボル

インスタンスとは？

ステージに配置されたのがインスタンスです。

シンボルを変更すると、インスタンスすべてが変わる。ここでは目を変更してみました。

インスタンスの配置

もし不要になれば、ステージのインスタンスは、Delキーなどを押して削除できます。その場合も、ライブラリのシンボルが削除されることはありません。

シンボルの編集

その他の特徴

ステージにあるインスタンスを、それぞれ色を変えたり、サイズを変えたりできます。元データは同じシンボルのままです。こういったインスタンスの利用も今後もっと紹介していきたいと思います。

うさぎに別のシンボルとして格納してある花をつけて、うさぎと花をひとつのシンボルとして格納しました。

うさぎインスタンスと、花インスタンスをまとめて、1つのシンボルとして登録。

《#16》 前進するアニメーション

目次

《#17》おさらい「シンボルとインスタンス」

《#16》前進するアニメーション

《#15》　ドラッグで動かすムービー

《#14》ボーンツール（4）

《#13》ボーンツール（3）