Flash

De rol van Flash als ontwikkelomgeving voor volledige websites lijkt uitgespeeld te zijn. Javascript libraries zoals jQuery en nieuwe ontwikkelingen zoals HTML5 en Silverlight zijn betere keuzes door snellere ontwikkeltijd en betere SEO. Maar daarmee is Flash nog niet afgeschreven! Voor games, animaties en projecten met complexe interactie of 3D blijft Flash voorlopig de beste keuze. En in de toekomst kan Flash op mobiel gebied zorgen voor een standaard tussen de vele nieuwe browsers.

Hieronder enkele voorbeelden van Flash projecten waar ik aan gewerkt heb.

FlashFlood

Mijn eerste grote AS3 project is een poging om een nieuw soort blog op te zetten. In plaats van statische tekst wilde ik een interactieve, dynamische experience bieden. Teksten kunnen in deze blog aangevuld worden met beeld, geluid, animatie en video. Een verhaal kan ook interactief aan bezoekers gepresenteerd worden. Doordat mijn werkzaamheden meer naar PHP verschoven is het project nooit volledig afgerond.

http://blog.2shine.nl/

Punda MiliaEen project van Zinnebeeld

Bij Zinnebeeld was mijn eerste project het afronden van deze Flash website. De navigatie en interactie hebben een sterk 'iPhone-gevoel'. Er zitten een aantal bijzondere features in de website, zoals de 'opslaan als PDF' functie. Nadat de bezoeker de website heeft afgesloten wordt de inhoud van alle opgeslagen pagina's in een enkel PDF bestand aan de bezoeker gemaild.

http://www.pundamilia.nl/

Sourcy met een VleugjeEen project van Guilty People

Als onderdeel van de website van Sourcy hebben we bij Guilty People een speciale campagnesite voor 'Sourcy met een vleugje' ontwikkeld. Via Geenstijl is deze website een viraal succes geworden. Mijn aandeel bestond voornamelijk uit het ontwikkelen van de server-side code achter het vleugjes systeem, de beveiliging en het bijbehorende CMS.

http://www.sourcy.nl/

Flash Slider Template

Een slider was voor de opkomst van jQuery een veel gevraagd Flash element en het heeft nog steeds bepaalde voordelen, zoals eigen fonts, video en complexe overgangseffecten. Deze template heb ik ontwikkeld om een goede standaard versie te hebben om mee te kunnen werken. De broncode is AS3 en zo schoon als ik het kon krijgen.

Demo Flash Slider

Download source code (AS3)

Vrienden van Amstel LiveEen project van Guilty People

De website voor het jaarlijkse muziekspektakel in Ahoy. Voor dit project heb ik een groot gedeelte van de Flash uitwerking gedaan.

Oude site offline, bekijk de screenshots

BandoleraEen project van Guilty People

Naast het grootste gedeelte van de Flash ontwikkeling heb ik met PHP een eenvoudige CMS gemaakt. De site was ontwikkeld als een soort virtuele modeshow en was vooral interessant door de interactie met de hoge resolutie foto's.

Oude site offline, bekijk de screenshots

Spicy Lemon video viral

Als viral stelt het weinig voor, maar technisch was het erg leuk om te maken. Van een bestaande reclame moest een Flash video viral in de stijl van 'Elf yourself' ontwikkeld worden. Gebruikers kunnen twee foto's uploaden en de gezichten worden vervolgens over het filmpje geanimeerd.

http://www.spicylemon.nl/

Miss FrisEen project van Guilty People

De Miss Fris website is ontwikkeld voor Vrumona als platform voor een aantal competities tussen horeca gelegenheden. Elk seizoen heeft een ander thema, maar het komt er over het algemeen op neer dat er zo veel mogelijk van bepaalde Vrumona producten verkocht moeten worden.

Voor deze website heb ik de volledige uitwerking in Flash voor mijn rekening genomen. De site is gekoppeld aan het SANA CMS systeem.

Site offline, bekijk de screenshots

Enjoy Heineken ResponsiblyEen project van Guilty People

De website van 'Enjoy Heineken Responsibly' is in 49 talen te bekijken, waaronder Khmer, de taal van Cambodja, waar tekens voor gebruikt worden die niet bij een westers besturingssysteem geleverd worden. De andere grote uitdaging van dit project was de opzet: de oorspronkelijke ontwikkelaar had voor SEO doeleinden de website uit losse Flash onderdelen opgebouwd. Al deze onderdelen communiceren met elkaar via Javascript om de interactie goed te laten werken.

http://www.enjoyheinekenresponsibly.com/

Vespro Trophy ToolEen project van Guilty People

Voor de online winkel van Vespro hebben we een Flash tool ontwikkeld waarmee bezoekers zelf een beker, medaille of trophy samen kunnen stellen. Met een aantal eenvoudige stappen kunnen de verschillende onderdelen gekozen worden en een gravering ingesteld worden.

