Click here to close now.


Adobe Flex Authors: Matthew Lobas, Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Cover Story: How to Increase the Frame Rates of Your Flash Movies

How's Your Need For Speed?

Flash in its essence began as a tool for creating vector animations on the web. The Flash Player was designed specifically as a lightweight animation viewer to display those moving vector objects which are in their simplest form, mathematical equations that describe complex shapes made up of points, lines, curves and fills. However, nowadays developers and designers are using Flash to do a lot more than just animation, today we see Flash being used for everything from interactive banner ads to games and large applications with complex user interfaces. We are now pushing Flash to its limits and our frame rates are starting to suffer as we continue to develop content that is more application centric.

The Flash Player has had obvious performance limitations for some time now:; the vector renderer inside the player generally coughs and splutters when it attempts to play Flash Movies that contain large amounts of objects on the stage. This is because the player is not optimized to deal with large amounts of static content, by design, each frame all the vector objects on the stage have to be updated and redrawn regardless of whether they have changed, which is an intensive and unnecessary process.

In this release of the Flash Player, Macromedia have addressed these visual performance issues by making various improvements and optimizations to the renderer and adding various new features which developers can use to take advantage of these significant changes.

This article will show you how to effectively utilize these new performance related features to increase the frame rates of your Flash Movies.

Bitmap Caching
One of the most significant additions to the player in this release has to be the new Bitmap Caching capabilities. This feature gives developers that are experiencing poor frame rates the power to greatly increase the speed at which large amounts of objects are updated and drawn onto the stage by the renderer.

The renderer is a very important part of the Flash Player; it is responsible for everything that you see when you view a Flash Movie. It draws all the vector and bitmap data onto the stage. Every frame, the renderer has to update the stage and the various objects it contains to reflect any changes since the last frame using ActionScript and/or animation. This process can become quite intensive when a large amount of updating has to be done on any given frame. Using this feature gives the developer some control over the amount of work that the renderer has to perform each frame. The less work you give the renderer, the faster and smoother your Flash Movie will run.

So How Does It Work?
When you turn on Bitmap Caching for any given movie clip, the player converts the contents of the movie clip into a bitmap which it generates and then stores in memory alongside the original vector data equivalent. The renderer then displays this bitmap in place of the vector data by copying the image from memory onto the stage. This process essentially makes the renderer's life easier, because it doesn't have to update the movie clip each frame, instead it only has to draw the bitmap it generated once and from then on it simply copies the bitmap from memory onto the stage, unless of course you change the movie clip or its contents, which will regenerate the bitmap. There will be little or no visual difference when a movie clip has bitmap caching turned on. You may notice a very slight difference because the vector data is snapped to the nearest whole pixel when the bitmap is generated. Bitmap Caching also works perfectly well with nested movie clips (movie clips inside movie clips). To put it in simple terms, by turning on Bitmap Caching for a movie clip, you are essentially telling the Flash Player: "Hey Renderer, I'll make your life a little easier. Freeze this movie clip and display it as a bitmap instead because this movie clip or its contents are not going to change very often, if at all. They are static."

Turning Bitmap Caching On and Off
Bitmap Caching comes in the form of an additional movie clip property that can be switched on or off at both Authortime using the Property Inspector and at runtime using ActionScript, on a per movie clip basis.

Using the Authoring Environment
You can turn Bitmap Caching on or off for any movie clip in the authoring environment using the Property Inspector. Bitmap Caching is disabled for all movie clips by default.

To turn Bitmap Caching on select the desired movie clip instance on the stage by clicking on it. Then open the Property Inspector from the Window menu. (Window > Properties > Properties) or use the Keyboard Shortcut CTRL + F3

In the bottom right hand corner of the Properties Inspector under the Blend field, you will see an option called Use Runtime Bitmap Caching. Click this checkbox to turn Bitmap Caching on for the selected movie clip. Bitmap Caching is turned off by default for all movie clips.

Using ActionScript
Bitmap Caching can also be turned on and off at runtime using actionscript. Every movie clip object now has a new actionscript property called cacheAsBitmap. To turn Bitmap Caching ON for a movie clip with actionscript you simply need to set the value of its cacheAsBitmap property to true like so: someMovieClip.cacheAsBitmap=true; //Turn Bitmap Caching ON Similarly, to turn Bitmap Caching OFF for a movie clip using actionscript you simple need to set the value of its cacheAsBitmap property to false as follows: someMovieClip.cacheAsBitmap=false; //Turn Bitmap Caching OFF You can also determine if a movie clip has Bitmap Caching turned on, by retrieving the value of the cacheAsBitmap property: isCached=someMovieClip.cacheAsBitmap;

