Ultrashock Forums > Flash > Flash Professional
Full-Screen Centred Flash

You are currently viewing our website as a guest which gives you limited access to forums, files and other resources.

Click here to join now for free, and start interacting with our members, download files and much more!

Click here if you are looking for our Flash files and other professional assets.
 
Post Reply | View first unread | Rating: Thread Rating: 18 votes, 5.00 average. Search this Thread | Thread Tools | Display Modes
<|1|2|3|4|>|>> Page 2 of 12
igor igor is offline igor lives in Netherlands 2005-10-03 #41 Old  
I used it like this:
(with and without px in the Heights)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html><head>

<title>test</title>

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords"    content="" />
<meta name="author"      content="" />
<meta name="copyright"   content="" />

<style type="text/css">
html, body {
	margin:0px;
	padding:0px;
	overflow:hidden;
	height:700;
}
object {
	width:100%;
	height:700;
}
</style>

</head><body>
<object type="application/x-shockwave-flash" data="Untitled-1.swf" width="100%" height="700">
  <param name="movie" value="Untitled-1.swf" />
</object>
</body></html>
But no scrolling appears...

I understand what you mean about the flashscroller
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-03 #42 Old  
Try this version...

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html><head>

<title>test</title>

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords"    content="" />
<meta name="author"      content="" />
<meta name="copyright"   content="" />

<style type="text/css">
html, body {
	margin:0px;
	padding:0px;
}
object {
	width:100%;
	height:1000px;
}
</style>

</head><body>
<object type="application/x-shockwave-flash" data="Untitled-1.swf">
  <param name="movie" value="Untitled-1.swf" />
</object>
</body></html>


I've made the Flash movie 1000px high just to make double sure the scrollbar shows up.

You don't need "overflow:hidden" in the html and body tags because that will stop the scrollbars showing up. Also, the "width" and "height" tags don't need to be on the actual Flash object because they are set by the style sheet.

Hope that helps.
Reply With Quote  
igor igor is offline igor lives in Netherlands 2005-10-03 #43 Old  
And it helps

Thanx men
Reply With Quote  
Ben Ben is offline Ben lives in United States 2005-10-03 #44 Old  
US pays nutrox.. right ?
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-03 #45 Old  
Originally posted by Bentropy
US pays nutrox.. right ?
Yeah, right... I cost too much. J/K

I just love the way this thread has gone from bitmap tiling to full-screen flash sites.
Reply With Quote  
Ben Ben is offline Ben lives in United States 2005-10-03 #46 Old  
How do i get it even on the pixel ?
Pixel fonts go wacky on resize.

math.round ¿
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-03 #47 Old  
Originally posted by Bentropy
How do i get it even on the pixel ?
Pixel fonts go wacky on resize.

math.round ¿
I always tend to use Math.floor for some reason, but anything that gives you a whole number is fine.

You basically just need to make sure that your main movie clips (content containers etc) are all sitting on whole numbers.

I'm not sure how you've got things setup in your code but a basic example to center a movie clip would be...

ActionScript Code:
  1. function myRepositioner():Void {
  2. var mc:MovieClip;
  3.  
  4. mc = _root.mainContent_mc;
  5. mc._x = Math.floor((Stage.width - mc._width) / 2);
  6. mc._y = Math.floor((Stage.height - mc._height) / 2);
  7. };
Reply With Quote  
Ben Ben is offline Ben lives in United States 2005-10-03 #48 Old  
I wasnt familur with math.floor :\
but thats wha i thought.

Thats in there.. and there definetely all sittin on the pixel, ...

hmm..

Thx any way bro
Reply With Quote  
uxte's Avatar uxte uxte is offline Moderator uxte lives in Finland 2005-10-11 #49 Old  
Hi there,

This thread have been really useful since I was trying to understand what was behind this "elastic layouts".

With what I've learned here I came up with this.

But I'm having a problem: when you maximize your browser (hit F11) and then minimize it again the myContent_mc stays near the top instead of getting centered vertically. Why is that?? Can anyone help?

I tested it in every browser and this always happens, I´m using the exact same script Nutrox posted.

Thanks
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-11 #50 Old  
You don't need to press F11 to get it to happen, it also happens if you simply resize the browser... so... I'm going to take a wild guess that there's something slightly wrong in the code that you use to reposition everything.

Are you using your reposition function to position everything when the movie first loads? That's something you should do if you're not already doing it.

