Tips for developing mobile devices in Flash

With the launch of Adobe Flash technology into the three mobile platforms of iOS, Android and BlackBerry, a large number of Flash player and air-based mobile and tablet applications will inevitably emerge. However, the hardware limitation of mobile device has a great challenge to the operation efficiency of Flash, so how to optimize the code becomes the core problem of Flash mobile development. In addition, the new touch-based interaction and the unique system environment on mobile devices have many opportunities and functional points for flash development on mobile platforms. Today I will give you a brief introduction of my recent summary of some of the experience and skills. GPU Rendering

The CPU on the mobile device is far from the CPU on the computer, so it's best to use the GPU to render a lot of animations (especially vector animations). Flash Profession CS5 can choose whether to use GPU hardware acceleration in publishing settings for Android or iOS projects. do not use bitmap buffering heavily

Many people think that using bitmaps (including Cacheasbitmap) is better than using vectors, which is not the case, and there are drawbacks to simply using pictures. One of the arguments is that bitmaps display poorly when zoomed in, and I'm sure everyone has this experience, and if the bitmap element is used in animations such as moving, zooming, and rotating, then it's not running as efficiently as it does. And in the case of GPU acceleration, using bitmap buffering will increase the image's jagged edge, which is much less than the sharpness of the vector graph. However, if you are rendering dynamic text with more content on the GPU, you must use bitmap buffering. rendering of large amounts of text

As pointed out above, the GPU is very slow to handle dynamic vector text because the GPU uses mosaic rendering (tessellate) of vector images, so-called mosaic rendering is the vector graph is divided into several small triangles, Based on their vertex information to draw and then mosaic into the overall shape (like the molehill vertex shader), mosaic rendering to the vector graph clipping quantity is based on its own shape, if the vector image inflection point more, then will cut out more triangles. Because dynamic text has a large number of inflection points, it produces a lot of triangular tessellation calculations, and if the text contains a large amount of content, it can result in disastrous results. So a large amount of text needs to be handled using bitmap buffering, using Cacheasbitmap = True, allowing the GPU to cut triangles evenly across the width and height of the text, which makes it run very smoothly. You also need to be aware of this when doing other vector graphics, as much as possible to avoid curved and elongated graphics, which allows the GPU to draw many triangles to pull down the operating efficiency. (as shown above, the "inlay" word in the component part of the vector image mosaic, "embedded" word is the bitmap mosaic) vector image frame lag phenomenon

This is a phenomenon I found in the process of making a mobile phone game, provided that GPU acceleration is used, if a complex vector scene is displayed on the stage for the first time in the second frame, there will be a noticeable pause at the first frame, which is also due to GPU tessellation. In my case, the previous scene is doing a fade-out effect, fading to M-frame should be pure black, while the M-frame shows a new scene. Due to the operation of the GPU Mosaic, the previous scene in the M-1 frame paused for about 0.2-0.5 seconds, this time the picture is not black, so it is obvious to feel the pause. My final approach is to change the exit of the previous scene and the entry of the latter into an asynchronous connection, using a timer in the middle to wait for 100 milliseconds, so that the naked eye does not feel any pauses. do not use special effects

For mobile devices, whether the CPU or the GPU is used, the desired results are not yet achieved in some renderings. For example, a large transparent gradient layer on the top of the animation, the frame frequency will be reduced to less than 10, if the use of filters, even if only a simple blur filter, will let the frame rate down to single-digit, the GPU even does not support the rendering of the filter. The GPU also does not support some layer,alpha,erase,overlay,hardlight,lighten,darken these graphics overlay effects and shader pixelbender.

About the efficiency of flash on mobile devices, there is a very good English article, it is recommended that you read carefully.
use of the http://www.adobe.com/devnet/flashplayer/articles/fplayer10_1_hardware_acceleration.html device keyboard

