Tweens working on Added to Stage, but not in response to button click

Question

I have four multiple choice questions (sprites containing text fields) that I initially set to not visible. When a button is clicked, I make them visible, then I want them to fade to alpha 0, with only the correct answer remaining. The following code accomplishes this -- but only when I call initTweens() on the addedToStage handler. If I try to call it from the button click event -- playClickHandler -- the alpha fades don't happen. Can anyone see why?

Thanks.

package
{
import com.greensock.TimelineLite;
import com.greensock.TweenLite;
import com.greensock.easing.*;

import flash.display.Bitmap;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFieldType;
import flash.text.TextFormat;

import views.Icons;

[SWF(width="400", height="350",  backgroundColor="0xffffff")]
public class game extends Sprite
{
//sprites
private var container:Sprite;
private var question:Sprite = new Sprite();
private var answer1:Sprite = new Sprite();
private var answer2:Sprite = new Sprite();
private var answer3:Sprite = new Sprite();
private var answer4:Sprite = new Sprite();
private var explanation:Sprite = new Sprite();
private var playButton:Sprite;

//text fields
private var txtQuestion:TextField = new TextField();
private var txtAnswer1:TextField  = new TextField();
private var txtAnswer2:TextField  = new TextField();
private var txtAnswer3:TextField  = new TextField();
private var txtAnswer4:TextField  = new TextField();
private var txtExplanation:TextField  = new TextField();
private var vBuffer:Number = 10;

//strings for textfields
private var currentQuestion:String;
private var currentAnswer1:String;
private var currentAnswer2:String;
private var currentAnswer3:String;
private var currentAnswer4:String;
private var currentExplanation:String;

private var questionSets:Array = [];
private var timeline:TimelineLite = new TimelineLite();
private var fadeSpeed:Number = 3;

private var bmpplayButton:Bitmap;
private var centeredAnswerPosition:Number;

//create a keyword which will trigger the presentation of a given questionSet
private var keyWord:String;

private var questionObj:Object;

private var textWidth:Number = 400;
private var textHeight:Number;

public function game()
{
this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
}

private function addedToStageHandler(e:Event):void
{
bmpplayButton = new Icons.PlayButtonMedium();
loadData("amzn");
setUpQuestion();
//initTweens();  //this works
}

private function playClickHandler(e:MouseEvent):void
{
makeVisible();
initTweens(); //code runs, but this doesn't work -- the alpha changes don't happen.
}


private function makeVisible():void
{
answer1.visible = true;
answer2.visible = true;
answer3.visible = true;
answer4.visible = true;
explanation.visible = true;
}

private function initTweens():void
{
timeline.insert(TweenLite.to(answer1,fadeSpeed, {autoAlpha:0, delay:4}),0);
timeline.insert(TweenLite.to(answer3,fadeSpeed, {autoAlpha:0, delay:7}),0);
timeline.insert(TweenLite.to(answer4,fadeSpeed, {autoAlpha:0, delay:10}),0);
timeline.insert(TweenLite.to(answer2, 2, {x:100,scaleX:2, scaleY:2, delay: 12}),0);
timeline.insert(TweenLite.to(explanation, fadeSpeed, {autoAlpha:1, delay:14}),0);
timeline.append(TweenLite.delayedCall(3, clear));
}



private function setUpQuestion():void
{
container = new Sprite();
container.name = "container";
container.buttonMode = true;
container.useHandCursor = true;
addChild(container);


txtQuestion.name = "txtQuestion";
txtQuestion.width = textWidth;
txtQuestion.wordWrap = true;
txtQuestion.multiline = true;
txtQuestion.type = TextFieldType.DYNAMIC;
txtQuestion.autoSize = TextFieldAutoSize.LEFT;
question.addChild(txtQuestion);

var textFormat:TextFormat = new TextFormat("Arial", 14, 0x000000, false, false, false, "", "", "left", 0, 0, 0, 0);
txtQuestion.setTextFormat(textFormat);
txtQuestion.defaultTextFormat = textFormat;
txtQuestion.text = currentQuestion;

answer1.y = question.y + question.height + vBuffer;
txtAnswer1.width = textWidth;
txtAnswer1.wordWrap = true;
txtAnswer1.multiline = true;
txtAnswer1.type = TextFieldType.DYNAMIC;
txtAnswer1.autoSize = TextFieldAutoSize.LEFT;
txtAnswer1.setTextFormat(textFormat);
txtAnswer1.defaultTextFormat = textFormat;
txtAnswer1.text = currentAnswer1;
answer1.addChild(txtAnswer1);
answer1.visible = false;

answer2.y = answer1.y + answer1.height + vBuffer
txtAnswer2.width = textWidth;
txtAnswer2.wordWrap = true;
txtAnswer2.multiline = true;
txtAnswer2.type = TextFieldType.DYNAMIC;
txtAnswer2.autoSize = TextFieldAutoSize.LEFT;
txtAnswer2.setTextFormat(textFormat);
txtAnswer2.defaultTextFormat = textFormat;
txtAnswer2.text = currentAnswer2;
answer2.addChild(txtAnswer2);
centeredAnswerPosition = stage.stageWidth/2 - answer2.width/2;
answer2.visible = false;

answer3.y = answer2.y + answer2.height + vBuffer;
txtAnswer3.width = textWidth;
txtAnswer3.wordWrap = true;
txtAnswer3.multiline = true;
txtAnswer3.type = TextFieldType.DYNAMIC;
txtAnswer3.autoSize = TextFieldAutoSize.LEFT;
txtAnswer3.setTextFormat(textFormat);
txtAnswer3.defaultTextFormat = textFormat;
txtAnswer3.text = currentAnswer3;
answer3.addChild(txtAnswer3);
answer3.visible = false;

answer4.y = answer3.y + answer3.height + vBuffer;
txtAnswer4.width = textWidth;
txtAnswer4.wordWrap = true;
txtAnswer4.multiline = true;
txtAnswer4.type = TextFieldType.DYNAMIC;
txtAnswer4.autoSize = TextFieldAutoSize.LEFT;
txtAnswer4.setTextFormat(textFormat);
txtAnswer4.defaultTextFormat = textFormat;
txtAnswer4.text = currentAnswer4;
answer4.addChild(txtAnswer4);
answer4.visible = false;

explanation.y = answer4.y + answer4.height + vBuffer;
explanation.alpha = 0; //hide it
txtExplanation.width = textWidth;
txtExplanation.wordWrap = true;
txtExplanation.multiline = true;
txtExplanation.type = TextFieldType.DYNAMIC;
txtExplanation.autoSize = TextFieldAutoSize.LEFT;
txtExplanation.y = txtAnswer4.y + txtAnswer1.height + vBuffer;
txtExplanation.setTextFormat(textFormat);
txtExplanation.defaultTextFormat = textFormat;
txtExplanation.text = currentExplanation;
explanation.addChild(txtExplanation);
explanation.visible = false;

playButton = new Sprite();
playButton.name = "play";
playButton.buttonMode = true;
playButton.useHandCursor = true;
playButton.addChild(bmpplayButton);
playButton.x = stage.stageWidth/2 - playButton.width/2;
playButton.y = explanation.y + explanation.height + 5*vBuffer;
playButton.addEventListener(MouseEvent.CLICK, playClickHandler);

container.addChild(question);
container.addChild(answer1);
container.addChild(answer2);
container.addChild(answer3);
container.addChild(answer4);
container.addChild(explanation);
container.addChild(playButton);
}


private function loadData(questionSet:String):void
{
switch(questionSet)
{
case "cap":
currentQuestion = "What is the term for the number of a company's shares currently available for trading?";
currentAnswer1 = "The Cap" ;
currentAnswer2 = "The Float";
currentAnswer3 = "The Book";
currentAnswer4 = "The Major Leagues";
currentExplanation = "If a large percentage of the float is 'short' then it can set up a short squeeze.";
break;
case "amzn":
currentQuestion = "How much has Amazon gone up in the last 10 years?";
currentAnswer1 = "100%" ;
currentAnswer2 = "10000%";
currentAnswer3 = "1000%";
currentAnswer4 = "400%";
currentExplanation = "Yes, it's gone up a hundredfold. Buy and hold!";
break;
}

}

private function clear():void
{
question.visible = false;
answer1.visible = false;
answer2.visible = false;
answer3.visible = false;
answer4.visible = false;
explanation.visible = false;
}
}
} 

Answer 1

I figured out a solution.

Instead of instantiating at the time of declaration:

private var timeline:TimelineLite = new TimelineLite(); 

I just did

private var timeline:TimelineLite; 

I then instantiated it in the initTweens() function. That did the trick. For some reason the timeline was running automatically, just by virtue of it having been instantiated when declared, no matter where it was called.

Answer 2

The issue is with your makeVisible() called from your playClickHandler(e:MouseEvent). If you comment or remove that line it should work the same way as your ADDED_TO_STAGE event.

The reason being is that the AutoAlpha plugin controls the visibility for you, so you shouldn't have a need to call the makeVisible().

Source: http://www.greensock.com/as/docs/tween/com/greensock/plugins/AutoAlphaPlugin.html