It's going to be difficult to help you though without seeing what's going on with your ActionScript.
Reply With Quote  
uxte's Avatar uxte uxte is offline Moderator uxte lives in Finland 2005-10-11 #51 Old  
Thank you very much for the fast reply Nutrox

here is the AS

ActionScript Code:
  1. stop();
  2. Stage.scaleMode = "noscale";
  3. Stage.align = "tl";
  4. Stage.addListener({onResize:reposition});
  5. function reposition() {
  6.     var header = _root.myHeader_mc;
  7.     var content = _root.myContent_mc;
  8.     var footer = _root.myFooter_mc;
  9.     var nPos;
  10.     nPos = getNewPosition(header);
  11.     header._x = nPos.x;
  12.     header._y = 0;
  13.     nPos = getNewPosition(content);
  14.     content._x = nPos.x;
  15.     content._y = nPos.y;
  16.     nPos = getNewPosition(footer);
  17.     footer._x = nPos.x;
  18.     footer._y = Stage.height-footer._height;
  19. }
  20. function getNewPosition(mc) {
  21.     var newX = Math.floor((Stage.width-mc._width)/2);
  22.     var newY = Math.floor((Stage.height-mc._height)/2);
  23.     return {x:newX, y:newY};
  24. }
  25. reposition();

I'm not using the myHeader_mc for now.
Reply With Quote  
Ben Ben is offline Ben lives in United States 2005-10-11 #52 Old  
For anyone who wants to animate the reposition.
this is how i did it. (Robert Penner tween class)
ActionScript Code:
  1. #include "easing_equations.as"
  2. #include "core_setup.as"
  3. #include "motion_class.as"
  4. #include "tween_class.as"
  5. // set up tween parameters
  6. func = Math.easeOutElastic;
  7. duration = 20;
  8. useSeconds = false;
  9. Stage.scaleMode = "noscale";
  10. Stage.align = "tl";
  11. Stage.addListener({onResize:startReposition});
  12. function startReposition() {
  13.     clearInterval(_root.repos_int);
  14.     _root.repos_int = setInterval(_root, "reposition", 200);
  15. }
  16. function reposition() {
  17.     var mc = _root.mainContent_mc;
  18.     var newX = Math.floor(Stage.width)/2;
  19.     var newY = Math.floor(Stage.height)/2;
  20.     tweenX.stop();
  21.     tweenY.stop();
  22.     tweenX = new Tween(mc, "_x", func, mc._x, newX, duration, useSeconds);
  23.     tweenY = new Tween(mc, "_y", func, mc._y, newY, duration, useSeconds);
  24.     clearInterval(_root.repos_int);
  25. }
  26. stop();

thought I'd contribute a lil

Thanks Nutrox..
Reply With Quote  
cren cren is offline cren lives in Czech Republic 2005-10-14 #53 Old  
Interesting, I must try this with Penner's easing. Thanks Bentropy and Nutrox ! Great thread.
Reply With Quote  
tripflip tripflip is offline 2005-10-20 #54 Old  
Another question for this thread!

Nutrox, above you mention that in Flash 8 this is very simple by "flood filling" the movie. Could you elaborate a little more. I'm guessing that this method doesn't require a seperate movie clip for each tile?
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-20 #55 Old  
Originally posted by tripflip
Another question for this thread!

Nutrox, above you mention that in Flash 8 this is very simple by "flood filling" the movie. Could you elaborate a little more. I'm guessing that this method doesn't require a seperate movie clip for each tile?
Here's an example that uses a PNG file in the library (linkage ID "myTile") to create a tiled fill...

ActionScript Code:
  1. import flash.display.BitmapData;
  2.  
  3. var tile_bmp:BitmapData = BitmapData.loadBitmap("myTile");
  4. var container_mc:MovieClip = this.createEmptyMovieClip("container_mc", 0);
  5.  
  6. container_mc.beginBitmapFill(tile_bmp, null, true);
  7. container_mc.moveTo(0, 0);
  8. container_mc.lineTo(300, 0);
  9. container_mc.lineTo(300, 300);
  10. container_mc.lineTo(0, 300);
  11. container_mc.lineTo(0, 0);
  12. container_mc.endFill();
Flash 8 kicks ass.
Reply With Quote  
tripflip tripflip is offline 2005-10-20 #56 Old  
Sweet!

That's a perfect example. Now let me ask you to help expand that a little if you would.

