Question

I’m using Flash CS 5 and Flex 4, both to build an AIR application for android. I would like to know how to allow the user to move content(image or text) up and down(like a map,in this case only vertically).

Answer 1

There are no touch UI controls available yet, so you need to implement it yourself. Here’s a little bit of code that might help get you started. I wrote it on the timeline so that I could test it quickly. You’ll need to make a couple adjustments if you’re using it in a class.

The variable content is a MovieClip that is on the stage. If it is larger than the height of the stage, you’ll be able to scroll it by dragging it with the mouse (or with your finger on a touch screen). If it is smaller than the height of the stage, then it won’t scroll at all because it doesn’t need to.

var maxY:Number = 0;
var minY:Number = Math.min(0, stage.stageHeight - content.height);
var _startY:Number;
var _startMouseY:Number;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void
{
    _startY = content.y;
    _startMouseY = mouseY;
    stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler, false, 0, true);
    stage.addEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler, false, 0, true);
}

function stage_mouseMoveHandler(event:MouseEvent):void
{
    var offsetY:Number = mouseY - _startMouseY;
    content.y = Math.max(Math.min(maxY, _startY + offsetY), minY);
}

function stage_mouseUpHandler(event:MouseEvent):void
{
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler);
    stage.removeEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler);
}

Alternatively, you could use the scrollRect property. That one is pretty nice because it will mask the content to a rectangular region for you. If you just change y like in the code above, you can draw other display objects on top of the scrolling content to simulate masking. It’s faster than scrollRect too.