AS3, scroll content by dragging content. Like on a phone. no scroll bar. flash

Question

I am trying to figure out how to scroll content in a action script project by dragging the content. This would be the same functionality as seen on a phone using touch gestures to move content. I would like to do this with the mouse. I do not want a scroll bar. I want to drag a Movie clip with my mouse to scroll the content in the movie clip.

Does anyone have any tips or urls for me to check out?

thanks cp

http://www.google.com/search?client=safari&rls=en&q=as3+movieclip+draggable&ie=UTF-8&oe=UTF-8 — Lee, Feb 21 '11 at 03:57
@ Lee. That really isn't a helpful comment. There's nothing in the question that suggests he didn't do any searching so your facetiousness is rather inappropriate don't you think? This is a forum for asking and receiving help is it not? — Ribs, Feb 21 '11 at 20:46

score 2 · Accepted Answer · answered Apr 22 '11 at 00:09

Actually you can also try to use startDrag here.

Startdrag has two optional parameters: lockcenter (to center the movieclip to the mouse after dragging), a Boolean and bounds, to define the area you can drag it in, a Rectangle.

So if you want to scroll vertically, use the Rectangle respecitvely:

movie.startDrag(false, new Rectangle(m.x, -10000, 0, 2 * 10000));

Here I wrote -10000 as the y coordinate of the Rectangle and 2 * 10000 for its height. This is to make sure you can drag it along, change these numbers if necessary.

The small code for dragging looks like this:

movie.addEventListener("mouseDown", md);

function md(evt:*):void
{
    movie.startDrag(false, new Rectangle(m.x, -10000, 0, 2 * 10000));
    stage.addEventListener("mouseUp", mu);
}

function mu(evt:*):void
{
    movie.stopDrag();
    stage.removeEventListener("mouseUp", mu);
}

Maybe this meets your needs.

score 1 · Answer 2 · answered Feb 21 '11 at 04:42

bullet idea:

on mouse_down start a toggle
quit the toggle on mouse_up
if the toggle is on, make mouse_move pay attention to the drag boundaries
if mouse is above, to the right, to the left, or below the boundaries while the toggle is true - don't allow the mouse to move anymore, but make the scroll area move either up/down or left/right.

hopefully this helps / makes sense.

Ribs · Answer 3 · 2011-02-21T05:42:20.137

Here's something to get you started. I'm working out the boundaries now. Few minutes on that. This presumes you have a movieclip on stage, in my example its a red box (your presumed content), with instance name "box". This concept could be expanded to scroll content within a container if you wish.

EDIT have some unexpected behavior where the box is getting stuck at the boundaries. This idea isn't quite right yet but I think its on the right path. I'm still tinkering with it. :)

stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, calculatePosition);

var scrolling:Boolean;
var scrollMax = this.stage.stageHeight;

function onDown(evt:MouseEvent = null):void
{
    scrolling = true;
}

function onUp(evt:MouseEvent = null):void
{
    scrolling = false;
}

function calculatePosition(evt:Event)
{
    if(scrolling)
    {
        var percent = getPercentageFromNumber(stage.mouseY, scrollMax, 0);

        var pos = getNumberFromPercentage(percent, scrollMax, 0);

        if(box.y + box.height < scrollMax && box.y > 0)
        {
            box.y = pos;
        }
        else
        {
            onUp();
        }
    }
}

function getPercentageFromNumber(val:Number, max:Number, min:Number = 0):Number
{
    var percent:Number = (val - min) / (max - min) * 100;

    return percent;
}

function getNumberFromPercentage(perc:Number, max:Number, min:Number = 0):Number
{
    var absolute:Number = (perc * (max - min) / 100) + min;

    return absolute;
}

I figured out what i wanted and posted the code here. http://rcolepeterson.posterous.com/scroll-content-by-dragging-it — Cole Peterson, Feb 21 '11 at 22:30
@Cole Peterson Then please add your solution as an answer (to your own question) and accept it. Maybe someone in the future will find it useful. — kapa, Apr 22 '11 at 09:30

AS3, scroll content by dragging content. Like on a phone. no scroll bar. flash

3 Answers3