Discussion on AdobeAir slide and Its Optimization

AdobeAir is an important weapon for Adobe to compete for mobile device application development. One important experience for mobile devices is finger slip, but Adobe has not released an official SDK for Air. Therefore, if you plan to use Air to develop mobile applications, you will encounter a slide problem. The following is a discussion of some basic principles and optimization schemes based on Air slip.

Adobe Air is an important tool for Adobe to compete for mobile device application development. One important experience for mobile devices is finger slip, but Adobe has not released an official SDK for Air. Therefore, if you plan to use Air to develop mobile applications, you will encounter a slide problem. The following is a discussion of some basic principles and optimization schemes based on Air slip.

Adobe Air is an important tool for Adobe to compete for mobile device application development. One important experience for mobile devices is finger slip, but Adobe has not released an official SDK for Air.

Therefore, if you plan to use Air to develop mobile applications, you will encounter a slide problem. The following is a discussion of some basic principles and optimization schemes based on Air slip. This article will give an example at the end.

Basic Principles

Shows the displayed list of slide.

ScrollBg is the background of the entire slide, and the finger operates here,It is the target of listening for finger slip events..

ScrollTarget is the object to be slide, and its parent is ScrollBg. P1, p2, and p3 are internal display objects.

ScrollMask is the mask of the slide object. It is used to form a mask for the slide object. Its parent is ScrollBg.

In summary, we need to listen to the user finger event on ScrollBg and slide the ScrollTarget. During the slide, we can only see the part that is masked by ScrollMask.

In Adobe Air, MouseEvent is equivalent to the touch event of finger touch. TouchEvent has its unique advantage only when multi-touch is required. Therefore, when we listen on MouseEvent, we can listen on users' finger operations.

• Finger press Processing

Generally, the finger press is the start of the entire slide process. We can listen on the MouseDown event to simulate finger press.

In the MouseDown listener, we also need to add a series of event listeners to form the listener for the entire slip process.

We need to know that the user's finger is moving, so we need to listen for the MouseMove event. We also need to know the release of the user's finger, so we need to listen for the rolout and MouseUp events. In addition, we may need to listen on the EnterFrame event for some internal update logic.

In summary, we are in the MouseDown listener.Process the start of Slide and add listeners for finger movement, finger release, and every frame update..

• Finger slide Processing

In the MouseMove event listener, we need to move the slide object following the player's finger.

Therefore, before adding the MouseMove listener, we need to record the current position of the slide object (such as mouseX and mouseY) in advance and record the position of the slide object in the MouseMove listener, through the difference between the two locations, we can calculate the moving distance of the slide object.

If the distance to be moved is within a reasonable range (for example, not half of the boundary value), we will change and update the location of the slide object.

Sometimes, we may add click events to objects in the slide object, but we do not want to trigger these click events when the slide release fingers. In this case, we can calculate the moving distance of the slide object in the MouseMove listener to determine whether the click event should be triggered.

For example, if the user's fingers only move 1-2 pixels, the user may just want to click, rather than slide, so we will not process it at this time; however, if the user's fingers move more than 10 pixels, we can think that the user is performing a slide operation. At this time, we disable the mouseChildren and mouseEnabled attributes of the slide object, the click event will not be triggered during the slide.

In summary, we are in the MouseMove listener.Record the position of the finger, update the position of the slide object to move the object following the finger, and perform some special operations to prevent the user from triggering click events during slide..

• Finger Exit Processing

We can regard the rolout event and MouseUp event as the user's finger leaves the slide trigger area, so as to add a common listener MouseLeaveHandler for the two events.

In the native slide between ios and android, the system automatically slide the slide object when the finger leaves the screen when the user slides, which is similar to the inertia in the physical.

Therefore, we need to take a slow action similar to "inertia" on the slide object, and handle some slide ends at the end of the slow action.

Release the listening of both MouseMove and MouseLeaveHandler, and re-Add the listening of the MouseDown event to listen for new slide.

In summary, we are in MouseLeaveHandler.Remove the event of MouseMove and finger removal to listen, and perform a "inertia" easing on the slide object. At the end of the easing, handle the slide.

Optimization Scheme

Compared with other mobile development engines, Flash Rendering is less efficient, especially on mobile devices with weak CPU.

Slide requires moving a large area of display, which may cause frame freezing and frame skipping. Therefore, optimization is a required task.

The following are some optimization solutions I have summarized in practice.

• Switch to GPU Mode
After the experiment, switching the large-area slide from the cpu mode to the gpu mode significantly improves the slide efficiency, basically achieving the effect of native slide. You only need to modify

gpu

The advantage of the GPU mode is that it significantly improves the efficiency of processing the movement of large rendering areas. The disadvantage is that filters cannot be used and mixed modes are not supported. Some android models (basically low-end machines) may not be able to run. Filters can be replaced by bitmap, but may cause memory increase.
• Reduced display quality during slide

Compared with PC screens, mobile device screens have a much higher ppi value. This means that when we reduce the display quality on a mobile device, we feel that the image quality is not as much lost on the PC. Therefore, we can reduce the stage display quality at the beginning of slide.

stage.quality = StageQuality.LOW;

When the slide ends, the display quality of the stage is restored.

This solution also significantly improves the efficiency.

But it will significantly reduce the display quality, so we need to make a trade-off in terms of efficiency and effect.

• Reduce rendering Area

Reducing the rendering area can fundamentally solve the rendering pressure problem.

In fact, when sliding, many areas are outside the mask area, but the locations of these areas that are invisible to the human eye are still calculated by the CPU, which wastes the CPU cycle and reduces the efficiency.

Therefore, in the EnterFrame event, we can set the visible of the slide object outside the mask area to false. This prevents them from occupying the CPU cycle.

The following code snippets describe the above methods.

Var I: int; var numChildren: int = _ target. numChildren; var child: DisplayObject; for (I = 0; I <numChildren; I ++) {child = _ target. getChildAt (I); // For the subitem of all slide objects, if it exceeds a certain distance from MAX_VISIBLE_DIST //, set its visible to falseif (_ direct = ScrollDirection. VECTORIAL | _ direct = ScrollDirection. BOTH) {if (child. y + child. height + _ target. y <_ bounds. top-MAX_VISIBLE_DIST | child. y + _ target. y> _ bounds. bottom + MAX_VISIBLE_DIST) {child. visible = false;} else {child. visible = true ;}} else if (_ direct = ScrollDirection. HORIZONTAL | _ direct = ScrollDirection. BOTH) {if (child. x + child. width + _ target. x <_ bounds. left-MAX_VISIBLE_DIST | child. x + _ target. x> _ bounds. right + MAX_VISIBLE_DIST) {child. visible = false;} else {child. visible = true ;}}}

• Use bitmap instead of vector as much as possible
The vector must be calculated by the CPU in real time. Therefore, do not use vectors on mobile devices or bitmap as much as possible.
• Reduce event listening
Event listening consumes Frame Time, and improper destruction of event listening can lead to terrible memory leakage. Therefore, reduce unnecessary event listening as much as possible. For example, when a slide occurs, disable the mouse-related attribute of the target and enable it when the slide ends.

Example

Example: http://wuzhiwei.net/opensrc/ScrollAs3/ScrollAs3.html
Source code: https://github.com/iWoz/AirScroll

Original article address: Let's talk about Adobe Air slip and its optimization. Thank you for sharing it with me.