Continuous horizontal text tween help please!

[Shaunus]

Hi there, greetings from South Africa! Thanks for an awesome product.

 

I am trying to find the best way to do the following as there are many ways it can be done. Basically I need to implement a continuously scrolling text banner (e.g. continuously scrolling news ticker that loops) that gets updated from time to time via a read from an XML file. Thus once a minute I will read in the text and scroll this across the screen. I am having issues with finding the best way to do this (just on the tweening side mainly), some points:

 

1) The character length will vary, could be anything from 100 characters to 5000 characters

2) The animation needs to be as smooth as possible (thus cannot tween a textfield that is 5000 characters long!)

3) When the tween finishes, it needs to loop so that you always have text on the screen. If I am tweening one long textfield, then standard looping will not work too well as the screen will have no text on it when the tween is coming to an end (as it leaves the screen to the left)

 

Any suggestions will be greatly appreciated!

Thanks

Shaun

[GreenSock]

Off the top of my head, here are a few options:

 

1) Use two identical TextFields and tween them together (one trails the other). That way, there will never be that gap on the screen. Tween them both and use an onComplete to reposition it back to where it began and do your XML updates. Then figure out how long the text is which will determine how far you need to tween it - calculate the duration of the tween based on a constant velocity.

 

-OR-

 

2) Use a BitmapData to improve rendering performance. draw() your TextFields to the BitmapData, but move the area you're capturing over the course of time. Kinda like a camera panning across a still object (your TextFields). This is certainly a bit more complicated to set up initially, though. (sorry, I don't have time to write all that code out for you right now).

 

Hope that gives you a nudge in the right direction.

[Shaunus]

Thanks man, I will see what I can try come up with tonight!

[Shaunus]

Hi there Mr Greensock

 

I have got the text tweening nicely across the screen with multiple messages, but really battling to get it smooth. Tweening a few words seems as jerky / twitchy as tweening a number of messages. On the computer that will be running the app, if I change the display from 32 bit to 16 bit, it makes a difference, but just not enough. Also if I set the frame rate to 120 versus say 60, it is much better.

 

I have also seen that if I slow the tween right down, it gets less jerky / twitchy, but alas we can't have it tweening so slow. The tween seems to move fine for a little while, then twitch, then move again etc ect. The method I have gone with is as follows:

 

Basically I put the messages into an array, then create textfields one after another to the right of the screen seperated by a distance. I then add all these guys into a timelinemax, and then tween them all together. When complete I loop. (I would still like to add another timelinemax to follow this one so that you don't get the gap on the screen trailing the end of the first tween)

 

Please send me any suggestions you may have to smooth out my tween!

Thanks

Shaun

 

Code below:

 

messagesArray.push("Test Message 1");

messagesArray.push("Test Message 2");

 

var xPosition = stage.stageWidth;

var totalWidth = 0;

var distanceBetween=150;

var speed=80;

 

for (var i:int; i < messagesArray.length; i++) {

myTextField = new TextField();

myTextField.embedFonts = true;

myTextField.htmlText = messagesArray;

myTextField.autoSize = TextFieldAutoSize.LEFT;

//myTextField.antiAliasType = AntiAliasType.ADVANCED; // WAY WORSE WITH!

myTextField.selectable = false;

myTextField.setTextFormat(myFormat);

myTextField.x = xPosition;

myTextField.y = 200;

 

addChild(myTextField);

trace("Adding Child");

textFieldArray.push(myTextField);

 

if (i < (messagesArray.length-1)) {

totalWidth = totalWidth + myTextField.width + distanceBetween;

xPosition = xPosition + myTextField.width + distanceBetween;

} else {

totalWidth = totalWidth + myTextField.width;

xPosition = xPosition + myTextField.width;

}

}

 

 

var globalDuration = (totalWidth+stage.stageWidth+distanceBetween)/speed;

 

timeline1 = new TimelineMax({onComplete:tweenFinished});

timeline1.pause();

for (i = 0; i < textFieldArray.length; i++) {

var myTextField:TextField = TextField(textFieldArray);

timeline1.insert(TweenMax.to(myTextField, globalDuration, {x:-xPosition, ease:Linear.easeNone}));

xPosition = xPosition - myTextField.width - distanceBetween;

}

timeline1.resume();

 

}

[Shaunus]

Maybe using scrollrect or cacheasbitmap with some smoothing?

[Chris]

What would someone have to do to add the first message item to the end so it looks seamless and loops infinitely?

[GreenSock]

What would someone have to do to add the first message item to the end so it looks seamless and loops infinitely?

That was was the first answer given (scroll up).

 

Also, this thread may (or may not) help too in terms of infinite scrolling: viewtopic.php?f=1&t=4226