hello there , I have problem with the project that i want to make . I try to make a rectangle that will change the color from orange to red when its hover , and when it get clicked to . But i have problem maintaining the red color when it get clicked , just to show that this button is currently active , until you pressed it again , or press the others button .
Here is the file :
color.hype.zip (12.4 KB)
Hi Ricky!
Timelines: In addition to the “Main Timeline” there is also “Button State” which sets the colors of the buttons. “Button01” is active (red color) at one second; “Button02” is active at two seconds, etc.
(2) Functions:
“setBtnColor” - overrides Hype’s “Normal~Hover” default behavior.
“setBtnState” - sets the button color as needed using the “Button State” timeline.
Notes:
Typically the user interface uses a unique color for the “hover” event. In the demo I have set the “hover” to match the “active” or “selected” state as You stipulated.
The code is set up to register a 2 digit ending on the ID for the button; so buttons with IDs below “10” will need to be labeled using “Button01”, “Button02”,“Button03”.
You could use another name like “menuButton” … just make sure that the last 2 digits of the button name matches the “Button State” timeline location in seconds. So the “active” state (red color) for “menuButton07” would be located at 7 seconds on this timeline.
===================
Edit - Additional Notes
As it is now, it is easy to copy and paste the “Background Color” property setting from one button to a new one in the “Button State” timeline; then adjust the positioning for the “active” time for that new button.
However, if You have more than a handful of buttons or You intend to use this set-up in other projects, it might be more efficient~portable to create a complete JavaScript solution rather than a JavaScript~Timeline hybrid.
The difference would be using the color of the button as the key indicator instead of a button’s timeline location - along with a variable that tracked the active button ID (and so its color) - as well as variables (or an array) that stored an individual button’s default (inactive, non-selected) color. If the default state was the same color for all buttons it would make things easier.
Wow , It’s perfectly match with with what I want , you are rock man .
Thanks for your big help
by the way , is the setBtnColor only effect on button , or it also can affect on shape like rectangle . And does it also affect on group ?
Hi Ricky!
What ever element You use can be set up the same way as a button (which of course is an element); keeping in mind my example was designed to be a toggle, only one element at a time is selected based on the element’s unique ID.
so , I try to make something like this . Inside the rectangle there is a text and a circle as a logo , so i make into a group , and the button state function ( click ) is working . However , I want that the hover function also work in group elements , but it doesn’t .
So , how to make the function also workig for group elements
Button Toggle1 - Color.hype.zip (19.8 KB)
You have absolutely no “hover” settings for the rectangle elements - so they are not going to work!
(See attached image below.)
You have to tell Hype what want You want it to do. You need to give the elements that You want to respond to events - such as a “hover” - the appropriate settings or scripts to trigger. Just because they are in a group does not change this situation.
So review the buttons in my example I previously provided and apply that to the rectangles.
Oops ! Sorry for that
I put the hover settings already on the rectangle , buta as you can see the text and the circle is on the front of the rectangle . So , when I’m hovering on the rectangle it is blocked by the text and the circle , So how can I fix that
Button Toggle1 - Color.hype.zip (20.2 KB)
yeahhh . thanks a lot man , for helping me ! Cheerss 
You’re Welcome!
Also please note:
The “Groups” (“text1”, “text2”, & “text3”) have an ID assigned to them - they should not have one. The ID should be assigned to the corresponding “Rectangle” in each Group (and the ID erased from the ID field for that Group).
Remove the (2) JavaScripts (“setBtnColor” & “setBtnState”) from each of these Groups - keeping of course the currently assigned JavaScripts for each Rectangle in each group.
how can I change these keyframe from circular into cubic like on the right side ?
Answered your question (above) in this other post of yours (featuring the identical question)...
Hi Jim,
This was super helpful! Thank you.
How would we change the JS if we are putting all of the buttons inside a Symbol?
Attaching my file in case helpful.
Thank you,
HyperButton Toggle - Color - within Symbol.hype.zip (28.0 KB)
Hi Hyper!
I am assuming - because You are going the Symbol route - that You will have a multiple use scenario. If so the main script would require a bit of a redo using classes instead of IDs.
Another possibility would be to use attributes such as @MaxZieb has demonstrated here.
I am deep in the weeds on a project and I will not have time in the near future to do a rewrite of my previous code - the attributes approach looks very interesting and this project would provide a great chance to play with it.
This is very interesting. Will take a look. Thank you.
independent from classes or attributes or ids you’ll need to reference the symbol for your API-calls of timelines. so change all occurences of hypeDocument to symbolInstance. you can get a symbolinstance by id or name:
hypeDocument.getSymbolInstanceById(id) <- single instance
hypeDocument.getSymbolInstancesByName(symbolName) <- array of instances
