Gaia Framework Tut

So there’s this thing on the internet right? And it’s called Gaia Framework, and it’s awesome.

I could always develop individual swfs, and do little test experiments but when it came to making entire sites, I always seemed to fall short with navigation, garbage collection, and good coding practices just to get it to work. But using Gaia, I am able to correct all these problems, and build full websites *easily*. I noticed that a lot of other students also struggled with the development of entire site, and thought I could help by offering up what I learned, and the site that I created.

So that’s cool. But what’s Gaia Framework?

Gaia Framework is an open-source ( free ) front-end flash development toolset, that allows for rapid development or websites.It’s great for all walks of the flash community. Designers can easily turn photoshop comps into clickable prototypes. Animators can control Gaia through the timeline with minimal code needed. Developers are encouraged to use best coding practices and Gaia can create Flex Compatible project files.

Gaia uses Several Industry-Standard Tools

SWFAddress – used for deeplinking on flash sites which allows for the use of foward/back buttons, and bookmarking specific sections of the site.

Greensock Tweening Platform - Lightweight, fast tweening engine.

Monster Debugger – Actionscript External Debugger

Steven Sacks ( stevensacks.net ) is the creator or Gaia framework and he automatically bundles the latest version of all these tools with it. So you will always have the most up to date versions of everything by having the most recent Gaia.

Ok sounds cool, where do I get it?

http://www.gaiaflashframework.com/

On that site there is robust API and how-to wiki.

Forums for specific questions, demo sites, screen casts and lessons.

If you have feature suggestions: post it on the forums and Steven Sacks will probably add it to Gaia.

So how does Gaia Work?

Similar to a typical HTML page setup. Different information is on different pages,you can have pages that load on top of or behind other pages. Page’s stages are transparent so it’s very easy to layer multiple pages seamlessly on top of each other.

Each page is a seperate swf.

This allows you to focus on create all the individual pieces and then let Gaia tie them all together.

But you can also easily access everything inside another page using the Gaia.api.getPage() function.

Project Name

This is only used inside the gaia panel won’t be reflected on site.

Source Folder

100% Gaia will write actionscript and css code to make full screen flash websites.

In this section you can set your Width and Height, and whether you want the stage to scale with the browser window. As well as your normal stage settings of FPS and stage color.

Folders

Important to seperate source files, from code to deployable. At the end of the day,you only need to upload the bin/ folder to webspace for the project to work.

Again, best practices: industry standard seperations.

: This is the default site XML generated

Here is where you define pages inside this site.xml file. By default the above image will be generated.

site.@title = is what will appear as the title in the browser window. %PAGE% will displays the current deeplink.

Page Attributes

@depth = top , middle, bottom

@menu = adds to right click menu

@bytes = used for bytes accurate preloading. GAIA will generate this.

@id = how flash finds and navigates to this file

@title = what appears as the deepLink

@src = .fla file that it derives from

Scaffolding

Scaffolding is where Gaia takes in each page from your site.xml file and creates a FLA for every page, creates a document class for each FLA and links the two together.
Actionscript or Timeline control of pages allowing flexibility for animators. As a developer I have never tried using the timeline.

SEO Scaffolding – generates HTML pages with flash content in then – buggy with fullscreen settings.

Update Bytes – caluclates the size of each swf to be used for byte-accurate preloading.

Assets – Gaia Allows you to embed assets right when you load the swf so that it is immediately available. Works great with sound, displayAssets, and XML, amoung others, you can also embed fonts this way.

Optimize – Site too big? Need it to be 40K instead of 80K? Gaia will compress itself and remove unneeded files, etc to reduce file size to optimal amount.

Key Gaia Concepts

example of how to use Gaia.api.goto(), I like to trace out the result in case the global nav goes wonky.

Gaia.api.goto( branch : String );

This is used to navigate to different pages within Gaia. You must either specify the string of the branch EG : “index/nav/home”. Gaia also creates a static variable for all pages and is accessible through Gaia.api package like so : Gaia.api.goto ( pages.HOME ) ;

typical transitionIn() + transitionInComplete()

Using these allows for smooth transitions and resource management. When you call Gaia.api.goto() it will automatically call transitionOut() on the current page, and will call transitionIn() on the new page for ease. You can also choose the order of how things transition by changing the Gaia “flow”. More information on this can be found on this online at : http://www.gaiaflashframework.com/wiki/index.php?title=The_Gaia_Flow .

Transitions make it really easy to play sound effects, movies, or tween things on/off stage for transtions, and Gaia will take care of everything.

Accessing MovieClips on the stage

Here you can see the movieClip is just on the stage and its instance name

This was something that I struggeled with until I figured out a solution. By declaring MovieClips and textFields as their instance name as the variable name I was able to access the stage no problem.

Here we can see that the instance name matches the variable name

Preloading

Scaffold.fla stage Scaffold.fla Library

So here is the default preloader. As you can see it’s a sprite that scales up according to the percent loaded, and three text fields that are change through a ProgressEvent Listener.

If you look in the library open up the class for PreloaderScaffold and lets look at the Progress Event.

ScaffoldMC Code

This code is well documented, but by tweaking this class and the movieClips and textfield on the stage, you can easily create a universal page preloader in minutes.

Local Testing

local Testing changes

Sometimes when in Gaia, you only want to test the current .fla file you are working on. You can easily do this without having to publish the whole project, or having to publish main, and then the file you are working on.

If you put in a call to transitionIn() in the constructor of your page it will simulate the transitionIn(). You must also comment out the line new Scaffold ( this ), as it will cause a run-time error. Remember that when you do this any reference to any Gaia function will cause a run-time error because the whole site hasn’t been instantiated. So use caution in this mode, but in a quick pinch it can save a lot of unneeded publishing time. When you finish working on that individual site be sure to remove the transitionIn() call from your page’s constructor or it will cause your site to function strangely.

Well that’s about it that I learned from Gaia!

In my next post I will go more into the fundamentals of papervision and how having a background in New Media Design & Imaging helped a lot.

You can pick up the entire sample project http://www.benmcchesney.com/Gaia_Example_Source.zip