AS3 image carousel positioning issues

Hello everyone,

I have recently made an image carousel powered by XML. It works fine in most browsers, in most occurrences. An issue that has been coming up mainly on older versions of IE, as well as randomly in Firefox (about once every 30 page refreshes) is that the SWF seems to ignore the positioning I have outlined in the code.

Rather than rotating with a scaling, and alpha tween, the images just sit on eachother in the top left corner of the SWF file, but still take in the scaling, and alpha, and also seem to appear 'on top' of eachother in order of biggest to smallest, which is how the carousel works. It just ignores the circumference of the path.



Here is the code in my .fla :

import flash.filters.BlurFilter;
import flash.filters.BitmapFilterQuality;
import fl.transitions.easing.*;
import fl.transitions.*;
import flash.filters.BlurFilter;

//CAROUSEL PARAMETERS

var radiusX:Number = stage.stageWidth/2.5;
var radiusY:Number = 20;
var centerX:Number = stage.stageWidth/2.3;
var centerY:Number = stage.stageHeight/3;
var fade = 1; //modify carousel image alpha [0,1]

var useFixedImageSize = 1;

//change the speed
var speed:Number = 0.01;

var mouse_acc = 8000;

var container:MovieClip = new MovieClip(); //thumbs container
this.addChild(container);


//set xml data file
var xmlData = "includes/XML/carousel_images.xml";

var xmlObj: XMLDocument;
var nodes = new Array();
var mcArray:Array = new Array(); // store the Items to sort them according to their 'depth' - see sortBySize() function.


init(); //init call -> load config XML and create objects

function init() {
xmlObj = new XMLDocument();
xmlObj.ignoreWhite = true;

var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest(xmlData);
loader.load(request);

loader.addEventListener("complete", onComplete);
loader.addEventListener("ioError", onIOError);
}

function onIOError(event:Event):void {
trace("IOERROR (maybe XML file does not exit or have an incorrect name)");
}

function onComplete(event:Event):void
{
var loader:URLLoader = event.target as URLLoader;
if (loader != null)
{
xmlObj.parseXML(loader.data);
xmlHandler();
}
else
{
trace("Loader is not a URLLoader!");
}
}

function xmlHandler() {
addObjects();
startEngine();
}

function startEngine () {
container.addEventListener("enterFrame",startMovie);
}


var numItems;
var objects;
var idx;

function addObjects() { //add objects in the scene

objects = xmlObj.firstChild.childNodes;
numItems = objects.length;

for(var i=0; i<numItems; i++) {

if (useFixedImageSize==1) source1 = "item"; //image mc linkage id from the library
else source1 = "item_01";
var sourceType1 = "library";
var regName1 = "p"+i; //the registration name used in Flash


var classDef = getDefinitionByName(source1);
var menuItemMc = new classDef;
menuItemMc .name = regName1;
container.addChild(menuItemMc);
var currMc = container.getChildByName(regName1);

var currMc0 = container.getChildByName("p0");
idx = container.getChildIndex(currMc0);

//trace(currMc .name+" "+idx);
mcArray .push(currMc);

currMc.buttonMode = true;
currMc.useHandCursor = true;
currMc.mouseChildren = false;

currMc["info"]=objects[i];
currMc._load.alpha = fade;
//currMc.addEventListener("mouseOver",mouseRollOver);
//currMc.addEventListener("mouseOut",mouseRollOut);
//currMc.addEventListener("mouseDown",mousePress);

currMc._angle = i*((Math.PI*2)/numItems);
}

}

function mouseRollOver(e:MouseEvent){
//e.target._load.alpha = 1;
TransitionManager.start(e.target, {type:Photo, direction:Transition .IN, duration:0.5, easing:Strong.easeOut});
e.target.addEventListener("motionFinish",finishAnim);
}
function finishAnim(e:Event){
e.target._load.alpha = fade;
}
/*
function mouseRollOut(e:MouseEvent){
e.target._load.alpha = fade;

}
*/
function mousePress(e:MouseEvent) {

//loadBigImage(e.target);

}

var releaseOutsideTarget;



