Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com 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?

thanks!

@ThingsExpo Stories
As ridesharing competitors and enhanced services increase, notable changes are occurring in the transportation model. Despite the cost-effective means and flexibility of ridesharing, both drivers and users will need to be aware of the connected environment and how it will impact the ridesharing experience. In his session at @ThingsExpo, Timothy Evavold, Executive Director Automotive at Covisint, discussed key challenges and solutions to powering a ride sharing and/or multimodal model in the age ...
When shopping for a new data processing platform for IoT solutions, many development teams want to be able to test-drive options before making a choice. Yet when evaluating an IoT solution, it’s simply not feasible to do so at scale with physical devices. Building a sensor simulator is the next best choice; however, generating a realistic simulation at very high TPS with ease of configurability is a formidable challenge. When dealing with multiple application or transport protocols, you would be...
Detecting internal user threats in the Big Data eco-system is challenging and cumbersome. Many organizations monitor internal usage of the Big Data eco-system using a set of alerts. This is not a scalable process given the increase in the number of alerts with the accelerating growth in data volume and user base. Organizations are increasingly leveraging machine learning to monitor only those data elements that are sensitive and critical, autonomously establish monitoring policies, and to detect...
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at Cloud Expo, Ed Featherston, a director and senior enterprise architect at Collaborative Consulting, discussed the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
In his session at @ThingsExpo, Dr. Robert Cohen, an economist and senior fellow at the Economic Strategy Institute, presented the findings of a series of six detailed case studies of how large corporations are implementing IoT. The session explored how IoT has improved their economic performance, had major impacts on business models and resulted in impressive ROIs. The companies covered span manufacturing and services firms. He also explored servicification, how manufacturing firms shift from se...
IoT solutions exploit operational data generated by Internet-connected smart “things” for the purpose of gaining operational insight and producing “better outcomes” (for example, create new business models, eliminate unscheduled maintenance, etc.). The explosive proliferation of IoT solutions will result in an exponential growth in the volume of IoT data, precipitating significant Information Governance issues: who owns the IoT data, what are the rights/duties of IoT solutions adopters towards t...
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settl...
With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, examined the regulations and provided insight on how it affects technology, challenges the established rules and will usher in new levels of diligence arou...
Organizations planning enterprise data center consolidation and modernization projects are faced with a challenging, costly reality. Requirements to deploy modern, cloud-native applications simultaneously with traditional client/server applications are almost impossible to achieve with hardware-centric enterprise infrastructure. Compute and network infrastructure are fast moving down a software-defined path, but storage has been a laggard. Until now.
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
IoT is at the core or many Digital Transformation initiatives with the goal of re-inventing a company's business model. We all agree that collecting relevant IoT data will result in massive amounts of data needing to be stored. However, with the rapid development of IoT devices and ongoing business model transformation, we are not able to predict the volume and growth of IoT data. And with the lack of IoT history, traditional methods of IT and infrastructure planning based on the past do not app...
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
DXWorldEXPO LLC, the producer of the world's most influential technology conferences and trade shows has announced the 22nd International CloudEXPO | DXWorldEXPO "Early Bird Registration" is now open. Register for Full Conference "Gold Pass" ▸ Here (Expo Hall ▸ Here)
More and more brands have jumped on the IoT bandwagon. We have an excess of wearables – activity trackers, smartwatches, smart glasses and sneakers, and more that track seemingly endless datapoints. However, most consumers have no idea what “IoT” means. Creating more wearables that track data shouldn't be the aim of brands; delivering meaningful, tangible relevance to their users should be. We're in a period in which the IoT pendulum is still swinging. Initially, it swung toward "smart for smart...
IoT is rapidly becoming mainstream as more and more investments are made into the platforms and technology. As this movement continues to expand and gain momentum it creates a massive wall of noise that can be difficult to sift through. Unfortunately, this inevitably makes IoT less approachable for people to get started with and can hamper efforts to integrate this key technology into your own portfolio. There are so many connected products already in place today with many hundreds more on the h...
Here are the Top 20 Twitter Influencers of the month as determined by the Kcore algorithm, in a range of current topics of interest from #IoT to #DeepLearning. To run a real-time search of a given term in our website and see the current top influencers, click on the topic name. Among the top 20 IoT influencers, ThingsEXPO ranked #14 and CloudEXPO ranked #17.
Join IBM November 1 at 21st Cloud Expo at the Santa Clara Convention Center in Santa Clara, CA, and learn how IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Cognitive analysis impacts today’s systems with unparalleled ability that were previously available only to manned, back-end operations. Thanks to cloud processing, IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Imagine a robot vacuum that becomes your personal assistant tha...
As data explodes in quantity, importance and from new sources, the need for managing and protecting data residing across physical, virtual, and cloud environments grow with it. Managing data includes protecting it, indexing and classifying it for true, long-term management, compliance and E-Discovery. Commvault can ensure this with a single pane of glass solution – whether in a private cloud, a Service Provider delivered public cloud or a hybrid cloud environment – across the heterogeneous enter...
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...