THIJS BROERSE FLEX USERGROUP GAIA FLASH FRAMEWORK

Transcriptie

1 THIJS BROERSE FLEX USERGROUP GAIA FLASH FRAMEWORK 6 JUNE 2011

2 OPBOUW VAN DE PRESENTATIE 2 GAIA FLASH FRAMEWORK Wie ik ben en wat ik doe Gaia in het kort Waarom Gaia? Projecten in Gaia Dieper in Gaia Onze Gaia Mods Case study: AH Voetbalplaatjes

3 WIE BEN IK EN WAT DOE IK 3 THIJS BROERSE Nu: Flash Architect / Flash Lead bij MediaMonks Beheerder van de Temple Library Beheerder van onze interne Gaia versie

4 WIE BEN IK EN WAT DOE IK 4 THIJS BROERSE Vroeger: Saxion Hogeschool: Kunst & Techniek HKU: European Multimedia Master of Art (EMMA) - Inderaction Design Treshold: PHP, Perl, HTML, JavaScript Lost Boys: PHP,.NET, HTML, JavaScript, Flash

5 WIE BEN IK EN WAT DOE IK 5 OVER MEDIAMONKS Het grootste creative digital production agency van Nederland Momenteel 124* Monks Gespecialiseerd in werken voor reclamebureaus (* en opzoek naar nieuw talent)

6 WIE BEN IK EN WAT DOE IK 6 MEDIAMONKS OFFICES HILVERSUM LONDON NEW YORK

7 WIE BEN IK EN WAT DOE IK 7 ONZE SERVICES We zijn gespecialiseerd in high-end digitale producties & spijker harde deadlines. Microsites & corporate sites Banner campaigns Rich media campaigns (expandables, non expandables, site takeovers) Social Media campaigns & (FaceBook/Youtube) applications Online games Online video Animation Flash development (also flex / air) Technical development / backend / CMS (PHP / Mysql / JAVA) HTML / CSS / AJAX / Javascript Mobile: Iphone & Android apps / ipad (tablet) websites

8 WIE BEN IK EN WAT DOE IK 8 ONZE KLANTEN Een selectie van onze klanten: - AMV BBDO Aviva, Capital One, Heinz - Dufresne-Corrigan-Scarlett - Desperados / Heineken - Mother London Ikea, Becks, Stella - Publicis & Hal Riney - Cellular - Saatchi & Saatchi NL & UK T-mobile, Visa, Senseo - Starcom / Muse Samsung, P&G - TBWA\ KPN, Albert Heijn, McDonald s, Heineken - TRIBAL DDB Philips, KLM, Budweiser, Gucci, Ziggo - Wieden & Kennedy London Nike, THP - Work Club Landrover & McLaren - And several Dutch Local agencies & brands

9 GAIA FLASH FRAMEWORK 9 GAIA IN HET KORT Open-source Framework voor Flash Huidige versie: Gemaakt door Steven Sacks Ruim 4 jaar oud Bedoeld om de developmenttijd te verkorten Navigatie Transities (Pre)loading Asset Management Zoekmachine optimalisatie Gaia Panel Vooral geschikt voor page-based websites Niet voor Flex (wel FCSH / MXMLC)

10 GAIA FLASH FRAMEWORK 10 WAAROM GEBRUIKEN WE GAIA? Sneller werken Makkelijk Meer functionaliteit voor minder werk Betere samenwerking tussen developers Betere samenwerking met animatoren Goed gedocumenteerd Open-source / MIT License Omdat we vette shit maken!

11 PROJECTEN IN GAIA 6 JUNE 2011

12 SHOWREEL JUNE 2011

13 PROJECTEN IN GAIA 13 TILE & INSPIRE KLM FACEBOOK CAMPAGNE Maak je eigen Delfts Blauwe tegeltje en kom met je gezicht op een vliegtuig. Onderdelen: Foto omzetten naar Delfs Blauw tegeltje 3D Vette animaties FB integratie

