Seamless Background with Drag


#1

I’m planning a globe that you can rotate left or right with the Finger and stop at certain positions when you let go of your finger. I planned it that way: Different scenes that always run up to a certain position if the user drag the globe to that position and let go the finger. The problem is: There must always be a beginning and an end point. I build a rotation with the globe, so at the startpoint I can only drag to the right side for example, not to the left side. but the user should be able to rotate the globe endlessly in all directions, left AND right. How can I realize that?


#2

app.zip (584.6 KB)
Here is the file for better understanding. Thanks


(Mark Hunte) #3

You mean like this

app_mhv1.hype.zip (621.8 KB)


#4

Not exactly. How can I detect if I dragged to the left or to the right? I can only choose only one direction how the movie runs if I drag, forward or backward.


(Hans-Gerd Claßen) #5

May be ‘Drag Functions’ (JavaScript functions invoked by the On Drag handler can gather information about the current drag gesture) within Hypes API is what you’re looking for …

https://tumult.com/hype/documentation/3.0/#dragapi


#6

Thanks a lot.


#7

@MarkHunte I looked at it again. it’s almost what I was looking for. Could you explain what you changed? Thanks again.


(Mark Hunte) #8

I made the timeline animations so that working from the middle of the duration the rotation goes in different directions.

Then on sceneload I have the timeline jump to the middle of the timeline. Thus we can rotate left and head back in time of the timeline or right and head forward in the timeline.

You can tweak the rotation keyframes to match where you want them to stop. The Stops are ether at the 0 point or the end of the whole animation duration.

As shown in this next example rotation tweeked and a timeline display added so you may get a better idea of what I am explaining.

app_mhv2.hype.zip (621.7 KB)


#9

Thanks. I want to explain in more detail what I want to do.
Maybe maybe I’m going wrong generally.
Please see the video.


(gabriel) #10

something like that?app_mhv3.hype.zip (626.0 KB)


#11

@gaboSM Thats very nice. Thank you very much. Still one question: To the right I can roll seamless but unfortunately not if I slide to the left. It is stopping at the beginning. is there another trick here? i think it’s because at the start it is set to forward.


#12

I solved it. There was a “start timeline” at the beginning. I changed it to “stop”.


(Mark Hunte) #13

Lol, I have been looking at this… and had removed that but thought you also wanted the bounce.

I had got some way in it by using a second timeline mirroring the first that also runs from the pause keyframes.
The second timeline does the bounce back and forth but hit a wall on one part in the left direction…


#14

I have still two questions. I ask here because I’m a new pro User. If I have to write to a support E-Mail or something, please let me know:

  1. How could I prevent, that the preview is showing in a new tab of chrome? each time if I want to preview, Chrome is adding a new tab. At safari it is working without creating a new tab.
  2. How is it possible to stick elements to each other? I mean, if an image is rotating for example. How could I rotate the element with the other element together? For example here at my globe. The rocket should rotate with the globe. I solved it with a Move. But it that the right way?

I’m really impressed with Hype, but I still need to find my way in it.
app.zip (637.9 KB)


(Mark Hunte) #15

If you find an answer to that let me know…:grinning:

Group the elements and make sure you set you pins and flexible layout for the group contents then cut and paste your rotate animation onto the group


#16

Thanks, I will try that.


#17

It is working, thank you very much, my Coach…:stuck_out_tongue_winking_eye:


(gabriel) #18

:slight_smile:


#19

Unfortunately Chrome will open a new tab when a preview URL is sent to it. A bit more info here. (And it annoys us too)


#20

I’ve now found a solution (you can see above), but I’m not satisfied. Actually, the basic preset effect(control timeline with drag) in Hype is perfect: The globe rotates with the mouse and when I release, the movie continue. But I can only set forward OR backward in the presets. I could recreate this effect in Javascript but I can’t find any corresponding Javascript functions. Only

hypeDocument.goToTimeInTimelineNamed(timeInSeconds, 'timelineName')

But how is the basic preset effect (control movie by drag & speed e.g.) structured? Is there an example or can I see somewhere how the code exactly looks like?

Alternatively, it would be great if I could set the basic preset only to play forward when I drag to the right and reverse when I drag to the left.

Sorry, I’m stucking on the problem.

26