[FMX]width and height dimensions in array

[dboers]

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:[CODE]function setButton() {
for (var i in menuMc) {
if (menuMc[i]._name.substr(0, 4) == "btn_") {
clip = menuMc[i];
// 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

[dboers]

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

[RvGaTe]

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


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:



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 !

[dboers]

Thanks a lot.That works great :)

[scotty]

If you want to stick to the loop, try this

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[i]._name.substr(0, 4) == "btn_") {
clip = menuMc[i];
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(-:

[dboers]

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

[scotty]

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

scotty(-:

[scotty]

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)

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[i]._name.substr(0, 4) == "btn_") {
clip = menuMc[i];
for (j=0; j<Names.length; j++) {
if (menuMc[i]._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(-:

[dboers]

This is realy great :) Thanks a lot scotty

[scotty]

no problem, dboers;)

[dboers]

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:

function pagina(page) {
showContent(page);
}
function showContent(page) {
var c = this["content_"+page];
for (var i in this) {
if (this[i]._name.substr(0, 8) == "content_") {
this[i]._visible = (this[i]._name.substr(8) == page);
loadingPage = page;
}
}
}
and I call them in the release from the setButton function with:
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

[scotty]

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

klaar =0;
and after the if statement

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

//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(-:

[dboers]

Thanks a veel ;) scotty

This is what I have
preloader._visible = false;
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) {
if (klaar) {
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.

[scotty]

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

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(-:

[dboers]

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?

[scotty]

LOL, I see my stupid mistake (at least, I hope)

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:

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

Dimensions = [[0,0,400, 400], [50,100,700, 450], ........]
and get the values like this

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(-:

[dboers]

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 (tarX, tarY, tarW, tarH) as example

When btn_home is pressed only mainSquare should be on the stage with the following dimensions (125, 125, 600, 400) Note: registrationpoint top left corner

Here subSquare is of stage (-600, 125, 0, 0)

When btn_about is pressed both squares should be on stage

dimensions mainSquare (351, 150, 399, 350)
dimensions subSquare (100, 150, 249, 350)

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:

[scotty]

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

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(-:

[dboers]

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?

[scotty]

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

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[i]._name.substr(0, 4) == "btn_") {
clip = menuMc[i];
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(-:

[dboers]

Thanks scot(ty) :thumb: I was realy stucked :jail: and this is something I can work with :sure:

[scotty]

glad I could help=)