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!

Register Log in
  • 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

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);
 
Sort by date Sort by votes
What you have there is a flash saying stage scale is noscale. If I make an html page and tell it to display that flash at 100% * 100% it still won't scale. But if I set the flash back to stage scale as showall or whatever, then it messes up :(

_________________________________
Leozack
Code: 
MakeUniverse($infinity,1,42);
 
Upvote 0 Downvote
When you say stagesize, do you mean in the embedding call or the document size in flash? Cos yu suggested to make the document size in flash tiny and just use script to place everything and see how that works. And I can't set something in flash that I don't know yet (what the designer wants to set the size to).

Remember my (probably asking too much-)idea was the designer gets the swf, puts a x and y size into an xml file, and that sets how big the flash should be, and he sets that same x and y size in the table cell or div container where the flash is put, probably set to be 100% of it. This should then mean the end user can maximise it or whatever they want and it'll stretch.

So far I've no managed to get such a chain of control possible :(

_________________________________
Leozack
Code: 
MakeUniverse($infinity,1,42);
 
Upvote 0 Downvote
I meant document size in FLA.

I thought you are after "liquid layout", which you can use any document size because you will place elements outside the document if the window size is bigger than the document size.

But sounds like you want to stretch the movie. If that's the case then you do not need anything special, as Flash is designed to stretch.

Kenneth Kawamoto
 
Upvote 0 Downvote
From what I can see your html is the same as the one I used. So it is all down to what you did in flash. Took out the scale setting to noscale and set the document size to be the end result size of the stage?
Ok cool, your ones resizes perfectly.
But the problem is, what if the designer has pictures bigger than 400*300 to use. He has 800*600, say. So he puts 800*600 into the xml file, and sets the div container to 800*600. But he can't rebuild the fla with the document size set to 800*600. This is the problem I have - I need the fla to be able to read in a size (in that example it was just set as galHaight and galWidth fixed to 400*300 with margins of 10) or whatever - but in reality he may want a bigger image area, may want to turn off the description box, and may wnt different size margins or no margins.
I need the fla to read this, build the stage accordingly, and THEN become resizeable/stretchy. Do you see what I mean? And why it's a problem? :( That "document size" seems to be causing issues as I can't set it from flash after it's read in the info as it has to be set before compiling to swf :(

_________________________________
Leozack
Code: 
MakeUniverse($infinity,1,42);
 
Upvote 0 Downvote
I see - in that case you need to use [tt]noScale[/tt] for [tt]scaleMode[/tt], then use a listener to monitor [tt]Stage.onResize[/tt] event because you need to reposition/resize your elements according to the Stage size every time the window size is changed.

Kenneth Kawamoto
 
Upvote 0 Downvote
That's what I thought, except in my flash mx 6 the code you used in your copy/paste way above completely didn't work, the listener stuff :( Which is why I didn't try it! Is it possible in mx 6 without as3?

_________________________________
Leozack
Code: 
MakeUniverse($infinity,1,42);
 
Upvote 0 Downvote
That'd be great. I did try to work from you original code in as3 but I couldn't get it to work and the the help system on ym flash is a bit messed up so in the end I thought perhaps it wasn't in as2. That's why I ended up trying the previous ways. Hopefully this will lead me to success :)

_________________________________
Leozack
Code: 
MakeUniverse($infinity,1,42);
 
Upvote 0 Downvote
Below should compile to Flash 6 (AS1). You can change "user defined variables" to anyway you like. It should scale proportionally if you change the window size.
Code: 
// Stage mode
Stage.scaleMode = "noScale";
Stage.align = "TL";

// User defined variables
var imgWidth = 400;
var imgHeight = 300;
var titleHeight = 32;
var infoHeight = 80;
var margin = 10;

// Initial height & width, portrait or landscape
var initW = imgWidth+margin*2;
var initH = imgHeight+titleHeight+infoHeight+margin*4;
var portrait;
initW>initH ? portrait=false : portrait=true;

