Image Gallery – Part V – Full Screen

Full screen capabilities with the click of a button, added a new class FullScreenButton.as and modified Main.as. ( Don’t forget the ALLOWFULLSCREEN parameter in your html document needs to be set to TRUE – you can toggle this capability in your Publish Settings as well ) – just click the grey rectangle to toggle fullscreen mode

Fullscreen Class – FullScreenButton.as – nothing sexy here, but it does the trick.

package
{
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.display.StageDisplayState;
	import flash.events.Event;
	import flash.events.FullScreenEvent;
	import flash.events.MouseEvent;

	public class FullScreenButton extends Sprite
	{
		private var myFullScreenButton:Shape;
		private var myButtonHolder:Sprite;

		public function FullScreenButton()
		{
			addEventListener ( Event.ADDED_TO_STAGE, init );
		}

		private function init ( e:Event ):void
		{
			removeEventListener ( Event.ADDED_TO_STAGE, init );

			// create the button.. just a non glamorous red box
            myFullScreenButton = new Shape();
            myFullScreenButton.graphics.beginFill(0xcccccc);
            myFullScreenButton.graphics.drawRect(100, 100, 100, 20);
            myFullScreenButton.graphics.endFill();  

			myButtonHolder = new Sprite();
			addChild ( myButtonHolder );
			myButtonHolder.addChild( myFullScreenButton );

			myButtonHolder.addEventListener( MouseEvent.MOUSE_DOWN, toggleScreen );

		}

		private function toggleScreen(m:MouseEvent):void
		{
			// Enable and disable the context menu items based on what mode we are in.
			if (stage.displayState == StageDisplayState.NORMAL)
			{
				// Go Full Screen Option Selected
				stage.displayState = StageDisplayState.FULL_SCREEN;
			}
			else
			{
				// Exit Full Screen Option Selected
				stage.displayState = StageDisplayState.NORMAL;
			}
		}
	}
}

and the modifications to the Main Document Class – Main.as

package
{
	import flash.display.Sprite;
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.events.Event;
	import flash.events.KeyboardEvent;

	public class Main extends Sprite
	{
		private var GalleryImagesArr:Array;
		private var CatGallery:ImageGallery;
		private var theater:Sprite;
		private var myXMLFile:LoadXML;
		private var ct:Number = 0;
		private var c:Number = 0;
		private var imgCategory:XMLList;
        private var imgThumbnail:XMLList;
        private var imgLarge:XMLList;
		private var xmlImages:Array;
		private var categoryArr:Array;
		private var myHook:Array;
		private var fsb:FullScreenButton;

		public function Main()
		{
			theater = new Sprite();
			addChild ( theater );

			LoadXMLFile();
		}

		private function LoadXMLFile():void
		{
			myXMLFile = new LoadXML ( "http://manewc.com/projects/flash/xml/images.xml" );
			addChild ( myXMLFile );

			// setup the listener for detecting when xml file is loaded
			myXMLFile.addEventListener ( Event.ENTER_FRAME, LoadXMLCheck );
		}

		private function LoadXMLCheck( e:Event ):void
		{
			if ( e.currentTarget.LoadComplete() )
			{
				// XML FILE LOADED - clean up
				e.currentTarget.removeEventListener ( Event.ENTER_FRAME, LoadXMLCheck );

				// let's parse the xml
				ParseXML ( e.currentTarget.GetXML() );
			}
		}

		private function ParseXML ( xml:XML ):void
		{
			// Gather the attribute data
			var imgCategory:XMLList =  myXMLFile.xml.page.@id;
            var imgThumbnail:XMLList = myXMLFile.xml.page.image.@thumbnail;
            var imgLarge:XMLList =  myXMLFile.xml.page.image.@large;  

  			xmlImages = new Array();
			categoryArr = new Array();

            for each (var thePage:XML in imgCategory)
            {
				categoryArr.push ( imgCategory[ct] );

				for each ( var theImage:XML in xml.page[ct].image )
				{
					xmlImages[c] = new Array ( imgThumbnail[c],imgLarge[c],imgCategory[ct] );

					c++;
				}

                ct++;
            }

			initStage()
		}

		private function ParseArray ( hook:String )
		{
			if ( GalleryImagesArr ) GalleryImagesArr.splice();

			GalleryImagesArr = new Array();

			for ( var d:uint = 0; d < xmlImages.length; d++ )
			{
				if ( xmlImages[d][2] == hook )
				{
					GalleryImagesArr.push ( new Array(xmlImages[d][0],xmlImages[d][1]) );
				}
			}

			return GalleryImagesArr;
		}

		private function initStage():void
		{
			// set the gallery
			categoryTwo();

			// add the Full Screen Button
			fsb = new FullScreenButton();
			fsb.x = stage.stageWidth - 210;
			fsb.y = stage.stageHeight - 230;
			addChild ( fsb );

			// set the listener
			stage.addEventListener ( KeyboardEvent.KEY_DOWN, changeCategory );
		}

		private function categoryOne():void
		{
			myHook = ParseArray("Category1");

			CatGallery = new ImageGallery ( myHook );
			theater.addChild ( CatGallery );
		}

		private function categoryTwo():void
		{
			myHook = ParseArray("Category2");

			CatGallery = new ImageGallery ( myHook );
			theater.addChild ( CatGallery );
		}

		private function changeCategory ( k:KeyboardEvent ):void
		{
			if ( k.keyCode == 49 )
			{
				cleanChildren();
				categoryOne();
			}
			else if ( k.keyCode == 50 )
			{
				cleanChildren();
				categoryTwo();
			}
		}

		private var theaterArr:Array;
		private var childrenArr:Array;

		private function cleanChildren()
		{
			// get children
			theaterArr = traceChildren ( theater );

			// find children, if exist then delete
			for ( var t:uint = 0; t < theaterArr.length; t++ )
			{
				if ( theaterArr[t] == "[object ImageGallery]" )
				{
					theater.removeChild( theaterArr[t] );
					theaterArr[t] = null;
				}
			}
		}

		private function traceChildren(d:Sprite)
        {
			childrenArr = new Array();

            for ( var k:uint; k < d.numChildren; k++ )
            {
                var o:DisplayObject = d.getChildAt(k);  

                if ( o is DisplayObjectContainer )
                {
                    childrenArr.push ( o );
                }
                else
                {
					// childrenArr.push ( "" );
                }
            }

			return childrenArr;

        }
	}
}