Creating Full Flash Websites: Part 1

Difficulty: Medium
Creating Full Flash Websites: Part 1

This tutorial is the first part of a series of tutorials on building attractive Websites with SPAS 3.0 and the Flash Platform (Both Flash and Flex environments).

In this first article of the series, we will discuss how to structure your Flash Application in order to have maximum flexibility to deploy an HTML-like Website.

The second article of the series will show how to integrate HTML rendered texts in our Flash-based Website. The third one will focus on dynamic pages display and how to improve the SEO of our Website.

What we are going to do now is to create a Website Skeleton with Flash, based upon an existing HTML/CSS template.

Using external CSS files with SPAS

First of all, let's create a Document class called Website (see: Creating a main application container) and a main function we use as application entry point (see: Working with the Application entry point):

package {
	
	import org.flashapi.swing.*;
	
	public class Website extends Application {
		
		public function WebSite():void { super(main); }
		
		private function main():void {
		}
	}
}

Save the WebSite.as file at the root of your project and then create a "template" folder. In the template folder, just add a CSS file called style.css, with the following rules (see: Applying styles to the application container):

body{
	align:top center;
	visibility:visible;
	gradient:true;
	gradient-colors:#006666 #5da3b7;
}

Now we have the basic structure of the SPAS application we could apply styles by using the Application class styleSheet property:

private function main():void {
	this.styleSheet  = "template/style.css";
}

But SPAS 3.0 provides an internal structure to prevent the creation of the user interface until the CSS file has not been totally loaded. The waitForStyleInit() function accepts 2 parameters: the CSS file URL and a reference to a callback method that will be called once the CSS file is loaded. So, let's define a function called createUI; in our project, the code for the creation of the Website UI has to placed in this method:

private function main():void {
	// External CSS style loading
	this.waitForStyleInit("template/style.css", createUI);
}

private function createUI():void {
	// Creation of the Website User Interface...
}

Building the Website UI

If we have a look at the base template we can see that the layout is quite simple. It can be reduced to a main page, with a fixed width, that contains all the elements displayed in a vertical-stack-architecture. To reproduce this architecture we will simply use a Box class instance with width set to 610 pixels, autoHeigth property set to true and a vertical flow layout orientation. To declare these setting in our CSS file, we can use a Unique Identifier to the Box instance, just like we do in HTML.

Don't forget to declare the _mainPage private property in your ActionScript code.

private var _mainPage:Box;
private function createUI():void {
	_mainPage = new Box();
	_mainPage.id = "mainPage";
	this.addElement(_mainPage);
}

And the corresponding CSS rules for this piece of code are:

#mainPage {
	width:610;
	height:auto;
	shadow:true;
	layout-orientation:vertical;
	margin-top:5;
}

According to the preceding point and the basics of HTML design, we just have to include the following SPAS 3.0 elements to reproduce the base template:

  • a Heading instance for the top-of-page company name,
  • a Canvas instance to hold the header image,
  • a simple Panel instance to hold the navigation bar,
  • a LinkBar instance to create the navigation bar,
  • another Panel instance to hold the footer copyright,
  • and a Label instance to display the copyright text.

In this tutorial, we are going to use a Text instance to represent the HTML text content. But in the second tutorial we will take advantage of the Text Layout Framework to improve the rendering of our HTML field.

This nested HTML-like architecture is declared in the createUI() method reproduced below:

private function createUI():void {
	_mainPage = new Box();
	_mainPage.id = "mainPage";
	_compName = new Heading("Your Company");
	_compName.id = "compName";
	_header = new Canvas();
	_header.id = "header";
	_header.addElement("template/header.gif");
	_linkCont = new Panel();
	_linkCont.id = "linkCont";
	_menu = new LinkBar();
	_linkCont.addElement(_menu);
	_textContent = new Text();
	_footerCont = new Box();
	_footerCont.id = "footerCont";
	_copyright = new Label("\u00A9 2010, Your Company.");
	_copyright.id = "copyright";
	_footerCont.addElement(_copyright);
	_mainPage.addGraphicElements(_compName, _header, _linkCont, _textContent, _footerCont);
	this.addElement(_mainPage);
}

As you can see, each object has a unique identifier. The best way to design RIAs with SPAS 3.0 is to add UIObjects into your application and to improve the visual display of these elements by setting their graphical properties from external CSS files.

External CSS rules can be set at runtime if the application has been compiled as a SWF file.

And here is the complete CSS file used to reproduced the base template:

body{
	align:top center;
	visibility:visible;
	gradient:true;
	gradient-colors:#006666 #5da3b7;
}
linkBarItem {
	highlight-opacity:0;
}
linkBarItem:up {
	font-color:white;
	text-decoration:underline;
}
linkBarItem:over {
	font-color:#006600;
	text-decoration:none;
}
#mainPage {
	width:610;
	height:auto;
	shadow:true;
	layout-orientation:vertical;
	margin-top:5;
}
#compName {
	width:parent;
	text-align:center;
	font-color:navy;
	font-size:28;
	font-weight:bold;
}
#header {
	width:600;
	height:150;
}
#linkCont {
	width:parent;
	height:40;
	color:#00CC00;
	corner-radius:0;
	layout-alignment:center;
}
#footerCont {
	margin-top:20;
	width:parent;
	height:auto;
	border-style:none;
	color:#009900;
	padding:0;
	layout-alignment:center;
}
#copyright {
	font-color:white;
	font-size:10;
}

Populating the navigation bar menu

The last thing to do to get a full Website skeleton is to populate the navigation bar. As we said before, the purpose of this series of tutorials is to create a dynamic Website. For that reason, we will use an external configuration file to populate the menu. SPAS 3.0 provides an easy-to-use mechanism to populate list objects from external XML files. Each list object, such as list boxes or link bars, has a xmlQuery property which can be set with a XMLQuery instance. XMLQuery objects deal with the loading of XML data set and automatically populate the list objects they are binded with.

The following XML file contains the minimal structure for building the menu of our Website:

<?xml version="1.0" encoding="iso-8859-15"?>
<XMLQuery>
	<item label="Home" />
	<item label="Solutions" />
	<item label="Webdesign" />
	<item label="Webpublishing" />
	<item label="Freeware" />
	<item label="Contact" />
</XMLQuery>

The only thing you have to do is to save it at the root of the site with the name menu.xml.

Now we can create a new XMLQuery instance called _menuData and declare the populateMenu() function. (Remember that XMLQuery objects are located inside the org.flashapi.swing.databinding package.)

We link the menu object xmlQuery property with the newly created XMLQuery instance and we use the XMLQuery class load() method to automatically set external menu data at runtime:

private var _menuData:XMLQuery;
private function populateMenu():void {
	_menuData = new XMLQuery();
	_menu.xmlQuery = _menuData;
	_menuData.load("menu.xml");
}

To populate the menu, we call the populateMenu() function at the end of the createUI() method.

Result

By now, our Website skeleton is finished. The full code should look like the following one:

package {
	
	import org.flashapi.swing.*;
	import org.flashapi.swing.databinding.*;
	
	public class WebSite extends Application {
		
		public function WebSite():void {
			super(main);
		}
		
		private var _menuData:XMLQuery;
		private var _mainPage:Box;
		private var _compName:Heading;
		private var _header:Canvas;
		private var _menu:LinkBar;
		private var _linkCont:Panel;
		private var _textContent:Text;
		private var _footerCont:Box;
		private var _copyright:Label;
		
		private function main():void {
			this.waitForStyleInit("template/style.css", createUI);
		}
		
		private function createUI():void {
			_mainPage = new Box();
			_mainPage.id = "mainPage";
			_compName = new Heading("Your Company");
			_compName.id = "compName";
			_header = new Canvas();
			_header.id = "header";
			_header.addElement("template/header.gif");
			_linkCont = new Panel();
			_linkCont.id = "linkCont";
			_menu = new LinkBar();
			_linkCont.addElement(_menu);
			_textContent = new Text();
			_footerCont = new Box();
			_footerCont.id = "footerCont";
			_copyright = new Label("\u00A9 2010, Your Company.");
			_copyright.id = "copyright";
			_footerCont.addElement(_copyright);
			_mainPage.addGraphicElements(_compName, _header, _linkCont, _textContent, _footerCont);
			this.addElement(_mainPage);
			this.populateMenu();
		}
		
		private function populateMenu():void {
			_menuData = new XMLQuery();
			_menu.xmlQuery = _menuData;
			_menuData.load("menu.xml");
		}
	}
}

Once it has been compiled, your web site should look like this one: Full Flash Website

What is next?

As mentioned at the beginning of this tutorial, the next article will discuss about how to render text content with the Text Layout Framework exactly as we could do with an HTML basic Website.

Sample source code

Download the source code for this tutorial (Zip file, 62Ko)

Share this article:

Comments:

By R Rockafellow2011-01-05 20:34:47
Trying to add an event listener to handle a mouse click on the nav menu(LinkBar).However it returns a value of null when trying to get the itemPressed value from the ListEvent.-----------eventCollector.addEvent(_menu,ListEvent.ITEM_CLICKED, onMenuClick)}private function onMenuClick(evt:ListEvent):void{trace("item clicked: " evt.itemPressed);}
By Pascal2011-01-05 21:07:50
The ListEvent.ITEM_CLICKED is not implementd yet by all Listable objects. You should use the ListEvent.LIST_CHANGED event instead. Please add this issue to the bug tracker if you want to see this functionality in the next release.
By romeo2011-03-29 04:50:57
I tried SPAS and do the tutorials. But i could not get it to work like the one at http://www.flashapi.org/tutorials/creating-full-flash-website/index.html

Leave a reply

Your email is required but will not be displayed.

To prevent abusive emails, please enter the numbers you see in the image below:

Security code