Color Transition in Interactive Color Picker (Relative Timelines)

1

Hi guys,

I’m new to Hype and I’m lost trying to figure out how to do an interactive color picker.

Basically what’s I’m doing is like how you shop and you can pick which color you’d like to buy.

Like this http://www.zalora.sg/Perforated-Slingback-Ballerinas-381683.html

Screen Shot 2015-12-23 at 5.09.36 PM.png739×553 146 KB

The problem is how to make them transition smoothly without a glitch no matter the order people click them.

I’ve attached my current work here. https://www.dropbox.com/sh/mj74wxnaipavrk7/AADcMeah5lZ9IjHbofieX5Jaa?dl=0

My work is more like a transition of transparency from 0-100% but everytime I want to go back to the original color (main timeline) it refuses to.

Also, the other thing I’m curious is how do I change anything in the main timeline without it being reflected to new timelines I created in the same scene.

Thank you so much for helping!

Vic

2

@victoriajung - I modified your file; you can download my version here:

https://www.dropbox.com/s/iyh5in4ibqrsr1d/Aeroseat%20Color.hype.zip?dl=0

I modified it to create a simple solution that does a smooth transition between the three colors. Instead of having the buttons play different timelines, they jump to a scene for the selected color using the 'crossfade' transition. To do this I had to create two new scenes in addition to your RED scene: a GREY and a GREEN scene. I think this achieves what you wanted.

Also, you wrote:

Also, the other thing I'm curious is how do I change anything in the main timeline without it being reflected to new timelines I created in the same scene.

When you change an element on the Main Timeline, it changes it on other timelines in that scene unless you explicitly set attribute keyframes at the start of the other timeline(s). So if you wanted an element to be at position 0,0 on the Main Timeline but when you played another timeline it immediately started at 100,100 then you would set a keyframe for the Origin (Left) and Origin (Top) positions at frame 0 of the other timeline and then advance from there.

Hope this helps.... John

1 Like
3

Hi John,

Yeah, that actually works! Thank you!

I figured out that the keyframes part — thank you again!

But what if I want to step it up a bit further and do this:

Screen Shot 2015-12-24 at 12.06.51 PM.png943×524 26.7 KB

I want to be able to click the blue square (it’s a button) on the BIG CIRCLE COLOR panel and the big circle color change to blue WHILE AT THE SAME TIME if I pick the maroon color (SMALL CIRCLE COLOR PANEL) the small circle change to maroon. The problem is the end product will have more than 6 color each and there are tons of color combination which the order is up to the user.

Is that possible with jump to scene to?

4

One thing you might want to look at is relative timelines. They allow you to define the first keyframe of a timeline as “whatever the current value is” and thus you would only need one timeline per color instead of the combination of each color transitioning to the other.

This wouldn’t quite work with images though. With images you could use relative timelines and have one image fade in and make all the other ones fade out (this works because if it is already faded out it doesn’t do anything). However visually you’d need to do a little more - if it was just two images the 50% point wouldn’t look so great since there’d still be some transparency. You can semi counteract this by having an opaque color-neutral version in the background.

5

Here’s an example I put together showing the relative timeline technique:

ColorFades.hype.zip (29.8 KB)

There are 3 colors for the big circle and 3 for the small one; this only requires 6 timelines. (well, 7 if you count the main timeline).

6

Hi Jonathan!

Thank you for the help,

currently I’m trying out your method on images! Still trying to understand the concept.

Will update here if it works. Again, thank you for the help!!!

7

Hi Jonathan,

I have problem on turning the color to the chosen color once it’s clicked.

I tried playing with changing the hue directly at tumult instead of putting different colors in different files. It works but it seem like it can only functions once and that’s all.

Do you mind help me to find the problem in this?

Thank you so much!

8

Hi,

You had some issues where you had layers overlapping the buttons. i.e the shadow image.
Not all your buttons were connected.

I connected the blue,red,purple and grey seat buttons to the correct timelines.

On the timelines it would be a nightmare to use only opacity to change the colours. ( someone may show how to do it without having to set opacity on every image in every timeline. I did try it with the relative but seemed a pain to get right)

So I went for the much simpler method of:

Starting with just the red image on the main timeline ( All other images deleted out of the project)
Then on each of the sub timelines I set the background image property to the relevant image using the element inspector’s choose background image and at a particular keyframe.

Thats it.

testSeats.hype.zip (2.4 MB)

Your other idea of just changing the hue directly will work.

But to get all your different colours you will need to change some other properties also. Like for grey.

What ever properties you use to get a colour in one, must be used in all.

If you do not do this then you will for example for the grey change saturation, but that saturation will from then on always be at that setting for all the other colours.

So in this second example, All the same properties have keyframes for all the colours. Even though I may not need to adjust saturation in most, I need it to reset. I simply used the record button to change the saturation at the end keyframe and then slide the property back to its default.

This gave me the start to end keyframe but with no changes. i.e it starts at 1.0 and ends at 1.0

testSeats.hype 2.zip (2.0 MB)

Also you will need to set any keyframe point’s easing to instant otherwise the progress through the changes will be shown. i.e hue will show as a progression of colours from the first colour to the last rather than just changing from first to last.

(note: All the seat buttons are now connected in this example. And as above I have not touched the frame buttons)

2 Likes
9

update answer with a second example.

1 Like
10

(thanks as always @MarkHunte!)

1 Like
11

Oh my how can I not think of that (the changing image method)!

Thank you so much Mark!!!

1 Like