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|11|>|>> Page 1 of 12

#1
Bookmark and Share!
Full background in Flash ???
Old 2005-09-06

Hi everybody !!!!

I have seen that you can use a full background directly in flash that will allow you to keep you site always centered in the page with any screen resolution...

Can anybody help me or tell me how you do it ???

Normally I do it in html and put my flash in centered w & h 100% table...

Tks in advance !!!!!

Profile P.
Pixels, pixels & more pixels...
--
www.profilepixel.com
postbit arrow 466 comments | 144270 views postbit arrow Reply: with Quote   
Registered User
Profile P. is offline
seperator
Posts: 71
2005-01-01
Age: 37
seperator

Ultrashock Member Comments:
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-09-06 #2 Old  
The first thing you will need to do is create an HTML page, add your Flash movie to it in the normal way, and give the movie a 100% width and 100% height (can be done directly in the HTML page or via CSS). You will probably also want to set the padding and margin of the <body> to 0px.

Create a new Flash movie and add a movieclip to the stage (give the movieclip the instance name "mainContent_mc") then add the following code to the first frame of the main timeline...

ActionScript Code:
  1. stop();
  2.  
  3. Stage.scaleMode = "noscale";
  4. Stage.align = "tl";
  5. Stage.addListener({onResize:reposition});
  6.  
  7. function reposition() {
  8.     var mc = _root.mainContent_mc;
  9.     var newX = Math.floor((Stage.width - mc._width) / 2);
  10.     var newY = Math.floor((Stage.height - mc._height) / 2);
  11.     mc._x = newX;
  12.     mc._y = newY;
  13. };
  14.  
  15. reposition();
If you place all of your site's content inside the "mainContent_mc" movieclip then it will all be centered in the browser, and will adjust itself whenever the browser / flash movie is resized.

That code basically tells Flash to resize the stage instead of rescaling it, and it sets up a listener for the Stage which calls the reposition() function whenever the main movie (HTML object) is resized.

Stage.width and Stage.height will return the actual size of the stage, and they are always available to you use.

Hope that helps.
Reply With Quote  
rabmcnab's Avatar rabmcnab rabmcnab is offline rabmcnab lives in United Kingdom 2005-09-06 #3 Old  
Superb Nutrox. The answer and an explanation to boot. That's been on my list of niggling expertise holes for a while now. Thanks for that gen.
Reply With Quote  
digimat digimat is offline 2005-09-06 #4 Old  
yes thanks nutrox for the info
Reply With Quote  
Klin Klin is offline Klin lives in Canada 2005-09-06 #5 Old  
Nutrox thank you for such a usefull staff.
I have a quick question.
When I was testing this staff I was confused with the first line of HTML which was created by publishing from flash.

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

With this line I had vertical scroller appearing when I've resized window so it will be very short vertically. When I've removed the first line from HTML code that scroller disapeared. Also I'm always having problems in DreamViewer with tables (100% height) so I have always to remove that line from HTML.

Could you explain what does this line do?

P.S. nutrox thanks again for this staff, now it is very clear to understand how guys are creating web sites like http://matiz2.ru/
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-09-06 #6 Old  
Hi Klin.

Here's a basic HTML page that I normally start off with when I create full screen (100% x 100%) Flash sites. You should be able to edit it easily enough to suit your needs... although it might be worth editing in a text edit and not Dreamweaver. Dreamweaver tends to dump a lot of useless code into web pages, which is one of the reasons why I never use it now.

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

<html><head>

<title></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:100%;
}
object {
	width:100%;
	height:100%;
}
</style>

</head><body>

<object type="application/x-shockwave-flash" data="flashMovie.swf">
<param name="movie" value="flashMovie.swf" />
</object>

</body></html>
The reason that there is no <embed> tag is because the page is XHTML (set via the doctype), and <embed> tags are not really allowed to be used in XHTML pages, but it all works fine without the tag.

If you use CSS files (.css) then you might want to shift the style from the <head> into a .css file just to clean things up a bit... but it's not too important with 100% Flash sites. Just let me know if you need help with that if you decide to do it though.