I have my flash file set to 100% x 100%, stage.scale = "noscale" and I would like to use the example you have given to render as my background. I'm not super AS savy but would this be possible?

Thanks for the awesome help!
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-20 #57 Old  
The best way would be to create a tiled movie clip the same size as the user's desktop, that way it would only need to be drawn once...

ActionScript Code:
  1. Stage.scaleMode = "noscale";
  2. Stage.align = "TL";
  3.  
  4. import flash.display.BitmapData;
  5.  
  6. var sw:Number = System.capabilities.screenResolutionX;
  7. var sh:Number = System.capabilities.screenResolutionY;
  8.  
  9. var tile_bmp:BitmapData = BitmapData.loadBitmap("myTile");
  10. var container_mc:MovieClip = this.createEmptyMovieClip("container_mc", 0);
  11.  
  12. container_mc.beginBitmapFill(tile_bmp, null, true);
  13. container_mc.moveTo(0, 0);
  14. container_mc.lineTo(sw, 0);
  15. container_mc.lineTo(sw, sh);
  16. container_mc.lineTo(0, sh);
  17. container_mc.lineTo(0, 0);
  18. container_mc.endFill();
Reply With Quote  
tripflip tripflip is offline 2005-10-20 #58 Old  
That Worked Perfect
I've had Flash 8 now for 3 weeks, and I've learned more in one thread than I have in 3 weeks of poking around.

Thank you very much for your help. The examples you have given me are perfect. Now I have a perfect set of template files to start each new flash site with.

Thanks again Nutrox!
Reply With Quote  
tripflip tripflip is offline 2005-10-20 #59 Old  
I knew it was probably to soon to post a success reply. First thanks for your help thus far.

Now this might change the topic a bit, but if I want to load in movie clips on top of the background using LoadMovie do i have to specify a level higher than the level used in the createEmptyMovieClip?
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-20 #60 Old  
Originally posted by tripflip
I knew it was probably to soon to post a success reply. First thanks for your help thus far.

Now this might change the topic a bit, but if I want to load in movie clips on top of the background using LoadMovie do i have to specify a level higher than the level used in the createEmptyMovieClip?
The best thing to do really is to have your background in one level and then load the main site content into another level.

For example, you might use this code in the first movie that gets loaded into the HTML ( _level0 )...

ActionScript Code:
  1. Stage.scaleMode = "noscale";
  2. Stage.align = "TL";
  3.  
  4. import flash.display.BitmapData;
  5.  
  6. var sw:Number = System.capabilities.screenResolutionX;
  7. var sh:Number = System.capabilities.screenResolutionY;
  8.  
  9. var tile_bmp:BitmapData = BitmapData.loadBitmap("myTile");
  10. var container_mc:MovieClip = this.createEmptyMovieClip("container_mc", 0);
  11.  
  12. container_mc.beginBitmapFill(tile_bmp, null, true);
  13. container_mc.moveTo(0, 0);
  14. container_mc.lineTo(sw, 0);
  15. container_mc.lineTo(sw, sh);
  16. container_mc.lineTo(0, sh);
  17. container_mc.lineTo(0, 0);
  18. container_mc.endFill();
  19.  
  20. ////
  21.  
  22. loadMovieNum("mainContent.swf", 1);
...that would create your background and then load "mainContent.swf" into _level1 ( level one ) so you can keep your main content separate from the actual background SWF file.
Reply With Quote  
tripflip tripflip is offline 2005-10-20 #61 Old  
Hmmm...
This may be nothing, but when I got home this evening I opened my fla on my desktop with my resolution set to 1200 x 1600 on my 20" monitor, and for some reason the tiled background only stretchs the full width. The height is only about 250px. My systems are both setup the same except this machine has a dual monitor setup with a higher screen res, and the is on a 15" laptop.

Any thoughts?
Reply With Quote  
tripflip tripflip is offline 2005-10-20 #62 Old  
Thought it would be wise to post the files incase. Here
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-21 #63 Old  
It sounds like the dual-monitors might be causing a problem there.

Hmm. You might have to do things the "normal" way then and redraw the tiled background whenever the size of the movie changes (when the browser window changes size etc). Here's the code for that...

