The Gaia Panel
From Gaia Framework Wiki
Contents |
Overview
The Gaia Framework Panel is a JSFL-based panel that runs in Flash to build a Gaia project and create a skeleton of your site based on the site.xml. Open the panel under Windows > Other Panels > Gaia Framework.
Gaia Scaffolding creates template files for your site and launches the site when it is complete. Gaia Scaffolding does not overwrite existing FLA files. So, if you need to add new pages to your site after your initial scaffolding, update your site.xml and scaffold the project folder again. The Gaia Panel will only scaffold the new pages. You could also add pages manually by copying the template file from the template folder, however, it's much easier to let the Gaia Panel do the work.
Gaia Scaffolding allows you to have FLA and SWF files nested in folder paths. If you set a swf in your site.xml to be nested inside a folder path, Gaia will create the folder path in both the deploy and src folders, and save the FLA and publish the SWF appropriately.
Example:
<page id="level1" src="level1.swf"/> <page id="level2" src="foo/level2.swf"/> <page id="level3" src="foo/bar/level3.swf"/> <page id="level4" src="some/other/path/level4.swf"/>
Gaia Framework Panel
This view contains the buttons used to create or import projects, and a list of all saved projects. You can choose to create a new AS3 or AS2 project, or import an existing Gaia project.
Saved Projects
Projects are saved to the list after you create them and are listed in order of how recently you opened them. You can double-click any project to open it in the panel, or select it and hit Delete on your keyboard if you want to delete the project from the list. Deleting the project from the list will not delete it from the hard drive, just the Gaia panel list. If you want to add a project you deleted from the panel, simply import it.
Importing Projects
When you import a Gaia 3.x project, it loads the project.gaia file located in the project folder.
When you import a Gaia 2.x project, it will look for the gaia.xml file in the project folder. It will also load the index.html file, the main.fla file, and the Main.as file to get as much information as it can about the project. Then, it will look for the site.xml file in the deploy folder. If it cannot find it, it will alert you to type in its path on the Project Panel before finishing the import. It will also update the Gaia 2.x project to the latest version of Gaia.
Project Panel
The first thing you do when creating a new project is name your project and select a project folder. Once you select a project folder, you can set up the folder paths for where you want the various files to go. Once you click Create New Project, you can no longer modify these values (except for the site.xml path). You can rename a project at any time.
Info
Click the red text or folder to select the project folder. In Flash CS4, you can choose to publish to Flash Player 9 or 10. Once you set this, you cannot change it.
Version
You can see what version the of Gaia and TweenMax the project is using, and update an existing project at any time. You can update an older existing Gaia project to the latest version of the framework by clicking the Update button. A list of all the files that were updated and/or added will appear in the output window when you update a project so you can see exactly what has changed.
Updating a project also updates SWFObject 1.5 embed code to SWFObject 2.2 in the html files.
Note: You must delete your ASO files and republish all your Flash files after updating a project to the latest version of Gaia.
To delete your ASO files, open the top menu Control > Delete ASO Files. To republish your Flash files, use the Publish Panel, as shown below.
Properties
Under the Properties section, you can set the width and height of the project, as well as whether you want the site to be 100% width and height, and centered horizontally and/or vertically in the browser. You can also set the Frame Rate and Stage color.
By checking either of the 100% check boxes when you create a new Gaia project, the Flash site will be set to dynamically fill the browser without scaling. If you also check Center X or Center Y, it will dynamically center the Flash site in the browser. This will result in onResize() code being injected into the Main.as file.
Use the Apply button if you need to change the properties of your Flash site after the project has been scaffolded. Gaia will modify the properties of all the Flash files and publish them, as well as update the scaffolded html files, as well.
Folder Paths
There are four folder paths in Gaia.
- Flash Files - The location for the .fla files. The default is lib.
- Publish Folder - The location for the .swf, .html, .js, etc. files. The default is "bin".
- Classes - The location for all the class files of the project. The default is "src".
- Site XML - The site.xml goes in the publish folder. If you want to put the site.xml in a folder within the publish folder, set the path here.
Folder names must have a minimum of one character, and cannot begin or end with a forward slash.
Scaffold Panel
After you create a project, you can access the Scaffold panel. First, you should set your pages in the site.xml.
Class Package
When you're finishing setting up your pages in the site.xml, you should type in a class package for your page classes. It is recommended you end this class package with pages.
Example: com.clientname.projectname.pages
Gaia will generate class files for every page in the site and will automatically create the folder path for the classes. Gaia also creates a Main.as file in the root package for you to modify to your needs.
Take a look at the Page classes that Gaia generates to see their actual implementation, as well as the template classes they extend in the com.gaiaframework.template package.
Additionally, AS2 Scaffolding will generate exclude.xml files for every page to keep the sizes of your page files down.
Template Transition Style
You can choose to use Actionscript-based page transition templates, or Timeline-based ones. Actionscript transition templates have a single frame and use Actionscript to transition the pages in and out. Timeline transition templates have frame labels "in" and "out" and use gotoAndPlay() to transition to them.
SEO Scaffolding
Checking this box enables Search Engine Optimization scaffolding whenever you click the Scaffold button. For more information click here to read about Gaia's SEO Scaffolding.
Byte Accurate Preloading
Clicking the Update Bytes In Site XML button will update your site.xml to include the bytes and seoBytes attributes for all of your pages and assets for Byte Accurate Preloading. If your pages and assets already have the bytes attribute set, it will update the attribute value to the current file sizes.
Disable Assets
You can decrease the main.swf file size by only compiling selected asset classes. By clicking Auto-Detect, Gaia will read your site.xml for asset types you are using and select/deselect assets accordingly. If you are you using external xml files to define assets, you should manually select assets to include/exclude.
When you are ready, click Optimize and Gaia will modify the source code to compile only the selected assets. You need to publish main.swf afterwards.
Publish Panel
The publish panel keeps track of all the Flash page files in your project. You can double-cilck any file in the list to open it in Flash.
Test Project
Check the specific files you want to publish when you click Test Project, and Gaia will compile those files and launch main.swf afterwards. For even faster launching, you can leave main.fla unchecked if you aren't making changes to Main.as, however, on Flash CS4 for OSX, there is a bug that causes main.swf to open in a tab instead of a window.
In Flash CS4, you can set up a keyboard shortcut to Test Project. It can be found under the Commands menu called Gaia Test Project. This feature is not available in Flash CS3.
Open Project Folder
Clicking this button will open the project folder in Windows Explorer / OS X Finder.
Sync With Site XML
If, for some reason, the panel loses sync with pages you have in the site.xml, such as if you manually add pages without using the Scaffolding, click this button and it will automatically update the list of files based on the site.xml. Note that it will not display any files which do not exist. So, if you put a page in the site.xml but no Flash file is associated with it, it will not appear in the list.
Right Click Menu
When you right-click on the panel, there are convenient links to the Gaia Forum, the Wiki and the ASDocs, which will open in your default browser.
Panel Log
Considerable time has been spent to make the Gaia panel as error free as possible. However, if a feature on the panel ever fails to work, there is an error log that you can open to copy and paste on the forum when you report your issue. You can also clear this log.
Deauthorize
If you purchase a new computer or reinstall your operating system, you can deauthorize an unlocked Gaia panel using this menu option so you can unlock it on your new installation.
project.gaia
Gaia creates an xml configuration file for projects called project.gaia which contains these settings for that project. Generally, you should not edit this file unless you make manual changes yourself to these properties outside of the Gaia panel.
Removing Scaffolding From Pages
Once you have scaffolded your site, removing the scaffolding is simple.
In AS3, delete this line in the Page class constructors:
new Scaffold(this);
In AS2, delete this line on the first frame of the Page template Flash files:
scaffold();
Once you are completely done removing that one line of code from all of your pages, you can then remove the scaffold.swf from the deploy folder, and the Scaffold.as class from the package you scaffolded your pages into. This is not required, but once you delete the scaffold code from your pages, these files are no longer used, so you might as well delete them.
The preload.fla file has a clip in the library called PreloaderScaffold. It is assigned the class PreloaderScaffold.as in the package you scaffolded your pages into. Delete the clip from the library and its associated class if you write your own preloader.
*** Make sure you publish all of the Page files again after you remove the Scaffolding code***
