Update: I have created a text ticker / scrolling text component based off of this tutorial that is integrated with a XML file so users have more options and can make easy changes.  Click the image below to learn more.

So I have been working on a mp3player that is designed similar to a ipod with a little bit different functionality. I needed the text fields to scroll back and forth so you could see all the text written inside of it, if the field was shorter than the width of the text. After looking around for a tutorial or another persons help and not finding a thing for Actionscript 3, I decided to write my own. I am using Tweenlite to handle the tweens because its really low on weight and its a very smooth and powerful tweening engine. I am almost done with the mp3player and I will show you that very soon, but I wanted to post an example of the scrolling text or flash ticker (as some people call them) to you first before then. The example and code is below. I use one movieclip with an instance name of item that has two items inside of it, a dynamic textfield holding the text and a mask to only show the part I want shown.

//import libraries
import flash.utils.*;
import flash.text.TextField;
import gs.*;
import gs.easing.*
 
//make the text too long for the textfield and assign the mask for it
item.menuItemText.text = "This text is too long to fit in this tiny textfield, here is the end";
item.menuItemText.mask = item.menuItemMask;
 
//call the scrollWords function
scrollWords();
 
//the scrollWords function
function scrollWords():void {
        //make the textfield wordwrap false and autosize to textFieldAutoSize.LEFT
	item.menuItemText.wordWrap = false;
	item.menuItemText.autoSize = TextFieldAutoSize.LEFT;
 
        //if the textwidth is longer than the masks width which is 173 then call goforwardtween
	if(item.menuItemText.textWidth > 173) {
		goForwardTween(item.menuItemText);
	}
}
 
//go forward tween, on complete it calls go back tween
function goForwardTween(tf:TextField):void {
	TweenLite.to(tf, 3, {x:-(item.menuItemText.textWidth) + 163, delay:1, onComplete:goBackTween, onCompleteParams:[tf] });
}
 
//go back tween, on complete it calls go forward tween
function goBackTween(tf:TextField):void {
	TweenLite.to(tf, 3, {x:10, delay:1, onComplete:goForwardTween, onCompleteParams:[tf] });
}

Cya

Tags: Actionscript 3, Development, Flash, scrolling text, text ticker

This entry was posted on Wednesday, July 29th, 2009 at 11:48 AM and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.