14 PROJECTEN IN GAIA 14 MTV/NICKELODEON THE HOUSE ANUBIS 5 adventures, 15+ hours of gameplay, active players, 4 countries Onderdelen: Website in Gaia Illustration & design Flash development & animation Roll-out in meerdere talen en landen 2011 Jan Launched een 3D versie van de game voor MTV US

15 PROJECTEN IN GAIA 15 TBWA/ AH VOETBALPLAATJES In Nederland de grootste social media compagne van het jaar, met meer dan 1 miljoen gepersonaliseerde voetbalplaatjes. Onderdelen: Flash development Animaties Cache & Preload Mod Hyves integratie RobotLegs

16 PROJECTEN IN GAIA 16 O'NEILL TEAM O'NEILL Interactieve producten showcase Onderdelen: Concept Illustraties Design Animation Development interactive skiing experience

17 PROJECTEN IN GAIA 17 DESPERADOS YT TAKEOVER HIGH-END YouTube takeover met unieke user interaction en Facebook integratie Onderdelen: Niet met Gaia gedaan! YT channel productie Eigen video opnames Intern concept & design Flash animation / development / 3D Sound Design FB integratie views (viral traffic, een media) in 5 dagen. Case demo

18 DIEPER IN GAIA 6 JUNE 2011

19 DIEPER IN GAIA 19 SITE.XML Pages Assets (Elke page is een SWF) (SWF, Bitmap, FLV, MP3, XML, JSON, CSS, ByteArray)

20 DIEPER IN GAIA 20 NAVIGATIE Deeplinking met SWFAddress: In code: Gaia.api.goto(Pages.HOME) Standaard rechtermuis navigatie

21 DIEPER IN GAIA 21 TRANSITIES Elke page heeft een: transitionin() transitionout() transitionincomplete() transitionoutcomplete() Dit kan met code of op de tijdlijn.

22 DIEPER IN GAIA 22 TRANSITIES

23 DIEPER IN GAIA 23 TRANSITIES: GAIA FLOW Normal: 1. transitionout 2. preload 3. transitionin Preload: 1. preload transitionout transitionin Reverse: 1. preload transitionin transitionout Cross: 1. preload 2. transitionout & transitionin

24 DIEPER IN GAIA 24 SEARCH ENGINE OPTIMIZATION Alternative HTML pagina s HTML content in Gaia HTML Scaffolding in het Gaia panel

25 DIEPER IN GAIA 25 GAIA PANEL Scaffolding Fla s Page classes SEO HTML files Bytes in site.xml Publish Update Resize

26 DIEPER IN GAIA 26 GAIA API Overal beschikbaar via Gaia.api Gaia.api.goto(Pages.HOME); Gaia.api.getCurrentBranch(); Gaia.api.getDeeplink(); Gaia.api.getPage(branch); Events & Hijack Gaia.api.beforeGoto(handler, true); Gaia.api.afterPreload(handler); Gaia.api.beforeTransitionIn(handler);

27 DIEPER IN GAIA 27 OVERIG Gratis Filesize Let op: (wel betalen als je niet wilt wachten op het panel: $25,- of minder) kb voor de main.swf kb voor elke page transitionincomplete transitionoutcomplete destruction / memory management

28 ONZE GAIA MODS 6 JUNE 2011

29 GAIA MODS 29 GAIA & TEMPLE LIBRARY Destruction removealleventlisteners recursive Memory Debugging UI Components Buttons, Slider, Forms, InputFields, CheckBoxes, ImageLoader, VideoPlayer, etc. etc. etc. Utilities

30 DIEPER IN GAIA 30 ONZE GAIA MODS Run Gaia Pages Standalone (open source) Cache & Preload Gaia Pages (open source) RobotLegs integratie File size optimalisatie (huidig project van 6,12 MB naar 1,68 MB)

31 CASE STUDY: AH VOETBALPLAATJES 6 JUNE 2011

32 BEDANKT! ww.tyz.nl templelibrary.googlecode.com JUNE 2011