4 Replies Latest reply on Jan 23, 2013 1:32 PM by ajguy711

    How can I play a symbol when it reaches a certain position?

    ajguy711

      I'm assuming there's some javascript code that can easily accomplish what I'm shooting for, but here's what I've got. I have an Animate page with several vertically stacked symbols extended below the main stage. As the user scrolls through the symbols, I would like to have each one play when its vertical position reaches 0. Is there any way to accomplish this within Edge Animate?

        • 1. Re: How can I play a symbol when it reaches a certain position?
          joel_pau Level 5

          Hi,

           

          Well, i am trying to understand your post (what's your goal).

          So, 2 ideas: one using mousemove, another without mousemove.

           

          It's very easy using Edge Animate UI.

          Edge provides you tools: mousemove, e.pageX, epageY.

          Here is one example (a first idea).

          1) We add one mousemove event using Edge Animate UI: doubleclick on mousemove.

          mouseMove.jpg

          Well, i chose Stage but you can choose another object on Stage.

           

           

          2) We add epageX and epageY using Edge Animate UI: click on e.

          mouseMovePageXY.jpg

          Whenever you see an e orange, epageX and epageY are available.

          If i want to know and see mouse position:

          1) I add a text box on Stage,

          2) and on Stage.mousemove i write this code: sym.$("Text").html("x="+e.pageX+" and y="+e.pageY);

          ==> demo file.

           

          A second idea: mouseenter and mouseleave. I have added in the attached file.

          1 person found this helpful
          • 2. Re: How can I play a symbol when it reaches a certain position?
            ajguy711 Level 1

            Thank you for the reply! Unfortunately, this isn't quite what I was going for (but could prove useful down the road).

             

            Say for example I have a symbol positioned at x=80, y=1000. It is set to not autoplay an animation within the symbol. As the user scrolls down the screen, and the symbol begins to move upwards, I want the symbol's animation to play when it reaches a position of y=200. Basically, the symbol's animation would play as it nears the top of the screen while the user scrolls. This is would work on a PC or touch device. Hopefully that clears up what I'm going for.

            • 3. Re: How can I play a symbol when it reaches a certain position?
              jbowden Adobe Employee

              Hi there,

               

              There is a scroll event for the Stage...you may be able to get what you want using e.pageY within the Stage scroll event.

               

              hth,

              Joe

              1 person found this helpful
              • 4. Re: How can I play a symbol when it reaches a certain position?
                ajguy711 Level 1

                I have found the asnwer at the following discussion: http://forums.adobe.com/message/4909098#4909098

                 

                I've done some modification to the code to allow for multiple symbols to fire. Here's what I've got.

                 

                sym.setVariable("symbolPlayed2", false);

                sym.setVariable("symbolPlayed3", false);

                sym.setVariable("symbolPlayed4", false);

                sym.setVariable("symbolPlayed5", false);

                sym.setVariable("symbolPlayed6", false);

                sym.setVariable("symbolPlayed7", false);

                 

                 

                var mySymbolObject2 = sym.getSymbol("Part2");

                var mySymbolObject3 = sym.getSymbol("Part3");

                var mySymbolObject4 = sym.getSymbol("Part4");

                var mySymbolObject5 = sym.getSymbol("Part5");

                var mySymbolObject6 = sym.getSymbol("Part6");

                var mySymbolObject7 = sym.getSymbol("Part7");

                 

                 

                $(window).scroll(function() {

                    var y_scroll_pos = window.pageYOffset;

                    var scroll_pos2 = 1;

                    var scroll_pos3 = 769;

                    var scroll_pos4 = 1537;

                    var scroll_pos5 = 2305;

                    var scroll_pos6 = 3073;

                    var scroll_pos7 = 3841;          

                 

                 

                 

                 

                       if(y_scroll_pos > scroll_pos2) {

                var symbolPlayed2 = sym.getVariable("symbolPlayed2");

                if (!symbolPlayed2) {

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

                    mySymbolObject2.play(0);

                 

                 

                    sym.setVariable("symbolPlayed2", true);

                }

                }

                       if(y_scroll_pos > scroll_pos3) {

                var symbolPlayed3 = sym.getVariable("symbolPlayed3");

                if (!symbolPlayed3) {

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

                    mySymbolObject3.play(0);

                 

                 

                    sym.setVariable("symbolPlayed3", true);

                }

                }

                       if(y_scroll_pos > scroll_pos4) {

                var symbolPlayed4 = sym.getVariable("symbolPlayed4");

                if (!symbolPlayed4) {

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

                    mySymbolObject4.play(0);

                 

                 

                    sym.setVariable("symbolPlayed4", true);

                }

                }

                       if(y_scroll_pos > scroll_pos5) {

                var symbolPlayed5 = sym.getVariable("symbolPlayed5");

                if (!symbolPlayed5) {

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

                    mySymbolObject5.play(0);

                 

                 

                    sym.setVariable("symbolPlayed5", true);

                }

                }

                       if(y_scroll_pos > scroll_pos6) {

                var symbolPlayed6 = sym.getVariable("symbolPlayed6");

                if (!symbolPlayed6) {

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

                    mySymbolObject6.play(0);

                 

                 

                    sym.setVariable("symbolPlayed6", true);

                }

                }

                       if(y_scroll_pos > scroll_pos7) {

                var symbolPlayed7 = sym.getVariable("symbolPlayed7");

                if (!symbolPlayed7) {

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

                    mySymbolObject7.play(0);

                 

                 

                    sym.setVariable("symbolPlayed7", true);

                }

                }

                 

                 

                });

                 

                This all goes in document.compositionReady. Hopefully others find this helpful.