// draw Stage function
function drawStage() {
	var factor;
	if (portrait) {
		if (Stage.width/Stage.height<initW/initH) {
			factor = Stage.width/initW;
		} else {
			factor = Stage.height/initH;
		}
	} else {
		if (Stage.width/Stage.height>initW/initH) {
			factor = Stage.height/initH;
		} else {
			factor = Stage.width/initW;
		}
	}

	var mc = this.attachMovie("titlebar_mc", "titlebar_mc", 1);
	with (mc) {
		_x = margin*factor;
		_y = margin*factor;
		_width = imgWidth*factor;
		_height = titleHeight*factor;
	}

	var mc = this.attachMovie("image_mc", "image_mc", 2, initObj);
	with (mc) {
		_x = margin*factor;
		_y = (titleHeight+margin*2)*factor;
		_width = imgWidth*factor;
		_height = imgHeight*factor;
	}

	var mc = this.attachMovie("infobox_mc", "infobox_mc", 3, initObj);
	with (mc) {
		_x = margin*factor;
		_y = (titleHeight+imgHeight+margin*3)*factor;
		_width = imgWidth*factor;
		_height = infoHeight*factor;
	}
}

// Stage resize monitor
var lo = new Object();
lo.onResize = function() {
	drawStage();
};
Stage.addListener(lo);

// Initially draw Stage
drawStage();

Kenneth Kawamoto
 
Upvote 0 Downvote
Oops - remove [tt]initObj[/tt] from these (I was doing AS2 thing):

[tt]var mc = this.attachMovie("image_mc", "image_mc", 2);

var mc = this.attachMovie("infobox_mc", "infobox_mc", 3);
[/tt]

Kenneth Kawamoto
 
Upvote 0 Downvote
As soon as you post the code you notice it can be shorter :)
Code: 
// Stage mode
Stage.scaleMode = "noScale";
Stage.align = "TL";

// User defined variables
var imgWidth = 400;
var imgHeight = 600;
var titleHeight = 32;
var infoHeight = 80;
var margin = 10;

// Initial height & width
var initW = imgWidth+margin*2;
var initH = imgHeight+titleHeight+infoHeight+margin*4;

// draw Stage function
function drawStage() {
	var factor;
	if (Stage.width/Stage.height<initW/initH) {
		factor = Stage.width/initW;
	} else {
		factor = Stage.height/initH;
	}

	var mc = this.attachMovie("titlebar_mc", "titlebar_mc", 1);
	with (mc) {
		_x = margin*factor;
		_y = margin*factor;
		_width = imgWidth*factor;
		_height = titleHeight*factor;
	}

	var mc = this.attachMovie("image_mc", "image_mc", 2);
	with (mc) {
		_x = margin*factor;
		_y = (titleHeight+margin*2)*factor;
		_width = imgWidth*factor;
		_height = imgHeight*factor;
	}

	var mc = this.attachMovie("infobox_mc", "infobox_mc", 3);
	with (mc) {
		_x = margin*factor;
		_y = (titleHeight+imgHeight+margin*3)*factor;
		_width = imgWidth*factor;
		_height = infoHeight*factor;
	}
}

// Stage resize monitor
var lo = new Object();
lo.onResize = function() {
	drawStage();
};
Stage.addListener(lo);

// Initially draw Stage
drawStage();

Kenneth Kawamoto
 
Upvote 0 Downvote
Your code works great, well done, tahnks :)
I'm busy trying to adapt it into my main program currently. But i noticed something.
Everytime you call daarStage() (everytime someone moves the window size) you're saying
var mc = this.attachMovie("infobox_mc", "infobox_mc", 3);
Isn't this going to result in lots and lots of copies of the movieclip being imported? Eventually lagging out?
CurrentlyI "load" lots of stuff from the xml file at the beginning, and currently still hve the library items preplaced and just move them about during drawStage rather than attach them.
Do they all somehow get wiped on that recall of drawStage? It might explain why things aren't working right for me at all yet :( /headache

_________________________________
Leozack
Code: 
MakeUniverse($infinity,1,42);
 
Upvote 0 Downvote
> Isn't this going to result in lots and lots of copies of the movieclip being imported?

Not really. Every time a MovieClip is attached to a depth, existing object at that depth will be overwritten.

Kenneth Kawamoto
 
Upvote 0 Downvote
Hmm I see. Wouldn't it be easier to attach them at the beginning and then just move them? Especialyl when you're loading stuff into them all the time unlike this example that just uses prefab objects in the library?