Site offline, bekijk de screenshots

Naar boven

PHP / HTML / jQuery

Het is nooit mijn bedoeling geweest om een programmeur te worden, maar als ik ergens in geloof dan wil ik het ook maken. Door projecten als PAM en FlashFlood heb ik erg veel opgestoken. Helaas kom ik door als programmeur te werken niet vaak in de gelegenheid zelf nieuwe concepten te verzinnen. In mijn eigen tijd heb ik wel enkele experimenten opgezet, maar ik ben nu op zoek naar een bedrijf waar ik mijn volledige creativiteit in kan zetten!

Hieronder een selectie van projecten waar ik aan gewerkt heb:

TXT

Dit zelf ontwikkelde concept is een nieuw platform waar goed doordachte discussies over maatschappelijke, religieuze, filosofische en culturele discussies gevoerd worden. Het project is nog volop in ontwikkeling maar de belangrijkste onderdelen zijn al uitgewerkt.

De twee elementen die deze site uniek maken zijn de interface en de toegangsregels. De interface is zo opgezet dat de kleur en de horizontale positie van berichten aangeeft hoe de plaatser tegenover de centrale stelling staat. Daarnaast wordt de kwaliteit van de berichten bewaakt doordat nieuwe gebruikers (Rogue Warriors) zich eerst moeten bewijzen: pas als ze met hun berichten de interesse van ten minste 3 volwaardige leden (TXT Warriors) gewekt hebben krijgen ze zelf de status van TXT Warrior.

http://www.txtbattles.nl/

PAM

De Personal Assets Manager is een systeem dat ontstaan is uit mijn behoefte orde te scheppen in de duizenden kleine lijstjes, briefjes, post-its, notepad files en andere losse aantekeningen die op mijn bureau en desktop rondzwierven.

Met PAM kunnen gebruikers aantekeningen ordenen in 'assets'. Daarnaast is het mogelijk bestanden aan deze assets toe te voegen. Doordat gebruikers hun eigen afbeeldingen voor assets kunnen gebruiken, kunnen zij een persoonlijke iconologie creëren, waardoor zij snel de weg kunnen vinden.

Bekijk de site met een demo account (demo : demo) of bekijk de screenshots

AHK Poster ToolEen project van Zinnebeeld

Voor de Amsterdamse Hogeschool voor de Kunsten hebben we bij Zinnebeeld een tool ontwikkeld waarmee medewerkers eenvoudig nieuwe posters kunnen maken. Deze worden direct vanuit de tool als PDF bestanden aan de drukker doorgestuurd.

Site niet toegankelijk voor publiek, bekijk de screenshots

Kneppelhout & Korthals advocatenEen project van Zinnebeeld

Mijn aandeel in deze website voor een advocatenkantoor in Rotterdam bestaat uit het ontwikkelen van alle PHP code. Achter de site zit een uitgebreid maar eenvoudig te bedienen CMS systeem. Daarin kunnen de medewerkers van Kneppelhout & Korthals ook hun nieuwsbrieven samenstellen.

http://www.kneppelhout.nl/

Van OrlyEen project van Zinnebeeld

Een van de serie websites voor artiesten die ik bij Zinnebeeld gemaakt heb. Deze site maakt op veel plaatsen gebruik van jQuery en inspireerde me voor het ontwerp van de nieuwe 2Shine website.

http://www.vanorly.com/

Het Laatste WoordEen project van Zinnebeeld

Deze website heeft een aparte opzet waarbij de content over de intropagina geschoven wordt. Mijn aandeel bestaat voornamelijk uit de PHP code achter de site.

http://www.hetlaatstewoord.nl/

IDH - Duurzame HandelEen project van Zinnebeeld

Een vrij uitgebreide tweetalige website met CMS en een tool om nieuwsbrieven samen te stellen. Voor dit project heb ik de volledige PHP ontwikkeling gedaan.

http://www.duurzamehandel.com/

Naar boven

Innovation

Wat me het meest aanspreekt aan webdesign is dat het gebied nog volop in ontwikkeling is en er veel ruimte is voor innovatie. Daarbij haal ik vooral inspiratie uit de dynamische wereld van game design, een broedplaats voor creatieve oplossingen. Door de vrolijke energie van games door te vertalen naar webdesign ontstaan nieuwe systemen die mensen met plezier kunnen gebruiken.

Ook projecten zoals FlashFlood, TXT en PAM zijn ontstaan uit de behoefte een betere oplossing voor algemene problemen te vinden.

Custom Mood Avatarconcept

Dit concept is een goed voorbeeld van game design toegepast op webdesign. De avatar is een bekend begrip bij gamers en wordt ook in versimpelde vorm op fora gebruikt. Een avatar is een virtuele representatie van de gebruiker.

