Webinar - Richer Activity using Action Hotspots

Follow

Comments

3 comments

  • Avatar
    adi

    Hmmmm

    Is there a way, to create an action hotspot for "if you tap a button, an object (that starts as being invisible) fades in"

    because I can't seem to figure out how to make an object starts in invisible state

    Thanks

    Adi

  • Avatar
    Tony Redhead

    Hi Adi,

    Yes this one had me stumped when I first started using Oomph but hopefully this presentation will show you how to create the effect you're after.

    Basically what I've got in the presentation is a coloured square in the page and a button that when you tap it changes the square's colour and adds some additional text. I've also added a reset button so you can try the effect again.

    There is no way to load an image/object onto the page so that it's initially transparent when you first view that page. So the trick is, to load the image/object off the screen, move it to the position where you want to be displayed and then reveal it. In this first screen grab, taking from the InDesign file, you can see that I have a field hanging off the right-hand side of the page. This field or object will hold the content shown in the second screen grab.

    Main_Page.png Main page showing fields and hyperlinks associated with them.

    The second screen grab is of the page that contains the content that goes in the field or object that's on the right-hand side of the page.

    OrangeBox_Content.png

    OrangeBox contents

    So this is what happens when you press the button “change the colour";

    1. The command; 'Action,OrangeBox,MIR' runs.

    2. This tells Oomph to run the animation in the MIR.anim file on the hotspot 'OrangeBox'. The animation tells the OrangeBox to move to a position where it completely covers the green box and then fade from alpha 0 to 1.

    3.in order to achieve this you need to have the field covering at least one pixel of the page that it's on before you export it.

    1. The reset button calls a similar command the only difference being it calls the RESET.anim animation file. This animation file reverses the order, fades out the OrangeBox and then moves back to its starting position.

    And that's it, you can modify the speed by changing the units in the animation files and position etc.

    I've attached an InDesign file and a zip file which you can test in Oomph viewer.

    I hope this helps,

    Tony

  • Avatar
    adi

    Cool, will give this a thorough read :)

    Thanks Tony

Please sign in to leave a comment.

Powered by Zendesk