While I mention that, I'm currently struggling with the confusion I find in the AS2 functions and methods for movieclips and I can't find any authoritive help. To make an MC instance there is create empty (for an empty one), attach (for library copies) and duplicate (for stage copies).
However - attach and duplicate seem to be functions, eg
duplicateMovieClip(original,target,layer)
yet you can also do
var target = duplicateMovieClip(original,target,layer)
etc. But for empty it seems to require a prefixed . to syntax highlight as if it is a method not a function, eg
_root.createEmptyMovieClip(target,layer)
And what's more confusing is the object hierarchy. Would _root be the parent of that last statement? Would 'original' be the parent of the previous ones? Would they follow it around and stretch with it etc?
It's all rather confusing even when I thought I understood it :(
eg right now I'm thinking I should make a titlebar mc, infobox mc, and 3 image mc's. 1 for the default background, 2 for colouring in or gradient filling as a background, and 3 for the actual image to go in.
I tried applying the following gradient function I wrote to the original image mc and it stretched too fast. I then realised my coords were absolute not relative so I fixed that but then it stil expands too fast in height and width and even weird it skews off at a strange angle. I tried applying it to an empty movieclip but I couldn't even get it to show up then. Hence I'm really stuck with all this stuff ~.~
here's the gradient function
Code: 
function GradientBox(clip, colour1, colour2){
	var b = (clip) ? clip.getBounds(this) : this.getBounds(this);
	b.Width = b.xMax - b.xMin;
	b.Height = b.yMax - b.yMin;
	fillType = "linear";
	colours = [colour1, colour2];
	alphas = [100, 100];
	ratios = [0, 255];
	matrix = {matrixType:"box", x:b.xMin, y:b.yMin, w:b.Width, h:b.Height, r:90/180*Math.PI};
	clip.lineStyle(0, 0x000000, 0);
	clip.moveTo(0, 0);
	clip.beginGradientFill(fillType, colours, alphas, ratios, matrix);
	clip.lineTo(clip._width, 0);
	clip.lineTo(clip._width, clip._height);
	clip.lineTo(0, clip._height);
	clip.lineTo(0, 0);
	clip.endFill();
	//trace(clip._x +" "+ clip._y +" "+ clip._width +" "+ clip._height);
	//trace(b.xMin + " " + b.xMax + " " + b.yMin + " " + b.yMax + " " + b.Width + " " + b.Height);
	//trace(fillType + " " + colours + " " + alphas + " " + ratios + " " + matrix);
}
and I call it from within your example eg
Code: 
var mc = this.attachMovie("image_mc", "image_mc", 2);
    with (mc) {
        _x = margin*factor;
        _y = (titleHeight+margin*2)*factor;
        _width = imgWidth*factor;
        _height = imgHeight*factor;
    }
GradientBox(mc,0xFF0000,0x0000FF);
But that is going wrong, check it out!!
I tried to make an empty movieclip but it doens't even show up then!
Code: 
var mc2 = _root.createEmptyMovieClip("mc2",5);
    with (mc2) {
        _x = margin*factor;
        _y = (titleHeight+margin*2)*factor;
        _width = imgWidth*factor;
        _height = imgHeight*factor;
    }
GradientBox(mc2,0xFF0000,0x0000FF);
I'm really loosing my ability to concentrate on this stuff due to the random results I get and the confusion in flash/AS and thei MC functions/methods/layers/hierarchy etc :(

_________________________________
Leozack
Code: 
MakeUniverse($infinity,1,42);
 
Upvote 0 Downvote
As if I don't sound demanding enough, I took a break from that stuff to wait for help and while doing so though I'd take another thing - because it's aligned to topleft, if you maximised and it was thinner than the window, it would be top left not top middle. This didn't look very nice so I thought I'd make a _global.TL which would be the 'registration point' of the 'stage area'. My X coords for the onstage boxes would start from that point, rather than 0 in the top left. I figured this TL should be stage.width/2 - galleryWidth/2. The question then was how to have a galleryWidth, when to update it, and how to factor all this into the "factor" calculations in the drawStage function.

Now - I've just spent an hour or 2 fighting with this, trying al sorts of combinations, lots of debug messages, lots of wild and weird effects, but still nothing is working right >< My head hates me. It seems everythingI work on to avoid working on something problematic and headachish is proving to be the same ><

So ... any help with that greatly appreciated also. I sware, if this is sorted, it'll be a really useful framework for an essential buildingblock of dynamically scaling & horizontally centered objects!

_________________________________
Leozack
Code: 
MakeUniverse($infinity,1,42);
 
