Here is a revised version.
Here I am trying to make it easy to construct your scene.
The Construction of this Example:
You create you First Button. A Inner Ellipse and an Outer Ellipse.
Give the Inner Ellipse an unique id. What ever you want. Then give its the class name : InnerEllipse.
The Class Name I have named above will be used in the Javascript Functions. So MUST be the same.
Group the two Ellipse.
We group the because apart from being easier to work with, doing so means the Ellipse position will be relative to the Group. Rather than the Scene/window.
( Don’t create any more buttons yet)
We then Add a Javascript Function to Inner Ellipse’s MouseOver, MouseOut and MouseClick Actions.
We will use the same Javascript Function for all three actions. ( Code to come below )
Now go to the Scene and the Button Group you created before.
Select the Group and Duplicate it as many time as you need.
For Each duplicate, Change the background colour, Give it a Unique ID.
All the duplicates should already have the class name and the mouse actions
Lastly on the Scene we add a Single Rectangle that will take the colour chosen. Give the Rectangle the ID of : Box
Now back to the Javascript into the Function:
Paste ( I know you are not going to type it 
) this code in to the function.
The code takes care of all the Animations, shrinking/ expanding of the buttons Inner ellipse , Changing the Colour of the Box and storing which button is the clicked one and therefor leaving it alone.
The code is commented so you can follow along.
var box =hypeDocument.getElementById('box'); //-- Colouring Box
var EllipseButtons =document.getElementsByClassName('InnerEllipse'); //-- Array of the buttons inner Ellipse by class Name
var ellipseButtonID = element.id //-- The buttonthat triggered this Function
//** --ELEMENT MOUSEOVER / MOUSEOUT ACTIONS
if (event.type == "mouseover" && window.buttonClicked !=ellipseButtonID ){ //--- only if this is not the last clicked button
expandSize(element) //-- exapand button animation
}else if ( event.type == "mouseout" && window.buttonClicked !=ellipseButtonID){ //--- only if this is not the last clicked button
shrinkSize(element) //-- shrinkbutton animation
}
//** --ELEMENT CLICK ACTION
if (event.type == "mouseup" ){
window.buttonClicked = ellipseButtonID; //-- STORE THIS AS THE LAST BUTTON CLICKED
for (i=0; i < EllipseButtons.length;i++ ){
//-- ITERATE OVER ALL THE BUTTONS USING THE ARRAY (OBTAINED ABOVE BY CLASS NAME)
var buttonID = EllipseButtons[i].id
if (buttonID != window.buttonClicked ) {
//-- SHRINK ALL BUTTONS THAT ARE NOT THE CLICKED ONE
shrinkSize(EllipseButtons[i])
}
}
hypeDocument.getElementById('box').style.backgroundColor = element.style.backgroundColor;
}
function shrinkSize(thisElement){
//-- SMALL BUTTON DISPLAY
hypeDocument.setElementProperty(thisElement, 'left', 11, 0.4, 'easeinout')
hypeDocument.setElementProperty(thisElement, 'top', 11, 0.4, 'easeinout')
hypeDocument.setElementProperty(thisElement, 'width', 22 , 0.4, 'easeinout')
hypeDocument.setElementProperty(thisElement, 'height', 22 , 0.4, 'easeinout')
}
function expandSize(thisElement){
//-- LARGE BUTTON DISPLAY
hypeDocument.setElementProperty(thisElement, 'left', 0, 0.4, 'easeinout')
hypeDocument.setElementProperty(thisElement, 'top', 0, 0.4, 'easeinout')
hypeDocument.setElementProperty(thisElement, 'width', 45, 0.4, 'easeinout')
hypeDocument.setElementProperty(thisElement, 'height', 45, 0.4, 'easeinout')
}
The last thing we do is place this code into the Head file.
<script>
window.buttonClicked = "";
</script>
This is the Global Var that will hold which button was clicked last.
Hopefully this will make the construction painless. Because as much as I love the timelines I never like to create tons of them for individual elements.
Notes:
The Shrink and Expand sizes are hard coded. I originally used the sizes from the elements theirselves but found this could become unreliable if you moused over too fast. The Variable that stored it would get a wrong number.
The example File:
Buttons_On_Off.hypetemplate.zip (18.1 KB)
I left it this way a) didn’t want to spend too much time on it and b) it’s easier sometimes to see what’s happening when using a switch
