Animate CC 基本講座

トゥイーンアニメーションの仕組み

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フレームの間を補完してつくるトゥイーンアニメーションの仕組みについてご説明します。
講師:
05:20

字幕

このレッスンでは フレームの間を補間して作る トゥイーンアニメーションの 仕組みについて説明します。 今サンプルを開いていますけれども この中にはインタラクティブな アニメーションの コンテンツが作成されています。 まずは動きを確認しましょう。 「制御」メニュー>「ムービープレビュー」> 「Animate を使用」します。 放っておくとずっと歩いています。 そして今回注目するのは インタラクションなんですけども このクリックした時の動きです。 クリックすると 飛び上がって 上からバウンドします。 クリックしたらどうするというのは プログラムなので それはおいといて このクリックした後 起こるアニメーションですね。 このバウンドするアニメーションが どのように作られているのかという事です。 作られ方を説明するのであまり 細かい操作は気にしないで結構です。 まずこのステージに置いてある ペンギンのキャラクターなんですが これはパーツになっていて ダブルクリックするとこのパーツが開きます。 パーツはライブラリにあるんですけども 今ここに置いてあるパーツは pen_animation というパーツです。 この中には更にパーツが 入れ子になっているんですけども ダブルクリックすると 今開いたpen_animation というタブが出てきます。 そうするとその中にはタイムラインに こんなアニメーションが含まれています。 前半が歩くアニメーションで 6フレームで構成されています。 ここをまず先に確認してしまいましょう。 こちらのペンギンをダブルクリックすると 歩く方のパーツ pen_walk が開きました。 6フレームで構成されています。 特徴としてフレームごとに 違った絵がおいてあるんですね。 違った絵、2フレーム同じ絵がおいてある こともありますけれども それはこの縦線で区別がつきます。 2フレーム同じ絵、次は違う絵 また2フレーム絵があって 最後にまた1フレーム違うと。 これを再生することで 歩いてるように見えるという事ですね。 これをフレームごとに違った絵をおく アニメーションということで フレームアニメーションと言います。 今回注目したいのはその後の方ですね。 上から落ちてくる方です。 では pen_animation に 戻りましょう。 その時にはこのタブをクリックします。 今度は後の7フレーム以降ですね。 落ちてくるアニメーション。 ここでペンギンをダブルクリックします。 そうするとやはりフレームがあって これは24フレームあります。 ただちょっと先程と違うのは 縦線がありません。 というのは フレーム毎に違うパーツが おいてある訳ではないからです。 これのパーツは全部一緒なんですね。 けれども違って見えるのは なぜかというと この黒い丸あるいは点がありますが これらをキーフレームを言います。 この最初の黒丸が キーフレーム最初の状態です。 そしてこの次の 菱形のような点ですけれども キーフレーム12フレーム目なんですけども その位置が変わっていますね。 1フレーム目はこの位置 12フレーム目はこの位置と いうことで 位置は変わっているんですが 他は変わっていません。 そしてこの位置の変更というのは Animate はプログラムですから 勿論計算できるんですね。 つまり最初と最後だけ決めてあげれば その間の状態は Animate が自動的に 計算して補ってくれる。 これを補間と言います。 補間でアニメーションを作っています。 ですから同じパーツを上から下に 位置をずらすという風になっている訳です。 次も又 設定が変わっています。 つぶれています。 けれどもつぶれたパーツを 別に用意したのではありません。 同じパーツの変形を使って つぶしてるんですね。 次はまた戻します。 そして間がありませんから ここは補間ですね。 次のキーフレームを選ぶと ここからここまで移動してる事が分かります。 そしてまたつぶしています。 変形です。 つまりプロパティをキーフレームで変更し その間のプロパティの値というのは Animate が自動的に計算をして 補ってくれる。 間を補う「補間」と漢字で言うんですけども Animate では このアニメーションの方法を 間を補う方法なので between の トゥイーンと呼んでいます。 トゥイーンアニメーションという 言い方をするんですね。 コマ毎に、フレーム毎に違うパーツ 違う絵をおいてアニメーションさせるのが フレームアニメーションだったのに対して 同じパーツを使いつつプロパティを変えて そのプロパティの変更を 自動的に補っているのが 間を補うトゥイーンアニメーションと いう事になります。 このレッスンではパーツのプロパティの 初めの値・状態と終わりの値・状態を設定し その間を Animate が自動的に 補間して作ることによって 作られるトゥイーンアニメーションの 仕組みについて説明しました。

Animate CC 基本講座

Animateはインタラクティブなアニメーションが作れるソフトです。2016年にFlash Professional からアップデートされ、機能がますます充実し、名前も新しくなりました。このコースではAnimateの基本的な操作からグラフィックの描画やアニメーション作成、映像やサウンドの扱い方まで幅広く解説します。

6時間31分 (78 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2016年05月04日
アップデート日:2016年06月21日

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

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

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