3 Replies Latest reply on May 22, 2013 1:53 PM by TimJaramillo

    Creating Symbol Instances containing a dynamically set image - Help Needed

    Chassy Level 1

      I'm working on a site prototype that has many rollover images in the navigation. Each image is unique, but the rollover and rollout code is identical. I'm trying to create a single symbol that can be used for all of the rollovers, but need some help figuring this out, as it will significantly speed up my work.

      I think the pseudocode would work like this:

      1. Create a symbol that contains a default rollover image.
      2. In the symbol, add the rollover and rollout code. This adjusts transparency from 0 -> 100 and back.
      3. Create instances of the symbol over each item in the nav.
      4. For each instance, set a variable containing the name of the rollover image to be used.
      5. In that symbol instance, get the variable value.
      6. In that symbol instance, use the image name in the variable to replace the default image.
      Question: How do I make step 4-6 work? I have 1-3 working smoothly.P.S. My last dev work was waaaaay back with Director, PHP and ColdFusion. I still get basic principles such as using functions, objects, instances, inheritance etc, but the language has changed. And I have very very little experience with the DOM.
      Appendix: How I'm Doing This Manually
      1. There's a background image of the nav showing all of the unselected states
      2. Each item in the nav has a corresponding rollover image, in a series of elements layered on top of nav element. Each rollover has opacity initially set to 0%.
      3. Each image element has rollover, rollout and click triggers. Rollover and rollout triggers are identical for each. There's also a little more code with rollout that provides a quick fade. This means lots of copying identical code. I hate to think about having to change any part of that code.

      Thanks! Chassy

        • 1. Re: Creating Symbol Instances containing a dynamically set image - Help Needed
          TimJaramillo Level 4

          Hi there,

           

          Perhaps a more simple solution would be to set up 1 global function that handles over/out states for all your buttons. On mouseenter/mouseleave of each button you would call this function to fade in/out your rollover graphic.

           

          Example:

          http://www.timjaramillo.com/code/edge/rollover4_multiple_btns

           

          Source:

          http://www.timjaramillo.com/code/edge/_source/rollover4_multiple_btns.zip

           

          Code on Stage.compositionReady (note there are btn symbols called btn_1, btn_2, btn_3, and all have an over state called "over" in them):

           

           

           

          var array_btns = ["btn_1", "btn_2", "btn_3"];// array to hold all your btns

           

            

          function setup_btns()

          {

                    // iterate through array_btns, add "mouseenter" and "mouseleave" for all

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

                              // hide "over" state initially

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

           

           

                              sym.$( array_btns[i] ).mouseenter({obj:array_btns[i]}, function(e){

                                        var btn = e.data.obj;

                                        sym.getSymbol(btn).$("over").fadeIn(500);// show "over" graphic

                              });

           

           

                              sym.$( array_btns[i] ).mouseleave({obj:array_btns[i]}, function(e){

                                        var btn = e.data.obj;

                                        sym.getSymbol(btn).$("over").fadeOut(200);// hide "over" graphic

                              });

           

           

                    }

          }

           

           

          setup_btns();

          • 2. Re: Creating Symbol Instances containing a dynamically set image - Help Needed
            Chassy Level 1

            Big thanks Tim(?)!  You've saved me many hours on this project.  I'm still learning most of the jQuery / javascript behind Edge.  Would you mind assessing whether my interpretation of the loop contents is accurate?  This is where my understanding of the code is is most limited:

             

            • sym.$( array_btns[i] ) - accesses the jQuery object associated with the Edge element.
            • mouseenter(....), - the contents define code to be executed during mouseover.
            • {obj:array_btns[i]} - reference to the element within the jQuery object represented by the Edge symbol
            • function(e) {...} - function to execute on the given event in the given object/symbol.  The role of the parameter "e" is something I'm not clear on.  From the flow of the code, it seems to represent Edge symbol containing the element that will be affected by the code.
            • var btn = e.data.obj - sets up a variable to reference the Edge symbol.  I think this is the same symbol as in number 1 above.
            • sym.getSymbol(btn).$("over").fadeIn(500) - executes the jquery code for fade-in for when the jQuery "over" event is triggered.

             

            Also, I'm about to start testing to see if this works in nested symbols.   I assume that in compositionReady trigger for each symbol, I can create an array_btns[] and then call sym.getComposition().setup_btns() ?

            • 3. Re: Creating Symbol Instances containing a dynamically set image - Help Needed
              TimJaramillo Level 4

              Yep, it looks like you understand the code very well!

               

              Regarding your Q:

              function(e) {...} - function to execute on the given event in the given object/symbol.  The role of the parameter "e" is something I'm not clear on.  From the flow of the code, it seems to represent Edge symbol containing the element that will be affected by the code.

               

              "e" is the "eventObject", so it actually gives you access to the object that triggered the event. Ideally, we would be able to leverage that event to fade in/out the over state of the button, but it was giving me some grief, so I opted for the quick solution of leveraging the "eventData" param, where I passed in the button like this: {obj:array_btns[i]}

               

              The jQuery API docs explain it a bit more: http://api.jquery.com/mouseenter/

               

              Regarding this Q:

              Also, I'm about to start testing to see if this works in nested symbols.   I assume that in compositionReady trigger for each symbol, I can create an array_btns[] and then call sym.getComposition().setup_btns() ?

               

              Are you referring to dynamic symbols? Or just nested symbols? If it's just nested symbols, you can set everything up from Stage.compositionReady, same as in my example.

               

              Btw, can you mark my answer from 5/20 as "correct", so other users will be able to find the correct answer easier?

              1 person found this helpful