26 Replies Latest reply on Aug 15, 2013 11:03 AM by thedeeman

    rollover and click event with swapping images

    ixomanu

      Dear people,

       

      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.

       

      MyStatusQuo: http://intern.ixtract.de/_3MFkJRIOOfbNZR

       

      I hope for your help and thanks in advance!

        • 1. Re: rollover and click event with swapping images
          Santos49 Level 1

          I’m not sure if this is what you mean.

          But you can change your buttons code, from “click” to “mouse over”.

           

          mouseOver.png

          1 person found this helpful
          • 2. Re: rollover and click event with swapping images
            raykonen80

            I think I have same problem as ixomanu. I want to have 3 states for my buttons: hover, out and selected. But problem is mouseout event, which fires and i lose my selected state.

            I partially fix this problem with jQuery data() function ( data("clicked", true) ). This can be done in jQuery with addClass("selected") but i dont now how can achive this with edge.

            • 3. Re: rollover and click event with swapping images
              AMULI Level 4

              Hi,

               

              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 :

               

              button-1.mouseover

               

              sym.getSymbol("button-1").stop("hovered");

               

              button-1.click

               

              sym.getSymbol("button-1").stop("clicked");

               

              button-1.mouseout

               

              sym.getSymbol("button-1").stop("normal");

               

              Downloadable exemple here : https://www.box.com/s/6wr81z3lc2szb01qiahm

               

              Gil

              • 5. Re: rollover and click event with swapping images
                Zaxist Level 4

                well guys

                 

                this is not very easy as you might think !!

                 

                Flash is diffrent from Edge Animate..

                 

                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

                 

                Link : http://www.mediafire.com/?5t51c8i7dg12r14

                 

                if you had any question let me know

                 

                Zaxist

                • 6. Re: rollover and click event with swapping images
                  Santos49 Level 1

                  Zaxist, could you please publish the code?

                  I don’t have the last version of AEA.

                  Thanks

                  • 7. Re: rollover and click event with swapping images
                    Zaxist Level 4

                    if you install the latest version of AEA you are still able to have your AEA 1.5 too

                     

                    it will not update your AEA 1.5 to 2.0 !! it will just install AEA 2.0 separately

                     

                    by the way here are The codes, but i cant copy paste timelines from button 2

                     

                    Stage > compostionReady

                     

                    sym.getSymbol("btn1").$("Text").html("Normal")

                    sym.getSymbol("btn3").$("Text").html("Normal")

                     

                     

                    // Reset Every Buttons State

                    buttons = {

                     

                     

                                                            reset:function(){

                                                            sym.getSymbol("btn3").$("back").css({"background-color":"#c0c0c0"})

                                                            sym.getSymbol("btn3").$("Text").css({"color":"#000000"})

                                                            sym.getSymbol("btn3").$("Text").html("Normal")

                                                            sym.getSymbol("btn1").$("back").css({"background-color":"#c0c0c0"})

                                                            sym.getSymbol("btn1").$("Text").css({"color":"#000000"})

                                                            sym.getSymbol("btn1").$("Text").html("Normal")

                                                            sym.getSymbol("btn2").stop("Normal")

                                                            }

                     

                     

                    }

                    // which button ?  Zero Means No One !!

                    // we set this variable to get know e clicked on witch button

                    WB = 0;

                     

                    =========================================================

                    btn1 > mouseover

                     

                    if ( WB != 1){

                    sym.getSymbol("btn1").$("back").css({"background-color":"#0097ff"})

                    sym.getSymbol("btn1").$("Text").css({"color":"#ffffff"})

                    sym.getSymbol("btn1").$("Text").html("Hover")

                    }

                     

                    =========================================================

                    btn1 > mouseout

                     

                    if ( WB != 1){

                    sym.getSymbol("btn1").$("back").css({"background-color":"#c0c0c0"})

                    sym.getSymbol("btn1").$("Text").css({"color":"#000000"})

                    sym.getSymbol("btn1").$("Text").html("Normal")

                    }

                     

                     

                    =========================================================

                    btn1 > click

                     

                    buttons.reset();

                     

                    sym.getSymbol("btn1").$("back").css({"background-color":"#ffbb0f"})

                    sym.getSymbol("btn1").$("Text").css({"color":"#000000"})

                    sym.getSymbol("btn1").$("Text").html("Clicked")

                     

                    WB = 1;

                     

                    =========================================================

                    btn2 > mouseover

                     

                    if ( WB != 2){

                    sym.getSymbol("btn2").play("Hover")

                    }

                     

                     

                    =========================================================

                    btn2 > mouseout

                     

                    if ( WB != 2){

                    sym.getSymbol("btn2").play("Normal")

                    }

                     

                     

                    =========================================================

                    btn2 > click

                     

                    buttons.reset();

                    sym.getSymbol("btn2").play("Clicked")

                    WB = 2;

                     

                     

                    =========================================================

                    and btn3 Same as btn1

                     

                     

                    Zaxist

                    1 person found this helpful
                    • 8. Re: rollover and click event with swapping images
                      AMULI Level 4

                      Thank you Zaxist for adding the button group logic (radio buttons alike)

                       

                      Gil

                      • 9. Re: rollover and click event with swapping images
                        Santos49 Level 1

                        Fantastic! Zaxist.

                         

                        Thanks’ a lot for your trouble and for the info to.

                        • 10. Re: rollover and click event with swapping images
                          Zaxist Level 4

                          you're welcome guys

                           

                           

                          Zaxist

                          • 11. Re: rollover and click event with swapping images
                            ixomanu Level 1

                            Thx Zaxist. Here we got a similar version which also works well now.

                             

                            // VARS -----------------------

                             

                            // array to store btns

                            sym.array_btns = ["ButtonVerstaendnis","ButtonUmwelt","ButtonBeteiligung","ButtonFinanzen","ButtonGenossen ","ButtonKompetenz","ButtonStart","ButtonVorteil","ButtonVorgehen"];

                             

                            var Klicker = "0";

                             

                            // FUNCS -----------------------

                             

                            // called by Stage root timeline trigger at 0ms

                            sym.setup = function() {

                             

                                for(var i=0; i<sym.array_btns.length; i++ ){       

                                    // hide all over-state objects initially

                                    sym.$(sym.array_btns[i]).height(90);

                                    sym.getSymbol(sym.array_btns[i]).$("aktiv").hide();

                                }

                            }

                             

                            sym.onOver = function( arg ) {

                             

                                // get clean reference to btn ID from "Stage_red_panel_hit"

                                var fixedID = sym.cutString(arg, 0, 5);// remove "Stage_"

                                fixedID = sym.cutString(fixedID, fixedID.length-4, fixedID.length-1);// remove "_hit"

                             

                                // show objects

                                sym.getSymbol(fixedID).$("aktiv").show();

                             

                                // play timeline

                                if (Klicker == fixedID) {} else {sym.getSymbol(fixedID).play("show");}

                                //sym.getSymbol(fixedID).play("hide");

                             

                            }

                             

                            sym.onClick = function( arg ) {

                             

                                // get clean reference to btn ID from "Stage_red_panel_hit"

                                var fixedID = sym.cutString(arg, 0, 5);// remove "Stage_"

                                fixedID = sym.cutString(fixedID, fixedID.length-4, fixedID.length-1);// remove "_hit"

                                // hide objects

                                if (Klicker != 0) {

                                sym.getSymbol(Klicker).play("aktiv");

                            }

                             

                                // show objects

                                sym.getSymbol(fixedID).$("aktiv").show();

                             

                             

                                // play timeline

                                Klicker = fixedID;

                            }

                             

                             

                            sym.onOut = function( arg ) {

                             

                                // get clean reference to btn ID

                                var fixedID = sym.cutString(arg, 0, 5);

                                fixedID = sym.cutString(fixedID, fixedID.length-4, fixedID.length-1);

                            //alert (Klicker);   

                            if (Klicker == fixedID) {} else {sym.getSymbol(fixedID).play("hide");}

                                //sym.getSymbol(fixedID).play("hide");

                             

                             

                            }

                             

                            // called by trigger at panel timeline complete event

                            sym.onOutAnimDone = function(arg) {

                                sym.$(arg).height(90);

                                sym.getSymbol(arg).$("aktiv").hide();

                             

                            }

                             

                            sym.cutString = function(str, cutStart, cutEnd){

                              return str.substr(0,cutStart) + str.substr(cutEnd+1);

                            }

                            1 person found this helpful
                            • 12. Re: rollover and click event with swapping images
                              AMULI Level 4

                              Hi Ixomanu,

                               

                              Another solution I used for such a navigation bar :

                               

                              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.

                               

                              Gil

                              • 13. Re: rollover and click event with swapping images
                                raykonen80 Level 1

                                Thank you Zaxist, this is exactly what i need it but one question: is

                                buttons = {

                                                                        reset:function(){

                                                                        sym.getSymbol("btn3").$("back").css({"background- color":"#c0c0c0"})

                                                                        sym.getSymbol("btn3").$("Text").css({"color":"#00 0000"})

                                                                        sym.getSymbol("btn3").$("Text").html("Normal")

                                                                        sym.getSymbol("btn1").$("back").css({"background- color":"#c0c0c0"})

                                                                        sym.getSymbol("btn1").$("Text").css({"color":"#00 0000"})

                                                                        sym.getSymbol("btn1").$("Text").html("Normal")

                                                                        sym.getSymbol("btn2").stop("Normal")

                                                                        }

                                }

                                same as :

                                function buttonsReset () { .......}

                                • 14. Re: rollover and click event with swapping images
                                  AMULI Level 4

                                  Hi Raykonen80,

                                   

                                  Zaxist defined an anonymous function (function()), then assigned it to the reset property of a buttons object. Then it can be called via buttons.reset().

                                   

                                  As the object is trivial and has only one property, a variable could have been used to store the function : varButtonsReset = function(){ }. Then you could call it via varButtonsReset().

                                   

                                  By contrast, function buttonsReset () { } is not an anonymous function. You give it a name buttonsReset, that you use in the call : buttonsReset().

                                   

                                  The whole point is that in JavaScript Function is one of the primary types, with the important consequence that you can assign a function to a variable, therefore to an object's property.

                                   

                                  Gil

                                  • 15. Re: rollover and click event with swapping images
                                    Zaxist Level 4

                                    thanks AMULI

                                     

                                    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

                                     

                                    i hope i could explain it good

                                     

                                    if you have any question let me know

                                     

                                    Zaxist

                                    • 16. Re: rollover and click event with swapping images
                                      AMULI Level 4

                                      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 !!

                                       

                                      Another way to make the test function accessible from the click event handler would be :

                                       

                                      btn<i>.click

                                       

                                      sym.getComposition().getStage().test( e);

                                       

                                      document.compositionReady

                                       

                                      sym.test = function( eBtn)

                                      {

                                        console.log( eBtn.target.getAttribute(“id“));   // traces the id of the clicked button

                                      }


                                      But your solution, Zaxist, getting rid of the heavy sym.getComposition().getStage() part,

                                      is much more concise and elegant. Thx for sharing.

                                       

                                      Gil

                                      • 17. Re: rollover and click event with swapping images
                                        Zaxist Level 4

                                        thanks Gil

                                         

                                        in my solution you can do more

                                        for example if you have bunch of function that you want to execute on your elements you can simply just do this

                                         

                                        x = {

                                         

                                                  first:function(){

                                                                      .

                                                                      .

                                                                      .

                                                                      },

                                                  second:function{

                                                                           .

                                                                           .

                                                                           .

                                                                           },

                                                  .

                                                  .

                                                  .

                                                  last:function(){

                                                                      .

                                                                      .

                                                                      .

                                                                      }

                                             } // end of x

                                         

                                        and you can call them as i said

                                         

                                        x.first();

                                        x.second();

                                        .

                                        .

                                        .

                                        x.last();

                                         

                                         

                                        very easy isnt it ?

                                         

                                        Zaxist

                                        • 18. Re: rollover and click event with swapping images
                                          raykonen80 Level 1

                                          Thank you Zaxist and Gil for your help, just one more question:

                                          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)

                                          • 19. Re: rollover and click event with swapping images
                                            Zaxist Level 4

                                            this is very easy

                                             

                                            just put your click codes between if like your mouseover and mouseout

                                             

                                            sample for button 1  > click

                                             

                                            if ( WB != 1 ){

                                             

                                            buttons.reset();

                                             

                                            sym.getSymbol("btn1").$("back").css({"background-color":"#ffbb0f"})

                                            sym.getSymbol("btn1").$("Text").css({"color":"#000000"})

                                            sym.getSymbol("btn1").$("Text").html("Clicked")

                                             

                                            WB = 1;

                                             

                                            }

                                             

                                            Zaxist

                                            • 20. Re: rollover and click event with swapping images
                                              raykonen80 Level 1

                                              Why this code doesnt work if i declare variable WB with var key word.

                                              • 21. Re: rollover and click event with swapping images
                                                Zaxist Level 4

                                                because var makes WB as local variable and you need to have Global variable so can have access to it from every where in your project

                                                 

                                                Zaxist

                                                • 22. Re: rollover and click event with swapping images
                                                  raykonen80 Level 1

                                                  Thanks again Zaxist

                                                  • 24. Re: rollover and click event with swapping images
                                                    thedeeman

                                                    Hello

                                                     

                                                    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

                                                    • 25. Re: rollover and click event with swapping images
                                                      Zaxist Level 4

                                                      dear thedeeman

                                                       

                                                      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

                                                       

                                                       

                                                      Zaxist

                                                      • 26. Re: rollover and click event with swapping images
                                                        thedeeman Level 1

                                                        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.