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..
1
Reply
AdChoices