Skip navigation
Boogaloobonkers
Currently Being Moderated

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

Apr 14, 2012 9:25 AM

Tags: #flash #script #text #as3 #swf #xml

Hello all,

 

I found a really useful tutorial online (http://active.tutsplus.com/tutorials/effects/create-a-responsive-xml-i mage-scroller-in-actionscript-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;


      
this.addChild(scroller);
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();
  
          //outline
          var blackBox:Sprite = new Sprite();
          blackBox.graphics.beginFill(0xFFFFFF);
          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);
          ldr.load(urlReq);
  
          //assign event listeners for Loader
          ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
          ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
          thisThumb.addChild(ldr);
          thisOne.addChild(thisThumb);
  
          //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.addChild(thisOne);
          }
  
          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);
          try{
                    navigateToURL(urlRequest, "_blank");
          }
  
          catch (e:Error) {
                    //handle error here
                    trace(e);
          }
}


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;
                    }
                    else{
                                        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
                              scroller.x=padding;
                    }
          }
}








//The resizing function
//parameters
//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;
          if(constrainProportions){
                    mc.scaleX<mc.scaleY?mc.scaleY=mc.scaleX:mc.scaleX=mc.scaleY;
          }
                    if(centerHor){
                              mc.x=(maxW-mc.width)/2;
                    }
                    if(centerVert){
                              mc.y=(maxH-mc.height)/2;
                    }
}

 

Thanks for any help provided..

 
Replies
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 14, 2012 9:31 AM   in reply to Boogaloobonkers

    does that

     

      trace("Image Name=" +e.currentTarget.title)

     

    trace what you want to display?  if yes, add a textfield and assign its text property to e.currentTarget.title in your overScrollerItem listener function.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points