# News: Articles for #Flex Message

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

Flex Message Simulator 的教學指南

我們發布了第一個關於使用Flex Message Simulator (opens new window)的教學指南。

遵循教學指南,您將能獲得關於使用Flex Message Simulator的實際操作經驗與知識。並且,在教學指南的最後,您將會使用Flex Message製作出如下方的出數位名片:

Final Output

我們鼓勵您把握這次機會去學習如何使用Flex Message Simulator並創造出屬於您獨特的 Flex Message。

Flex Message Simulator Update 1 (β) released

We released Flex Message Simulator Update 1 (β). This version contains sample Flex Messages with more sophisticated layouts based on the new features of Flex Message Update 1.

Limitations

We can't guarantee that the appearance of a Flex Message in Flex Message Simulator Update 1 (β) exactly matches the rendering on a target device. A single Flex Message may be rendered differently from device to device. Factors that affect rendering include OS, LINE version, screen resolution, language setting, and fonts.

Flex Message Simulator Update 1 (β)

Flex Message Update 1 examples

Flex Message Update 1 released

We've added new Flex Message properties. As a result, you can use the rich expressive power of HTML and CSS in Flex Messages. For details, see Sending Flex Messages.

Flex Message example

Flex Message is now available on your desktop

Flex Message is now available on your desktop.

The feature is supported on LINE 5.9.0 for macOS and Windows.

In addition, we have added the following new Flex Message properties so that you can create messages in a more flexible way.

  • action property of the box
  • maxLines property of the text

For more information, see the following pages:

Flex Message released

We have released Flex Message, a new message type for the Messaging API. Flex Messages are messages with a customizable layout. You can customize the layout freely by combining multiple elements.

Flex Message samples

Flex Messages are only supported on LINE 6.7.0 and later for iOS and Android.

For more information, see Sending Flex Messages.