Hi to everyone,
firstly I’m a beginner at hype and I am enjoying it , I think it’s a wonderful piece of software.
For an university project I began building a large interactive fictional map. The route I took was to cut it up into slices ( around 40 or so of them ) and put each one as a scene, I figured at least this way I could control the contents of each section ( slice scenes ). Navigation between the scenes are through 4 directional arrows.
However now I’m being asked if I could get away from all the clicking from scene to scene. I’m wondering if there’s a way I could use one large image and be able to scroll in up, down, left, right, directions. ( I’m thinking javascript would likely be used for this )
I’ve been trying to follow a few other forum questions and examples I’ve found on this, and modifying them but am struggling to increase the size of their images to scroll further. I’m wondering if there’s a way to preset the boundaries of an image like this, or something like that, that I’m missing.
My map size is 6600 x 4400 and I’m using 1000 x 540 medium for web as my document screen size.
Any guidance and help would be greatly appreciated
If you still want pagination, but the navigation to be a swipe action, then you can use Hype v4’s new “Page Turn” transition. The setup in the Scene Inspector would look like this for the swipe handlers:
Otherwise you could try putting the image within a group. Then you can set that group’s content overflow setting (in the metrics inspector) to Scrollbars or Auto Scrollbars. However with this approach, you’ll probably need to have a little bit of code to manage setting the scroll value to the initial starting point and maybe more code to determine location depending on your goals.
There may be some other easy approaches too, like using dragging.
Many thanks for responding! Didn’t know of the page turn transition, had seen the scroll bars, but wasn’t sure how to properly use that. I actually found another forum topic on dragging, been trying it.
Indeed dragging might work better for what I need, just trying to figure out how to write the java script properly on how to drag in both the x and y axis in the same code.
Firstly, many many thanks for all the feedback and options! I really appreciate it.
For now I’ve decided to try and go with the page turn solutions approach, yet now I’m wondering how/if I can keep certain elements fixed on the screen so they don’t move or disappear during the transitions between scenes.
I’m thinking persistent symbols might have a setting for something like this but I can’t seem to get them to work yet. I have attached a rough example of what I’m trying to do.
I would like to keep the counter text ( top left corner ) a back button ( top right ) and the mini map that I’m struggling with ( bottom right ) fixed in the same position on the screen during the page turn transitions
The idea with the mini map is every time you went to a new scene an appropriate box would show up on the full map image the size of the mini map.
I’m thinking this could all be done inside a symbol ( but I could be wrong ), though that would mean the symbol knowing which map scene it was currently on and then showing the appropriate rectangle.
For demonstration purposes I have just added the mini map rectangles to the individual scenes instead of inside the mini map symbol. map_testing.zip (47.0 KB)
Your approach of persistent symbols is correct, but this looks like there is a bug where the persistent symbol will not stay put when there are two axis for page turning.
I’ve filed this to fix, but I can’t make any guarantees on when it will be addressed (I did take a glance at the code and it doesn’t appear that it is going to be straight-forward). I’m not sure what a good workaround would be, but depending on your needs/skills you could possibly just use HTML itself to layer two documents on top of each other and control the other document the Hype API.
My map size is 6600 x 4400 and I’m using 1000 x 540 medium for web as my document screen size.
