PDA

View Full Version : Structure of flash site. Dynamic resizing?

jarmanje
06-05-2007, 05:34 PM
Hello, I really want to utilise as much space as i can for the web site, and i've found a site that does it nicely so show what i mean

http://www.chelseafc.com/xxchelsea180706/index.html#/page/Homepage
(chelsea are legends )

Anyway,
on this site when the user makes the window bigger, the images text everything also get larger and i really like this so i can make my site bigger

What dimensions have they made the flash site in?

And how have they made it dynamically resize like this? I have looked for something to read up about it, but it's not clear to me how to achieve such a result


Also,

When building a flash website, so far i have got just one swf file, and i use lots and lots of movieclips. I am looking at this site (above) and it seems, whenever a link is clicked... it is changing the webpage address?! Why is this? should i also be loading more than one SWF file?

My site will be have about 7-10 pages on it with lots of nice content. I am not sure if having one SWF is the correct way i should be doing it? I hope it is..

Thanks a lot again for help.

regards,
Jarmanje
evride
06-06-2007, 03:10 AM
set height and width as 100% instead of the actual movie pixel dimensions
jarmanje
06-06-2007, 05:25 PM
how do i do that??
evride
06-07-2007, 01:09 AM
sorry i meant inside the HTMl document. when you export the swf make sure the HTML page is created with it. Then go into the HTML page and find the swf object tag. Change the properties of height and width to 100% for the two places it shows up at.
evride
06-07-2007, 03:54 AM
im sorry i should have read your question more.

it looks like the use anchor links so its not actually leaving the first page. u are instead linking to different locations of the page but since the page has no anchor links it just stays at the top. then it plays the movie to go to a different frame. so once u click on one button it changes the anchor link and plays the movie at the correct frame.

you can resize flash content dynamically for example if u had a blog and u wanted to show all the posts. u can use swfobject but im not really familiar with it. i use something different. in your movie whatever is the bottom most item (like text box or movieclip) i'll call bottom.


h = bottom._y+bottom._height+15 ;
getURL("javascript:setFlashHeight('flashid',"+h+");");


then you'll need a javascript file. call it resize_flash

/* Methods for resizing the flash stage at runtime.

setFlashWidth(divid, newW)
divid: id of the div containing the flash movie.
newW: new width for flash movie

setFlashWidth(divid, newH)
divid: id of the div containing the flash movie.
newH: new height for flash movie

setFlashSize(divid, newW, newH)
divid: id of the div containing the flash movie.
newW: new width for flash movie
newH: new height for flash movie

canResizeFlash()
returns true if browser supports resizing flash, false if not.
*/
function setFlashWidth(divid, newW){
document.getElementById(divid).style.width = newW+"px";
}
function setFlashHeight(divid, newH){
document.getElementById(divid).style.height = newH+"px";
}
function setFlashSize(divid, newW, newH){
setFlashWidth(divid, newW);
setFlashHeight(divid, newH);
}
function canResizeFlash(){
var ua = navigator.userAgent.toLowerCase();
var opera = ua.indexOf("opera");
if( document.getElementById ){
if(opera == -1) return true;
else if(parseInt(ua.substr(opera+6, 1)) >= 7) return true;
}
return false;
}



then in your HTML document should look like this<html>
<head>
<title>Flash Resize</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="flash_resize.js"></script>
</head>

<body>
<div align="center">
<div id="flashid" style="width:700px; height:300px;">
<script type="text/javascript" language="JavaScript">
e = canResizeFlash();
document.write('<object data="index.swf" width="100%" height="100%" type="application/x-shockwave-flash">');
document.write('<param name="movie" value="index.swf" />');
document.write('<param name="FlashVars" value="allowResize='+e+'" />');
document.write('Flash Movie With Resizing Content');
document.write('</object>');
</script>

<noscript>Javascript must be enabled to view Flash movie</noscript>
</div>
</div>
</body>
</html>


the javascript code and html document code is not mine. i learned how to do this on Mustard Lab (http://www.mustardlab.com/developer/flash/objectresize/)
jarmanje
06-07-2007, 07:45 AM
thanks a lot. really helpful
i'm going to play with this, see if i can get it working

thanks again for the help