# News: [Updated] Flex Message Update 2 released

[Updated] Flex Message Update 2 released

Added October 22, 2020

Flex message's play animated images feature has been temporarily disabled due to a technical issue. As of current, regardless of the value of the animated property in the image component, animated images cannot be played.

We sincerely apologize for any inconvenience this may have caused. We will notify you through this news article once the issue is fixed and the feature has been enabled again.

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

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.

# 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.

    offset property example 1

    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

Added October 22, 2020

Flex Message's play animated images feature has been temporarily disabled due to a technical issue. As of current, regardless of the value of the animated property in the image component, animated images cannot be played.

We sincerely apologize for any inconvenience this may have caused. We will notify you through this news article once the issue is fixed and the feature has been enabled again.

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.

# 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.