startDrag en stopDrag

[a.v.d.p.]

hallo,
Ik ben bezig met mijn eerste Flash/AS3 project. Het gaat best goed, maar nu heb ik een probleem waar ik al dagen mee bezig ben en waar ik niet uitkom. Misschien dat iemand hier me kan en wil helpen??

Ik heb op de stage een boxContainer met daarin een aantal sprites (box01, box02 etc) met daarin verschillende afbeeldingen (loader). Deze afebeeldingen laad ik mbv een xml-bestand. Deze box'en wil ik kunnen draggen en droppen. Met startDrag en stopDrag gaat dit prima, maar... Ik heb een kleine rotatie toegevoegd bij een mouseUp. Deze rotatie wordt weer 0 bij een mouseDown. Het probleem is dat wanneer je op een hoekje klikt en de afbeelding draait terug, dat er dan soms een mouseOut optreedt (de afbeelding draait buiten de cursor; bijvoorbeeld bij een rotatie van -10, je klikt rechtsbovenin en de afbeelding roteert terug naar 0 en buiten je mouse focus) hierdoor werkt evt.target.stopDrag() niet meer en blijft de drag 'hangen'.

zie code:


var boxContainer:Sprite = new Sprite();
boxContainer.name = "boxContainer";
boxContainer.x = 0;
boxContainer.y = 0;
addChild(boxContainer);
for (var i:int = 0; i < iMax; ++i) {
var box:Sprite = new Sprite();
box.name = "box" + varID;
box.buttonMode = true;
box.graphics.beginFill(0xCCCCCC);
box.graphics.drawRect(0, 0, boxWidth, boxHeight);
box.graphics.endFill();
box.width = boxWidth;
box.height = boxHeight;
box.x = startX;
box.y = startY;
boxContainer.addChild(box);

var pict:Loader = new Loader();
var url:String = "http://blablabla;
var request:URLRequest = new URLRequest(url);
pict.contentLoaderInfo.addEventListener(Event.COMP LETE, completeHandler);
pict.contentLoaderInfo.addEventListener(ProgressEv ent.PROGRESS, progressHandler);
pict.load(request);
pict.name = varPictName;
pict.mouseEnabled = false;
box.addChild(pict);

box.addEventListener(MouseEvent.MOUSE_OVER, boxOnMouseOver);
box.addEventListener(MouseEvent.MOUSE_OUT, boxOnMouseOut);
box.addEventListener(MouseEvent.MOUSE_DOWN, boxOnPress);
box.addEventListener(MouseEvent.MOUSE_UP, boxOnRelease);
}

function boxOnMouseOver(evt:MouseEvent) {
evt.target.parent.setChildIndex(evt.target, (evt.target.parent.numChildren - 1));
}
function boxOnMouseOut(evt:MouseEvent) {
}

function boxOnPress(evt:MouseEvent) {
evt.target.filters = [dropShadow];
evt.target.scaleX = 1.2;
evt.target.scaleY = 1.2;
evt.target.rotation = 0;
evt.target.startDrag();
}
}

function boxOnRelease(evt:MouseEvent) {
evt.target.filters = null;
evt.target.scaleX = 1;
evt.target.scaleY = 1;
var randomNumber:Number = Math.round((Math.random()*(10-(-10))) - 10);
evt.target.stopDrag();
evt.target.rotation = randomNumber;
}


ik heb het geprobeerd met een stopDrag() bij MouseOut, maar dan krijg je het probleem dat je sneller kan draggen dan de framerate, waardoor de afbeelding/box steeds blijft hangen.

Iemand een idee, tip, opmerking??
alvast bedankt!

[theFlashWizard]

Je bedoelt dat je de afbeeldingen normaal gesproken roteert en dat wanneer men ze drag't ze recht draaien?

(de afbeelding draait buiten de cursor; bijvoorbeeld bij een rotatie van -10, je klikt rechtsbovenin en de afbeelding roteert terug naar 0 en buiten je mouse focus)
Dit verhaal snap ik niet.

Ik weet nu niet of je er wat aan hebt, maja voor de zekerheid:
http://www.flashfocus.nl/forum/showthread.php?t=34994&highlight=ColorViewer

[a.v.d.p.]

bedankt voor je reactie. Ik heb naar je voorbeeld gekeken, het gaat alleen iets verder dan ik nu aankan en zo te zien lost het mijn probleem niet op. Ik bewaar het iig, want het ziet er wel goed uit.

Hoe het in mijn geval gaat:
startpositie: box'en recht in een matrix (rotatie = 0)
1e keer mouseDown: iets vergroot en startDrag()
1e keer mouseUp: originele grootte, stopDrag() en een kleine willekeurige rotatie (dit om een soort van slordig post-it effect te geven, alsof je het op een prikbord plaatst)

2e keer mouseDown en verder: rotatie = 0, iets vergroot
2e keer mouseUp en verder: gelijk aan 1e keer mouseUp

zie de volgende code. Wanneer je aan de bovenkant van de box klikt en loslaat, dan blijft de drag hangen:

var boxContainer:Sprite = new Sprite();
boxContainer.name = "boxContainer";
boxContainer.x = 0;
boxContainer.y = 0;
addChild(boxContainer);

var box:Sprite = new Sprite();
box.name = "box01";
box.buttonMode = true;
box.graphics.beginFill(0xCCCCCC);
box.graphics.drawRect(50, 50, 50, 50);
box.graphics.endFill();
boxContainer.addChild(box);

box.addEventListener(MouseEvent.MOUSE_OVER, boxOnMouseOver);
box.addEventListener(MouseEvent.MOUSE_OUT, boxOnMouseOut);
box.addEventListener(MouseEvent.MOUSE_DOWN, boxOnPress);
box.addEventListener(MouseEvent.MOUSE_UP, boxOnRelease);


function boxOnMouseOver(evt:MouseEvent) {
evt.target.parent.setChildIndex(evt.target, (evt.target.parent.numChildren - 1));
}
function boxOnMouseOut(evt:MouseEvent) {
}

function boxOnPress(evt:MouseEvent) {
evt.target.scaleX = 1.2;
evt.target.scaleY = 1.2;
evt.target.rotation = 0;
evt.target.startDrag();
}


function boxOnRelease(evt:MouseEvent) {
evt.target.filters = null;
evt.target.scaleX = 1;
evt.target.scaleY = 1;
var randomNumber:Number = -20; //Math.round((Math.random()*(10-(-10))) - 10);
evt.target.stopDrag();
evt.target.rotation = randomNumber;
}

[theFlashWizard]

Omdat de muis niet meer boven de mc zit merkt hij de mouseUp niet meer volgens mij.

Vaak loste ik dat op door naar de stage te luisteren en dan hetgeen dat ik drag direct aan te spreken (niet meer via event object).

Iets beters heb ik nog niet echt bedacht.