Image slide swapper: Interactive color picker for cycling jersey


#1

Hello,

I’m new around here but have had Hype on the mac since it came out - I just had the opportunity to use it properly.

But now I do!

Currently we use a custom jQuery system to power our ‘product builder’ such as the one you can find on this page. It’s pretty simple in concept in that you click a button and you can change colours and the like (jQuery swaps out images stacked via css etc). We need to rebuild these and I realised Hype could be just the thing, as I want to loose the rather complex jQuery based system currently used due to the complexity of maintaining it.

So the question… Playing around I can see how it could possibly work but I can not find how the best way to put this together might be. In the old flash days etc. I would have a button on the main timeline trigger something like a goto and stop event that would ‘hop’ between images on another time line creating the swap. For the life of me I can not see how to do this in Hype.

Any pointers would be greatly appreciated so I can sit down and really nut this one out.

Cheers!

Gerard


#2

Looks like I found the answer… Hype V3 will do it!


#3

Would love to see the approach you end up taking. Can you share when you’re all done? Looks like a complex animation…


#4

Hey Daniel, no problems will be happy to. I’ve build up a dummy already and it’s doing exactly what I want - and possibly more! Surprisingly not hard to do, just requires one to set up timelines and groups and then keep track of them. When I’ve finished the first one I’ll post a link together with how I did it.


(Lydia Lee) #5

Hi!
I’m also new around here, I have the same question as you had.
Can you give me some advice about the image slide swapper?


#6

Hi Lydia.

It’s actually pretty easy but you have to plan it out.

Let’s say you have three images and a back and forth button.

On your timeline place your three images. Space the images out, say at 5 second intervals and have each only visible for three seconds. Make sure that the middle of each sits on the ‘5’ second interval (so at ‘5’ seconds the image is visible for 4,5,6) and no images overlap, so that when you scrub the timer each image appears and then vanishes as the timer passes.

After you have done this, place three instances of each button and match the visibility of each set to that of the images, so that when an image appears, so does the set of back and forth buttons.

To make it all work, assign a ‘go to’ function for each button that commands the animation to jump to the next image. So for example, on image two (which is at 10 seconds), the forward button tells the animation to go to 15 seconds and the back button to jump back to 5 seconds.

This is a really basic way to get started. The system I have built up uses multiple timelines and lots of different images and select buttons. It took a while to set it up and make sure everything corresponds but once done, it works a template to create consecutive sliders for (i our case) different products.

I have to get back to this in the next week and we need to start rolling these out on our website, so when I do, I’ll come back and tell more about how they were built up.

If in the meantime you have any questions, just let ask away and I hope I can help out.


#7

Wow, it took forever to roll this out!

We finally got it there though and now use Hype generated interactive HTML to replace what used to be a rather clumsy jQuery + CSS solution.

You can see one example of how we’ve used it here, scroll down to ‘Step 2’. We’re so chuffed with Hype that we’ll be using it for more new interactive features over time.

Cheers!


(Jonathan Deutsch) #8

Very cool effect! (fyi - It did take me a second to realize that I needed to click the C1…5 flags to change my selection)


#9

Thanks Jonathan. Yea, agreed. Now that they’ve been rolled out, we are tweaking them here and there and that’s one thing first on the list.


(Mark Hunte) #10

Really like this.

But I would ditch the flag selection in step 2 and use the step 3 selections to animate the colours as well as pick them.

At the moment it feels like I have to do the selection twice where I could do it once.


#11

Hey Mark. That’s the ideal but there are four separate systems at play here. The first is the Hype doc. Then we have the Woo extension that allows for the colour chits in the menu selection, then we have Woo-Commerce itself which is wrapped in Wordpress!!

We’ve always liked to have it the way you described but the logistics of making sure all the ‘bits’ play nice together all the time and after every update, is really more effort than it’s worth. People seem cool with the extra step and it does allow for customers to recheck things as they go - incorrect selections can be a big let down when the kit finally arrives, so the redundancy has become a form of inbuilt fail safe.


#12

We recently updated this system with a secondary layer - splitting colour groups into different scenes and adding a bit of basic soft animation. You can see an example here


#13

Awesome – thanks for the update! Posting an image so others can see how complex and incredible this color picker is:


#14

Hmmmm, the font is not loading! Better look into that :blush: