前回は、クラシックモーショントゥイーンと モーションガイドを作成しました 引き続き ムービークリップを紹介しましょう ムービークリップもシンボルの一種です 独立したタイムラインを持ち 何度も繰り返しループするシンボルです では、この水面を動かしてみましょう プロパティパネルを見ると 水面(water)のインスタンスであり グラフィックシンボルであることがわかります このアートを変更するには ライブラリを開き シンボルを更新すれば アニメーション全体が更新されます これを水面が常時波打つ アニメーションにするには ムービークリップが最適です まず、クリックして選択して このグラフィックシンボルをムービークリップに入れます Animateではそのようなネストが可能です 実際、シンボルの中にシンボルを入れる この手法がよく用いられます このグラフィックシンボルを選択して 「修正/シンボルに変換」を選択します 「mc_water」と名付けます こちらのグラフィックシンボルが 水面のカラーなどの 外観を保持しています mc_waterはムービークリップで アニメーションのコンテナとなります 「OK」をクリックすると タイムラインにムービークリップのシンボルが表示されます ライブラリを見ると 両方のシンボルが表示されています グラフィックシンボルのwaterは 円、四角、三角のアイコンで示されます ムービークリップのシンボルは歯車アイコンで ループして連続して動くことを示します mc_waterをダブルクリックすると その中に入ることができます Scene 1ではなく、mc_waterのタイムラインです さらにダブルクリックすると そのまま編集画面になります 今、waterシンボルを開いていますが それはムービークリップの中にあり さらにそれはScene1の中にあります 別の方法もあり、ここをダブルクリックするか 右クリックして 「同じ位置で編集」を選択します この方法では、ライブラリから開いた編集画面を 同じ位置で開くことができます ご覧のとおり、この編集画面は Scene 1ではなく、mc_waterのタイムラインですが Scene 1ではなく、mc_waterのタイムラインですが 実際のステージの境界も見えます 暗い色で示されていますが ガイドとして機能しています 水面を伸ばしましょう Qキーを押して自由変形ツールに切り替えます 側面を選択して少し引き伸ばし 左側に移動しますが メインステージの境界内に水面が残るようにします これが最初のキーフレームです 約2秒の位置を選択し F6キーを押して キーフレームを挿入します このキーフレームを右にドラッグします これも水面がメインステージの 境界内に収まる位置までです 次に中間を右クリックして 「クラシックトゥイーンを作成」を選択します これで、水面が左から右へ流れます ごく簡単な基本的アニメーションですね 操作はボートのアニメーションと同じです しかし、これはムービークリップの中なので Scene 1で再生すると 何も変わりません ところが、Command+Returnまたは Ctrl+Enterで、ムービープレビューを表示すれば ムービークリップとボートが再生され 水面が常時動くのがわかります 完全なループではありませんが ムービークリップの仕組みはわかったでしょう シンプルなアニメーションを作成し 何度もループさせることができます もう1つのムービークリップを追加しましょう ボートをアップグレードして たなびく帆を追加します ライブラリでダブルクリックして ボートの編集画面を開きます Layer 1と表示されています それをダブルクリックして、「boat」に変更します 「新規レイヤー」をクリックして、2つのレイヤーを追加します 1つはマスト(mast)用 もう1つは帆(sail)用です マストのレイヤーで 長方形ツールを選択して カラーパネルでカラーを変更します 「線」をクリックして、「なし」を選択します 「塗り」は プリセットの黒から白へのグラデーションを クリックして選択します パネルを閉じます マストのレイヤーを選択したまま ボートの上にマストを描き このように突き出した状態にします ボートの中に入れるため 根元の部分を囲むようにドラッグし ズームインします 線ツールに切り替えて 色は赤にしましょう ボートの縁に沿ってドラッグします これがハサミのような役割を果たします 選択ツールで、マストの下の部分をクリックすれば 下部を切り離されて 半分に分割されます これでDeleteを押します 線をダブルクリックして Deleteを押します これでマストがボートの中に収まったように見えます Command(Ctrl)+マイナス(-)キーでズームアウトします または「表示」 「縮小」をクリックしても同じです 「縮小」をクリックしても同じです 次に帆のレイヤーを選択します 長方形ツールに切り替え 「線」を「なし」に 「塗り」を「赤」に設定します 帆をドラッグして引き出し マストから突き出しているようにします これでは旗のようですね これを修正するには、選択ツールに切り替え コーナーを選択し 下にドラッグして 次のコーナーにスナップさせます これで帆ができました もう少し外観を整えましょう 側面を少し膨らませます 下部も同様に、引き上げましょう 帆が完成しました しかし、アニメーションにするには ムービークリップに変換する必要がありましたね さっそく変換して フレーム単位のアニメーションを作成しましょう 帆を選択して 「修正/シンボルに変換」を選択します 「修正/シンボルに変換」を選択します ムービークリックにするため 「mc_sail」と名前を付けます ムービークリップを確認して 「OK」をクリックします boatシンボルの中に、sailシンボルができました ダブルクリックすれば、その場で編集できます mc_sailタイムラインが表示されます boatシンボルの中にあり Scene 1の一部です この帆を動かしましょう 右側のこのボタンをクリックして タイムラインを拡大します フレーム3でF6を押し、キーフレームを追加します 帆を少し調整します ここを縮め ここは狭く こちらは湾曲を大きくすると フレーム1とフレーム2ではこのような変化が生まれます フレーム5を選択して、右クリックしてキーフレームを挿入します 右クリックの「キーフレームの挿入」かF6キーを使います ここで、帆をさらに内側に寄せて 前のフレームとは少し変化させます タイムラインのキーフレーム1が 2フレーム分 キーフレーム2も2フレーム分あり キーフレーム3が1フレームなので もう1つ追加しましょう フレーム5を選択して 右クリックして「フレームの挿入」を選択します 3つのキーフレームがそれぞれ2フレームずつタイムライン上に 配置されました これで、ご覧のようなアニメーションになります シンプルですね Command(Ctrl)+Enterを押してムービーをプレビューすると すべてのムービークリップが再生されます 帆がタイムライン上で独立してループし 帆がタイムライン上で独立してループし 風を受けて揺れています Adobe Animateの入門シリーズをお楽しみいただけましたか Adobe Animateの入門シリーズをお楽しみいただけましたか Markがご案内しました。
またお会いしましょう ご覧いただきありがとうございました まっすぐ進もう!
そこで止まらず まっすぐ進もう!
