Take the 2-minute tour ×

I am trying to create a very simple animation of an image moving horizontally across the screen 300 pixels continuously using Flex (to run in the browser). I am finding that the animation is very choppy. Each time I run the animation, the result is different. Sometimes the animation will play fine for a few seconds before choppiness occurs, sometimes it will occur immediately. This was tested on multiple Windows 7 machines in Internet Explorer and Firefox.

I have tried several different approaches and none seem to stop the choppiness/jitter.

Approach 1: using s:move

<s:Power id="_powerEasing" exponent="1" />
<s:Move id="_moveRight" target="{_sword}" xFrom="{_swordMin}" xTo="{_swordMax}"
                easer="{powerEasing}" />

<s:BitmapImage id="_sword" visible="true" scaleX=".99" scaleY=".99"
    source="@Embed('/assets/images/combat2/attackbar/sword.png')" x="0" y="0" />

Which is called using a _moveRight.play();

The second approach I tried was moving the image object on each enter frame. Image's new x position is calculated by taking the difference in time and multiplying by a speed. Which looks like this:

var now:Number = getTimer();
var toMove:Number = ((now - _lastTime) / 1000) * _speed;
_sword.x += toMove;
_lastTime = now;

The third, and final approach that was tried was creating this as a movie clip in Flash. This too was choppy.

The best result was approach 1.

I've experimented with s:BitmapImage, mx:Image as well as using FlexSprite but I am starting to think there must be something I am missing to make this smooth.

Any ideas or best practices I am missing that will help this animation?

Edit: thanks for all the suggestions but nothing has worked.

Here is a simple example. I've enabled view source so you can see the implementation. http://legionofderp.com/sword-demo/SwordTestDemo.swf

It may run smoothly for a few seconds at first but then the animation begins to run very choppy

Edit 2: Here is another example, this one was created using Flash. http://legionofderp.com/testing-sword-03.swf

Answer Thanks for all the suggestions everyone. I was able to get the animations to run smoothly by setting the wmode parameter in the html template to direct.

share|improve this question
I'd be interested in seeing this run... it sounds like something else is going on; there is no reason a simple move transition wouldn't be smooth on a desktop. I might suggest looking into GreenSock the tween library. (I did a demo n that here: flextras.com/blog/index.cfm/2011/11/15/… ) If you're building a game you probably want to investigate the Blitting concept. –  Reboog711 May 6 '12 at 1:18
what's the size in kb for sword.png ? –  Vishwas Gagrani May 6 '12 at 13:22
the size is 2.59kb –  Kat Y May 6 '12 at 16:16
Thanks for the comments, I am going to explore blitting and different tween libraries today. –  Kat Y May 6 '12 at 16:17
Check out this question and see if it is the same issue stackoverflow.com/questions/9676065/… –  Pixel Elephant May 6 '12 at 16:38
show 2 more comments

2 Answers

Try using Enterframe event rathar than a timer ( getTimer or setInterval) . With my experience i have noticed that timers are CPU intensive and therefore affects the animations also. While enterFrame event are smoother to run. Try it.

addEventListener(Event.ENTER_FRAME , move ) 

function move ( e:Event)

  // your animation code here
share|improve this answer
I have tried both enter frame and timer based animation. –  Kat Y May 6 '12 at 16:18
and what about bitmap caching ? –  Vishwas Gagrani May 6 '12 at 19:23
add comment

When it jitters is the animation movement really slow (<1px movement every iteration)? If so you might want to try forcing the pixelSnapping property on your bitmap to NEVER.

Also, have you experimented with toggling on CPU or GPU acceleration - If so, same results?

Does running in the standalone flash player result with the same effect?

Edit: Just noticed you added scaling properties which should override the pixel snapping.

share|improve this answer
add comment

Your Answer


