Since the Flash Player 9,0,28,0 update, flash applets can go to true full-screen. There are no fancy javascript hacks needed either. Users can toggle between normal size and fullscreen with a simple click, which can toggle Stage["displayState"] from “normal” to “fullScreen”. The param allow FullScreen must be set to true in the applet html.
Helpful Links
1
<strong><param name="allowFullScreen" value="true" /></strong>
The first thing to do is create a button and add the following code to it:
1 2 3 4 5
<ol><li class="li1"> <span class="kw3">on</span><span class="br0">(</span>press<span class="br0">)</span><span class="br0">{</span></li>
<li class="li1"> toggleFullScreen<span class="br0">(</span><span class="br0">)</span>;</li>
<li class="li1"> <span class="br0">}</span></li></ol>
The code for the function toggleFullScreen and a resize listener are placed on the main stage.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<ol><li class="li1"> //Don't scale the movie when the stage size changes</li>
<li class="li1"> Stage.<span class="kw3">scaleMode</span>=<span class="st0">"noScale"</span>;</li>
<li class="li1"> <span class="co1">//Align the stage to the top left</span></li>
<li class="li1"> <span class="kw3">Stage</span>.<span class="kw3">align</span> = <span class="st0">"TL"</span>;</li>
<li class="li2"> <span class="co1">//Function to toggle between fullscreen and normal size</span></li>
<li class="li1"> <span class="co1">//the toggle fullscreen button calls this function when pressed</span></li>
<li class="li1"> <span class="kw2">function</span> toggleFullScreen<span class="br0">(</span><span class="br0">)</span><span class="br0">{</span></li>
<li class="li1"> <span class="co1">//if normal size, go to fullscreen, else go to normal size</span></li>
<li class="li1"> <span class="kw1">if</span><span class="br0">(</span><span class="kw3">Stage</span><span class="br0">[</span><span class="st0">"displayState"</span><span class="br0">]</span>==<span class="st0">"normal"</span><span class="br0">)</span><span class="br0">{</span></li>
<li class="li2"> <span class="kw3">Stage</span><span class="br0">[</span><span class="st0">"displayState"</span><span class="br0">]</span>=<span class="st0">"fullScreen"</span>;</li>
<li class="li1"> <span class="br0">}</span><span class="kw1">else</span><span class="br0">{</span></li>
<li class="li1"> <span class="kw3">Stage</span><span class="br0">[</span><span class="st0">"displayState"</span><span class="br0">]</span>=<span class="st0">"normal"</span>;</li>
<li class="li1"> <span class="br0">}</span></li>
<li class="li1"> <span class="br0">}</span></li>
<li class="li2"> <span class="co1">//Create a listener for each time the Stage is resized</span></li>
<li class="li1"> <span class="kw2">var</span> resizeListener:<span class="kw3">Object</span> = <span class="kw2">new</span> <span class="kw3">Object</span><span class="br0">(</span><span class="br0">)</span>;</li>
<li class="li1"> <span class="co1">//Called each time the stage is resized</span></li>
<li class="li1"> resizeListener.<span class="kw3">onResize</span> = <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></li>
<li class="li1"> <span class="co1">//Move the button to the center of the screen</span></li>
<li class="li2"> toggleFullScreenButton.<span class="kw3">_x</span>=<span class="kw3">Stage</span>.<span class="kw3">width</span>/<span class="nu0">2</span>;</li>
<li class="li1"> toggleFullScreenButton.<span class="kw3">_y</span>=<span class="kw3">Stage</span>.<span class="kw3">height</span>/<span class="nu0">2</span>;</li>
<li class="li1"> <span class="br0">}</span></li>
<li class="li1"> <span class="co1">//Add the listener to Stage</span></li>
<li class="li1"> <span class="kw3">Stage</span>.<span class="kw3">addListener</span><span class="br0">(</span>resizeListener<span class="br0">)</span>;</li></ol>
Example XHTML used for this applet:
1 2 3 4 5 6 7
<strong><object data="http://www.tutorialspalace.com/wp-content/uploads/tuts-flash/flash-fullscreen/flash-fullscreen.swf" type="application/x-shockwave-flash" width="400" height="200" ><br> <param name="movie" value="http://www.tutorialspalace.com/wp-content/uploads/tuts-flash/flash-fullscreen/flash-fullscreen.swf" /><br> <param name="allowFullScreen" value="true" /><br> </object></strong>
The balls were added in to show that the stage extends to the borders of the screen, even when resized.
September 6, 2010 at 9:49 pm
Thanks for sharing code
September 6, 2010 at 11:04 pm
useful tips and tricks.
September 10, 2010 at 10:44 am
this is awesome man