Problem With XML Scroller

[ogaac]

So I have a vertical scrolling list of images from an XML file on the stage. On the rollover state I want the images to expand a little and on rollout I want them to be their normal size.

This seems to be working fine, but whenever I rollover an image is jumps up to the top of the list and stays there. I can't seem figure out why, so I thought I'd ask you guys hoping you'll impart your wisdom upon me.

Here is the code I think is causing the problem:

function overScrollerItem(e:MouseEvent):void
{
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 } );
}
function outScrollerItem(e:MouseEvent):void
{
Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
}

And here's all other relevant code, just in case I'm wrong.

package {
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.display.Stage;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.display.Sprite;
import flash.display.Loader;
import caurina.transitions.Tweener;
import flash.display.DisplayObject;

public class Engine extends MovieClip
{

//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
var xmlPath:String = "testXML.xml";

var speed:Number;
var padding:Number = 50;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.2;

public function Engine():void
{
//LOAD XML
xmlLoader.load(new URLRequest(xmlPath));
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

//LOAD XML
function LoadXML(e:Event):void
{
xmlData = new XML(e.target.data);
buildScroller(xmlData.image);
}

//BUILD SCROLLER FROM XML
function buildScroller(imageList:XMLList):void
{
var scroller:MovieClip = new MovieClip();
this.addChild(scroller);
scroller.y = 85;

for (var item:uint = 0; item < imageList.length(); item++ )
{
var gameThumb:MovieClip = new MovieClip();

gameThumb.y = (140 + padding) * item;
gameThumb.itemNum = item;
gameThumb.src = imageList[item].attribute("src");

//CREATE IMAGE CONTAINER
var thisThumb:Sprite = new Sprite();

//PARSE IMAGES
var ldr:Loader = new Loader();
var urlReq:URLRequest = new URLRequest(gameThumb.src);
ldr.load(urlReq);
thisThumb.addChild(ldr);
gameThumb.addChild(thisThumb);

gameThumb.alpha = 0;

//SCROLLER LISTENERS
gameThumb.buttonMode = true;
gameThumb.addEventListener(MouseEvent.CLICK, clickScrollerItem);
gameThumb.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
gameThumb.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
gameThumb.y = gameThumb.myy = (50 + padding) * item;

//ADD SCROLLER TO STAGE
scroller.addChild(gameThumb);

//LOADER LISTENERS
ldr.contentLoaderInfo.addEventListener(Event.COMPL ETE, completeHandler);
ldr.load(urlReq);

function moveScrollerThumbs(e:Event):void
{
if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height)
{
if (mouseY < stage.stageHeight/2 - padding*2 && mouseY > 0)
{
speed = -(mouseY - (stage.stageHeight/2 - padding*2)) / 8;
}
else if (mouseY > stage.stageHeight/2 + padding*2 && mouseY < stage.stageHeight)
{
speed = -(mouseY - (stage.stageHeight/2 + padding*2)) / 8;
}
else{
speed = 0;
}
scroller.y += speed;

//SCROLL LIMIT
if (scroller.y < -scroller.height + stage.stageHeight - padding)
{
scroller.y = -scroller.height + stage.stageHeight - padding;
}
else if (scroller.y > padding)
{
scroller.y = padding;
}
}
}
}
}
function clickScrollerItem(e:MouseEvent):void
{
trace("clicked item " + e.currentTarget.itemNum);
}
function overScrollerItem(e:MouseEvent):void
{
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 } );
}
function outScrollerItem(e:MouseEvent):void
{
Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
}
function completeHandler(e:Event):void
{
//RESIZE IMAGES FROM XML
resizeMe(e.target.loader.parent, 140, 105, true, true, false);
//TWEEN FROM 0 TO 1 ALPHA ON LOAD
Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}
//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 = 50;
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 taking a look, and for helping me :)

Ogaac

[ogaac]

I got it working more or less correctly. My code, if you're curious, is:

function overScrollerItem(e:MouseEvent):void
{
Tweener.addTween(e.currentTarget, { scaleX:thumbLarge, scaleY:thumbLarge,
time:1 } );
}
function outScrollerItem(e:MouseEvent):void
{
Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, time:1 } );
}