Updating Dynamic Text Box When "Entering" New Label? [Solved]

[stevenp]

Greetings one and all. Hopefully Christmas brought your family together.

 

Thank you in advance.

 

I have a need to update a dynamic text box when a new label is reached. The animation is a sequence of lines drawn, points reached and then the point animated, and an image faded. This all works quite nicely - Jack, your packages are _amazing_!!

 

What I would like to do is as best I can explain: as each label is reached, a dynamic text box is updated with new text. On each new label created, would an "onStart" be apropos? And ... how would I populate the box? I've built dynamic text boxes that are stacked upon each other and when a new label reached, the old text box is alpha-faded out & the new is alpha-faded in. That seems wasteful and is certainly inelegant.

 

My SWF is large, at 51 labels and with unrelated animation and content, but I've trimmed it down to 4 labels in the code below. Any help will be appreciated.

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;

mc_ball.x = P1.x;
mc_ball.y = P1.y;
mc_map_uk.alpha = 0;

var line:Shape = new Shape();
addChild(line);

// timing variables /////////////////////////////////////////
var timer_tweek:Number = .8;
var staticTimer_var:Number = 4;
var image_fade_var:Number = .01;
var point_bounce_var:Number = 3;
/////////////////////////////////////////////////////////////

drawRoute();

function drawRoute () {
	var tl_drawRoute:TimelineMax = new TimelineMax();

	/////////////////////////////////////////////////////////////
	// add each line tween and label the insert point
	// draw using same time for each tween:
	tl_drawRoute.to(mc_ball, staticTimer_var, {x:P2.x, y:P2.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_1");
	tl_drawRoute.to(mc_ball, staticTimer_var, {x:P3.x, y:P3.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_2");
	tl_drawRoute.to(mc_ball, staticTimer_var, {x:P4.x, y:P4.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_3");
	tl_drawRoute.to(mc_ball, staticTimer_var, {x:P5.x, y:P5.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_4");
	/////////////////////////////////////////////////////////////
	line.graphics.clear();
	line.graphics.lineStyle(3, 0xFF0000);
	line.graphics.moveTo(mc_ball.x, mc_ball.y);
	/////////////////////////////////////////////////////////////
	//		insert dot tweens at the appropriate label
	//		each tween has the same duration and will start when it's respective line tween starts
	tl_drawRoute.insert( TweenMax.fromTo(P1, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_1");
	tl_drawRoute.insert( TweenMax.fromTo(P2, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_2");
	tl_drawRoute.insert( TweenMax.fromTo(P3, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_3");
	tl_drawRoute.insert( TweenMax.fromTo(P4, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_4");
	/////////////////////////////////////////////////////////////
	// image fades called at apporpriate label
	tl_drawRoute.insert( TweenMax.fromTo(I1, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_1");
	tl_drawRoute.insert( TweenMax.fromTo(I2, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_2");
	tl_drawRoute.insert( TweenMax.fromTo(I3, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_3");
	tl_drawRoute.insert( TweenMax.fromTo(I4, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_4");
}

function drawLine() {
	// trace("drawLine called");
}

function testComplete () {
	// trace("test complete");
}

Best,

Steve

[Carl]

Thanks for the warm wishes.

 

Not sure if I understand you completely but assuming you just need to use a TimelineLite/Max to update text while and animation is playing I would suggest something like this:

 

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


var tl = new TimelineLite() 


tl.call(changeText, ["phase 1"])
  .to(mc, 1, {x:400})
  .call(changeText, ["phase 2"])
  .to(mc, 1, {y:200})
  .call(changeText, ["phase 3"])
  .to(mc, 1, {x:0})
  .call(changeText, ["phase 4"])
  
  
function changeText(message:String): void {
title_txt.text = message 
}

As mc is tweened around the stage the title_txt TextField will update with new text.

 

Attached is an fla that can be compiled with the latest version (v12) of GSAP: www.greensock.com/?download=GSAP-AS3

 

--

 

Also with v12 you can consolidate your code quite a bit like so

 

old

tl_drawRoute.insert( TweenMax.fromTo(P1, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_1");
tl_drawRoute.insert( TweenMax.fromTo(P2, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_2");
tl_drawRoute.insert( TweenMax.fromTo(P3, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_3");
tl_drawRoute.insert( TweenMax.fromTo(P4, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_4");

new: use TimelineLite.fromTo() instead of inserting a TweenMax.fromTo()

tl_drawRoute.fromTo(P1, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}, "point_1");
tl_drawRoute.fromTo(P2, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}, "point_2");
tl_drawRoute.fromTo(P3, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}, "point_3");
tl_drawRoute.fromTo(P4, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}, "point_4");

you can read about TimelineLite's fromTo() method here

 

This gives a good overview of API changes that can greatly reduce the code you need to type:

http://www.greensock.com/v12-api-change/

 

 

updateText_CS5.zip

[stevenp]

Wow! Thank you Carl.

 

That's some stuff to wrap my brain around. I'll get right on that.

 

Thank you!!!!

[stevenp]

Bingo!!!

 

The syntax in this kind of looks odd:

tl.call(changeText, ["phase 1"])
  .to(mc, 1, {x:400})
  .call(changeText, ["phase 2"])
  .to(mc, 1, {y:200})
  .call(changeText, ["phase 3"])
  .to(mc, 1, {x:0})
  .call(changeText, ["phase 4"])

No commas? No semi-colons? But, it does work. And, I was able to still insert labels using that.

 

Wowsers!!! Thank you _very_ much. I'm going to dig into ".call".

 

Best regards,

Steve