[Solved] Drag and show/hide element

Getting Started
1

My first question and a newbie to Hype, I use Pro
I like to simulate a retail situation where a person (smartphone) points at a piece of clothing and that clothing appears on the smartphone’s screen. Then you drag the phone to the next piece of clothing and that appears on the screens.

I tried applying an drag action to the phone and created timelines for the pieces of garment that should appear on that phone but don’t get anywhere. I looked at various video tutorials but can’t get my head around this.

What would be the basic setup?
Removed
I have my file without animation (attempts) at https://jeroencarelse.com/wp-content/uploads/2018/04/question-drag-and-display.hype_.zip

Any help is much appreciated.
Jeroen

2

so your document consists of some background, the phone and some elements containing clotheshapes.
… and what EXACTLY :slight_smile: should happen when the phone is dragged¿

1 Like
3

Yeah, I was worried this arms waving would not make much sense. So here a video https://jeroencarelse.com/wp-content/uploads/2018/04/drag.mov
Instead of me dragging in the timeline it should be me dragging the phone in the final html5 package.

Imagine I sit in a meeting, giving this presentation and try to communicate that when you walk in the store your phone shows the right cloths. I can’t tell much more due to NDA etc but the video should help

4

To get you started…

This is all done by setting key frames for each element while recording for left position of the phone and opacity of the clothes.

You can expriment with the keyframes easing… these start with instant due to not wanting the opacity to show too soon.

Also drag control is reversed.

question drag and display 3.hype.zip (407.9 KB)

1 Like
8

aaaaahhh, that looks elegant! I think I can take it further from here. Thank you Mark

1 Like
9

I made some progress (also tried many other things) but now I am puzzled by why when I load the scene I see something that is not in my timeline.

There is for example a text element that at 00:00,00 is set to opacity 0% (instant)
At 00:04,15 it is set to opacity 100% (instant)

But when I load the preview I see this element, why?

the file is here https://jeroencarelse.com/wp-content/uploads/2018/04/drag-start-screen-question.zip

Many thanks again for the support. Without the support I would have given up. Have also watched many videos but somehow I miss some essential logic, somewhere :slight_smile:

10

When you change an element properties on another timeline if you are not on a keyframe when you do it you will be changing the elements properties on the Main timeline.

Go to the Main timeline select the text element and set it’s starting properties there. then back to the other timeline select the element make sure you are over the keyframe and set them as you need them at that point.

Second tip.

Either group the text and its background and the act on the group properties or get rid of the background and just give the text a background with the element inspector colour fill.

4 Likes
11

Thanks again Mark, I now got it to work. The grouping I had tried but didn’t get it in regards to the timeline settings. Slowly I get there :slight_smile:

Next is to get the right feeling so it is less clunky. Will try a few things and ask for help when I get stuck.

12

Maybe try some pause actions possibly with continue after drag…

1 Like
13

some more hints?
I am trying to make the appearance of the clothing on the screen to a bit more smooth. I see 2 options:
add keyframes before and after with some easing property
create a custom easing at the keyframe where the clothing on the screen appears

A lot of learning to do and still appreciating the support!
Am not giving up

14

Sounds good. Maybe just breakup the keyframes for opacity for each clothing. Then you may be able to take of the instant easing..

Keep going and I suggest look through the forum and see what other people are unto also look at the tutorials.