13 Replies Latest reply on Nov 6, 2012 11:59 AM by resdesign

    Simple Soldier Rollover?

    mychicora

      Can someone show me how to create the rollover below for both desktop (and tablets) in Edge Animate 1.0?  It seems like a simple javascript rollover (but I'm not a coder).

       

      For example, when the user rolls over a soldier's b/w picture with the mouse (or selects it on an iPad), I want a separate color PNG-24 graphic (in green) to appear, along with the soldier's name and rank. When the mouse rolls off (or another soldier is selected on a tablet), the green graphic and description would then disappear.  Thanks for any help.

       

      soldierparty.jpg

        • 1. Re: Simple Soldier Rollover?
          resdesign Adobe Community Professional & MVP

          Hi there,

           

          Do you have tranparent png files for the green overlay? One of the problem is that your images will be squares or rectangles and will overlap each others. You will have to deal with that.

          Otherwise the code should be something similar to:

           

          sym.$("overlay1").mouseover(function(){

           

               sym.$("overlay1").show();

          };

           

          sym.$("overlay1").mouseout(function(){

           

               sym.$("overlay1").hide();

          };

           

          sym.$("overlay2").mouseover(function(){

           

               sym.$("overlay2").show();

          };

           

          sym.$("overlay2").mouseout(function(){

           

               sym.$("overlay2").hide();

          };

          1 person found this helpful
          • 2. Re: Simple Soldier Rollover?
            mychicora Level 1

            Thanks, resdesign, for the reply.

             

            I guess it's clear I'm going to have to learn more javascript syntax before I can even do this simple task in Edge. I understand perfectly the logic of what you've shown, but when I copy this code to the code window (Command-E) in Edge, and replace the variable names with my png names, I get a syntax error, "Unexpected token at line 18." So I guess I'm not putting it in the proper location or using the complete syntax.

             

            I do understand that my png files are rectangles, though, which may overlap. Is there no way to "mask" out only a portion of the png file, a la Photoshop, to avoid this?

             

            Thanks.

            • 3. Re: Simple Soldier Rollover?
              TimJaramillo Level 4

              Hi mychicora,

               

              There is a closing parentheses ) missing from each chunk of code. Try the code below: (be sure to put the code on the Stage.compositionReady event).

               

              sym.$("overlay1").mouseover(function(){

                   sym.$("overlay1").show();

              });

               

              sym.$("overlay1").mouseout(function(){

                   sym.$("overlay1").hide();

              });

               

              sym.$("overlay2").mouseover(function(){

                   sym.$("overlay2").show();

              });

               

              sym.$("overlay2").mouseout(function(){

                    sym.$("overlay2").hide();

              });

              1 person found this helpful
              • 4. Re: Simple Soldier Rollover?
                mychicora Level 1

                Thanks, TimJaramillo, for catching the omision and the very specific instructions on where to place the code. The code must be clean because there are no error messages shown now.

                 

                Unfortunately, the animation still doesn't work, and I can't tell why. I'm just not famailiar enough with JavaScript to diagnose the problem, so I won't waste everyone's time trying to figure out why.

                 

                I've marked your response as "helpful" though because I appreciate the effort.

                 

                -mychicora

                • 5. Re: Simple Soldier Rollover?
                  TimJaramillo Level 4

                  How about I post a working version and you mark my response as "Correct"?

                   

                  Rollover any of the 3 fellows at front bottom to see a grey box rollOver (replace with your image). I replaced show/hide with fadeIn/fadeOut methods.

                   

                  Example:

                  http://www.timjaramillo.com/code/edge/rollover/test.html

                   

                  Source:

                  www.timjaramillo.com/code/edge/_source/rollover.zip

                  • 6. Re: Simple Soldier Rollover?
                    resdesign Adobe Community Professional & MVP

                    Oops, sorry about the mistake - I typed too fast!

                    • 7. Re: Simple Soldier Rollover?
                      mychicora Level 1

                      Thanks, timjaramillo, that's exactly what I'm looking for, even including the gradual fade in/out!

                       

                      I marked your response as "Correct."

                      • 8. Re: Simple Soldier Rollover?
                        TimJaramillo Level 4

                        Cool, no problem mychicora!

                         

                        For posterity, here is the code on Stage.compositionReady:

                         

                         

                         

                        /* note:

                        - we have separate objects for hit and rollover graphic for each rollover. This is because the fadeOut method hides the object, so it will no longer recieve mouse events.

                        - on root Stage we have shapes called "hit1", "hit2", "hit3", which are hit areas for the rollovers

                        - on root Stage we have rollover objects called "overlay1", "overlay2", "overlay3", which are the actual rollover graphics that we fade in and out

                        */

                         

                        // first hide all rollover graphics

                        sym.$("overlay1").hide();

                        sym.$("overlay2").hide();

                        sym.$("overlay3").hide();

                         

                         

                        // rollover 1

                         

                        sym.$("hit1").mouseover(function(){

                             sym.$("overlay1").fadeIn(1000);

                        });

                         

                        sym.$("hit1").mouseout(function(){

                             sym.$("overlay1").fadeOut(500);

                        });

                         

                         

                        // rollover 2

                         

                        sym.$("hit2").mouseover(function(){

                             sym.$("overlay2").fadeIn(1000);

                        });

                         

                        sym.$("hit2").mouseout(function(){

                             sym.$("overlay2").fadeOut(500);

                        });

                         

                         

                        // rollover 3

                         

                        sym.$("hit3").mouseover(function(){

                             sym.$("overlay3").fadeIn(1000);

                        });

                         

                        sym.$("hit3").mouseout(function(){

                             sym.$("overlay3").fadeOut(500);

                        });

                        • 9. Re: Simple Soldier Rollover?
                          heathrowe Most Valuable Participant

                          Event chaining would be an ehencement to the above over/out fuction calls.

                           

                          Example, Rollover 1, instead of making two separate calls to the same element....

                           

                                 sym.$("hit1").mouseover(function(){

                                 sym.$("overlay1").fadeIn(1000);

                                 });

                           

                                 sym.$("hit1").mouseout(function(){

                                 sym.$("overlay1").fadeOut(500);

                                 });

                           

                          Event Chain....

                           

                          sym.$("hit1").mouseover(function(){

                             sym.$("overlay1").fadeIn(1000);

                                    }).mouseout(function(){

                             sym.$("overlay1").fadeOut(500);

                          });

                           

                          Darrell

                          • 10. Re: Simple Soldier Rollover?
                            resdesign Adobe Community Professional & MVP

                            Great contribution guys!

                            • 11. Re: Simple Soldier Rollover?
                              TimJaramillo Level 4

                              Thanks for sharing Darrel!

                               

                              My only beef with event chaining is that, for me, readability goes out the window. Although, if you set up the tabs just right for each line, then it's still pretty clear what's going on.

                              • 12. Re: Simple Soldier Rollover?
                                heathrowe Most Valuable Participant

                                Indeed, Tim - formating is key for readibility, but it does cut down on calls and code.

                                 

                                I wish EA had the ability to chain query selectors, like this

                                    sym.$("overlay1, overlay2, overlay3").hide();

                                 

                                Jquery has this capability natively and its the one sorely missed feature in EA.

                                 

                                Darrell

                                • 13. Re: Simple Soldier Rollover?
                                  resdesign Adobe Community Professional & MVP

                                  Agreed! That would really make our life easier, woudn't it?