Select and move multiple movieclips dynamically (AS2, CS4)

[mr_proud]

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!!!!

[mr_proud]

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...?

[samac1068]

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.

[mr_proud]

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:

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!

[samac1068]

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.

[mr_proud]

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

[samac1068]

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....

[mr_proud]

Great thanks...!

[samac1068]

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.

[mr_proud]

just the ticket...

[mr_proud]

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

[samac1068]

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();

//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.

[mr_proud]

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

[mr_proud]

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...

[samac1068]

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.

[mr_proud]

Yes that's the idea.

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

[samac1068]

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

[mr_proud]

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?

[samac1068]

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.

[samac1068]

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.