# News: [Updated] Flex Message Update 2 released

[Updated] Flex Message Update 2 released

Added on December 10, 2020

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.

Carousel container

Item Before After

Maximum # of bubbles 10 12

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.

flex-start flex-center flex-end space-between space-around space-evenly

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.

Linear gradient at 0 degrees Linear gradient at 45 degrees Linear gradient at 90 degrees

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.

Box component

Item Before After

contents property Empty 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"
}
```

Item	Before	After
`contents` property	Empty arrays can't be specified	Empty arrays can be specified

# Added support for animated images

Added on December 10, 2020

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.

Image component
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

Item	Before	After
How to specify a size (the `size` property)	Keywords	Keywords Pixels Percentages

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.

Automatically shrink fonts to fit

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.

Caveats

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.