Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dynamic container/stage sizing? 1

Status
Not open for further replies.

Leozack

MIS
Oct 25, 2002
867
GB
Hi all - been workin away on makin my tool dynamicly sized. So it can read in an x/y size along with other stuff and set everything up. Currently I've got the container clips positioning and sizing correctly (had issues when referencing clips within clips (the parent of the child would be effected for some reason so moved all clips to root).

But is there a way to set the stage size? Else if the dynamically read size is bigger than the preplaced default it goes off the edge of the stage and disappears. I'm thinking there isn't a way to do this :/

Also, I noticed the image I imported via loadMovie was also enlarged. I knew there was effects like that from using scale etc, but I'm just using a preplaced library item, setting it's x/y and width/height, before I load anything into it. Surely I can do that before loading something and not have the something resized to the same ratio as the container now is to it's original proportions? x.x

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
Last question then :p how would you set your flash to fill the browser? I mean you could make a 600*400 window and put a 600*400 flash in, but if they go fullscreen won't the flash sit in the middle with borders?

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
Ah I pt 100% in the SWFObject code. Thanks for all this. Have a star :p

If you can enlighen me what the code on my other post is doing and how/why I'd udnerstand more and probably not have to pester anyone again ;D


_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
I guess the only issue with setting stage to show at 100% is the initial stagesize that is being stretched to 100%/100% is set in the flashfile, and I guess if in actionscript I told stuff to be big and fill twice the space, and it was called with 100% size which had the space, it still wouldn't show up more than the initial flash stage was set to in the flash document?

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
I didn't get your last question, but I think what you after is dynamic Stage generation, a.k.a. "liquid layout".

I made a quick demo movie. Just resize the browser window in any way you like, and see how Stage is dynamically drawn - with no distortion:
<(This is done in AS3 - Flash 9 player, but the concept is the same in AS1/2.)

Kenneth Kawamoto
 
That looks exactly like what I need. Dynamic stage that loads customised and dynamically sized contents without distorting things like pictures of any size loaded in. Do you have the fla for that I could look at? Though I can't open new ones in mx6 :/

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
I have no time now so I just paste my AS3 code here. I have that blue MovieClip in the Library exported as "MC".
Code:
// AS3
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, stageResize);
function stageResize(evt:Event):void {
	drawStage();
}

var tfmt:TextFormat = new TextFormat("Arial", 10, 0x003366, true);
tfmt.align = "left";

function drawStage():void {
	if (this.numChildren) {
		this.removeChildAt(0);
	}

	var sp:Sprite = new Sprite();
	this.addChildAt(sp, 0);

	var tf:TextField = new TextField();
	with (tf) {
		autoSize = TextFieldAutoSize.LEFT;
	}
	sp.addChild(tf);
	var stageW:uint = this.stage.stageWidth;
	var stageH:uint = this.stage.stageHeight;
	tf.text = "Stage size: " + stageW + "px x " + stageH + "px";
	tf.setTextFormat(tfmt);

	var nCol:uint = Math.floor(stageW/(120 + 20));
	var nRow:uint = Math.floor((stageH - 20)/(90 + 20));
	var nCnt:uint = nRow*nCol;
	var hGap:uint = Math.floor((stageW - 120*nCol)/(nCol + 1));
	var vGap:uint = Math.floor(((stageH - 20) - 90*nRow)/nRow);
	for (var i :uint = 0; i < nCnt; i++) {
		var mc:MovieClip = new MC();
		mc.x = hGap + (hGap + 120)*(i%nCol);
		mc.y = 20 + (vGap + 90)*Math.floor((i/nCol));
		sp.addChild(mc);
	}
}

drawStage();
Have a look at Stage in the AS1/2 doc. The key for this technique is at the top of my code: scaleMode and align.

Kenneth Kawamoto
 
Thanks mate it looks perfect. 1am I'm rubbin me eyes n callin it a night. I'll get back to you if there's more but I think what I was really after was the scaleMode and 100% things to acheive what I want :)

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
1 more thought on the setup I have in my head. If I let the user set the stagesize in html and let the stage fill it dynamically without stretching, that's great. But what if you want to 'fix' that size that the user has set and then, say, fullscreen and proportionately stretch things to fit? Currently things lik eloaded images would stay their original size due to the (very good) dynamic stage sizing etc. But could I turn on the stage scaling once all loading was done so that it would then stretch things to fit the size it was changed too? The reason for all the dynamic sizing afterall is to let users set their own size depending on how big the loaded images will be. Once flash has filled that html-defined size dynamically how can I 'fix' it basically? Or am I just asking too much ;)

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
You're a star Ken. I'll work on this and lyk if anything plays up. Amazing how simple most things are when you work your way through exactly what it is you're after ;)

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
Ok, I've done a bunch of work but banged my head on the wall enough and I'm gonna give you a fla/swf to look at :p

Feel free to edit the xml where it says 800 & 600 for the size. If you make this 640 and 480, it apepars to work fine. But if you make it 800 * 600, as it is currently, you'll see resizing the window isn't working right, and even without resizing it, the content isn't all fitting for some reason?

The idea is those xml specified sizes are how big the user wants the image holder to be (and how big the iamges loaded should be, though they're resized/centered upon loading). Yet if the holder for the flash is made bigger/smaller than that then the stage should scale up/down.

You'll note that the stagesize I unattractively print to the screen in a textbox doesn't change dynamically unless I don't make the stage resize/stretch. But if I don't do that it doesn't work synamically with any resizes. I know you made one that redraws with maths etc the stage everytime it's resized but I'm not sure that'll work with the stretching concept I mentioned?

Still, take a look and tell me what you think x_x excuse the dodgy paint images ;D

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
 http://82.110.105.93/melted.com/gallery.zip
lmk what you think :)

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
Ok well what I want to happen is :

- Flash stage is set to 100%, so it fills whatever window or div container it's called within?
- Flash reads in width/height from xml and sets the stage to be that size
- Flash arranges the other non image parts (title and description boxes) according to this new size
- Flash loads in images it's given online and if they're bigger than that width/height it resizes them and if they're smaller it centers them
- Flash then lets itself become resizeable so that it stretches to fill the window if the window gets bigger/smaller, without loosing the ratio of what it's loaded in and sized up.

Currently even if that was all "working", what happens in a window is it chops off the right or bottom edge when you're resizing depending on the ratio :(

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
You Flash has elements manually placed on Stage. I'm not sure if that is the right approach. Try create everything using only ActionScript (nothing on Stage), and start with a simple one - say one TextField - to make sure your concept works.

Kenneth Kawamoto
 
I've just gone back to coding this, and tried again with a new test file. This one has nothing on the stage, jus uses library items. It has a galwidth and galheight which would normally be read in from the xml file. This is the size the author wants the window/cell/div containing the flash to be originally. The master scale.

I place the library items and arrange them with the appropriate sizes etc. Having the stage set to noscale and align to topleft works fine for this.
(currently the initial play size is 320*240 simply due to that being the flash document size)

Then, after everything is arranged, I want to 'turn on' the stage scaling - so that if the end user wants to make it fulscreen for example, the stage will fill it, and the content will stretch proportionally to fill it etc.

So what you get is a buildup using maths of the original canvas size as it were, then you give the user the ability to stretch this canvas to their wanted size if they wish.

But if I set stage scale mode to stretch again (or make a frame 2 and do it there, no difference) then it all goes a bit pear shaped really. Take a look and slap me about with the probably obvious solution ^_^

_________________________________
Leozack
Code:
MakeUniverse($infinity,1,42);
 
 http://82.110.105.93/melted.com/liquid%20then%20scale.zip
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top