# Maxi...A box with animation in AS FLMX

**URL:** <https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861>\
**Category:** Uncategorized\
**Created:** [July 6, 2003, 9:55am UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861 "2003-07-06T09:55:17Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Post date:** [July 6, 2003, 9:55am UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/1 "2003-07-06T09:55:17Z")

</div>

I have a simple box. I whant it to resize it self with nice smove animation using just Actionscript in Flash MX. I did see some tutorials here but I did not find whant I whant.

please see the attch. image. 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 6, 2003, 10:18am UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/2 "2003-07-06T10:18:49Z")

</div>

Here we go again 🙂

1. Create a new, empty movieclip, place it anywhere on stage.

2. Apply the following actionscript to it:

[AS]  
onClipEvent(load){  
\_root.targW = initialwidth;  
\_root.targH = intialheight;  
}  
onClipEvent(enterFrame){  
\_root.box.\_width = \_root.targW-(\_root.targW - \_root.box.\_width)/1.2;  
\_root.box.\_height = \_root.targH-(\_root.targH - \_root.box.\_height)/1.2;  
}  
[/AS]

1. Whenever you want the box to grow bigger, use these actions:

[AS]  
\_root.targW = width\_you\_want\_it\_to\_grow\_to;  
\_root.targH = height\_you\_want\_it\_to\_grow\_to;  
[/AS]

This could be used on a button for example, like this:

[AS]  
on (release){  
\_root.targW = width\_you\_want\_it\_to\_grow\_to;  
\_root.targH = height\_you\_want\_it\_to\_grow\_to;  
}  
[/AS]

or, it could be on a frame, or whatever.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 6, 2003, 10:56am UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/3 "2003-07-06T10:56:37Z")

</div>

Thanx but the box dont get bigger it gets smaller and very small without stopping ??? I did what u said !

maybe a example will be great !

Thanx:love:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 6, 2003, 11:29am UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/4 "2003-07-06T11:29:46Z")

</div>

Huh ? That’s weird … I’ve used that script a million times and it always worked … Are you sure you set the variables to the right values ?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 6, 2003, 6:41pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/5 "2003-07-06T18:41:05Z")

</div>

I think so Yes 😏

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 6, 2003, 7:14pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/6 "2003-07-06T19:14:09Z")

</div>

i try it also, it gets smaller and smaller

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 6, 2003, 7:33pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/7 "2003-07-06T19:33:17Z")

</div>

It should be…

[AS]onClipEvent(load){  
\_root.targW = initialwidth;  
\_root.targH = intialheight;  
}  
onClipEvent(enterFrame){  
\_root.box.\_width += (\_root.targW - \_root.box.\_width)/1.2;  
\_root.box.\_height += (\_root.targH - \_root.box.\_height)/1.2;  
}[/AS]

And don’t forget to change initialheight and initialwidth to the number value you want your clip to start off at, otherwise it will return undefined and be 0.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 6, 2003, 7:48pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/8 "2003-07-06T19:48:58Z")

</div>

Mine works too, postatomic used it and worked fine … I don’t get why it doesn’t work for you … :-\

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 6, 2003, 8:54pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/9 "2003-07-06T20:54:13Z")

</div>

I tryd it agein but it dont get smaller now it gets big but not to big and with very smal animation, it dont move much.

if you tested it many times why not add a simple attch.

Please 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 6, 2003, 11:42pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/10 "2003-07-06T23:42:02Z")

</div>

It won’t work because you can only set \_width and \_height in MX.

```auto
onClipEvent(load){
height = 400; //in pixels
height = 400/_height*100;
}
onClipEvent(enterFrame){
        _yscale += (height - _yscale)/10;
}

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 7, 2003, 8:56am UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/11 "2003-07-07T08:56:04Z")

</div>

[m] I do not understand how your code works. It will be much easyer to add a example fla. because I think is not hard to make one by you guys ? whats the problem ?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 7, 2003, 2:54pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/12 "2003-07-07T14:54:08Z")

</div>

anybody ?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 7, 2003, 3:35pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/13 "2003-07-07T15:35:35Z")

</div>

Here’s a little something:

basically you have two frames in the movie clip and one tells the box to increment width and height by one - so the start and stop button actually stop the animation…

i could have made a function for this but im too lazy:

```auto

