• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

First image in gallery is stuck

Participant ,
Sep 22, 2011 Sep 22, 2011

Copy link to clipboard

Copied

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 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.@filename.toString() );

        urlArray.push( dataXML.thumbnail.@url.toString() );

        targetArray.push( dataXML.thumbnail.@target.toString() );

        titleArray.push( dataXML.thumbnail.@title.toString() );

        descArray.push( dataXML.thumbnail.@description.toString() );

    }

    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);

}

Here's the xml

<?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>

TOPICS
ActionScript

Views

864

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Sep 23, 2011 Sep 23, 2011

The problem comes from the following line in the 'else' section, possibly conflicting with the other tween assigned to the object.  Comment it out and things should work as intended.  I would move the whole conditional to be after all the photoBMP/photoBack code... the logic being, process the current image first, then move on to process the next, not vice-versa.  As Kenneth stated, you should not be using the same var for all the tweens.

imgTween = new TweenLite(photoContainer, tweenDuration, {r

...

Votes

Translate

Translate
Community Expert ,
Sep 23, 2011 Sep 23, 2011

Copy link to clipboard

Copied

It's really hard to decipher your code - one of the reasons why you should use OOP to make life easier

Anyway, which one of your object is "stack near the bottom of the file" ? This info would help.

One thing though, you are creating new TweenLite and assigning to the same "imgTween" var throughout. If you do that the existing Tween will be deleted and it will not run. This may explain the reason. You do not need to worry about garbage collection for TweenLite, because when the tween is finished it will get destroyed to be ready for the GC. This is one of the reasons why we prefer TweenLite for tween things. So try without assigning to the var to see if it helps.

--

Kenneth Kawamoto

http://www.materiaprima.co.uk/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 25, 2011 Sep 25, 2011

Copy link to clipboard

Copied

Hey, I didn't get my email alert I had responses. I spent the last two days thinking no-one knew the answer. I shouldn't doubt the Adobe forum

Ned, that fixed the problem. Excellent!

Kenneth, I wasn't aware of that for TweenLite. I'll adjust my code.

Here I thought I was using OOP. Apparently, I need to do more research into OOP and practice more on the structure.  If you think that's hard to look through, you should see the project it goes with. It's awful in there.

Thank you both so much for your help.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 25, 2011 Sep 25, 2011

Copy link to clipboard

Copied

You should always check the forums and not rely on features.  Your code is not that hard to look thru - in fact it was presented quite well.  It's just not the way some folks are used to looking thru I guess.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 25, 2011 Sep 25, 2011

Copy link to clipboard

Copied

Well, thank you, Ned. I have noticed that the larger my file becomes, the more features I add, the more it begins to fall apart. I've only been at this consistently for a few months, so I believe I can still safely assume the more I work with it and the more I research best practices the better it will become.

Again, thank you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 25, 2011 Sep 25, 2011

Copy link to clipboard

Copied

LATEST

Here I thought I was using OOP. Apparently, I need to do more research into OOP and practice more on the structure.  If you think that's hard to look through, you should see the project it goes with. It's awful in there.

You guys are happy and concluded this is a good code, so that's all good - but just FYI this is a procedural code and worth noting there is another way, namely OOP, which would have prevented your problem in the first place!  Yes I can imagine how "awful" the whole thing would be... Anyway definitely I'd recommend looking into OOP if you're into more complex stuff in the future. It will save you a lot of time and headaches.

(And do not use those parallel data arrays if you can - that's truly "awful" )

--

Kenneth Kawamoto

http://www.materiaprima.co.uk/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 23, 2011 Sep 23, 2011

Copy link to clipboard

Copied

The problem comes from the following line in the 'else' section, possibly conflicting with the other tween assigned to the object.  Comment it out and things should work as intended.  I would move the whole conditional to be after all the photoBMP/photoBack code... the logic being, process the current image first, then move on to process the next, not vice-versa.  As Kenneth stated, you should not be using the same var for all the tweens.

imgTween = new TweenLite(photoContainer, tweenDuration, {rotation:0,

                                            ease:Expo.easeInOut});

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines