Teasers

This section describes how to set up a teaser.

A teaser is a menu launcher. It can be a single bubble drifting slowly across the screen, 'wobbling' briefly at regular intervals to attract users' attention, or a single bubble that fades in and out, reappearing at random screen locations. In both cases, users can tap the teaser to open a regular finger menu or teaser menu.

For greater impact, you can specify multiple instances of a teaser drifting across the screen at the same time, and you can use a custom image or video instead of a bubble.

Example teaser floating across the screen. 1 Teaser bubble. If a user taps this bubble, a regular finger menu opens. 2 Teaser drifts slowly across the screen. The general direction and degree of undulation are configurable. 3 At regular intervals, a teaser animation plays to get the users' attention.

align

center

alt

Teaser bubble close-up

Teaser bubble detail.

Set Up a Content Set

As with finger menus, teasers require a content set to supply them with media such as images. For example, the teaser can re-use an existing content set. This will mean that the teaser inherits the same appearance as the central bubble in the finger menu you created previously.

But what if you wanted your teaser to have its own unique appearance? The solution is to create a unique content set for your teaser menu. Follow these steps:

1. Drag some content into the media library from Windows Explorer. For example, drag a folder that contains images.

2. Click Content sets in the left-hand pane.

3. Create a new content set. For example, Content for Teaser.

4. Now add items to the new content set. In the Editing a content set screen:

   1. Drag items from the media library into the new content set.

   2. Close the media library and save the changes.

5. (Optional) Specify a thumbnail image for the teaser bubble.

   1. Still in the Editing a content set screen, click the root folder in your content set (labelled Content for Teaser). The root folder represents the teaser bubble.

   2. Go to the Preview image attribute and select Use a fixed value.

   3. Click the media library button, then drag an image from the media library into the Preview image field.

6. Now create a Menu bubbles widget for the new content set.

   1. In the Widget attributes pane, go to the Finger menu tab.

   2. Go to the Bubble type attribute.

   3. Select Use a fixed value and then click the New button.

   4. Add the Menu Bubbles widget.

   5. Enter a name, for example My Teaser Bubble.

   6. Click Save.

7. Now configure the teaser bubble.

   1. Still in the Editing a content set screen, go to the Bubble type attribute.

   2. Select My Teaser Bubble from the drop-down menu and click the Edit button.

   3. Edit the bubble attributes as required. For example, edit the Bubble size and Bubble edge color attributes to change the teaser bubble size and color.

   4. Click Save.

Editing a content set screen. 1 Root folder of teaser content set. 2 Items in the teaser content set. 3 Save button. 4 Media library button. 5 Preview image attribute. 6 Finger menu tab. 7 Bubble type attribute. 8 New and Edit buttons.

Add a Teaser to Your App's Structure

Now you need to add a teaser to your app's structure. Then you need to configure the teaser to use a content set.

Follow these steps:

1. Click Structures in the left-hand pane.

2. Click your structure. The Editing a Structure screen opens.

3. Go to the Main section and click Add a new widget to Menu.

4. From the pop-up menu, add a Teaser menu.

5. Click the Save button to add the teaser to your structure.

Editing a structure screen, widget attributes pane. 1 'Add a new widget to Main' hyperlink. 2 Teaser menu widget added to Main layer.

align

center

alt

Add a new Main widget popup showing Teaser menu option

3 Add a new Main widget popup. 4 Teaser menu widget and Add button.

Now you need to set up the teaser. Go to the next section.

Set Up the Teaser

In this section, you will edit the essential attributes for the teaser. As part of this procedure, you will create two shared widgets, a Finger menu and a Teaser operator. You will also assign a content set to the teaser.

Note

A teaser operator controls how a teaser floats across the screen, including its speed, direction, and animation properties. If you do not specify a teaser operator, the teaser will use default values (for example, it will slowly float diagonally downwards, left to right).

Follow these steps:

1. In the Editing a Structure screen, click the new Teaser menu widget.

2. In the Teaser menu attributes pane, go to the Menu attribute.

   1. Select Use a fixed value and click the New button.

   2. Add the Finger menu widget.

   3. Enter a name, for example My Teaser menu.

   4. Click Save.

Editing a structure screen, widget attributes pane. 1 Menu attribute. 2 Use a fixed value check box. 3 New button. 4 Edit button. 5 Add a new widget popup. 6 Finger menu widget. 7 Add button.

3. Now assign a content set to your teaser menu.

   1. Still in the Teaser menu attributes pane, stay with the Menu attribute but now click the Edit button.

   2. In the Editing a widget screen, go to the Finger menu attributes pane.

   3. Go to the Content Set attribute and select the content set you created earlier from the drop-down menu.

   4. Click Save and go back to the Editing a Structure screen.

   align

   center

   alt

   Editing a widget screen showing Finger menu attributes with Content Set dropdown

   Editing a widget screen, Finger menu attributes. 1 Drop-down menu for Content Set attribute.

   align

   center

   alt

   Content Set attribute detail

   Content Set attribute detail.

4. Now set the teaser behavior. Two behaviors are supported:

   • Floating content behavior: The teaser floats slowly across the screen, animating briefly at regular intervals.

   • Fading content behavior: The teaser fades in and out rhythmically, appearing at random screen locations.

   Follow these steps:

   1. Go back from the Editing a widget screen to the Editing a Structure screen.

   2. In the Teaser menu attributes pane, go to the Teaser behavior attribute.

   3. Select Use a fixed value and click the New button.

   4. Add Floating content behavior or Fading content behavior.

   5. Enter a name. For example, My Teaser Behavior.

   6. Click Save.

5. (Optional) Finally, you can specify a visualization widget, replacing the traditional teaser bubble with a custom image or video.

   By default, a teaser is a single bubble, but you can instead specify an image, image movie or video. For example, you could use your logo as the teaser. When the user taps the image or video, the teaser menu launches as normal.

   Still in the Teaser menu attributes pane:

   1. Go to the Teaser visualization widget attribute.

   2. Select Use a fixed value. Then click New.

   3. Enter a name, for example My Teaser Image. Then click Save.

   4. Still in the Teaser visualization widget attribute, click Edit. The Editing a widget screen appears.

   5. Now specify which image or video to use. If you added the:

      • Image Viewer widget, edit the Image file attribute.

      • Image Movie widget, edit the Image sequence folder attribute.

      • Video Viewer widget, edit the Video source attribute.

      For images and image movies, you do not generally need to change any other attributes (although you may want to change the size or playback speed).

      For videos, we strongly recommend you enable the Start video automatically, Loop video and Mute video attributes.

   6. Click Save to save changes to the Teaser visualization widget.

Note

In this section, you created a new Finger menu shared widget and either a Fading content behavior or Floating content behavior shared widget. These widgets are now listed in the widget library.

Test the Teaser

You have now updated the structure to use your new teaser. To test the teaser:

1. Go to the App launcher screen.

2. Click the Restart button for your app.

3. The teaser appears automatically and starts floating across the screen. When you tap the teaser, the teaser menu opens (a regular finger menu).

Now you can customize the appearance and behavior of the teaser. Go to the next section.

Next Steps

The previous sections described the minimum steps necessary to add a teaser to your app. But the MT Showcase Editor offers a rich selection of options to customize the teaser appearance and behavior.

Customize the General Teaser Attributes

You rarely need to change the general teaser attributes. However, there is one general attribute that you may want to edit. The How many instances... attribute lets you add multiple instances of the same teaser menu to your app for greater visual impact.

Other general teaser attributes let you customize the size and location of the 'teaser spawning area' and specify whether the teaser menu is open when it first appears on screen (by default, it is closed).

Follow these steps:

1. In the Editing a Structure screen, click the new Teaser menu widget.

2. In the Teaser menu attributes pane, you have already specified the Menu and Teaser behavior attributes. Now explore the other available attributes. For example, set the How many instances... attribute to 4 to create four instances of the same teaser menu.

   Note

   You can also create multiple different teaser menus in your app, where each teaser opens a different menu and, optionally, has a different appearance and behavior.

3. Go back to the Editing a Structure screen.

Teaser menu attributes pane. 'How many instances of this teaser menu?' attribute.

Customize the Teaser Menu Behavior

Now explore the attributes available for the Teaser behavior shared widget.

For example, if you chose the Floating content behavior, you can customize how the teaser floats across the screen. You can change its general direction, speed, and animation properties. You can also control how it undulates as it moves.

Alternatively, if you chose the Fading content behavior, you can customize how often the teaser appears and disappears, whether it fades in and out, and expands or shrinks, as it appears and disappears.

Follow these steps:

1. In the Editing a Structure screen, click the new Teaser menu widget.

2. Still in the Teaser menu attributes pane, go to the Teaser behavior attribute.

3. Click the Edit button for your teaser behavior widget.

4. In the Editing a widget screen, go to the right-hand attributes pane and explore the available attributes. If you chose:

   • The Floating content behavior, edit the Direction of content movement attribute. This sets the ratio of horizontal to vertical movement of the teaser menu as it floats across the screen. For example, enter 4 1 to gently float right and downwards (four units to the right and one unit down). Or use negative numbers to float left and upwards. Similarly, edit the Horizontal and Vertical distance of content waves attributes to control the undulations as the teaser drifts.

   • The Fading content behavior, edit the Time between animations attribute to set how often the teaser appears and disappears. If required, you can also edit Enable fade animation and Enable scale animation to prevent the teaser fading in and out or expanding and shrinking. (These attributes are enabled by default.)

Note

You can apply the Fading content behavior and Floating content behavior shared widgets to animated content. That is, you can set up images or videos to drift across the screen, or fade in and out, in the same way as a teaser menu.