Let’s Get Moving! Create Rich Customer Experiences Using New Motion Features Available in APL 1.6.
Today, we’re excited to announce the newest version of the Alexa Presentation Language (APL 1.6) which enables you to build rich experiences that incorporate motion and adapt to a wider range of devices.
Our new motion features include a Lottie converter, new choreographed motions for Echo Show 10 (i.e. “choreos”), and custom Pager transitions. When used thoughtfully, these features can help draw attention, add emotion, and simplify complex ideas within your skill experiences. Additional new features include viewport profiles for tablets and layout resizing and rescaling, which enable you to tailor visuals between portrait and landscape orientations.
Last but not least, we’ve created an entirely new set of responsive templates and APL samples that allow you to experiment with new features and build great APL experiences. Check out the technical documentation for a complete summary of what’s new in APL 1.6.
Use Lottie Animations: The APL authoring tool can now convert Lottie files — an open source animation file format popular among web designers — into Alexa Vector Graphics (AVG). Once converted, the AVGs can be used in your visual responses. Note: See here for more details about which Lottie/After Effects features are supported.
New Choreos: Choreos allow you to add choreographed motion to skill experiences on the new Echo Show 10. The three new choreos available today are:
1. ClockwiseMediumSweep - A smooth clockwise sweeping motion.
2. CounterClockwiseSlowSweep - A slow, smooth counterclockwise sweeping motion.
3. MixedExpressiveShakes - Quick successive movements on either side of the device's current orientation.
Note: If you own an Echo Show 10 and want to see a choreographed motion response in action, say “Alexa, have a nice day.” :)
Custom Pager Transitions: A new handlePageMove handler allows you to create custom transitions on Pager components (custom transitions are built using APL commands). The example below uses the SetValue command to control opacity and create a custom “crossfade” transition.
Code sample:
{
"type": "APL",
"version": "1.6",
"layouts": {
"Slide": {
"parameters": ["w","h","s","i"],
"item": [
{
"type": "TouchWrapper",
"width": "${w}",
"height": "${h}",
"id": "${s}${i}",
"item": {
"type": "Image",
"source": "${s}",
"width": "${w}",
"height": "${h}",
"scale": "best-fill"
}
}
]
}
},
"mainTemplate": {
"items": {
"type": "Container",
"direction": "row",
"items": [
{
"type": "Pager",
"id": "pagers",
"width": "100vw",
"height": "100vh",
"data": [
"https://images.pexels.com/photos/1309897/pexels-photo-1309897.jpeg",
"https://images.pexels.com/photos/268415/pexels-photo-268415.jpeg"
],
"items": [
{
"type": "Slide",
"w": "100%",
"h": "100%",
"s": "${data}",
"i": "${index}"
}
],
"handlePageMove": [
{
"when": "${event.direction == 'left' || event.direction == 'right'}",
"drawOrder": "higherAbove",
"commands": [
{
"type": "SetValue",
"componentId": "${event.currentChild.uid}",
"property": "opacity",
"value": "${1 - event.amount}"
},
{
"type": "SetValue",
"componentId": "${event.nextChild.uid}",
"property": "opacity",
"value": "${event.amount}"
}
]
}
]
}
]
}
}
}
Increased Response Sizes: As skill builders started using the full breadth of APL features (AVGs, animations, etc.) we heard that several of you were hitting the 24kb response size limit. As a result, we’ve increased the limit to 120kb per response to enable even more complex and engaging customer experiences. Note: The bigger the response, the longer it will take to display to download and display on device.
Improved Tablet Support: APL support for all Fire tablets is coming soon. APL 1.6 enables you to create custom layouts for new screen sizes and adapt their responses as devices flip between portrait and landscape orientations. New viewport profiles include mobileSmall, mobileMedium, and mobileLarge which represent a range of device sizes and make it easier to design responsive layouts. When a device is rotated, the new onConfigChange handler and Reinflate command let you control if your layout is resized (existing components adjusted to fit new screen size) or reinflated (your entire APL document is redrawn based on the new config values).
New Samples Page w/Updated Templates: We’ve updated our sample page to provide new templates that are responsive across screen sizes. It also features an “Explore APL” section with sample that illustrate more capabilities.
Echo Show 8 Is Now a Hub Landscape Medium Device: Customer feedback on the Echo Show 8 indicated that the font size was too small on many Alexa experiences. To address this, we’ve updated how the device reports it’s screen size, which results in the device being classified as a Hub Landscape Medium device instead of a Hub Landscape Large. To account for this change, we recommend you review the Interfaces page in the Alexa Developer Console and ensure you have Hub Landscape Medium checked, as well as all the boxes for any other viewports that you support.
