On Drag question

1

The image is two images , the red background and the white foreground. Its a pill button and I need to get the white area to drag along the red area to the right side. Once the white area is on the right I need to jump to a new scene. I’m having trouble figuring this out any help?

R

2

I was able to do this with a simple button using mouse click but there is no Next Scene feature. If I try to use OnDrag I can control a separate timeline which moves the slider to the right but thats all I can do. There is no function to use jump to scene.

3

You have to add a script that checks on end-drag that checks of the timeline has played:
Something like this:

if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) { if (hypeDocument.currentTimeInTimelineNamed('button') == 1){ hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 0.3); }; };
drag-button.hype.zip (17.9 KB)

3 Likes
4

thanks so much for this as I knew there was a way.

R

5

Hi Rene

I need help with my code. I’ve created a drag and drop exercise and it is all working fine, but I would prefer it to check whether it is in position on hypegesturephase end which it is not currently. Just dragging the element over the drop area accepts it. I tried using your suggestion, but somehow it does not accept the drop. It just triggers the action when the drop is unsuccessful. May I ask that you check if I did anything wrong in the syntax?

I would really appreciate it. H

var currentTop  = hypeDocument.getElementProperty(element, 'top');
var currentLeft = hypeDocument.getElementProperty(element, 'left');

var dropZone = hypeDocument.getElementById("B6");

var dropZoneTop = hypeDocument.getElementProperty(dropZone, 'top');
var dropZoneBottom = hypeDocument.getElementProperty(dropZone, 'top') + hypeDocument.getElementProperty(dropZone, 'height');

var dropZoneLeft = hypeDocument.getElementProperty(dropZone, 'left');
var dropZoneRight = hypeDocument.getElementProperty(dropZone, 'left') + hypeDocument.getElementProperty(dropZone, 'width');



	if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
		if (currentTop > dropZoneTop && currentTop < dropZoneBottom && currentLeft < dropZoneRight && currentLeft > dropZoneLeft ) {
	hypeDocument.startTimelineNamed('MinimFinish', hypeDocument.kDirectionForward)
	}	
	
	else {hypeDocument.startTimelineNamed('MinimReturn', hypeDocument.kDirectionForward);}
6

Works just fine. I think you forgot a bracket at the end…drag.hype.zip (12.3 KB)

7

Thanks Rene. It had to be a bracket! It works fine now.