Drag and Swipe Actions for Controlling Scenes and Timelines


#1

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/


Drawing or tracing lines in Hype
#2

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


#3

@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.


#4

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


#5

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.


#6

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


#7

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


#8

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:


#9

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