Adding Control Images for Video and Audio

Mag+ supports a feature called Control Images that allow you show different images when a media file is playing. For example, a graphic can change from play to pause during playback of media.

There are two types of control elements:

  • Single: A single image that disappears when the linked media is playing and reappears when the linked media is paused or finished playing.
  • On/Off: Two images that change according to the state of the linked media. The first image is used to start playing the media. Once the media begins, the second image is shown. If the media is stopped, the first image is shown again.

How to Create Control Images

1. Create the images you want to use and save them with the file name specified below.

Note: Control images must use the following naming convention: <filename>.<id>.<ext>

If using a "Single" control image, you can name it something like "start_image.1.png."
If using "On/Off" control images, you must name them with the same <filename> but with a "1" or "2" as the <id>. For example: "play_image.1.png" and "play_image.2.png."

2. Place the image (or images) in the same folder as your InDesign layout.

Place the image (or images) in the same folder as your InDesign layout.

3. Add your linked media to the InDesign layout.

Add your linked media to the InDesign layout.

For more information on adding Audio or Video to a layout, read the article "Adding Video and Audio to Your Layout."

4. Place the first (or only) Control Image on your InDesign layout.

Place the first (or only) Control Image on your InDesign layout.

5. With the image frame selected, go to the Mag+ Object panel and set the Object Type to "Control Image."

With the image frame selected, go to the Mag+ Object panel and set the Object Type to &quot;Control Image.&quot;

6. Set the Ref. Object ID of the Control Image to the Ref. Object ID of the Media frame generated in Step 3.

Set the Ref. Object ID of the Control Image to the Ref. Object ID of the Media frame generated in Step 3.

7. Set the Control Type to "Single" or "On/Off."

Set the Control Type to &quot;Single&quot; or &quot;On/Off.&quot;

8. On the C-Clickable Areas layer, draw a frame that covers the Control Image.

On the C-Clickable Areas layer, draw a frame that covers the Control Image.

Tapping the area defined by the frame on the Clickable Areas layer will cause it to activate.

Note: Any frame you manually draw on the C-Clickable Areas layer must have a background color set to "None" or it will obscure your placed image.

9. With the frame on the C-Clickable Areas layer selected, set the following options in the Mag+ Object panel:

With the frame on the C-Clickable Areas layer selected, set the following options in the Mag+ Object panel:
  • Object Type: Hotspot
  • Hotspot Type: Media
  • Ref. Object ID: The Ref. Object ID from the media frame generated in Step 3.
  • Trigger: Determines when the media will be triggered. Default is "On Tap" meaning that the user must tap the Hotspot area to start, but other options include:
    • On Tap: The Hotspot will be triggered when a user taps on the Clickable Area box.
    • In View: The Hotspot will be triggered when the Clickable Area box comes into view on your layout.
    • Out of View: The Hotspot will be triggered when the Clickable Area box exits view on your layout.
    • Shake (iOS only): The Hotspot will be triggered when the Clickable Area box is in view on your layout and the user shakes the device.
    • None: There is no user-accessible trigger. The Hotspot will only be triggered by another Link.
  • URL: The text "media://" followed by the Media ID from the media frame generated in Step 3.

10. Review your document on a Review device.

The Control Image will now control the playback of the placed media. It will disappear or change according to options set in Step 7.

Note: In order to review your document, you must set up a Reviewer device and configure the Mag+ Settings panel in InDesign. For more information, read the articles in the section "Reviewing Your Current Design."
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk