Select and move multiple movieclips dynamically (AS2, CS4)

Hi Flashkit.

I have a button that uses attachMovie to add a movieclip to the stage. You can add multiple instances of this clip to the stage, which works fine.

I also have a feature whereby you can select and move these objects around the stage one by one.

I am trying to add a feature whereby you can select more than one object at a time (indicated with a drop shadow - which I have working) and then move them together. This feature would also allow you to rotate the selected objects by 90º, leaving the unselected objects where they are.

I'm fairly certain that I'll need an array to hold the selected objects, and then use this info to move/transform only the chosen objects, but I can't figure out how to implement this.

Any help on this tricky issue greatly appreciated!!!!

:confused:

No-one had any thoughts on this? Maybe I need to put it more simply.

I'd like to select multiple movieclips and then move them simultaneously using AS2. The selection process is simple: click the movieclip (to make active), and click again to deactivate it. Using this method, select your chosen shapes on the stage, and move them simultaneously by dragging any one of the chosen shapes. The chosen shapes will stay in formation.

Any help out there? Pretty please...? :)

I understand what you are requesting, and you are correct, using AS2.0 an array will be needed to store all of the selected MCs. Then you can use a mousemove function to move the object an equal number of pixels based on the initial and current mouse position.

Since each object will have its own instance name, it isn't as much of a difficult proposal as it may sound....at least at first glance.

Thanks for the reply - I have my mousemove function working when it comes to individual objects, but I'm getting lost on moving more than one. I'm trying to compare the chosen objects _x and _y with that of the selected objects for a simple difference number to move that individual object. Having trouble knowing where to set-up the array...

Here's some (not working) code:

Actionscript Code:

thisShape.onPress = function() {
            selectedShape = this;
            _root.shapeNum++;
            this.swapDepths(_root.shapeNum);
            moveMe = true;
            
            // where was it clicked
            mouse_on_me_x = _xmouse - selectedShape._x;
            mouse_on_me_y = _ymouse - selectedShape._y;
            
            // set up multiple shapes
            for (i = 1000; i < _root.shapeNum; i++) {
                moveMeToo = _level0.workArea_mc["shape" + i];
                
                moveDiff_x = moveMeToo._x - selectedShape._x;
                moveDiff_y = moveMeToo._y - selectedShape._y;               
            }
    };
    thisShape.onMouseMove = function() {
            if (!moveMe) {
                return;
            } 
            // snap to grid
            selectedShape._x = _xmouse - mouse_on_me_x - ((_xmouse - mouse_on_me_x) % _root.gridSize);
            selectedShape._y = _ymouse - mouse_on_me_y - ((_ymouse - mouse_on_me_y) % _root.gridSize);
            
            // check against all available shapes to see if they move too
            for (i = 1000; i < _root.shapeNum; i++) {
                if (moveMeToo.activeMe == undefined || false) {
                    moveMeToo.activeMe = false;
                } else if (moveMeToo.activeMe == true) {
                    // move objects:
                    moveMeToo._x = selectedShape._x + moveDiff_x; 
                    moveMeToo._y = selectedShape._y + moveDiff_y;
                }
            }
            updateAfterEvent();
    };

Thanks!

I'd change your code a little, since you don't have to worry about the multiple selection until you start moving an object. For the press function, it job should be to add or remove itself from a designated array.

I think I understand the problem. Your code has been built within EACH of the objects placed on the stage, but you need that to relate to all objects on the stage.

You may want to move your mousemove function to a global level along with the array so it can be modified from the main timeline and not from within each object. It will make your work easier.

I think I understand. How would I implement a global function?

Very similar to a local one, except instead of having the individual objects call the local function, you have the stage monitor the movement and apply that movement to all objects within the array (all selected). I'll try to replicate and send it to you....

Great thanks...!

What I'll do it have circles placed on the stage and then you select one, a drop shadow will appear. If you on a selected object, and press and hold and move then all selected objects will move together.

just the ticket...

:D

Looking forward to seeing it...
(when do you think it possible?)

:)

Sorry it took so long, I had other work to complete, below is the code I used to get your function to work, I've also attached the file.

Your version was very very close, it was all about the placement of the code, separating global and local functions and how it interacts with all the objects (balls in my case) at one time. I also used a timer to determine if the user is selecting or pressing and holding. Anyway, here is the code which ALL appears on the main timeline, the only thing I have within my object is a stop();

