Archive for the ‘SWFObject’ Category
ActionScript 3.0: how to add a fullscreen option to an FLV
with the internet connection speed quickly increasing, the option to play a video fullscreen becomes more and more important, as better videos deserve to be enjoyed in larger scales. but how to add that fullscreen option, if you set up your own Flash project?
first of all, check out this video, that can be watched in fullscreen
a simple button activates/deactivates the fullscreen state.
heres the ActionScript for the entire Flash:
import flash.display.StageDisplayState;
var _paused:Boolean = false;
play_mc.buttonMode = true;
fullscreen_mc.buttonMode = true;
play_mc.gotoAndStop(2);
fullscreen_mc.stop();
fullscreen_mc.addEventListener(MouseEvent.CLICK, fullscreenOrNot);
play_mc.addEventListener(MouseEvent.CLICK, pauseOrPlay);
videoplayer.autoRewind = true;
videoplayer.addEventListener(VideoEvent.AUTO_REWOUND, playAgain);
function playAgain(e:Event):void {
trace("starting over");
videoplayer.play();
}
function pauseOrPlay(e:MouseEvent):void {
if(_paused){
videoplayer.play();
play_mc.gotoAndStop(2);
_paused = false;
} else {
videoplayer.pause();
play_mc.gotoAndStop(1);
_paused = true;
}
}
function fullscreenOrNot(e:MouseEvent):void {
if (stage.displayState == StageDisplayState.NORMAL) {
stage.displayState = StageDisplayState.FULL_SCREEN;
} else {
stage.displayState = StageDisplayState.NORMAL;
}
}
besides setting your project up in ActionScript 3.0 you also need to add these parameters to your HTML, to allow the embedded Flash to go fullscreen:
allowFullScreen="true"
if unsure where to put this, check out the source for the linked example listed first in this post.
the Flash is embedded in HTML using SWFObject.
the video in this post was created in After Effects.
placing Flash in the middle of a HTML-page using SWFObject
if you need to publish a HTML-page, with your Flash placed in the middle, you can use this setup:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title of page</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="container_table">
<tr>
<td>
<div id="container">
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
<param name="movie" value="someswf.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="someswf.swf" width="550" height="400">
<!--<![endif]-->
<div>
<h1>Alternative content</h1>
<p><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></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</td>
</tr>
</table>
</body>
</html>
besides from this code, you need to add the following:
your someswf.swf
these need to be added too, get them from the official SWFObject-page:
swfobject.js
expressInstall.swf
and finally the CSS-file:
style.css
the style.css file looks like this:
#container_table { width: 100%; height: 100%; }
#container { width: 550px; height: 400px; margin: 0 auto; }
in this example SWFObject 2.2 was used!