scrollable page menu

The thumbnail menu is not available in InteractBuilder 3 yet, but there are some features of IB3 that make it easier to make your own custom page menu.

You can use the ShowGroup and HideGroup behaviors to toggle the page menu using a button (two graphic elements) on each page. So if you assign a group number to each thumbnail and to the element behind the thumbnails, this will make it easy to toggle the menu.

For the area behind the thumbnails, you can use a rectangle shape element or an image that you design.

To the element behind the thumbnails and to each thumbnail, add a Drag-Move (Self) action set, adding the constraints that go with each one. Then add the Drag-Move action sets to move all the rest of the elements in the group.

On each thumbnail, add a TapEnd-Jump action set that goes to the page it represents.

If you create one page with only the page menu and add all action sets, then you can save this page as a template and then apply the template to the other pages.

We'll be adding this to the user guide soon, so I'll post a link once it's complete. Let me know if you have any questions : )

Thanks! Sounds tricky, but I think I can figure it out :) I look forward to the user guide version with pictures.

Perhaps you could use this sample app, to see how it works. Sounds like much of the same functionality: http://feedback.interactbuilder.com/topic/360719-scrollable-background/#comment_367107

Thanks!

I would love to add this to my app, but it's getting pretty size heavy. I'm imagining that adding this to every page is going to add some extra weight. Am I right about that?

Thanks!

Hey Inna,

I was building the menu yesterday using your excellent example, but today it won't let me access your link. It asked for my username and password, which I entered, and it didn't recognize it. Any tips?

I'm still going to build the scrollable menu, I just won't be inserting it on every page because of my file size. Unless, the menu uses the sames files to minimize the weight?

Thanks!!

Can't you make the menu a global element?

Ooooh. Good idea! Are you able to open the line Anita?

This link?
If so, yes I can :)

Hi Melissa, is the link still not working for you?

Anita, great idea about making the elements global! I'll make sure to add this to the user guide : )

In other cases where the same image, audio, or video is used on multiple pages, you can open the element's properties and assign a file from the app (on the second line of the properties window) so that the same file is referenced each time. That way, the extra files will not be used in the app. Files that are not included in the app itself will not be part of the download when the app is purchased. Also if you want, you can delete the extra files from the app folder to save space on your computer.

Inna,

Yes, the link is working now. Thanks!

What is the difference between Tap, and TapEnd?

When an action set uses Tap as the interaction, the behavior is invoked as soon as the finger touches the element. So if someone touches one of the thumbnails to begin moving the menu to the side, it will jump right away to the other page.

TapEnd makes the behavior begin as soon as the finger leaves the element without having moved it first. (As opposed to DragEnd, which is when the finger lets go of an element after moving the finger on the screen.)

I was trying to get the swipe movement in there too, but it's not working so well. Actually not working at all. Is that a bug or not workable with this scenario?

There is a bug on the Swipe interaction that will be solved in the next update of the builder.

Ahhh, tap end...Useful. Thanks!~

When will the next version come out? There's some other fixes too, that I'm waiting for :)

So it turned out pretty good, but still not as smooth as I'd like it. I tried the swipe> move option and it still doesn't seem to work even with the update. Am I using the wrong interaction or is it still getting fixed?

Thank!

Try Drag-Move instead of Swipe-Move

I have drag<move currently. The action is not very smooth. I tried it out with a user and because he is accustomed to the smoothness of scrolling with menus like netflix, he tried to swipe and when it didn't swipe he thought it was not working and closed it.

If you want to use the Swipe interaction you need to have the elements animate to the wanted location. So if you want you can use Swipe-Animate. 
Swipe-Move will not work in this case as you want because it will only move the element directly to the wanted location, and it will not move along with the Swipe interaction.

Ah...okay. So will I use the same constraints as drag<move? Should I keep the drag move also, for greater control?

The best solution will be to keep Drag-Move

So...I got the menu all snazzy in BuilderPlayer, but it is not holding the constraints on the ipad, the page thumbnails slide all over the page.

Did you test it in the latest InteractPlayer version? 

Yes. I can send you the page if you'd like, I just need an email address.

Send it over to alin@interactstudios.com