When Should I Use Bitmap Caching?
If used correctly, Bitmap Caching can dramatically reduce the amount of updating instructions that the renderer has to process every frame and thus your movies should in practice run a lot quicker and smoother. However in certain circumstances Bitmap Caching could have a detrimental effect on the performance of your flash movie, therefore you should choose the movie clips that you cache wisely.

Bitmap Caching works best for movie clips whose visual appearance doesn't change often or at all. That is because when a cached movie clip or its contents change, the area or region of vector data that changed is regenerated and then updated into the bitmap that is held in memory and the renderer displays the new bitmap. Bitmap Caching also works well for movie clips that contain complex vector data (i.e. shapes with lots of curves or gradient fills) as it is quicker for the renderer to copy a bitmap from memory onto the stage than draw all those vectors to the stage.

Every time you rotate, scale or change the alpha of a cached movie clip, the whole bitmap has to be regenerated. So, turning on bitmap caching for a movie clip that is constantly rotating, changing in size or contains an animation doesn't make much sense because every frame the renderer has to update the bitmap to reflect the new appearance of the movie clip aswell as redraw it to the stage, which is added overhead.

The whole idea of this feature is to reduce the amount of updates that the renderer has to perform each frame, turning it on in such situations doesn't reduce the number of updates that the renderer has to perform. On the other hand it would be very beneficial for you to turn on Bitmap Caching for all movie clips that are either static or move around, but don't change visually. It is perfectly fine to move a cached movie clip around the stage, either with ActionScript or with timeline animation because moving it around won't change its visual appearance and therefore the cached bitmap doesn't have to be updated; the renderer will merely draw the bitmap at its new position.

Valid Usecase Scenario
Consider the following scenario: You have a large application that contains multiple Window components; each Window component contains numerous other Components. Each Window component is draggable. When the user drags one of the Windows around the application, he notices a slow down and the Window has to catch up to the mouse position, which causes jerky movement.

To fix this problem, the developer turns on Bitmap Caching for each Window component instance. Now the player only has to update the internal bitmap representation of each Window component when the visual appearance of one of the UI Components inside it changes. The rest of the time, including when the Window component is being dragged around, it simply needs to move the bitmaps around the stage, as opposed to constantly updating the stage from the vector data in each movie clip. The result is a much smoother dragging experience for the user.

More Stories By Guy Watson

Guy Watson (aka FlashGuru) has been a well-recognized figure in the Flash community for around four years, supporting the community with tutorials and source files, moderating the large Flash community forums, and running his own Flash resource Web site - FlashGuru's MX 101. Guy was one of the two developers that created the award-winning zoom interface for Relevare and now works for Endemol UK, the creative force behind reality television, producing programs such as Big Brother and The Salon. Guy now spends most of his time developing Flash games and applications for high-profile clients such as Channel 5 Television, Ladbrookes, and UK Style.

Comments (24) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

Most Recent Comments
Conference Call 07/07/06 04:45:58 PM EDT

Trackback Added: Conference Call; Conference Call

Drug Rehab 07/07/06 09:19:22 AM EDT

Trackback Added: Drug Rehab; Drug Rehab

Payday Loan 07/05/06 10:59:50 AM EDT

Trackback Added: Payday Loan; Payday Loan

Dental Insurance 07/05/06 10:33:31 AM EDT

Trackback Added: Dental Insurance; Dental Insurance

Data Recovery 07/04/06 08:38:25 AM EDT

Trackback Added: Data Recovery; Data Recovery

Printers 07/02/06 12:24:47 PM EDT

Trackback Added: Printers; Printers

1031 Exchange 07/01/06 02:08:26 PM EDT

Trackback Added: 1031 Exchange; 1031 Exchange

First Aid Kits 07/01/06 03:49:12 AM EDT

Trackback Added: First Aid Kits; First Aid Kits

Car Accident Lawyer 06/30/06 02:25:19 PM EDT

Trackback Added: Car Accident Lawyer; Car Accident Lawyer

Acne 06/25/06 02:22:46 PM EDT

Trackback Added: Acne; Acne

Equity Line Of Credit 06/25/06 07:38:23 AM EDT

Trackback Added: Equity Line Of Credit; Equity Line Of Credit

Forklift 06/25/06 07:22:27 AM EDT

Trackback Added: Forklift; Forklift

Term Life Insurance 06/24/06 04:21:24 AM EDT

Trackback Added: Term Life Insurance; Term Life Insurance

Eye Surgery 06/23/06 06:58:00 PM EDT

