Created a gallery with scrolling thumbnails, pure as3 and XML. Its a little choppy but dont know if there is anything i can do about that, but what is bugging me is there is increasing uneven gaps between the images the more you scroll. Anyway to fix this, a better way of doign it?
heres the gallery http://www.filmelusion.co.uk/gallerytest/gallery.html
heres the code
stop();
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import gs.*;
import gs.events.*;
var xmlRequest:URLRequest = new URLRequest("gallery.xml");
var xmlLoader:URLLoader = new URLLoader(xmlRequest);
var imgData:XML;
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF);
var imgThbLoader:Loader;
var imgFullLoader:Loader;
var imageLoader:Loader;
var imgThb:String;
var imgFull:String;
var imgNum:Number = 0;
var xmlList:XMLList;
var fullTarget:Number;
var i:Number = 0;
var data:XML;
var target:Object;
var thbName:String;
var hoverName:String;
var imgFullOld:Object;
var targetMovieClip:MovieClip;
var numImg:Number = 0;
var imgArray:Array = new Array();
var imgFullHolder_mc:MovieClip = new MovieClip();
//stop_btn.graphics.lineStyle(3,0x00ff00);
imgFullHolder_mc.graphics.beginFill(0x000000);
imgFullHolder_mc.graphics.drawRect(0,0,15,15);
imgFullHolder_mc.graphics.endFill();
imgFullHolder_mc.x = 120;
imgFullHolder_mc.y = 120;
var imgBc_mc:MovieClip = new MovieClip();
imgBc_mc.graphics.beginFill(0x000000);
imgBc_mc.graphics.drawRect(0,0,100,80);
imgBc_mc.graphics.endFill();
imgBc_mc.x = 5;
imgBc_mc.y = 5;
var mask_mc:MovieClip = new MovieClip();
mask_mc.graphics.beginFill(0x000000);
mask_mc.graphics.drawRect(0,0,300,740);
mask_mc.graphics.endFill();
mask_mc.x = 150;
mask_mc.y = 500;
mask_mc.width = 500;
mask_mc.height = 200;
var moveArea:MovieClip = new MovieClip();
moveArea.graphics.beginFill(0x000000);
moveArea.graphics.drawRect(0,0,300,740);
moveArea.graphics.endFill();
moveArea.x = 0;
moveArea.y = 400;
moveArea.width = 790;
moveArea.height = 500;
moveArea.alpha = 0;
var thbsContainer:MovieClip = new MovieClip;
thbsContainer.x = 120;
thbsContainer.y = 500;
addChild(thbsContainer);
addChild(mask_mc);
function xmlLoadedF(event:Event):void {
data = XML(event.target.data);
parse(data);
function parse(input:XML):void {
var contentList:XMLList = input.image;
imgFull = input.image.(@code == "img0").imgURL;
imgFullLoader = new Loader();
imgFullLoader.load(new URLRequest(imgFull));
imgFullLoader.x = 150;
imgFullLoader.y = 120;
addChild(imgFullLoader);
imgFullLoader.name = "old";
for each (var image:XML in contentList) {
imgThb = image.thbURL;
imgThbLoader = new Loader();
imgThbLoader.load(new URLRequest(imgThb));
imgThbLoader.x = 5;
imgThbLoader.y = 5;
var thbHolder_mc:MovieClip = new MovieClip;
thbHolder_mc.graphics.beginFill(0x000000);
thbHolder_mc.graphics.drawRect(0,0,110,90);
thbHolder_mc.graphics.endFill();
thbHolder_mc.x = 0;
thbHolder_mc.y = 0;
addChild(thbsContainer);
thbsContainer.addChild(thbHolder_mc);
thbHolder_mc.addChild(imgThbLoader);
thbsContainer.mask = mask_mc;
thbHolder_mc.mouseChildren = false;
thbHolder_mc.name = "img" + i;
thbName = "img" + i;
hoverName = "thb" + i;
imgThbLoader.name = hoverName;
//getChildByName(thbName)
thbsContainer.getChildByName(thbName).addEventListener(MouseEvent.CLICK, clickHandler);
thbsContainer.getChildByName(thbName).addEventListener(MouseEvent.MOUSE_OVER, overHandler);
thbsContainer.getChildByName(thbName).addEventListener(MouseEvent.MOUSE_OUT, outHandler);
thbHolder_mc.x = i * 120;
i = i+1;
imgArray.push(thbHolder_mc.name);
numImg = input.children().length();
if (numImg == i) {
moveArea.addEventListener(Event.ENTER_FRAME, mover);
}
}
function outHandler(event:MouseEvent):void {
hoverOverTween(imgBc_mc, 0);
}
function overHandler(event:MouseEvent):void {
imgBc_mc.alpha = 0;
event.currentTarget.addChild(imgBc_mc);
hoverOverTween(imgBc_mc, .5);
}
function clickHandler(event:MouseEvent):void {
target = event.currentTarget.name;
imgFullLoader.name = "old";
imgFull = input.image.(@code == target).imgURL;
imgFullLoader = new Loader();
imgFullLoader.load(new URLRequest(imgFull));
imgFullLoader.x = 150;
imgFullLoader.y = 120;
addChild(imgFullLoader);
var fadeInTween:TweenMax = TweenMax.from(imgFullLoader, 2, {alpha:0});//stores a reference to the TweenMax instance, but you're responsible for making sure it becomes eligible for garbage collection when you're finished with it (you can simply set your variable to null, or if it is still in progress, call TweenMax.removeTween(myTween) first)
var fadeIn2Tween:TweenMax = TweenMax.to(getChildByName("old"), 2, {alpha:0});//stores a reference to the TweenMax instance, but you're responsible for making sure it becomes eligible for garbage collection when you're finished with it (you can simply set your variable to null, or if it is still in progress, call TweenMax.removeTween(myTween) first)
fadeInTween.addEventListener(TweenEvent.COMPLETE, tweenFinish);
imgFullLoader.name = "current";
imgFullLoader.addEventListener(MouseEvent.CLICK, clickCloseHandler);
function tweenFinish():void {
removeChild(getChildByName("old"));
}
}
function clickCloseHandler(event:MouseEvent):void {
removeChild(getChildByName("current"));
}
function hoverOverTween(movie:Object, alphaNum:Number):void {
var hoverInTween:TweenMax = TweenMax.to(movie, 1, {alpha:alphaNum});
}
var angleSpeed:Number = 0;
var centerX:Number = 790 / 2;
var scrollspeed:int = 4;
function mover(e:Event):void {
var firstImg:Object;
var lastImg:Object;
var imgName:String;
var imgPopL:String;
var imgMovingL:Object;
var imgPopR:String;
var imgMovingR:Object;
var lastImgX:Number;
var firstImgX:Number;
firstImg = thbsContainer.getChildByName(imgArray[1]);
lastImg = thbsContainer.getChildByName(imgArray[10]);
for (var i:uint = 0; i < imgArray.length; i++) {
angleSpeed = (mouseX - centerX) * .05;
if (angleSpeed > .5 || angleSpeed < -.5) {
thbsContainer.getChildByName(imgArray*).x += -angleSpeed / scrollspeed;
firstImgX = firstImg.x;
lastImgX = lastImg.x;
}
}
if (firstImg.x > 150) {
//takes img from right end
imgPopL = imgArray.pop();
//Moves img removed to position past first img
imgMovingL = thbsContainer.getChildByName(imgPopL);
imgMovingL.x = firstImgX - 240;
//Adds the img to beginning of the que
imgArray.unshift(imgPopL);
}
if (lastImg.x < 630) {
imgPopR = imgArray.shift();
imgMovingR = thbsContainer.getChildByName(imgPopR);
imgMovingR.x = lastImgX + 240;
imgArray.push(imgPopR);
}
}
}
}
stop();