8 Replies Latest reply on Jun 30, 2015 1:34 AM by Allison@HavasLynx

    Bind / Unbind help please

    MilkStudio

      I am trying to get my head around bind/unbind (or on/off) with the following scenario:

       

      1. Rectangle and an red ellipse. When you mouseover the rectangle, the ellipse turns blue. When you mouseout, the ellipse turns red again.

       

      2. If you click on the rectangle, the ellipse stays blue (unbind mouseover/mouseout).

       

      3. If you double-click on the rectangle, everything returns to the state it was in the beginning (bind mouseover/mouseout).

       

      Code I've added in the actions panel is thus:

       

      mouseover...

      var element = sym.$("Ellipse").css("background-color","blue");

       

      mouseout...

      var element = sym.$("Ellipse").css("background-color","red");

       

      click...

      var element = sym.$("Rectangle").off("mouseout");

       

      dblclick...

      var element = sym.$("Rectangle").on("mouseover");

      var element = sym.$("Rectangle").on("mouseout");

       

      1 and 2 seem to work fine, but double-clicking does nothing. I know this must seem basic but since unbinding the mouseout on click seems to work fine, I can't work out why I can't rebind on double click.

       

      Any assistance gratefully received. Using Edge Animate CC (but will probably get the latest version in a few days if that makes a difference).

        • 1. Re: Bind / Unbind help please
          Allison@HavasLynx Level 1

          Hiya,

          I've been doing a similar thing but in a slightly different way,

          I put all the code for the buttons on compositionReady - I have a bunch of buttons which are all the same symbol but with different instance names, so symbol is called 'step-btn' and they are on the stage called step-btn1, step-btn2, etc

          I change the colour by adding a class, and then add an if statement to check what class it has for rollover etc.

           

          If you add and remove classes it's easier to debug in the browser - I use Google Chrome and use the developer tools to 'inspect element' then when you click on something you can see it applying or removing the class in real time.

          I'm hoping that eventually I will be able to move the .css into a separate file in order to streamline the code but I am still developing and testing things so it's all in the EA file for now.

           

          Here's my example:

           

          sym.getComposition().getSymbols("step-btn").forEach(function(item){

            item.getSymbolElement() //look for buttons called "step-btn" and apply this code to each one

           

            .bind("mouseenter", function(){ //apply some different colours for the rollover

            item.$("Text").css("color","rgba(0,0,0,0.70)");

            item.$("step-btn-border").css("background-color","#d5dfe4");

            })

           

          //We need to check if the button was NOT clicked, if this is the case, perform normal mouseout by applying the colour change .css

            .bind("mouseleave", function(){

            if (!sym.$(this).hasClass("btn-active")) { //Checking to see if it WASN'T clicked i.e. does NOT have btn-active class

             item.$("Text").css("color","#d5dfe4"); //This line and one below apply CSS for mouseout

             item.$("step-btn-border").css("background-color","rgba(0,0,0,0.00)");

            }

          //If it DOES have the 'btn-active' class the other colours will have been applied and we need to keep the btn-active colours

            })

           

            .bind("click", function(){    // if the button is clicked...

            sym.$(this).addClass("btn-active");  // add a class called "btn-active"

            item.$("Text").css("color","rgba(0,0,0,0.70)"); //This line and one below apply new colors

            item.$("step-btn-border").css("background-color","#d5dfe4");

            })

            });

           

          I hope that helps - you could add a forth .bind function for double click and apply a different css for that. You are just checking against the class of the button. No need to add a class on the symbol or anything, just do it all in the code

          Cheers

          A

          • 2. Re: Bind / Unbind help please
            MilkStudio Level 1

            Hi Allison and thank you for your reply, it's really appreciated.

             

            Your code looks logical but I'm missing something as I can't make this work in EA. Do you have a zipped example I could take a look at?

             

            Thanks again for your help

             

            EDIT: Here's my very basic example zipped up; if you could take a look and apply the correct code to it for double-click I'd have a much better chance of understanding it - thanks again!

             

            Dropbox - unbind.zip

            • 3. Re: Bind / Unbind help please
              Allison@HavasLynx Level 1

              Hiya,

              Sorry for the delay - bit busy at the moment (just started my work day) but I will try and have a look at this for you later on.

               

              • 4. Re: Bind / Unbind help please
                Allison@HavasLynx Level 1

                Hey - which version of Animate are you using by the way?

                • 5. Re: Bind / Unbind help please
                  MilkStudio Level 1

                  Hi Alison, I'm using Edge Animate CC v 2.0.0.250.24837 - thanks

                  • 6. Re: Bind / Unbind help please
                    Allison@HavasLynx Level 1

                    Hi there, MilkStudio

                    Sorry for taking so long.

                    I think I have a solution for you. In work I am using v2014.1.1 and at home I have v2014.0 - the version number you posted is not one I recognise so I hope you can open my files! These earlier versions seem to be a little different in how they handle code.

                     

                    Here is a link: Dropbox - unbind2.zip

                     

                    I imported jQuery (jquery-2.0.3.min.js) into the Scripts panel, and I think it will be bundled with the files, but if you have a really early version of Edge you may need to use the yepnope thingy to import jquery - I don't understand that very well because I haven't used early versions of Edge!

                     

                    I did it a slightly different way to the one I described earlier. Instead of using classes I used a variable - this way the code is far less cluttered and you will see what is happening better. I also used the built in functions for the rectangle button, rather than putting everything in compositionReady - when I tried to use the code from earlier (which I had working in a newer version of EA, in work) it wouldn't work! Maybe something I did wrong but I decided to strip everything down instead.

                     

                    We have a variable: "clicked" and 2 functions called "ToRed" and "ToBlue" in compositionReady. We change the variable to 1 when the rectangle is clicked and back to 0 when it is double clicked.

                    The mouseout function simply checks what the value of the variable is to see whether it should change our Ellipse back to red or not.

                     

                    I hope it all makes sense - I'm still getting my head around this stuff myself - I'm a Flash Dev who is currently trying to learn Javascript so, there may be a more elegant solution to this, but this is how I would do it at my stage of development.

                     

                    I have put lots of comments in the file to make it clearer.

                    Cheers

                    A

                    • 7. Re: Bind / Unbind help please
                      MilkStudio Level 1

                      Allison - thank you so much! This is exactly what I wanted to do and (bonus) I even understood your code so have been able to apply it across a range of different scenarios.

                      • 8. Re: Bind / Unbind help please
                        Allison@HavasLynx Level 1

                        You're welcome!