Question

Solved

This is now solved: In the tmbLoaded function all I had to do was place the if/else statement after photoBmp and photoBack creation and remove the tween inside the if/else statement. Also, I was advised to not use a global variable for TweenLite because I need not worry about garbage collection using TweenLite.

Original Issue

I’m working with an image gallery and the first image in the transition ends up stuck near the bottom of the file, but the remaining images fly right into place.

I have a sneaking suspicion it may have something to do with my positioning somewhere or with my tweening. I added a global variable thinking it may have something to do with garbage collection causing my tween to partially stop, but that didn’t solve the problem. It’s just that first image when it transitions onto the stage. After that, everything works perfectly. Even the click transition.

This is part of my final project and given that I get this fixed, everything will finally be working. Everything is built using as3, so you could just copy and paste it, if you’d like. Except, of course, for the xml (which I’ll post in a comment), the url button which is imported from the library, and the text format which can be faked with any embedded font and exported as Myriad.

var fileNameArray = new Array();
var urlArray = new Array();
var targetArray:Array = new Array();
var titleArray = new Array();
var descArray = new Array();

var i:Number;
var iTmb:Number = 0;
var imgTween:TweenLite;
var tweenDuration:Number = 0.4;

var tmbTotal:Number;
var dataXML:XML = new XML();
var photoFolder:String = "imgs/png/galleryImgs/";
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("scripts/xml/gallery.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlComplete);

var tmbGroup:MovieClip = new MovieClip();

tmbGroup.x = 400;
tmbGroup.y = 165;

addChild(tmbGroup);

var txtFace:Font = new Myriad();
var headingFormat:TextFormat = new TextFormat();
    headingFormat.font = txtFace.fontName;
    headingFormat.color = 0x0099cc;
    headingFormat.size = 14;
    headingFormat.align = "left";
    headingFormat.bold = true;
    
var bodyTxt:TextFormat = new TextFormat();
    bodyTxt.font = txtFace.fontName;
    bodyTxt.color = 0x333333;
    bodyTxt.size = 14;
    bodyTxt.align = "left";
    
// Text Fields
var headingTxt = new TextField();
    headingTxt.condenseWhite = true;
    headingTxt.autoSize = TextFieldAutoSize.LEFT;
    headingTxt.selectable = false;
    headingTxt.defaultTextFormat = headingFormat;
    headingTxt.wordWrap = true;
    headingTxt.width = 409;
    headingTxt.height = 21;
    headingTxt.x = 196;
    headingTxt.y = 355;

var urlTxt = new TextField();
    urlTxt.condenseWhite = true;
    urlTxt.autoSize = TextFieldAutoSize.LEFT;
    urlTxt.selectable = false;
    urlTxt.defaultTextFormat = bodyTxt;
    urlTxt.wordWrap = true;
    urlTxt.multiline = true;
    urlTxt.width = 490;
    urlTxt.height = 21;
    urlTxt.x = 196;
    urlTxt.y = 375;

var descTxt = new TextField();
    descTxt.condenseWhite = true;
    descTxt.autoSize = TextFieldAutoSize.LEFT;
    descTxt.selectable = false;
    descTxt.defaultTextFormat = bodyTxt;
    descTxt.wordWrap = true;
    descTxt.multiline = true;
    descTxt.width = 490;
    descTxt.height = 150;
    descTxt.x = 196;
    descTxt.y = 401;

var urlTxtTarget = new TextField();
    urlTxtTarget.condenseWhite = true;
    urlTxtTarget.autoSize = TextFieldAutoSize.LEFT;
    urlTxtTarget.selectable = false;
    urlTxtTarget.defaultTextFormat = bodyTxt;
    urlTxtTarget.wordWrap = true;
    urlTxtTarget.multiline = true;
    urlTxtTarget.width = 490;
    urlTxtTarget.height = 21;
    urlTxtTarget.x = 196;
    urlTxtTarget.y = 5000;



var urlBtn:URLBtn = new URLBtn();
    urlBtn.x = 196;
    urlBtn.y = 375;



addChild(headingTxt);
addChild(urlTxt);
addChild(descTxt);
addChild(urlTxtTarget);
addChild(urlBtn);


urlBtn.visible = false;

function xmlComplete(e:Event):void {
    dataXML = XML(e.target.data);
    tmbTotal = dataXML.thumbnail.length();

    for( i = 0; i < tmbTotal; i++ ) {
        fileNameArray.push( dataXML.thumbnail[i][e-mail]() );
        urlArray.push( dataXML.thumbnail[i][e-mail]() );
        targetArray.push( dataXML.thumbnail[i][e-mail]() );
        titleArray.push( dataXML.thumbnail[i][e-mail]() );
        descArray.push( dataXML.thumbnail[i][e-mail]() );
    }
    generateTmbs();
}

function generateTmbs():void {
    var tmbRequest:URLRequest = new URLRequest( photoFolder + fileNameArray[iTmb] );
    var tmbLoader:Loader = new Loader();

    tmbLoader.load(tmbRequest);
    tmbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, tmbLoaded, false, 0, true);
    iTmb++;
}

