Can you tween text without a textbox?

[as3gs]

Hello, I know it's possible to tween a textbox inside a movie clip from one MC to another, but if I had just one text box, but wanted the text to blur each time it was updated, is that possible?

[Carl]

yes, you can tween a dynamic Textfield the same way you would tween a MovieClip. you should have no problem re-using your textfield for multiple messages and blurring them.

[as3gs]

Thanks much. if i had text in the textbox, and wanted to update that with new text, would you have an example of how to do this? I so appreciate the guidance.

[Carl]

this is what i would do

 

make sure your textfield is called message_txt and you are embedding fonts

 

import com.greensock.*;


var words:Array=["this","is","what","i","would","do"];

var count:Number=0;

function showText() {

if (count		message_txt.alpha=0;
	TweenMax.to(message_txt, 2, {alpha:1, onComplete:showText});
	message_txt.text=words[count];
	count++;

} else {
	trace("no more words");
}
}

showText();

[as3gs]

Wow, thanks kindly. I have been playing with test variation of the code, trying to simulate swapping out just new text for old. This test AS code works on the first go-round, but throws a weird error on repeated use. Am I doing something stupid to make this happen? Also, could the same idea be used to change images using TweenLite/TweenMax? This is so helpful, thanks again for your expertise.

 

CODE:

import com.greensock.*;


var test1:String = "THIS IS THE ORIGINAL TEXT";
var test2:String = "HEY THIS IS NEW TEXT!";

message_txt.text = test1;



function show1(evt:MouseEvent)
{
message_txt.alpha=0;
TweenMax.to(message_txt, 2, {alpha:1, onComplete:show1});

message_txt.text = test1;
}
function show2(evt:MouseEvent)
{
message_txt.alpha=0;
TweenMax.to(message_txt, 2, {alpha:1, onComplete:show2});

message_txt.text = test2;
}

Object(this).button_mc.addEventListener(MouseEvent.MOUSE_OVER,show2);
Object(this).button_mc.addEventListener(MouseEvent.MOUSE_OUT,show1);

 

and the ERROR:

 

ArgumentError: Error #1063: Argument count mismatch on test_fla::MainTimeline/show2(). Expected 1, got 0.
at Function/http://adobe.com/AS3/2006/builtin::apply()
at com.greensock.core::TweenCore/complete()
at com.greensock::TweenMax/complete()
at com.greensock::TweenMax/renderTime()
at com.greensock.core::SimpleTimeline/renderTime()
at com.greensock::TweenLite$/updateAll()

[X10]

Hi as3gs,

I'm a little confused as to why you're calling the same function at the end of each function, this might have something to do with your problem.

 

I removed the onComplete's and it works as I would expect it to, was there something you wanted the function to do when it finishes it's Alpha tween?

 

    import com.greensock.*;

   var test1:String = "THIS IS THE ORIGINAL TEXT";
   var test2:String = "HEY THIS IS NEW TEXT!";

   message_txt.text = test1;

   function show1(evt:MouseEvent):void
   {
      message_txt.alpha=0;
   trace('alpha show1 done')
      TweenMax.to(message_txt, 2, {alpha:1});
   trace('message show1 done')
      message_txt.text = test1;
  	   trace('text set to test1')
   }
   function show2(evt:MouseEvent):void
   {
      message_txt.alpha=0;
   trace('alpha show2 done')
      TweenMax.to(message_txt, 2, {alpha:1});
   trace('message show2 done')
      message_txt.text = test2;
  	   trace('text set to test2')
   }

   Object(this).button_mc.addEventListener(MouseEvent.MOUSE_OVER,show2);
   Object(this).button_mc.addEventListener(MouseEvent.MOUSE_OUT,show1);

 

Perhaps I'm missing what you're trying to do

[as3gs]

X10, many thanks for your help. I am admittedly unfamiliar with how to swap out text or images. The example code provided earlier was greatly helpful. I need to have text change out when a user clicks a certain button. I was admittedly tired when trying that which I'm sure is the issue. So if I had 5 buttons, what would be the best way to swap out the text? And can I do that with images too? Many, many thanks to everyone from an excited newbie...

[as3gs]

Hi X10, also when I use your code, like mine, it appears that the first use works with the fade tween, but then after that it only swapped out words without the effects. Is that a known issue or is it just coded incorrectly when used repeatedly?

[X10]

Hey as3gs,

The reason your tween seems to not work is because the tween is still happening, all you are doing is replacing the text, not the entire tween.

So if your tween is 2 seconds, like in the code I posted, and you roll off after 1 second, the alpha for that movieClip is still happening, but the text changes straight away.

This is an overwrite issue that can be fixed quite easily with setting the overwrite to true in both tweens. Have a look at the information for the OverWrite Manager to help you understand.

I have also added a "Finished" function so you can trace and see what's happening:

 

I also changed the MOUSE_OVER AND MOUSE_OUT to ROLL_OVER and ROLL_OUT, see Jack's post here about it, not so much an issue with your code, but useful to know

 

    import com.greensock.*;


   var test1:String = "THIS IS THE ORIGINAL TEXT";
   var test2:String = "HEY THIS IS NEW TEXT!";

   message_txt.text = test1;



   function show1(evt:MouseEvent):void
   {
      message_txt.alpha=0;
   trace('alpha show1 done')
      TweenMax.to(message_txt, 2, {alpha:1,onComplete:finished,overwrite:true});
   trace('message show1 done')
      message_txt.text = test1;
  	   trace('text show set to test1')
   }
   function show2(evt:MouseEvent):void
   {
      message_txt.alpha=0;
   trace('alpha show2 done')
      TweenMax.to(message_txt, 2, {alpha:1,onComplete:finished,overwrite:true});
   trace('message show2 done')
      message_txt.text = test2;
  	   trace('text show2 set to test2')
   }

function finished():void{
trace ("this tween finished");
}

   Object(this).button_mc.addEventListener(MouseEvent.ROLL_OVER,show2);
   Object(this).button_mc.addEventListener(MouseEvent.ROLL_OUT,show1);

[X10]

I need to have text change out when a user clicks a certain button. I was admittedly tired when trying that which I'm sure is the issue. So if I had 5 buttons, what would be the best way to swap out the text? And can I do that with images too? Many, many thanks to everyone from an excited newbie...

 

If you want the text to change when the user clicks the button, instead of MOUSE_OVER/MOUSE_OUT/ROLL_OVER/ROLL_OUT, use MouseEvent.CLICK

 

e.g.

    Object(this).button_mc.addEventListener(MouseEvent.CLICK,show2);

 

X10

 

EDIT: SEE ATTACHED FLA Example (Flash CS4)

[as3gs]

Wow, your help has been awesome. Thanks again. This is the first set of external I have ever used and they are well done.