I am looking for a simple way to solve my problem. I want to have a mouseover and -out effect on my navigation bar and on the event click it should stay in the mouseover status. So far the mouseout and the click event affect eachother on a wrong way. The example I attached here is done with plain rectangles, but later they will be images. So I guess css changes doesn't help me.

I tried to understand some older discussions here in the community, but they all reached a level of coding which isn't mine so far.

You can simulate a Flash Button symbol. The button symbol has autoplay set to false, as we don’t use it to play some animation, but to record three states, labeled respectively “normal“, “hovered“ and “clicked“.

Graphically here, the three states are denoted by three texts. Each text has property display set to true on the corresponding state and to false elsewhere.

Flash offers a fourth predefined image, never rendered, but used to define the hot area of the button, which is useful when the graphics is small and it's user-friendly to allow the rollover effect to happen on a wider area. In Edge, to achieve the same effect, just set the dimensions of the symbol (250 x 150 in the example) to be bigger than the bounding box of the visual elements (a 200 x 100 rounded rect in the example). I added a rectangle “toDenoteHotArea“ just to materialize it visually, but note that it is outside of the button symbol (on stage).

The button instance being selected on stage, in the properties panel, in the Cursor section, select the usual hand cursor or whatever you want (it’s auto by default).

The button instance having name “button-1“, had to it the following event handlers :

if we want to have hover, Click and Out function for our buttons and we want to save State of our clicked buttons and deactive the Out function after click on it we should do some easy steps and we need little knowledge on language programing

1- we need to have a Reset State function so every time we click on a button the others go back to their default state

2- we need a variable to work as Flag so we can use it as to get to know which buttons are we clicked on and disable the out function for that button

i made this Example for you to get better undrestand on how its working

Button symbols btn1, btn2, btn3, only holding a text element, with code only for the rollover effect (their timeline has only two states "normal" and "hovered") :

textBtn1.mouseout : sym.stop(“normal“);

textBtn1.mouseover : sym.stop(“hovered“);

idem for btn2, btn3, etc.

Those buttons are nested into a navBar symbol (with three states labeled “section1“, “section2“, “section3“), itself nested into the stage (which timeline also has three states labeled “section1“, “section2“, “section3“)

btn1-1.click :

// go and stop to the state of the navbar with

// - graphics for the clicked state of the first button with display : true

// - instance “btn1-1“ with display : false

sym.stop("section1");

// go and stop to the section1 content on the main timeline

sym.getParentSymbol().stop("section1");

idem for btn2, btn3, etc.

The currently selected section is no longer handled by a variable, but by a state where the playhead stops in the different timelines.

as you can see guys my codes are very simple, let me explain you how easy it is

when we want to have a variable with value we write :

x = 10 ;

x is a variable and 10 is a value

when we wanna have function without arguments we just want to call it to do some works for us we write :

function test () {

alert("hello")

}

and when we want to call it we just write name of our function:

test();

if you test this sample and write it in Stage > compositionReady when ever you run the project you will get an alert with hello, this is very simple and easy

but if you want to call test(); function in an element in the click part, to execute our function when ever we click on the button, you simply find out hey this just dont work !!

so here is a very easy way to make it work, we use the power of variables !!

we write a variable then make our function inside that variable like a properties

x = {

test:function(){

alert ("hello")

}

}

Now or function will work in anywhere in our project when ever we call it !!

and when ever we want to call we just write

x.test();

now we just need to write this in our element click part and when we execute our project, whenever we click on our element function will be execute and we see hello Alert

write this simple example for yourself to get better undrestand how is easy !!

in my program i did the same, i just write a variable and named it buttons ( you can name it what ever you want ) then i create a function and i named it Reset and then i just wrote in there my normal state of my button and i wrote it in all of my buttons click part,

buttons.Reset();

so when ever i click on every buttons all of them will get to their Normal State, and after that i just need to write my code for clicked state after Reset function, so when ever i click on the button it will reset all others and make itself clickable state

What piece of code i have to write to prevent clicking event on buttons more that ones. So when i click on same button second time nothing would happened. (something like buttons for captions or image gallery)

I'm working on a similar issue, I have 5 button symbols that I'm using for a navigation menu but I'm using images for buttons. Here's an idea of the 3 states I'm trying to achieve and the corresponding image files.

normal= button.png

mouseover= highlighted_button.png

click = glowing_button.png

After clicking on one of the navigation buttons, I want "glowing_button.png" to stay loaded until a different navigation button is selected which should then take the inactive navigation button back to "button.png" and the newly selected navigation button would load "glowing_button.png". I'd greatly appreciate any help with this, I've been pulling my hair out

this is very easy, if you read posts complete and carefully you can create those buttons to act like what you want !!

as i said in previews posts you need to have a reset function for your click action to set all buttons to their default state then call the current state you want, and use if statement to disable mouse over for clicked button

Sorry, I should have mentioned that I'm not very familiar with script. We'll, anyone who would be so kind as to show me how to do this then I will pay it forward by doing a YouTube tutorial to show other people how to do this. Seems like a very basic feature, not sure why it wasn't just built straight into Edge the way it was with Muse.