Je ziet ze tegenwoordig steeds vaker. Die supergelikte flash sites met de mooiste animaties, geen page refreshes en heerlijk simpel. Vanaf het moment dat ik bezig was met het web heb ik me dan ook vergaapt aan sites als The FWA (www.thefwa.com). Op deze site worden de meest mooie flash websites bijgehouden van het web, en daarom is deze site is dan ook al jaren een inspiratiebron voor mij. Maar nu, na mezelf 3 jaar verdiept te hebben in de wereld van het web, vond ik het wel eens tijd worden om zelf zo’n mooie flash site te maken. De laatste 2 jaar heb ik me meer en meer verdiept in Flash, dus zo’n mooie site zou ik toch ook moeten kunnen maken?
Het begin was natuurlijk om een leuk concept te bedenken. Dit bleek echter nog een stuk moeilijker te zijn dan ik had verwacht. Er was simpelweg zoveel moois. Wat moest ik nu kiezen? Ik begon wat te photoshoppen, maar al snel bleek dat ik het liever tekende in Flash. Ik maakte een week lang allerlei designs, maar was over geen van allen echt tevreden. Ze waren wel mooi, maar niet mijn stijl.
Wat is dan wel mijn stijl? Ik had echt geen idee. Tot ik op een dag een paar glossy robot achtige vector buttons en stickers tegen kwam. Ondanks dat ik het hele web drie keer heb na gezocht kan ik ze helaas niet meer terug vinden, maar ze leken in ieder geval erg veel op dit:
Design
Deze stijl vond ik direct helemaal geweldig, en na wat geprobeerd te hebben in Flash bleek dat het ook nog eens een perfecte stijl is om in flash te tekenen. De grap is namelijk dat er niet teveel poespas aan zit, allemaal lekker strak is en hele subtiele verloopjes heeft. Daarnaast zijn de kleuren cruciaal voor het effect.
Toen de stijl en het onderwerp duidelijk waren miste ik nog de uitwerking. Na een paar dagen The FWA afstruinen kwam ik op deze site: http://www.zeebee.co.uk/ Buiten het feit dat deze site er super strak uit ziet, werkt hij heel fijn en is hij super duidelijk. Je hebt nooit het idee dat je verdwaald bent in de site, of dat content mist. Toen ik eenmaal had bedacht hoe ik het effect na kon bootsen, besloot ik het eindresultaat te maken in Flash CS3 met als basiscode AS2 (ik wist nog niks van AS3, vandaar dat ik besloot het te maken in AS2).
Ik begon met het maken van de cirkel. Het lastige daarvan was het 3D effect. In CS3 zit nog helemaal geen 3D engine, en met applicaties van derden zoals papervision had ik ook geen ervaring. Ik gooide het dan ook op de hackersmanier, en hackte mezelf een weg door AS2. Inmiddels was ook mijn stage bij TriMM begonnen, en ze vertelden me dat een paar weken later mijn Flash cursus zou beginnen. Dit vond ik natuurlijk helemaal geweldig, want ik had nog wel een zeecontainer vol vragen.
The Circle - AS2
Na 2 weken designen en programmeren was dit het resultaat.
Het zag er uit zoals ik wilde, maar was enorm zwaar, vertoonde allerlei onverklaarbare bugs en was nog lang niet af. Ik moest dus beginnen met de bugs op te lossen, maar omdat deze applicatie was gebouwd met het spaghettimodel viel dit nog niet mee. Na een week prutsen gaf ik het op. Ik had een halve applicatie gemaakt die vol zat met bugs, en dus waardeloos was. Dit kwam voornamelijk omdat je een een ingewikkeld model bouwt wat je steeds meer uitbreidt aan alle kanten, maar waar geen vaste structuur in zit. Het probleem was dat als een gebruiker links op een knop drukte en daarmee een event afvuurde, er rechts nog wel 3 events afgevuurd konden worden die allemaal weer hun eigen functies aanroepen. Hierdoor verlies je op den duur overzicht, en krijg je onverklaarbare bugs.
Op dat moment begon ook mijn Flash Cursus van Paul. In de eerste les werd al duidelijk dat het een AS3 only cursus zou worden. Omdat ik alleen nog maar met AS2 had gewerkt, was dit voor mij een lastige omschakeling. Ik zag er enorm tegenop omdat ik bang was dat al mijn kennis nutteloos bleek te zijn in AS3. Maar na 1 week bleek al snel dat dat niet het geval was, en dat AS3 wel degelijk een enorme verbetering is.
Bij de cursus gingen we al gauw in op applicatiemodellen en hoe je een structuur van een applicatie om zou moeten zetten. Hierover had ik nooit echt goed nagedacht, en het was voor mij dus ook helemaal nieuw. Ik was altijd gewend veel te praten over de code, en hoe je met minder code het zelfde kunt doen. Een dergelijke applicatie structuur had ik zelf al min of meer ontwikkeld, maar dit was een stap hoger, en ging in op hoe je je applicatie op zou moeten zetten.
Zo is er bijvoorbeeld naast het spaghettimodel ook nog het MVC model. Dit is de meest gebruikte methode, en is (mits goed toegepast) heel eenvoudig uit te breiden, aan te passen of kleiner te maken. Bij een MVC model (Model, View, Controller) is het de bedoeling dat je een Model maakt (Dit is min of meer de database binnen je applicatie), een View met eventuele extra view classes (Dit is alles wat je op het scherm ziet), en een Controller (Dit is het brein van je applicatie).
MVC Model
In dit plaatje word ongeveer duidelijk hoe het werkt. Het idee is om te beginnen met 1 controller. Voor grotere applicaties worden meestal meerdere controllers gebruikt zoals een opstart controller en een runtime controller. Deze controller maakt vervolgens een lege model, en zegt tegen de model “ga je data halen”. Het model haalt z’n data, geeft een seintje terug als “ok ik heb de data ingeladen en verwerkt” en vervolgens gaat de controller daar mee aan de slag. Hij maakt een viewmanager en geeft hem opdrachten. Een opdracht zou bijvoorbeeld kunnen zijn teken een voetbal. De viewmanager maakt dan een nieuwe viewclass die een bal laat zien, en zet deze op je scherm. Als vervolgens een bezoeker op de bal klikt gaat dat signaal omhoog, en bereikt de controller. De controller kan dan op zijn beurt bepalen wat er op dat moment in de applicatie gaat gebeuren. Hij kan bijvoorbeeld aan de model vragen “op welke plek zijn we nu binnen de applicatie?”. De model zegt dan “we nemen nu penalty’s” waarop de controller weer tegen de viewmanager zegt “ok, schop tegen die bal aan”.
Het voordeel hiervan is dat je een heel gestructureerd model hebt waardoor uitbreiden/beheren veel eenvoudiger wordt. Ik besloot helemaal opnieuw te beginnen, en mijn website opnieuw te bouwen in AS3, volgens de methoden die ik had geleerd bij mijn cursus van Paul.
Ik begon met te inventariseren van wat de applicatie moest kunnen. Wat een logische volgorde zou zijn om dit te realiseren en hoe ik dit uiteindelijk ging vertalen naar code. Dit zag er ongeveer zo uit:
Functionaliteit:
- Projecten sorteren op jaar en op type
- Jpg’s, png’s, gif’s en FLV’s kunnen laten zien
- Projecten kunnen meerdere jpg’s/png’s/gif’s/FLV’s als inhoud hebben
- Mijn tweets integreren
- E-mail functionaliteit
- Rechtermuisknop en mouseWheel functionaliteit
- Volledig toetsenbord functionaliteit (de site moet te besturen zijn zonder muis)
- Fullscreen en geluid functionaliteit (voor een betere beleving)
Volgorde:
- Preload
- Applicatie start
- Model haalt en verwerkt data
- viewmanager start met intro
- viewmanager maakt menu
- viewmanager haal Twitter posts
- Intro eindigt Startup controller geeft controle over aan main controller
Code:
- Data zal worden aangeleverd als XML
- Data word omgezet naar array van objecten met een toegevoegd ID
- Meerdere foto’s/filmpje’s worden in dataObject gezet als workArray
- Cirkel draait op X, Y, Z as en verplaatst zich op de Z as.
- Alle grote events gaan naar de controller (events als item click, cirkel swap, menu click)
- Kleine events worden (mits mogelijk) afgevangen door de viewmanager (events als “jpg vergroot click”)
Toen ik eenmaal een paar weken aan het programmeren was merkte ik al gouw dat mijn beperkte AS3 kennis het me erg moeilijk maakte. Daarnaast maakte ik een aantal essentieële modelfouten. Zo had ik bijvoorbeeld:
een functie om een item te openen. Deze functie werd aangeroepen door een mouseEvent (click). Maar nu wilde ik dat dezelfde functie ook te openen zou zijn door middel van een enter. In plaats van een keyPress functie te maken wijzigde ik de eerste functie in:
Private function openItem(pEvent:MouseEvent = null, pItemId:uint = null):void{
if(pItemId == null){ //je bent hier gekomen via een mouseclick
}else{//je bent hier gekomen via enter
Dit is de hack manier, en het beste is dan ook dit soort manieren te vermijden. een betere optie zou zijn:
- een event listener voor een keyboard toets – doe de keyboard functie
- een event listener voor een open_item event – doe de open_item_click functie
-functie keyboard: check welke toets het is, als het de enter is doe dan de open_item_enter functie
-functie open_item_enter: haal het ID, daarmee de data en doe je ding
-functie open_item_click: haal het ID, daarmee de data en doe je ding
Na een hoop sparren met Paul werd het mij langzaam steeds duidelijker; als je verder wilt met programmeren dan moet je dit kunnen.
Na zo’n 7/8 weken was dit het resultaat: link
The Circle
Toen ik dit eenmaal bereikt had, was het moeilijkste gedeelte achter de rug. Ik moest toen alleen nog besluiten hoe ik mijn data ging beheren. Hiervoor zijn tal van opties, waarvan ik al heel veel slechte heb geprobeerd. Van data opslaan in .txt bestanden op je server tot een XML RPC voor wordpress. Geen van deze opties waren geschikt voor mijn doeleinden, en het bleek toch al snel dat ik een MySQL database nodig was. Dit had ik bij TriMM al geleerd, en bleek een stuk eenvoudiger te zijn dan dat ik aanvankelijk dacht. Maar nog steeds was er dat gat tussen beheren/database/flash.
Omdat ik wel een beetje PHP/HTML/CSS kennis had besloot ik de site te gaan beheren door middel van mijn eigen custom made CMS in PHP. hiermee kon ik de database vullen/wijzigen/verwijderen. Deze CMS is hier te vinden: link Deze CMS had ik na 1 week af, en hiermee was het gat tussen beheren en database gedicht.
Toen bleef er nog het gat over van database naar Flash. Omdat Flash niet zomaar een database kan benaderen zal daar altijd een tussenstap moeten zijn. Dit kan in enorm veel talen en op enorm veel manieren. Ik zou bijvoorbeeld een xml dump kunnen doen vanaf de database die Flash vervolgens weer uitleest. Nadeel is alleen dat die XML dump niet altijd up-to-date is, en bovendien heb ik geen zin om bij iedere update die xml dump te maken. Dit is natuurlijk wel te automatiseren, maar het klonk me toch een beetje dubbel. Ik besloot het anders te doen, en een php pagina te maken die alles uit de database haalt, en dit weergeeft als XML formaat. Deze pagina is hier te vinden: link
Toen dit eenmaal ook werkte was de applicatie af, en kon ik trots terug kijken naar wat ik had gebouwd. Ik heb de site sindsdien nog een aantal keer ge-update met functies als: javascript call naar lightbox als je een foto wilt vergroten, een settings change box in het begin en een RSS Feed.
The Circle - Intro scherm
The Circle - Lightbox
The Circle - RSS feed
The Circle - Iphone
Ik ben enorm blij dat TriMM mij deze cursus heeft willen geven, en met alle kennis die heb opgedaan tijdens deze cursus. Toen ik bij TriMM kwam zat ik min of meer een beetje vast met programmeren, en dacht ik dat er niet zo veel meer meer was. Maar bij TriMM heb ik gezien dat er nog een gigantische wereld voor me open ligt wat programmeren betreft. Ik ben TriMM/Paul de Jong en Hans Wichman (die mij ook enorm heeft geholpen) enorm dankbaar hiervoor, en ik hoop dat ik doormiddel van dit verhaal deze kennis weer een beetje kan doorgeven aan nieuwe programmeurs.
Greetz,
Marc
