TyZ - Thijs Broerse - Flash Developer

De WK poule van Hyves en Telesport. Voorspel de uitslagen van de wedstrijden en word de “WK Koning van Nederland”. Je kan natuurlijk ook je eigen subpoule maken en de voorspellingen van je vrienden bekijken.

De teller staat momenteel op 169.374 deelnemers en daarmee is het al ruimschoots de grootste WK poule van Nederland. Maar daar komen uiteraard nog veel meer deelnemers bij. Wil je ook mee doen? Vul dan voor vrijdagmiddag je voorspelling in, want de inschrijving stop als het WK begint!

Voor dit project 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 truc bedacht om ActionScript code uit SWF files te halen, waardoor deze files meer dan de helft kleiner zijn geworden. Hierover zal ik nog een blogpost wijden.

Mede door het PHP-werk van Robert Slootjes is dit project een technisch hoogstandje geworden waar ik erg trots op ben. En ondanks mijn “liefde” voor voetbal was dit een heel erg leuk project om te doen.

Bekijk het project op:

http://www.oranjepoule.nl

Een autorij-spelletje voor Pearle, waarbij je mag proberen om met -8 een auto te besturen. Onderweg pak je brilletjes op en wordt het zicht beter. Maar lukt het je ook om zonder brokken de finish te halen?

Dit semi-3D spel is gemaakt zonder 3D framework, maar gewoon met de  3D feature van Flash player 10. Uiteraard wel met behulp van onze Temple Library, en Gaia voor de pagina navigatie.

Voor dit project heb ik de ActionScripting gedaan. Het design is gemaakt door Vincent van de Wetering.

Speel het spel op:

http://www.pearle.nl/Veilig_Op_Weg_De_Game

‘Temple‘ is the name of our AS3 library we use at MediaMonks. Almost all of our AS3 projects are using it. The Temple is inspired on several 3rd party libraries like ASAPLibrary, AS3CoreLib and CaseLib, but adapted to fit our needs.

The Temple consists of several classes we use on a regular basis. They are designed for reusability and optimized for performance and memory usage.  The Temple is specially designed to work with other frameworks like Gaia. The core of the Temple focuses on: debugging, destruction and memory management.

Debugging
Many classes are debuggable and have a ‘debug’ property. When this property is enabled, the object logs debug messages which allow you to see what the object is doing. All debuggable objects can be managed by the DebugManager. The DebugManager allows you to run all objects in debug mode.
All messages are logged through the Log class which is easily extended for usage by other logging applications, like Yalog and DeMonsterDebugger.

Destruction
All objects are destructible. By calling the destruct- method, the object will clear all of its data, removes all event listeners, removes itself from the display list (DisplayObjects only of course) and makes the object available for garbage collection. Destruction is recursive, so an object will also destruct all its children.

Memory Management
All Temple objects are tracked, via weak reference, in the Memory class. You can view all objects in the Memory class. This makes it possible to detect if an object’s destruct method is working correctly.

More
We also added many nice utility classes for the initial release of Temple, however there is a lot more to come. Since we are keen on stable, neat, and well documented code we are initially only releasing the core of the Temple library. This code has been used and tested and has proven to fit our requirements. There is a lot more we are planning to release soon, like UI components (buttons, form components, video player), loaders (CacheLoader, ImageLoader) and behaviors.

The Temple can be downloaded from Google code and the documentation can be viewed online.

For updates follow us at Twitter.

The Temple is released under the GNU General Public License which allows you to use, extend or modify the code to whatever you want.

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

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/

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

Het ‘Bingo Paleis’ is een online Bingo platform voor de Sponsor Bingo Loterij waar je online Bingo kan spelen.

Er is met meerdere personen aan dit project gewerkt. Het grootste Flash scripting deel is door mijn collega ‘Narie’ gemaakt. Ik heb enkele UI onderdelen voor mijn rekening genomen, zoals het chatpanel, de bingokaarten en de spelerslijst. Hiervoor heb ik onder andere de ViewStack, TabNavigation, ScrollPane en List Component uit de Temple gebruikt.

Het project is gemaakt met Gaia en de Temple, het Flash Framework van MediaMonks. Speciaal voor dit project is de Temple volledig geoptimaliseerd voor met name optimaal memory gebruik. En is het ‘destruction’-model tot in de puntjes doorgevoerd.

Speel zelf ook gratis bingo op: http://www.bingomee.nl/