9 Replies Latest reply on May 19, 2009 9:20 AM by aljCharlie

    How to slide texts off stage?

    aljCharlie Level 1

      I have a slide show. I followed this tutorial.However, for the description texts, I want to slide from the left to the middel of the stage at the bottom and stay there for the length of the image being displayed and then slide from the middle to off the stage as soon as the current image dissolved to the next image. Here's my code that I have:

       

      slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);

       

      The above code slide the texts from left to the middle but as soon as the next image appears, the texts just dissappear and that's not I want. I want to slide the texts of stage.

       

      Any suggestion is much appreciated.

        • 1. Re: How to slide texts off stage?
          Ned Murphy Adobe Community Professional & MVP

          Are the image and the text tied together such that the image disappearing causes it to disappear as well?  What causes the text to disappear?  You should be able to tween the text back the way it came, but first you need to understand why it disappears.

          • 2. Re: How to slide texts off stage?
            aljCharlie Level 1

            NedWebs wrote:

             

            Are the image and the text tied together such that the image disappearing causes it to disappear as well?  What causes the text to disappear?  You should be able to tween the text back the way it came, but first you need to understand why it disappears.

            Thanks for the response. Attched is my AS 3.0 script for running this slide show with texts going from left to middle and finally off the stage. The image and texts are linked by the Timer.

            • 3. Re: How to slide texts off stage?
              aljCharlie Level 1

              Any other suggestion?

               

              Why is m attachment says "QUEUED"? Should it be ready for others to download?

              • 4. Re: How to slide texts off stage?
                Ned Murphy Adobe Community Professional & MVP

                The queued bit is due to what is likely a flawed forum management system.

                 

                You haven't responded to my initial questions, so I can't offer other suggestions as yet.  You can paste your code here, but you should look thru your file to see if you can determine what is causing things to disappear.

                • 5. Re: How to slide texts off stage?
                  aljCharlie Level 1

                  NedWebs wrote:

                   

                  The queued bit is due to what is likely a flawed forum management system.

                   

                  You haven't responded to my initial questions, so I can't offer other suggestions as yet.  You can paste your code here, but you should look thru your file to see if you can determine what is causing things to disappear.

                  I thought I answered it in my second post. As far as I know, the image and texts are tied/link by the Timer. If the 5 seconds is up then both the image and texts will disappear or go off the stage. Isn't that answer to your question?

                   

                  Here are my codes since my attachment does not work.

                   

                  // import tweener
                  import caurina.transitions.Tweener;
                  import fl.transitions.Tween;
                  import fl.transitions.easing.*;
                  
                  //change scale on an image
                  var fadeTween:Tween;
                  //To slide in on X axis
                  var slideXTween:Tween;
                  //To slide in on Y axis
                  var slideYTween:Tween;
                  //To fade IN
                  var alphaTween:Tween;
                  //To get bigger on its X axis
                  var scaleXTween:Tween;
                  //To get bigger on its Y axis
                  var scaleYTween:Tween;
                  
                  //var fadeTween:Tween;
                  //description place holder
                  var strDescrp:String;
                  //source place holder
                  var strSource:String;
                  
                  //x poistion
                  var posX:Number;
                  //y position
                  var posY:Number;
                  //degree rotation
                  var degreeRot:Number;
                  //position x slide from
                  var postXFrom:Number;
                  //position x slide to
                  var postXTo:Number;
                  //position x slide out
                  var postXOut:Number;
                  
                  // delay between slides
                  //const TIMER_DELAY:int = 5000;
                  var TIMER_DELAY:int = 5000;
                  // fade time between slides
                  const FADE_TIME:int = 3;
                  
                  // reference to the current slider container
                  var currentContainer:Sprite;
                  // index of the current slide
                  var intCurrentSlide:int = -1;
                  // total slides
                  var intSlideCount:int;
                  // timer for switching slides
                  var slideTimer:Timer;
                  //timer for sliding texts off stage
                  var slideTextTimer:Timer;
                  // slides holder
                  var sprContainer1:Sprite;
                  var sprContainer2:Sprite;
                  
                  // slides loader
                  var slideLoader:Loader;
                  
                  // url to slideshow xml
                  var strXMLPath:String = "lstHouse.xml";
                  // slideshow xml loader
                  var xmlLoader:URLLoader;
                  // slideshow xml
                  var xmlSlideshow:XML;
                  
                  var txtField:TextField = new TextField();
                  var txtFieldPrev:TextField =  new TextField();
                  var formatText:TextFormat = new TextFormat();
                  
                  //start of sound section is for sound
                  /*var soundReq:URLRequest = new URLRequest("audioFiles/Alma Mater plus roc.mp3");
                  var sound:Sound = new Sound();
                  sound.load(soundReq);
                  sound.addEventListener(Event.COMPLETE, onComplete);*/
                  //end of sound section
                  
                  /*function onComplete(event:Event):void
                  {
                      sound.play();
                  }*/
                  
                  function init():void
                  {
                      // create new urlloader for xml file
                      xmlLoader = new URLLoader();
                      // add listener for complete event
                      xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
                      // load xml file
                      xmlLoader.load(new URLRequest(strXMLPath));
                      
                      // create new timer with delay from constant
                      slideTimer = new Timer(TIMER_DELAY);
                      //create new timer with delay from constant
                      slideTextTimer = new Timer(TIMER_DELAY);
                      // add event listener for timer event
                      slideTimer.addEventListener(TimerEvent.TIMER, switchSlide);
                      //add event listener for slide texts of stage timer event
                      slideTextTimer.addEventListener(TimerEvent.TIMER, slideTextsOff);
                      
                      // create 2 container sprite which will hold the slides and
                      // add them to the masked movieclip
                      sprContainer1 = new Sprite();
                      sprContainer2 = new Sprite();    
                      mcSlideHolder.addChild(sprContainer1);
                      mcSlideHolder.addChild(sprContainer2);
                      
                      // keep a reference of the container which is currently
                      // in the front
                      currentContainer = sprContainer2;
                  }
                      
                  //function onXMLLoadComplete(e:Event):void
                  function onXMLLoadComplete(event:Event):void
                      {
                      // create new xml with the received data
                      xmlSlideshow = new XML(event.target.data);
                      // get total slide count
                      intSlideCount = xmlSlideshow..image.length();
                      // switch the first slide without a delay
                      switchSlide(null);
                      }
                  
                  function fadeSlideIn(e:Event):void {
                      if (currentContainer.numChildren>0)
                      {
                          currentContainer.removeChildAt(0);
                      }
                      // add loaded slide from slide loader to the
                      // current container
                      currentContainer.addChild(slideLoader.content);
                      // clear preloader text
                      //mcInfo.lbl_loading.text = "";
                      // fade the current container in and start the slide timer
                      // when the tween is finished
                      //Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function() { slideTimer.start(); }});
                      
                      strSource = xmlSlideshow.image[intCurrentSlide].@src;
                      switch(strSource)
                          {
                          case "images/Surroundings.jpg":
                              TIMER_DELAY = 5000;
                              //To slide in on X axis
                              slideXTween = new Tween(currentContainer, "x", Regular.easeOut, -855, 0, 1, true);
                              //To fade IN
                              alphaTween = new Tween(currentContainer, "alpha", Regular.easeOut, 0, 1, 2, true);
                              //To get bigger on its X axis
                              scaleXTween = new Tween(currentContainer, "scaleX", Regular.easeOut, 0, 1, 2, true);
                              //To get bigger on its Y axis
                              scaleYTween = new Tween(currentContainer, "scaleY", Regular.easeOut, 0, 1, 2, true);
                              // load the next slide
                              //slideLoader.load(new URLRequest(xmlSlideshow.image[intCurrentSlide].@src));
                              break;        
                          default:
                              TIMER_DELAY = 6000;
                              fadeTween = new Tween(currentContainer, "alpha", Regular.easeInOut, 0, 1, 2, true)
                              // load the next slide
                              //slideLoader.load(new URLRequest(xmlSlideshow.image[intCurrentSlide].@src));
                              break;
                          }
                  
                      slideTimer.start()
                      onComplete:function();
                  
                  }
                  
                  function switchSlide(e:Event):void
                  {
                      // check, if the timer is running (needed for the
                      // very first switch of the slide)
                      if(slideTimer.running)
                      {
                          slideTimer.stop();
                      }
                      // check if we have any slides left and increment
                      // current slide index
                      if(intCurrentSlide + 1 < intSlideCount)
                      {
                          intCurrentSlide++;
                      // if not, start slideshow from beginning
                      }
                      else
                      {
                          intCurrentSlide = 0;
                      // check which container is currently in the front and
                      // assign currentContainer to the one that's in the back with
                      // the old slide
                      }
                      
                      if(currentContainer == sprContainer2)
                      {
                          currentContainer = sprContainer1;
                      }
                      else
                      {
                          currentContainer = sprContainer2;
                      }
                      
                      
                      // hide the old slide
                      currentContainer.alpha = 0;
                      //currentContainer.x = 700;
                  
                      // bring the old slide to the front
                      mcSlideHolder.swapChildren(sprContainer2, sprContainer1);
                                  
                      strDescrp = xmlSlideshow.image[intCurrentSlide].@desc;
                      strSource = xmlSlideshow.image[intCurrentSlide].@src;
                      //txtField.border = true;
                      //txtField.x = 0;
                      //txtField.y = 600;
                      txtField.width = 375;
                      txtField.height = 40;    
                      //txtField.background = true;
                      //txtField.backgroundColor = 0xEE9A00;
                      //txtField.alpha = 20;
                      txtField.text = strDescrp;
                      formatText.align = TextFormatAlign.CENTER;
                      txtField.autoSize = TextFieldAutoSize.LEFT;    
                      
                      //switch for customizing the texts for each slide
                  
                      switch(strSource)
                          {
                          case "images/InspiringInnovation.jpg":
                              txtField.text = "";    
                              break;
                          case "images/Approaches.jpg":
                              //txtFieldPrev.text = txtField.text;
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;            
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                  
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              
                              //here is where I tried to slide the texts off the stage but it's not working. It seems to bypass the above slideXTween and go to this one.
                              TIMER_DELAY = 3000;
                              slideTextsOff(null);
                              break;
                          case "images/Faculty.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              //txtField.x = 90;
                              txtField.y = 320;
                  
                              //Slide previous texts out of stage first
                              //slideXTween = new Tween(txtFieldPrev, "x", Regular.easeOut, postXTo, postXOut, 1, true);
                              //trace(txtFieldPrev.text);
                              
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              
                              txtFieldPrev = txtField;
                              break;
                          case "images/Services.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Research.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Athletes.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Creativity.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Technologies.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Partnerships.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Adventures.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Discoveries.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Teammates.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Performances.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Impressions.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              break;
                          case "images/Surroundings.jpg":
                              formatText.color = 0xFFFFFF;
                              formatText.size = 24;
                              postXFrom = -150;
                              postXTo = (375/2) - txtField.width;
                              postXOut = 240;
                              //txtField.x = 90;
                              txtField.y = 320;
                              //To slide in on X axis
                              slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                              slideTimer.removeEventListener(TimerEvent.TIMER, switchSlide);
                              break;
                          
                          /*default:
                              formatText.color = 0x000080;
                              formatText.size = 18;
                              txtField.x = 0;
                              txtField.y = 300;
                              posX = 0;
                              posY = 0;
                              degreeRot = 0;
                              break;*/
                          }
                      // create a new loader for the slide
                      slideLoader = new Loader();
                  
                      // add event listener when slide is loaded
                      slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
                      // add event listener for the progress
                      //slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
                      
                      // load the next slide
                      slideLoader.load(new URLRequest(xmlSlideshow.image[intCurrentSlide].@src));
                      
                      addChild(txtField);
                      txtField.setTextFormat(formatText)
                  }
                  function slideTextsOff(e:Event):void
                  {    
                      slideXTween = new Tween(txtField, "x", Regular.easeOut, postXTo, postXOut, 1, true);
                  }
                  // init slideshow
                  init();
                  
                  • 6. Re: How to slide texts off stage?
                    Ned Murphy Adobe Community Professional & MVP

                    No, while you might have provided an answer, it didn't explain how they are linked.  By linked I meant if one is part of the other such that if one disappears everything that's a part of it also disappears.

                     

                    If you can narrow down your code to the parts relevant to what makes things change/disappear, and explain what those parts are doing, I might look further into this.  

                    • 7. Re: How to slide texts off stage?
                      aljCharlie Level 1

                      NedWebs wrote:

                       

                      No, while you might have provided an answer, it didn't explain how they are linked.  By linked I meant if one is part of the other such that if one disappears everything that's a part of it also disappears.

                       

                      If you can narrow down your code to the parts relevant to what makes things change/disappear, and explain what those parts are doing, I might look further into this.  

                       

                      I'm not sure what else I can explain more than look at the code I posted above. There is really no link between the image and texts besides the delay timer.

                       

                      slideTimer = new Timer(TIMER_DELAY);

                       


                      If at the end of 5 seconds, everything disappears.

                       

                      In my first post, I have this:

                       

                      slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);

                       

                      This is what makes things change/disappear. The function fadeSlideIn(e:Event):void function is what makes the image change/disappear or go to the next image.The code is exact to the one on my first post.

                      • 8. Re: How to slide texts off stage?
                        Ned Murphy Adobe Community Professional & MVP

                        Well, the code you narrowed it down to looks fine, so it must be some other code in the lengthy bit you pasted in.  Unfortunately, I'm not going thru all of what you pasted trying to trace things, tie them together, and reason them out.  Someone else may want to take that effort on, so be sure to check back and see.

                        • 9. Re: How to slide texts off stage?
                          aljCharlie Level 1

                          NedWebs wrote:

                           

                          Well, the code you narrowed it down to looks fine, so it must be some other code in the lengthy bit you pasted in.  Unfortunately, I'm not going thru all of what you pasted trying to trace things, tie them together, and reason them out.  Someone else may want to take that effort on, so be sure to check back and see.

                          Thanks but I already knew that there is nothing wrong with the code. My guess is it's the logic and flow of the codes and not symantec issues.

                           

                          //To slide in on X axis
                          slideXTween = new Tween(txtField, "x", Regular.easeOut, postXFrom, postXTo, 1, true);
                                      
                          //here is where I tried to slide the texts off the stage but it's not working. It seems to bypass the above slideXTween and go to this one.
                          TIMER_DELAY = 3000;
                          slideTextsOff(null);
                          

                          What I could not understand and why it's not working is this the part posted above. The first slideXTween should slide the texts from left to the middle and then after 3 seconds delay (which is the amount of time the image will still being display on the stage) execute the slideTextsOff(null) function to slide the texts from the middle to off stage. However, instead, when it comes through, the slideXTween showing above is ignored (or perhaps the 3 seconds timer delay is ingored) and jump right into the slideTextsOff(null) function. That's the main problem.