Restricting a nested movieclip from resizing when the parent mc resizes.

Download Source

Hi,

My colleague ran into a small problem at work the other day. He wanted to resize a movieclip but didn’t want it’s child to resize relatively.
He figured out another way to tackle it , but it got me thinking and after toiling a bit I came up with a working solution.

The solution , uses the functions localToGlobal() and globalToLocal() . These are one of the most confusing functions I’ve ever come across
in Actionscript. I will write an article about them and try and explain them in really simple terms.

For now, lets focus on the problem at hand.

So you have a big rectangle movie clip on stage, with an instance name of  “outer_mc”. Inside that you have a tiny square which is also a movie clip.
This has the instance name of “inner_mc”.  On the first frame of the timeline, you have the following script to change the width of the outer_mc.

outer_mc.width +=500; //Increasing the width of the mc by 500 pixels.

Once you test this setup, you notice that the parent movie clip re sizes and so does the child mc. But you don’t want the child mc to resize. OMG!! now what ? 🙂
The solution is simple,  and I’m sure this is not the only one.  I’d like to know of a better soln, if there’s any  🙂

But here’s what I did.

I first thought of saving the width of the inner_mc before resizing the outer_mc in  a variable, so that I could change it back to the old value after the resize.
The idea was right, but the implementation was wrong.

This was my code

var oldW= inner_mc.width;
outer_mc.width +=500;
inner_mc.width = oldW;

I was very confident after testing the movie with the code above but alas, it didn’t work as I expected it to. Why ? Because I forgot about the Local and World coordinates.

So here’s what happens,

When you scale the outer_mc, the inner_mc does scale with it. But the inner_mc.width property gives us the width of the mc relative to the outer_mc. ie. It’s local width.
The local width, doesn’t change even when the outer_mc is scaled. So to get the actual change in the width, we must convert the local width to a global width. By combining
this with the idea of storing the old width , I managed to successfully restrict the inner_mc from scaling ( Well, not technically. Because it does scale. I just resize it back to the old value 🙂 ).

Here’s the code.

var target_mc:MovieClip = outer_mc.inner_mc;
//Retrieving the width value for inner_mc.width relative to stage (ie. Global width value)
var pointDim:Point = outer_mc.localToGlobal(new Point(target_mc.width,target_mc.width));

//Saving the coordinates.
var oldGlobalCords = pointDim;</pre>
trace("\n");
trace("Before Resizing!");   //Just tracing the local and global width for inner_mc before resizing
trace("Local inner mc width : " + target_mc.width);
trace("Local inner mc height : " + target_mc.height);
trace("Global Inner mc width : " + pointDim.x);
trace("Global Inner mc height : " + pointDim.y);

trace("\n");

//Scaling the outer_mc
outer_mc.width += 500;
//We must call localToGlobal again to get the changed global width after resize.
pointDim  = outer_mc.localToGlobal(new Point(target_mc.width,target_mc.height));
</pre>
trace("After resizing");  //Just tracing the local and global width for inner_mc after resizing
trace("Local inner mc width : " + target_mc.width);
trace("Local inner mc height : " + target_mc.height);
trace("Global Inner mc width : " + pointDim.x);
trace("Global Inner mc height : " + pointDim.y);

//Setting the width of the inner_mc back to the old width (the one before resizing).
target_mc.width = outer_mc.globalToLocal(origGlobalCords).x;

That’s it. It worked like this :).

Download Source