Drag and Swipe Actions for Controlling Scenes and Timelines

Tumult Hype supports a large number of actions for mobile devices:

Mouse Touch Actions:

  • Mouse Click (Tap) — A complete click (a mouse down followed by mouse up) has been completed.
  • Mouse Down (Touch Start) — Once the pointing device has been depressed on the element.
  • Mouse Up (Touch End) — The mouse button has been released after being pressed.
  • Mouse Over — The cursor has entered the bounds of the element.
  • Mouse Out — The cursor is no longer within the bounds of the element.
  • On Drag — A drag has begun on the indicated element.
    • Control Element Position — Controls the position of the element when dragged.
    • **Control Timeline — **Horizontally or vertically dragging across the selected element controls playback of the selected timeline. The axis dropdown defines whether a horizontal or vertical drag controls the timeline. The direction dropdown defines whether the indicated timeline plays forwards or backwards. Select ‘Continue after drag’ to maintain the momentum of the timeline’s playback after releasing.

Scene Touch Actions:

  • On Swipe Left — Triggered when the scene is swiped from right to left.
  • On Swipe Right — Triggered when the scene is swiped from left to right.
  • On On Swipe Up — Triggered when the scene is swiped from bottom to top.
  • On Swipe Down — Triggered when the scene is swiped from top to bottom.
  • On Drag — Triggered when the scene area is dragged.
    • **Control Timeline — **Horizontally or vertically dragging across the scene controls playback of the selected timeline.

For more info on these actions, visit: http://tumult.com/hype/documentation/actions/

Hi Daniel,

I’ve created a looping image carousel that works fine with button (continue timeline) functionality, when the last image is reached a Timeline Action redirects back to the beginning & vice versa when moving in reverse.

But now that I’m starting to add in mobile touch Actions I’ve encounter a significant issue… if I select ‘On Drag’ to control timeline it ignores my timelines keyframes and doesn’t loop back to the relevant start frame.

Am I missing something or is there another way to get ‘On Drag’ to trigger my timeline actions?

Cheers
Steve

1 Like

@stevescartoonz Can you post an example?

I’m only guessing as to how you have your document set up.

Instead of just controlling the timeline you can run a small javascript function to check which direction you’ve dragged and continue your timeline Forward or in Reverse depending on the direction. If this is something you think you could benefit from let me know and show me what you’ve got and I can offer a solution. If it’s sensitive then you can send it to me in a message.

Unfortunately not, content is not allowed to go public yet. Basically it’s an infinite looping carousel of 10 images, timeline begins at 1:15 with pause timeline every 15 frames up until 6:15 - keyframe at 6:16 go to 1:16 - keyframe at 1:14 go to 6:14… all works seamlessly. But if I use On Drag to control timeline when it gets to frame 6:16 it doesn’t loop back, just keeps going along empty timeline.

It appears that the On Drag function is bypassing Timeline actions, directionality works fine.

I have no coding skills which is primary reason for using Hype “No coding required”

Cheers
Steve

Well, the only thing I can do is show you an example and hopefully you’ll understand where and when to call the functions

dragToControlTimeline.hype.zip (873.8 KB)

Note: The symbol is not necessary. It is there because you can also use Hype’s (and therefore the Symbol’s) built in Swipe actions to play/continue timelines.

1 Like

Thanks DBear, Swipe is what i was after, knew I’d seen it somewhere! didn’t realise it was a symbol only feature… I was hoping to avoid having to convert the whole carousel into a symbol as doing so bins all of my timeline keyframes!

I’ll see how I get on with symbolising and re-keyframing :frowning:

Cheers
Steve

It isn't but it's easier to control on an element by element basis rather than have the whole document swipeable

Swipe is available in the Main Scene Inspector

Aha! Due to the fact that I have over a dozen different timelines all included on scene load, the other functions have been pushed off the bottom of my screen! I'll give that a try

Thanks again

Steve :slight_smile:

Hello Daniel,

Djon advise me that I could use the drag and drop function to be able to get the result I am looking for. I would really appreciate it if you could you take a look at my question: Drawing or tracing lines in Hype and help me out.

Thank you very much,
Carla

Hi Daniel

I'm desperately looking for a way to put the "Up Arrows" into a "Touch Action" for the iPad version. A "double touch" would be ideal. But maybe also as a drag or as a custom behavior". Mainly a screen touch command.

I'm not sure I follow what behavior you want; can you elaborate on what you mean by "Up Arrows?" Is there an example of the type of thing you're trying to do?

image
Hi Jonathan,
I need a "TouchAction" for the "up" arrow key for the iPad.
Just as everything is okay on the desktop, I'm missing a "TouchAction" in parallel for the Ipad. Please take a look at the hype document. Maybe you have an idea ?
TouchAction.hype.zip (139,4 KB)

Ralf

In the iPad, the punk jumps when tapping the screen. Drive left and right with swiping. He just can't beat the coins. A function is missing. In the desktop version there is a double function on the arrow key "up". Double click would be ideal in the game. But other gesture controls could also be okay. Is it conceivable to imitate the command arrow key "up" from the desktop version in the iPad touch-version?

I think if you want a double action, you'd just need to set some variable that can keep track of the original click. I'd probably set a flag to true on an initial click and then setup a window.setTimeout() to clear that after a threshold. If the flag is still true when another tap comes along then you can perform the action (and also set the flag to false). If the flag's timeout is hit then it should count as a first click.

You may also be looking for the fact that the scene doesn't have the same element on click/touch actions. You could probably set this on a particular element, or if that isn't correct, then on scene load get the scene element (via the hypeDocument.currentSceneId()) and add your own javascript event handlers.

you'll find several predefined js-fiddles regarding double-tap doing a websearch. one of them: Vanilla JavaScript Double tap event detection on mobile using setTimeout · GitHub

1 Like

Ah, super...vielen Dank... Hans-Gerd
Übrigens, danke auch für den Pacman !

1 Like

thanks, that helps! great approach.
I just don't know if I can hit the tee like the desktop version. !?!