ActionScript Code:
  1. Stage.scaleMode = "noscale";
  2. Stage.align = "TL";
  3.  
  4. import flash.display.BitmapData;
  5.  
  6. var stageListener:Object = {};
  7. stageListener.onResize = redrawBackground;
  8. Stage.addListener(stageListener);
  9.  
  10. var tile_bmp:BitmapData = BitmapData.loadBitmap("myTile");
  11. var container_mc:MovieClip = this.createEmptyMovieClip("container_mc", 0);
  12.  
  13. function redrawBackground():Void {
  14. var sw:Number = Stage.width;
  15. var sh:Number = Stage.height;
  16. var mc:MovieClip = _root.container_mc;
  17. mc.clear();
  18. mc.beginBitmapFill(_root.tile_bmp, null, true);
  19. mc.moveTo(0, 0);
  20. mc.lineTo(sw, 0);
  21. mc.lineTo(sw, sh);
  22. mc.lineTo(0, sh);
  23. mc.lineTo(0, 0);
  24. mc.endFill();
  25. };
  26. redrawBackground();
  27.  
  28. ////
  29.  
  30. loadMovieNum("mainContent.swf", 1);
Reply With Quote  
tripflip tripflip is offline 2005-10-21 #64 Old  
I think I figured it out. I blamed it on my system changes, but when I got back in the office this morning it was doing the same thing on my laptop.

Instead of using the html file that flash creates I was using a XHTML file created with Dreamweaver. I can't believe I overlooked that considering I created it right before I left the office.

Works perfect when I replace the Dreamweaver generated DOCTYPE section with the Flash generated DOCTYPE section.

Nutrox thanks for all of your help. I'm pretty new to US, but I've looked at a lot of forums and you're everywhere so I know i've gotten solid advice. I do appreciate your help!
Reply With Quote  
flacoop flacoop is offline 2005-10-25 #65 Old  
Great Topic really interesting.
I have a question about full background in flash.
I've got it all working fine, but it doesn't seem to work in IE 5.2 for Mac
Is this something I done wrong or is there a way to fix it.
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-25 #66 Old  
Originally posted by flacoop
Great Topic really interesting.
I have a question about full background in flash.
I've got it all working fine, but it doesn't seem to work in IE 5.2 for Mac
Is this something I done wrong or is there a way to fix it.
Hehe... nothing works in IE 5 on the Mac.

Seriously though, the script used in this thread doesn't do anything browser specific, i.e. it's not using any JavaScript or anything like that, so I guess it's either an issue with the Flash plugin, or it could be the way you've constructed the actual HTML page.

The Stage.onResize stuff will only work with Flash 6 or above, but there's no mention of any browser related problems in the Flash Help docs.
Reply With Quote  
flacoop flacoop is offline 2005-10-25 #67 Old  
Nutrox,

Thanks for the reply,
I'm using flash Mx and I have the latest flash player so I dont know if that is the problem, I tried it with the files you supplied earlier in the thread and IE just wont show it, I just get a blank browser, all the others are great.
Reply With Quote  
Ben Ben is offline Ben lives in United States 2005-10-25 #68 Old  
This might be the most useful thread on ...

flacoop, try again.. Theres nothing wrong with the code. Make sure your implementing it correctly...

and Make sure your mc isnt way off bounds.
Reply With Quote  
flacoop flacoop is offline 2005-10-25 #69 Old  
I'm sure the code is fine, but I'm just downloading the code Nutrox provided and then testing it in the browser, I'm not implementing at all
Has anyone else tried it in IE on the Mac
Reply With Quote  
tripflip tripflip is offline 2005-10-25 #70 Old  
Are you using the HTML page generated from flash, then modifying the object width and height settings?

I had a very similar problem when I created a blank HTML doc in dreamweaver then inserted the flash object. The XHTML tags at the top of the page were causing the problem. When I exported from Flash and used the Flash generated tags it worked great.
Reply With Quote  
Ben Ben is offline Ben lives in United States 2005-10-25 #71 Old  
Orr.. just use the HTML template Nutrox threw out there.
Reply With Quote  
flacoop flacoop is offline 2005-10-25 #72 Old  
I am using the template Nutrox provided.
I'm not doing anything myself. I'm just downloading Nutrox file and dragging the index_mx.htm file on top of my IE logo in the dock and the browser is blank. If I drag it onto Mozilla or Safari its fine and I can see the flash, but IE on luck.
Reply With Quote  
Ben Ben is offline Ben lives in United States 2005-10-25 #73 Old  
ohh..

Well then. The problem is that mac:IE sux
Reply With Quote  
tripflip tripflip is offline 2005-10-25 #74 Old  
Another Question
I was taking a look at some of the previous BS award winners today, and one of them made me curious about another technique used with a background in flash. If you visit Leventhumps.com and resize your browser window the background doesn't scale, but yet it hides the outer area of the image.

