6 Replies Latest reply on Jun 16, 2015 12:16 PM by Allison@HavasLynx

    Confused about e.target - trying to write custom functions

    Allison@HavasLynx Level 1

      Hi,

      I am trying to tidy up my code and consolidate it into some functions.

      I have a composition with a main animation and 5 buttons which take you to different 'chapters' of the animation. You can also play the animation through from beginning to end and as the animation timeline plays, the numbered buttons change colour to indicate which chapter you are currently viewing.

      Screen Shot 2015-06-15 at 16.40.15.png

      Button ON state and ROLLOVER state: Rectangle border color is #BECDD7  Text color is #505A64

      Button OFF state ROLLOUT state: Rectangle border color is #505A64  Text color is #BECDD7

      Of course if a button happens to be ON when I rollover it  I do not want it to swap colour when I rollout.

      The button panel (named "controls") contains the 5 buttons. Each button is a symbol containing a div with a coloured border (named "Rectangle") and a text box containing a coloured number (named "Text").

      The button symbols are named ch-btn-1, ch-btn-2... and so on.

       

      I am trying to do 2 things:

      1. Have a reset function that resets the colours to the buttons' "off" state

       

      At the moment I have a huge reset function which seems unnecessary when all I want to do is swap the colours around. Here is the current function:

      ResetChBtns = function () {

        sym.getComposition().getStage().getSymbol("controls").getSymbol("ch-1-btn").$("Text").css ("color","#BECDD7");

        sym.getComposition().getStage().getSymbol("controls").getSymbol("ch-1-btn").$("Rectangle" ).css("background-color","#505A64");

        sym.getComposition().getStage().getSymbol("controls").getSymbol("ch-2-btn").$("Text").css ("color","#BECDD7");

        sym.getComposition().getStage().getSymbol("controls").getSymbol("ch-2-btn").$("Rectangle" ).css("background-color","#505A64");

        sym.getComposition().getStage().getSymbol("controls").getSymbol("ch-3-btn").$("Text").css ("color","#BECDD7");

        sym.getComposition().getStage().getSymbol("controls").getSymbol("ch-3-btn").$("Rectangle" ).css("background-color","#505A64");

        sym.getComposition().getStage().getSymbol("controls").getSymbol("ch-4-btn").$("Text").css ("color","#BECDD7");

        sym.getComposition().getStage().getSymbol("controls").getSymbol("ch-4-btn").$("Rectangle" ).css("background-color","#505A64");

        sym.getComposition().getStage().getSymbol("controls").getSymbol("ch-5-btn").$("Text").css ("color","#BECDD7");

        sym.getComposition().getStage().getSymbol("controls").getSymbol("ch-5-btn").$("Rectangle" ).css("background-color","#505A64");

        };

       

      2. Create a rollover/rollout function which is the same as the buttons' "on" state

      Again I want to create a nice neat function which I can put in the DocumentReady and not have to add onto each button, then just call the function from mouseenter or mouseleave.

      I thought the best thing would be to use e.target in the function so the changes to the css would be applied to the particular button that has been clicked but I can't get it to target the .css of the elements.


      I tried - for example:

      sym.stepRollover = function () {

             sym.( e.target ).$("Text").css("color","#505A64");

             sym.( e.target ).$("Rectangle").css("background-color","#BECDD7");

        }

      And also a variety of other ways to try and get e.target to work such as sym.getSymbol(e.target).getSymbolElement("Text") and other combinations - nothing worked. In the end I did console.log(e.target) and it just returns #document.

      So how do I get it to see "whicheverButtonHasBeenClicked" and then apply the css changes to that button?

      Do I need to put my functions somewhere else because I thought the best place to put them was in documentReady?

      Really hoping this is possible.

      Thanks in advance

       

        • 1. Re: Confused about e.target - trying to write custom functions
          joel_pau Level 5

          Hi,

           

          You can use: sym.getComposition().getSymbols("libraryName"). See: Adobe Edge Animate CC JavaScript API

          I assumed the 5 buttons comes from the library panel. They are instances of a symbol named: "buttons".

          So: sym.getComposition().getSymbols("buttons") returns the 5 buttons. It's an array with 5 items.

          You can browse this array using a loop to change css properties. For instance: forEach can be used to browse the buttons array.

          Do you need a demo file?

          • 2. Re: Confused about e.target - trying to write custom functions
            Allison@HavasLynx Level 1

            Hi Joel,

            Thanks so much for looking into this for me.

            I have been working on it today and rebuilt/renamed a few of the elements.

            Each button is a symbol "step-btn-1", "step-btn-2"... etc and each contains a div with a border called "step-btn" and a text box called "Text"

            They are individual symbols in the library, I tried using the same symbol but when I changed the numbers they all changed, so I figured I would need individual symbols.

            All the button symbols are grouped into a symbol called "button-panel" which only contains those buttons.

             

            I found the loop example in the Edge API.

            My idea was to write a function which changed the css on the "step-btn" and "Text" elements , so the loop could apply the function to each button in turn, but I am getting "Javascript error in event handler! Event Type = element" when trying to target these elements within the buttons.

            This is what I have:

             

            ResetStepBtns = function (e) {

              e.$("step-btn").css("background-color","#d5dfe4"); //change colour of the background to the button

              e.$("Text").css("color","rgba(0,0,0,0.70)"); //change colour of the text on the button

            };

              var childSymbols = sym.getSymbol("button-panel").getChildSymbols();

              for(var i=0; i<childSymbols.length; i++) // Return the number of direct children  

              ResetStepBtns(childSymbols[i]); // Reset all of the children

             

            When I call this function on documentReady it changes the colours of all the buttons to the values.

            So I can also target individual buttons for example to change just the 4th button from documentReady:

            ResetStepBtns(childSymbols[3]);


            Now I am trying to use my function to also create a rollover effect and a button "on" state for each individual button.

            But I am getting javascript error when I try to add the function in "mouseenter"

             

            I have tried:

            ResetStepBtns();

            sym.this.ResetStepBtns();

            e.target.ResetStepBtns();

             

            But i get "Javascript error in event handler! Event Type = element"

             

            Do you know how I can apply my ResetStepBtns function from the buttons themselves? I feel like it's almost there!

            Many thanks

            Allison

            • 4. Re: Confused about e.target - trying to write custom functions
              Allison@HavasLynx Level 1

              Thanks Joel!

              I've had a look at your demo - it's a far better way to create the buttons - I hadn't thought of dynamically adding the numbers!

              I am going to try and apply your code to get a rollover and button 'on' state as well

               

              • 6. Re: Confused about e.target - trying to write custom functions
                Allison@HavasLynx Level 1

                Ah that's perfect!

                I have never been sure how to use .bind - this is a great example of what I need.

                Thanks again!