Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes
Hi, I'm trying to make a flowchart in a scrolling frame, where certain content would appear when a button is pressed. I was also hoping the same button could be used to trigger a jump in location on the same page.

Ive tried setting up a button with two actions - one to animate a fade in of content and the second to "go to destination' using the bookmark text anchors trick I read about in another support message. The problem is when I export it seems that only one effect will work at a time.

The go to destination action will work but the fade in of content won't or vice versa. Multiple animations will work but if I try to apply anything like go to next page, previous page destination etc in combination with an animation action it just doesn't work.

Are the two actions not compatible with each other or is this just some kind of bug?
in how_to by (120 points)
  

1 Answer

0 votes

Make sure that the animation is applied to the contents of an object and not the object state itself.

If you're still having trouble, I'd be happy to take a look at your files if you can send us the following for us to troubleshoot:

  • Your InDesign file or a sample file that recreates the issue
  • Your html5_output folder
You can send them to us here:
by (29.9k points)
Thanks Myra, unfortunately it still doesn't seem to be working, Essentially at its most basic level I have 3 boxes on a page - top, middle and bottom and then a text anchor bookmark underneath the last box.

I want the top box to be a button that when clicked animates the middle box to fade in and also jumps to the position of the anchor beneath the bottom box

My current workflow is:-

> Create the boxes

> Create a text anchor bookmark

> Apply an animation (fade in) to the 'middle box' & deselect event: page load

> Make the top box a button & add action animation & choose 'middle box' then add action go to destination and choose the text anchor

The result is when I export and check in browser - you click the top box and it jumps to the bottom box, but the middle box doesn't fade on or even appear at all.

Do you have any further idea why this is happening?

Kind Regards

Alex

It's hard to know without seeing how your content is set up.

You could make sure that you're using the most recent version of in5 which is 3.8.9.

I'm happy to take a look at your files if you can send your InDesign file or a sample file that recreates the issue and your html5_output folder to us here:

Unfortunately I can't send anything at the minute. Maybe you can interpret something from the html output:-

 <div class="page-scale-wrap mq-none mq-default" role="region" data-layout-name="undefined" style="width:1080px;height:1920px;">

      <button data-id="274" name="Button 2" onclick="go(event,[{n:1,id:236,act:'play'}]); nav.to(1,[567,1454,573,1468],'#item238');" aria-label="Button 2" id="item274" class="pageItem ">

        <div class="pageItem state btn-off">

          <div id="item227" alt="Rectangle" class="pageItem ">&nbsp;</div>

        </div>

      </button>

      <div id="item236" data-ani="flyinfromleft-236 1s cubic-bezier(.2,.6,.35,1) 1" data-id="236" data-hidestart="1" class="pageItem hidden" alt="Rectangle">&nbsp;</div>

      <div id="item237" alt="Rectangle" class="pageItem ">&nbsp;</div>

      <img src="assets/images/blank.gif" alt="sdf" class="pageItem hd" style="left:567px !important;top:1452px !important;" id="item238" data-src="assets/images/item_238.png"/>

    </div>

The bit in bold is not animating. I would like it to animate when "button 2" is tapped (alongside the go event) . 

Strangely if I apply the event on "page load" then it works as it should - the only problem is that I don't want it to animate already on page load before animating on tapping.

I would really need to see how your file is set up and see the full output.

I'm happy to take a look at a sample file that recreates the issue (so that it doesn't include any proprietary information) and the html5_output from that sample file. You can send it here:

https://ajarproductions.com/pages/contact.php?category=in5
Is there an email address I can send it to? I'm not currently using dropbox or google drive

Please contact us through our contact link. It will generate an email to our support team. We can give you additional information on ways to send us files from there.

Hi Myra, unfortunately the contact form doesn't seem to be working either frown

I'm still having the same problem. Ive tried to test it at the most basic level - just having a plain box with two actions - the first animating another box to fade in and the second to go the next page. Ive tried having both actions on the same trigger event (eg. on tap/release), Ive tried having the actions on different triggers, but it just won't work. 

Does this sound like a bug or is it just not possible in IN5 to trigger both animation and go to events from the same button? 

Applying two actions to a button works with in5.

I also haven't heard of any issues with the contact form, so I'm wondering if maybe there's an issue with your setup. 

Maybe try sending us a message via the contact form without any files. It will send us an email, and I can give you additional instructions from there.

In the meantime, you could try checking the following: