Flash Development Mobile Device Tips

As Adobe Flash technology marches into the three mobile platforms of iOS, Android and BlackBerry, there will inevitably be a surge of mobile and flat-panel applications based on Flash Player and air. However, the hardware limitations of mobile devices have 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 the mobile device also makes Flash development on mobile platform many opportunities and function points. Today I would like to give you a brief introduction of my recent summary of some of the experience and skills.

GPU Rendering　

The CPU of the mobile device differs greatly from the CPU on the computer, so to run a large number of animations (especially vector animation), it is best to use the GPU for rendering. Flash Profession CS5 can choose whether to use GPU hardware acceleration in publishing settings for Android or iOS projects.

　　Do not use bitmap buffering extensively

Many people think that using a bitmap (including Cacheasbitmap) is better than using a vector map, the actual situation is not so, blindly use the picture also has drawbacks. One of the arguments is that bitmaps do not display well when zooming, and I'm sure we all have this experience. In addition, if the bitmap elements are used in motion, scaling, rotation and other animation, then its operating efficiency is not improved but decreased a lot. And in the use of GPU acceleration, the use of bitmap buffering will increase the picture sawtooth, far less than the high definition of vector graphics. However, if you use the GPU to render dynamic text with more content, you must use bitmap buffering.

　　A large amount of text rendering

As the point said, the GPU for processing dynamic vector text is very slow, because the GPU to vector graphics using mosaic rendering (tessellate), the so-called mosaic rendering is divided into several small triangular vector map, according to their vertex information separately drawn into a whole shape ( Like molehill vertex shader, mosaic rendering to the number of vector graphics is based on its own shape, if the vector map more inflection point, then will cut out more triangles. Because dynamic text contains a large number of inflection points, it produces a lot of triangular tessellation, and if the text contains a large amount of content, it can bring disastrous results. So for a lot of text need to use bitmap buffer to deal with, using Cacheasbitmap = True, so that the GPU in accordance with the width of the text to evenly crop the triangle, which makes running very smooth. You also need to pay attention to this when doing other vector graphics, and try to avoid bending and narrow graphics, which allows the GPU to draw a lot of triangles to pull down the running efficiency.

(as shown above, the "set" character of the part of the section is a vector map mosaic, "embedded" word is the bitmap mosaic)

Frame lag phenomenon of vector graphs

This is a phenomenon I found in the process of making mobile games, the premise is to use GPU acceleration, if the second frame in the stage to display a complex vector scene for the first time, then there will be a very obvious pause in the first frame, which is due to the mosaic of the GPU. In my example, the previous scene is fading out to the M frame which should be a black screen while displaying a new scene in M frame. As a result of the GPU mosaic operation, the previous scene in the M-1 frame pause for about 0.2-0.5 seconds, this time the picture is not pure black, so obviously feel the pause. My final approach is to change the exit of the previous scene and the entry of the last scene into an asynchronous connection, using a timer in the middle to wait 100 milliseconds so that the naked eye does not feel the slightest pause.

　　Do not use special effects

For mobile devices, no matter how the CPU or GPU is used, there is no satisfactory result in rendering of some effects. For example, in the top of the animation cover a very large transparent gradient layer, will cause the frame frequency is reduced to below 10; If you use a filter, even if only a simple blur filter, the frame frequency will be reduced to single-digit, the GPU does not even support the rendering of filters. The GPU also does not support a partial layer,alpha,erase,overlay,hardlight,lighten,darken of these graphics overlay effects and shader pixelbender.

　　Use of the device keyboard

As with the principle of getting keyboard events on a computer, we can add a listener to the application to capture the KeyboardEvent to define key events on the mobile device. After AIR2.5, 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 point may be useful, and 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 example above:

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 is intended to be published on multiple platforms, we certainly want to use the same code and avoid developing it separately for each platform. Desktop applications and mobile applications are not the same in the interactive way, the desktop is more of a mouse operation, while moving more is touch and gesture. The APIs for these two ways are different, the mouse uses MouseEvent, and the touch and gestures are touchevent and gestureevent. So when we define the interaction we need to determine what kind of interaction mode the current platform is running:

if (Capabilities.touchscreentype = = Touchscreentype.finger) {//define touch and gesture interaction}else{//define Mouse interaction}

In addition to the interactive approach, the air on the mobile device, like the desktop side air, has access APIs for native systems such as the Nativeapplication class. For example, an application running in a browser doesn't have to consider shutting down an application, but air often designs a feature that shuts itself down. This feature requires the Nativeapplication.exit () method, but the Nativeapplication class exists only in the air runtime and not flash player. So if you import nativeapplication directly across your platform code, you will be wrong in compiling the browser version times, even if the SWF is successfully published using the Air release feature, running the SWF in the browser will also report an unknown object error.

　My solution is to use reflection to resolve compile-time import problems and use exception to troubleshoot Run-time 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 Save

The Android and iOS platforms, like computer 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, applied preferences). If you're not sure how to save and read Sharedobject, the following code can help you understand.

　　accessing local sharedobject Data

BlaBla is a custom string that the local store file will name. var so:sharedobject = sharedobject.getlocal ("BlaBla");//so.data is a read-only property of Sharedobject, which can be used as a container for storing 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:

var so:sharedobject = sharedobject.getlocal ("BlaBla"); So.clear ();

　Application state judgment

For example, if you are playing a game with a background music on your phone and suddenly interrupted by a call, you certainly don't want to hear the background music of the game while you're talking. Or you press the Back button to return to the desktop, then the game is rightfully be mute. This requires that the application's running state, such as activated, deactivated be added for listening:

Nativeapplication.addeventlistener (Event.deactivate, Deactivatehandler); Nativeapplication.addeventlistener ( Event.activate, Activatehandler); function Activatehandler (pevent:event): Void{}function Deactivatehandler (pEvent: Event): void{}

In addition, there are some experience to increase user experience, such as how to handle the 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 is not detailed.

Add two points:

1. Avoid using timer,

2. In some static pictures can reduce the frame rate