PHP Code:

---

//Randomly place 10 circles on the stage
var NUMOFBALLS:Number = 10;
var selectArr:Array = new Array();
var moveObjects:Boolean = false;
var isMoving:Boolean = false;
var intervalID:Number;
var minTime:Number = 0;
var PAHDelay:Number = 100;
var deselectOnRelease:Boolean = true;

//STAGE EVENT LISTENER
this.onEnterFrame = function()
{
    if(moveObjects && !isMoving && minTime > PAHDelay)
    {
        //Move all objects that are in the selectArr
        for(k=0; k < selectArr.length; k++)
        {
            //Calculate their differences from the mouse
            selectArr[k].distX = selectArr[k]._x - _root._xmouse;
            selectArr[k].distY = selectArr[k]._y - _root._ymouse;
        }
        isMoving = true;
    }
}

this.onMouseMove = function()
{
    if(moveObjects && isMoving)
    {
        for(k=0; k < selectArr.length; k++)
        {
            //Move with the mouse now
            selectArr[k]._x = _root._xmouse + selectArr[k].distX;
            selectArr[k]._y = _root._ymouse + selectArr[k].distY;
        }
    }
    updateAfterEvent();
}

for(i=0; i < NUMOFBALLS; i++)
{
    //Create the Ball on the stage
    this.attachMovie("Ball", "Ball" + (i+1), this.getNextHighestDepth());
    
    //Update the local text information
    this["Ball" + (i+1)].txtBallNumber.text = (i+1);
    
    //Move the ball to a randomly generated position - based on stage dimensions
    this["Ball" + (i+1)]._x = Math.random()*(Stage.width - (this["Ball" + (i+1)]._width +64));
    this["Ball" + (i+1)]._y = Math.random()*(Stage.width - (this["Ball" + (i+1)]._height +64));
    
    //Add this button's functionality
    //ON PRESS
    this["Ball" + (i+1)].onPress = function()
    {
        function callback(){minTime = getTimer();}
        intervalID = setInterval(callback, PAHDelay);
        moveObjects = true;
    }
    
    //ON RELEASE
    this["Ball" + (i+1)].onRelease = this["Ball" + (i+1)].onReleaseOutside = function()
    {
        moveObjects = false;
        isMoving = false;
        if (minTime < PAHDelay) 
        {
            if(this._currentframe == 1)
            {
                this.gotoAndStop(2);
                updateSelectArr(this, true);
            }
            else
            {
                this.gotoAndStop(1);
                updateSelectArr(this, false);
            }
        }
        else
        {
            if(deselectOnRelease)
            {
                for(k=0; k < selectArr.length; k++)
                {
                    selectArr[k].gotoAndStop(1);
                }
                selectArr = new Array();
            }
        }
        
        //Clear the interval and reset the watcher
        clearInterval(intervalID);
        minTime = 0;
    }
}

//GLOBAL FUNCTIONS
function updateSelectArr(objName, addTo):Void
{
    if(addTo)
    {
        selectArr.push(objName);
    }
    else
    {
        //Make sure to remove just this named object
        for(j=0;j < selectArr.length; j++)
        {
            if(selectArr[j] == objName)
            {
                selectArr.splice(j,1);
            }
        }
    }
} 


---

I hope this works for you, I created it using CS4 and AS2.0.

Having a look now. Thanks so much for your input!

:thumbsup:

Very clever stuff. Impressive to say the least. I'm now going through it and seeing how I can apply the principles to my flash file. Thanks a million!

I have another question that is related!

How would I use another button to rotate these selected objects by 90 degrees, around a dynamic axis - ie the centerpoint of the grouped objects?

I have managed to rotate the objects using

_rotation += 90;

But of course this rotates the objects individually around an axis based on the objects top left coordinates....

Is this very difficult?

Thanks again...

Wow, that is a good question. You are wanting the system to group selected items together and then using a center registration point, rotate them. Hummmm...that may take a minute of trial and error to figure out.

Just from the little research I've done, this isn't a small feat. This will take some serious math because you're going to have to fake grouping the objects together, determine the center point and then mathematically move each of the object as a simulated single unit, all the while they are separate.

