# \[FMX\]width and height dimensions in array

**URL:** <https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665>\
**Category:** Uncategorized\
**Created:** [August 17, 2004, 6:55am UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665 "2004-08-17T06:55:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![dboers](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dboers](https://forum.kirupa.com/u/dboers)\
**Post date:** [August 17, 2004, 6:55am UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/1 "2004-08-17T06:55:13Z")

</div>

Hi have a square on the stage that should change in dimensions depending on which button is pressed. This is the code for the buttons:

```auto
function setButton() {
 for (var i in menuMc) {
  if (menuMc*._name.substr(0, 4) == "btn_") {
   clip = menuMc*;
   // rollOver and rollOut stuff goes here
clip.onRelease = function(){
}}}}CODE] 
 
Is it possible and if yes how to place the different dimensions in an aray and then call them in the on release?
 
Thanks in advance
```

---

<div class="post-metadata">

**Author:** ![dboers](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dboers](https://forum.kirupa.com/u/dboers)\
**Post date:** [August 18, 2004, 1:19pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/2 "2004-08-18T13:19:20Z")

</div>

These are the four different width and height dimensions:  
(400 X 400)  
(700 X 450)  
(500 X 300)  
(350 X 500)

---

<div class="post-metadata">

**Author:** ![RvGaTe](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/rvgate/32/126_2.png) [@RvGaTe](https://forum.kirupa.com/u/RvGaTe)\
**Post date:** [August 18, 2004, 2:41pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/3 "2004-08-18T14:41:51Z")

</div>

ok, first of all let me explain how i did it:

you can do 2 kinds off different scaling… using the \_width and \_height, or using the \_xscale and \_yscale, i used the scale coz this is easyer for calculations.

the scale gets set by flash itself standart on 100, (100% of the scale)…

so when you need to resize, you just calculate how much % is the new width compared to the old width, and then use that percent for the scale…  
now get ur flash open and let get started:

create a square (like 100x100, on the 0,0 coordinates)  
then give it the instance name “screen” for example.

then create ur buttons.

this is actually all it needs, now lets get on with the actionscript.

put this on the square

```php

onClipEvent (load) {
	// set up dimensions
	// Dimensions[2] will return [500, 300]
	// Dimensions[2][1] will return 300
	Dimensions = [[400, 400], [700, 450], [500, 300], [350, 500]];
	// determine the speed in wich the sqaure should resize
	// the lower the faster
	speed = 5;
	// store current width and height for later calculations
	width = _width;
	height = _height;
}
onClipEvent (enterFrame) {
	// get new height, using the currentActive var
	// that one is determined by the buttons
	newHeight = Dimensions[currentActive][0];
	newWidth = Dimensions[currentActive][1];
	// check how much percent it must resize
	newXscale = newHeight/height*100;
	newYscale = newWidth/width*100;
	// and then let the _xscale resize to the percent
	// ofcourse with a classy ease :P
	_xscale += (newXscale-_xscale)/speed;
	_yscale += (newYscale-_yscale)/speed;
}

```

and this on the buttons:

```php

on(release){
	_root.screen.currentActive = X
}

```

with X being the number of the button (you can use this.\_name and manipulate it to get the number)

test and let the magic do its work !

---

<div class="post-metadata">

**Author:** ![dboers](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dboers](https://forum.kirupa.com/u/dboers)\
**Post date:** [August 18, 2004, 3:29pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/4 "2004-08-18T15:29:31Z")

</div>

Thanks a lot.That works great 🙂

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [August 18, 2004, 3:36pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/5 "2004-08-18T15:36:21Z")

</div>

If you want to stick to the loop, try this

```auto
MovieClip.prototype.easeTo = function(tarW, tarH) {
	this.onEnterFrame = function() {
		this._width = tarW-(tarW-this._width)/1.2;
		this._height = tarH-(tarH-this._height)/1.2;
		if (Math.abs(this._width-tarW)<1 && Math.abs(this._height-tarH)<1) {
			this._width = tarW;
			this._height = tarH;
			delete this.onEnterFrame;
		}
	};
};
var tarW, tarH;
Dimensions = new Array();
Dimensions = [[400, 400], [700, 450], [500, 300], [350, 500]];
function setButton() {
	for (var i in menuMc) {
		if (menuMc*._name.substr(0, 4) == "btn_") {
			clip = menuMc*;
			clip.i = i;
			// rollOver and rollOut stuff goes here 
			clip.onRelease = function() {
				tarW = Dimensions[this.i][0];
				tarH = Dimensions[this.i][1];
				_root.square.easeTo(tarW, tarH);
			};
		}
	}
}

```

Not tested and I assumed the “i” in your buttons is zerobased:)

scotty(-:

---

<div class="post-metadata">

**Author:** ![dboers](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dboers](https://forum.kirupa.com/u/dboers)\
**Post date:** [August 18, 2004, 3:59pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/6 "2004-08-18T15:59:55Z")

</div>

Thanks scotty 🙂 I tried it but nomatter on which button I press the square goes from its original demensions to width 0 x height 0

Attached is a test zip

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [August 18, 2004, 4:25pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/7 "2004-08-18T16:25:05Z")

</div>

LOL, at least it moves:lol:  
I’ll have a look at your fla.

scotty(-:

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [August 18, 2004, 4:45pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/8 "2004-08-18T16:45:21Z")

</div>

I see, I was thinking “i” referred to a number, but it refers to the button name:)  
This is working (I left out the prototype, that stays the same)

```auto
var tarW, tarH;
Dimensions = new Array();
Dimensions = [[400, 400], [700, 450], [500, 300], [350, 500]];
Names = new Array();
Names = ["home", "about", "service"];
function setButton() {
	for (var i in menuMc) {
		if (menuMc*._name.substr(0, 4) == "btn_") {
			clip = menuMc*;
			for (j=0; j<Names.length; j++) {
				if (menuMc*._name.substr(4) == Names[j]) {
					clip.j = j;
				}
			}
			// rollOver and rollOut stuff goes here 
			clip.onRelease = function() {trace(this.j);
				tarW = Dimensions[this.j][0];
				tarH = Dimensions[this.j][1];
				square.easeTo(tarW, tarH);
			};
		}
	}
}
setButton();

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![dboers](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dboers](https://forum.kirupa.com/u/dboers)\
**Post date:** [August 19, 2004, 6:56am UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/9 "2004-08-19T06:56:19Z")

</div>

This is realy great 🙂 Thanks a lot scotty

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [August 19, 2004, 7:01am UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/10 "2004-08-19T07:01:16Z")

</div>

no problem, dboers;)

---

<div class="post-metadata">

**Author:** ![dboers](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dboers](https://forum.kirupa.com/u/dboers)\
**Post date:** [August 19, 2004, 6:16pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/11 "2004-08-19T18:16:38Z")

</div>

Hi scotty,

I hope you don’t mind that I ask you one more question about this subject? :sigh: I also load external swf’s in the main movie. I do that with the following AS:

```auto
 function pagina(page) {
 showContent(page);
}
function showContent(page) {
 var c = this["content_"+page];
 for (var i in this) {
  if (this*._name.substr(0, 8) == "content_") {
   this*._visible = (this*._name.substr(8) == page);
   loadingPage = page;
  }
 }
} 

```

and I call them in the release from the setButton function with:

```auto
pagina(this._name.substr(4));

```

What I would like to accomplish is that the external swf’s only load when the square is in place (I mean after the movement as made before is done.

How should I do that?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [August 19, 2004, 6:33pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/12 "2004-08-19T18:33:28Z")

</div>

You can do that with an extra variable, eg “klaar”;). Put before the onEnterFrame in the easeTo function

```auto
 klaar =0;

```

and after the if statement

```auto
 klaar =1;

```

I don’t know how you load your swf, but if you use a preloader there, set the holder you load in to invisible and put this after everything is loaded

```auto
//rest of your code
if(klaar){
holder._visible =1;
}
//more code

```

The above is to get the idea, give it a try and if you can’t get it working, post your .fla:)

scotty(-:

---

<div class="post-metadata">

**Author:** ![dboers](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dboers](https://forum.kirupa.com/u/dboers)\
**Post date:** [August 20, 2004, 10:36am UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/13 "2004-08-20T10:36:17Z")

</div>

Thanks a veel 😉 scotty

This is what I have

```auto
[color=red]preloader._visible = false[/color][color=red];
[/color] abc = _root.createEmptyMovieClip("temp", 1000);
   abc.onEnterFrame = function() {
	t = c.getBytesTotal();
	l = c.getBytesLoaded();
	per = Math.round(l/t*100);
	if (t == l && t != 0) {
	 [color=red]if (klaar) {[/color]
	  preloader.percent = "";
	  preloader._visible = true;
	  delete this.onEnterFrame;
	 }
	}

```

Is this what you ment.

On last one! Suppose I want to control to seperate squares on the stage with different dimentions. Do I have to write another proto or can I include it in the excisting one.

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [August 20, 2004, 10:47am UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/14 "2004-08-20T10:47:58Z")

</div>

Almost you have preloader.\_visible =false; at the top, shouldn’t that be holder (the mc you load in)? The same for after the if statement preloader.\_visible = true;?  
For your other question, it’s a prototype so it will work for every MovieClip. Target it as

```auto
yourmc.easeTo[250,250];

```

and “yourmc” will ease to a square with dimensions 250 width/height. Or get the values from an array like RvGate and I showed you.  
Hope this will help:)

scotty(-:

---

<div class="post-metadata">

**Author:** ![dboers](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dboers](https://forum.kirupa.com/u/dboers)\
**Post date:** [August 20, 2004, 10:56am UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/15 "2004-08-20T10:56:03Z")

</div>

I see the stupid mistake of the preloader :hr: Thanks a lot.

About the second question. I not only change the square in width and height, but now also in x and y position. So then it looks to me impossible to get those dimensions from the same Array! Or am I wrong in that?

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [August 20, 2004, 12:04pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/16 "2004-08-20T12:04:06Z")

</div>

LOL, I see my stupid mistake [size=1](at least, I hope)[/size]

Hope I get you right now, you want to change width/height **and** x/y?  
Then you can add the \_x/\_y properties in the prototype and in the array.  
for the proto eg:

```auto
MovieClip.prototype.easeTo = function(tarX, tarY, tarW, tarH) {
	this.onEnterFrame = function() {
		this._y = tarY-(tarY-this._y)/1.2;
		this._height = tarH-(tarH-this._height)/1.2;
		if (Math.abs(this._y-tarY)<1 && Math.abs(this._height-tarH)<1) {
			this._y = tarY;
			this._height = tarH;
			this._x = tarX-(tarX-this._x)/1.2;
			this._width = tarW-(tarW-this._width)/1.2;
			if (Math.abs(this._x-tarX)<1 && Math.abs(this._width-tarW)<1) {
				this._x = tarX;
				this._width = tarW;
				delete this.onEnterFrame;
			}
		}
	};
};

```

and for the array

```auto
Dimensions = [[0,0,400, 400], [50,100,700, 450], ........]

```

and get the values like this

```auto
tarX = Dimensions[this.j][0];
tarY = Dimensions[this.j][1];
tarW = Dimensions[this.j][2];
tarH = Dimensions[this.j][3];
square.easeTo(tarX,tarY,tarW, tarH);

```

Or am I still not getting you?

scotty(-:

---

<div class="post-metadata">

**Author:** ![dboers](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dboers](https://forum.kirupa.com/u/dboers)\
**Post date:** [August 20, 2004, 1:09pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/17 "2004-08-20T13:09:33Z")

</div>

The part with the tarX and tarY I figured out already, but the question is about having two squares on the stage I want to control mainSquare and subSquare. When I use your function part [color=red](tarX, tarY, tarW, tarH) [/color]as example

When btn\_home is pressed only mainSquare should be on the stage with the following dimensions [color=red](125, 125, 600, 400)[/color] [size=1][color=red]Note: registrationpoint top left corner[/color][/size]

[color=black]Here subSquare is of stage [/color][color=red](-600, 125, 0, 0)[/color]  
[color=black][/color]  
[color=black]When btn\_about is pressed both squares should be on stage[/color]

dimensions mainSquare [color=red](351, 150, 399, 350)[/color]  
dimensions subSquare [color=red](100, 150, 249, 350)[/color]

etc etc

so I don’t think it is possibe to get de dimensions for both squares from the same array. I think I need to make a second array with the demesions for subSquare, but I don’t know how to combine two arrays :\*( with the one prototype I have :hr:

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [August 20, 2004, 1:34pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/18 "2004-08-20T13:34:56Z")

</div>

With the few buttons you have and the extra’s, I think it’s more simple if you code it outside the loop and forget about the array

```auto
btn_home.onRelease = function(){
mainSquare.easeTo(125,125,600,400);
subSquare.easeTo(-600,125,0,0);
}
btn_about.onRelease = function(){
mainSquare.easeTo(351,150,399,350);
subSquare.easeTo(100,150,249,350);
}
btn_contact.onRelease = function(){
mainSquare.easeTo(125,125,600,400);//just an example
subSquare.easeTo(-600,125,0,0);
}

```

??

scotty(-:

---

<div class="post-metadata">

**Author:** ![dboers](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dboers](https://forum.kirupa.com/u/dboers)\
**Post date:** [August 20, 2004, 1:58pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/19 "2004-08-20T13:58:15Z")

</div>

Hi scotty,

I normaly would say you are absolutely right, but I attached only an example zip because the zip from the original was to heavy to attach, at least that was the message I got when I tried it. In the original Fla I have 8 buttons and with the loop I control also the over, out and release state (new Color), plus there are not only the two squares I would like to control in the final project, but also the menu it self, 4 lines the logo etc. So when I know how to handle the dimensions for the two squares I think I can fugure out how to handle the other objects. Do you understand?

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [August 20, 2004, 2:44pm UTC](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665/20 "2004-08-20T14:44:34Z")

</div>

LOL, I understand:)  
Try this (you have to adjust the values in the array)

```auto
var tarX, tarY, tarW, tarH;
mainDim = new Array();
mainDim = [{tarX:125, tarY:125, tarW:400, tarH:600}, {tarX:50, tarY:75, tarW:100, tarH:100}];
subDim = new Array();
subDim = [{tarX:-600, tarY:125, tarW:400, tarH:600}, {tarX:50, tarY:75, tarW:100, tarH:100}];
function setButton() {
	for (var i in menuMc) {
		if (menuMc*._name.substr(0, 4) == "btn_") {
			clip = menuMc*;
			clip.i = i;
			// rollOver and rollOut stuff goes here 
			clip.onRelease = function() {
				var mD = mainDim[this.i];
				var sD = subDim[this.i];
				_root.mainSquare.easeTo(mD.tarX, mD.tarY, mD.tarW, mD.tarH);
				_root.subSquare.easeTo(sD.tarX, sD.tarY, sD.tarW, sD.tarH);
			};
		}
	}
}

```

scotty(-:

[Next page](https://forum.kirupa.com/t/fmx-width-and-height-dimensions-in-array/119665.md?page=2)