© 2004 | clockwork is een onderdeel van

Building a large scale eLearning applicationwith Flash

Arjen Veneman & Owen van DijkFlashtival Rotterdam – 27 september 2004

© 2004 | clockwork is een onderdeel van

Introductie

• Zwijsen - educatieve uitgeverij- ontwikkelen lesprogramma’s- bijbehorende software (schatkist en veilig leren lezen)

• Veilig leren lezen2 cdroms, 12 thema’s, 28 spelmodules.80 % van de lagere scholen maakt gebruik hiervan.

• Schatkist

• Clockwork

© 2004 | clockwork is een onderdeel van

Over Clockwork• Opgericht in 1996

• Marktleider in multichannel e-business solutions

• Speerpunten– Self-service

– Interactive Marketing

– E-commerce

• Creatief & technologisch hoogwaardig

• 150 collega’s

• Kantoren in Zwolle en Amsterdam

• Sinds maart 2003 onderdeel van Ordina NV

When Apple first started out,people couldn’t type.We realized: death would eventually take care of this.

Steve Jobs

© 2004 | clockwork is een onderdeel van

Agenda

• Visueel (30 minuten)Tonen van de applicatie. Project beschrijving.Principes van hergebruik van de voorkant bekeken.

• Technisch (25 minuten)Zelfde principes van hergebruik technisch bekeken.Technische design keuzes.

• Vragen?

© 2004 | clockwork is een onderdeel van

Deel 1: van concept naar creatie ( 30 min )

© 2004 | clockwork is een onderdeel van

Veilig Leren Lezen

• VOORBEELD 1Een voorbeeld sessie van een kind wanneer deze de applicatie start

© 2004 | clockwork is een onderdeel van

Project Aanpak

• Keuze illustratoren

• Keuze stemmen

• Keuze technologie

• Beschrijven spellen

• Thema’s beschrijven (concept/interaction)

• Architectuur document

© 2004 | clockwork is een onderdeel van

Project Organisatie

Illustraties

Animaties

Grafische producties

Project management

Concept grafisch

Concept logisch

Software Ontwikkeling

Architectuur

Inhoudproductie

Audioproductie

© 2004 | clockwork is een onderdeel van

Kernen ( Thema’s ) en Spellen

Kern 1

Kern 12

Game 1

Game 2

Game 3

Game 28

Oefenblok

Toetsblok

Oefenblok

Toetsblok

• 12 thema’s.

• Oefenblok vs toetsblok.

• Spellen in thema’s.

• VOORBEELD 2, thema ‘schatgravers’ en ‘op het podium’.

© 2004 | clockwork is een onderdeel van

Onderdelen van een spel

Zoem Grafisch

Speaker Grafisch

Zoem Audio

Speaker Audio

Content Grafisch Content Audio

Content Skin

Voortgangsmeter

Achtergrond

• VOORBEELD 3

OK knop

© 2004 | clockwork is een onderdeel van

3 Type spellen

• Leeswoorden – Woordbeeld, herkennen van woorden. Voorbeeld

• Spelwoorden – Het kunnen spellen van woorden.VOORBEELD 4

• Begrijpend lezen – Begrijpen van zinnen.VOORBEELD 5

© 2004 | clockwork is een onderdeel van

Niveaus

• Niet alle studenten hebben hetzelfde niveau.VOORBEELD 6

Kern

Niveau

2

1

3

1 2 3 4

© 2004 | clockwork is een onderdeel van

Opslag gegevens

• Opslag gegevens nodig om voortgang bij te houden. Sessietijd, speltijd en scoring.

• Resultaten alleen voor de leerkracht. Kind heeft geen notie van van score en niveau.

• Zwijsen software manager.

• Leerling menu.

• Opslag met behulp van Screenweaver.

© 2004 | clockwork is een onderdeel van

Architectuur

Client (kind)

Veilig leren lezen

Schatkist

Leerling-menu

Server

XML Data storage

Client (leerkracht)

ZSM

Plugin

© 2004 | clockwork is een onderdeel van

Gehele applicatie

• VOORBEELD:– Aanmaken leerling.

– Selecteren in leerling menu.

– Starten van de applicatie.

– Tonen van de gegevens.

© 2004 | clockwork is een onderdeel van

Deel 2: Techniek ( 25 min )

© 2004 | clockwork is een onderdeel van

Introductie

• Opstarten.

• Architectuur opzetten.

• Invariantie modelleren- Spellen bestaan uit items en containers.- Spellen maken gebruik van dezelfde functionaliteiten.- Spellen volgen dezelfde flow.

© 2004 | clockwork is een onderdeel van

4 principes van hergebruik

• Scheiden van lagen. Items en containers

• Services.Veelgebruikte functionaliteiten

• Event listener model.Gameflow

• Inheritance.Class method overerving

© 2004 | clockwork is een onderdeel van

Scheiden van lagen (items en containers)

De lagen:

• muisgedrag (mouse over, click of sleep).

• grafische content

• educatieve content

VOORBEELD 7

© 2004 | clockwork is een onderdeel van

Item1 Item2 Item3 Dupliceer de movieclip.

Item template Movieclip met een Skinholder

Met skin + gedragItem1 Item2 Item3

ContentLicht Lucht Dicht

Item initialisatie

© 2004 | clockwork is een onderdeel van

Services

MoveManager

Audioplayer

Highlight

Timer

ActivityManager

Loader module

VOORBEELD 8 (SCHATKIST)

© 2004 | clockwork is een onderdeel van

Event listener model (gameflow)

Initialization

Start game

Start round

Finish round

Finish game

Close game

Contentloader

Game Statistics

GameManager

Progressmeter

© 2004 | clockwork is een onderdeel van

Inheritance (Class method overerving)

Game 1

ContentLoader

SuperContentloader

Game 2

ContentLoader

Method: startRound

© 2004 | clockwork is een onderdeel van

Refactoring ( Code smell )

• Gedurende de bouw constant refactoring

• Halverwege 1 grote refactoring slag

• Winst 30% tijd/regels code (30k -> 20K)

• Voorbeeld: click/drag game. Logica was wel generiek maar de koppeling moest steeds weer opnieuw gedaan worden.

© 2004 | clockwork is een onderdeel van

Extra’s

• Installatie procedure

• Distributie procedure

• CVS

• Content conversie

© 2004 | clockwork is een onderdeel van

Deel 3: vragen en contact informatie

© 2004 | clockwork is een onderdeel van

Contactgegevens

• http://www.owenvandijk.nl/

• Clockwork BV

‘oranjekerk’

Van Ostadestraat 149

1073 TK Amsterdam

owen.van.dijk@clockwork.nl

Tel: +31 (0)20 607 70 00

Fax: +31 (0)20 607 70 77