Flash Professional CC 2015 基本講座

アニメーションはどのようにつくられているのか

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フレームごとに異なるイメージを置いて再生することでアニメーションはつくられます。
講師:
07:58

字幕

これのレッスンではFlash Professional の中でアニメーションが どのように作られているのか ということをご説明します説明する内容というのは作り方ではなく 作られ方です細かい操作ではなくどういう仕組みで できているのかということをご理解くださいFlash Professional でアニメーションが作られたコンテンツ.fla ファイルを開きましたその中で アニメーションというのはパーツとして この「ライブラリ」という中に 含まれています先程 画面でお見せしたアニメーションなのですがこれはこの pen_animationという中に作られていますここで アニメーションを表示してみることはできるのですが具体的に このパーツの中身がどうなっているかというところを 見てみましょうダブルクリックで中身を確認することができますpen_animation というこの シンボル というのですけれどもダブルクリックすると それがこのタブに現れましたつまり pen_animation の中身を見ています―ということを 示していますそうすると タイムライン というのですけれどもそこに数字が打ってありますねこの数字はパラパラ漫画の ページだと思ってくださいFlash では フレーム という言い方をしてフレーム番号 というのですがパラパラ漫画の ページ番号だと思っていただければ 結構ですパラパラ漫画というのは 1ページずつ異なる絵をちょっとずつ違う絵を描いていくわけですねそしてそれを パラパラとめくっていくと動いているように見える という仕組みですFlash も この仕組みは全く同じです1フレームごとに 違う絵が描いてあるとそしてそれを 再生すると再生ができるのですけれども「制御」メニューの 一番上です「再生」とすると こんなアニメーションになっています実は このアニメーション自体またさらに 2つのパートに分かれていて最初のパートは 歩いている部分ですそれからこの後からは 落ちてくる部分とこれは別々に管理されていて実は プログラムでコントロールするようになっているのですがそこは 今回は置いておきましょう2つのパート 歩いている部分まずこちらを 見てみますそれは やはりこの 「ライブラリ」 の中にpen_walk という名前でパーツがありますつまり pen_animation の中にpen_walk というパーツがさらに含まれている ということなのですけれどもこれを開けてみましょうそうすると このタブがpen_walk に変わりましたそして コマ数が減りましたねまあ コマ漫画という言い方をしますのでコマ数と思っていただいて構わないのですが一応 Flash の用語ではフレーム と言いますそして このマス目が区切られていますこのマス目がページだと思っていただければ いいのですがこの つながっているマス目というのは同じ絵が 描かれていますここもそうですね 4 と 54 とは書いてありませんが4 らしき部分と5 との間では同じ絵が 描かれていますでも この間にある 1 マス1 フレームなのですがまた違う絵があるそれから 6 フレーム目も違う絵がありますという風に まさにパラパラ漫画のように1 コマ 1 コマ 場合によっては2 コマ 3 コマ 同じ絵を置くことはありますけれども考え方としては 1 フレームずつ違う絵を描いていくそうすることによって アニメーションになるということですでは再生を 今度は何度も何度も ループ再生してみるようにしてみますけれども再生しますがこの 6 フレームのアニメーション6 フレームのアニメーションを再生すると このようにちょこちょこ歩いている 感じになりますではもう一つの アニメーションのパートがありましたのでそちらも確認してみましょうそれは この pen_bounceバウンドなのですけれどもバウンドしたペンギン ということですダブルクリックで やはり中身が確認できます上から落ちてきて バウンドするというそういうアニメーションですね基本的に パラパラ漫画であることは同じなのですがダイムラインの様子が 少し違っていますねこれはこのアニメーションの作り方が 先程のコマごとの 作り方とは少し異なっているからですそれをちょっと見てみましょう一旦 停止しましてマス目が 縦に切られていません一本連続した感じで ただし点が打ってありますねこの点の事を キーフレームと言うのですがこれは一つ一つについて設定が変わっている ということを示しますどうなっているのか というとこれが初めの状態ですそしてこれが終わりの状態途中 点がありません見てみると位置が動いているのですけれども絵そのものは 変わってないですねこのように元になる ビジュアルエレメント というのですがそれ自体を 変えるのではなくその設定を 変更する―ここでいえば位置が変わる という形になっています初めの状態と 終わりの状態を決めるとそうすると 途中の状態というのはコンピューターですから 位置は計算できますですから コンピューターに任せてFlash Professional に任せて途中の状態を計算で 補っている補完 というのですけれども補完でアニメーションを作っていますそして次のコマを見るとあ 絵が潰れていると思うかもしれませんがこれも 元の絵そのものを潰しているというよりはその設定の 拡大縮小を変えることによってつまり プロパティを変えることによって変形しているように 見せているわけですですから 元の絵そのものを直接いじっているのではないのですね次のコマペンギンが元に戻りましたそして 途中がありませんから この途中は補完がしてあってキーフレームこの間を やはりここは位置が変わっていますそして次潰れますプロパティの設定で 縦の変形を行っているのですね縦を 短くしていますまた元に戻る途中を補完して 位置が変わるまたプロパティで 変形で潰す戻す少し位置を変えるとこのようになっていますFlash Professional の中ではアニメーションの動かし方というのはコマごとに違った状態の ビジュアルエレメントを見せると見た目の表現を変えるというつくりは一緒なのですがその 具体的な作り方として1 コマ 1 コマ 違う絵を描いていく先程の コマが切れてましたねフレームが 縦で切れていましたあのように フレームごとに違った絵を描くことによってアニメーションを作るのをフレームアニメーション と言いますそれに対してビジュアルエレメントそのものを変えるのではなくてそのプロパティ位置とか 伸縮とかそういったプロパティを変えて間は補完することによって 作る間を 作るのですねですからこれをトゥイーンアニメーション と言いますBetween(間) のトゥイーンですトゥイーンアニメーション という作り方とそれから フレームアニメーション という作り方パラパラ漫画の仕組みは一緒なのですけれどもFlash Professional ではこの 2 つの仕組みでアニメーションを作りそれらをまた パーツとして組み合わせることによって複雑なアニメーションが 出来上がっていますこのレッスンではFlash Professional のアニメーションが動く仕組みとその具体的なアニメーションの作り方2 つフレームアニメーションとトゥイーンアニメーションについてご説明しました

Flash Professional CC 2015 基本講座

Flash ProfessionalはPCだけでなく、モバイル向けにもインタラクティブなアニメーションが作れるソフトウェアです。動画はFlash PlayerだけでなくAIRやHTML5にも書き出せます。このコースではその基本的な操作方法からグラフィックの描画やアニメーション、画像やサウンドの扱い方、そしてActionScriptなどについて説明します。

7時間21分 (78 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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