Jump to content


Tweening a long wrapped text-line with BlitMask scroll property

Moderator Tag

Recommended Posts


I am trying to create smooth scroll animations of long text lines, from side to side (like stock exchange running texts).

I have tried applying a blitmask to mi text line, activating wrap and tweening the line to a very big negative X: the effect is what I want, but I wonder if this method is slower than using scrollX, as it sometimes stutters on some PCs.


I have tried to replace this method using the scrollX property, and the text line scrolling looks a bit smoother, but I have a problem, maybe I didn't understand how to use scroll property the right way.

I have two text lines:

- the first one is wider than the window, while its blitmask is as wide as the window: I set a small wrapOffsetX to divide the end from the beginning of the wrapped texts, and scrollX = 0

- the second one is narrower than the window, while its blitmask is as wide as the window again: I set a small wrapOffsetX and scrollX = 0 here too


How do I write the 2 tweens to scroll the lines from right to left indefinitely? If I set a positive scrollX for the first line it moves from right to left, while the second line moves from left to right!



Link to comment
Share on other sites

Ok, this is the "to X" approach, what I already did (apart for repeat: -1 :oops: ), but what if I wanted to use the "to scrollX" method?

TweenMax.to(text1, 10, {scrollX:?, repeat:-1, ease:Linear.easeNone});


TweenMax.to(text2, 5, {scrollX:?, repeat:-1, ease:Linear.easeNone});

I'd like to try harder with scrollX, because it looks smoother and without stutterings (even if with the described problems): do you think it is possible to use it to loop objects smaller or bigger than the blitmask? Maybe I have to calculate the exact proportion between text and mask width and use it as target scrollX value?

Link to comment
Share on other sites

do you think it is possible to use it to loop objects smaller or bigger than the blitmask? Maybe I have to calculate the exact proportion between text and mask width and use it as target scrollX value?



Yes, there should be a scrollX value that will give you a seamless loop based on the right proportion.


A very basic example.


If you're BlitMasks's target is half the width of the BlitMask, tweening to scrollX:2 will give you a nice loop


for instance just change the width of text2 in my example to be 275 (half of 550) and try


TweenMax.to(blitMask2, 5, {scrollX:-2, ease:Linear.easeNone, repeat:-1});

Link to comment
Share on other sites

I tried to calculate the scrollX value for the wide textline this way:

maskWidth / (textLine.width + wrapOffset)

the value is about 0.9, as expected, but the scrolling is terribly slow and it scrolls about 150 pixels before repeating it from the beginning.

I tried value 20.4, and it is the value I need to obtain a perfect loop for the first line, but I wonder why!

The textline length can change, so I need to understand how to calculate the correct scrollX dynamically.

Link to comment
Share on other sites

I have tweened the short textline too, and the perfect scrollX value is -0.364: it looks like this value is linked to some sort of calculation of this kind:

maskWidth/ (textLine.width + wrapOffset - maskWidth)

I noticed that I have a minimum stuttering with scrollX too, but different: it looks like the wrapped texts, the texts repeated at the end of the first textline, move differently from the others, as if they were not part of the same texture, but using blitmask in bitmapMode this shouldn't happen (I think)!


Did I overestimate blitmask power or is it still beta? Or maybe it is thought for masks as big as target images only?

Link to comment
Share on other sites

The perfect formula for the long textline is

(textline.width + wrapOffset) / (textline.width - maskWidth)

but I wonder why.

It does not work with the short textline...


Still experimenting...


EDIT: the short textline was scaled by 1/2, so I changed the formula like this

(textline.width * 0.5 + wrapOffset) / (textline.width * 0.5 - maskWidth)

and the result is nearly perfect, apart for a small but visible jump of the textline.


Maybe I am going to find the correct formula, but... what am I searching for? Why does blitmask behave like that?

Link to comment
Share on other sites



Thanks for reporting all your progress. I regret that we've been busy.


For determining the scrollX of the shorter text, I don't have an algorithm for you at the moment but I imagine you are real close and this might just get you there. Either way, the following is a dynamic approach to looping the shorter text. Basically you just need to move it far enough so that it is offstage and grab that scrollX value. In your case you may have to add in the wrapOffset too, but give this a try:


//text shorter than width of BlitMask
var blitMask2:BlitMask = new BlitMask(text2, text2.x, text2.y, 550, 37, true, true, 0xFFeeeeee, true);

//move the target of the blitmask offstage to the left
TweenLite.set(text2, {x:-text2.width})
//updagte the BlitMask
//record the current scrollX value
var blit2loopPoint = blitMask2.scrollX;
trace("blitMask2.scrollX = " + blit2loopPoint);
//tween from scrollX:0 to scrollX:blit2loopPoint
TweenMax.fromTo(blitMask2, 4, {scrollX:0}, {scrollX:blit2loopPoint, ease:Linear.easeNone, repeat:-1});
Link to comment
Share on other sites

Nice suggestion, I added wrapOffset and obtained the correct scrollX value, thank you!

In doing this kind of calculations you need to remember if an item has been scaled, and multiply, where needed, the scale factor as I wrote above.


I also noticed that using blitmask to scroll a scaled item implies a minor graphic glitch: to be more precise, this happens for certain values of the scale factor. This would be an  argument for a new discussion, but in the meantime I will expose it here.


If I have a scaled item like my textLine and I use a blitmask to scroll it I may experience stuttering, but in the wrapped copies only! The "main" instance of the textline will scroll perfectly, while the second, the third etc may stutter depending on the scale factor (certain values are more dangerous than others, like different scrolling speeds may affect this glitch too).

If the second instance stutters going back and forth of 1 pixel, the third instance will go back and forth of 1 or 2, and so on, 3, 4, 5 etc, depending on wrapping approximation, I think. This is surprising to me, as I thought that if the blitmask target kept the same scale, its wrapped bitmap version used by the blitmask was not updated at each frame, so intruducing approximation incongruencies between frames, but it looks like I was wrong.

Carl, do you confirm my suspects?

If this is true, is there a way to update the blitting without redrawing the bitmap?

Link to comment
Share on other sites

Hi this is very hard to visualize. 

It would be most helpful if you could provide an FLA (the simpler the better) that exhibits this strange stuttering of scaled BlitMask targets.

Link to comment
Share on other sites

Well, I tried to simulate it with your FLA (scaling texts down), but the scrolling was very smooth, I wonder what was the problem in my case. Now I have changed my code a lot so I can't reproduce the old situation, but if Stumble on the glitch again I will tell you for sure.


Thank you Carl!

Link to comment
Share on other sites

No problem. I appreciate the update. 

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.