Scripting/navigation question

I have a sliding UI experience that is built within a scroll collection and has multiple levels the user can navigate between. Outside that scroll collection is a stationary up arrow button that lets the user slide up to the previous “frame” of the scroll collection. The script on this button just scrolls the y by -1920. Pretty simple and works great. It’s nice because this up arrow button just stays stationary as the content next to it scrolls vertically which is what I want.

Problem is when it gets back to the home screen/frame of the scroll collection, I need this up arrow button to turn off. If this were flash I know you could basically do an if/else statement where it says if x movieclip is in y position, turn z button off. Is something like that possible in here?

I do know how to make this work the messy way in intuiface where that up arrow button is WITHIN the scroll collection, and there’s multiple copies of it for each level of the experience, but that’s not quite as elegant design wise as I want it.

Hi Tim,

Long story short, you have basically answered your own question here, you can create a IF statement as to when
equals X and Y position hide “Button” and then do the opposite for showing the button when not in the home screen.

I hope this helps, it’s probably worth looking at the conditional triggers within the knowledge base.

Kind Regards

Louie

1 Like

So I actually just figured out how to do it before I saw your response. On the first frame of the scroll collection, I can put a trigger that says when this frame is moved into viewport, hide arrow button. Works great.

1 Like

Another unrelated question. See this wheel graphic to the right? What is the best way to make that interactive in intuiface. Doing each arrow as its own png image doesnt seem that efficient. Is there a way to pull the wheel in as 1 graphic, and add hotspots to each arrow to then pull up

each selected arrow on top?

Hi Tim @trenken311,

One thing to remember is that sensitive zones of image buttons are rectangular shapes. When exporting each arrow as a PNG to build your transparent buttons, you may have some overlap.
A way to avoid this is to indeed export your graphic as a single image, then add transparent buttons (or toggle buttons, if needed), on top of your main graphic. Each button will then show/hide the proper feedback using trigger & actions.

2 Likes

Ok so say I do the entire wheel graphic as white arrow panels (except the start panel), and import a purple version of each arrow panel, what would be the best way to handle turning the arrows on and off when the user taps?

I know I can do it the long way and on each white arrow have a bunch of triggers that turn all other purple arrows off, but that seems cumbersome. Is there an easier/cleaner way?

Best way is to use Image Toggle Button, with a transparent image when uncheck and your purple version when checked.

Yes there is! Use a Toggle Set on all your Image Toggle Buttons and voila! no need of triggers :wink:

2 Likes

Thats awesome, thanks. Ill give it a try.

Is there a way to clean up these triggers? I have a lot because of this interactive section, so when this frame of the scroll collection moves out of view, I have to reset everything on that wheel you saw above.

Sorry lots of questions guys. Is it possible to thicken the outline of a button? Looks like it’s just a 1px outline.

More questions lol. I’m working on a big important project.

In this one I have this target looking graphic. I want each colored ring of it clickable. Is that possible? Maybe have 3 circular buttons if thats possible and stack them?

About “cleaning the triggers”, I’m not sure what you’re looking for, but here are 2 things that may help you to reduce the number of actions in this panel

  • if you need to “hide all elements but one” in a “group”, you can call the Show action on that last element and check the “hide everything else” option. It will hide all elements belonging to the same parent, ex: a Group collection. You can use a fake transparent element or a light object like a text outside of your group as this item to show.
  • A similar mechanism is available with toggle buttons. To uncheck a large number of toggle buttons, add a fake one, invisible, and make sure they all belong to the same toggle set. You can call the “check” action on this fake button, it will uncheck all the other ones belonging to the same set.

1 Like

Regarding the button outline, unfortunately this is not possible at the moment. I’d recommend you to post a suggestion in our #wishlist category.

In the meantime, you can use Image buttons instead.

1 Like

This circular buttons can be tricky and I can see (at least) 3 solutions:

  1. Use Circle shapes and “is tapped” trigger, put the largest one at the bottom and stack them.
  2. Use multiple buttons per circle, as explained in this article Irregular shaped clickable object by @tosolini
  3. Use SVG through an HTML Frame as explained in the same article, but further down in the posts: Irregular shaped clickable object (link should go to the US map buttons). This one is a bit more technical to retrieve the clicks as triggers in the experience, but gives you the most flexible design.
1 Like

Great thanks Seb. Ok another question. I have a scroll collection with 6 images in it, all laid out horizontally. Only 1 image is seen at a time.

I have a trigger on the scroll collection itself that says on tap, scroll the collection x pixels, which works fine. Each image comes into view the way I want and the others are outside of view. Problem is when it gets to the 6th image, the next time the user taps, I need to have it scroll all the way back to the 1st image. I cant figure out how to do that.

Ok I see that swap collection is what I was looking for.

On to the next question. How do I get this circular collection so the user can use their finger to rotate it? I have some placeholder images in there for now thst they can tap on to learn more, but it wont rotate.

CIRCULAR

I see on this page a lot of options under container behavior, but I dont see most of this in the container behaviors for any of my objects. All I have is resize, no resize, and scale. Im still trying to figure how to make an image freely rotatable by the user. Cant seem to do it with a circular collection.

If you put your images and blue ellipse in a group, you can set it to Free instead of static and only enable the rotation.

2 Likes

Awesome thank you so much.

1 Like