THIJS BROERSE FLEX USERGROUP
GAIA FLASH FRAMEWORK
6 JUNE 2011
OPBOUW VAN DE PRESENTATIE
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
2
WIE BEN IK EN WAT DOE IK
THIJS BROERSE Nu: • Flash Architect / Flash Lead bij MediaMonks • Beheerder van de Temple Library • Beheerder van onze interne Gaia versie
3
WIE BEN IK EN WAT DOE IK
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
4
WIE BEN IK EN WAT DOE IK
OVER MEDIAMONKS Het grootste creative digital production agency van Nederland Momenteel 124* Monks Gespecialiseerd in werken voor reclamebureaus
(* en opzoek naar nieuw talent)
5
WIE BEN IK EN WAT DOE IK
MEDIAMONKS OFFICES HILVERSUM LONDON
6
NEW YORK
WIE BEN IK EN WAT DOE IK
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
7
WIE BEN IK EN WAT DOE IK
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
8
GAIA FLASH FRAMEWORK
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)
9
GAIA FLASH FRAMEWORK
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!
10
PROJECTEN IN GAIA
6 JUNE 2011
SHOWREEL 2011
6 JUNE 2011
PROJECTEN IN GAIA
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
13
PROJECTEN IN GAIA
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
14
PROJECTEN IN GAIA
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
15
PROJECTEN IN GAIA
16
O'NEILL – TEAM O'NEILL Interactieve producten showcase Onderdelen: • Concept • Illustraties • Design • Animation • Development
interactive skiing experience
PROJECTEN IN GAIA
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
17
DIEPER IN GAIA
6 JUNE 2011
DIEPER IN GAIA
SITE.XML
Pages Assets
(Elke page is een SWF) (SWF, Bitmap, FLV, MP3, XML, JSON, CSS, ByteArray)
19
DIEPER IN GAIA
NAVIGATIE Deeplinking met SWFAddress: www.website.com/#home In code: Gaia.api.goto(Pages.HOME)
Standaard rechtermuis navigatie
20
DIEPER IN GAIA
TRANSITIES Elke page heeft een: • transitionIn() • transitionOut() • transitionInComplete() • transitionOutComplete() Dit kan met code of op de tijdlijn.
21
DIEPER IN GAIA
TRANSITIES
22
DIEPER IN GAIA
TRANSITIES: GAIA FLOW Normal: 1. transitionOut 2. preload 3. transitionIn Preload: 1. preload 2. transitionOut 3. transitionIn Reverse: 1. preload 2. transitionIn 3. transitionOut Cross: 1. preload 2. transitionOut & transitionIn
23
DIEPER IN GAIA
SEARCH ENGINE OPTIMIZATION Alternative HTML pagina’s
HTML content in Gaia
HTML “Scaffolding” in het Gaia panel
24
DIEPER IN GAIA
GAIA PANEL Scaffolding • Fla’s • Page classes • SEO HTML files • Bytes in site.xml Publish Update Resize
25
DIEPER IN GAIA
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);
26
DIEPER IN GAIA
OVERIG Gratis
(wel betalen als je niet wilt wachten op het panel: $25,- of minder)
Filesize + 37.7 kb voor de main.swf + 3.7 kb voor elke page Let op: • transitionInComplete • transitionOutComplete • destruction / memory management
27
ONZE GAIA MODS
6 JUNE 2011
GAIA MODS
GAIA & TEMPLE LIBRARY Destruction • removeAllEventListeners • recursive Memory Debugging UI Components • Buttons, Slider, Forms, InputFields, CheckBoxes, ImageLoader, VideoPlayer, etc. etc. etc. Utilities
29
DIEPER IN GAIA
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)
30
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
