Advertisement
Animation

Quick Tip: Fixing V-Sync ("Tearing") Issues in Flash

by

In today's (Very) Quick Tip, you'll learn how to solve the common problem of flickering or tearing. This is a horrible effect in Flash where bitmaps flicker as they are updated, or appear to tear into two images (as in the thumbnail).


What Causes These Issues?

In a nutshell: tearing occurs when Flash draws information from two different frames to the screen at once. In the thumbnail image above, you can see how this might look when panning across an image of a tower; the bottom part of the image is from one frame, while the top half is from the next. When watching this in motion, you would only see it for a fraction of a second at a time, but it would still be noticeable.

This is commonly solved using "V-sync" (vertical synchronization), which stops the video card drawing anything to the screen until the screen's next refresh cycle. However, Flash has really poor support for V-sync, because the frame rate of Flash Player is different to the desktop's vertical refresh rate, meaning that objects that have a lot of height will be hit hard by tearing. This is true even if Flash's frame rate is equal to the desktop vertical refresh rate, as they are still not synchronized.

Now you may be wondering: Why don't Adobe fix this problem? The reason is that Flash uses a timeline, and changing the frame rate consequently changes the speed of playback. If you made a game or image gallery running at 60 frames per second and the desktop vertical refresh rate was more than 60 frames per second, you would either have slight stuttering (if you left the movie at 60fps), or would have to play the movie back faster to sync with the desktop. For most content, this wouldn't be recommended at all!

This is a problem game developers have wanted Adobe to fix for a long time but it's obvious that there are issues with them doing so. So, at the moment, we developers have to come up with creative ways to solve this problem ourselves. There is no easy way to fix it on all computers, but as most monitors have a refresh rate of 59.9 or 60 then you can set the frame rate to 60 to solve it for most users. However, this requires more processing power and could slow your application down.

The best way to solve this at the moment is fairly simple and easy to do. It doesn't fix the underlying cause, but it does help reduce the amount of tearing as much as possible.


How Can I Reduce Tearing?

Hardware Acceleration Level 1: Direct is the key to helping the tearing problem. This can be set by opening the HTML file where your SWF is embedded and editing the parameters for the Flash object.

The flag you want to set is wmode: "direct". This line goes in the 'params' section of your HTML code. That's it, that should help dramatically reduce the tearing. If you want to know why, look at Adobe's page on hardware acceleration. It explains a little about both levels of hardware acceleration. For even more information, check out this in-depth article.


Anything Else?

Yes; another thing to mention is that, the more objects you have on the screen, the more obvious the tearing will become. Smaller items are not usually affected by V-sync issues, but items on the screen which are large make it very obvious, so keeping the number of large objects to a minimum is a good idea.

Also, using bitmapData.lock() and bitmapData.unlock() is recommended and has helped some people with this problem. Locking a BitmapData object stops any bitmaps from being redrawn until it is unlocked, which is a good idea if you need to make multiple changes between frames. To learn more, take a look at this blog post.


Conclusion

You can do a few things to help reduce tearing but you cannot eliminate it completely. Reducing the amount of large objects, setting wmode:"direct" and using bitmap locking are the best ways to help reduce tearing.

Related Posts
  • Game Development
    Audio
    Game Audio SimplifiedPreview
    Playing sound effects in a JavaScript game should be simple, and this tutorial makes it so by wrapping the powerful Web Audio API in a fast, lightweight Sound class that handles everything for you.Read More…
  • Photography
    Hardware
    10 Things You Didn't Know About Your CameraBracketing 7d image pre
    As digital SLR cameras become more and more popular, features that used to reserved for professionals are now available to everyone. More and more technology is being squeezed into our cameras. You don't need to use every feature on your camera for every photo, but when you're struggling with a certain effect or situation, chances are there's a setting or mode that can make your job a lot easier. Here's ten examples of helpful features you might not know about!Read More…
  • Game Development
    Implementation
    Make a Neon Vector Shooter for iOS: Particle EffectsGeometry wars ios particle effects
    In this series of tutorials, I'll show you how to make a Geometry Wars-inspired twin-stick shooter, with neon graphics, crazy particle effects, and awesome music, for iOS using C++ and OpenGL ES 2.0. In this part, we'll add explosions and visual flair.Read More…
  • Game Development
    Gamedev Glossary
    Forward Rendering vs. Deferred RenderingDeferred x400
    If you're a developer of 3D games, then you've probably come across the terms forward rendering and deferred rendering in your research of modern graphics engines. And, often, you'll have to choose one to use in your game. But what are they, how do they differ, and which one should you pick?Read More…
  • Computer Skills
    OS X
    50 Things You Probably Didn't Know About OS X MavericksMavericks400
    Mavericks, the latest major release of OS X (pronounced Oh-Es Ten), is version 10.9 of Apple’s desktop operating system. With, reportedly, over 200 new features Mavericks is no incremental update. Jonny Ive might suggest that “Apple has reimagined the operating system for the desktop”, but the truth is Apple has incorporated some of the best ideas from third-party developers and has sought to integrate some of the features of iOS (the operating system for the iPod Touch, iPhone and iPad) into it’s desktop big brother.Read More…
  • Game Development
    How to Learn
    How to Learn Starling FrameworkHow to learn starling 400px
    Starling Framework is a free, open-source framework written using ActionScript 3.0. The primary purpose of this framework is to make it extremely easy for developers to build games for the Adobe Flash Platform. In this article, we'll introduce you to Starling, and share tips, screencasts, tutorials, and resources for getting started with it.Read More…