this.box._height += 1
this.box._width += 1
// these are text variables:
this.vheight = "height: "+this.box._height
this.vwidth = "width: "+this.box._width

```

what matters in the way the box grows is the registration point, on mine it was top left of the box…

\<embed src=http://mlkdesign.free.fr/misc/kirupa/flashbox.swf height=350 width=500 type=application/x-shockwave-flash\>

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 7, 2003, 3:36pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/14 "2003-07-07T15:36:30Z")

</div>

here’s the fla btw:  
[http://mlkdesign.online.fr/misc/kirupa/flashbox.fla](http://mlkdesign.online.fr/misc/kirupa/flashbox.fla)  
right click and save as…

edit: wrong address

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 8, 2003, 3:41pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/15 "2003-07-08T15:41:53Z")

</div>

Thank you very much for your help

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 8, 2003, 4:22pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/16 "2003-07-08T16:22:47Z")

</div>

Heres, my typical method.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 4, 2003, 5:44pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/17 "2003-09-04T17:44:56Z")

</div>

hey on that easeresize fla how would you change to code so you could load external swfs in to the box tha is resizing?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 4, 2003, 7:17pm UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/18 "2003-09-04T19:17:43Z")

</div>

You can’t load to the box clip otherwise it will overwrite the box clip, so what you will have to do is use createEmptyMovieClip() to create an empty movie clip to load to.

And you will have to reposition this empty clip when you resize so that the clip is in the upper left corner of the box (since loaded movies attach their upper left corner to the empty clip they load to).

The reposition and loading will have to take place after the resizing, so we can take care of that with an if statement (and a few other slight adjustments to the code).

We will also have to unload the current movie before it resizes so you don’t have the old loaded movie showing while it is resizing.

And lastly we would have to set a new parameter to the function so you can choose what file you want to load.

And in the end we get…

[AS]//set variables  
var endWidth = box.\_width;  
var endHeight = box.\_height;  
var speed = 5;  
//creat empty clip to load to  
this.createEmptyMovieClip(“container”, 1);  
//create prototype function to resize the box  
MovieClip.prototype.resizeTo = function(w, h, file) {  
//unload current movie loaded to container clip  
container.unloadMovie();  
//run the following code onEnterFrame  
this.onEnterFrame = function() {  
//eW and eH variables to hold the final end width and end height  
eW = Math.round(w-this.\_width);  
eH = Math.round(h-this.\_height);  
//resize the clips with easing  
this.\_width += ew/speed;  
this.\_height += eH/speed;  
//if the eW and eH variables equal 0  
if ((ew && eh) == 0) {  
//give notice when finished resizing  
trace(“resized”);  
//set the box to the final size  
this.\_width = w;  
this.\_height = h;  
//stop running the onEnterFrame  
delete this.onEnterFrame;  
//reposition container clip to upper left corner of box  
//do this because the loaded movie attaches it’s upper left corner to the clip  
container.\_x = this.\_x-(this.\_width/2);  
container.\_y = this.\_y-(this.\_height/2);  
//load the file provided in the file parameter of the prorotype  
container.loadMovie(file);  
}  
};  
};  
//use buttons to change the width and height.  
button1.onPress = function() {  
box.resizeTo(200, 100, “file1.swf”);  
};  
button2.onPress = function() {  
box.resizeTo(500, 300, “file2.swf”);  
};  
button3.onPress = function() {  
box.resizeTo(10, 10, “file3.swf”);  
};[/AS]

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 5, 2003, 2:50am UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/19 "2003-09-05T02:50:43Z")

</div>

thanks so much your awsome!! hope some day i can write wicked action script too

rL

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 5, 2003, 2:55am UTC](https://forum.kirupa.com/t/maxi-a-box-with-animation-in-as-flmx/24861/20 "2003-09-05T02:55:41Z")

</div>

Meh, it’s not too difficult, just keep at it and study/practice/experiment often!