Directory Structure

LG uses a defined structure. The only optional structure base would be the public directory with the exception of the flash directory.

  • helloworld/ – The root directory.
    • source/ – Source files.
      • Main.as – Custom shell script.
      • com/ – Any custom components can be saved in the com dir.
        • view/ – Contains the custom pages.
          • homePage.as – Source file for a custom page.
    • public/ – World readable directory that is visible to the public
      • index.html – Initial page.
      • img – Images for your HTML pages.
      • js – Javascript files for your HTML pages.
      • css – CSS files for your HTML pages.
      • flash – Contains all your flash files. This would also be your basePath.
        • Main.swf – The main swf.
        • IMG – External images.
        • SWF – External swf files including external fonts.
        • XML – Contains all the data.
          • control.xml – XML with shell data
          • Pages
            • homePage.xml – XML with page data.

 

Main.as

Let’s start with the Main.as file. This calss will connect the Shell class to the FLA. In your FLA, you will have to identify the class. Set the class property, Properties > Publish > Class, to Main. Now unless you want to add components and fonts into your library, you do not need to use the Flash IDE other than to publish.

The Main class is quite simple. It imports the views (or pages) and defines the shell. Next we extend the Shell class to gain access to the shell functions. Define the first page, or the homePage. You will need to define each page, otherwise the dynamic importing will break. The name of the variable does not matter.

Debugging

If you would like detailed debugging, you can turn it on in the initial function. The debugger used is De MonsterDebugger. The client is an AIR app which can be downloaded here. It can be turned on in the Shell, Page, and Element classes by calling, console.on(). Tracing can be triggered using, console.log(‘Test’). Anything sent to console.log is sent to the debugger as well as the output window in the Flash IDE.

The last and most important call is to load the shell data, or the control.xml file. This file contains the pages that are in the site. Each page xml is then loaded. Since each page xml contains the elements, each element is loaded. By default, this xml file is set to the relative path, XML/control.xml. If run out of the IDE and inside the index.html page, the path is defined by the control variable. You may also include the basePath variable.

package {
	//Pages
	import com.view.*;

	//LG
	import lg.flash.shell.Shell;

	//Extend the shell class
	public class Main extends Shell {
		private var home:homePage;

		public function Main() {
			//debug.on();
			load(control);
		}
	}
}

 

control.xml

The shell xml sets up all the pages as well as stage properties.

<?xml version="1.0" encoding="UTF-8"?>
<LG siteName="Hello World" width="950" height="450" load="all" background="IMG/bg.jpg">
	<throbber color="0xffffff"/>
	<page id="home" title="Home" horizontalCenter="true"/>
</LG>

Attributes

  • width – Width of the stage.
  • height – Height of the stage.
  • load – Specifies the type of loading. There are two options, all and first. All will load all pages before the first page is shown. First will only load the first page, additional pages will be loaded on demand.
  • background – An image to be set in the background of all your pages. In certain cases, can be used instead of wmode=transparent, which is very expensive on memory.


Throbber
The throbber is a great way to let users know the page is loading and not frozen. The throbber is an optional node in the xml. If it is specified, a throbber will be shown. The attributes for the throbber are:

  • color – The color of the throbber. default: 0×808080.
  • speed – Speed the throbber rotates in milliseconds. default: 1000.
  • leafSize – Width of each leaf in pixels. default: 4.
  • leafCount – Number of leafs in the throbber. default: 10.
  • leafRadius – Length of each leaf in pixels. default: 12.


Pages
Each page requires a node in the control.xml file. The most important part of each page node is the id. The naming schema of the files must coordinate with this id. Source files should be saved as idPage.as and the xml as idPage.xml in the directories specified above. Pages similar to the Elements. Both use the Sprite class as a base except Pages use the PageEvent instead of the ElementEvent. All the attributes of a page node are basically the object properties that create the Page. So, each node is basically, Page(obj). You can add any attributes defined in the Page class in the node.

  • id – (required) Unique name to identify the page.
  • title – Title of the page.
  • horizontalCenter – Center the page horizontally within the stage.
  • verticalCenter – Center the page vertically within the stage.


 

homePage.xml

Each page requires an XML file to define it. Its only purpose is to define any elements used on the page. There are eight types of nodes, one for each element plus an object node. They include: flash, image, shape, sound, space, text, video, and object. The nodes are grouped into an object and used to create an element.

<?xml version="1.0" encoding="UTF-8"?>
<LG>
	<image id="imgLogo" x="450" y="50" src="IMG/logo.png"/>
	<text id="txtIntro" x="0" y="75" width="950" size="38" color="0xffffff" align="center">Example</text>
</LG>

So, to create an image, we can define all the necessary attributes in the node. This would be the same as Image(obj), where the obj properties are the node attributes. All public properties of the Image and Sprite classes may be used as attributes. Custom attributes may be used as well and will be stored in the data property of the image. The only node that will use a value for the node is the text node. The value of this node will be the actual text of the textfield. The other unique node would be the object node. This node does not create an element, just an object of any attributes. Great way to pull in data.

 

homePage.as

We are now ready for the last part, making the page interactive. Each page not only requires an associated xml file, but a source file as well. The source file has the same naming schema as the xml, idPage.as. Pages have three parts: main, initialization, and start.

  1. The first one is easy. In the main function, you must call super(obj) to create the actual page, nothing else.
  2. The second is the init function. This is where you will want to setup all your elements, event listeners, animations, etc. In the example below, we change the content from “Example” to “New Content”. You must call the function, finished() when complete. Although this is mostly called after initialization, you can call it anywhere on the page. A good scenario would be on completion of loading an additional external file. The finished function lets the shell know that the page is now completely loaded and will go on to load the next page.
  3. When a page is opened, the start function is called. This should be where your animations start.


Now you are probably asking where your elements are? They can be referenced just like you would reference a jQuery element, $(‘#id). The pound (#) represents a reference by id. You can also reference a group of elements using, $(‘[attribute:value]‘). This will return an array of the elements that match the attribute/value pair.

package com.view {
	//LG
	import lg.flash.view.Page;

	public class homePage extends Page {
		public function homePage(obj:Object) {
			super(obj);
		}

		public override function init():void {
			//Intro
			$('#txtIntro').text	= 'New Content';
			finished();
		}

		public override function start():void {
			$('#imgLogo').show(1);
		}
	}
}

 

Extras

Accessing the Shell

The shell can be accessed by the data.shell property in each element.

URL Query Parameters

These parameters may be accessed from the data.queryParams property within each element and page.