function tmbLoaded(e:Event):void {
    if( iTmb < tmbTotal ) {
        generateTmbs();
        descTxt.text = "Loading " + iTmb + " of " + tmbTotal + " gallery images.";
    } else {
        headingTxt.text = titleArray[0];
        descTxt.text = descArray[0];
        urlTxt.text = urlArray[0];
        urlTxtTarget.text = targetArray[0];
        
        var photoContainer:MovieClip = MovieClip( tmbGroup.getChildAt(tmbTotal-2) );
            photoContainer.addEventListener( MouseEvent.CLICK, transitionOut, false, 0, true );
    
    
        imgTween = new TweenLite(photoContainer, tweenDuration, {rotation:0,
                                                                    ease:Expo.easeInOut});
        
        urlBtn.visible = true;
        urlBtn.addEventListener(MouseEvent.CLICK, goto_URL, false, 0, true);
    }

    var photoBmp:Bitmap = new Bitmap();
    var photoBack:MovieClip = new MovieClip();

    photoBmp = Bitmap(e.target.content);
    photoBmp.x = - photoBmp.width * 0.5;
    photoBmp.y = - photoBmp.height * 0.5;
    photoBmp.smoothing = true;
    
    var photoBGWidth = photoBmp.width + 16;
    var photoBGHeight = photoBmp.height + 16;
    
    photoBack.addChild(photoBmp);
    photoBack.graphics.lineStyle(1, 0x999999);
    photoBack.graphics.beginFill(0xFFFFFF);
    photoBack.graphics.drawRect( - photoBGWidth * 0.5, - photoBGHeight * 0.5, photoBGWidth, photoBGHeight );
    photoBack.graphics.endFill();
    photoBack.x = 200;
    photoBack.y = 365;
    photoBack.rotation = 45;
    photoBack.name = "gallery " + tmbGroup.numChildren;
    
    
    imgTween = new TweenLite(photoBack, tweenDuration * 2, {x:Math.random() * 20 - 10,
                                        y:Math.random() * 20 - 10,
                                        rotation:Math.random() * 20 - 10,
                                        ease:Expo.easeInOut});
    
    tmbGroup.addChildAt(photoBack, 0);
}

function transitionOut(e:MouseEvent):void {
    var photoContainer:MovieClip = MovieClip(e.target);
        photoContainer.removeEventListener( MouseEvent.CLICK, transitionOut );
        
    
    
    
    
    imgTween = new TweenLite(photoContainer, tweenDuration, {x:220,
                                        y:180,
                                            rotation:45,
                                        ease:Expo.easeInOut,
                                        onComplete: transitionIn});
}

function transitionIn():void {
    var photoContainer:MovieClip = MovieClip( tmbGroup.getChildAt(tmbTotal-1) );
    var photoContainer2:MovieClip = MovieClip( tmbGroup.getChildAt(tmbTotal-2) );
    
    var slideNum:Number = parseInt( photoContainer.name.slice(8,10) ) + 1;
    if(slideNum == tmbTotal) slideNum = 0;
    
    imgTween = new TweenLite(photoContainer, tweenDuration, {x:Math.random() * 20 - 10,
                                                                y:Math.random() * 20 - 10,
                                                                rotation:Math.random() * 20 - 10,
                                                                ease:Expo.easeInOut,
                                                                onComplete: photoClick});
    
    
    imgTween = new TweenLite(photoContainer2, tweenDuration, {rotation:0,
                                                                ease:Expo.easeInOut});
    
    tmbGroup.addChildAt( photoContainer, 0 );
    headingTxt.text = titleArray[slideNum];
    descTxt.text = descArray[slideNum];
    urlTxt.text = urlArray[slideNum];
    urlTxtTarget.text = targetArray[slideNum];
}

function photoClick():void {
    var photoContainer:MovieClip = MovieClip(tmbGroup.getChildAt(tmbTotal-1) );
        photoContainer.addEventListener( MouseEvent.CLICK, transitionOut, false, 0, true );
}

function goto_URL(me:MouseEvent) {
    navigateToURL(new URLRequest(urlTxt.text), urlTxtTarget.text);
}

The xml is too long for a comment:

<?xml version="1.0" encoding="utf-8"?>
<thumbnails>
<thumbnail filename="photoNumber01.jpg"
    url="http://www.barnesjewish.org" 
    target="_blank"
    title="Barnes-Jewish" 
    description="The dedicated heart transplant team members at Barnes-Jewish and Washington University focus only on patients undergoing transplant and those with congestive heart failure. Each person on the transplant team is an expert in a different area of transplantation. Together, they bring their expertise, knowledge and understanding to each patient in our program." />
    
<thumbnail filename="photoNumber02.jpg"
    url="http://www.utsouthwestern.edu" 
    target="_blank" 
    title="UT Southwestern" 
    description="UT Southwestern Medical Center's Heart Transplant Program continues to rank among the best in the nation in survival rates for post-transplant patients." />
    
<thumbnail filename="photoNumber03.jpg"
    url="http://www.mayoclinic.org/heart-transplant/" 
    target="_blank"
    title="Mayo Clinic" 
    description="The Mayo Clinic Heart Transplant Program encompasses heart, heart-lung and lung transplant, as well as the use of ventricular assist devices for infants, children and adults." />
    
<thumbnail filename="photoNumber04.jpg"
    url="http://www.jeffersonhospital.org" 
    target="_blank"
    title="Jefferson Hospital" 
    description="As a heart care patient at Jefferson, a knowledgeable and skilled team of physicians, surgeons, nurse coordinators, psychologists, pharmacists, dieticians, researchers and staff with robust expertise and state-of-the-art resources will support you." />
    
<thumbnail filename="photoNumber05.jpg"
    url="http://www.massgeneral.org" 
    target="_blank"
    title="Massachusetts General Hospital" 
    description="The Heart Transplant Program draws on state-of-the-art technology, leading-edge medical and surgical interventions and more than two decades of experience to provide patients with individualized care before and after their heart transplant." />
</thumbnails>

Answer 1

Solved

This is now solved: In the tmbLoaded function all I had to do was place the if/else statement after photoBmp and photoBack creation and remove the tween inside the if/else statement. Also, I was advised to not use a global variable for TweenLite because I need not worry about garbage collection using TweenLite.