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

[temeraire]

Hi,

 

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?

 

(Sorry, can't figure out how to format code)

 

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;

}

}

}

[Carl]

Try calling restart() or play(0) on your timeline after you insert the tweens.

timeline.restart()

Also what version of the platform are you using. Try adding

 

trace(TweenLite.version)

 

Let us know how it goes.

[temeraire]

Hi Carl,

 

Thanks. I was using 11.6 but have now upgraded to 12.1.2.

 

And I've fixed it. What was happening was that when I declared timeline, I also instantiated it. That caused it to run no matter where I called the initTweens() function -- it just ran when the swf loaded. What I've done now is this:

 

private var timeline:TimelineLite;

 

And then I only instantiate it in the initTweens function:

 

private function initTweens():void

{

timeline = new TimelineLite();

...

 

Thanks!

[Carl]

Cool, and now that you are on v12. Be sure to watch this video: http://www.greensock.com/sequence-video/

 

It shows you how some new and very important methods of TimelineLite/Max work.

You know longer need to use insert(), append(), appendMultiple and insertMultple.

 

For instance your 2 lines of code:

 

timeline.insert(TweenLite.to(answer1,fadeSpeed, {autoAlpha:0, delay:4}),0);
timeline.insert(TweenLite.to(answer3,fadeSpeed, {autoAlpha:0, delay:7}),0);

 

can now be

 

timeline.to(answer1,fadeSpeed, {autoAlpha:0}, 4) //start at a time of 4
  .to(answer3,fadeSpeed, {autoAlpha:0}, "+=3"); //start 3 seconds after previous tween ends