• Choose a category
• All
• Classic-Fiction

By Root 2517 0

displays the images saved in the database has scrolling capability if the content is larger than the height of the screen.

There are two challenges to address. The first is the performance of a potentially large list to scroll. The second is the overlapping interactive objects. The scrollable list contains elements that also respond to a mouse event. Both functionalities need to work without conflicting.

We only need to scroll the view if the container is larger than the device height, so there is no need to add unnecessary code. Let’s check its dimensions in the onShow method:

function onShow():void {

deviceHeight = stage.stageHeight;

container = new Sprite();

addChild(container);

// populate container

if (container.height > deviceHeight) {

trace("we need to add scrolling functionality");

}

}

If the container sprite is taller than the screen, let’s add the functionality to scroll. Touch events do not perform as well as mouse events. Because we only need one touch point, we will use a mouse event to detect the user interaction. Note that we set cacheAsBitmap to true on the container to improve rendering:

function onShow():void {

if (container.height > deviceHeight) {

container.cacheAsBitmap = true;

stage.addEventListener(MouseEvent.MOUSE_DOWN,

touchBegin, false, 0, true);

stage.addEventListener(MouseEvent.MOUSE_UP,

touchEnd, false, 0, true);

}

}

To determine if the mode is to scroll or to click an element that is part of the container, we start a timeout. We will see later why we need this timer in relation to the elements:

import flash.utils.setTimeout;

var oldY:Number = 0.0;

var newY:Number = 0.0;

var timeout:int;

function touchBegin(event:MouseEvent):void {

oldY = event.stageY;

newY = event.stageY;

timeout = setTimeOut(startMove, 400);

}

When the time expires, we set the mode to scrollable by calling the startMove method. We want to capture the position change on MOUSE_MOVE but only need to render the change to the screen on ENTER_FRAME. This guarantees a smoother and more consistent motion. UpdateAfterEvent should never be used in mobile development because it is too demanding for devices:

function startMove(event:MouseEvent):void {

stage.addEventListener(MouseEvent.MOUSE_MOVE,

touchMove, false, 0, true);

stage.addEventListener(Event.ENTER_FRAME, frameEvent, false, 0, true);

}

When the finger moves, we update the value of the newY coordinate:

function touchMove(event:MouseEvent):void {

newY = event.stageY;

}

On the enterFrame event, we render the screen using the new position. The container is moved according to the new position. To improve performance, we show and hide the elements that are not in view using predefined bounds:

var totalChildren:int = container.numChildren;

var topBounds:int = -30;

function frameEvent(event:Event):void {

if (newY != oldY) {

var newPos = newY - oldY;

oldY = newY;

container.y += newPos;

for (var i:int = 0; i < totalChildren; i++) {

var mc:MovieClip = container.getChildAt(i) as MovieClip;

var pos:Number = container.y + mc.y;

mc.visible = (pos > topBounds && pos < deviceHeight);

}

}

}

On touchEnd, the listeners are removed:

function touchEnd(event:MouseEvent):void {

stage.removeEventListener(MouseEvent.MOUSE_MOVE, touchMove);

stage.removeEventListener(Event.ENTER_FRAME, frameEvent);

}

As mentioned before, elements in the container have their own mouse event listeners:

element.addEventListener(MouseEvent.MOUSE_DOWN, timeMe, false, 0, true);

element.addEventListener(MouseEvent.MOUSE_UP, clickAway, false, 0, true);

On mouse down, the boolean variable isMoving is set to false and the visual cue indicates that the element was selected:

var isMoving:Boolean = false;

var selected:MovieClip;

function timeMe():void {

isMoving = false;

selected = event.currentTarget as MovieClip;

selected.what.textColor = 0x336699;

}

On mouse up and within the time allowed, the stage listeners and the timeout are removed. If the boolean isMoving is still set to false and the target is the selected item, the application navigates