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.
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.