Media event actions and interaction (sync or time events to audio and video)

You can add actions to your page or to an element to control media such as audio or video.

Use Actions on the Animate tab to add interactivity to media for Page Actions and Timings. You can have media play, pause, toggle, or replay from the beginning at a specific amount of time after the page loads.

Use Actions on the Interaction tab to add interactivity to media for Element Interactions. You can sync other elements to show, hide, toggle, animate, and affect player controls or other media controls at specific times during your media playback. For example, you can display text and pop-up shape panels at specific points during a video playback. You can use any other elements for these synched actions too, such as images, shapes, and media.

You can also Add a start time and/or Add an end time to media playback so the learner jumps directly to a specific part of the media and plays only that section.

To add media Page Action and Timing to a page:

  1. Click Actions in the Page area of the Animate toolbar.
  2. Click Play Media, Pause Media, Toggle Media, or Replay Media.
  3. The Page Actions and Timings properties panel opens.
  4. Drag the media element into the Targets list.
  5. Enter the amount of time after which the media should start to play, pause, toggle, or replay from the beginning. 
  6. Click Apply.

To add an Element Interaction to sync to media:

  1. Select your media element on the stage or in the Layers panel.
  2. Click Actions in the Element Interactions area of the Interaction toolbar.
  3. Click Show Elements (or another Action).
  4. The Element Interactions properties panel opens.
  5. The panel has two list areas, Groups/Elements and Targets. If you have multiple groups, Groups is selected by default. If only need to target a few items from a Group(s), select Elements from the pulldown menu.
  6. Select the Group(s) or elements you want to target and drag them to the Target list. Once the Group has been added, the elements within the Group will be highlighted on the stage area in a red dashed border.
  7. Choose an Effect if you want (such as Fade, Fly, Slide, etc.).
  8. Select the Trigger (When the media time is..., When media starts, When media ends, When media is played, When media is paused).
  9. If you select the trigger, "When the media time is..." you can enter the time after which the action should occur OR simply play the media in the preview area and add markers. Click the marker + icon to add one to the timeline. Select a marker along the timeline and click the marker - icon to remove one. Drag a marker on the timeline to change the marker time.
  10. Select a marker to add the time to the action and click Apply.
  11. You can then click Add to show other elements and synch them to the media as well.
  12. Preview your action to check it from the Element Interactions panel before you click Done.
Note: You must upload media to Claro in order to sync to media using an action. You cannot embed media from an external streaming site and sync to media.

Note: Certain networks have experienced issues with the Slide effect when used with rich media. If you are consistently experiencing issues when using Slide in conjunction with rich media, you may want to select an alternate effect such as Fade.

Interactivity and Animation

  1. How do I add interactions or interactivity to my page? Add links, actions, timed events, animations, hotspots, and image maps.
  2. How do I insert a Hotspot to add interactions?
  3. How do I add an action to an element that when trigger will Show or Hide or Toggle other elements (mouse event interaction)?
  4. Insert or add a pre-built button to a page (and edit it)
  5. How do I add an Action to Animate elements?
  6. How do I add a Swap Content Action to an element?
  7. How do I add a Light Box Action to an element?
  8. How do I insert a Text Input box on a page that learners can enter text into?
  9. How do I add an Action for Player Controls (Course Player navigation buttons: e.g., Forward, Back, Audio, Transcript buttons)?
  10. Media event actions and interaction (sync or time events to audio and video)
  11. What are the Animate Effects I can apply to element interactions or page actions?
  12. Adding a Link to URL using a modal target does not work for some sites (produces empty box)
  13. How do I add a link or hyperlink to a URL website, email or ftp site?
  14. How do I add a drag and drop interaction to my content page?
  15. How do I create an image with interactive hotspots?
  16. How do I allow the user to print a course page?
  17. How do I edit or remove an Action from an element on my page?
  18. How do I edit, delete, or remove Hotspots (Image Map) from an element?
  19. How do I get audio to play when a Hotspot or Action is triggered?
  20. How do I hide all mouse event targets on the stage? Hide Targets feature
  21. How do I make "hidden" hotspots? How do I hide the pointer hand cursor on a button?
  22. How do I make a page link to another page? How do I make branching interactions?
  23. Page, Jump, and Endscreen Transitions for a course (and Default Effect)
  24. Add an Entrance Effect to elements on a page
  25. How to Disable and Enable the Menu Button
  26. How do I add, edit and remove Actions within text elements?
  27. How do I add, edit and remove Links within text elements?
  28. Can learners search a course for specific content?
  29. What data does the course player search against during a course search?
  30. How do I display variables in my course?
  31. How do I make form fields available as variables?
  32. How do I set a custom variable?
  33. What are some of the Variables available?

Feedback and Knowledge Base