You may be able to duplicate the clips and move them into another empty movieclips and then when done the rotation, move this out back on the main stage, of course, you'll need to deal with the different X and Y position from global to local and back again. Sounds trying, but a little fun. If I get an opportunity I will try to work on it, maybe someone on this forum and lend a hand.

Now thinking about it, if you did that, then you could also do it for the function you are using now, the uniform drag function, rather than what I suggested using. I guess it is 6 in one hand half dozen in the other.

Yes that's the idea.

It's had me scratching my head for longer than a minute...

;)

I had a couple of after thoughts and added to my previous post.

I too thought that you'd need to create a new movieclip to hold the selected objects, and then work out the centerpoint of that clip. But that scared me, as I can't even work out where to begin with this....

How do you work out the center of an object even, so that you can rotate around that point?

:confused:

Usually when you create and store an object in the library, you can manipulate the registration point which will alter the center point of rotation. I haven't done that dynamically, and you may not need to if you create a movieclip with nothing in it, but the registration point in the center.

There is possibly a way to do that completely in actionscript, but I off hand I don't know how...sounds like something I should look up.

After research, I found there is a property called _xreg and _yreg. I'm trying to figure out if that is available or needed in Actionscript 3.0, but here is a link that will provide some additional information.

http://www.darronschall.com/weblog/2...n-with-as2.cfm

Just a note, according to the text this function should also work in AS3.0.

That's a great find.

:)

I'd been looking through this thread

http://board.flashkit.com/board/showthread.php?t=629305

but the "Dynamic MovieClip Registration with AS2" by darronschall was great and easy to use... Thanks!

Actionscript Code:

import com.darronschall.DynamicRegistration;

import mx.transitions.Tween;// Import tween class 
import mx.transitions.easing.*;// Import easing class 

// Assume there is an instance named square_mc on the stage  
var square_mc:MovieClip;  
  
DynamicRegistration.initialize(square_mc);  
// set up initial registration point
var centerX = square_mc._width / 2;
var centerY = square_mc._height / 2;
square_mc.setRegistration(centerX,centerY);

var rotateMe = 90;

my_butt.onRelease = function() { 
    my_butt.enabled = false;
     var thisTween:Tween = new Tween(square_mc, "_rotation2", Regular.easeOut, square_mc._rotation2, rotateMe, 1, true); 
     thisTween.onMotionFinished = function() { 
        delete this; 
        rotateMe += 90;
        if(rotateMe > 270) {
            rotateMe = 0;
        }
        trace("rotateMe = " + rotateMe);
        my_butt.enabled = true;
     };  
};

Now, back to the problem of rotating (or flipping) more than one selected item...

:zombie:
:confused:

...

Wow - that's awesome...
Thanks to both of you...!

Dare I ask - how would you then flip (ie reflect around centerpoint) the grouped items?

...

Just wow. Thanks indeed!

Flashkit (and all who sail in her) for president...

hmmm...

there is a strange behaviour on flipping. Set the rotation to 90 degrees. Select more than one object and rotate once, then flip grouped objects, and you'll see what I mean...
Any ideas?

Also, how would you set-up the background as a button so that if you clicked on it, it deselected all the objects. Sounds easy, but I can't figure it out...

Thanks!

Not seeing the problem, can you post pics?

...

Nice fix on the background click! I was going in the wrong direction on that one, using an invisible button...

Here are pics:
Attachment 71855
Attachment 71856
Attachment 71857
Attachment 71858

The first shows configuration of objects
Second demonstrates correct flip.
Third shows objects rotated 90 degrees.
Fourth shows incorrect flip.

Flip button used is top one on mc.

Hope this makes sense.

Cheers!

...

Brilliant. You make it look easy. Now I'm trying to add a tween to the translations... Is that even possible?

Thanks!

...

dawsonk!

:cool:

That is better than poetry! Thank you so very much...

Hi again.

Just noticed a very strange anomaly. Everything works brilliantly. However, if you select the 1 shape and the 2 shape (in version below) and press rotate, it incorrectly rotates the objects onto one another. I can't for the life of me figure out why...

Any ideas?

Code:

---

import flash.filters.DropShadowFilter;
import flash.geom.Point;
import mx.transitions.Tween;
import mx.transitions.easing.*;

var rotationAmt = 90;
var x1, y1, x2, y2;
var pickedArray = new Array();

