Smooth Scrolling Text

[NewYears1978]

Forgive me I am not a Flash Developer and only working with some flash for some personal projects.

I am making a News Ticker type file with a very long amount of text, I did this with classic tween using text, image and also with AC3. Both resulted in very jittery animation no matter what. Tried longer animation, different framerates, made sure font anti-alias was on animation and the font was embedded.

 

It always has this rubberbanding type look, as if it was rolling and getting hung up on something.

 

Done TONS of googling and found no solutions but lots of similar posts. I know its possible because I see it on websites all the time.

 

Many places pointed to Greensock so here I am.

 

Now I made a simple tween as per below, but every time gave me the exact same results as the other methods. Is there no way to get smooth scrolling text ticker?  Thanks in advance!

import com.greensock.*;
TweenLite.to(text, 500, {x:-3430, scaleX:0.9, scaleY:0.9});

[Diaco]

Hi NewYears1978 

 

pls check this thread : http://greensock.com/forums/topic/13306-gsap-tweenmax-news-ticker-non-flash/

[Carl]

HI New Years 1978,

 

It's hard to tell from your code what the problem may be. It would help if you posted an example that we can see.

Scaling the text while it is moving may not be the easiest thing for flash.

 

There isn't much GSAP can do to help how Flash chooses to render your animations. All it does it animate values. If you are seeing the same results with GSAP and other ActionScript techniques, I'm fairly confident you have just hitting a limitation of Flash.

 

Myself and many others around here would warmly encourage you to move away from Flash. I think you will find that animating with the JavaScript version of GSAP is just as easy as AS3 and your work will be seen on more screens. 

[Carl]

I've moved this post to our Flash forum

[NewYears1978]

Sorry for posting in wrong section..woops!

 

The scaling wasn't actually in my code that was just something I tried that I read.

I am doing a simple horizontal scroller. There is NOTHING else in the entire file. The SWF file is ran directly in a program that I use.

 

The only variable I can think of causing problem is that the text is VERY long..like 500 characters..other than that I can't figure out why I can't make it smooth. 

 

My SWF file just has a normal mask and text layer in it.

 

As for using Javascript, I would actually quite like to but the limitation of the program I am using can only use images and flash (SWF) files. I guess I will just have to settle with some choppiness

 

It's not a huge project, or even anything lots of people will see, it's more a personal project that a select few people might use. It's retro gaming related  Might just have to chop it up to flash limitation and just remove the scorlling text idea.

 

I know I have seen smooth scrolling in flash before though so I know it's possible..maybe need some tweaks..like possibly breaking up the text into smaller chunks so that it's not one like 500 character text box?

[Carl]

Thanks for the clarifications. Text can be tricky because it contains tons of vector data that needs to be analyzed and rendered on each frame. Adding a mask can definitely add to performance problems.

 

For fun you might want to do a test of replacing your text with an image and removing the mask.

 

It sounds like what you are doing would be a great fit for our BlitMask tool: http://greensock.com/blitmask. I probably should have thought of that sooner.

[NewYears1978]

I tried with images and same result. I am not sure if it's flash that's the problem or actually just the program itself I am using.

 

When I do a preview in Flash it seems to be fine..so maybe it's not actually flashes fault but rather the software that's calling the flash.

 

I thought about BlitMask also just hadn't checked into it..wasn't sure if the masks could have angled shapes in them. My mask is a angle at the left part of the screen that the text goes under.

 

Here's an older video showing an example, check bottom of screen:

 

https://youtu.be/IJndNQaytLY?t=14

 

I tested a few things with BlitMask but unfortunately I don't know how to create the effect properly like my example, which also uses a Goto frame 1 to restart. I will had to read the documentation..I did notice that it seems to be smoother.

[Carl]

Yeah, if your preview in Flash is good, then I agree that the problem lies elsewhere.

A BlitMask only supports masking a rectangular area. 

[NewYears1978]

Yeah, if your preview in Flash is good, then I agree that the problem lies elsewhere.

A BlitMask only supports masking a rectangular area. 

 

Ah bummer. Actually I used the angle because of a prexisting image. I can actually change my image to be a square, if blitmask makes it smooth.

If I can figure out how to make a proper BlitMask to test in my app, I will try

[NewYears1978]

Could someone tell me how I go about making a simple tween repeat when finished?

 

import com.greensock.*;

TweenLite.to(mc, 1, {x:-3430});

 

I need to reset the X and Y of my item (mc) back to it's original, then repeat the tween. I know this is simple but boy am I striking out since I am not a coder.

[Carl]

TweenMax makes it easy

 

import com.greensock.*;
TweenMax.to(mc, 1, {x:-3430, repeat:20}); // to repeat infinitely use repeat:-1

http://greensock.com/asdocs/com/greensock/TweenMax.html