Lottieアニメーションのインポート
オーサリングツールにLottie形式のアニメーションをインポートして、Alexa Presentation Language（APL）ドキュメントの作成に使用できます。LottieはJSONのアニメーション形式で、Adobe After Effectsから書き出すことができます。
Lottieアニメーションのインポート
オーサリングツールで、Lottie形式のJSONファイルをAlexa Vector Graphics（AVG）形式に変換できます。変換後のベクターグラフィックアニメーションをドキュメントで使用できます。
インポートするアニメーションを準備する
オーサリングツールは、Adobe After EffectsでBodymovinプラグイン（バージョン5.7.5）を使って作成されたLottieファイルをサポートしています。
一部のAfter Effects機能はサポートしていません。サポートされていない機能がアニメーションに使われていないことを確認してください。詳細については、サポートされている機能を参照してください。
アニメーションをLottie形式で書き出す方法の詳細については、How to Get Started Using Bodymovin and Lottie in After Effectsを参照してください。
アニメーションをインポートする
Lottieアニメーションをインポートする
- 開発者コンソールで、対象のスキルを開きます。
- 左側のナビゲーションから、マルチモーダルをクリックします。
-
視覚をクリックします。オーサリングツールには、スキルに視覚応答が保存されたAPLドキュメントのみが一覧表示されます。
- 視覚応答を作成をクリックします。
- アップロードをクリックします。
- Lottieファイルを視覚応答をアップロードダイアログボックスにドラッグするか、参照をクリックしてインポートするファイルを選択します。
- アップロードをクリックします。
- プロンプトが出たら、変換をクリックします。
- エラーなく変換が終了したら、新しいAPLドキュメントが開き、変換されたアニメーションが表示されます。
- 変換でエラーが発生した場合、サポートされていない機能のリストが表示されます。リストを確認し、続行をクリックします。こうしたエラーを防ぐには、After EffectsアニメーションがLottieやオーサリングツールでサポートされていない機能を使っていないことを確認します。サポートされている機能については、こちらを参照してください。
アニメーションの確認とドキュメントの編集
オーサリングツールでドキュメントが正常に変換されると、アニメーションを含む新しいドキュメントが表示されます。新しいドキュメントには次の要素が含まれます。
myGraphicという名前のAlexa Vector Graphic（AVG）。myGraphicのAVG定義は、ドキュメントのgraphicsプロパティのオブジェクトです。AVGには、Lottieアニメーションがグラフィックの描画とアニメーション化に使用するデータがすべて含まれています。AVG形式の詳細については、Alexa Vector Graphics形式を参照してください。myGraphicを表示するmainTemplateのVectorGraphic。これによりアニメーションを表示できます。
たとえば、このAPLドキュメントは次のようになります。簡潔に表現するため、AVGの詳細は省略しています。
{
"type": "APL",
"version": "2022.1",
"mainTemplate": {
"parameters": [
"payload"
],
"items": {
"type": "VectorGraphic",
"source": "myGraphic",
"width": "100%",
"height": "100%",
"scale": "best-fit",
"align": "center",
"frame": "${(elapsedTime*0.06)%360}"
}
},
"graphics": {
"myGraphic": {
"type": "AVG",
"version": "1.1",
"width": 1280,
"height": 800,
"description": "Animate-Item",
"items": [],
"parameters": [
{
"name": "frame",
"value": 0
}
],
"resources": []
}
}
}
Lottieファイルから変換されたアニメーションを確認します。大幅に変更する場合は、After Effectsで編集してからLottieファイルとして再書き出しし、ファイルをAPLに変換する手順を繰り返してください。Lottieファイルをアップロードすると、毎回新しいAPLドキュメントが作成されます。Lottieファイルを既存のAPLドキュメントにインポートすることはできません。
アニメーションをデザインに組み込む
アニメーションの変換が終了したら、ドキュメントを編集してアニメーションをデザイン全体に組み込みます。たとえば、ContainerをmainTemplateに追加し、VectorGraphicをほかのコンポーネントとともにContainerに移動します。
AVGの名前は、myGraphicから別の意味のある名前に変更することをお勧めします。JSONコードを表示して次の2か所の名前を変更します。
graphicsプロパティに割り当てられたグラフィックの名前VectorGraphicコンポーネントのsourceプロパティ
オーサリングツールでのドキュメントの編集について詳しくは、APLドキュメントの作成と編集を参照してください。
Lottieアニメーションを使ったドキュメントの例
以下は、AlexaBackground、AlexaHeader、Text、VectorGraphicの各コンポーネントを表示するAPLドキュメントの例です。VectorGraphicコンポーネントは、Lottieアニメーションから作成されたグラフィックを参照します。この例では、グラフィックの名前がmyGraphicからtowerOfBlocksAnimationに変更されています。
この例のアニメーションを表示するには、JSONのサンプルコードをオーサリングツールにコピーして貼り付けます。
Lottieアニメーションを外部パッケージに移動する
Lottieアニメーション用のJSONコードは大きくなることがあります。視覚応答のサイズを小さく維持するには、アニメーションのコードを別の外部パッケージに移動してから、importプロパティを使ってそのパッケージをAPLドキュメントにインポートします。
外部パッケージを作成してホストする方法の詳細については、APLパッケージでレイアウト、グラフィックスなどのリソースをホストするを参照してください。
サポートされている機能
オーサリングツールは、Adobe After EffectsでBodymovinプラグイン（バージョン5.7.5）を使って作成されたLottieファイルをサポートしています。
一部のAfter Effects機能は、Lottie形式でサポートされていません。Lottieでサポートされていない機能は、オーサリングツールやAPLでもサポートされません。LottieでサポートされるAfter Effectsの機能については、Lottieの技術資料でSupported Featuresを参照してください。
以下の表に、オーサリングツールがAVGに変換できるAfter Effectsの機能をまとめます。
| After Effects機能 | 変換サポートの有無 |
|---|---|
|
シェイプ |
|
|
楕円 |
◯ |
|
長方形 |
◯ |
|
角丸長方形 |
制限付きサポート。 角丸のアドオンレイヤーはサポートされません。 |
|
多角形 |
◯ |
|
グループ |
◯ |
|
リピーター |
✕ |
|
パスのトリミング（個別に） |
制限付きサポート。APLとLottieのフレームレートの違いにより、変換結果に誤差が生じる場合があります。 |
|
パスのトリミング（同時に） |
制限付きサポート。APLとLottieのフレームレートの違いにより、変換結果に誤差が生じる場合があります。 |
|
塗り |
|
|
カラー |
◯ |
|
不透明度 |
◯ |
|
塗りの規則 |
✕ |
|
グラデーションの塗り |
制限付きサポート。 放射状アニメーションはサポートされません。 |
|
グラデーションの線 |
◯ |
|
線 |
|
|
カラー |
◯ |
|
不透明度 |
◯ |
|
線幅 |
◯ |
|
線端 |
〇 |
|
線の結合 |
◯ |
|
角の比率 |
✕ |
|
破線 |
◯ 破線はパスのトリミングと競合する可能性があることに注意してください。 |
|
グラデーション |
制限付きサポート。 線形グラデーションのみがサポートされます。 |
|
トランスフォーム |
|
|
位置 |
◯ |
|
位置（x,y） |
◯ |
|
スケール |
◯ |
|
回転 |
◯ |
|
アンカーポイント |
◯ |
|
不透明度 |
◯ |
|
親とリンク |
◯ |
|
自動方向 |
✕ |
|
歪曲 |
✕ |
|
補間法 |
✕ |
|
リニア補間 |
〇 |
|
ベジェ補間 |
〇 |
|
停止補間 |
✕ |
|
空間補間法ベジェ |
〇 |
|
ロービング |
✕ |
|
マスク |
|
|
マスクパス |
〇 |
|
マスク不透明度 |
〇 |
|
追加 |
✕ |
|
型抜き |
✕ |
|
交差 |
✕ |
|
明るく |
✕ |
|
暗く |
✕ |
|
差 |
✕ |
|
マスクの拡張 |
✕ |
|
マスクの境界のぼかし |
✕ |
|
マット | |
|
アルファマット |
〇 |
|
アルファ反転マット |
✕ |
|
ルミナンスキーマット |
✕ |
|
ルミナンスキー反転マット |
✕ |
|
パスの結合 | |
|
結合 |
✕ |
|
追加 |
✕ |
|
型抜き |
✕ |
|
交差 |
✕ |
|
中マド |
✕ |
|
レイヤーエフェクト | |
|
塗り |
✕ |
|
線 |
✕ |
|
色抜き |
✕ |
|
トライトーン |
✕ |
|
レベル（個々の制御） |
✕ |
|
テキスト | |
|
Glyphs |
✕ |
|
フォント |
✕ |
|
トランスフォーム |
✕ |
|
塗り |
✕ |
|
線 |
✕ |
|
字送り |
✕ |
|
アンカーポイント |
✕ |
|
パス |
✕ |
|
文字単位の3D化 |
✕ |
|
範囲セレクター（単位） |
✕ |
|
範囲セレクター（基準） |
✕ |
|
範囲セレクター（量） |
✕ |
|
範囲セレクター（シェイプ） |
✕ |
|
範囲セレクター（イーズ 高く） |
✕ |
|
範囲セレクター（イーズ 低く） |
✕ |
|
範囲セレクター（順位をランダム化） |
✕ |
|
エクスプレッションセレクター |
✕ |
|
その他 |
|
|
エクスプレッション |
✕ |
|
画像 |
✕ |
|
プリコンポーズ |
◯ |
|
時間伸縮 |
✕ |
|
タイムリマップ |
✕ |
|
マーカー |
✕ |
トラブルシューティング
問題： 「変換が終了しましたが問題があります」というメッセージが表示された
現象
オーサリングツールに「変換が終了しましたが問題があります」というメッセージが表示されます。 メッセージにはサポートされていないAfter Effectsの機能の一覧が表示されています。
解決方法
この問題は、オーサリングツールがファイルをインポートできたけれど、サポートされていない機能のため想定どおりの結果が出力されない可能性があることを示しています。
メッセージに記載されたサポートされていない機能の一覧をメモします。続行をクリックし、サポートされていない機能が含まれない状態のアニメーションを確認します。想定した結果と異なる場合、Adobe After Effectsに戻ってそれらの機能を削除してから、アニメーションをもう一度Lottieファイルに書き出してインポートしてみてください。
サポートされている機能については、こちらを参照してください。
問題： 「Lottieファイルの変換中にエラーが発生しました」というメッセージが表示された
現象
オーサリングツールに「Lottieファイルの変換中にエラーが発生しました」というメッセージが表示されます。 メッセージにはサポートされていないAfter Effectsの機能の一覧が表示されています。
解決方法
このエラーは、サポートされていない機能があるために、オーサリングツールがファイルをまったくインポートできなかったことを示しています。
メッセージに記載されたサポートされていない機能の一覧をメモします。キャンセルをクリックして変換を終了するか、最初からやり直すをクリックして別のファイルをインポートします。
問題： 「ファイルタイプがサポートされていません」というメッセージが表示された
現象
オーサリングツールに「ファイルタイプがサポートされていません。APLまたはLottieのjsonファイルを選択してください」というメッセージが表示されます。
解決方法
このエラーは、オーサリングツールがファイルをLottieファイルと認識しなかったことを示しています。キャンセルをクリックし、Adobe After Effectsを使ってアニメーションを作成してから、Bodymovinプラグインを使って書き出します。
ほかの方法で作成されたLottieファイルは、APLでは機能しない場合があります。
問題： 変換が正常に終了したのにプレビューペインに空白画面が表示される
現象
オーサリングツールには変換が正常に終了したことを示すメッセージが表示されています。にもかかわらず、オーサリングツールのプレビューペインは空白で、アニメーションなしの黒いviewportが表示されます。ツールの左側のペインには、想定どおりのAVGおよびVectorGraphicのコードが表示されています。
解決方法
この状況は、インポートしたアニメーションに黒色を使用したテキストや画像が含まれている場合に発生する可能性があります。アニメーションは正常にインポートされますが、viewportのデフォルトの背景色が黒いため表示されません。
黒いアニメーションが表示されるよう、ドキュメントの背景色を変更するか、lightテーマに変更してください。
以下は、背景色やテーマを変更する方法の例です。簡潔に示すため、インポートしたAVG（myGraphic）の詳細は省略しています。
viewportのテーマを変更する
ドキュメントレベルのthemeプロパティをドキュメントの最上位に追加し、lightに設定します。
{
"type": "APL",
"theme": "light",
"version": "2022.1",
"mainTemplate": {
"parameters": [
"payload"
],
"items": {
"type": "VectorGraphic",
"source": "myGraphic",
"width": "100%",
"height": "100%",
"scale": "best-fit",
"align": "center",
"frame": "${(elapsedTime*0.06)%1198}"
}
},
"graphics": {
"myGraphic": {}
}
}
ドキュメントの背景を別の色に変更する
ドキュメントレベルのbackgroundプロパティを追加し、別の色かグラデーションに設定します。
{
"type": "APL",
"version": "2022.1",
"background": "yellow",
"mainTemplate": {
"parameters": [
"payload"
],
"items": {
"type": "VectorGraphic",
"source": "myGraphic",
"width": "100%",
"height": "100%",
"scale": "best-fit",
"align": "center",
"frame": "${(elapsedTime*0.06)%1198}"
}
},
"graphics": {
"myGraphic": {}
}
}
AlexaBackgroundレスポンシブ対応コンポーネントを使用する
alexa-layoutsパッケージのAlexaBackgroundコンポーネントを使うと、背景をよりきめ細かく制御できます。背景には、色、グラデーション、画像、ビデオ、デフォルトのAlexa背景を使用できます。mainTemplateは1つのコンポーネントしか表示しないため、Containerを追加してから、そのContainerのitems配列にAlexaBackgroundやVectorGraphicのコンポーネントを移動します。
AlexaBackgroundコンポーネントにアクセスするには、最新バージョンのalexa-layoutsをimport配列に追加します。
以下は、alexa-layoutsパッケージをインポートする方法とContainer内にAlexaBackgroundやVectorGraphicを配置する方法の例です。この例では、デフォルトのAlexa背景を使用しています。
{
"type": "APL",
"version": "2022.1",
"import": [
{
"name": "alexa-layouts",
"version": "1.5.0"
}
],
"mainTemplate": {
"parameters": [
"payload"
],
"items": {
"type": "Container",
"width": "100%",
"height": "100%",
"items": [
{
"type": "AlexaBackground"
},
{
"type": "VectorGraphic",
"source": "myGraphic",
"width": "100%",
"height": "100%",
"scale": "best-fit",
"align": "center",
"frame": "${(elapsedTime*0.06)%1198}"
}
]
}
},
"graphics": {
"myGraphic": {}
}
}
APLで背景を使用する方法について詳しくは、コンテンツを背景、境界線、ヘッダーと結合するを参照してください。
関連トピック
その他のリソース：
最終更新日: 2022 年 06 月 15 日