Jump to content

Issue with button appending animation (scope issue?)

- - - - -

2 replies to this topic
Issue with button appending animation (scope issue?)
Hello all. I am flummoxed here. I am not good at coding, trying to do this for the first time really. I have been banging my head against the wall trying to get this thing working. Any help is greatly appreciated.

Background:
I am doing a little quiz app with some fancy tweens. Some will be reused, some will not. You start the quiz by clicking a button, things animate in. Then you answer a few questions, and then it tally's your responses and outputs the corresponding result. Essentially, I have four animation sections. An intro, a welcome screen, the questions, and the final answer. I have defined four global animation containers for each section (so I can reverse some of the animations easily from other functions--such as animate out the intro screen text and animate in the questions).

The transitions from the welcome screen (after pressing the start button) to go to the questions section (called secondScreen) is where I am stuck.

Problem:
What I am running into is that when I press the button, the first screen animation reverses properly, but no matter how I try to attach a new tween to the "secondScreen" timelineLite object, it just won't work (unless it is outside of any function). Isn't it possible to append a tween to a timelineLite object by clicking a button? The code so far is below for reference.

To answer a few basic questions: the objects are all on the stage directly. Each has the appropriate instance name (hence appending the animation to secondScreen works when put directly outside the button). no errors on compile. And it doesn't seem to matter what object on the stage I am trying to tween (in this case the container for showing how many questions there are and what step the user is on).

import com.greensock.*; 
import com.greensock.easing.*;

//******************
//global variables
//******************

var tallyA:Number = 0;
var tallyB:Number = 0;
var tallyC:Number = 0;
var tallyD:Number = 0;

var resultsText:Array = [
	[results.bigA,results.bigB,results.bigC,results.bigC], 
	["Headline1","Headline2","Headline3","Headline4"],
	["Body1","Body2","Body3","Body4"]
];
//testing array
trace("first result: ");
trace(resultsText[0][0].name);
trace(resultsText[1][0]);
trace(resultsText[2][0]);

//******************
//set up timeline groups for animation
//******************

var introTime:TimelineLite = new TimelineLite();
var firstScreen:TimelineLite = new TimelineLite();
var secondScreen:TimelineLite = new TimelineLite();
var thirdScreen:TimelineLite = new TimelineLite();

//******************
//Animation groups
//******************
function doIntro(){
//Intro Animation (one-off, never re-animates):
	//1. fade in mainBg, offset fade in shading (background stuff, top overlay vignetting)
	introTime.appendMultiple([new TweenLite(mainBg, .5, {alpha:1}), new TweenLite(shading, .5, {alpha:1})],0, TweenAlign.NORMAL);
	//2. move in deco1, move in deco2 (decorations)
	introTime.appendMultiple([new TweenLite(deco1, .75, {x:-91, y:-86, ease:Expo.easeOut}), new TweenLite(deco2, .75, {x:690, y:126, ease:Expo.easeOut})], 0,TweenAlign.NORMAL );
	//3. stagger in mainA, mainB, mainC, mainD (circles decoration)
	introTime.appendMultiple([new TweenLite(mainA, .5, {alpha:1}), new TweenLite(mainB, .5, {alpha:1}), new TweenLite(mainC, .5, {alpha:1}), new TweenLite(mainD, .5, {alpha:1, onComplete:firstScreenAnim()})], 0,TweenAlign.NORMAL);
	//4. fade in first screen
};

function firstScreenAnim(){
//first screen info animation (will be used to initialize the quiz later):
	firstScreen.appendMultiple([new TweenLite(introHeadline, .5, {alpha:1}), new TweenLite(introBody, .5, {alpha:1}), new TweenLite(startQuizBtn, .5, {alpha:1})],.5,TweenAlign.SEQUENCE);
};

doIntro();

function buttonTest(event:MouseEvent):void{
	//test button listener attachment
	trace("over, over, roger.")
};

startQuizBtn.addEventListener(MouseEvent.CLICK, startQuizAnim);
startQuizBtn.addEventListener(MouseEvent.MOUSE_OVER, buttonTest);

function startQuizAnim(event:MouseEvent):void{
	firstScreen.reverse(); //works
	//secondScreen.append(new TweenLite(mySteps, .5, {y:-16})); //doesn't work
	startQuizBtn.removeEventListener(MouseEvent.CLICK, startQuizAnim);
	startQuizBtn.removeEventListener(MouseEvent.MOUSE_OVER, buttonTest);		
	doPageAnimation(); //doesn't work either
};

//secondScreen.append(new TweenLite(mySteps, .5, {y:-16})); //works just dandy anywhere's outside any function, and works added to any appendMultiple in doIntro.

function doPageAnimation(){
	trace("entered doPageAnimation"); 
	secondScreen.append(new TweenLite(mySteps, .5, {y:-16})); //doesn't work either
};




  • LocationChicago Area
Issue with button appending animation (scope issue?)
It looks like you're misunderstanding the way timing works with tweens/timelines. By default, a timeline will play immediately. It gets placed on the root timeline (which is constantly playing/progressing) right away and as the root timeline's playhead passes over it, the timeline plays. In your case, you create your timelines and don't populate them. This means they're placed on the timeline and technically play but since there are no tweens in them, they complete right away. Then let's say after 5 seconds elapse, you append a 1-second tween to that timeline that you created 5 seconds ago. It'll jump to its end state because the playhead is already at the 5-second point but you inserted your tween at the beginning which has long since been over.

If you haven't done so already, please watch the video at http://www.greensock...imeline-basics/

You can create your timelines initially paused if you want, and then play() them when you populate them. But it doesn't usually make sense to go back and add tweens to timelines that you created a long time ago (don't get me wrong - you can definitely do that and sometimes it's appropriate).

Issue with button appending animation (scope issue?)
Thanks for the response so quickly!! Completely makes sense. Your response made it click into place what I wasn't thinking about. That was a silly thing to forget.
In this instance, I could alternately force the blank timeline (now populated) to play by adding a secondScreen.play() or secondScreen.restart() event after appending the tween in the doPageAnimation function.
Or do it like you mentioned (adding to paused object in the first place).

thanks again!!!!





0 user(s) are reading this topic

members, guests, anonymous users