Howard Pinsky
皆さんこんにちは！AdobeのシニアXDエバンジェリスト、Howard Pinskyです。本日はビデオとロティのアニメーションをプロトタイプに追加して、新しいレベルにすべて取り込む方法について説明します。それでは始めましょう。
ここでは、Adobe XDで設計したゲームプラットフォームを使用します。さらに、この経験を生かすためにビデオやロティのアニメを追加しましょう。ホーム画面には、トップに大きな特徴を持つ素晴らしい画像が映っていますが、とても静かな感じです。XDプロジェクトへのビデオの追加は、写真ととても似ています。これらをキャンバス上に直接ドラッグするか、マスクする空のシェイプにドラッグできます。追加して選択すると、プロパティインスペクターでビデオ再生オプションが表示されます。ここでは、ビデオの再生時間を制御できるだけでなく、この場合は、プレビューが起動されたときに自動的に行われます。ただし、左のアイコンをクリックすると、HUDが表示され、さらに多くのコントロールが備わります。例えば、カスタムサムネイルの設定、ビデオのスクラブとプレビュー、オーディオのオンとオフ、トリミング、ループ再生が可能です。
ビデオを追加し、再生時に選択したので、プレビューを起動して実行中のビデオを確認できます。たった一度の追加で、プロトタイプには全く新しい世界があります。Lottie アニメーションに追加したものを見る前に、ここで取り上げられているコンポーネント内の他の状態の1つに切り替えましょう。ここには、自動再生するビデオがもう一つあります。ただし、プレビューで分かるように、飛行機がショットに入るには数秒かかります。HUDを少し前にさっと見たときに、ビデオをトリミングする方法があると言いました。このモードに入ると、ハンドルをドラッグして開始点と終了点を設定できます。この場合は、アクションが開始する直前に再生を開始します。すべてが設定されると、チェックマークが適用されます。トリミングは完全に非破壊方式なので、HUDに戻って編集を調整したり取り消したりできます。
既定の状態に戻ると、もう一度プレビューを起動します。次に、2番目の状態までクリックすると、ビデオは新しい開始点で自動的に再生されます。3つ目のビデオを配信しました。最初の話に戻ると、より多くの情報を明らかにする拡張ビューがあります。また、自動アニメーションの状態の間にあるビデオは、中断することなく連続して再生されます。
さて、Lottieを見てみましょう。コミュニティ画面で、ホバーするときに表示されるコンポーネントを設定しました。この中で、アニメの絵文字ピッカーに使いたい追加エリアを素描しました。コンテンツを追加できるように、メインコンポーネントを編集しましょう。積み重ねられたグループに飛び込んで、既存のレイヤーを数回複製し、Finderに切り替えます。Finderでは、Anna Movinがui8.netで作成した、たくさんのかわいいLottieのアニメの絵文字を使用しています。ビデオと同様に、Lottieファイルを既存のLottieレイヤーに直接ドラッグしたり、キャンバス上に直接ドラッグしたり、シェイプにマスクしてサイズを定義したりできます。レイヤーを選択すると、再生を右に切り替えることができます。これらすべてに対して、自動的に再生するようにします。ここで指摘したい点の1つは、ビデオとは異なり、左側のアイコンはループを厳密に制御するもので、こうした操作に必要なアイコンだということです。修正.
このコンポーネントのデフォルトの状態に切り替えると、コミュニティ画面をプレビューできます。メッセージの上にホバーして、絵文字アイコンにホバーすると、Lottieのアニメーションが表示され、動作が確認されます。
プロトタイプ全体を説明する前に、再生終了トリガーを簡単に見てみましょう。このトリガーは、ビデオとロティの相互作用を自動化するのに役立ちます。先ほど、このコンポーネントの拡張状態を紹介しました。このセクションには、ダウンロード状態になるボタンがあります。ここでは、トランジションの後すぐに始まるLottieのアニメーションを紹介します。しかし、自分に質問することは、アニメーションが完成した後はどうなるのかということです
プロトタイプモードに切り替えると、現在時間トリガーが接続されていることが分かりますが、青いプラスボタンをクリックすると、2つ目の対話を追加できます。次に、プロパティインスペクターで再生終了トリガーを選択します。このトリガーは、ビデオまたはロティのアニメーションが完了した後に、XDにトランジションを実行するように指示します。この操作を行うには、再生状態に移行する単純なトランジションがトリックを行う必要があります。このトリガーは、アートボード間でも機能します。同じコンポーネントのロード状態で、別のロティアニメーションに追加しました。また、 時間トリガーに加えて、再生終了トリガーが「ゲーム」画面に表示されます。もちろん、これは全ての行動を見ない限り、大した意味を持ちません。デフォルトの状態に戻るには、プレビューを起動し、このビューを展開してから、ダウンロードの相互作用を開始します。また、再生の終了トリガーのおかげで、コンポーネントは自動的に再生状態に移行し、ここをクリックしてロードするアニメーションを起動できます。これが完了すると、アートボードのトランジションが行われます。
これらの例は、ビデオとLottieでできることの表面的なことだけです。今後のチュートリアルでは、さらに多くの使用例を取り上げます。けれど終わる前に、この経験全体を見てみましょう。お楽しみに。
モーショングラフィックスでプロトタイプに新しい命を吹き込みましょう。このチュートリアルでは、ビデオとLottieのアニメーションを使用して、ゲームプラットフォームを設計する方法を説明します。ビデオファイルとロティファイルをデザインキャンバス上に直接ドラッグするか、マスクとして空のシェイプにドラッグします。プロパティインスペクターでビデオ再生オプションを調整します。サムネイルの追加、ビデオのスクラブとプレビュー、オーディオの有効化、ビデオクリップのトリミング、ループ再生を行います。自動アニメーショントランジションとのインタラクションを繋いで、ビデオを中断せずに再生します。Lottieアニメーションの再生が終了したときに、再生終了トリガーを使用して別の状態に自動的に移行する操作を行います。