// movie clips on the stage, registration points are in the center
shape1001.onPress = doPress;
shape1002.onPress = doPress;
shape1003.onPress = doPress;
shape1004.onPress = doPress;
shape1005.onPress = doPress;
shape1006.onPress = doPress;

// movie clips on stage, registration point are in the center
rotatorMC._visible = false;
flipperMC._visible = false;

rotatorMC.onPress = doRotate;
flipperMC.onPress = doFlip;
rotateButton.onPress = doRotate;
flipButton.onPress = doFlip;

var bg = this;
bg.onMouseDown = clearPicked;
var intID;
var isLocked = false;

function setLimit() {
        isLocked = true;
        intID = setInterval(clearLimit, 600);
}
function clearLimit() {
        clearInterval(intID);
        isLocked = false;
        flipButton.enabled = true;
        rotateButton.enabled = true;
}

function clearPicked() {
        var isPicked = false;
        for (var j in bg) {
                if (typeof (bg[j]) == "movieclip" && bg[j] != this) {
                        if (bg[j].hitTest(_xmouse, _ymouse, true)) {
                                isPicked = true;
                                break;
                        }
                }
        }
        if (!isPicked) {
                for (var i in pickedArray) {
                        pickedArray[i].filters = null;
                        pickedArray[i].swapDepths(pickedArray[i].getDepth() * -1);
                }
                pickedArray = new Array();
                updatePos(true);
        }
}

function doFlip() {
        if (!isLocked) {
                flipButton.enabled = false;
                flipButton.gotoAndStop(1);
                setLimit();
                var isV = (rotatorMC._y>_ymouse) ? true : false;
                for (var i in pickedArray) {
                        var mc = pickedArray[i];
                        if (isV) {
                                if (Math.abs(mc._rotation) != 90) {
                                        new Tween(mc, "_xscale", Strong.easeOut, mc._xscale, -mc._xscale, 0.5, true);
                                } else {
                                        new Tween(mc, "_xscale", Strong.easeOut, mc._xscale, 100, 0.5, true);
                                        new Tween(mc, "_yscale", Strong.easeOut, mc._yscale, -mc._yscale, 0.5, true);
                                }
                                new Tween(mc, "_x", Strong.easeOut, mc._x, rotatorMC._x+(rotatorMC._x-mc._x), 0.5, true);
                        } else {
                                if (Math.abs(mc._rotation) != 90) {
                                        new Tween(mc, "_yscale", Strong.easeOut, mc._yscale, -mc._yscale, 0.5, true);
                                } else {
                                        new Tween(mc, "_yscale", Strong.easeOut, mc._yscale, 100, 0.5, true);
                                        new Tween(mc, "_xscale", Strong.easeOut, mc._xscale, -mc._xscale, 0.5, true);
                                }
                                new Tween(mc, "_y", Strong.easeOut, mc._y, rotatorMC._y+(rotatorMC._y-mc._y), 0.5, true);
                        }
                }
        }
}

function doRotate() {
        if (!isLocked) {
                rotateButton.enabled = false;
                rotateButton.gotoAndStop(1);
                setLimit();
                var cen = rotatorMC;
                var dir = (cen._x>_xmouse) ? -1 : 1;
                var p1:Point = new Point(cen._x, cen._y);
                for (var i in pickedArray) {
                        var mc = pickedArray[i];
                        var p2 = new Point(mc._x, mc._y);
                        var len = Point.distance(p1, p2);
                        var angle;
                        if (cen._y>mc._y) {
                                angle = Math.round(Math.atan((cen._y-mc._y)/(cen._x-mc._x))*(180/Math.PI));
                                angle = (angle<0) ? 180+angle : angle;
                        } else if (cen._y<mc._y) {
                                angle = Math.round(Math.atan((mc._y-cen._y)/(mc._x-cen._x))*(180/Math.PI));
                                angle = (angle>=0) ? 180+angle : angle;
                        } else {
                                trace(cen._x+" "+mc._x)
                                angle = (cen._x<mc._x) ? -180 : 360;
                        }
                        new Tween(mc, "_rotation", Strong.easeOut, mc._rotation, mc._rotation+(90*dir), 0.5, true);
                        new Tween(mc, "_x", Strong.easeOut, mc._x, cen._x-(len*Math.cos((angle+(90*dir))*Math.PI/180)), 0.5, true);
                        new Tween(mc, "_y", Strong.easeOut, mc._y, cen._y-(len*Math.sin((angle+(90*dir))*Math.PI/180)), 0.5, true);
                }
        }
}

