1 Reply Latest reply on Apr 14, 2012 9:31 AM by kglad

    Need advice on how to load text into a dynamic image scroller


      Hello all,


      I found a really useful tutorial online (http://active.tutsplus.com/tutorials/effects/create-a-responsive-xml-image-scroller-in-act ionscript-3-0/comment-page-1/), which showed how to make an Image scroller using AS3 and XML.  Well it works fine.. no complaints, but I was wondering if anyone could help me, as Im trying to add a scroll over effect on each thumbnail to display the "Title" text thats included within the XML file.  Its probably something very simple, but Im kinda new to AS3.   I can trace the Title on the overScrollerItem function, but just dont know how to create another sprite perhaps with the text of the Title within it??


      This is my AS code:


      import caurina.transitions.*;
      import flash.net.URLLoader;
      import flash.net.URLRequest;
      import flash.display.MovieClip;
      import flash.display.Sprite;
      import flash.events.MouseEvent;
      import flash.display.Loader;
      import flash.events.Event;
      import flash.events.IOErrorEvent;
      import flash.display.DisplayObject;
      import flash.display.Bitmap;
      //load xml
      var xmlLoader:URLLoader = new URLLoader();
      var xmlData:XML = new XML();
      xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
      var xmlPath:String = "Image_Scroller_Thumbnails.xml";
      xmlLoader.load(new URLRequest(xmlPath));
      trace("loading xml from:" + xmlPath);
      function LoadXML(e:Event):void{
                trace("xml loading complete");
                xmlData = new XML(e.target.data);
                buildScroller(xmlData.image); //we'll see each image xml element listed in the output panel with this xmlList
      var scroller:MovieClip = new MovieClip();
      var speed:Number;
      var padding:Number = 20;
      var thumbFadeOut:Number = 2;
      var thumbFadeIn:Number = 1;
      var thumbSmall:Number = 1;
      // var thumbLarge:Number = 1.1; ORIGINAL
      var thumbLarge:Number = 1.3;
      scroller.y = scroller.x = padding;
      //build scroller from xml
      function buildScroller(imageList:XMLList):void{
                trace("build Scroller");
                for (var item:uint=0; item<imageList.length(); item++){
                var thisOne:MovieClip=new MovieClip();
                var blackBox:Sprite = new Sprite();
                blackBox.graphics.drawRect(-1, -1, 109.5, 150);
                blackBox.alpha = thumbFadeOut;
                thisOne.blackBox = blackBox;
                thisOne.x = thisOne.myx = (107.5 + padding) *item;
                thisOne.itemNum = item;
                thisOne.title = imageList[item].attribute("title");
                thisOne.link = imageList[item].attribute("url");
                thisOne.src = imageList[item].attribute("src");
                //thisOne.alpha = 0;
                //image container
                var thisThumb:Sprite = new Sprite();
                //add image
                var ldr:Loader = new Loader();
                var urlReq:URLRequest = new URLRequest(thisOne.src);
                trace("loading thumbnail" +item+ "into Scroller:" +thisOne.src);
                //trace("Image Name=" +thisOne.title);
                //assign event listeners for Loader
                ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
                ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
                //create listeners for this thumb
                thisOne.buttonMode = true;
                thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);
                thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
                thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
                //add item
                scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
                trace("termination of build scroller");
      function clickScrollerItem(e:MouseEvent):void{
                //trace("click item" + e.currentTarget.itemNum + " - visit url:" + e.currentTarget.link);
                var urlRequest:URLRequest = new URLRequest(e.currentTarget.link);
                          navigateToURL(urlRequest, "_blank");
                catch (e:Error) {
                          //handle error here
      function overScrollerItem(e:MouseEvent):void{
                //trace("over" + e.currentTarget.title);
                Tweener.addTween(e.currentTarget,{scaleX:thumbLarge,scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y:-e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, time:1});
                Tweener.addTween(e.currentTarget.blackBox, {alpha:thumbFadeIn, time:1});
                trace("Image Name=" +e.currentTarget.title)
      function outScrollerItem(e:MouseEvent):void{
                //trace("out" + e.currentTarget.title);
                Tweener.addTween(e.currentTarget, {scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1});
                Tweener.addTween(e.currentTarget.blackBox, {alpha:thumbFadeOut, time:1});
      function completeHandler(e:Event):void{
                //trace("thumbnail complete " +e.target.loader.parent.parent.title);
                //size image into scroller
                resizeMe(e.target.loader.parent, 109.5, 150, true, true, false);
                Tweener.addTween(e.target.loader.parent.parent,{alpha:1, time:.5});
                var image:Bitmap = Bitmap(e.target.content);
                image.smoothing = true;
      function errorHandler(e:IOErrorEvent):void{
                trace("thumbnail error=" +e);
      function moveScrollerThumbs(e:Event):void{
                if(mouseY>scroller.y && mouseY<scroller.y+scroller.height){//vertically over scroller
                          if(mouseX<stage.stageWidth/2 -padding*2 && mouseX>0){ //left half of stage explicitly
                                    speed = -(mouseX-(stage.stageWidth/2-padding*2))/8;
                          else if(mouseX>stage.stageWidth/2 +40 && mouseX<stage.stageWidth){//right half of stage explicitly
                                    speed = -(mouseX-(stage.stageWidth/2+40))/8;
                                              speed=0; //if in the center area, clear the speed to 0 so we dont have any roll over effect from the last frame
                          scroller.x +=speed;
                          //scroller limits
                          if(scroller.x<-scroller.width+stage.stageWidth - padding){//if scroller too far left
                                    scroller.x=-scroller.width + stage.stageWidth - padding;
                          else if(scroller.x>padding){//if scroller to far right
      //The resizing function
      //required: mc = the movieClip to resize
      //required: maxW = either the size of the box to resize to, or just the maximum desired width
      //optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once, or resizeMe(image, 200);)
      //optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image.  default true.
      //optional: centerHor = centers the displayObject in the maxW area. default true.
      //optional: centerVert = centers the displayObject in the maxH area. default true.
      function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
                maxH = maxH == 0 ? maxW : maxH;
                mc.width = maxW;
                mc.height = maxH;


      Thanks for any help provided..