Best way to build Sliders

1

Hey everyone,
Is there a correct way to add in sliders, at least thats what i'm calling them, like in the attached image?

I know i obviously need buttons but I'm not sure the best way to connect them to changing images. Any help would be fantastic.
Screenshot 2023-08-08 at 1.04.04 PM

2

Here's a simple guide to building a basic slider using scenes and persistent symbols in Tumult Hype 4:

1. Create a New Document:

  • Launch Tumult Hype 4.
  • Go to File > New to create a new document. Set the dimensions to the size you want your slider to be.

2. Setting Up Scenes:

Each slide in the slider can be a different scene in Hype.

  • Click on the 'Scenes' pane in the top-left corner.
  • Rename the default scene to "Slide 1".
  • Click the '+' button to create additional scenes for each slide (e.g., Slide 2, Slide 3).

3. Designing Slides:

Within each scene, design your slide:

  • Add text, images, or other elements as desired.
  • Position and style them to fit the layout of your slider.

4. Persistent Symbols for Navigation:

Persistent symbols remain consistent across different scenes, making them perfect for navigation buttons.

  • Click on the 'Symbols' pane.
  • Choose 'New Persistent Symbol'.
  • Design this symbol to be your navigation arrows (previous and next).
  • Place the persistent symbol on your stage where you want the navigation to appear.

5. Adding Actions:

For the navigation to work, we need to add actions to the buttons.

  • Click on the 'previous' button inside the persistent symbol.
  • In the 'Actions' pane, add a new action: On Mouse Click > Jump to Scene > Previous Scene.
  • Do the same for the 'next' button, but select Next Scene.

6. Looping the Slider:

If you want the slider to loop, you can set the action on the last slide's 'next' button to go to the first scene and the action on the first slide's 'previous' button to go to the last scene.

7. Animation & Transitions (Optional):

Add transitions between the slides for a smoother experience:

  • Go to the 'Scene Inspector'.
  • Under the 'Transitions' section, select a transition type and duration.

8. Preview & Export:

  • Click the 'Preview' button to see your slider in action.
  • If satisfied, go to File > Export to export your slider for the web.

This is a basic guide, and there's a lot more that Tumult Hype 4 can offer. Dive deeper into its features to create even more advanced and interactive sliders like using Hype Data Magic …

4 Likes
3

Did you prompt AI to write these instructions? Just curious.

They seem kind of vague. For instance:

  1. Adding Actions:
    • "Click on the previous button inside the persistent symbol" This instruction assigns the action to the symbol inside the symbols container but does nothing when it's clicked on. The correct instruction would be to click on the symbol container only and not the symbol inside to assign the action. Would it not?

  2. Animations & Transitions (Optional)
    • "Go to the scene inspector"
    • "Under the 'Transitions' section... Where is the "Transitions section" in the Scene Inspector?
    Slider_test_1A.zip (72.5 KB)

4

I like to use a persistent symbol for the navigation, then separate scenes for each slide. Here are two examples…

https://photics.com/free-template-tuesday-22-tumult-hype-menu/

https://photics.com/free-template-tuesday-31-tumult-hype-navigating/

The “Navigating” template is probably closer to what you're trying to do. It's a little bit of JavaScript, to make it dynamic, but it's not too bad.

1 Like
5

I used “expand” on my instructions and I think they are pretty clear. You can have scene changing actions on buttons in a persistent symbol and the transition is the drop-down to select instant or directional transitions in the next or prev scene actions on the buttons .

I am on the road that is why I can’t add a demo file.

1 Like