Cache and preload Gaia pages
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. 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.
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)
These classes will soon be available in our Temple library.
Update: The CacheLoader, CacheURLLoader and LoaderCache are improved and available in our Temple library.
January 25th, 2010 at 17:19
Pretty cool, as usual Thijs! I’m going to test it with my next project which will be a Gaia project
January 31st, 2010 at 4:29
nice man! great help!
February 4th, 2010 at 21:27
[…] 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 […]
February 16th, 2010 at 20:54
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!
February 17th, 2010 at 3:44
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?
February 17th, 2010 at 10:53
@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.
February 17th, 2010 at 13:59
Great, thanks for clarifying.
March 11th, 2010 at 9:14
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!
March 11th, 2010 at 10:05
@Metthew > You can’t use this for preloading FLV files. Since FLV files are loaded by a NetStream and not by a Loader.
March 15th, 2010 at 22:30
[…] 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 […]
May 27th, 2010 at 0:22
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
May 27th, 2010 at 13:17
@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?
June 7th, 2010 at 17:04
[…] 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 […]
November 13th, 2010 at 2:07
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.
November 13th, 2010 at 22:15
@Nicole > I do not have this problem. But can you put your project somewhere online, so I can see the problem?
December 3rd, 2010 at 12:11
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
December 3rd, 2010 at 13:48
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
December 3rd, 2010 at 18:35
@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.)
December 3rd, 2010 at 18:51
@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)
December 3rd, 2010 at 19:39
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
December 14th, 2010 at 22:39
@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
December 23rd, 2010 at 4:18
freaking awesome! will use it, sure. =)
tks!
Felipe, from Brazil
December 30th, 2010 at 14:28
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?
December 30th, 2010 at 14:52
@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.
December 30th, 2010 at 15:37
Thank you. I’ll try it now.
January 7th, 2011 at 15:06
Thanks Thijs!!!! It works great now…
/Mats
January 18th, 2011 at 18:49
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
January 19th, 2011 at 11:55
@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.
April 20th, 2011 at 21:04
@Thijs: Does this take into consideration the application domain of the files? In other words, do the domain parameters for gaia still have effect?
April 21st, 2011 at 11:02
@Jhive: I am not sure, need to check that out.
April 21st, 2011 at 15:12
@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!
April 21st, 2011 at 15:20
@Jhive: Thanks! I will take a look at it!
December 1st, 2011 at 14:09
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?
December 2nd, 2011 at 17:15
@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.
December 5th, 2011 at 12:00
Ahh … that sounds much better. 20K would be acceptable for such a useful plugin!