モーショントゥイーンを使用してアニメーションインフォグラフィックを作成し、それをカスタムパスに沿って動かしてアクションパネルでポップアップウィンドウを追加する方法を説明します。
animated-infographic_1000x560

Adobe Illustrator ファイルを読み込み中

Adobe IllustratorファイルをAdobe Animateに読み込みます。

学習内容:Adobe IllustratorファイルをAdobe Animateに読み込む

  • Illustratorドキュメントのレイヤー構造は、Adobe Animateのタイムラインレイヤーに変換されるため、Adobe Illustratorで正しく設定しておくことが重要です。この場合、動きのあるオブジェクト用と背景オブジェクト用の2つのレイヤーを作成します。
  • Adobe Animateファイルを設定します。Animateのスタート画面で、詳細設定/HTML5 Canvasを選択します。Illustratorドキュメントとまったく同じサイズを選択します。この場合は、900×500ピクセルです。
  • ファイル/読み込み/ステージに読み込みを選択します。ファイルを選択し、「すべてのレイヤーを選択」がオンになっていることを確認して、「読み込み」をクリックします。すべてのオブジェクトが配置され、個別に選択が可能です。
  • アニメーション化を開始する前に、まず背景レイヤーをロックします。誤って背景コンテンツを動かさないようにするためです。タイムラインパネルで背景レイヤーのロックアイコンをクリックします。

雲をアニメーション化する

ループするモーショントゥイーンを作成して、雲をアニメーション化します。

学習内容:モーショントゥイーンの作成と雲のアニメーション化

  • ツールパネルから選択ツールを選択します。ステージ上の雲を選択して右クリックし、「シンボルに変換」を選択します。
  • シンボルに変換ダイアログボックスで、シンボルに「Cloud」と名前を付けて「OK」をクリックします。
  • シンボルが作成されたら、アニメーション化を開始します。まず、ステージの左外側の開始位置まで雲を動かします。
  • 雲をダブルクリックすると、雲のシンボル独自のタイムラインが開きます。ここでアニメーション化をおこなうため、このシンボルの「中」に移動する必要があります。Adobe Animate画面の左上を見れば、シンボル内にいるかどうかを確認できます。シーン1/Cloudと表示されていれば大丈夫です。
  • 雲を右クリックして「モーショントゥイーンを作成」をクリックし、雲のシンボルにモーショントゥイーンを追加します。これで左から右に移動させることができます。
  • この雲をもう一度シンボルに変換するよう求められます。変換するとアニメーション化が可能になります。もっと早い段階に変換することもできましたが、このタイミングでも問題ありません。「OK」をクリックします。
  • モーショントゥイーンがタイムラインに自動的に追加されます。これは1秒間のアニメーションです(ただし、この時点では何も起こりません)。
  • ステージの右外側に雲を移動します。
  • これでアニメーションが作成されました。EnterキーまたはReturnキーを押してアニメーションを表示します。1秒間しかないので、とても動きが速くなります。これを次の手順で変えましょう。
  • タイムラインパネルでモーショントゥイーンを終了位置から右にドラッグして16秒まで延長します。
  • メニューバーで制御/プレビューを選択して、ブラウザーでこのムービーをプレビューします。

風車と円形矢印を回転させる

回転するモーショントゥイーンアニメーションを作成します。

学習内容:回転するモーショントゥイーンアニメーションの作成

  • 選択ツールで左にある風車の羽根を選択します。
  • 右クリックして「シンボルに変換」を選択し、羽根をシンボルに変換します。
  • シンボルに変換ダイアログボックスで、シンボルに「Windmill」と名前を付けて「OK」をクリックします。
  • 羽根をダブルクリックすると、シンボル独自のタイムラインが開きます。画面左上にシーン1/windmillと表示されます。
  • もう一度羽根を右クリックし、「モーショントゥイーンを作成」を選択します。
  • 表示されたダイアログボックスで「OK」をクリックします。
  • タイムラインパネルでモーショントゥイーンの途中をクリックします。
  • プロパティパネルに移動し、「回転」フィールドに「1」と入力します。羽根は1秒間で1回だけ回転します。
  • Enterキーを押してタイムラインを再生します。
  • 羽根の回転が速すぎるので、タイムラインパネルでモーショントゥイーンを終了位置から右にドラッグして3秒まで延長します。
  • メニューバーで制御/プレビューを選択して、ブラウザーでこのムービーをプレビューします。

モーションパスに沿って矢印をアニメーション化する

カスタムパスに沿ってアイテムを動かします。

学習内容:カスタムモーションパスに沿ってアイテムを動かす

  • モーションパスに沿って矢印を動かすための基本手順は、前のビデオで紹介したオブジェクトの動かし方と同様です。
  • まず第一に、パイプラインのIllustratorパスが後で必要になるので、選択して、Control+Cキー(Windows)または Command+Cキー(MacOS)でコピーしておきます。
  • 選択ツールで矢印を選択します。
  • 右クリックして「シンボルに変換」を選択、矢印をシンボルに変換します。
  • シンボルに変換ダイアログボックスで、シンボルに「arrow1」と名前を付けて「OK」をクリックします。
  • 矢印をダブルクリックすると、シンボル独自のタイムラインが開きます。画面左上にシーン1/arrowと表示されます。
  • もう一度矢印を右クリックし、「モーショントゥイーンを作成」を選択します。
  • 表示されたダイアログボックスで「OK」をクリックします。
  • タイムラインパネルで再生ヘッドがモーショントゥイーンの最後にあることを確認してから、ステージで矢印をパイプラインの右端まで動かします。Shiftキーを押しながら移動させてください。
  • EnterキーまたはReturnキーを押してアニメーションをテストします。アニメーションが速すぎるので、タイムラインパネルでモーショントゥイーンを終了位置から右にドラッグして6秒まで延長します。これで十分な長さになります。
  • もう一度Enterキーを押してアニメーションの速度をテストします。
  • ステージ上でモーションパスを選択します。ここで、モーションパスを最初にコピーしておいたパスに置き換えます。コピーしていたパスをペーストするだけです。
  • パスを少し上に移動してメインパスの位置に合わせます。パスをクリックして、正しい位置まで移動します。
  • Enterキーを押してアニメーションをテストします。ご覧のように、矢印はまだ正しい向きで回転していません。正しい向きにするには、モーションパスを選択して、プロパティパネルで「パスに沿って回転」オプションをオンにします。
  • 「シーン1」をクリックして、メインタイムラインに戻ります。ここで他の矢印も同様にアニメーション化できます。
  • メニューバーで制御/プレビューを選択して、ブラウザーでこのムービーをプレビューします。    

インタラクティブなボタンを作成する

アクションパネルでインタラクティブなボタンとポップアップウィンドウを作成します。

学習内容:ドキュメントにインタラクティブ機能を追加する

  • これまでのビデオでは、回転するオブジェクトや動きのあるオブジェクトをアニメーション化しました。今回はドキュメントにインタラクティブ機能を追加しましょう。
  • このチュートリアルをできるだけシンプルにするために、余分な要素のないドキュメントを新たに用意して、インタラクティブ機能のしくみをお見せします。
  • まず、ブラウザーでこれをテストします。制御/プレビューを選択します。
  • ご覧のように、このドキュメントにはループするアニメーションが含まれています。開いたり閉じたりするポップアップがその一例です。まずは、このアニメーションを停止するアクションをいくつか追加します。ボタンにアクションを追加し、ユーザーがボタンをクリックするとアニメーションが開始するようにします。
  • Adobe Animateで、ボタンの右側にあるポップアップをダブルクリックします。
  • EnterキーまたはReturnキーを押してアニメーションをテストします。
  • ポップアップアニメーションが表示されますが、最初のフレームで停止しようと思います。作成済みのActionsレイヤーで最初のフレームをクリックします。
  • ウィンドウ/アクションを選択して、アクションパネルを開きます。ここでアクションウィザードを使ってコードを追加できます。
  • 「ウィザードで追加」をクリックします。タイムラインのこの位置でのアクションをAnimateに指示する必要があります。この例では、アニメーションを停止することが必要です。1つ目のメニューをスクロールダウンして、「Stop」をクリックします。
  • 次のメニューでは「This timeline」をクリックし、「次へ」ボタンをクリックして次の手順に進んで、「With this Frame」を選択します。「完了して追加」をクリックしてコードを追加します。
  • 10番目のフレームで、この一連の手順を繰り返し、ユーザーがボタンをクリックするとアニメーションが停止するようにします。タイムラインパネルで10番目のフレームを選択し、「ウィザードで追加」ボタンをクリックして、1つ目のメニューで「Stop」をクリックします。「This timeline」、「次へ」、「With this Frame」、「完了して追加」の順にクリックします。
  • これですべての停止のアクションが追加されました。「シーン1」をクリックして、シーン1に戻ります。
  • インタラクティブ機能を追加する前に、メインタイムラインのすべてのシンボルインスタンスに名前を付ける必要があります。選択ツールでinfoボタンをクリックします。プロパティパネルで、インスタンス名フィールドに「info_button」と入力します。
  • ポップアップインスタンスを選択し、インスタンス名フィールドに「popup」と入力します。
  • Actionsレイヤーの最初のフレームに実際のインタラクティブ機能を追加します。タイムラインパネルのフレーム1上をクリックし、アクションパネルを開きます。
  • 「ウィザードで追加」ボタンをクリックします。1つ目のメニューをスクロールダウンして、「Play」をクリックします。infoボタンをクリックするとポップアップアニメーションが再生されるように、次のフィールドでは、「Popup」をクリックします。
  • 「Next(次へ)」をクリックします。アニメーションを開始させるトリガーを指定する必要があります。マウスクリック時に開始させるので、「On Mouse Click」を選択します。ユーザーはinfoボタンをクリックするので、次のフィールドでは「info_button」を選択します。「完了して追加」をクリックします。
  • 最初のフレームにコードが追加されました。
  • インタラクティブ機能が完成しました。メニューバーで制御/プレビューを選択して、ブラウザーでプレビューします。
09/24/2019

プレゼンター:Rob de Winter

制作:DWM Trainingen

このページは役に立ちましたか。