Flash Professional CC 2015のアップデート

ボーンツールを使ったIKアニメーション

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
新たに加わった[ボーンツール]でインバースキネマティクス(IK)のアニメーションがつくれます。
講師:
09:47

字幕

このレッスンでは Flash Professional CC 2015 から加わった ボーンツールを使って インバースキネマティクスの アニメーションを ご紹介したいと思います インバースキネマティクスというのは 関節のあるような動きを作る機能です インバースキネマティクスが作れる オブジェクトの種類は2つあります 1つはシェイプ もう1つは ムービークリップです 今 画面にはレイヤー1に シェイプが作られています 1つだけのシェイプです これを使ってインバースキネマティクスを 作ってみたいと思います ツールは この骨の形をした ボーンツールを使います ボーンツールは文字通り 骨を埋め込んでいくことになります この骨は関節をつないで 関節のある物体の様に動かせます では レイヤー1の 関節の始まりから ボーンツールでドラッグをします 少し関節は多めにしましょう 1個目 そしてボーンツールで ドラッグを放します すると レイヤー1の上に アーマチュアというレイヤーが 出来上がります これがボーンツールを適応した インバースキネマティクスの レイヤーになります 更に関節を足していきますので また この関節の右端からドラッグします そして ボタンを放し また ドラッグする これを続ければ良いわけです もう1個 そして 最後 ということで ボーンツールで 骨を埋め込みました すると 今度は 選択ツールを使って 最後のフレームにいきます このアーマチュアの オブジェクトをドラッグすると 骨の入った物体の様に動きます まっすぐになっていますが これで手を放しましょう このアーマチュアのレイヤーは モーショントゥイ―ンを 作った様な感じになっています ですから この上をスクラブすると 動きます 実際にムービープレビューを 見てみましょう 現在 このドキュメントは html Canvas のドキュメントです ですから プレビューは ブラウザで確認します 「制御」で「プレビュー」を押します 今のアニメーションが 繰り返し行われます もう少し アニメーションに 手を加えましょう html Canvas の出力をすると 必ず この警告が出ます エラーではありませんので 気にしなくて結構ですが もし JavaScript で 制御しようとする場合 フレーム番号は1からではなく 0から始まります という注意書きです では タイムラインに戻って この 最後のフレームの まっすぐだとつまらないので 少し形を変えましょう S 型の様にしたいと思います 少し位置を調整して もう少し下げて これはもう少しこちら 上げて 引っ張る S っぽい感じになりました 途中に少し変化を加えたいと思います モーショントゥイ―ンで言えば キーフレームを入れるのですが ここではキーフレームとは言いません ポーズという言い方をします 役割はキーフレームと同じだと 思っても構いません ここで いきなり動かしても結構です 勝手にキーフレームと同じ形の ポイントが付きます マークが付きます あるいは ポーズを 入れたいと思った時は 右クリックで 「ポーズを挿入」すれば マークが入ります 少し 伸ばしましょう すると 1回伸びた状態で 動いてから ちょっとずつ曲がっていく という感じです この辺でも1回 「ポーズを挿入」しましょう 少し反動をつけるような感じで 後ろに曲げます その状態から S 字になる では 確認したいと思います 「制御」メニューから 「プレビュー」です 今 作成した通りの インバースキネマティクスの アニメーションになりました これがシェイプを使った ボーンツールの使い方です 今度はムービークリップを使った例です ですから 絵も少し凝りました レイヤーは3つあり 一番下が背景です 2番目が台座の部分 そして 動かしたい インバースキネマティクスの 設定にしたい アーム(腕)は一番上の レイヤーになっています やはり ボーンツールを使って 先ほどのシェイプの時と 同じ要領です 今回は ちゃんと 継ぎ目がありますので 目安があって良いです ドラッグして マウスボタンを放す また ここからドラッグして マウスボタンを放し ドラッグして ここが最後です マウスボタンを放します これだけで やはり 自由に動くようになります 自由に動くのですが 動く範囲を制限することができます では この一番基の所の 動く角度を制限したいと思います その場合 選んだ時 ここを選ぶとマークが付きますが 「ジョイント:回転」と言う項目が プロパティインスペクターに現れます ここでちょっと言葉が変ですが 「縦横比を固定」の所に チェックを入れます デフォルトでは ±45 度ですから ここから 45 度 上に 45 度という制限がかかります 見えにくいかもしれませんが 扇形の様なマークがあります この扇形のマークは 90 度の角度を持っているのですが この範囲に動きが制限されます 実際に動かそうとすると これ以上は行きません このアームはこれ以上 右にはいかないです それから これ以上下には行かない という風に動きが制限されます 今 第1フレームにありますので 最初の状態を作りたいと思います 最初の状態は この辺りからにしましょう 角度を変えて もう少し上げましょう これも持ち上げて 関節を使うと 若干 動かしにくいです こんなところで良いでしょう そして 最後のレイヤー レイヤーの最後のフレームは こんな感じにしましょう クレーンですから 持ち上げた様な感じです 持ち上げたような状態にして これが最終の状態です では 途中を加えていきます はじめはこの状態から だんだん下がっていく様にしたいのですが この 20 フレームの辺りで ポーズを加えます もう少し伸ばしておきましょう すると こんな感じです ここから 30 フレーム辺りで やはりポーズを入れて もう少し下げます それからアームの先を少し 調整します ここからこうなっていくわけです では 40 フレームの辺りで もう少しアームを持ち上げて こんな感じにしましょう すると 伸ばした状態で下りてきて だんだん曲がって 掬うような感じです 掬うような感じで 最後は持ち上げるとなりました このドキュメントは Flash ドキュメントですから ムービープレビューを見ると swf を書き出します では「制御」メニューの 「プレビュー」で確認しましょう こんな感じの動きになっています この様にインバースキネマティクスは ボーンツールを使って 簡単に直感的に作ることができます このレッスンでは ボーンツールを使って インバースキネマティクスの アニメーションを作る方法について ご説明しました ムービークリップとシェイプ それぞれに対して アニメーションを作ることができました

Flash Professional CC 2015のアップデート

このコースではアップデートされたFlash Professional CC 2015の中から主な新機能を紹介します。関節の動きのようなアニメーションが作れるボーンツールやFlash PlayerとAIRおよびHTML5 Canvasドキュメントのパブリッシュの強化、その他ちょっと知っておくだけで作業効率が高まる細かな改善などについて解説します。

48分 (13 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年07月15日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。