Trackback Added: Eye Surgery; Eye Surgery

Relocation 06/23/06 06:35:57 PM EDT

Trackback Added: Relocation; Relocation

Payday Loan 06/23/06 06:33:04 PM EDT

Trackback Added: Payday Loan; Payday Loan

Payday Loan 06/23/06 03:15:54 PM EDT

Trackback Added: Payday Loan; Payday Loan

Relocation 06/23/06 03:10:34 PM EDT

Trackback Added: Relocation; Relocation

Distance Education 06/23/06 01:29:59 AM EDT

Trackback Added: Distance Education; Distance Education

Relocation 06/22/06 09:36:41 PM EDT

Trackback Added: Relocation; Relocation

Vasectomy 06/22/06 12:31:50 PM EDT

Trackback Added: Vasectomy; Vasectomy

Aeon 05/27/06 03:21:41 AM EDT

This tutorial is full of syntax errors.
Functions aren't terminated properly, statements aren't properly closed with semi-colons ;.
Needs amendment.

eddyC 02/19/06 07:05:15 PM EST

Hi "noname", I was searching for a solution to this problem and found out you've had the same tysRect-problem... Have you solved it by now? :-) TIA!

noname 01/05/06 06:00:11 PM EST

hey, i just took a shot at the example in "Cover Story: How to Increase the Frame Rates of Your Flash Movies": "Scrolling Large Amounts of Text".

Unless i'm doing something incredibly wrong, it's not close to complete the way you have it in the article. Anyway, i think i've narrowed it down and just need the value for one last property: "tysRect", in the scroll() function.

what is this supposed to be set to??? is there a working fla anywhere?