Upvote 0 Downvote
Code: 
// Stage mode
Stage.scaleMode = "noScale";
Stage.align = "TL";

// User defined variables
var imgWidth = 400;
var imgHeight = 300;
var titleHeight = 32;
var infoHeight = 80;
var margin = 10;

// Variables
var containerMC;
var ratio;

// Draw Stage function
function drawStage() {
	containerMC = this.createEmptyMovieClip("containerMC_mc", 1);

	var mc = containerMC.createEmptyMovieClip("bg_mc", 1);
	var w = imgWidth+margin*2;
	var h = titleHeight+imgHeight+infoHeight+margin*4;
	ratio = w/h;
	with (mc) {
		beginFill(0,0);
		lineTo(w,0);
		lineTo(w,h);
		lineTo(0,h);
	}

	var mc = containerMC.attachMovie("titlebar_mc", "titlebar_mc", 2);
	with (mc) {
		_x = margin;
		_y = margin;
		_width = imgWidth;
		_height = titleHeight;
	}

	var mc = containerMC.attachMovie("image_mc", "image_mc", 3);
	with (mc) {
		_x = margin;
		_y = titleHeight+margin*2;
		_width = imgWidth;
		_height = imgHeight;
	}

	var mc = containerMC.attachMovie("infobox_mc", "infobox_mc", 4);
	with (mc) {
		_x = margin;
		_y = titleHeight+imgHeight+margin*3;
		_width = imgWidth;
		_height = infoHeight;
	}
}

// Resize stage function
function resizeStage() {
	var stageW = Stage.width;
	var stageH = Stage.height;
	if (stageW/stageH>ratio) {
		containerMC._height = stageH;
		containerMC._width = containerMC._height*ratio;
	} else {
		containerMC._width = stageW;
		containerMC._height = containerMC._width/ratio;
	}
	containerMC._x = Math.floor((stageW-containerMC._width)/2);
}

// Stage resize monitor
var lo = new Object();
lo.onResize = function() {
	resizeStage();
};
Stage.addListener(lo);

// Initially draw Stage, then resize
drawStage();
resizeStage();

Kenneth Kawamoto
 
Upvote 0 Downvote
Mate - you are the sort who build ladders that others climb and shout from. Thanks a lot. This is the sort of foundational modular work I love to create, but I still don't seem to get consitant results from creating and working with movieclip objects, and until I do it's pretty much impossible. It's a privalege to see code working.

I've modified what you wrote sinec 1 - the fillboxes weren't complete (guess you were just tired or something) and 2 - I needed gradient fills and 3 - you had the bg fill the whole thing, I was just trying to fill the image bg. But I've made both possible in my usual overly flexible yet never finishing the project fashion :p

Also I not your use of drawing and then resizing literally - no recalculating - probably a much better way to doit - faster and more efficient and easier. Since nothing needs moving on-stage during a resize :) Here's my updated code for this example (now I just have to slave it into my rather messy not-working-right project ...

I left the fillcode in but commented out despite using gradients you could use instead with the same colour at each end.

ALSO! Please note the ibg clip - the background for the image area. I had to subtract 2 from the width and height I call the gradientbox filler with, because if I don't it sticks out the side of the black box in the image area. Is that just cos of a dodgy black box or ...? Such anomilies seem to haunt me/flash.
Code: 
// Stage mode
Stage.scaleMode = "noScale";
Stage.align = "TL";

// User defined variables
var imgWidth = 640;
var imgHeight = 480;
var titleHeight = 32;
var infoHeight = 80;
var margin = 10;

// Variables
var containerMC;
var ratio;

