I am creating my own website in Hype and love it so far. But I need to learn how to make a simple frame by frame image gallery with about 10-20 images, controlled by two buttons “previous” and “next”. I do know how to make the buttons, and know how to animate objects with the “record” function, but that doesn’t seem to be the way to go about it. I used to do this in Flash with a timeline and keyframes and stop actions on each frame, but I struggle with this simple thing here in Hype. Ideally it would be 10 keyframes for 10 images, and each image only visible in one keyframe. And stop timeline action on each keyframe. But I can't figure out how to make an image (element) only visible in one of the frames..
Something not involving javascript would be very helpful. Thanks!
Edited: The website is structured with one (1) front page, with three (3) sub pages, each with a different topic and image gallery. Each page is designed in a scene and has a Home button that sends you back to the front page (scene). Please see attached screen dumps. Other solutions than the one from Photics much appreciated!
It uses JavaScript, but it's a perfect example of why knowing how to code can save a lot of time. It's not even a lot of code. It's just 17 lines. That's including the extra formatting to make it easier to read.
But if you don't want to add custom JavaScript, here's another example…
That's the “Menu” template. It works because there are only four items. So, each scene gets its own button in a persistent symbol. It would be a bit tedious to make something like that with 20 images. Plus, with so many buttons, the menu would look cluttered.
If you're doing this on a single scene, it depends a bit on how you may want to do the transitions.
If you're not looking for an animated transition, then you could do the entire gallery via a single image element, and on each keyframe/while recording click the 'choose…' button in the Element Inspector to set a different image.
If you do want the transitions to be animated using position (sliding), then you can line up all your images, and create a group that holds all of them. Then you could make another group that contains that, but would be a single image size. Make this top-level group have the Overflow: hidden setting in the Metrics Inspector so it clips outside its bounds. You can then animate the child group moving from left to right, with each step being a keyframe.
As for having stepper buttons, you can have one button that is set to continue a timeline forward, and another button set to continue a timeline in reverse.
Finally, add have a pause timeline timeline actions on each keyframe.
