# Draggable movieclip with loop in Y-axis

**URL:** https://forum.kirupa.com/t/draggable-movieclip-with-loop-in-y-axis/296604
**Category:** Uncategorized
**Created:** [September 17, 2009, 6:37am UTC](https://forum.kirupa.com/t/draggable-movieclip-with-loop-in-y-axis/296604 "2009-09-17T06:37:24Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Urme](https://avatars.discourse-cdn.com/v4/letter/u/f1d935/32.png) [@Urme](https://forum.kirupa.com/u/Urme)
#### Post date: [September 17, 2009, 6:37am UTC](https://forum.kirupa.com/t/draggable-movieclip-with-loop-in-y-axis/296604/1 "2009-09-17T06:37:24Z")

</div>

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](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 🙂

```
     [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](https://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](https://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 &gt;= 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 &gt;= 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.