アセットワープでアニメーションを作成

前回までのビデオでは グラデーションの変形ツールを使って ボートに美しいグラデーションを追加したり Photoshopで雷を作成したあと、Adobe Creative Cloudライブラリを使って それをAdobe Animateに読み込んだり サウンドを読み込んだりしました このビデオでは、ボートに船員を追加し アセットワープツールとクラシックトゥイーンを使って 船員に手を振らせましょう では始めましょう まず、ライブラリを開きます ボートをダブルクリックして ボートの編集画面を開きます 新規レイヤーを作成して「sailor」と名付けます 他のレイヤーは誤ってクリックしないように ロックしておきましょう まず線なしの円を描きます 肌の色を選択して 大きな頭を描きましょう これはごくシンプルな、なんの変哲もない アートワークです アセットワープツールを適用したり、動きをつけられるキャラクターを 作成するだけです ビットマップを使用しても構いません 次に選択ツールを選択し Optionキーを押しながら、この部分をドラッグして引っぱり出します キーを押したまま、ここも変形し ここも引っ込ませて口にします ここは少し狭めて 端を尖らせると、これで 口ができました また円を描いて目を作りましょう 白にして 黒い線を追加します 今度はカラーを青でもなんでも 好きな色に変更し 線なしにして円を描きます もう1つ円を追加して瞳にします これは黒にします Command＋プラスでズームインし スペースバーでハンドツールに切り替えます ここに小さな瞳を描きましょう 目ができました これを選択し、Command＋Gキーでグループ化したら 適切な位置に 移動します 次は帽子を作りましょう 矩形ツールを選択し、白にして 長方形を描きます 上下の辺を持ち上げて 両サイドは少し広げましょう 楕円ツールに切り替え 上に少し出っ張りを付けると これで船員の帽子が できましたね またこれを選択し、Command＋Gキーでグループ化します グループ化しておけば 同じレイヤー上のものが混ざらなくて便利です グループとして移動や変形 拡大縮小などができます 船員らしくなりました 髪の毛はブラシで追加できます 髪の色は好きなカラーを選びましょう ブラシの太さは 右角かっこキーを押すと太くなり 左角かっこキーで細くなります このキーの動作はPhotoshopとまったく同じです このあたりに適当に髪を描くと 帽子がグループ化されているので 髪は帽子の後ろに隠れます このとおりです Command＋マイナスでズームアウトし スペースバーを押してハンドツールを使います 次は線ツールを選択し プロパティで線の太さを3～4ぐらいにして 船員の体や姿勢を描いていきます 足を手前に1本、向こう側に もう1本描きましょう 片手はボートの縁に伸ばし もう片方の手は反対側に伸ばします 簡単ですね 次にブラシツールを選択し 青をズボンの色に使います ズームツールを選択して、ズボンのところに ズームインします 右角かっこキーで ブラシサイズを太くして ズボンを描いていきましょう 腰のところも描きます この部分は遠くに小さく 見えるだけなので問題ありませんが はみ出した部分だけ変形させて ボートの内側に足が収まるよう直しましょう 次は白いシャツです またスペースバーを押してカンバスを動かし 体と腕にシャツを描き足します 完璧でなくても構いません Photoshopと同様、虫めがねツールをダブルクリックすると 100％に戻ります 次は顔にズームインし、カラーを選択しますが ペイントブラシを選択し ここからカラーを選ばずに カーソルをそのまま外にドラッグすると、スポイトツールで この肌の色を選択できます では、この部分に手を描いていきましょう 適当に手首を描いて 手を描き足しましょう これでよし 出来上がったキャラクターにズームインします タイムラインにフレームを追加しましょう だいたい1秒半、30フレームぐらいが いいでしょう フレームを全部選択します フレームを挿入するには、F5キーを押すか この「キーフレームを挿入」ボタンを使います ボタンを長押しし、「フレーム」をクリックすると 選択した範囲にフレームが追加されました 「sailor」レイヤーをクリックして選択します このレイヤーで最初のキーフレームをクリックすると キーフレーム上のコンテンツがすべて選択されます Command＋Gキーでアートワークをグループ化し ここにあるアセットワープツールを選択しましょう このツールを使うと、クリックするだけでピンを追加できます 手を動かすとしたら 手をクリックします すると全体にメッシュが適用され 手を動かせるようになりますが 今の状態だと全体が動いてしまいます そこで、ピンを1つ追加し 体を今の場所に固定します 首にも1つ 肘にも1つ追加しましょう 頭を動かす場合は、頭にもピンを追加します この部分をドラッグすると キャラクターを動かすことができます では、頭を少し反らせて 腕は下げたまま キーフレームを追加していきましょう ここに1つ追加します このボタンを長押しし 今回は「キーフレーム」を選択して タイムラインにキーフレームを追加します 2つ目のキーフレームでは、このピンを 少し後ろにドラッグしましょう 1つ目と2つ目のキーフレーム間に 動きが加わりましたね 「キーフレームを挿入」ボタンで またキーフレームを追加しましょう 今度は手を上にドラッグし 肘も上に動かして 手を振らせます 先に進めて またキーフレームを追加し 手を少し動かします さらに進めてキーフレームをまた追加し 今度は手を少し戻します 少しフレームを追加しましょう またボタンを長押しし、フレームを追加します 最後のキーフレームを追加し 手をボートの縁に下げましょう こんな感じです シンプルな動きですが 嬉しいことに、ここでフレーム全体を選択し 右クリックしてクラシックトゥイーンを追加すれば 作成したキーフレーム間の 動きをなめらかにすることができます 最後に Command＋Returnキーを押してムービーをプレビューしましょう Adobe Animateのアセットワープツールを使えば このように簡単にアニメーションを作成できます