Contract/expand movieclip based on contents within it

[mint_fiend]

I have a movieclip, slider, which holds several different shaped movieclips inside of it. What I would like to do is remove the shapes within slider when a button is pressed and have slider contract/collapse the space where the shape was. Following the same idea, I would like the shapes to be added back in when a different button is pressed and have the area expand. The shapes need to stay in the order they're in whether they are removed or added in.

Is there an easy way to accomplish this without creating multiple movieclips or having a really long timeline on one movieclip? Maybe something similar to a horizontal accordian? Someone suggested tweening using scaleX but that doesn't really accomplish what I'm trying to do - it would also scale the contents of slider.

Here are the files I am working with to give you a better idea of what I currently have working.

[Ned Murphy]

From what you describe I think you will need to have a few movieclips... anything that you want to control either for removal or for resizing would need to be a targetable object, so either a movieclip or a sprite would be needed for each piece.

Is there some kind of background that makes this an issue for you?  Normally you can add and remove content from a movieclip and its size automatically becaomes the size of the content it holds.  So I can only see an issue of you have some nackground that you want to resize for the different amount of stuff contained.  If so, the changing the scaleX (and/or scaleY) of the background would be a likely solution for that portion of it.

[mint_fiend]

The shapes inside slider can be removed in any order. Essentially this is an inventory holder. So if shape 2's and shape 5's spaces are empty, I want to completely slide everything else in to the empty space. But then if I want to add shape 2 back in, it goes back to its designated space and slider expands to fit it. Does that make more sense?

Putting it in terms of HTML, JS, CSS: I have semi-dynamic content within a div. If I press the button to remove shape 2 and shape 5, I want to hide the shapes in their place but let everything else go over the empty spaces.

[Ned Murphy]

While your reply might have added a few details to the description it doesn't make any more sense than what you said originally... let me state that another way... I understood what you said the first time, so there was no need to clarify it.

What I said already covers what you need to do.  You need to have targetable objects that you can hide/move as needed.  You didn't say anything about any background or encompassing enclosure, but if you have one, that will need to be targetable as well so that you can resize it to fit what's showing.

[mint_fiend]

I appologize for restating the details, but it seemed like you were just making a suggestion based off of assumptions instead of looking at my source files and didn't get the full idea. If you did in fact open the .fla and AS files you would get a better understanding of what I have going on. Instead of going in circles with assumptions, I think it would be helpful if you looked at the source files so you can see what I'm trying to accomplish.

I'm not sure what you're referring to when you say targetable object. Yes, the movieclip slider has a solid-color background on the same frame as the shapes. I would like to use a tween effect for when the empty space expands or collapses, which is partly why I mentioned scaleX in the description. Here is my full code:

package  {

    import flash.events.MouseEvent;

    import flash.display.MovieClip;

    import flash.text.TextField;

    public class SwitchMc extends MovieClip{

        public var myTextField:TextField = new TextField(); //to show width and height

        public var mcWidth:Number;

        public var mcHeight:Number;

        public var clicks:int = 0;

        public function SwitchMc() {

            addChild(myTextField);

            myTextField.x = 440;

            myTextField.y = 220;

            switchBtn.addEventListener(MouseEvent.CLICK, showSize);

            addBack.addEventListener(MouseEvent.CLICK, addYellow);

            //slider.cyan.addEventListener(MouseEvent.CLICK, changeClip);

        }

        public function showSize(evt:MouseEvent):void{

            if(clicks>=0 && clicks<3){

                clicks++;

                trace(clicks);

                var mcWidth:int = holder.width;

                var mcHeight:int = holder.height;

                /*

                    1 = purple

                    2 = green

                    3 = yellow

                    4 = cyan

                */

                if(clicks == 1){

                    holder.gotoAndPlay(2);

                    //slider.green.visible = false;

                    slider.removeChild(slider.green);

                }

                if(clicks == 2){

                    holder.gotoAndPlay(3);

                    slider.yellow.visible = false;

                }

                if(clicks == 3){

                    holder.gotoAndPlay(4);

                    slider.cyan.visible = false;

                    switchBtn.removeEventListener(MouseEvent.CLICK, showSize);

                }

            }

            myTextField.text = String('width ' + mcWidth + ' height ' + mcHeight);

        }

        public function addYellow(evt:MouseEvent):void{

            if(slider.yellow.visible == false){

                slider.yellow.visible = true;

            }

            else{

                trace('yellow is still there!');

            }

        }

        /*public function changeClip(evt:MouseEvent):void{

            holder.gotoAndPlay(4);

            //slider.cyan.visible = false;

            slider.cyan.removeEventListener(MouseEvent.CLICK, changeClip);

        }*/

    }

}