Fluid Layout - stop changing resize position when movieclip is at certain position

[jebadiah]

Hello. I have been trying things out for hours, and I still can't get it. So please help. :)

I am following this Fluid Layout tutorial: http://active.tutsplus.com/tutorials/web-design/build-a-fluid-website-layout/

I added a Menu_mc on my stage. Initially, this should be at the center of the stage and when I click on it, it will tween on the upper left corner of the browser. However, when I resize the browser, the Menu_mc goes back to the center of the screen.

I have tried separating a different actionscript file where it is specifically for initialization of the object and another one for resizing. And then when I call it on my main AS file it goes like this:


// Add the symbols to stage
var Menu_mc = new Menu_MC();
addChild(Menu_mc);

// Apply the alignment to the middle
var Menu_InitParam = {
x:0.53,
y:0.35,
offsetX: -Menu_mc.width/2,
offsetY: -Menu_mc.height/2
}
new InitFluidObject(Menu_mc,Menu_InitParam);

var Menu_ResizeParam = {
x:Menu_mc.x,
y:Menu_mc.y,
offsetX: -Menu_mc.width/2,
offsetY: -Menu_mc.height/2
}
new FluidObject(Menu_mc,Menu_ResizeParam);But it seems futile. Could anyone please help? Thanks a lot! :)

[Scythe]

Are you setting stage.align to StageAlign.TOP_LEFT and stage.scaleMode to StageScaleMode.NONE? Also in the HTML tab of the Publish Settings, you should probably set the dimensions to 100%.

Beyond that, I'd have to read the whole tutorial to know what those constructors are doing. Maybe it's setting some resize event listener that you don't want it to.

[jebadiah]

Yes, I have those settings. Thank you. :)

I tried an if statement too, something like this:

if(Menu_mc.x == 0 || Menu_mc.y == 0)
//do not change position on resize

But it still doesn't work.

It is possible that the problem is getting the x and y position of my Menu_mc. Do you think there is another way to maybe it like getBounds?

Any help would be greatly appreciated.

[Scythe]

Ah, wait. I'm pretty sure I know what the problem is.


var Menu_ResizeParam = {
x:Menu_mc.x,
y:Menu_mc.y,
offsetX: -Menu_mc.width/2,
offsetY: -Menu_mc.height/2
}

I believe your desired result is to have the x and y properties of Menu_ResizeParam set to retrieve whatever Menu_mc.x and y happen to be at the time of access. However, objects don't work that way, at least not with primitive data types like numbers. At the time the above code is executed, the x and y properties have numbers assigned to them, and there's no further connection to Menu_mc beyond that. So when you change the coordinates of Menu_mc, Menu_ResizeParam still has the old coordinates.

I'm sure you're better suited to come up with a solution than I am since you know your own project. But maybe it would be a good idea to update your Param objects when you change Menu_mc's coordinates.

[jebadiah]

But the syntax Menu_mc.x will give me the x coordinate of my movieclip. Is that right?

on my onClickHandler function, I placed a
Menu_mc.x = Menu_mc.y = 0; so that when I resize after clicking the Menu_mc movieclip, this is the value that the Param will retrieve.

[Scythe]

The only values that the Param will retrieve are the values you assigned to the Param. You only assigned values to it once, and those values are the original coordinates of Menu_mc. You'll have to assign values to the Param again every time you move Menu_mc in order for the Param to know where it is.

Something like this might work:
Menu_ResizeParam.x = Menu_ResizeParam.y = Menu_mc.x = Menu_mc.y = 0;

[jebadiah]

Hello. Thank you very much for that. I was able to do it by adding that line and then adding an if statement on the FluidObject AS file. Thank you! :)