@ThingsExpo Stories
SYS-CON Events announced today that Super Micro Computer, Inc., a global leader in high-performance, high-efficiency server, storage technology and green computing, will exhibit at the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Supermicro (NASDAQ: SMCI), the leading innovator in high-performance, high-efficiency server technology is a premier provider of advanced server Building Block Solutions® for Data Center, Cloud Computing, Enterprise IT, Hadoop/Big Data, HPC and Embedded Systems worldwide. Supermi...
As more intelligent IoT applications shift into gear, they’re merging into the ever-increasing traffic flow of the Internet. It won’t be long before we experience bottlenecks, as IoT traffic peaks during rush hours. Organizations that are unprepared will find themselves by the side of the road unable to cross back into the fast lane. As billions of new devices begin to communicate and exchange data – will your infrastructure be scalable enough to handle this new interconnected world?
"Matrix is an ambitious open standard and implementation that's set up to break down the fragmentation problems that exist in IP messaging and VoIP communication," explained John Woolf, Technical Evangelist at Matrix, in this interview at @ThingsExpo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
Nowadays, a large number of sensors and devices are connected to the network. Leading-edge IoT technologies integrate various types of sensor data to create a new value for several business decision scenarios. The transparent cloud is a model of a new IoT emergence service platform. Many service providers store and access various types of sensor data in order to create and find out new business values by integrating such data.
There are so many tools and techniques for data analytics that even for a data scientist the choices, possible systems, and even the types of data can be daunting. In his session at @ThingsExpo, Chris Harrold, Global CTO for Big Data Solutions for EMC Corporation, will show how to perform a simple, but meaningful analysis of social sentiment data using freely available tools that take only minutes to download and install. Participants will get the download information, scripts, and complete end-to-end walkthrough of the analysis from start to finish. Participants will also be given the pract...
Too often with compelling new technologies market participants become overly enamored with that attractiveness of the technology and neglect underlying business drivers. This tendency, what some call the “newest shiny object syndrome,” is understandable given that virtually all of us are heavily engaged in technology. But it is also mistaken. Without concrete business cases driving its deployment, IoT, like many other technologies before it, will fade into obscurity.
WebRTC services have already permeated corporate communications in the form of videoconferencing solutions. However, WebRTC has the potential of going beyond and catalyzing a new class of services providing more than calls with capabilities such as mass-scale real-time media broadcasting, enriched and augmented video, person-to-machine and machine-to-machine communications. In his session at @ThingsExpo, Luis Lopez, CEO of Kurento, will introduce the technologies required for implementing these ideas and some early experiments performed in the Kurento open source software community in areas ...
Electric power utilities face relentless pressure on their financial performance, and reducing distribution grid losses is one of the last untapped opportunities to meet their business goals. Combining IoT-enabled sensors and cloud-based data analytics, utilities now are able to find, quantify and reduce losses faster – and with a smaller IT footprint. Solutions exist using Internet-enabled sensors deployed temporarily at strategic locations within the distribution grid to measure actual line loads.
“In the past year we've seen a lot of stabilization of WebRTC. You can now use it in production with a far greater degree of certainty. A lot of the real developments in the past year have been in things like the data channel, which will enable a whole new type of application," explained Peter Dunkley, Technical Director at Acision, in this interview at @ThingsExpo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
The Internet of Everything is re-shaping technology trends–moving away from “request/response” architecture to an “always-on” Streaming Web where data is in constant motion and secure, reliable communication is an absolute necessity. As more and more THINGS go online, the challenges that developers will need to address will only increase exponentially. In his session at @ThingsExpo, Todd Greene, Founder & CEO of PubNub, will explore the current state of IoT connectivity and review key trends and technology requirements that will drive the Internet of Things from hype to reality.
There will be 20 billion IoT devices connected to the Internet soon. What if we could control these devices with our voice, mind, or gestures? What if we could teach these devices how to talk to each other? What if these devices could learn how to interact with us (and each other) to make our lives better? What if Jarvis was real? How can I gain these super powers? In his session at 17th Cloud Expo, Chris Matthieu, co-founder and CTO of Octoblu, will show you!
Today’s connected world is moving from devices towards things, what this means is that by using increasingly low cost sensors embedded in devices we can create many new use cases. These span across use cases in cities, vehicles, home, offices, factories, retail environments, worksites, health, logistics, and health. These use cases rely on ubiquitous connectivity and generate massive amounts of data at scale. These technologies enable new business opportunities, ways to optimize and automate, along with new ways to engage with users.
Through WebRTC, audio and video communications are being embedded more easily than ever into applications, helping carriers, enterprises and independent software vendors deliver greater functionality to their end users. With today’s business world increasingly focused on outcomes, users’ growing calls for ease of use, and businesses craving smarter, tighter integration, what’s the next step in delivering a richer, more immersive experience? That richer, more fully integrated experience comes about through a Communications Platform as a Service which allows for messaging, screen sharing, video...
With major technology companies and startups seriously embracing IoT strategies, now is the perfect time to attend @ThingsExpo in Silicon Valley. Learn what is going on, contribute to the discussions, and ensure that your enterprise is as "IoT-Ready" as it can be! Internet of @ThingsExpo, taking place Nov 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 17th Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal an...
SYS-CON Events announced today that Sandy Carter, IBM General Manager Cloud Ecosystem and Developers, and a Social Business Evangelist, will keynote at the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA.
WebRTC converts the entire network into a ubiquitous communications cloud thereby connecting anytime, anywhere through any point. In his session at WebRTC Summit,, Mark Castleman, EIR at Bell Labs and Head of Future X Labs, will discuss how the transformational nature of communications is achieved through the democratizing force of WebRTC. WebRTC is doing for voice what HTML did for web content.
As a company adopts a DevOps approach to software development, what are key things that both the Dev and Ops side of the business must keep in mind to ensure effective continuous delivery? In his session at DevOps Summit, Mark Hydar, Head of DevOps, Ericsson TV Platforms, will share best practices and provide helpful tips for Ops teams to adopt an open line of communication with the development side of the house to ensure success between the two sides.
The Internet of Things (IoT) is growing rapidly by extending current technologies, products and networks. By 2020, Cisco estimates there will be 50 billion connected devices. Gartner has forecast revenues of over $300 billion, just to IoT suppliers. Now is the time to figure out how you’ll make money – not just create innovative products. With hundreds of new products and companies jumping into the IoT fray every month, there’s no shortage of innovation. Despite this, McKinsey/VisionMobile data shows "less than 10 percent of IoT developers are making enough to support a reasonably sized team....
The IoT market is on track to hit $7.1 trillion in 2020. The reality is that only a handful of companies are ready for this massive demand. There are a lot of barriers, paint points, traps, and hidden roadblocks. How can we deal with these issues and challenges? The paradigm has changed. Old-style ad-hoc trial-and-error ways will certainly lead you to the dead end. What is mandatory is an overarching and adaptive approach to effectively handle the rapid changes and exponential growth.
Today air travel is a minefield of delays, hassles and customer disappointment. Airlines struggle to revitalize the experience. GE and M2Mi will demonstrate practical examples of how IoT solutions are helping airlines bring back personalization, reduce trip time and improve reliability. In their session at @ThingsExpo, Shyam Varan Nath, Principal Architect with GE, and Dr. Sarah Cooper, M2Mi's VP Business Development and Engineering, will explore the IoT cloud-based platform technologies driving this change including privacy controls, data transparency and integration of real time context w...