// Draw Stage function
function drawStage() {
    containerMC = this.createEmptyMovieClip("containerMC_mc", 1);

    var mc = containerMC.createEmptyMovieClip("bg_mc", 1);
    var w = imgWidth+margin*2;
    var h = titleHeight+imgHeight+infoHeight+margin*4;
    ratio = w/h;
	/*
    with (mc) {
		moveTo(0,0);
        beginFill(0xFF0000,99);
        lineTo(w,0);
        lineTo(w,h);
        lineTo(0,h);
		endFill();
    }*/
	GradientBox(mc,0xFF0000,0x0000FF,0,0,w,h);
	
    var mc = containerMC.createEmptyMovieClip("ibg_mc", 2);
    mc._x = margin;
    mc._y = titleHeight+margin*2;
    var w = imgWidth;
    var h = imgHeight;
	/*
    with (mc) {
		moveTo(0,0);
        beginFill(0x0000FF,99);
        lineTo(w,0);
        lineTo(w,h);
        lineTo(0,h);
		endFill();
    }*/
	GradientBox(mc,0x0000FF,0xFF0000,0,0,w-2,h-2);

    var mc = containerMC.attachMovie("titlebar_mc", "titlebar_mc", 3);
    with (mc) {
        _x = margin;
        _y = margin;
        _width = imgWidth;
        _height = titleHeight;
    }

    var mc = containerMC.attachMovie("image_mc", "image_mc", 4);
    with (mc) {
        _x = margin;
        _y = titleHeight+margin*2;
        _width = imgWidth;
        _height = imgHeight;
    }

    var mc = containerMC.attachMovie("infobox_mc", "infobox_mc", 5);
    with (mc) {
        _x = margin;
        _y = titleHeight+imgHeight+margin*3;
        _width = imgWidth;
        _height = infoHeight;
    }
}

// Resize stage function
function resizeStage() {
    var stageW = Stage.width;
    var stageH = Stage.height;
    if (stageW/stageH>ratio) {
        containerMC._height = stageH;
        containerMC._width = containerMC._height*ratio;
    } else {
        containerMC._width = stageW;
        containerMC._height = containerMC._width/ratio;
    }
    containerMC._x = Math.floor((stageW-containerMC._width)/2);
}

// Stage resize monitor
var lo = new Object();
lo.onResize = function() {
    resizeStage();
};
Stage.addListener(lo);

// Initially draw Stage, then resize
drawStage();
resizeStage();

function GradientBox(clip, colour1, colour2, x, y, w, h){
	var b = (clip) ? clip.getBounds(this) : this.getBounds(this);
	b.Width = b.xMax - b.xMin;
	b.Height = b.yMax - b.yMin;
	fillType = "linear";
	colours = [colour1, colour2];
	alphas = [100, 100];
	ratios = [0, 255];
	matrix = {matrixType:"box", x:x, y:y, w:w, h:h, r:90/180*Math.PI};
	clip.lineStyle(0, 0x000000, 0);
	clip.moveTo(x, y);
	clip.beginGradientFill(fillType, colours, alphas, ratios, matrix);
	clip.lineTo(w, y);
	clip.lineTo(w, h);
	clip.lineTo(x, h);
	clip.lineTo(x, y);
	clip.endFill();
}

_________________________________
Leozack
Code: 
MakeUniverse($infinity,1,42);
 
Upvote 0 Downvote
I've givenup trying to get that working example code into my project so I'm slowly building the project back up from that example.

So far the onyl problem I've found is my GradientBox function! If I hass it variables for bgColour and bgColour2 straight from the xml file, eg

bgColour = rootNode.attributes.bgcolour;
bgColour2 = rootNode.attributes.bgcolour2;
GradientBox(mc,bgColour,bgColour2,0,0,totalWidth,totalHeight);

then it fails! Yet if I manually set bgColour it works ok, eg

bgColour = 0xFF0000;
bgColour2 = 0x0000FF;
GradientBox(mc,bgColour,bgColour2,0,0,tourWidth,tourHeight);

... what's the problem? The values from the xml file trace fine to the screen so I know they're working eg

trace(bgcolour+" + "+bgcolour2);
gives
0xFF0000 + 0x0000FF

I can't find anywy to typecast the variable as hex eg Hex(bgColour) or anything - I'm lost! x_x This seems really buggy.

_________________________________
Leozack
Code: 
MakeUniverse($infinity,1,42);
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Ratso5
  • Locked
  • Question
Use a movie clip on the stage
Replies
0
Views
94
Ratso5
Ratso5
guytoon
  • Locked
  • Question
Can't see mc on stage
Replies
0
Views
105
guytoon
guytoon
ralphonzo
  • Locked
  • Question
Rendering Flash content outside the active stage
Replies
1
Views
97
ralphonzo
ralphonzo
tom1537
  • Locked
  • Question
change the dynamic text
Replies
1
Views
107
audiopro
audiopro
sle2002
  • Locked
  • Question
capturing and submitting time from a dynamic text field
Replies
5
Views
181
audiopro
audiopro

Part and Inventory Search

Sponsor

Back
Top