* Google News *

Saturday, September 5, 2009

Full Screen Flash Page

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

  1. Open any file in Flash.

  2. Go to File > Publish Settings. Select the HTML tab.

  3. Click the Dimensions drop down box. Select Percent and type 100 for the Width and Height.

  4. Click the Scale drop down box and select No scale.

  5. Click Publish to publish the files.

[ Screenshot of the Publish Setting in Flash MX 2004. ]

  1. 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>myfiletitle>
head>
<body bgcolor="#ffffff">


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

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

style>

[ Copy and paste the above code between the head tags. ]


Note
Note that the CSS may not work in some of the older browsers since they do not support it completely. Refer to this link for more detail.

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.

Download ZIP
Posted by at
Labels: , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)