I wrote about full screen support in flash, a long time back in Nov ‘06 (see that post here). I have been planning to write one myself. So finally i got myself down to write it. Before i put you through the app, some details on the API.
To make your application have a fullscreen support you need to do the following things.
1) Have the latest Flash Player (get it here)
2) Use the new Full Screen API
import flash.display.StageDisplayState into your Application and set the displayState of the stage. I have the following function toggling the FullScreen feature. “fsChk” is a CheckBox, based on which I’m toggling the functionality
private function toggleFullScreen():void{
stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);
if(fsChk.selected) {
stage.displayState = StageDisplayState.FULL_SCREEN}else {
stage.displayState = StageDisplayState.NORMAL}
}
3) Update the html-template in which you have the flash App
In the object & embed parts of the html code of the page in which the flash app is inserted, you need to add a new parameter allowFullScreen to true. You can refer the source of the app and view the html for details.
If you want to know more about this feature, refer the Adobe DevCenter article on the same or view the PDF that i have created, collating all that information.
Now the Application. This is just a small video player which can go full screen by checking a Flex CheckBox. This is written in Flex2.0 and you can find all the source files here…
Click here to view the Application
(confirm that you have the latest Flash player)
P.S – I have muted the video to start with, un-mute it if it pleases you 
Update March 07 2008: A lot of people have complained that they got a security error when they tried using the code above. Here is a post articulating the problem and the solution.
March 6, 2007 at 7:02 pm |
Hey there,
Thanks for the info, but I’m getting nothing from this link:
http://www.cetec77.com/kannan/FSVideo/JustFullScreen.html
Mac OSX 10.4.8
Firefox 2.0.0.2
Thoughts?
ken
March 7, 2007 at 5:43 am |
Hi Ken,
I tried it on my mac and it works. I have a MAC 10.4.8 with Firefox 1.5.0.10
Looks like the player detection code is not properly put in… See if you have the latest player. If it still persists, drop me a mail at “rrao at adobe dot com”
March 7, 2007 at 5:44 am |
I’ll try to put my player detection code in palce by then
July 8, 2007 at 8:25 pm |
To solve the problem you can use the applicationComplete event instead of creationComplete.
October 4, 2007 at 4:51 am |
Hi Raghu,
I’m trying to run this application and whenever i click on checkbox i’m getting the Alert with the following error.Can you please explain me the solution for this problem.
“SecurityError: Error #2152″
kanu
October 4, 2007 at 6:17 am |
@Kanu – Do you have the right player – check it out here http://www.macromedia.com/software/flash/about/
October 30, 2007 at 5:55 am |
[...] using ContextMenu I had, long back written a post on how to take an application full screen. This is an extension to that. What I am doing is adding the “Go Full Screen” and [...]
November 12, 2007 at 7:27 am |
I have the flash player(9,0,47,0).But the fullscreen not working and it shows “SecurityError: Error #2152″.
May i know the reason why im not able to get.
March 5, 2008 at 5:29 am |
[...] I had posted a couple of posts earlier (the contextMenu based fullscreen & the fullScreenVideo) where it required you to edit the html wrapper in which the Flex App SWF is embedded. A lot of [...]
March 5, 2008 at 5:31 am |
@ oviyan/kanu – This should solve your problem
March 7, 2008 at 4:18 pm |
You require Flash player (9,0,115,0) for full screen to work
April 14, 2008 at 10:50 am |
hi,
i tried the above full screen example…but the screen is getting full screen but the size of the player remains the same…can u help?
April 14, 2008 at 11:16 am |
Hi Raghu,
does the code u wrote for full screen supports flex2?
April 14, 2008 at 12:49 pm |
i dont want the panel and videodisplay width and height to be 100%. if both are in numbers like width =400, height=400 for panel and full screen will the full screen function work?
April 15, 2008 at 5:25 am |
@ Ajay – I think it works in Flex 2 too, but you need the right player to run it
April 16, 2008 at 5:50 am |
Hello Sir,
I am using your code [JustFullScreen.mxml ]. But whenever I am running the code it is showing the run time error, pasted below. I really can’t understand the error. Can you please help me.
======================================
SecurityError: Error #2148: SWF file file:///C:/Documents and Settings/Arindam/Desktop/SUPER FLEX/flv player flex/bin/index.swf cannot access local resource file:///C:/Documents and Settings/Arindam/Desktop/SUPER FLEX/flv player flex/bin/video/c.flv. Only local-with-filesystem and trusted local SWF files may access local resources.
at flash.net::NetStream/play()
at mx.controls.videoClasses::VideoPlayer/::_play()
at mx.controls.videoClasses::VideoPlayer/::setUpStream()
at mx.controls.videoClasses::VideoPlayer/::_load()
at mx.controls.videoClasses::VideoPlayer/load()
at mx.controls::VideoDisplay/load()
at mx.controls::VideoDisplay/::autoPlaying()
at mx.controls::VideoDisplay/::creationCompleteHandler()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at mx.core::UIComponent/set initialized()
at mx.managers::LayoutManager/::doPhasedInstantiation()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/::callLaterDispatcher2()
at mx.core::UIComponent/::callLaterDispatcher()
===================================
this is my code. I just change the name of my flv source=”video.c.flv”
———————————————
“;
myVD.pause();
}
}
private function updateSlider():void {
if(!sliderPressFlag){
myHS.value = myVD.playheadTime;
}
else{
sliderPressFlag = !sliderPressFlag;
myVD.playheadTime = myHS.value;
}
}
private function muteOnOff():void{
if(mute.selected){myVD.volume = 0; }
else {myVD.volume = 0.75}
}
private function loadVideo():void{
myHS.maximum =myVD.totalTime;
}
private function toggleFullScreen():void{
try{
stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);
if(fsChk.selected) {stage.displayState = StageDisplayState.FULL_SCREEN}
else {stage.displayState = StageDisplayState.NORMAL}
}
catch(err:Error){
Alert.show(err.toString());
}
}
private function thumbPressed():void{
if(myVD.playing){
pauseFlag = true;
playpause.label = “>”;
myVD.pause();
sliderPressFlag=true; wasPlaying=true;
updateSlider();
}
}
private function thumbReleased():void{
sliderPressFlag=true; updateSlider();
}
]]>
” id=”playpause” click=”playPause()” width=”25″ height=”25″ cornerRadius=”20″/>
—————————————-
May 26, 2008 at 1:23 pm |
Hi,
can you publish the *.fla please
it would help me alot
i need to know how to make full screen work on a webpage.
July 29, 2008 at 10:26 am |
just wanted to say thank you for such and awesome post and for providing all the support and code to make this happen … Im still learning Flex and this has been invaluable to me!
Many Thanks again!
August 1, 2008 at 6:23 am |
Thanks Raghu for the post.
And for those who are getting the security error display, just add this code in four places in index.template.html in the html-template folder. This works for me
allowFullScreen=”true”
So the wrapper html will be like this :
AC_FL_RunContent(
“src”, “playerProductInstall”,
“FlashVars”, “MMredirectURL=”+MMredirectURL+’&MMplayerType=’+MMPlayerType+’&MMdoctitle=’+MMdoctitle+”",
“width”, “${width}”,
“height”, “${height}”,
“align”, “middle”,
“id”, “${application}”,
“quality”, “high”,
“bgcolor”, “${bgcolor}”,
“name”, “${application}”,
“allowScriptAccess”,”sameDomain”,
“allowFullScreen”,”true”,
“type”, “application/x-shockwave-flash”,
“pluginspage”, “http://www.adobe.com/go/getflashplayer”
);
} else if (hasRequestedVersion) {
// if we’ve detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
“src”, “${swf}”,
“width”, “${width}”,
“height”, “${height}”,
“align”, “middle”,
“id”, “${application}”,
“quality”, “high”,
“bgcolor”, “${bgcolor}”,
“name”, “${application}”,
“allowScriptAccess”,”sameDomain”,
“allowFullScreen”,”true”,
“type”, “application/x-shockwave-flash”,
“pluginspage”, “http://www.adobe.com/go/getflashplayer”
);
} else { // flash is too old or we can’t detect the plugin
var alternateContent = ‘Alternate HTML content should be placed here. ‘
+ ‘This content requires the Adobe Flash Player. ‘
+ ‘Get Flash‘;
document.write(alternateContent); // insert non-flash content
}
// –>
May 4, 2009 at 11:08 am |
Thanks a lot Raghu.
It is very useful info……
Thanks & Regards,
Venkata Reddy