Flash required...

Klik op de avatar en sleep omhoog of omlaag om de stemming van de avatar aan te passen

De 'Custom Mood Avatar' kunnen gebruikers zelf samenstellen aan de hand van eigen beeldmateriaal. Deze avatar kan vervolgens gebruikt worden om op een intuïtieve manier emoties over te brengen aan de online community. Bekijk de concept presentatie om te zien hoe gebruikers zelf een avatar samen kunnen stellen.

Bekijk de concept presentatie

Verbeterde window resizeprototype

Bij de gangbare methode om een scherm van grootte te veranderen moeten gebruikers eerst een richting kiezen: horizontaal, verticaal of allebei. Voor die laatste optie moet vaak op een lastig klein hoekje geklikt worden. Als de keuze eenmaal gemaakt is moet opnieuw geklikt worden om een andere richting op te kunnen schalen.

Mijn idee is om een extra overgang aan dit gedrag toe te voegen: als de gebruiker een horizontale of verticale resize doet en de muis passeert de hoek van het scherm dan schakelt de resize functie automatisch over naar de diagonale methode. Probeer het zelf in het voorbeeld hieronder.

Scrollbar Activity Indexprototype

Met deze 'heatmap' browser plugin kunnen bezoekers snel zien waar de interessante onderdelen op een lange pagina zich bevinden.

De plugin houdt bij hoe lang bezoekers op bepaalde plekken op de pagina stil staan, met een maximum van 5 minuten om foutieve gegevens te voorkomen. Hoe langer een bezoeker stil staat bij een bepaalde plek, hoe groter de kans dat de inhoud de moeite waard is.

Deze gegevens worden in beeld gebracht als een 'heatmap' die in de scrollbar geplaatst wordt. Als de gebruiker nu bijvoorbeeld op een lange pagina met veel code komt, dan is het niet meer nodig alles te lezen om te vinden waar het juiste antwoord zich bevindt. Hoogst waarschijnlijk is dat op de plaats waar de meeste bezoekers zijn blijven hangen.

In het prototype hieronder is direct te zien dat de meeste bezoekers alleen naar de plaatjes gekeken hebben. Klik op de button om te zien hoe nieuwe data de heatmap aanpast. In dit prototype wordt de opname van data al na 15 seconden gestopt.

Stay in TouchPrototype

Het idee van deze applicatie is om een overzicht te geven van de mensen die je niet vaak ziet, gesorteerd op hoe hard ze je aandacht nodig hebben. Dat wordt bepaald door een formule gebaseerd op de prioriteit die je aan de persoon toekent en wanneer je de persoon voor het laatst gemaild, gesproken en gezien hebt. De data zijn met een simpele klik aan te passen.

De kleuren van de hokjes geven aan waar je het beste aandacht aan kan besteden om de status van je contact te verbeteren. Personen kunnen direct vanuit het systeem gemaild worden en op een mobiel platform zou je hen ook direct moeten kunnen bellen. Het is ook mogelijk vast een concept mail voor je contact klaar te zetten.

Site niet beschikbaar voor publiek, bekijk de screenshots

PixelVisitorsPrototype

Deze kleine Flash applicatie is ontwikkeld om de activiteit op een website in beeld te brengen. Iedere pixel representeert een bezoeker van de site. De bewegingen kunnen in een uitgewerkte versie ook gekoppeld worden aan de acties van de bezoeker. Het is ook mogelijk de hoeveelheid bezoekers van de afgelopen maanden te bekijken.

Free ScrollbarDemo

Het idee achter dit concept is dat er extra functies aan de scrollbar verbonden kunnen worden. Deze functies kunnen aangeroepen worden door de scrollbar handle (het blokje) uit zijn vaste pad te trekken. De eerste nieuwe functie is dat het nu direct mogelijk is te scrollen door de scrollbar handle omhoog en omlaag te bewegen. Hoe verder je van de horizontale as beweegt, hoe sneller je kan scrollen.

Door de scrollbar handle naar de linkerkant van het scherm te slepen verschijnen een aantal nieuwe mogelijkheden. Naast de standaard nieuwe scroll methode kan met de 'Lock' functie de scroll snelheid vast gezet worden, zodat je zonder zelf te scrollen de content door kan lopen. Met de 'Zoom' functie kan door van links naar rechts te slepen in- en uitgezoomd worden. Met de 'Mark' functie kunnen stukken tekst of afbeeldingen gemarkeerd worden voor later. In de demo werkt dit alleen op een vaste plaats.

Met de 'Find' functie krijg je een zoekveld bij de cursor. Als hier een tekst ingevoerd is (de demo werkt op 'drive') dan kan je met de enter toets door de gevonden resultaten skippen, net zoals bij een normale 'find' functie. Maar met deze methode raak je al snel uit het oog waar je bent in het document. Daarom is er een tweede functie toegevoegd: als je met de nieuwe methode door het document scrollt dan zal de scrollsnelheid automatisch afnemen bij gevonden resultaten. Zo kan je snel zien waar in de tekst de resultaten precies voorkomen.