Hope that's of some help.
Reply With Quote  
Klin Klin is offline Klin lives in Canada 2005-09-06 #7 Old  
Thank you Nutrox.
Reply With Quote  
Chaosfact's Avatar Chaosfact Chaosfact is offline Chaosfact lives in United States 2005-09-06 #8 Old  
Yeah thanks, that was on my list of things to learn too.
Reply With Quote  
Profile P. Profile P. is offline 2005-09-06 #9 Old  
Nutrox !!!! TKS A LOT MEN !!!! I will try it... I'll let you know asap !!! Tks again !!!
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-09-06 #10 Old  
No problem guys, glad I could help out.

I've zipped up a small example if you want / need to check it out. It contains the .htm, .fla, and .swf files. Feel free to grab it from here.
Reply With Quote  
Profile P. Profile P. is offline 2005-09-06 #11 Old  
Tks... Very good idea !!!
Reply With Quote  
Profile P. Profile P. is offline 2005-09-06 #12 Old  
Hey Nutrox...

Do you know if you can do a repeat background img like html ?

4 x 4 pixels ? Do you know what I mean ?

Thank's a lot !!!
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-09-07 #13 Old  
Yep, creating a tiled background is quite easy, but to be honest using a 4x4 tile probably isn't the best thing to use because it's too small.

With Flash 8 you could simply create a bitmap image within Flash and flood-fill it with your tile... nice easy and quick. With Flash 7 (and lower) you need to create a new movieclip for each tile, and with a 4x4 tile that's going to kill Flash... a 600 x 400 sized stage for example would require 15000 movieclips (nooooooooooooooo!).

If you used a larger tile though (50x50 etc) then it should be ok. Anyway, here's a little function that you can use to create a tiled background.

ActionScript Code:
  1. function createBackground(targetMC:MovieClip, tileID:String):Void {
  2.     // create a temp mc to get the tile size
  3.     targetMC.attachMovie(tileID, "temp", 0);
  4.     var tW:Number = targetMC.temp._width;
  5.     var tH:Number = targetMC.temp._height;
  6.     targetMC.temp.removeMovieClip();
  7.     // work out how many tiles we need
  8.     var tX:Number = Math.ceil(Stage.width / tW);
  9.     var tY:Number = Math.ceil(Stage.height / tH);
  10.     // build the tiles
  11.     var i:Number = 0;
  12.     for(var x:Number = 0; x < tX; x++) {
  13.         for(var y:Number = 0; y < tY; y++) {
  14.             var mc:MovieClip = targetMC.attachMovie(tileID, "tile" + i, i);
  15.             mc._x = tW * x;
  16.             mc._y = tH * y;
  17.             i ++;
  18.         }
  19.     }
  20. };
  21.  
  22. // example usage
  23.  
  24. createBackground(myBackground_mc, "bricks");
targetMC is the movieclip that you want the tiles to be copied to (this could be _root if you want). tileID is the linkage name of the tile movieclip in your library. You need to have the tile in the library (a movieclip linked to the first frame of the movie).

I've only just woken up but I think that should work. If you have any problems with it just let me know.
Reply With Quote  
senocular senocular is offline Moderator senocular lives in United States 2005-09-07 #14 Old  
Topic does not concern OOP. Moving to Flash Forum.
Reply With Quote  
betatone betatone is offline 2005-09-13 #15 Old  
So is the is the same way that they set up http://www.bacardilive.com ????
Reply With Quote  
Anik's Avatar Anik Anik is offline Super Moderator Anik lives in Argentina 27 Creative Assets 2005-09-13 #16 Old  
yes
Reply With Quote  
betatone betatone is offline 2005-09-13 #17 Old  
OK.... now it all akes sense.... but I have a little question.

Taking Bacardilive as an example...

You have all the main content being loaded into maincontent_mc. Can you then further load more movie clips into that....

Like maincontent_mc loads a clip that has the whole site shell but in that I have seperate panels that need to load in... can you load a movie inside an allready loaded movie.. obviously if you can I imagine that it would have to be at a higher level.. right?


thanks
Reply With Quote  
Anik's Avatar Anik Anik is offline Super Moderator Anik lives in Argentina 27 Creative Assets 2005-09-13 #18 Old  
yes, you can load movies inside a loaded movie.
Reply With Quote  
graphter's Avatar graphter graphter is offline graphter lives in United Kingdom 2005-09-13 #19 Old  
Yes you can using levels or by replacing mc's
Reply With Quote  
chst chst is offline 2005-09-17 #20 Old  
THX A LOT!
Reply With Quote  
MYTiX MYTiX is offline 2005-09-17 #21 Old  
With Flash 8 you could simply create a bitmap image within Flash and flood-fill it with your tile...
Could you describe this a little more?
Reply With Quote  
fr3d fr3d is offline 2005-09-17 #22 Old  
to further probe nutrox's knowledge: is there a simple way to call a function *after* the user has finished resizing the browser window? i.e. instead of calling it repeatedly while the window is being dragged...

thanks - this thread has been invaluable.
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-09-17 #23 Old  
Originally posted by fr3d
to further probe nutrox's knowledge: is there a simple way to call a function *after* the user has finished resizing the browser window? i.e. instead of calling it repeatedly while the window is being dragged...

thanks - this thread has been invaluable.
The only way I can think of doing that at the moment is like this...

ActionScript Code:
  1. stop();
  2.  
  3. Stage.scaleMode = "noscale";
  4. Stage.align = "tl";
  5. Stage.addListener({onResize:startReposition});
  6.  
  7. function startReposition() {
  8.     clearInterval(_root.repos_int);
  9.   _root.repos_int = setInterval(_root, "reposition", 250);
  10. };
  11.  
  12. function reposition() {
  13.         var mc = _root.mainContent_mc;
  14.         var newX = Math.floor((Stage.width - mc._width) / 2);
  15.         var newY = Math.floor((Stage.height - mc._height) / 2);
  16.         mc._x = newX;
  17.         mc._y = newY;
  18.     clearInterval(_root.repos_int);
  19. };
  20.  
  21. reposition();
What that does is start a "timeout" when the browser window is resized, and will reposition everything if the browser size doesn't change for 1/4 of a second (250ms). That should prevent anything being repositioned until the user has stopped resizing the browser.

Hope that helps.

On a side note: If the size of your main content ever changes then you can simply call _root.reposition(); to force everything to the center of the screen.
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-09-17 #24 Old  
Originally posted by MYTiX
Could you describe this a little more?
I'll get example together shortly.
Reply With Quote  
fr3d fr3d is offline 2005-09-17 #25 Old  
hey - wow. fast post!

along the lines of what i had in mind. thanks for putting it into code. very nice.
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-09-18 #26 Old  
Bitmap Tile Example
Hi Guys.


Here's an example of how to create a tiled bitmap in Flash (as requested by MYTiX).

Here's the important part...

ActionScript Code:
  1. import flash.display.BitmapData;
  2. import flash.geom.Rectangle;
  3. import flash.geom.Point;
  4.  
  5. function createTiles(target:BitmapData, tileID:String):Void {
  6.     var tile_bmp:BitmapData = BitmapData.loadBitmap(tileID);
  7.     var tW:Number = tile_bmp.rectangle.width;
  8.     var tH:Number = tile_bmp.rectangle.height;
  9.     var tX:Number = Math.ceil(target.rectangle.width / tW);
  10.     var tY:Number = Math.ceil(target.rectangle.height /  tH);
  11.     for(var x:Number = 0; x < tX; x++) {
  12.         for(var y:Number = 0; y < tY; y++) {
  13.             var rect:Rectangle = new Rectangle(0,0,tW,tH);
  14.             var point:Point = new Point(tW*x,tH*y);
  15.             target.copyPixels(tile_bmp, rect, point);
  16.         }
  17.     }
  18. };
...and this is an example of how to use it...

ActionScript Code:
  1. // CREATE AN EMPTY MOVIECLIP TO USE AS A CONTAINER
  2. var container_mc:MovieClip = this.createEmptyMovieClip("container_mc", 0);
  3.  
  4. // CREATE A NEW BITMAP
  5. var target_bmp:BitmapData = new BitmapData(600, 300, false, 0);
  6.  
  7. // ATTACH THE BITMAP TO THE CONTAINER
  8. container_mc.attachBitmap(target_bmp,0);
  9.  
  10. // CALL THE createTiles FUNCTION SO THAT THE CONTAINER BITMAP
  11. // IS TILED WITH A PNG (etc) FROM THE LIBRARY
  12. createTiles(target_bmp, "source3BMP");
source3BMP is the linkage name I gave a PNG in the library when I was testing the function, this can obviously be changed to whatever you want.

