I’ve attached a graphic I am working on. Wondering if anyone can help.
My intent is to have the letters on the tire be buttons and play simple corresponding symbol animations. I have something sort of working here.
I used custom behaviors on each symbol (tirewidth and tiretype) to play the symbol. I also put a custom behavior on them to make other playing animations go back to frame 0.
So far I have only created the first two digits ie. the P and the 2.
I will eventually do all of them. However when someone is clicking too fast on the buttons it somehow activates both symbols and they play at the same time.
Is there a better way to do this so that one cleanly plays and makes any others disappear once you click on them? I am not able to code as of yet. Though it might be possible to follow simple coding instructions if they aren’t too complicated. tiressizes.hype.zip (569.7 KB)
If you’ve got only a animated ‘Main Timeline’ within your symbols, this script will reset them.
i added one exception: if a symbol-element has got the class ‘noReset’ it will not be reseted.
you may run the script on the beginning of an action … so try and play around …
var activeScene = document.querySelector('#'+ hypeDocument.documentId()+' > .HYPE_scene[style*="block"]');
var divsOfScene = activeScene.querySelectorAll('div');
for(var i = 0; i < divsOfScene.length; i++){
var currentDivId = divsOfScene[i].id;
var currSymbol = hypeDocument.getSymbolInstanceById(currentDivId);
if(currSymbol && !currSymbol.element().classList.contains("noReset")){
currSymbol.goToTimeInTimelineNamed(0, 'Main Timeline')
}
}
Thanks for responding and I appreciate it but it’s likely a bit beyond my skill level at this time. Not sure where this goes? On the symbol or the button?
tiressizes_vers001.hype.zip (571.3 KB)
how it works:
- add an id to each button that corresponds with the name of the symbol it shall play
- run two behaviours on each button: first resetSymbols, second playSymbolTimeline
thats it, no further custom behaviours.
requires that symbols only run a ‘Main Timeline’
a symbol that shall NOT be reseted: add a class ‘noReset’ to it
note: make sure buttons are big enough (for mobile >= 50px) and do not overlap
Thanks Hans! I will try this!
Great Information with your info graphics - will You consider posting the finished version?
I’ll think about it, thanks!! It’s for a client so I will have to check into a few things first.
In my haste I didn’t realize you had attached an adjusted version Hans. You are awesome! Thank you so so much and after opening I see how this all works now. I am learning! Albeit it slowly but surely. Best regards.
I just wanted to thank you again for all your help with this. This is really the basis of almost every piece I want to create! I have figured out your instructions on to recreate this effect and incorporate all of your javascript. You have been so helpful Hans!
great! thx for your response