4 Replies Latest reply on Feb 5, 2013 1:19 PM by Santos49

    Using left/right navigation by mousemove

    Santos49 Level 1

      Hi, Tim Jaramillo

      I have been puzzling with the parameters and set-up of the piece of code for a “slider” Left/Right you published here 3 days ago.


      “Creating a left/right navigation by mousemove”


        With the code available in Edge script panel, I try to address the main stage from de images in the “slider” symbol. When you click a color thumbnail in the “slider” you see the right picture on the stage. Is it possible for you to explain how to do that? I’m trying to emulate a flash site I did for a friend years ago.





        File_sliderLR_ Tim Jaramillo

        • 1. Re: Using left/right navigation by mousemove

          Here you are: http://www.deldesign.de/2013/Slider/sliderLR


          project files: http://deldesign.de/2013/Slider/slider.rar



          Stage compositionReady:


















          sym.getComposition().getStage().$("img_1").show();  and so on...

          • 2. Re: Using left/right navigation by mousemove
            Santos49 Level 1

            Thanks a lot!

            I will try it and let you know the result.

            • 3. Re: Using left/right navigation by mousemove
              Santos49 Level 1

              Hi, every one


              My attempt to reform an old Flash site with Edge is progressing.

              The slider moves left and right thanks to Tim Jaramillo, on click the images pop up on the right position thanks to deldesign with a little adaptation, instead of :


              1. sym.getComposition().getStage().$("img_1").show();


              I used:


              1. sym.getComposition().getStage().$("pic").css("background" , "url(images/img1.jpg) no-repeat");


              Published here before in other example by Schrene.


              Still two more questions:

              1. 1- I suppose option 2 is more efficient if you have like 20 or 30 images to load? I’m not sure about how Edge resolves that.
              2. 2- The cursor is active and influences de slider in the entire stage area.

              I like to limit the action to the slider height, hope someone can help me.


              This is the code I’m using in compositionready.


              var slidePosition;// holds position of image symbol

              var mouseMin = 0;// minimum mouse stage position

              var mouseMax = 800;// maximum mouse stage position

              var slideMin = 5;// minimum (left) position of slide

              var slideMax = -1055;// maximum (right) position of slide


              //var mouseMin_Y = 550;

              //var mouseMax_Y = 450;


              1. sym.moveSlide = function(mouseX){

              // need to add some logic here depending on how you want slide to move in relation to mouseX position

              slidePosition = _getTranslation(mouseMin, mouseMax, slideMin, slideMax, mouseX);




              _getTranslation = function(minInput, maxInput, minOutput, maxOutput, inputNumber) {

                          var translatedVal = ((inputNumber - minInput) * (maxOutput - minOutput)/(maxInput - minInput) ) + minOutput;

                 return translatedVal;




              And in mousemove.


              1. sym.getComposition().getStage().moveSlide( e.pageX );
              • 4. Re: Using left/right navigation by mousemove
                Santos49 Level 1

                Hi all.

                It is solved! Surprisingly simple. Just moved all de code from the stage image ready, mouse move to the slider mouse up, mouse move.