THIJS BROERSE FLEX USERGROUP GAIA FLASH FRAMEWORK 6 JUNE 2011
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
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
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
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)
WIE BEN IK EN WAT DOE IK 6 MEDIAMONKS OFFICES HILVERSUM LONDON NEW YORK
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
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
GAIA FLASH FRAMEWORK 9 GAIA IN HET KORT Open-source Framework voor Flash Huidige versie: 3.2.6 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)
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!
PROJECTEN IN GAIA 6 JUNE 2011
SHOWREEL 2011 6 JUNE 2011
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
PROJECTEN IN GAIA 14 MTV/NICKELODEON THE HOUSE ANUBIS 5 adventures, 15+ hours of gameplay, 150.000 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
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
PROJECTEN IN GAIA 16 O'NEILL TEAM O'NEILL Interactieve producten showcase Onderdelen: Concept Illustraties Design Animation Development interactive skiing experience
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 625.000 views (viral traffic, een media) in 5 dagen. Case demo
DIEPER IN GAIA 6 JUNE 2011
DIEPER IN GAIA 19 SITE.XML Pages Assets (Elke page is een SWF) (SWF, Bitmap, FLV, MP3, XML, JSON, CSS, ByteArray)
DIEPER IN GAIA 20 NAVIGATIE Deeplinking met SWFAddress: www.website.com/#home In code: Gaia.api.goto(Pages.HOME) Standaard rechtermuis navigatie
DIEPER IN GAIA 21 TRANSITIES Elke page heeft een: transitionin() transitionout() transitionincomplete() transitionoutcomplete() Dit kan met code of op de tijdlijn.
DIEPER IN GAIA 22 TRANSITIES
DIEPER IN GAIA 23 TRANSITIES: GAIA FLOW Normal: 1. transitionout 2. preload 3. transitionin Preload: 1. preload 2. 3. transitionout transitionin Reverse: 1. preload 2. 3. transitionin transitionout Cross: 1. preload 2. transitionout & transitionin
DIEPER IN GAIA 24 SEARCH ENGINE OPTIMIZATION Alternative HTML pagina s HTML content in Gaia HTML Scaffolding in het Gaia panel
DIEPER IN GAIA 25 GAIA PANEL Scaffolding Fla s Page classes SEO HTML files Bytes in site.xml Publish Update Resize
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);
DIEPER IN GAIA 27 OVERIG Gratis Filesize Let op: (wel betalen als je niet wilt wachten op het panel: $25,- of minder) + 37.7 kb voor de main.swf + 3.7 kb voor elke page transitionincomplete transitionoutcomplete destruction / memory management
ONZE GAIA MODS 6 JUNE 2011
GAIA MODS 29 GAIA & TEMPLE LIBRARY Destruction removealleventlisteners recursive Memory Debugging UI Components Buttons, Slider, Forms, InputFields, CheckBoxes, ImageLoader, VideoPlayer, etc. etc. etc. Utilities
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)
CASE STUDY: AH VOETBALPLAATJES 6 JUNE 2011
BEDANKT! ww.tyz.nl www.gaiaflashframework.com templelibrary.googlecode.com www.mediamonks.com www.facebook.com/mediamonks 6 JUNE 2011