Draggable movieclip with loop in Y-axis

1

Hello,

For the last couple of days I’ve been trying to find an example of a draggable movieclip (with mouse) in Y-axis which also can loop. This movieclip will load several different dynamic SWF-files from a XML file, but they are all the same width and height.

I want this movieclip draggable in Y-axis only, and it should loop when you reach the end. But I can’t figure it out tbh.

What I want to achieve is similar to this: http://flashden.net/item/xml-drag-gallery-/full_screen_preview/4880

But in a vertical direction and when you grab something all 3 images that are visible should follow the mouse movement.

Here is a code that I’ve written, you can drag the “container”-movieclip, but I can’t figure out how to loop it and everytime I press and drag it again, the movieclip pops back to Y:0 at the mouse-pointer, hard to explain :slight_smile:

     [AS]

import caurina.transitions.*;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.display.MovieClip;

stage.scaleMode = StageScaleMode.NO_SCALE;
//stage.align = StageAlign.LEFT;

stage.addEventListener(Event.RESIZE, resizeHandler);

initSizes();

var numberOfBoxes = 5;
var loadedBoxes = 0;
var addTal:int = 0;

loadBox();
loadBox();
loadBox();
loadBox();
loadBox();

container.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(evt:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_MOVE,moveMC);
stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
container.addEventListener(Event.ENTER_FRAME, onEnter);
//container.startDrag(false,myRectangle);
}

function mouseUpHandler(evt:MouseEvent):void {
container.removeEventListener(Event.ENTER_FRAME, onEnter);
stage.removeEventListener(MouseEvent.MOUSE_MOVE,moveMC);
Tweener.addTween(container,{x:container.x,y:-container.height/2,time:1,transition:“easeIn”});
container.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
}

function moveMC(e:MouseEvent):void {
Tweener.addTween(container,{x:container.x,y:mouseY,time:0.5,transition:“easIn”});
e.updateAfterEvent();
}

function onEnter(event:Event):void {

}

function loadBox() {
var mLoader:Loader = new Loader();
var mRequest:URLRequest = new URLRequest(“casebox.swf”);
mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
mLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressHandler);
mLoader.load(mRequest);
}

function onCompleteHandler(loadEvent:Event) {
this[“casemc”+loadedBoxes] = new MovieClip();
//this[“casemc”+loadedBoxes].name = “box”+loadedBoxes;

this["casemc"+loadedBoxes].addChild(loadEvent.currentTarget.content);



this["casemc"+loadedBoxes].y = -(this["casemc"+loadedBoxes].height/2)+180*loadedBoxes;

trace(this["casemc"+loadedBoxes].y);
this["casemc"+loadedBoxes].x = -(this["casemc"+loadedBoxes].width / 2);
container.addChild(this["casemc"+loadedBoxes]);
loadedBoxes++;
//addChild(loadEvent.currentTarget.content);

}

function onProgressHandler(mProgress:ProgressEvent) {
var percent:Number = mProgress.bytesLoaded/mProgress.bytesTotal;
trace(percent);
}

function initSizes() {
if(stage.stageWidth >= 974) {
bgImage.x = -(stage.stageWidth-974)/2;
bgImage.width = stage.stageWidth;
}

if(stage.stageHeight >= 400) {
    bgImage.y = -(stage.stageHeight-400)/2;
    bgImage.height = stage.stageHeight;
}

}

function resizeHandler(e:Event) {
if(stage.stageWidth >= 974) {
bgImage.x = -(stage.stageWidth-974)/2;
bgImage.width = stage.stageWidth;
}

if(stage.stageHeight >= 400) {
    bgImage.y = -(stage.stageHeight-400)/2;
    bgImage.height = stage.stageHeight;
}

}
[/AS]

I’ve included the fla-files as well. If someone could take a look at it or come with some suggestions I would really appreciate it.