How do they do that? Do they start with a 1600 x 1200 image assuming that would be the maximum resolution, and if it is wider then the black background becomes visible? I just thought it was a pretty cool technique and figured someone on this thread might have done it, or understand it.
Reply With Quote  
Ben Ben is offline Ben lives in United States 2005-10-25 #75 Old  
Thats just a large centered image.
Reply With Quote  
freeskier freeskier is offline 2005-10-25 #76 Old  
Can this be done?
This is a great thread. I finally got my head around this. Question though.

Is there a way to have a MC centered both horizontal and verticle in the screen. Then change it to where that mc is aligned to the top of the screen and still centered vertically?

Thanks a ton for everyones help on this thread already!!
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-25 #77 Old  
Re: Can this be done?
Originally posted by freeskier
This is a great thread. I finally got my head around this. Question though.

Is there a way to have a MC centered both horizontal and verticle in the screen. Then change it to where that mc is aligned to the top of the screen and still centered vertically?

Thanks a ton for everyones help on this thread already!!
Yep, you just need to think about how you create your reposition() function.

If you create a new Flash movie and then run the following code you can click on the black-box movie clip to switch it's vertical alignment...

ActionScript Code:
  1. Stage.scaleMode = "noscale";
  2. Stage.align = "TL";
  3.  
  4. // create a basic filled movieclip
  5. var block_mc:MovieClip = this.createEmptyMovieClip("block_mc", 0);
  6. with(block_mc) {
  7.     beginFill(0);
  8.     moveTo(0,0);
  9.     lineTo(200,0);
  10.     lineTo(200,100);
  11.     lineTo(0,100);
  12.     lineTo(0,0);
  13.     endFill();
  14. }
  15.  
  16. // set a variable in "block_mc" to tell Flash if the
  17. // movie clip needs to be aligned vertically
  18. block_mc.alignVertical = true;
  19.  
  20. // when "block_mc" is clicked it's alignVertical
  21. // variable will switch, and the "reposition" function
  22. // will be called
  23. block_mc.onRelease = function():Void {
  24.     this.alignVertical = !this.alignVertical;
  25.     _root.reposition();
  26. };
  27.  
  28. // the reposition function
  29. function reposition():Void {
  30.     var mc:MovieClip = _root.block_mc;
  31.     mc._x = Math.floor((Stage.width - mc._width) / 2);
  32.     if(mc.alignVertical) {
  33.         mc._y = Math.floor((Stage.height - mc._height) / 2);
  34.     } else {
  35.         mc._y = 0;
  36.     }
  37. };
  38.  
  39. // setup the Stage listener
  40. var stageListener = {};
  41. stageListener.onResize = reposition;
  42. Stage.addListener(stageListener);
  43.  
  44. // call the "reposition" function to position everything
  45. reposition();
That should be enough to get you going and give you a good idea of how it works, but if you get stuck you know where to find this thread.
Reply With Quote  
freeskier freeskier is offline 2005-10-25 #78 Old  
Thanks a ton Nutrox! I'll give it a go.
Reply With Quote  
flacoop flacoop is offline 2005-10-25 #79 Old  
Sorry back to my problem of IE on Mac,
I got it working, I think it must be the embed tag that IE needs
Anyway haven't worked out why this works, but if anyone has the same problem here is the html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>centered_mx</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords"    content="" />
<meta name="author"      content="" />
<meta name="copyright"   content="" />
<style type="text/css">
 body {
	margin:0px;
	padding:0px;
	overflow:hidden;
	height:100%;
}
object {
	width:100%;
	height:100%;
}
</style>
</head>
<body>
<object WIDTH="100%" HEIGHT="100%" id="centered_mx">
 <param name=movie value="centered_mx.swf"> 
 <embed src="centered_mx.swf" quality=high scale=noscale bgcolor=#FFFFFF  width="100%" height="100%" name="centered_mx"
 type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
</body>
</html>
Reply With Quote  
Erix's Avatar Erix Erix is offline Erix lives in Brazil 2005-10-31 #80 Old  
Hi Nutrox! I got a question for u...

The code explaining how to create a tiled bg u posted is only
for flash 8? I cant get it to work....
Reply With Quote  
<|1|2|3|4|>|>> Page 2 of 12
Thread Tools
Display Modes Rate This Thread
Rate This Thread: