How to make a Flash animation truly fullscreen
ActionScript, CSS, Flash, HTML
by nunof, 12:01 14-03-2008 (updated at 21:40 17-12-2008)
We explain how we can make a Flash movieclip occupy the whole browser window and also how we can make it enter real fullscreen mode.
Introduction - Flash browser fullscreen and 100% fullscreen
So you want to make a Flash game but you need it to support fullscreen mode? Well I was in this situation not too long ago and at that time the best that I could do was make my Flash SWF occupy the whole browser window - I then used Firefox fullscreen mode (F11) to display the Flash movieclip as fullscreen as possible (I only needed this for a specific presentation). Not too bad, but recently I found out a much better solution.
In this article we'll explore two different approaches:
- Making the Flash fullscreen relative to the browser window
- Use true fullscreen mode (no strings attached)
The are a lot of different situations we're you'll want or need this: games, movie clips, slideshows, etc.
How to make a Flash movie occupy the whole browser window
This is the easiest to do. We only need to work with HTML and a little CSS for this.
First we remove the margin and padding from the body. We also need to make sure that the whole height of the browser window is used.
The second thing we need to do is tell our Flash object to occupy 100% width and height. Set an id for the Flash object and specify the width and height with CSS.
Here is the code for accomplishing this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Flash Fullscreen</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #flashFullscreen { width: 100%; height: 100%; } </style> </head> <body> <object type="application/x-shockwave-flash" data="flashFullscreen.swf" id="flashFullscreen" width="640" height="480"> <param name="movie" value="flashFullscreen.swf" /> <param name="allowFullScreen" value="true" /> </object> </body> </html>
You can see an example of this working in the following screenshot:
How to make true 100% fullscreen Flash
Starting with version 9.0.28.0 the Flash Player allows the use of fullscreen mode. To put this in action we need to do a little more work than before and use a little ActionScript.
I'll provide an example where we'll make a Flash movieclip with a button that allows toggling between fullscreen and normal mode. I should mention that there is a requirement for turning to fullscreen mode - we can only initiate fullscreen in response to a mouse click or a key press, in other situations it will throw an exception.
Start by creating a new Flash project (I did this in Flash CS3 Professional). Put some background elements. Next, create a button and set its instance name in the properties windows. This button will allow us to toggle between fullscreen mode.
Now create a new layer and call it actions. Select the first frame of the layer and open the ActionScript panel.
We'll now define the code for the mouse click on the button. I called my button fullscreen_btn and then added an event listener for the mouse release action.
We need to determine what's the current display state, so we can then switch to the opposite one. I also changed the stage's scale mode, making it stretch the contents to the fullest - this is not needed, if I hadn't put that line the contents would still go fullscreen but would maintain the same aspect ratio (this behaviour is more obvious in widescreen monitors if the animation's ratio is 4:3).
this.fullscreen_btn.addEventListener(MouseEvent.MOUSE_UP, toggleFullscreen); stage.scaleMode = "exactFit"; function toggleFullscreen(event:MouseEvent) { if (stage.displayState == "fullScreen") { stage.displayState = "normal"; } else { stage.displayState = "fullScreen"; } }
There's still one more step to go. A new tag is needed in the HTML code when embedding the Flash SWF. If you like to publish directly to HTML you can do this in the Publish Settings dialog.
Go to the File > Publish Settings... menu option. Switch to the HTML tab. In the Template dropdown select the correct value - Flash Only - Allow Full Screen.
Flash will now produce the HTML with the parameter allowFullScreen set to true. We can also do this manually. See the screenshot bellow for help about what values to change in the automatically-produced code. I also set the width and height to 100% for the same effect attained in the first half of the tutorial (making Flash occupy the whole browser window).
Your Flash application should now support true 100% fullscreen. This effect can be viewed bellow. Follow the link in the picture to view the final result in action.
Conclusions and Limitations
Besides the already mentioned limitations there are also other caveats when using fullscreen mode. Fullscreen introduces some security risks and Adobe wanted to make sure that all grounds were covered.
One drawback appears when the movie enters in fullscreen mode and a dialog box appears telling the user how he can exit from fullscreen mode (this dialog will then fade out).
Another perhaps more serious issue is that the user won't be able to enter text in input fields while in fullscreen - all keyboard input is disabled (except for exiting fullscreen mode).
The last problem that could arise is when a user disables the fullscreen mode for all his Flash movies. This should be a minor issue as it requires a more advanced configuration of the Flash Player.
Resources
Comments
10:25 23-04-2008nunof
The first part is simple HTML and CSS, independent of where you do it. I do not want it to be tied to specific applications.The second part can only be done through ActionScript.
16:43 24-04-2008YESS
yes works for me... i little tricky but yes i was looking for this script so long really thx01:34 02-05-2008Dylan
Been looking for this forever! THKS! :-)11:20 01-02-2009Anaky
Finally a code that really works !!!Great job and thank you for the help.
10:40 08-03-2009kreviii
what if you need to have a minimum height in which scrolling (in html ) kicks in01:00 25-03-2009hendrik1
I hope i like this12:32 08-05-2009Ronnie
Hi, could you please tell me how do i play a flash stream (flv) video on this full screen browser!12:45 08-05-2009Ronnie
Hello again, i just don't want the toggle btn, when ever the file executed that will be open in full screen mode, so that i can put my flv video file into it. please help me pal!02:50 14-09-2009Michael
Hey Your script is good but why my Internet Explorer do not want to open my html file?Thanks
15:13 14-09-2009nunof
Hi Michael,Do you have more information about your issue?
Maybe it is related to security settings, if you're trying to open up the file locally.
01:55 29-09-2009Diego
Great article, thanks!But I really need my users to be able to chat while playing in full screen.
Is there a way I can do this?
01:48 01-10-2009pissed
THIS DOESN'T WORK AT ALL... I've fkt with it for hours... nothing I do makes it right..... I even ripped this .swf back to a an .fla only to see he has some fkt up .as file controlling it all. DUDE if you want to show us.. give source .fla file. Backwards engineering is the only way I'm gonna figure this out.18:08 03-10-2009nunof
Have you tried downloading the source code that is available through the download link that has always been at the top?12:05 15-11-2009domi7777
a huge thx for ur great tutorials !they've been really usefull to me
19:44 09-12-2009Cole
Awesome. Thanks for the example here!Oh and don't you just love the comment by 'pissed' lol.
05:20 10-12-2009Cole
I am wanting to add a 'fullscreen' capability to an existing site. The existing site is flash ver. 9.0 and actionscript 2.0. I tried and tried and cannot get this to work.I found the event.MOUSE_UP needed to be MouseUp event for using actionscript 2.0.
Does this code need to be different to work with as2.0 ?
help please thank you
08:36 10-12-2009nunof
Yes, you will probably need to adapt this for different versions of ActionScript.I do not know the exact requirements but it shouldn't be too different.
21:41 26-12-2009Ejiro
Interesting, but how can i make a flash movie full screen( in flash player i.e taking over my desktop)....'thanks.22:05 26-12-2009nunof
That should be achieved with the second part of this tutorial.12:09 21-01-2010DUkati
Great tutorial.Is there a way to scale properly? My image height and with in 500 pixels. However in full screen mode it looks out of proportion. Image stretches too much. Anyway to avoid that? I want to keep 1:1 scale.
Thank you
16:30 21-01-2010nunof
Dear DUkati,You have to do something similar as specified in:
http://blog.fryewiles.com/design/07-14-2008/proportional-image-scaling-in-full-browser-flash
http://www.ultrashock.com/forums/flash-professional/full-screen-proportional-87096.html
Best regards,
Nuno Freitas
00:55 23-05-2010pirco
saw the two links about scaling in proportion... but I'd like to set the Stage.scaleMode according to fullscreen mode.so when fullScreen is on, I'd like the content to be in scaleMode="showAll" but when it's NOT in fullScreen, the content should be in scaleMode="noScale".
I have a toggle button that does this great (sets fullscreen mode and scalemode) but when the user hits the escape button (in full screen mode) the window minimizes but scaleMode stays the same.
I use a listener function to check fullScreen mode but somehow it's not working right. after 3 hours of trying, I thought I ask for help.
can you?
06:37 23-04-2008Sam_Animal
I saw this referenced at http://www.SubliminalMessages.Com and just wanted to add that in FP, Expression Web or DW, there is a 100% width and height option that is probably muhch easier than what is stated above.