Hope that's of some use.
Reply With Quote  
MYTiX MYTiX is offline 2005-09-18 #27 Old  
Thx.

I see, you know a lot of these new Flash 8 features.

Thx again.
Reply With Quote  
NDF NDF is offline 2005-09-18 #28 Old  
Last edited by NDF : 2005-09-19 at 00:37.
'llo there,
talking tiled backgrounds - a simple thing that you can do in Flash for as long as I can recall is take a small bitmap, break it up (control>b) and select it with the eye-dropper. You can then center a 1600x1200 rectangle - or whatever size you want - on the stage and use the selected bitmap as the fill colour.
Reply With Quote  
 Mime 2005-09-18 #29 Old  
Great Thread. Thx Nutrox and Co.
Reply With Quote  
satchmo511 satchmo511 is offline satchmo511 lives in United States 2005-09-18 #30 Old  
very helpful stuff. Thanx Nutrox!
Reply With Quote  
igor igor is offline igor lives in Netherlands 2005-09-19 #31 Old  
Hi, great thread I must say!

I was wondering if anyone could give an example how to make two extra mc's in this thread. One that aligns to the top, and one mc that aligns to the bottom of your page.. like on workrocks ??

If possible in the AS code of Nutrox's example zipped Fla!

thanx igor
Reply With Quote  
 Mime 2005-09-19 #32 Old  
`workrocks' = Nice Site !
Reply With Quote  
igor igor is offline igor lives in Netherlands 2005-09-20 #33 Old  
I was wondering if anyone could give an example how to make two extra mc's in this thread. One that aligns to the top, and one mc that aligns to the bottom of your page.. like on workrocks ??

If possible in the AS code of Nutrox's example zipped Fla!
Anyone
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-09-20 #34 Old  
Here's something that might help you out...

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

All three movieclips will be centred horizontally. myHeader_mc will be fixed at the top of the stage, myContent_mc will be centred vertically, and myFooter_mc will be fixed to the bottom of the stage.

Hope that helps.
Reply With Quote  
igor igor is offline igor lives in Netherlands 2005-09-20 #35 Old  
Mennn Thanx Nutrox! This thread is getting better and better..
Reply With Quote  
Profile P. Profile P. is offline 2005-09-20 #36 Old  
Igordezign is totaly right... Nutrox !!!! Men apply for teacher !!! This thread is making us learn a lot !!!!
Reply With Quote  
igor igor is offline igor lives in Netherlands 2005-10-02 #37 Old  
Last edited by igor : 2005-10-02 at 11:38.
Opening this thread again with another question..
Anyone knows how to include the vertical scrolling(just the html one, like on bacardilive ) into Nutrox's fullscreen flash movie tut. I asked for with the three mc's top center and bottom??? If it's possible..
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-02 #38 Old  
Originally posted by igordezign
Opening this thread again with another question..
Anyone knows how to include the vertical scrolling(just the html one, like on bacardilive ) into Nutrox's fullscreen flash movie tut. I asked for with the three mc's top center and bottom??? If it's possible..
Instead of giving the HTML flash object a height of 100% you just give it a PX value. All of the Stage reposition code etc will still work fine.. the Flash movie can be any size you want.

Code:
<object type="application/x-shockwave-flash" data="movie.swf" width="100%" height="1000px">
<param name="movie" value="movie.swf" />
</object>
Reply With Quote  
igor igor is offline igor lives in Netherlands 2005-10-03 #39 Old  
Hmm doesnt seem to work like I wanted.. But Thanx!

Is it hard to make your own (inside flash) scroller like on
subdisc?
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2005-10-03 #40 Old  
Originally posted by igordezign Hmm doesnt seem to work like I wanted.. But Thanx!
You must have something setup wrong then, all you need to do is make the flash movie (HTML object) high enough to contain your content.
Originally posted by igordezign Is it hard to make your own (inside flash) scroller like on
subdisc?
It's not too difficult because you just need to scroll a huge movie clip, but it obviously depends on how well you know ActionScript.

It would be a lot better to use the browser's scrollbar though because (a) it's easier to implement, (b) it will be a lot smoother, and (c) it won't eat up as much CPU as scrolling a massive movie clip does.
Reply With Quote  
1|2|3|11|>|>> Page 1 of 12
Thread Tools
Display Modes Rate This Thread
Rate This Thread: