Known Participant

Question

Scrolling in a Flash App on a mobile device. Anyone?

Forum|Forum|14 years ago
August 25, 2011
4 replies
3423 views

In my opinion, the biggest different between a flash app on a computer desktop vs a flash app on a mobile device is the scrolling behavior.

A flash app on a computer desktop usually has a scrollbar and you click on the up/down arrows or the scrollbar to scroll. But on a mobile device, this scrolling is done with a swipe of the finger through the screen either horizontally or vertically.

Has anyone had any success implementing this scrolling behavior on a mobile device with a flash app?

If so, what technique did you use?

Development

This topic has been closed for replies.

D

dissipation

Known Participant

I wrote my own using mouse events.

Basicallly created a system so that on mouse down you start tracking the position of the finger (you could get mouse position, i used a startDrag on an empty movie clip). set the y position of what you want scrolled relative to the y position of the mouse(or finger). On mouse Up you calculate a velocity + friction by using the original down y position aginst the new up y position. The trick is getting the velocity/fircition right for the smooth stop.

I'm not a trained programmer mind you, so there probably is a much better and simplistic method- but this worked for me. Very similar to apples native touch/drag/swipe for web pages.

S

smitchell94

Inspiring

Dissipation, Can you possibly post your method of scrolling? For a comparison, i have been trying to get this scrolling to work for ages.

I have this:

var ease:int = 6

var targX:int = dragMe.x

var targY:int = dragMe.y

var drag:Boolean = false

var ptX:int

var ptY:int

dragMe.cacheAsBitmap = true;

function down(sprite:Sprite):void{

//ptX = sprite.x - mouseX

ptY = sprite.y - mouseY

drag = true

}

function dragC(sprite:Sprite):void{

if (drag) {

//targX = mouseX+ptX;

targY = mouseY+ptY;

//trace ('targX ' +targX)

//trace ('ptX ' +ptX)

}

if (sprite.x != targX || sprite.y != targY) {

//sprite.x += (targX-sprite.x)/ease;

sprite.y += (targY-sprite.y)/ease;

}

};

function up(sprite:Sprite):void {

drag = false;

};

stage.addEventListener(Event.ENTER_FRAME, dragHandler)

stage.addEventListener(MouseEvent.MOUSE_DOWN, downHandler)

stage.addEventListener(MouseEvent.MOUSE_UP, upHandler)

function dragHandler(event:Event):void { dragC(dragMe) }

function upHandler(event:MouseEvent):void { up(dragMe) }

function downHandler(event:MouseEvent)

This works fine, it scrolls with easing, but on the device its quite slow, i mean its not jumpy but once flicked it scrolls very slow. Even if i changed the variable: ease

A

anthoangAuthor

Known Participant

I see a Multitouch event which could potentially be used to enable scrolling. Perhaps the GESTURE_SWIPE event will work?

Multitouch.inputMode = MultitouchInputMode.GESTURE;

stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, my_function);

Leafcutter

Inspiring

I have built some components in a pure AS3 project that have the touch scrolling behaviour. They work fine.

I just used mouseDown, mouseUp, mouseMove events to track touches and record coordinates and then moved the objects in an EnterFrame event listener. On mouseUp I work out a velocity (either the most recent move or a smoothed history if the recent move isn't very much) and then decay that in the EnterFrame until stop. At the extremes up or down I bounce back again using the velocity.

Performance is pretty good for the scrolling itself. I think life is much easier if you use Flex as the work is already done in the Flex components (as I understand it).

K

KerrDoubleTake

Inspiring

Flash/Flex mobile apps support the mobile inertial scrolling "out-of-the-box". Check out the List component.

And, BTW, you can actually enable inertial scroll in a web app too. Set interactionMode='touch' and it will work on web app just like it does on mobile.

Don

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded