TyZ

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" src="page.swf" type="bytearray"/>

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.

Voor de “Even Apeldoorn bellen”-live campagne van Centraal Beheer hebben we bij Media Monks de website mogen bouwen. Een onderdeel van de website is een Augmented Reality toepassing, waarvoor ik de ActionScripting gedaan heb.

In verschillende kranten heeft een ‘Centraal Beheer’ advertentie gestaan. Door in de website de advertentie voor je webcam te houden verschijnt er een 3D scene op de advertentie: Er komt een mannetje in beeld die op een ladder probeert te klimmen.

Door de advertentie te bewegen beïnvloed je de 3D scene. Als je de advertentie te schuin houdt valt de man van zijn ladder en verschijnt de “Even Apeldoorn bellen” slogan.

De Augmented Reality applicatie is gemaakt  met PaperVision3D en de FLARToolKit. De website is gemaakt met Gaia en de Temple. Meer informatie over de hele campagne staat op Dutch Cowboys en Marketing Facts. Bekijk de website op:

http://www.evenapeldoornbellenlive.nl

Om de Augmented Reality toepassing te bekijken klik je onderaan op “Webcam-boodschap” en vervolgens op “Start”. Zorg er voor dat je de advertentie bij de hand hebt (deze kan je uitprinten op de website).

A few weeks ago we launched the new website for We Fashion.

“WE Fashion is an international fashion company. With approximately 230 stores and 3,000 members of staff, WE Fashion is represented in the Netherlands, Belgium, Germany, France, Luxembourg and Switzerland.”

The website is build with Gaia and the Temple. We used some special techniques for this website like:

Multi language, multi locale
Since We Fashion is located in several countries with several languages, the website had to be multi-language. The language is added in the deep-link and you can switch language without reloading the website.

Search Engine Optimization (SEO)
The website is fully index-able by using alternative HTML pages that contain all the content of the website. When you switch off Javascript you can see the alternative HTML. (But the HTML still needs some styling.)

Liquid
The layout of the website is automatically adjusted to fit to the size of the screen. No matter what the size of your screen is. For this purpose we created a LiquidBehavior for the Temple, which handles automatically resizing and repositioning of the objects.

Watch the new website on: http://www.wefashion.com

I am a huge fan of Gaia Flash Framework, I use it for almost all my projects. It is a great framework if you want to create solid and maintainable Flash websites.

But as with many Frameworks it comes with some disadvantages; Gaia creates a .fla file for every page, but a page will not run standalone. After compiling the .fla file you have to test the page through the main.swf. For a huge project this is very unwieldy and inefficient.

So I created this “GaiaStandAloneRunner” which enables you to run your Gaia pages standalone, even with all the assets and SEO copy defined in your site.xml. The code only adds about 0.6 KB to your page swf file. (more…)

If the HTML is larger than the browsers window, using the mouse-wheel will always result in a page scroll in AS3. That’s a bummer if you want to use the mouse-wheel inside the Flash.  This problem is better explained here.

After a lot of Googling I found out there wasn’t a good solution for this problem. So I build something that works. (more…)

Building the ‘VARA – Biografie‘ website.

When I saw the design of de website I had to choose if we should use Flash or HTML. Mostly when design and animation is leading I choose Flash. If the content is more important and there is a lot of text, I choose HTML. But for this site the top of the website with the timeline and media player has video and animations. But the rest of the site is mostly text. So 100% Flash or 100% HTML didn’t fit our needs. The best solutions would be if we combined Flash and HTML to get ‘the best of both worlds’. (more…)

In verband met het 80 jarige jubeleum van de VARA hebben wij voor de VARA een geschiedenissite gemaakt. Hier kan je afbeeldingen, video’s en geluids fragmenten uit de geschiedenis van de VARA bekijken. De hoofdnavigatie is een grote tijdlijn met programma’s, gebeurtenissen en personen van vroeger tot nu.

Het is een ‘hybride’ website geworden, Flash en HTML doorelkaar. Door middel van SWFAddress en AJAX. Dit zorgt onder andere voor een uitstekende zoekmachine optimalisatie. Binnenkort zal ik dieper ingaan op de techniek achter deze site.

Voor deze site heb ik het technische ontwerp (Flash/HTML/SWFAddress/AJAX) gemaakt en de Flash scripting gedaan. Hiervoor heb ik gebruik gemaakt van onze Temple.

Bekijk de website op: http://biografie.vara.nl/

For a project I am making a videoplayer which can be controlled by the keyboard. The spacebar is used for toggling between play and pause. But a bug inside the Flashplayer causes my videoplayer to pause or play when entering fullscreen mode. Since this is really anoying I wrote a workaround which seems to be working very nice: (more…)

De Match-O-Tron is een project voor Soa Aids Nederland, waarin je kan testen hoe goed je relatie met je partner is. Het doel is om mensen bewust te maken op soa’s en te motiveren een soa-test te gaan doen.

Victor Frankenstein heeft een machine, de “Match-O-Tron” uitgevonden waarmee je de test kan doen. De interactieve video site moet je het gevoel geven alsof je zelf in de oude Frankenstein film zit.

Het gehele project, inclusief videoopnamesn videobewerking, design, concept, Flash en backend is gemaakt door MediaMonks. Samen met collega Tim Ruiters heb ik de ActionScripting gedaan. Hiervoor hebben we gebruik gemaakt van Gaia en de Temple, ons interne Flash Framework. Temple elementen die we hiervoor gebruikt hebben zijn onder andere:

• De MultiVideoPlayer, die meerdere video’s tegelijk aan kan en video’s kan preloaden zodat je soepele overgangen hebt.
• Het formulier, inclusief tabbing, focus,validatie en een ‘iPhone’-achtige datum selector.
• Ondertiteling voor video (in srt formaat)
• Meertaligheid
• SoundManager

Voor dit project heeft mijn collega Tim visuele effecten (’ruis’ en ’schokken’) over de site gelegd die het beeld dat je naar een oude film zit te kijken versterkt.

Bekijk de site op: http://match-o-tron.vrijsoavrij.nl

‘Vertel het je familie’ is een project voor T-Mobile ter promotie van ‘T-Mobile family’. Samen met collega’s hebben we dit project in een recordtijd uit de grond gestampt. Met toch wel een erg leuk resultaat.

Dit project is gemaakt  met Gaia en de Temple, ons eigen Flash Framework die inmiddels versie 2.1 heeft. Bekijk het project op:

http://www.vertelhetjefamilie.nl