De demo van de verschillende mogelijkheden is ontwikkeld voor een presentatie en niet erg geschikt om via de browser te bekijken. De screenshots geven waarschijnlijk een beter beeld van het idee.

Probeer de presentatie demo (3,4 MB) of bekijk de screenshots

Webcam Mirrors

Een eenvoudig experiment met het spiegelen van webcam input.

Probeer de applicatie of bekijk enkele screenshots

Naar boven

Other talents

Game design, animatie, foto's bewerken en muziek maken zijn dingen waar ik altijd wel mee bezig geweest ben. Het zijn dingen waar ik ook professioneel graag meer mee zou doen.

Games

Hoewel de tijd om games uit te spelen me vaak ontbreekt, volg ik de ontwikkelingen in game design op de voet. Door het jonge publiek en de snelle ontwikkelingen op technisch gebied komen er enorm veel innovatieve ideeën uit games.

HamsterwereldEen project van IJsfontein

Tijdens mijn stage bij IJsfontein heb ik meegewerkt aan het ontwikkelen van de Hamsterwereld website. De website heeft een aantal thema's verdeeld over de vier kwartalen van het jaar. Tijdens iedere periode bezoeken de hamsters een ander land om daar te onderzoeken waar de producten in de supermarkt vandaan komen. Mijn aandeel bestond uit het bedenken van het concept van het themaspel, het concept van het spel 'Land in Zicht', een deel van de eigenschappen van de drie karakters en de technische uitvoering van de overzichtskaart.

Omdat het themaspel de grootste publiekstrekker van de site is en er rekening gehouden moest worden met een beperkt budget, was het belangrijk een spelvorm te vinden die gemakkelijk aan te passen zou zijn voor toekomstige edities van de site. Het uiteindelijke concept is een verzameling minigames die zich afspelen in de lokale fabriek. Voor de nieuwere edities van het spel hoeven alleen de graphics aangepast te worden.

Bekijk de website of de screenshots

Diabeest

Mijn laatste grote schoolproject was een innovatief project om kinderen met diabetes te leren omgaan met hun ziekte. Door een pratende pop, het Diabeest, te koppelen aan een dynamische, interactieve wereld, krijgt de ziekte een gezicht voor de kinderen.

Voor onze presentatie hebben we onder andere een webcam game en een platform spel met joypad controls ontwikkeld. We hebben ook de pop met gesimuleerde spraak en spraakherkenning gemaakt. Mijn aandeel in het project bestaat uit een groot gedeelte van de concept ontwikkeling en de technische uitvoering van de demo's. Een gedeelte van dit concept is uitgewerkt door Ranj onder de naam GRIP.

Bekijk de promovideo

Video

Ik heb altijd al een grote interesse gehad in het samenspel van video en geluid. Videoclips van bijvoorbeeld Chris Cunningham en Michel Gondry zijn een grote inspiratie geweest. Op CMD, mijn laatste opleiding, heb ik bij elk project waar dat mogelijk was met video en animatie gewerkt. Mede daardoor kreeg ik mijn stage bij Ranj waar ik animaties voor de Mr Kahoona Show gemaakt heb.

Mr Kahoona ShowEen project van Ranj

Tijdens mijn stage bij Ranj kon ik meteen beginnen met het maken van animaties voor de Mr Kahoona Show, een uniek programma dat door de zender LLINK op Nederland 3 uitgezonden is. Het productietempo lag erg hoog en ik heb hier veel opgestoken.

De 'Use less' animatie was een van de eerste onderdelen die ik gemaakt heb. Deze animatie is helaas uit de show gehaald omdat het thema niet goed aansloot bij het vegetarische imago van de zender.

Bekijk enkele animaties of screenshots van mijn werk

Design

Hoewel mijn talent voornamelijk bij concept creatie en technische uitvoering ligt komen er af en toe ook wel design opdrachten op mijn pad.

Huisstijl Nolly Nugteren

De praktijk van mijn moeder was toe aan een nieuwe huisstijl. Op dit moment nog in ontwikkeling, maar toch leuk om vast iets van design te kunnen laten zien.

Bekijk de screenshots

Boek omslag proefschrift Petra Jongmans

Het ontwerp voor het proefschrift van Petra Jongmans. De uitnodiging werd op een deel van de omslag gedrukt dus deze is er direct bij ontworpen.

Naar boven

Contact

Via het onderstaande formulier kan je mij direct mailen. Je kan natuurlijk ook je eigen mail programma gebruiken.

Naam Email Bericht niet invullen a.u.b. Verzenden