Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
stevenp

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

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Wow! Thank you Carl.

 

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

 

Thank you!!!!

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×