function releaseHandler(e:MouseEvent) {
stage.removeEventListener(MouseEvent.MOUSE_UP, releaseHandler);
releaseOutsideTarget = null;
}


function startMovie(e:Event) {
//add objects in the scene

for (var i = 0; i<numItems; i++) {

var regName1 = "p"+i;
var currMc = container.getChildByName(regName1);
currMc.x = Math.cos(currMc._angle)*radiusX+centerX;
currMc.y = Math.sin(currMc._angle)*radiusY+centerY;
var s:Number = currMc.y/(centerY+radiusY);

currMc.scaleX = s*1;
currMc.scaleY = s*1;
currMc._angle += speed;
currMc.alpha=s*s;
currMc.filters = [new BlurFilter(s-[1/s]*25, s-[1/s]*25, 2)];


var dpth = Math.round(currMc.scaleX)+120;

sortBySize();

}

}

// set the display list index (depth) of the Items according to their
// scaleX property so that the bigger the Item, the higher the index (depth)
function sortBySize():void {
// There isn't an Array.ASCENDING property so use DESCENDING and reverse()
mcArray.sortOn("scaleX", Array.DESCENDING | Array.NUMERIC);
mcArray.reverse();
for(var i:uint = 0; i < mcArray.length; i++) {
container.setChildIndex(mcArray[i], i+idx);
}
}

stage.addEventListener("mouseMove", rotateCar);

function rotateCar(e:MouseEvent)
{

//speed = (this.mouseX - centerX) / mouse_acc;
}



Thank you for taking the time to look, and I appreciate all responses!

Regards,

Eric

this seems to me it's the case when loading is not completed due to internet connection. To avoid that, try adding a preloader to your swf or move your code to the second or third frame and add a "stop();" at the end of your code.

Also is better to enable the Strict Mode for AS3, since you have some warnings / errors in your code.
i.e. :
currMc.filters = [new BlurFilter(s-[1/s]*25, s-[1/s]*25, 2)];
should be:
currMc.filters = [new BlurFilter(s-(1/s)*25, s-(1/s)*25, 2)];

To make a cast from a type to another, eiter use Type(object), or object as Type
i.e.:
TransitionManager.start(e.target, {type:Photo, direction:Transition.IN, duration:0.5, easing:Strong.easeOut});
will become:
TransitionManager.start(MovieClip(e.target), {type:Photo, direction:Transition.IN, duration:0.5, easing:Strong.easeOut});


To enable strict mode, go to File->Publish Settings-> the tab : Flash -> Button Settings (near Script) -> Check the Strict Mode

Thank you for your reply, IceCold. I moved the code to frame 3 and added the 'stop();' line.

I ran into some issues with strict mode. This is the line that's giving me an error, within the movieclip:

var useBitmapSmoothing = this.parent. useBitmapSmoothing;

Also, the issue really only seems to occur in older versions of IE. I am going to make a preloader and see if I have better luck with that, without going into strict mode.

Entire movieclip code:

var loaderRotationSpeed = 2;

var useBitmapSmoothing = this.parent. useBitmapSmoothing;

//var txt = this["info"].attributes.title;

///txt_name. text = txt;

// load image
var url = this["info"].attributes.thumb;
var request1 = new URLRequest(url);
var loader1 = new Loader();

loader1.load(request1); //start loading img/swf
_load. addChild(loader1);

loader1.contentLoaderInfo.addEventListener("progress", progress_loading);
loader1.contentLoaderInfo.addEventListener("complete", finished_loading);


function progress_loading(e:Event) {

loaderanim.rotation+=loaderRotationSpeed;
}

function finished_loading(e:Event) {

//set bitmap smoothing
if (useBitmapSmoothing) e.target.content.smoothing = true;

//remove circle preloader
var la = this.getChildByName("loaderanim");
this.removeChild(la);
la = null;


}

as i said, you need some castings in order to make it work properly.
so that line of yours would turn into:
var useBitmapSmoothing = MovieClip(this.parent).useBitmapSmoothing;

Thank you so much, IceCold! I really appreciate your time and knowledge.

It is now working when published as Strict. I am going to build my preloader right now. =]