AS3 Quick Guides – Frameworks and Toolkits


As part of my series of quick guides to open source AS3 projects I thought it would be interesting to look at the range of code frameworks and toolkits that are currently available for Flash website development.

If you’ve ever tried developing a website completely in Flash then you will know just how much work it can take to setup the initial project structure and make Flash behave in a similar way to a standard HTML website. From asset loading and memory management to deep linking and browser history support, chances are that there is a site framework or code toolkit that makes building websites in AS3 that little bit easier.

Gaia Flash Framework
This is an excellent framework for Flash that really does make developing websites a breeze. It’s an open source ActionScript framework that comes with a Flash IDE component panel that helps you quickly setup a project automatically creating the files you need for each page of your site.  This automated ‘scaffolding’ provides a solid foundation from which to build a ‘traditional’ page based website in Flash, and ensures that all Gaia projects include browser back / forward button support and deep linking (thanks to built in SWFaddress integration), as well as a standardized page and asset loading system.

Once you have planned out the overall structure of your site, splitting it into a number of distinct sections or pages, you write this structure into Gaia’s site.xml config file, pass it to the scaffolding engine in the Gaia component panel and let the framework do the rest. Beyond this initial scaffolding and the common page based structure, it’s completely up to you what you do and how you code it, and that really is the best part of Gaia. It is a framework that gives you a fantastic set of tools as the starting point for every project, but then lets you do your own thing, because that freedom is what makes Flash sites so unique.

All that and I haven’t even mentioned the great level of support or the incredibly well written and regularly updated documentation. If you want to find out more, I’d recommend taking a look at some of the sites featured in the gallery on the project’s home page as well as this demo website which offers a good example of to how build a site using the framework.

Perhaps you don’t need a full framework that structures a whole website for you, maybe all you need is an excellent set of classes that streamline the kind of common tasks required in most AS3 projects, if so then CasaLib is just what you need. From helping you load lots of external assets at once, to solving memory management issues or calculating the scaling ratios required for full screen websites, this library seems to have everything covered.

The toolkit is well documented with many examples in the main class documentation as well as on the project’s blog. The only real problem is remembering all the things it can help with, quite a few times I’ve been working on a project using CasaLib and written lots of code myself only to find out later on that the toolkit already has a class to do just what I needed, oh well never mind.

Polygonal Labs Data Structures
A great set of utility classes that build extra functionality on top of the existing core ActionScript data classes. I think these ‘data structures’ were originally intended for use in Flash games, but I’ve found them very helpful for all sorts of projects.

For an example of the library’s effectiveness, see this post by John Lindquist where an iTunes style cover flow effect is put together with only a few lines of code. I remember writing a similar effect a while ago for work using a much earlier version of Papervision3D, and can definitely say it took a lot more code than that, if only I’d known about these AS3 data structures back then.

Described as a lightweight framework for structuring your projects using the classic Model View Controller design pattern, PureMVC looks to be a great way to ensure that your code remains modular and reusable. Those of us who have tried to code within the MVC pattern before will know know that despite the best of intentions things can often go astray, this framework aims to address that issue by providing a great standardized structure to work within.

I haven’t used PureMVC on a project yet, but there seems to be two main points of view about it. One argues that it can be quite restrictive, forcing you to work within a strict MVC design pattern for even the most simple of tasks. The other view notes that this focus on structure does ensure that you code is far more stable, logical and reusable than is usually the case. For me, as someone who is always trying to write more elegant and reusable code, it may well be worth a try.

AS Hive
AS-Hive is a state based framework which seems to share a very similar approach to website development as the Gaia Framework, sitting in the background, part way between something that determines the structure of your application and a toolbox you can dip into as and when you need.

Both of these frameworks have a similar focus on application flow, in particular they are structured around managing transitions between the different states of you application by creating sequences of animation and asset loading to move from one screen to the next. This kind of thing is so intrinsic to projects built in Flash which often have a strong focus on animation, but is too often overlooked by frameworks and design patterns based on code from other languages.

I have yet to work on a project using Hive, but it does look very promising and could be a very good alternative to the Gaia Framework, especially if you’re working on an AS3 only project using the Flex SDK rather than the Flash IDE. In fact, while Gaia may remain the best solution for page based websites in Flash, Hive might provide a bit more freedom in the way it can be used for a much wider variety of projects such as games and social media tools.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s