Home » ActionScript 3.0, Adobe, Flash AS 3

FullScreen in Flash CS4 / AS3

16 August 2009 4 Comments

In our community forum many people asked us info about the fullscreen feature, so following a quick sample to use it in Flash CS 3/4 and ActionScript 3.0.

To enabled / disable it you just need too:

1) Modify the displayState property to StageDisplayState.FULL_SCREEN costant to enable it, and to StageDisplayState.NORMAL to come back to “normal” modality
2) Enable the ‘allowfullscreen’ attribute in your html code

Click on the button below to try it:

This movie requires Flash Player 10

Read the post to get the source code

How create a FullScreen button

The script is quite simple and is fullCommented.
You just need to create a Flash CS3/4 ActionScript 3.0 file and link the document Class to the FullScreenMain.as class.
We add to the display list a Button Flash Component, so we need to import its assets to the .fla dragging it from the Component panel to the library.

FullScreenMain.as

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

package {
 
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.StageDisplayState
 
	import fl.controls.Button;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.FullScreenEvent;
 
 
	public class FullScreenMain extends MovieClip {
 
		// The FullScreen Button
		private var fullScreen_btn:Button;
 
		// Save the fullScreen status
		private var fullScreenStatus:Boolean;		
 
 
		/**
		* Constructor
		*/
		public function FullScreenMain() {
 
			// Create the FullScreen Button (add to the .fla library the button component assets)
			fullScreen_btn = new Button();
			fullScreen_btn.label = "Enable FULL_SCREEN";
			fullScreen_btn.width = 150;
			fullScreen_btn.x = 120;
			fullScreen_btn.y = 50;
			addChild(fullScreen_btn)
 
 
			// Set NO_SCALE because we don't want that when fullscreen is enable movieclips are scaled too
			var swfStage:Stage = this.stage;
			swfStage.scaleMode = StageScaleMode.NO_SCALE;
			swfStage.align = StageAlign.TOP_LEFT;
 
			// Registriamo un listener per la modalità FULLSCREEN:
 
			// Listener for FullScreen Button
			fullScreen_btn.addEventListener(MouseEvent.CLICK, changefullScreenStatus)
 
 
			// Listener for FullScreen event. It's invoked every time the 'displayState' property change
			fullScreen_btn.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenRedraw);
 
 
		}
 
 
 
 
 
		/**
		* Check the fullScreenStatus and Enabled / Disable the FullScreen
		*/
		private function changefullScreenStatus(e:MouseEvent):void 
		{
			// Disable FullScreen if enabled, and viceversa
			if(fullScreenStatus)
				fullScreen_btn.stage.displayState = StageDisplayState.NORMAL;
			else
				fullScreen_btn.stage.displayState = StageDisplayState.FULL_SCREEN;
 
 
		}
 
		/*
		* Invoked at every 'displayState' property change
		*/
		function fullScreenRedraw(event:FullScreenEvent):void
		{
			// Check if fullScreen is enabled and uptades properties
			if (event.fullScreen)
			{
				fullScreen_btn.label = "Disable FULL_SCREEN";
				fullScreenStatus = true;
			}
			else
			{
				fullScreen_btn.label = "Enable FULL_SCREEN";
				fullScreenStatus = false;
			}
 
		}
 
 
	}
}

HTML Code

1
2
3
4
5
6
7
8
9

<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="550" height="400" id="01" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="movie" value="index.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />	
 
<embed src="index.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="01" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>





Download Source Code (.fla, .as and html files)






4 Comments »

  • peter said:

    Hi,
    Does the above also scale up the content of the flash movie or is it just the stage area/viewport that gets expanded. E.g., can I use the above fullscreen code to automatically provide larger images in an image gallery?
    Ciao!
    /Peter

    # 13 December 2009 at 12:54
  • Fabio Biondi (author) said:

    eh no … to accomplish what you’re asking me you should manage the resize Event and fix the image dimensions every time the event is fired. If you will do it, when you’ll enable the Fullscreen mode, the image will resize too in according with the stage dimension.

    So, manage full screen images, is completly another task to manage in a different way….

    F.

    # 13 December 2009 at 14:22
  • Miguel said:

    Ciao Fabio, scusa il disturbo, io vorrei avere un full screen ma non scalare le misure del swf, non so’ se mi spiego bene, cio’e, ho un swf di 700×300 e quando apro il HTML vorrei que la schermata fosse full screen, ma il swf restase 700 x 300.
    Se mi sono spiegato e hai qualche dritta ti ringraziero’ moltissimo.

    Ciao

    miguel

    P.S. Uso CS4 ed AS3

    # 28 July 2010 at 06:30
  • Fabio Biondi (author) said:

    Ciao Miguel,

    prova ad inserire il seguente codice nel costruttore della document class (o nel primo frame del tuo .fla, dipende da come lavori)

    this.stage.align = StageAlign.TOP_LEFT
    this.stage.scaleMode = StageScaleMode.NO_SCALE;

    Puoi anche cambiare il tipo di allineamento a seconda delle tue esigenze.

    Inoltre devi andare nel menu File –> Publish Settings –> Scheda HTML e imposta il parametro “Dimension” a “Percent” settando width e height al 100%

    Se poi vorrai riposizionare i tuoi elementi per centrarli o allinearli a sinistra o destra potrai usare un codice simile al seguente:

    this.addEventListener(Event.RESIZE, onResize)

    private function onResize(e:Event=null):void
    {
    // allineamento centrale
    oggetto1.x = this.stage.stageWidth/2 - oggeetto1.width/2

    // allineamento a destra
    oggetto2.x = this.stage.stageWidth - oggetto2.width

    // allineamento a sinistra
    oggetto3.x = 0
    }

    # 29 July 2010 at 00:09

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.