5 Replies Latest reply on Jun 18, 2014 6:38 AM by somnamblst

    Can't nest slideshow without breaking it

    somnamblst Level 1

      I just want to say that coming from Flash I find Edge Animate frustrating.

       

      I found this slideshow tutorial that uses the following code on Creation Complete on the stage

       

      http://designupdate.com/blog/2013/07/23/how-to-create-a-slideshow-in-edge-animate/comment- page-1/

       

      var imageCount = 1;

      var numOfPhotos = 7;

      sym.$("textTotal").html("of " + numOfPhotos);

       

      sym.showPhoto = function (photoDirection){

        imageCount = imageCount + photoDirection;

       

        //Beyond 22, change to 1

        if (imageCount > numOfPhotos){ imageCount = 1};

       

        //Less than 1, change to the very last photo

        if (imageCount < 1){ imageCount = numOfPhotos};

       

        //Change the text number to the current photo

        sym.$("textCount").html(imageCount);

       

           //Fade out the current photo

           sym.$('mainPhoto').fadeOut('slow', function() {

       

                //Set the attribute to the correct photo

                sym.$("mainPhoto").attr('src', 'images/photo_'+imageCount + '.jpg');

                sym.$("mainPhoto").load(function () {

       

                //Fade in the new photo

                sym.$('mainPhoto').fadeIn('slow');

                });

           });

      }

       

      For my purpose, I have to use a template that shows one of 3 different symbol sizes, based on a user's view port. Nothing I have tried, does not break the functionality of the arrow images swapping images. ThoughI am getting a cursor.

       

      I have tried the stage, inside one of the symbols, and converting it to a symbol, both on the stage and inside one of the symbols.

       

      The arrow buttons have this code

       

      sym.getComposition().getStage().showPhoto(-1);

       

      Any suggestions welcome.

        • 1. Re: Can't nest slideshow without breaking it
          jbowden Adobe Employee

          Hi there,

           

          First question: did you change the tag on your mainPhoto element from div to img? That's the only way you'd be able to change the source.

           

          somnamblst wrote:

           

          For my purpose, I have to use a template that shows one of 3 different symbol sizes, based on a user's view port. Nothing I have tried, does not break the functionality of the arrow images swapping images. ThoughI am getting a cursor.

           

           

          Not sure I fully understand this. Did you convert the mainPhoto element into a symbol? If so, you'll have to get the symbol on your creationComplete handler before you can address the element. If not, please provide more detail.

           

          Thanks,

          Joe

          • 2. Re: Can't nest slideshow without breaking it
            somnamblst Level 1

            Thanks Joe.

             

            mainPhoto is an img, I didn't need to change it.

             

            I did try making the slideshow (textTotal, textCount, back, next, mainPhoto layers into a symbol, placed both on the Stage and inside the Large_Symbol symbol.


            I have tried adding the code above, both above and below the creation complete code that shows one of three symbols based on viewport. I tried adding it as a play event. I tried adding it to the symbol Large_Symbol as Creation Complete and as a symbol on the Large_symbol timeline with the code added to the symbol and inside the slideshow symbols timeline..

             

            I tried pathing to the symbol like this on the forward next buttons

             

            sym.getComposition().getStage().getSymbol('Large_Symbol').getSymbol('imageFades').getimage .showPhoto(-1);

             

            and as

            sym.getComposition().getStage().getSymbol('imageFades').getimage.showPhoto(1);

             

            because I noticed when I edit imageFades it shows it as a child of Stage, even though I placed it on the Large_Symbol timeline.

             

            Is there no equivalent to load Movie in Animate?

            • 3. Re: Can't nest slideshow without breaking it
              somnamblst Level 1

              Found this in the API

               

              I was thinking I could put this in the Creation Complete code on the stage. My slideshow symbol is called imageFades

               

              sym.getComposition().getStage().getSymbol("Large_Symbol").getSymbol("imageFades").play();

               

              still no luck

               

              I wish I could just load the slide show as a separate Animate file

              • 4. Re: Can't nest slideshow without breaking it
                jbowden Adobe Employee

                Hi again,

                somnamblst wrote:

                 

                mainPhoto is an img, I didn't need to change it.

                 

                By default, when you import an image file into Animate or place one from the Library to the Stage, it is placed into a div container. Unless you specifically change the tag type from div to img (in the Properties panel), you won't be able to replace the src through code.

                 

                hth,

                Joe

                1 person found this helpful
                • 5. Re: Can't nest slideshow without breaking it
                  somnamblst Level 1

                  Thanks for checking back.

                   

                  I guess I am confused by that. mainPhoto, which is where the subsequent images appear is not a div, it is an image. It was not something I could change to see if that would work. It is photo_1, the rest of the photos are loaded like an array by name. photo_2, photo_3, etc.

                   

                  In addition to MainPhoto, there are the next and previous arrows and dynamic text fields, for textCount and textTotal. back and next are divs, and back and next are what changes which photo you see

                   

                  //Fade out the current photo

                       sym.$('mainPhoto').fadeOut('slow', function() {

                   

                            //Set the attribute to the correct photo

                            sym.$("mainPhoto").attr('src', 'images/photo_'+imageCount + '.jpg');

                            sym.$("mainPhoto").load(function () {

                   

                            //Fade in the new photo

                            sym.$('mainPhoto').fadeIn('slow');

                   

                  I currently have this on next

                   

                  sym.getComposition().getStage().getSymbol('imageFades').getimage.showPhoto(1);

                   

                  I added .getSymbol('imageFades').

                   

                  Because

                   

                  sym.getComposition().getStage().getimage.showPhoto(1); did not work

                   

                  nor did

                   

                  sym.getComposition().getStage() getSymbol(Large_Symbol).getSymbol('imageFades').getimage.showPhoto(1);

                   

                  My Flash experience makes me say where is _root.