Cache and preload Gaia pages

Gaia Flash FrameworkI use Gaia a lot. I think it’s a great and powerful framework to create page-based Flash sites. But there is a problem: Gaia creates a SWF for every page. And every time you visit a page, the SWF is loaded again. Even if you already visited that page. Also it is not possible to preload pages you are not visiting.

To make page caching and page preloading possible, I have created the ‘CacheLoader‘ and ‘CacheURLLoader‘ classes. Both classes make use of the ‘LoaderCache‘ to cache the SWF files used by Gaia. Just add these 3 classes to your project and you only have to adapt 2 Gaia classes to enable this feature:

1) Make the DisplayObjectAsset use the CacheLoader instead of a Loader:  Open  ‘com.gaiaframework.assets.DisplayObjectAsset’ and change line 58 to:

1
_loader = new CacheLoader();

And set EventListeners on this _loader instead of his contentLoaderInfo (line 60)

1
addListeners(_loader);

And update your imports.

2) Make the  ByteArrayAsset use the CacheURLLoader instead of an URLLoader: Open  ‘com.gaiaframework.assets.ByteArrayAsset’ and change line 42 to:

1
loader = new CacheURLLoader();

And update your imports.

Now all pages are cached in the LoaderCache. The SWF files are only loaded once. (Notice that the progress and error events are now dispatched from the CacheLoader and not his contentLoaderInfo.)

To preload pages, just add the page as a ByteArray asset in your site.xml:

1
<asset id="page2_cache" type="bytearray"></asset>

The SWF files are cached as ByteArray. Therefore the pages are normally loaded, constructed and destroyed. So there is no need to adjust your pages to make use of this caching mechanism.

View the example.

Note: use right mouse button to navigate. Page2 is preloaded as bytearray asset.

You can use a proxy tool (like Charles or firebug) to see that all page SWF files are only loaded once. (Note: scaffold.swf is not a page)

Or download the source files.

These classes will soon be available in our Temple library.

Update: The CacheLoader, CacheURLLoader and LoaderCache are improved and available in our Temple library.

