4 Replies Latest reply on Mar 7, 2013 5:25 PM by TimJaramillo

    how to make triggered photo animation?

    mermaidnyc Level 1

      hi everyone!

       

      i recreating a website in edge that i originally created in flash.

       

      http://thepearlnj.com/

       

      i need help with how to make the 3 radial buttons on the left under the Pearl logo (on the home page) work in edge. I would like to keep the way they animate/slide from photo to photo

       

      i would really appreciate it if someone could set up a simple edge document with 3 boxes that represent photos & 3 buttons & upload it. That way i can look at the code in the buttons & timeline & figure out how it works.

       

      or if it's really simple, please let me know which code i need to use on the buttons to create the same effect. (I think the 3 photos need to be set up as a symbol, with triggers on the timeline)

       

      thank you all in advance for your help!

       

      -sharon

        • 1. Re: how to make triggered photo animation?
          mermaidnyc Level 1

          hi everyone,

           

          joel_pau figured out how to make my "scroll down to anchor" work!!!

           

          below is a link to the file he sent me

          https://www.yousendit.com/download/UVJqaXRNNDIzS3JOUjhUQw

           

          have a fantastic day!

           

          -sharon

          • 2. Re: how to make triggered photo animation?
            TimJaramillo Level 4

            Hi Sharon, here is another example for you and anyone else looking for a solution:

             

            Example:

            www.timjaramillo.com/code/edge/gallery_slider_2/index_6.html

             

            Source:

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

             

            Code on button 1 click event:

            sym.getComposition().getStage().onBtnClick(1);

             

            Code on button 2 click event:

            sym.getComposition().getStage().onBtnClick(2);

             

            Code on button 3 click event:

            sym.getComposition().getStage().onBtnClick(3);

             

             

             

            Code on Stage.compositionReady:

             

            // vars ------------------------------------

             

            var myDivHeight = 400;

            var myDiv = sym.$("Rectangle");// holds all 3 images in a row

             

             

             

            // funcs ------------------------------------

             

            sym.onBtnClick = function(id){

                      var animateToPos = (id-1) * myDivHeight;

                      myDiv.animate({scrollTop:animateToPos},"slow");

            }

            • 3. Re: how to make triggered photo animation?
              GusDoeMatik™ Level 1

              Hey TimJaramillo, I like the code it looks easy to implement (i'll be testing it out in a few), thanks... But one question what if I had variable heights instead of a fix one (400) how would that work?

              • 4. Re: how to make triggered photo animation?
                TimJaramillo Level 4

                Hey Gus, if each image in the slide is different height, you can create an array to store all the slide positions that you want to animate to, corresponding to each button click. Then target the positions in that array on btn click, like this:

                 

                Code on Stage.compositionReady:

                 

                // vars ------------------------------------

                 

                var arrayPositions = [0, 400, 500, 600];

                var myDiv = sym.$("Rectangle");// holds all 3 images in a row

                 

                 

                 

                // funcs ------------------------------------

                 

                sym.onBtnClick = function(id){

                          var animateToPos = arrayPositions[id-1];

                          myDiv.animate({scrollTop:animateToPos},"slow");

                }