PDA

View Full Version : fullscreen flash animation


arturex
12-03-2010, 08:03 PM
I am unable to show fullscreen in browser an embed flash animation on a html page generated under DW8.
Any tips ?
"allowFullScreen" value="true" is already there...

Ricky55
12-03-2010, 08:51 PM
You need to things to enable this.

You need to have:

<param name="allowfullscreen" value="true" />

In your Flash embed code and then you need some method of making Flash scale. This can be a button or the stage its self or anything else.

This code would make the swf scale when the stage is clicked.

AS3 Code


import flash.display.StageDisplayState;

stage.addEventListener(MouseEvent.CLICK, enlarge)

function enlarge(event:MouseEvent):void
{
goFullScreen();
}

function goFullScreen():void
{
if (stage.displayState == StageDisplayState.NORMAL) {
stage.displayState=StageDisplayState.FULL_SCREEN;
} else {
stage.displayState=StageDisplayState.NORMAL;
}
}

arturex
12-03-2010, 09:12 PM
Thanks.
This is what I have on a test page.
No button is inded required, just want to open the animation in brower in full screen...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>area de testes</title>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="600" height="400">
<param name="movie" value="test_area/xpto1.swf" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />

<embed src="test_area/xpto1.swf" width="600" height="400" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="true"></embed>
</object>
</body>
</html>

Ricky55
12-03-2010, 11:58 PM
Just had a look into this.

Its not possible to go into Full Screen Mode in a browser without some form of user interaction. You can in the Flash Player but not in a browser.

The usual method of doing this is to have a small button that says go full screen. So if you use the code I provided on a button this will work. Just change the event listener from the stage to a button.

I've actually just tried this myself and I could get full screen on load no problem at all when viewing locally in the Flash Player but as soon as I embedded into the browser it stopped working.

I personally think its better to have a button anyway, I think it could be a bit disconcerting for the user if their web browser just disappears and Flash content fills their screen.

Thanks

Richard

Ricky55
12-04-2010, 12:00 AM
The only other way to do this is to use scale to fit the screen but that just fills the whole of the browser window not the whole of the users screen.

arturex
12-04-2010, 11:17 AM
The only other way to do this is to use scale to fit the screen but that just fills the whole of the browser window not the whole of the users screen.

Thanks Ricky.
I have a lot to learn on this, but for the last option what should I change on the code ?
Tried setting width and heigh to 100% and doesn't work too!

Ricky55
12-04-2010, 01:28 PM
You need to set your width and height to 100%.

Then in your embed code use:


<param name="scale" value="showall" />


This will leave a border all the way around, so in your CSS use


<style type="text/css">
body {
margin: 0;
}
</style>


If you haven't already check out swfobject, this has a code generator that you can use to create the embed code. Its actually what Dreamweaver uses but it just makes it easier to make these changes.

http://code.google.com/p/swfobject/

Get the swfobject_2_2.zip and the swfobject_generator_1_2_html.zip

arturex
12-04-2010, 02:43 PM
Still unable to make it work. For sure my fault!
Pls help me and check the current hmtl code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>area de testes</title>
</head>
<body><br />
<style type="text/css">
body {
margin: 0;
}
</style>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="100%" title="teste">
<param name="movie" value="test_area/xpto1.swf" />
<param name="quality" value="high" />
<param name="allow fullscreen" value="true" />
<embed src="test_area/xpto1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100%" height="100%"> <param name="scale" value="showall" /></embed>
</object>
</body>
</html>

Ricky55
12-04-2010, 06:08 PM
You need to check your code carefully. If you download swfobject as I suggested you wouldn't be having this problem as the code would be generated for you.

You are still using


<param name="allow fullscreen" value="true" />


This needs removing, use


<param name="scale" value="showall" />


Your style is also in the wrong place

<style type="text/css"></style>

Should always be placed before the close of the </head> tag.

The full code would look like this. Make sure the swfobject.js is in the same folder as the html file if you use this code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0");
</script>

<style type="text/css">
body {
margin: 0;
}
</style>

</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent">
<param name="movie" value="test_area/xpto1.swf" />
<param name="scale" value="showall" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="test_area/xpto1.swf" width="100%" height="100%">
<param name="scale" value="showall" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>


If you still can't get it working email me the swf file to richard@qwerty-design.co.uk

Ricky55
12-06-2010, 10:51 PM
Finally the solution, all in the CSS.

For future reference this embed code with swf object will give you full browser flash in all browsers.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("flashContent", "9.0.0");
</script>

<style type="text/css">
html, body, div#flash {
height: 100%;
}

body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>

</head>
<body>
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="flashContent">
<param name="movie" value="xpto1.swf" />
<param name="scale" value="exactfit" /> <!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="xpto1.swf" width="100%" height="100%">
<param name="scale" value="exactfit" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>