function doPress() {
        var isPicked = true;
        for (var i in pickedArray) {
                // if already selected
                if (pickedArray[i] == this) {
                        pickedArray.splice(i,1);
                        isPicked = true;
                        this.filters = null;
                        updatePos(true);
                        this.swapDepths(this.getDepth() * -1);
                        break;
                }
        }
        if (isPicked) {
                var filter = new DropShadowFilter(3, 45, 0x000033, 0.45, 5, 5, 1, 3, false, false, false);
                var filterArray = new Array();
                filterArray.push(filter);
                this.filters = filterArray;
                pickedArray.push(this);
                updatePos(true);
                this.swapDepths(pickedArray.length);
                this.onMouseMove = updatePos;
                this.onMouseUp = clearMouse;
        }
}
function updatePos(isSet) {
        x1 = Stage.width;
        y1 = Stage.height;
        x2 = 0;
        y2 = 0;
        for (var j in pickedArray) {
                if (isSet != undefined) {
                        pickedArray[j].baseX = pickedArray[j]._x - _xmouse;
                        pickedArray[j].baseY = pickedArray[j]._y - _ymouse;
                } else {
                        pickedArray[j]._x = pickedArray[j].baseX + _xmouse;
                        pickedArray[j]._y = pickedArray[j].baseY + _ymouse;
                }
                pickedArray[j]._x = Math.round(pickedArray[j]._x);
                pickedArray[j]._y = Math.round(pickedArray[j]._y);
                x1 = Math.min(x1, pickedArray[j]._x);
                y1 = Math.min(y1, pickedArray[j]._y);
                x2 = Math.max(x2, pickedArray[j]._x);
                y2 = Math.max(y2, pickedArray[j]._y);
        }
        rotatorMC._x = flipperMC._x = ((x2 - x1) / 2) + x1;
        rotatorMC._y = flipperMC._y = ((y2 - y1) / 2) + y1;
        rotatorMC.swapDepths(pickedArray.length + 10);
        flipperMC.swapDepths(pickedArray.length + 9);
        rotatorMC._visible = flipperMC._visible = (pickedArray.length > 0) ? false : false;
}

function clearMouse() {
        delete this.onMouseMove;
        delete this.onMouseUp;
}

---

Just two lines of code? Easy when you know how :) Thanks a million!

How would you scale the selected group by 25% increments, bigger or smaller?

Also, there is an odd behaviour with the objects on different layers...
1. Select one object and move it over another one.
2. Then select the object that is below the first one, and move it so that it rises above the first one.
3. When you drop it, it falls behind the first object, rather than remain at the front.

??

Hello again. I found a way to do the scaling :)

Any ideas on the depth problem I mentioned above. I need the last selected object to be on top of all others....

Any pointers much appreciated.

:)

Code:

---

function clearPicked() {
        var isPicked = false;
        for (var j in bg) {
                if (typeof (bg[j]) == "movieclip" && bg[j] != this) {
                        if (bg[j].hitTest(_xmouse, _ymouse, true)) {
                                isPicked = true;
                                break;
                        }
                }
        }
        if (!isPicked) {
                for (var i in pickedArray) {
                        pickedArray[i].filters = null;
                        //pickedArray[i].swapDepths(pickedArray[i].getDepth()*-1);
                }
                pickedArray = new Array();
                updatePos(true);
        }
}

function doPress() {
        var isPicked = true;
        for (var i in pickedArray) {
                // if already selected
                if (pickedArray[i] == this) {
                        pickedArray.splice(i,1);
                        isPicked = true;
                        this.filters = null;
                        updatePos(true);
                        //this.swapDepths(this.getDepth()*-1);
                        break;
                }
        }
        if (isPicked) {
                var filter = new DropShadowFilter(3, 45, 0x000033, 0.45, 5, 5, 1, 3, false, false, false);
                var filterArray = new Array();
                filterArray.push(filter);
                this.filters = filterArray;
                pickedArray.push(this);
                updatePos(true);
                //this.swapDepths(pickedArray.length);
                this.swapDepths(bg.getNextHighestDepth());
                this.onMouseMove = updatePos;
                this.onMouseUp = clearMouse;
        }
}

---

Perfect...

I was very close to getting that one!

Thanks indeed :)