Scene producing unexpected behaviour

1

The scene is producing really unexpected behaviours and I can’t figure it out, why.

I’m creating this scene for a project. I have created a scene with an image on which there’s a button (Click here) that starts the app. The app basically has a text input field that is supposed to read what kind of symptoms the user is facing and then give a reply. It is doing so using JavaScript. I have added certain keywords (the keywords are: headache, stomach, joint, tooth, insomnia) which are checked for and then the user is taken to a specific time in timeline which shows that reply.

Now, the problem is, I can’t seem to be able to get rid of the ‘Help me’ button and the form when it’s not needed (it’s not needed when users are getting the reply). The Hype timeline shows no error, but, it’s not working fine in preview.

Can someone please help?

Oral-B copy.hype.zip (397.3 KB)

2

It seems as if it needs a ‘display’-keyframe at exact that time where you send the ‘Options’ Timeline to (1s for ‘headache’, 2s for ‘stomache’ etc.). Each for the form an for the button. But I would prefer to set the display/visibility via JS - you will have more control…
Oral-B_3.hype.zip (442.1 KB)

2 Likes
3

Here is a JavaScript version. Gave your button and the form IDs (‘helpBut’ and ‘form’):

var myBut = hypeDocument.getElementById('helpBut');
	myBut.style.display = 'none';
	
var myForm = hypeDocument.getElementById('form');
	myForm.style.display = 'none';

sets your button and the form invisible in the ‘check1200’ function. There´s a new function 'changeView" which sets both to visible again by clicking the ‘Help me!’ Button or the ‘Got another sympton’ button:

var myBut = hypeDocument.getElementById('helpBut');
	myBut.style.display = 'block';
	
var myForm = hypeDocument.getElementById('form');
	myForm.style.display = 'block';
	
hypeDocument.goToTimeInTimelineNamed(0, 'Image');

Oral-B_js3.zip (421.8 KB)

1 Like
4

Thanks a lot, sir! This works great. But, why does it need another keyframe to stay hidden? Like, I don’t understand that, especially because Hype’s timeline shows the correct preview but it produces unexpected results only in browser (in my file). Why should this happen?

5

no answer to your question here, but a scene- or symbolbased-approach should be easier to handle …

6

No idea… Timelines are great, but they contain certain pitfalls - especially if you use them in context with display/not display - in my experience. Timelines may affect other timelines… in this case I suspect the keyframe in the ‘image’-timeline interfering with the ‘options’-timeline. Therefore I would always prefer the JS approach - or - to make things much easier, as Hans-Gerd points out - in this case it’s likely better to use scenes.

7

The most basic reason is that the runtime plays timelines as streams of animations, where an animation is defined as the change between a start and end keyframe. If there is only one keyframe it isn’t really an animation and won’t get played.

That said I do consider this to not be desired behavior – the display property is pretty special relative to other properties, so we’d like to improve this so it works as you expected!

1 Like
8

That’s some new information. Thanks a lot!