Full
Screen Flash
Page
by michael chen | 27 December 2004
A simple tutorial to teach you how
to create full screen Flash page within a HTML page. This
tutorial may be a bit different from the usual full screen
effects you've seen. It doesn't scale the height and width of
the Flash file, but merely expands the Flash page without
scaling the elements inside. Thus if your using pixel fonts the
text will still remain clear and crisp.
In this tutorial we'll be using Flash MX 2004 as well as a bit
of CSS to get rid of the default margin value.
Click here to see the
final outcome.
Let's begin
-
Open any file in
Flash.
-
Go to
File > Publish Settings. Select
the HTML tab.
-
Click the
Dimensions drop down box. Select
Percent and type 100 for the Width and Height.
-
Click the Scale
drop down box and select No scale.
-
Click Publish
to publish the files.
[ Screenshot of
the Publish Setting in Flash MX 2004. ]
-
You should have two new files
now, a SWF and a HTML file.
The code for the HTML file should look similar to this:
- <!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en">
- <head>
- <meta
http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1" />
- <title>myfile</title>
- </head>
- <body
bgcolor="#ffffff">
- <!--url's
used in
the movie-->
- <!--text
used in
the movie-->
- <object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="100%"
height="100%"
id="myfile"
align="middle">
- <param
name="allowScriptAccess"
value="sameDomain"
/>
- <param
name="movie"
value="myfile.swf"
/>
- <param
name="quality"
value="high"
/>
- <param
name="scale"
value="noscale"
/>
- <param
name="bgcolor"
value="#ffffff"
/>
- <embed
src="myfile.swf"
quality="high"
scale="noscale"
bgcolor="#ffffff"
width="100%"
height="100%"
name="myfile"
align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go
/getflashplayer"
/>
- </object>
- </body>
- </html>
[ Code for the
HTML file. ]
- This part is optional.
Most browsers set a default value for the
margin which often isn't zero, therefore we're going
to use CSS to set it to zero.
The code is quite self
explanatory. It means set the height and width to 100% and
set the margin value to 0. Add this piece of CSS code into
the HTML file (inside the head tag).
- <style
type="text/css">
- <!--
- body
{
- height:
100%;
- width:
100%;
- margin:
0;
- }
- -->
- </style>
[ Copy and paste
the above code between the head tags. ]
|
Note |
|
That's it! I hope
you enjoyed the tutorial. If you had any problems with creating
the files above or didn't quite understand something. Here is a
zip file containing the FLA, SWF and HTML file.
If you have any
questions, feel free to post them at the
Kirupa Forum.
Michael Chen
Ziggy Studio
|