Forum Discussion

JasonAllen-9921's avatar
JasonAllen-9921
Community Member
4 years ago

Making an image unclickable until audio ends

Hi all, I have a slide with two images on them that the learner needs to click to take them to new layers with new content.

The snag:  There is an audio track on the base layer and I don't want those images to be clickable until that audio track ends.

Son of Snag: I also don't want to hide the images and just have them appear when the audio track ends - I want them visible the whole time or the slide kind of looks like trash.

Any idea what I can do?  I have searched these forums high and low and my google fu has failed me.

  • Hi Jason,

    Good timing; someone else just had a similar issue. I would create a new blank layer, and set the layer properties so that the base layer is not clickable. Then add a trigger that shows the layer when the base layer's timeline starts (or when the audio starts, which I am assuming might be the same). Add another trigger to hide the blank layer when the audio completes.

     

  • JoeFrancis's avatar
    JoeFrancis
    Community Member

    I've inserted an invisible (Transparency = 100%) rectangle over the top of the image(s) I don't want the user clicking on, and then terminating its timeline just before the audio timeline ends.

    This also works for videos I don't want the learner to click on, as the video would normally pause when its clicked on.

    • MeeraLynn-69f97's avatar
      MeeraLynn-69f97
      Community Member

      Thanks JoeFrancis - that's worked a treat! More simple than adding a new layer.😀

  • MeeraLynn-69f97 : A shape covering an interactive item does prevent the user from clicking it with a mouse. However, it doesn't prevent the user from selecting it with their keyboard. 

    There is still a simple, no-layer-needed method:

    1. Give the object a Disabled state. 

    • The Disabled state can look exactly like the Normal state. However, I think it's better if there's a visual difference between Normal and Disabled. For example, it'd be frustrating for users to see a button that looks clickable but isn't. 

    2. Set the object's Initial State to Disabled.

    3. Add a trigger that changes the state to Normal when the timeline (or the media) ends.