Flex message's play animated images feature, which has been temporarily unavailable since October 22, 2020, is now available again. We sincerely apologize for any inconvenience this may have caused.
Flex Message Update 2 has been released for the Messaging API.
Flex Message Update 2 includes these improvements:
- Changed the maximum number of bubbles that can be included in a carousel
- Added more component alignment options
- Allowed gradients to be used as a box's background image
- Allowed an empty array to be specified as the value of a box's
contents
property - Added support for animated images
- Changed how sizes are specified
- Allowed text to automatically shrink to fit a component's width
- Spacer has been discontinued
- Added support for Update 2 in the Flex Message Simulator
# Changed the maximum number of bubbles that can be included in a carousel
We changed the maximum number of bubbles that can be included as child elements of a carousel container. This table provides a side-by-side comparison of values before and after the change.
-
Item Before After Maximum # of bubbles 10 12
# Added more component alignment options
We added the justifyContent
and alignItems
properties to Flex Message box components.
These properties let you specify how child elements and free space should be arranged; for example, you can choose to evenly distribute the child elements or keep them all centered.
For more information, see Arranging a box's child elements and free space in the Messaging API documentation.
# Allowed gradients to be used as a box's background image
You can use a linear gradient as the background image for a box component by setting its background.type
property equal to linearGradient
.
For more information, see Linear gradient backgrounds in the Messaging API documentation.
# Allowed an empty array to be specified as the value of a box's contents
property
You can now specify an empty array as the value of a box component's contents
property.
-
Item Before After contents
propertyEmpty arrays can't be specified Empty arrays can be specified When would it be helpful to specify an empty array?When using box components for decoration like the four squares shown below, it used to be necessary to add filler components as child elements to each of the boxes. Starting with Flex Message Update 2, you only need to specify an empty array.
Let's compare the JSON data for the yellow box component on the left before and after this change:
- Before
{ "type": "box", "layout": "vertical", "contents": [ { "type": "filler" } ], "width": "30px", "height": "30px", "backgroundColor": "#FFFF7F" }
- After
{ "type": "box", "layout": "vertical", "contents": [], "width": "30px", "height": "30px", "backgroundColor": "#FFFF7F" }
# Added support for animated images
Flex message's play animated images feature, which has been temporarily unavailable since October 22, 2020, is now available again. We sincerely apologize for any inconvenience this may have caused.
It is now possible to specify animated images (APNG) in the image component of Flex Message.
For more information, see the Image component in the Messaging API Reference.
# Changed how sizes are specified
We changed how you specify a component's size. This table provides a side-by-side comparison of values before and after the change.
-
Item Before After How to specify a size (the size
property)- Keywords
- Keywords
- Pixels
- Percentages
Icon, text, and span components
Item Before After How to specify a size (the size
property)- Keywords
- Keywords
- Pixels
# Allowed text to automatically shrink to fit a component's width
We added the adjustMode
property to text and button components.
If you specify a value of shrink-to-fit
for this adjustMode
property, the text's font size will automatically shrink to fit the width of the component.
For more information, see the Text and Button components in the Messaging API reference.
# Spacer has been discontinued
The spacer component, which was previously deprecated, has been discontinued. We recommend setting the padding of the box without using a spacer from now on.
For more information, see Box padding in the Messaging API documentation.
# Added support for Update 2 in the Flex Message Simulator
Flex Message Simulator now supports the new properties and objects introduced in Flex Message Update 2, as well.
Using Flex Message Simulator, you can easily generate JSON data for Flex Messages and visually examine how they're laid out.
Flex Message Simulator doesn't make any guarantees about the layout of a Flex Message. A Flex Message's appearance may vary from one device to the next. In addition to the version of the LINE app being used, a device's operating system, resolution, language settings, and fonts may affect how messages are rendered.