As with the principle of getting keyboard events on a computer, we can add a listener to the application to capture KeyboardEvent, which defines key events on the mobile device. From AIR2.5 onwards, we can use some key code (such as Keyboard.back,keyboard.menu,keyboard.search) for mobile devices in Keyboard, as in the following example: Stage.addeventlistener (Keyboardevent.key_down, onKeyDown); function OnKeyDown (pevent:keyboardevent): void{if ( Pevent.keycode = = keyboard.back) {//do something here}}

Another thing that might be useful is that we can use the Preventdefault method of the event to block the default behavior of some keyboard events. For example, if we do not want to press the return key to jump out of the current application to the desktop, we can add a line of code in the above example: Stage.addeventlistener (Keyboardevent.key_down, onKeyDown); function OnKeyDown (pevent:keyboardevent): void{if (pevent.keycode = = Keyboard.back) {pevent.preventdefault ();//do some Checking here}} cross-platform application judgment

For an application that intends to be published on multiple platforms, we certainly want to use the same code to avoid being developed separately for each platform. Desktop apps and mobile apps are not the same in the interactive way, more on the desktop with the mouse operation, and more mobile touch and gestures. These two ways of the API is not the same, the mouse using MouseEvent, touch and gestures are used touchevent and gestureevent. So when we define the interaction we need to determine what kind of interactive mode the current platform is running: if (Capabilities.touchscreentype = = Touchscreentype.finger) {//define touch and gesture interaction}else{// Define Mouse Interaction}

In addition to interacting with each other, air on mobile devices, like desktop air, has access APIs for native systems such as the Nativeapplication class. For example, an application running in a browser does not have to consider shutting down the application, but air often designs a self-closing function. This feature requires the Nativeapplication.exit () method, but the Nativeapplication class exists only in the air runtime and not in Flash Player. So if you import nativeapplication directly into cross-platform code, it will be wrong to compile the browser version times, even if the SWF is published successfully using the Air Publishing feature, then running the SWF in the browser will also report the error of the unknown object.

My workaround is to use reflection to solve the import problem at compile time and use exception to resolve runtime errors: try{//air version var myclass:class = Getdefinitionbyname (" Flash.desktop.NativeApplication ") as Class;nativeapplication = Myclass.nativeapplication; Nativeapplication.addeventlistener (Event.deactivate, Deactivatehandler); Nativeapplication.addeventlistener ( Event.activate, Activatehandler); Nativeapplication.addeventlistener (Keyboardevent.key_down,onkeydown);} catch (E:error) {//Browser version} state saved

Android and iOS platforms, like PC platforms, support Sharedobject local storage, so you can use the same code on all platforms to save and read application state (such as game progress, app preferences). If you are not sure how to save and read the Sharedobject, the following code can help you understand it.

Accessing local sharedobject Data//blabla is a custom string that is named by the local storage file. var so:sharedobject = sharedobject.getlocal ("BlaBla");// So.data is a read-only property of Sharedobject, which can be used as a container to store data variables that need to be stored locally (note that locally stored data has a size limit of up to 100KB) So.data.savedata = "What a nice function!!"; /Generate local Storage file So.flush ();

If you want to clear a specific local storage file, you can use the following code to implement: var So:sharedobject = sharedobject.getlocal ("BlaBla"); So.clear (); Application state judgment

For example, if you are playing a background music game on your phone and you are suddenly interrupted by an incoming call, you certainly do not want to hear the background music of the game at the same time. Or you press the Back button to return to the desktop, then the game is also rightfully mute. This requires an application's running state such as activated, deactivated add listen: Nativeapplication.addeventlistener (Event.deactivate, Deactivatehandler); Nativeapplication.addeventlistener (Event.activate, Activatehandler); function ActivateHandler ( pevent:event): Void{}function Deactivatehandler (pevent:event): void{}

There are also some experiences to increase the user experience, such as how to deal with touch-controlled objects to reach the screen boundary of the elastic buffer movement, can be used in the basic ActionScript method for processing and operation, here does not do a detailed introduction.

Add two points from the Flash Test development team colleague Shu Junsu:
1. Avoid using a timer.
2. You can reduce the frame rate when you have some static pictures.