Every experienced flash designer or developer knows flash is special. It’s a half visual, half code based environment. At this time there are several ways to make complete flash projects in a pure coding IDE, but many projects are too visual and rely on Flash IDE. And even the greatest coding IDE won’t save you from the tedious work of setting up the structure of your project and handling some typical tasks like assets preloading or deep-linking.

There were some helpful libraries and frameworks but they couldn’t write the code for you and were scary for most visual arts people.

Now there is a solution that fits both designers and developers and writes at least part of the code of your project automatically. It’s named Gaia Framework.

Standart Gaia Framework workflow

1. Create new project using Gaia Framework panel.
2. Edit site.xml.
3. Scaffold using Gaia Framework panel.
4. Edit resulting flas if you are a designer or AS classes if you are a developer or do both for different pages. Don’t forget to remove scaffolding code.
5. Publish your project.

Overview of The Framework

Gaia Framework is a solution composed of AS library and a nice scaffolding engine built right inside Flash IDE as an installable extension. It supports both Actionscript 2.0 and 3.0.

The scaffolding saves a lot of time by removing a tedious and repeating steps from your work.

Out of the box you have:
- creating project structure and files automatically;
- loading and handling of different types of assets;
- deep-linking and SEO;
- cross platform middle mouse button support;
- transitions handling.

My goal

My goal was to create a cd presentation with all the data being loaded from external files. I was really short on time and input from the client. I had three days to roll out something working and editable to improve it after first showcase to the client. It was a "do or die trying" situation. I had already looked into Gaia Framework so I grabbed last version and started to work.

I had no limitations on flash version and used AS 3.0 targeting Flash Player 10.

The work

Page templates

First of all I created presentation base. The project had many pages with similar layout but different data. Officially there’s no templating in Gaia. I just used same swf for similar pages and it worked. Probably this broke SEO and deeplinking but it was ok ‘cause I was targeting standalone flash projector.

After that I had all my data ready to use. No fuss with preloading and parsing but ready to use texts, pictures and sounds all placed in the context of their page. I’ll get back to that later. There are were some navigation to create.

Global navigation

Every page in Gaia Framework has an unique path. You could get what page is on the screen (current visible page) using Gaia.api.getCurrentBranch() and initiate transition to any other page using Gaia.api.goto(branch:String). This two commands made creating global navigation a snap.

Breadcrumb Navigation

The client asked for breadcrumb navigation. I made a quick and simple version using flash ability to handle clicks on the text field links.

private function onLink(e:TextEvent = null):void
{
Gaia.api.goto(e.text.split('.').join('/'));
//Fix inability to pass slashes in link event parameters
}
private function updateBreadcrumb(e:Event = null):void
{
var s:String = "";
var curr:IPageAsset = Gaia.api.getPage(Gaia.api.getCurrentBranch());

/* Below is all the magic to create breadcrumb navigation text
Fill the breadcrumb until the page with id == “nav” is reached. |
It’s the highest one in the site tree. */
while (curr.id != "nav") {
s= "> <a href='event:"+curr.branch.split('/').join('.')+"'>"+curr.title+"</a> " + s;
curr = curr.getParent();
}
breadcrumb.htmlText = s;
}

The navigation was working well I moved to creating inner pages.

Simple pages

Some pages were just a picture with a scrollable text field. These pictures were not intended to be loaded from external files and I just embedded them right into flas. The texts were dynamic and due to automatic preloading they were already accessible on the corresponding pages.

The part of site.xml defining one of the text assets.

<page id="contacts" src="contacts.swf" title="Contacts" menu="true" bytes="79794">
     <asset id="desc" src="data/contacts.txt" bytes="1102"/>
</page>

This makes the content of contacts.txt accessible on the page with id == “contacts” using IText(assets.desc).text

IText is an interface for text assets. It is just one kind of many GAIA asset types. Also from the version 3.1.4 you can add your custom assets.

Projects List page

The projects page contained a list of thumbnail pictures of projects with short text description. It was easy to get the list out of the current page children array. The only problem was their order. It was random due to a hash nature of this property.

I managed to get list of children pages in order using code below.

var id_check:String = page.id;
// current page id
var xml_list:XMLList = xml..page.(@id == id_check).page.@id;
// current page children ids in the xml order
var xx:XML;
for each (xx in xml_list) {
trace(page.children[xx].title);
//check the output. absolutely correct order!
}

Back button

It was easy to implement using Gaia.api.getCurrentBranch();
Below is what happens when the back button is clicked. This code forms the path and executes a transition to the current page’s parent.

private function goUp(e:Event):void
{
var curr:String = Gaia.api.getCurrentBranch();
var temp:Array = curr.split('/');
temp.pop();
trace(temp.join('/'));
Gaia.api.goto(temp.join('/'));
}

Image gallery component

Some pages had image gallery. I used same gallery component everywhere.
Using (parent as IPage).page.assets I could access already preloaded images of the corresponding page.

Conclusions

Gaia Framework greatly speeds up development of every project with tree like structure. It shortens the time of setting up the project from days to hours. If your are designer you’ll like how many technical aspects it automates and makes possible. If you are developer you’ll like how much time it saves. If you are a team you’ll like how modular and easy to understand both for designer and developer your project is.

Gaia Framework is a valuable addition to every flash site or presentation creator workflow.

Links

Official screencast

Documentation

Site and download