35 Responses to “Cache and preload Gaia pages”

  1. Jos Koomen Says:

    Pretty cool, as usual Thijs! I’m going to test it with my next project which will be a Gaia project

  2. tom anthoni Says:

    nice man! great help!

  3. TyZ » Blog Archive » Cache and preload Gaia pages « Ramblings Says:

    […] TyZ » Blog Archive » Cache and preload Gaia pages Filed under: Uncategorized — Tags: dev, flash, gaia, tool — michaelangela @ 7:27 pm I am looking at using Gaia for an upcoming project but not being able to use the cache might be a bit of an issue. I do wonder why it’s not caching at all if the browser is set to cache though. I’ll have to try it out and see what is being requested. I use Gaia a lot. I think it’s a great and powerful framework to create page-based Flash sites. But there is a problem: Gaia creates a SWF for every page. And every time you visit a page, the SWF is loaded again. Even if you already visited that page. Also it is not possible to preload pages you are not visiting.To make page caching and page preloading possible, I have created the ‘CacheLoader‘ and ‘CacheURLLoader‘ classes. TyZ » Blog Archive » Cache and preload Gaia pages […]

  4. christian Says:

    This looks really cool, I will try to implement it my flash framework “FLEB” http://blog.flashcmsframework.com/category/fleb-framework/
    Thanks for sharing this!

  5. Jason Langdon Says:

    Looking at my server logs for when I access my site, the swf files appear to be caching fine (ie. they don’t reload everytime I visit the site as you seem to be suggesting should be the case). The xml assets have the nocache property appended so always reload (which is probably another issue, given that I am using the gaiaSiteVersion property in my site.xml)

    I’m using Firefox on Vista, so am wondering whether the swf loads you’re seeing are occuring on a different browser/platform?

  6. Thijs Says:

    @Jason > This is because SWF files are cached by the browser. If you disable your browser cache, you’ll see that the SWF’s are loaded every time.

    The reason I use this caching method is that it’s faster then the browsers cache and you’ll have the possibility to preload pages.

    The browser cache will vary on each system, so you shouldn’t rely on it.

  7. Jason Langdon Says:

    Great, thanks for clarifying.

  8. Matthew Says:

    Hey– This looks very helpful– thanks for sharing.
    One question though– could this be used (or extended) to pre-cache FLV files? I’m trying to wrap my head around a method to effectively preload FLVs into Gaia, and came across your notes. Be good to know!

  9. Thijs Says:

    @Metthew > You can’t use this for preloading FLV files. Since FLV files are loaded by a NetStream and not by a Loader.

  10. Fleb Framework 1.27 released: Cache and preloading | Turtlebite Flash CMS Framework Says:

    […] time ago I stumbled upon this post and I decided to implement it in the Fleb Framework. It’s about cache and preloading. I also […]

  11. george strnad Says:

    Hi, thanks for the code, nice site… I’m having a problem though.. I’m getting two errors when I compile.:

    1093: Syntax error.
    1071: Syntax error: expected a definition keyword (such as function) after attribute OCTYPE, not html.

    Both of them are on line 4 of CacheLoader.as

  12. Thijs Says:

    @George > could it be that you are compiling the wrong files? Since there is no word ‘html’ in the class. Maybe you are compiling an HTML file?

    Can you send or show me the files you try to compile?

  13. TyZ - Thijs Broerse » Blog Archive » OranjePoule - De grootste WK poule van Nederland Says:

    […] heb ik de ActionScripting gedaan. Hiervoor heb ik gebruik gemaakt van Gaia en de Temple. Ook is het caching systeem ingezet en verbeterd. Voor dit project heb ik een speciale truck bedacht om ActionScript code uit […]

  14. Nicole Says:

    These files are great. However I am running into a problem with Gaia 3.2.3 (I posted on the forum under “MODS”) where it seems like ALL of the preloaders have totally disappeared (including the preloader that loads at the beginning for index/nav/home.swf).

    I like how the caching works but I need a preloader at the beginning of my project. Is this the expected behaviour or just something that is happening with Gaia 3.2.3 you think?

    I am using the default preloader scaffold at the moment.

  15. Thijs Says:

    @Nicole > I do not have this problem. But can you put your project somewhere online, so I can see the problem?

  16. Mats Jacobsson Says:

    Hi Thijs, Thanks for a nice mod!

    I’m just wondering, should I use the updated files in the http://code.google.com/p/templelibrary/source/browse/trunk#trunk/lib/temple/data/loader/cache directory or the ones in the downloadable example?

    It works fine with with the example file but not the new updated files.. Maybe I need to make some adjustments?

    Thanks!! /Mats

  17. Mats Jacobsson Says:

    Hi again, I’m also wondering if its possible to cache xml files too? If I look in firebug they get a .xml?nocache?1324234 at the end.. I guess this is a gaia issue… /Mats

  18. Thijs Says:

    @Mats: the files in Google Code are newer (and better). But I didn’t check my example for the newer files, so you might need to change some stuff. I’ll check this and come back at this later.

    (I am using the version of Google Code, but I am also working in a modified version of Gaia.)

  19. Thijs Says:

    @Mats: Nope, it does not work for XML files. The caching only works for stuff you would normally load using a Loader (SWF and images)

  20. Mats Jacobsson Says:

    Ok, and I guess the assets attached to the different pages (swf:s) won’t get cached either? But thats fine! swf files is good enough. :)

    Really appreciated if you could look at the example files.. I’ve tried to managed it with no success.

    Cheers! /Mats

  21. Thijs Says:

    @Mats: I just tried to implement caching in the newest Gaia using the latest Temple version (2.7.5), and everything works fine. You can download the updated example files from:

    http://development.tyz.nl/gaiacache/gaiacache_Temple_2.7.5.zip

  22. fe.silverio Says:

    freaking awesome! will use it, sure. =)

    tks!
    Felipe, from Brazil

  23. rdumas Says:

    Please, Thijs,

    Help me.

    In the site.xml (Gaia). Do i need create an asset node for each page or only the second?
    And, use this mod, do i need use parameter gaiaSiteVersion?

  24. Thijs Says:

    @rdumas: you need to create an asset node for each page you want to preload.

    And if you use gaiaSiteVersion, check if this gaiaSiteVersion is also added to the assets. Pages are cached by there URL, and “page.swf” is not the same as “page.swf?gaiaSiteVersion=X”, so cache won’t work.

  25. rdumas Says:

    Thank you. I’ll try it now.

  26. Mats Jacobsson Says:

    Thanks Thijs!!!! It works great now… ;) /Mats

  27. Alexander Marchenko Says:

    Thanks for your great work, but I can’t get it working with the latest versions of the Gaia(3.2.3) and the Temple(2.8.2) - it keeps loading new pages into memory.
    Please let me know if I did something wrong. Here is my source:
    http://www.mediafire.com/?q2w0pkqeoki8phm

  28. Thijs Says:

    @Alexander: the source files you send are the same as my example right? But they work fine here. See I don’t see the problem.

  29. Jhive Says:

    @Thijs: Does this take into consideration the application domain of the files? In other words, do the domain parameters for gaia still have effect?

  30. Thijs Says:

    @Jhive: I am not sure, need to check that out.

  31. Jhive Says:

    @Thijs: It does not seem to do so. My project requires quite a bit of cross page communication so deciding when to load pages into a shared application domain or a new gets pretty important. Anyways, it seemed to be a quick fix in order to get it functioning.

    In cache loader, add a variable to store the loaderContext. On the load() function store the context to that variable.

    In handleURLLoaderComplete handler I made the following change:

    this._loaderContext.checkPolicyFile = false;
    this.loadBytes(this._cacheURLLoader.data, this._loaderContext);

    You have to set the checkPolicyFile to false since it isn’t used by loadBytes.

    Anyways, kind of a rushed solution for myself but maybe you would like to look into this further.

    Thanks for the great work!

  32. Thijs Says:

    @Jhive: Thanks! I will take a look at it!

  33. Evan Gifford Says:

    Thanks for this! But wait ….. checking this out for the first time, I am STUNNED by the level of tight integration with your framework! I started adding classes … got to about 10, and began to wonder, how deep does this rabbit hole go? How many classes I need to import from Temple framework to use this Gaia extension?

    10?
    20?

    No no … I counted JUST the individual classes needed to use CacheURLLoader
    61!

    61 individual Class dependencies to use this (don’t believe me, count for yourself)
    This also adds 63KB to each .swf

    Guys, can you help me understand?

  34. Thijs Says:

    @Evan: We are currently working on Temple 3.0.0 which has much less dependencies as the current version.

    I can’t give you any date (at the moment) when this version will be released. So follow us on Twitter, we will post it as soon as it is available.

    Using the CacheLoader of Temple 3.0.0 will only add 20k to your SWF. So this is a significant reduction.

  35. Evan Gifford Says:

    Ahh … that sounds much better. 20K would be acceptable for such a useful plugin!

Leave a Reply


Moved Permanently.