1 Reply Latest reply on May 22, 2013 11:42 AM by John Hall

    Loading symbols into reusable container

    John Hall Level 4

      Those who are active on the list today can watch me build my slide show program step by step ;-). So I have symbols loading into containers with the intent to fade between two containers. This all works fine for the first two slides:

       

            function playNext() {

              currentSlide++;

              var audioID = "slide" + currentSlide;

              playSound(audioID);

              var slideID = "slide_" + currentSlide;

              EC.info("current slide should be " + slideID)

              if (currentSlide % 2 == 0){

                sym.$("slideContainer1").css({opacity:0});

                mySlide = sym.createChildSymbol(slideID, "slideContainer1");

                sym.$("slideContainer1").animate({opacity:1}, 500);

                sym.$("slideContainer2").animate({opacity:0}, 500);

              }else{

                sym.$("slideContainer2").css({opacity:0});

                mySlide = sym.createChildSymbol(slideID, "slideContainer2");

                sym.$("slideContainer2").animate({opacity:1}, 500);

                sym.$("slideContainer1").animate({opacity:0}, 500);

              }

            }

       

          });

       

      Ah, but when I load slide 3 into the first container, it still comes up with the slide 1 content. I would at least have expected the slide 3 content to overlay the slide 1 content but it's solely the slide 1 content. Thinking as a Flash programmer, I figure that maybe I need to go in and destroy the children of the container before adding a new symbol to the container.

       

      Following the API guide, I was expecting to do something along the lines of

       

      //  var childSymbols = sym.$("slideContainer1").getChildSymbols();

                // for(var i=0; i<childSymbols.length; i++){

                //   childSymbols[i].deleteSymbol();

                // }

       

      then add the new material. However, var childSymbols = sym.$("slideContainer1").getChildSymbols();  results in a generic javascript error in the console. Even if I put the one line

       

      var childSymbols = sym.$("slideContainer1").getChildSymbols();

       

      in the compositionReady script, I get this in the console.

       

      Javascript error in event handler! Event Type = element

       

      A couple of questions:

       

      1. Is there a way to switch out the children of a symbol? I thought it would be straightforward but obviously I don't understand
      2. Do I need to worry about garbage collection in JavaScript like I would in Flash. Do I need to destroy child objects or set them to null before reuse of a container symbol
      3. Can I reuse a container symbol once it's been loaded programmatically once?

       

      Thanks so much

        • 1. Re: Loading symbols into reusable container
          John Hall Level 4

          OK, so with Tim's leads to another problem I figured it out. The content on the 3rd slide was loading fine but I had not unloaded what was previously in the container. By adding the  line

           

          sym.$("slideContainer1").children().remove();

           

          before adding the new content, it worked fine. For those who run into a similar issue in the future, here's code that's working for me. Some, obviously, is specific to my project but it could be helpful to others.

           

          function playNext() {

                  currentSlide++;

                  hideMenu();

                  resetMenuControls();

                  var audioID = "slide" + currentSlide;

                  playSound(audioID);

                  var slideID = "slide_" + currentSlide;

                  EC.info("current slide should be " + slideID)

                  if (currentSlide % 2 == 0) {

                    sym.$("slideContainer1").children().remove();

                    sym.$("slideContainer1").css({

                      opacity: 0

                    });

                    mySlide = sym.createChildSymbol(slideID, "slideContainer1");

                    sym.$("slideContainer1").animate({

                      opacity: 1

                    }, 500);

                    sym.$("slideContainer2").animate({

                      opacity: 0

                    }, 500);

                  } else {

                    sym.$("slideContainer2").children().remove();

                    sym.$("slideContainer2").css({

                      opacity: 0

                    });

                    mySlide = sym.createChildSymbol(slideID, "slideContainer2");

                    sym.$("slideContainer2").animate({

                      opacity: 1

                    }, 500);

                    sym.$("slideContainer1").animate({

                      opacity: 0

                    }, 500);

                  }

               

               

                }

               

              });