Jump to content
Search Community

Rotated scrolling ticker tween jittery animation

baldscone test
Moderator Tag

Recommended Posts

Hi,

I've been trying to find a solution to a problem I've been having with a dynamic scrolling ticker which has to be rotated by two degrees. I have tried using transformMatrix which I then discovered (after reading the API more thoroughly) shouldn't be combined with a normal tween or I assume rotation. I also tried scrollRect and using cached bitmaps but no love. I can get the image to rotate and look crisp using transformMatrix to apply the rotation but because it is also scrolling from left to right I then need to add in the vertical shift and as soon as I start scrolling it from left to right it jumps up and down and is jittery as it scrolls from left to right. For the record I am using TimelineMax with fromTo Tweens for each ticker item. I have pasted the code that i use for tweening all the message clips below but I think it's more of a "how can I achieve this in theory" type question at the moment!

Do you have any suggestions as to how I can achieve this rotated ticker animation?

 

        {
            trace("start");
            if(!messageSprites) return;
             
            //Tween all clips to offscreen location which is stored in them
            timeline = new TimelineMax({repeat:-1, yoyo:false, repeatDelay:0});
            for(var i:int = 0; i                var msg:TickerMessage = messageSprites[i];
                    //Normal scrolling
                    //timeline.append( TweenMax.fromTo(msg, _scrollDuration, { x:msg.initX, ease:Linear.easeNone }, { x:msg.endX, delay:_messageDelay, ease:Linear.easeNone } ) );
                    //Updated to use transform matrix
                    timeline.append( TweenMax.fromTo(msg, _scrollDuration, { transformMatrix:{x:msg.initX}, ease:Linear.easeNone }, {  transformMatrix:{x:msg.endX}, delay:_messageDelay, ease:Linear.easeNone} ) );
                }
                 
            }
             
            timeline.play();
             
            _hasStarted = true;
             
        }

Link to comment
Share on other sites

I don't see the rotation tween(s). And yeah, I'd recommend using transformMatrix for all your tweens if possible. If things are jittery, I wonder if it has to do with graphics rendering pushing the processor too hard. Typically performance problems are not related to ActionScript execution. Instead, it's graphics rendering in Flash that takes a ton of work. Are you working with large images or a complex vector graphic?

 

Oh, and if you do scrollRect or cacheAsBitmap, your position tweens will only be allowed to render on whole pixels (that's a Flash thing, not TweenLite/Max) which can make things look a little jittery at slow speeds.

 

It would be SUPER helpful if you posted a simple example FLA that clearly demonstrates the issue. The simpler the better (no need to post your production files).

Link to comment
Share on other sites

Yeah - I tried the rotation tween in the transform matrix but then I run in to problems working out the vertical offset - i.e. the rotation is fixed and the graphic just scrolls right to left at an angle. Hard to explain so as you suggested Ive stripped out a lot of code and bundled it up into a fla example. You may need to embed a different font in the Library "TickerFont" to get it to work, Ive used VAG.

As you will see in the timeline Ive set the rotation on the whole clip. I did notice that the animation is a bit choppy anyway if I leave it with no rotation - and if I take off filters etc which are on there. Anyway - any help would be great fully appreciated. For the record Im using the club build from 2011-10-06 of your awesome libraries - which of course Ive left out!

ticker problem.zip

Link to comment
Share on other sites

Hi just as an update. I re-coded this from scratch and now it's working much better. Still a bit of an occasional bottle neck stutter when scrolling but no y axis jitter. I am using bitmaps and transformMatrix in a sprite but then rotating the parent clip 2 degrees and it is way better. Any insights on combo of rotation and nested sub pixel rendering?

Link to comment
Share on other sites

I didn't have time to dig through all your code, but from a cursory glance, it does indeed look like the issue was Flash imposing whole pixel values on your object because you applied a filter. Again, that is totally unrelated to the tweening engine - Flash forces cacheAsBitmap to true whenever a filter is applied. Rendering only on whole pixel values makes things look jumpy, particularly in the scenario you had.

 

Nesting the object inside another one and applying the filter on the parent will certainly help. Or you could use BlitMask which might perform even better for you because it could ease the load on the CPU by using blitting techniques automatically. See the attached example to see what a difference there is between a regular tween of an object with a filter and doing the same thing with a BlitMask. Carl just did a nice video tutorial on BlitMask that might help you understand it better:

http://www.snorkl.tv/2011/10/use-blitma ... d-looping/

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.
×
×
  • Create New...