question

Patrick COPINE avatar image
Patrick COPINE asked

APL 1.1 Transitions with renderDocument

Hi,

I would like to create a graphic animation (excluding AVG) based on image transition to represent the name of the skill. This works with the ExecuteCommands directive (file1.txt) and not just with the directice renderDocument (file2.txt). I can not find the reason for the problem.

file1.txt

{
  "directives": [
    {
      "type": "Alexa.Presentation.APL.RenderDocument",
      "token": "launch",
      "document": {
        "type": "APL",
        "version": "1.1",
        "graphics": {},
        "theme": "dark",
        "layouts": {
          "Header": {
            "parameters": [
              "title",
              "logo",
              "back"
            ],
            "item": [
              {
                "when": "${viewport.shape == 'round'}",
                "type": "RoundHeader"
              },
              {
                "when": "${viewport.width > viewport.height}",
                "type": "LandscapeHeader"
              }
            ]
          },
          "RoundHeader": {
            "item": [
              {
                "type": "AlexaHeader",
                "headerAttributionImage": "${logo}"
              }
            ]
          },
          "LandscapeHeader": {
            "item": [
              {
                "type": "AlexaHeader",
                "headerBackButton": true,
                "headerTitle": "${title}",
                "headerAttributionImage": "${logo}",
                "headerNavigationAction": "${back}"
              }
            ]
          },
          "Footer": {
            "parameters": [
              "hint",
              "hints"
            ],
            "item": [
              {
                "type": "Container",
                "when": "${viewport.shape == 'round'}",
                "paddingTop": "75vh",
                "item": [
                  {
                    "type": "RoundFooter"
                  }
                ],
                "position": "absolute"
              },
              {
                "when": "${viewport.width > viewport.height}",
                "type": "LandscapeFooter"
              }
            ]
          },
          "RoundFooter": {
            "item": [
              {
                "type": "AlexaFooter",
                "footerHint": "${hint}"
              }
            ]
          },
          "LandscapeFooter": {
            "item": [
              {
                "type": "AlexaFooter",
                "footerHint": "${hints}"
              }
            ]
          }
        },
        "resources": [
          {
            "dimension": {
              "paddingLetter": "25"
            }
          }
        ],
        "mainTemplate": {
          "parameters": [
            "payload"
          ],
          "item": {
            "type": "Container",
            "direction": "row",
            "width": "100vw",
            "height": "100vh",
            "position": "absolute",
            "items": [
              {
                "type": "Header",
                "title": "Pollair",
                "logo": "https://storage.googleapis.com/misc-13102018/ciel-v0.png",
                "back": "${payload.datasources.back}"
              },
              {
                "type": "Frame",
                "width": "100%",
                "height": "100%",
                "top": "0vh",
                "left": "-25vw",
                "position": "absolute",
                "item": [
                  {
                    "type": "Container",
                     "width": "125%",
                     "height": "100%",
                     "top": "0vh",
                     "left": "-25vw",
                     "position": "absolute",
                     "items": [
                       {
                         "type": "Image",
                         "id": "letter1",
                         "source": "https://storage.googleapis.com/images-01040218/lettreP-v1.png",
                         "scale": "fill",
                         "position": "absolute",
                         "width": "75",
                         "height": "75"
                       },
                       {
                         "type": "Image",
                         "id": "letter2",
                         "source": "https://storage.googleapis.com/images-01040218/lettreO-v1.png",
                         "scale": "fill",
                         "position": "absolute",
                         "width": "80",
                         "height": "80"
                       },
                       {
                         "type": "Image",
                         "id": "letter3",
                         "source": "https://storage.googleapis.com/images-01040218/lettreL-v1.png",
                         "scale": "fill",
                         "position": "absolute",
                         "width": "75",
                         "height": "75"
                       },
                       {
                         "type": "Image",
                         "id": "letter4",
                         "source": "https://storage.googleapis.com/images-01040218/lettreL-v1.png",
                         "scale": "fill",
                         "position": "absolute",
                         "width": "75",
                         "height": "75"
                       },
                       {
                         "type": "Image",
                         "id": "letter5",
                         "source": "https://storage.googleapis.com/images-01040218/lettreA-v1.png",
                         "scale": "fill",
                         "position": "absolute",
                         "width": "75",
                         "height": "75"
                       },
                       {
                         "type": "Image",
                         "id": "letter6",
                         "source": "https://storage.googleapis.com/images-01040218/lettreI-v1.png",
                         "scale": "fill",
                         "position": "absolute",
                         "width": "75",
                         "height": "75"
                       },
                       {
                         "type": "Image",
                         "id": "letter7",
                         "source": "https://storage.googleapis.com/images-01040218/lettreR-v1.png",
                         "scale": "fill",
                         "position": "absolute",
                         "width": "75",
                         "height": "75"
                       }
                     ]
                   }
                ]
              },
              {
                "type": "Footer",
                "hint": "${payload.datasources.properties.hint}",
                "hints": "${payload.datasources.properties.hints}"
              }
            ]
          }
        }
      }
    },
    {
      "type": "Alexa.Presentation.APL.ExecuteCommands",
      "token": "launch",
      "commands": [
        {
          "type": "Parallel",
          "when": "${environment.aplVersion == '1.1'}",
          "commands": [
            {
              "type": "Sequential",
              "commands": [
                {
                  "type": "AnimateItem",
                  "easing": "ease-in-out",
                  "duration": 2800,
                  "componentId": "letter1",
                  "value": [
                    {
                      "property": "opacity",
                      "to": 1
                    },
                    {
                      "property": "transform",
                      "from": [
                        {
                          "translateX": "-25vw"
                        },
                        {
                          "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                        },
                        {
                          "rotate": 720
                        }
                      ],
                      "to": [
                        {
                          "translateX": "${26+25+'vw'}"
                        },
                        {
                          "translateY": "45vh"
                        },
                        {
                          "rotate": 0
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "AnimateItem",
                  "easing": "ease-in-out",
                  "duration": 2800,
                  "componentId": "letter2",
                  "value": [
                    {
                      "property": "opacity",
                      "to": 1
                    },
                    {
                      "property": "transform",
                      "from": [
                        {
                          "translateX": "125vw"
                        },
                        {
                          "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                        },
                        {
                          "rotate": 720
                        }
                      ],
                      "to": [
                        {
                          "translateX": "${34+25+'vw'}"
                        },
                        {
                          "translateY": "45vh"
                        },
                        {
                          "rotate": 0
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "AnimateItem",
                  "easing": "ease-in-out",
                  "duration": 2800,
                  "componentId": "letter3",
                  "value": [
                    {
                      "property": "opacity",
                      "to": 1
                    },
                    {
                      "property": "transform",
                      "from": [
                        {
                          "translateX": "25vw"
                        },
                        {
                          "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                        },
                        {
                          "rotate": 720
                        }
                      ],
                      "to": [
                        {
                          "translateX": "${44+25+'vw'}"
                        },
                        {
                          "translateY": "45vh"
                        },
                        {
                          "rotate": 0
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "AnimateItem",
                  "easing": "ease-in-out",
                  "duration": 2800,
                  "componentId": "letter4",
                  "value": [
                    {
                      "property": "opacity",
                      "to": 1
                    },
                    {
                      "property": "transform",
                      "from": [
                        {
                          "translateX": "125vw"
                        },
                        {
                          "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                        },
                        {
                          "rotate": 720
                        }
                      ],
                      "to": [
                        {
                          "translateX": "${52+25+'vw'}"
                        },
                        {
                          "translateY": "45vh"
                        },
                        {
                          "rotate": 0
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "AnimateItem",
                  "easing": "ease-in-out",
                  "duration": 2800,
                  "componentId": "letter5",
                  "value": [
                    {
                      "property": "opacity",
                      "to": 1
                    },
                    {
                      "property": "transform",
                      "from": [
                        {
                          "translateX": "-25vw"
                        },
                        {
                          "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                        },
                        {
                          "rotate": 720
                        }
                      ],
                      "to": [
                        {
                          "translateX": "${60+25+'vw'}"
                        },
                        {
                          "translateY": "45vh"
                        },
                        {
                          "rotate": 0
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "AnimateItem",
                  "easing": "ease-in-out",
                  "duration": 2800,
                  "componentId": "letter6",
                  "value": [
                    {
                      "property": "opacity",
                      "to": 1
                    },
                    {
                      "property": "transform",
                      "from": [
                        {
                          "translateX": "125vw"
                        },
                        {
                          "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                        },
                        {
                          "rotate": 720
                        }
                      ],
                      "to": [
                        {
                          "translateX": "${66+25+'vw'}"
                        },
                        {
                          "translateY": "45vh"
                        },
                        {
                          "rotate": 0
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "AnimateItem",
                  "easing": "ease-in-out",
                  "duration": 2800,
                  "componentId": "letter7",
                  "value": [
                    {
                      "property": "opacity",
                      "to": 1
                    },
                    {
                      "property": "transform",
                      "from": [
                        {
                          "translateX": "-25vw"
                        },
                        {
                          "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                        },
                        {
                          "rotate": 720
                        }
                      ],
                      "to": [
                        {
                          "translateX": "${72+25+'vw'}"
                        },
                        {
                          "translateY": "45vh"
                        },
                        {
                          "rotate": 0
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}


file2.txt

{
  "directives": [
    {
      "type": "Alexa.Presentation.APL.RenderDocument",
      "token": "launch",
      "document": {
        "type": "APL",
        "version": "1.1",
        "graphics": {},
        "theme": "light",
        "commands": {
          "Pollair": {
            "parameters": [],
            "commands": [
              {
                "type": "Parallel",
                "when": "${environment.aplVersion == '1.1'}",
                "commands": [
                  {
                    "type": "Sequential",
                    "commands": [
                      {
                        "type": "AnimateItem",
                        "easing": "ease-in-out",
                        "duration": 2800,
                        "componentId": "letter1",
                        "value": [
                          {
                            "property": "opacity",
                            "to": 1
                          },
                          {
                            "property": "transform",
                            "from": [
                              {
                                "translateX": "-25vw"
                              },
                              {
                                "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                              },
                              {
                                "rotate": 720
                              }
                            ],
                            "to": [
                              {
                                "translateX": "${26+25+'vw'}"
                              },
                              {
                                "translateY": "45vh"
                              },
                              {
                                "rotate": 0
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "type": "AnimateItem",
                        "easing": "ease-in-out",
                        "duration": 2800,
                        "componentId": "letter2",
                        "value": [
                          {
                            "property": "opacity",
                            "to": 1
                          },
                          {
                            "property": "transform",
                            "from": [
                              {
                                "translateX": "125vw"
                              },
                              {
                                "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                              },
                              {
                                "rotate": 720
                              }
                            ],
                            "to": [
                              {
                                "translateX": "${34+25+'vw'}"
                              },
                              {
                                "translateY": "45vh"
                              },
                              {
                                "rotate": 0
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "type": "AnimateItem",
                        "easing": "ease-in-out",
                        "duration": 2800,
                        "componentId": "letter3",
                        "value": [
                          {
                            "property": "opacity",
                            "to": 1
                          },
                          {
                            "property": "transform",
                            "from": [
                              {
                                "translateX": "25vw"
                              },
                              {
                                "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                              },
                              {
                                "rotate": 720
                              }
                            ],
                            "to": [
                              {
                                "translateX": "${44+25+'vw'}"
                              },
                              {
                                "translateY": "45vh"
                              },
                              {
                                "rotate": 0
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "type": "AnimateItem",
                        "easing": "ease-in-out",
                        "duration": 2800,
                        "componentId": "letter4",
                        "value": [
                          {
                            "property": "opacity",
                            "to": 1
                          },
                          {
                            "property": "transform",
                            "from": [
                              {
                                "translateX": "125vw"
                              },
                              {
                                "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                              },
                              {
                                "rotate": 720
                              }
                            ],
                            "to": [
                              {
                                "translateX": "${52+25+'vw'}"
                              },
                              {
                                "translateY": "45vh"
                              },
                              {
                                "rotate": 0
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "type": "AnimateItem",
                        "easing": "ease-in-out",
                        "duration": 2800,
                        "componentId": "letter5",
                        "value": [
                          {
                            "property": "opacity",
                            "to": 1
                          },
                          {
                            "property": "transform",
                            "from": [
                              {
                                "translateX": "-25vw"
                              },
                              {
                                "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                              },
                              {
                                "rotate": 720
                              }
                            ],
                            "to": [
                              {
                                "translateX": "${60+25+'vw'}"
                              },
                              {
                                "translateY": "45vh"
                              },
                              {
                                "rotate": 0
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "type": "AnimateItem",
                        "easing": "ease-in-out",
                        "duration": 2800,
                        "componentId": "letter6",
                        "value": [
                          {
                            "property": "opacity",
                            "to": 1
                          },
                          {
                            "property": "transform",
                            "from": [
                              {
                                "translateX": "125vw"
                              },
                              {
                                "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                              },
                              {
                                "rotate": 720
                              }
                            ],
                            "to": [
                              {
                                "translateX": "${66+25+'vw'}"
                              },
                              {
                                "translateY": "45vh"
                              },
                              {
                                "rotate": 0
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "type": "AnimateItem",
                        "easing": "ease-in-out",
                        "duration": 2800,
                        "componentId": "letter7",
                        "value": [
                          {
                            "property": "opacity",
                            "to": 1
                          },
                          {
                            "property": "transform",
                            "from": [
                              {
                                "translateX": "-25vw"
                              },
                              {
                                "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                              },
                              {
                                "rotate": 720
                              }
                            ],
                            "to": [
                              {
                                "translateX": "${72+25+'vw'}"
                              },
                              {
                                "translateY": "45vh"
                              },
                              {
                                "rotate": 0
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        },
        "layouts": {
          "Header": {
            "parameters": [
              "title",
              "logo",
              "back"
            ],
            "item": [
              {
                "when": "${viewport.shape == 'round'}",
                "type": "RoundHeader"
              },
              {
                "when": "${viewport.width > viewport.height}",
                "type": "LandscapeHeader"
              }
            ]
          },
          "RoundHeader": {
            "item": [
              {
                "type": "AlexaHeader",
                "headerAttributionImage": "${logo}"
              }
            ]
          },
          "LandscapeHeader": {
            "item": [
              {
                "type": "AlexaHeader",
                "headerBackButton": true,
                "headerTitle": "${title}",
                "headerAttributionImage": "${logo}",
                "headerNavigationAction": "${back}"
              }
            ]
          },
          "Footer": {
            "parameters": [
              "hint",
              "hints"
            ],
            "item": [
              {
                "type": "Container",
                "when": "${viewport.shape == 'round'}",
                "paddingTop": "75vh",
                "item": [
                  {
                    "type": "RoundFooter"
                  }
                ],
                "position": "absolute"
              },
              {
                "when": "${viewport.width > viewport.height}",
                "type": "LandscapeFooter"
              }
            ]
          },
          "RoundFooter": {
            "item": [
              {
                "type": "AlexaFooter",
                "footerHint": "${hint}"
              }
            ]
          },
          "LandscapeFooter": {
            "item": [
              {
                "type": "AlexaFooter",
                "footerHint": "${hints}"
              }
            ]
          },
          "Letters": {
            "items": [
              {
                "type": "Image",
                "id": "letter1",
                "source": "https://storage.googleapis.com/images-01040218/lettreP-v1.png",
                "scale": "fill",
                "position": "absolute",
                "width": "75",
                "height": "75"
              },
              {
                "type": "Image",
                "id": "letter2",
                "source": "https://storage.googleapis.com/images-01040218/lettreO-v1.png",
                "scale": "fill",
                "position": "absolute",
                "width": "80",
                "height": "80"
              },
              {
                "type": "Image",
                "id": "letter3",
                "source": "https://storage.googleapis.com/images-01040218/lettreL-v1.png",
                "scale": "fill",
                "position": "absolute",
                "width": "75",
                "height": "75"
              },
              {
                "type": "Image",
                "id": "letter4",
                "source": "https://storage.googleapis.com/images-01040218/lettreL-v1.png",
                "scale": "fill",
                "position": "absolute",
                "width": "75",
                "height": "75"
              },
              {
                "type": "Image",
                "id": "letter5",
                "source": "https://storage.googleapis.com/images-01040218/lettreA-v1.png",
                "scale": "fill",
                "position": "absolute",
                "width": "75",
                "height": "75"
              },
              {
                "type": "Image",
                "id": "letter6",
                "source": "https://storage.googleapis.com/images-01040218/lettreI-v1.png",
                "scale": "fill",
                "position": "absolute",
                "width": "75",
                "height": "75"
              },
              {
                "type": "Image",
                "id": "letter7",
                "source": "https://storage.googleapis.com/images-01040218/lettreR-v1.png",
                "scale": "fill",
                "position": "absolute",
                "width": "75",
                "height": "75"
              }
            ]
          }
        },
        "onMount": [
          {
            "type": "Pollair"
          }
        ],
        "mainTemplate": {
          "parameters": [
            "payload"
          ],
          "item": {
            "type": "Container",
            "direction": "row",
            "width": "100vw",
            "height": "100vh",
            "position": "absolute",
            "items": [
              {
                "type": "Header",
                "title": "Pollair",
                "logo": "https://storage.googleapis.com/misc-13102018/ciel-v0.png",
                "back": "${payload.datasources.back}"
              },
              {
                "type": "Frame",
                "width": "100%",
                "height": "100%",
                "top": "0vh",
                "left": "-25vw",
                "position": "absolute",
                "item": [
                  {
                    "type": "Container",
                    "width": "125%",
                    "height": "100%",
                    "top": "0vh",
                    "left": "-25vw",
                    "position": "absolute",
                    "items": [
                      {
                        "type": "Letters"
                      }
                    ]
                  }
                ]
              },
              {
                "type": "Footer",
                "hint": "${payload.datasources.properties.hint}",
                "hints": "${payload.datasources.properties.hints}"
              }
            ]
          }
        }
      }
    }
  ]
}

Best regards,

alexa skills kitapl
file1.txt (15.0 KiB)
file2.txt (16.2 KiB)
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

1 Answer

Patrick COPINE avatar image
Patrick COPINE answered

I solved my problem by adding the "onMount" component associated with the "Pollair" type in the Container component associated with that of the Frame.

              {
                "type": "Frame",
                "width": "100%",
                "height": "100%",
                "top": "0vh",
                "left": "-25vw",
                "position": "absolute",
                "item": [
                  {
                    "type": "Container",
                     "width": "125%",
                     "height": "100%",
                     "top": "0vh",
                     "left": "-25vw",
                     "position": "absolute",
                     "onMount": [
                       {
                         "type": "Pollair"
                       }
                     ],
                     "items": [
                       {
                         "type": "Image",
                         "id": "letter1",
                         "source": "https://storage.googleapis.com/images-01040218/lettreP-v1.png",
                         "scale": "fill",
                         "position": "absolute",
                         "width": "75",
                         "height": "75"
                       },
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.