With some recent experience related to application performance, I thought to share some strategies to optimize performance of applications made with Flash Professional. There are two main components that determine Flash performance:
- CPU/GPU usage
- Memory usage
In this article I will begin with discussing memory management guidelines. Several times we are using filters, loops, Timers SoundChannels etc in Flash applications which are playing an important role in application performance.
Easiest techniques for performance optimization:
- Some objects or movie clips required just to represent some data, which doesn’t require user interaction in such cases normally we are not writing any code for that object. But still when user click on such object Flash Player checks for mouse interactions when these objects are present. You can save some CPU cycles by disabling mouse interactivity for objects that do not require mouse interactivity. Disable mouse interactivity.
- The issue with Timers is more critical. If a Timer has not stopped (because its currentCount is less than its repeatCount or because a stop() method has not been applied to it), the Timer will not respond to garbage collection even if you remove its listener and null all references. A Timer’s listener function won’t be called again once you remove the listener, but the Timer still consumes memory. Several times we start timer to achieve function requirement, and even after completion of the functional part execution the timer running. Explicitly stop Timers for garbage collection. However, if you open, play, and then close a Flash game running on a mobile device repeatedly without ever restarting the game, you may see a noticeable problem.
- For ENTER_FRAME event loop, (if required to use then only) use different listeners and different listener functions applied with related DisplayObjects only.
- Avoid use filters. Keep in mind that whenever you apply a filter to a DisplayObject in Flash, its cacheAsBitmap property gets forced to true and Flash must use memory to store that bitmap. If anything changes about that DisplayObject, like its transform operations like size or rotation or a child updates visually, etc, it must regenerate the bitmap, thus using more memory. That old bitmap hangs around until gc kicks in.
- Always use reverse for-loops. Avoid writing do-loops and while-loops.
- Using correct type of display objects for each element
- Use weak event listeners and remove listeners when no longer needed.
- Strictly type variables whenever possible.
- Explicitly disable mouse interactivity when mouse interactivity is not required.
- Replace dispatchEvents with callback functions whenever possible.
- Stop Sounds to enable garbage collection for Sounds and SoundChannels.
- Use the most basic DisplayObject needed for each element.
- Always use cacheAsBitmap and cacheAsBitmapMatrix with air apps (mobile devices).
- Several times when we are playing with loop and require to create object for each iteration in that case. In such situation it would be great if we create one object outside the loop and reuse it repeatedly in loop.
Friends, I hope these would be helpful to optimization of application performance. Feel free to share more ideas and comments about the topic.
Enjoy RIA… 🙂
Like many of today’s developers. I started my IT career as a Flash Developer, and spend much of my time on learning new things from my senior friends, books and blogs about Flash Platform and get idea that there are lots of things to learn like Software Development Life Cycle (SDLC), Software Design Patterns, Coding Standards and many more. With expanding knowledge, I understand that architecture, frameworks and coding standards are important. Before starting discussion about application architecture, would like to share about preface for this post.
There are different technologies are available, we pick one technology, get knowledge for that, practice on that technology’. We live in technologies limitations or boundary and competing with other technologies. It is difficult enough to truly master a single platform. Of course many developers are experts in multiple languages, but mostly their knowledge and development practices of each language are different from each other.
For example, It you want to develop an application in two different languages (let say) Flex and Python. Your knowledge of Flex doesn’t give you any advantage for the Python application development. But I would like to say that knowledge of architecture or framework will help you here for the application development in both the languages. And that’s the reason behind the post on application architecture.
From a set of frameworks, I selected PureMVC as my framework of choice.
Before starting about PureMVC, let’s discuss about what is framework. As I understand Frameworkis a reusable set of libraries or classes for a software system, which follow some rules throughout the application. These rules are known as Design Patterns. So in other words we can say a framework is a collaborating set of design patterns. Frameworks are helpful as it give us the flexibility to implement the fastest solution to given problem.
Currently there are lots of discussions going on between Flash Platform & HTML5 features, development tools, and usage and development standards. But I think there is one topic ‘architecture‘ which is common and useful for all technologies or languages, application architecture/ framework is the heart of application standard, performance and scalability. Technology doesn’t matter for that. So for the reference example, I have selected my favorite platform to explain application architecture. The Adobe Flash Platform is superb for developing rich experiences, including websites, games for web desktop and mobile users. From last few years lightweight, interactive run time has become the ideal choice for expressive media-centric web software. There is a major benefit of Flash Platform can experience as it has expanded to the desktop and well with Adobe AIR.
Goals of PureMVC
PureMVC is lightweight framework based upon well known Model-View-Controller design pattern. Main goals of PureMVC frameworks are:
- To separate application’s coding into three different tiers: model (data), view (UI) and controller (business logic)
- For speedy implementation with scalability and maintainability
- Reduce complexity from developer
Also one major benefit of using well known formal framework is common design patterns and way of adding development. From organizational point of view, usage of such great standard produce clean coding standard of applications and reduce dependency on developers, reduce knowledge transfer time for new developer. I think it’s a best and most attractive benefit of using standard and well known framework. Here are some reasons why I like PureMVC:
- It is easy to learn, great documentation, samples and tutorials, easy to use and also easy to extend.
- It facilitates loosely coupled application architecture (Publish and Subscribe- type), scalability, maintainability and portability for you application.
Developers agree that separating an application’s code into different part based on its functionality. These separations are three major areas: model, view and controller. Let’s have a quick overview of these terms: the model is for your data, the view is for user controls, user interaction, and the controller decides how model change when view is clicked and how view should updates when model updated. You can get basic idea about PureMVC framework from below conceptual diagram:
A forth singleton Façade, simplify development by providing single interface for communication throughout application. Below is the base overview of each singleton:
- Model: manipulating the data model and retrieve data from remote services
- View: mainly refer named mediators that adapt view component.
- Controller: named mapping command classes, which are only created one needed.
- Façade: initializes core singletons (model, view and controller) and provide a single interface for communications.
Will have to use Façade and other actor classes (like Mediator, Proxy/delegate and commands), to interact with singleton as shown below:
Note: In next Part, will update sample applications implemented with PureMVC framework using different programming language.
Facebook is great social web. Millions of active users and new users connect on Facebook platform through devices, applications and websites (refer the Statistics). As we know there is huge demand for content on the platform, the requirement for the platform developer also grown. So I thing learning material, perfect development approach guidelines or tips related to the platforms applications are most important.
The Flash Facebook Cookbook contains integrating Flash applications with Graph API and Facebook platform. It contains lots of recipes for that and recipes start with basic explanation of Flash-Facebook integration. If you have some knowledge of Flash Builder, Flex framework or Flash platform then it’s a nice book to explore your experience with world by Facebook platform.
Enjoy RIA 🙂
You can get some exciting information from the demo:
I think Flash Professional to export animation as HTML is very exciting feature because it helps to reach mass audience across configurations and helps to migrate content from Flash into HTML. So Flash developer and designers can use their Flash skills and by exporting application into HTML, they can target more platforms.
As per my personal opinion if you are able to achieve similar results with Adobe Edge and Flash Professional then only it will be great challenge for flash platform developer and designers to learning possible outcomes with new technology (Edge) which is more compatible with more devices.
Enjoy RIA 🙂
Recently it was announced by Adobe that they would cease further development on their flash player, which is used for animated features of web sites, video, ads and rich media applications on the mobile internet and determined it would be best to focus on HTML5 as the future for mobile interactive feature and animation, and discontinue Flash for mobile. Flash development will transition to new software and tools as they are now focusing more on HTML5, and Adobe Edge is the beginning of one of them.
Most of the stuff seen in browser is created with HTML. This language has, until fairly recently, been limited to static text and image contents. Long ago technology called Flash was developed to allow web browsers to display rich, dynamic and interactive content such as audio, video and SVG (scalable vector graphics).
Now, HTML5 could become a game changer in web application development. It poses a strategic threat to Adobe, as well as Microsoft and Java. There are many advanced features and effects that are only (currently) available in Flash. There are lots of Flash games and applications that would be difficult to do with HTML5.
There are many more comparison (including technical limitations and advantages) points for both the technologies available on web. Flash is better in some cases and HTML5 is better in others. However, HTML5 is the future of the web for simple interactivity. It includes charting, some limited 3d vector graphics, image transforms, video and audio. But the portion of the web that requires richer interaction will continue to rely on Flash and other technologies RIA technologies. I think the choices is not “all or none”. Depending on the context, the developer may use both together. I think over the long-term HTML5 may fit the bill.
Takes a look at the more informative debate Flash versus HTML5 debate and some considerations you should make if you’re deciding which one to use in your projects. The main conclusions: Flash lets you reach the widest audience with the drawback of not working on some mobile devices.
So friends, Enjoy RIA 🙂
At its MAX 2011 technology conference, Adobe announced that LG and TiVo have become the latest partners to bring Adobe Flash-based applications via Adobe AIR to connected TVs and digital home devices. Content partners can now take advantage of AIR to deliver Flash-based console-quality gaming and premium video across TVs, Blu-Ray players and set-top boxes.
Adobe also announced that Flash Player 11 and AIR 3 will be available today, a milestone release that will enable the next generation of immersive application experiences across devices and platforms. As announced, dozens of new features allow developers to deliver a new class of gaming and premium video experiences, as well as sophisticated, data-driven apps with back-end systems integration across devices and platforms including Android, Apple iOS (via AIR), BlackBerry Tablet OS, Mac OS, Windows and connected TVs and others. AIR Apps available on Samsung SmartTVs, coming to Digital Home devices from LG, TiVo and others.
Demo video of Flash-based apps with 3D graphics and others running on a Samsung Smart TV and other devices:
With more than 100 unique digital home devices already certified to support Adobe Flash and AIR, including Samsung Smart TVs, Adobe expects rapid growth for Flash-based applications across connected televisions and other devices.
TVs and other connected devices in the digital living room are the next frontier for rich entertainment apps. Flash-based applications are transforming content consumption on TVs as developers embrace new opportunities to deliver beautiful HD content to increasingly powerful digital home devices connected to a big screen.
With the AIR SDK, Flash Builder and Flash Professional CS5.5 software, developers can build new applications for connected digital home devices or extend existing Flash-based experiences from desktops and mobile devices to TVs. AIR 3 brings a series of advancements to TVs including full hardware-accelerated rendering for 2D and 3D graphics to enable console-quality gaming applications. Content publishers are able to deliver HD videos with Dolby and DTS 7.1 channel surround sound for full support of home theater systems. With the new Game Input API, developers can also make a range of devices an integral part of the gaming experience on TV screens, including joysticks, smartphones and tablets.
Flash Player is supported on more than 98 percent of Internet connected PCs today and by the end of 2011, Adobe expects more than 200 million smartphones and tablets including Apple iOS devices to support Flash based applications via AIR. By the end of 2015, the number of devices that will support AIR is expected to increase to 1 billion. AIR, a superset of Flash Player, enables developers to leverage existing code to create and deliver standalone applications across devices and platforms. Thousands of Flash-based applications have already been created and made available on Android Market, iTunes App Store, Samsung SmartTV Store and BlackBerry AppWorld today.
You can get MAX keynote information from here.
Enjoy RIA .. 🙂
This year, Adobe released a great environment with Flex SDK and Flash Builder to support mobile application development with mobile optimized components and framework. Flash Builder 4.5 provides mobile project type, multiplatform device simulations and on device debugging and easy packaging for deployment on range of application stores.
I really like the environment, single framework and tool to build and deploy rich, expressive mobile and tablet apps on Android, BlackBerry Tablet, iPag and iPhone device.
You can get ideas about Flash Builder 4.5 from here :
What’s new in Flash Builder 4.5
Introduction of Flex 4.6
According to Adobe, Flex 4.6 will be released later this year, with new version of the SDK and a corresponding update to Flash Builder with new components and functionality specifically designed to help to create application for latest mobile and tablet device.
- SplitViewNavigator : A new top-level application component specifically designed for the tablet experience. With only few lines of code, manage the layout of multiple views and have them adapt automatically based on device orientation.
- CallOutButton : A versatile component that pops over existing content and can contain text, components or even entire views.
- SpinnerList : This popular tablet component is an adaption of the existing List component. It not only has a new look, but also gives options like recirculating content and a position based selection model.
- DateSpinner : A highly flexible component that is not only locale-aware, but provides multiple out-of-the-box configurations to fit most date/time entry needs.
- Text Enhancements : Flex 4.6 solves the problem of cross-device text input. Flex exposes the native text-editing controls on EVERY platform—this enables the developer to customize the keyboard and the user to experience the native UI of common operations like selection, copy/paste and spelling checking.
- ToggleSwitch : This simple and much-requested control is now available in Flex 4.6.
Also in addition to supporting the new features in the Flex framework, Flash Builder 4.6 exposes new capabilities that will enable developers to build better cross-platform mobile applications—Native Extensions and Captive Runtime.
Native Extensions allows developers to complement their Flex application with native C, Objective-C, and Java libraries—this new feature opens a world of new possibilities for both mobile and desktop applications. Providing access to Apple iOS, Google Android, and BlackBerry Tablet OS specific APIs, your applications can access native features like notifications or the calendar. Flash Builder provides complete support for both managing and packaging Native Extensions. To read more about the possibilities or learn how to build your own native extension, see Oliver Goldman’s article,Extending Adobe AIR.
Here you will get more information about Flash Builder 4.6 & Flex 4.6.
So Friends, Enjoy RIA 🙂