Ricksmuseum

I finally managed to create a good Image Zoom Component with zooming, dragging, navigator and keyboard functionality. It’s build in Flex / ActionScript 3 and I think it’s a nice example of using the MVC (model view controller) pattern to prevent spaghetti code. The model doesn’t know anything about the size of the viewport and the image because that’s something only the view and the controller need to know. The model only knows the aspect ratio of the image and the viewport. When you want to zoom or move, you change the model and after that you update the view based on the values in the model. The model stores the position and size of the viewport in values between 0 and 1. This makes it very easy for the controller / view to scale it to the real size.
I also used the new ScrollRect feature and I like that thing a lot! Tip: Don’t use scaleX and scaleY to resize the large image because than you need to compensate the scale of the viewport. Resizing the image is done by changing its width and height.

I think there are still some things to be done. Depending on the shape of the viewport and image you might want to have the full image visible by adding empty space on the sides. But that’s some which should be easy to implement because of the clear MVC separation. Good luck if you try it and let me know! [rick /at/ companje /dot/ nl]

watch demo
view source

Vandaag hebben Daniel en ik de tussenresultaten van TravelTrace gepresenteerd!

TravelTrace is een Rich Internet Application die wij ontwikkelen in Flex 2.0a.

Dit is tot nu toe even wat ik er over wil zeggen:

1. TravelTrace is behoorlijk cool aan het worden!
2. Flex 2 rules (hoewel nog wel buggy, maar dat mag bij een alpha)

Wie nu al meer wil weten mag mailen of een berichtje achter laten. :-)

Ik heb een project van eind 2004 weer opgepakt, voorheen TrackLog, nu omgedoopt tot TravelTrace.

Samen met Daniel Kuster (student Computer Science) werk ik hieraan in opdracht voor het vak Human Computer Interaction. Het is een vrije opdracht waarbij het interface ontwerp centraal staat.

TravelTrace is een applicatie op internet waarmee een reiziger (doelgroep 1) het verloop van zijn reis kan bijhouden vanaf locatie, bijvoorbeeld een internetcafé. Op deze manier kan de reiziger ‘het thuisfront’ (doelgroep 2) op de hoogte houden.
Het uitgangsprincipe is een kaart van het land of gebied waar de reiziger zich bevindt. Op deze kaart wordt de afgelegde reisroute zichtbaar gemaakt door middel van ‘hotspots’ met daartussen verbindingslijnen. Een hotspot is een plek op de kaart waarbij bijvoorbeeld een verhaal of een aantal foto’s te zien is. In beeld bevindt zich een tijdbalk die loopt vanaf het begin van de reis tot aan de laatste update. Afhankelijk van de grootte van de kaart zal deze niet in zijn geheel zichtbaar zijn, maar worden bestuurd met behulp van een miniatuurweergave van de kaart. De besturing zal ook plaats kunnen vinden via de cursortoetsen op het toetsenbord.
De twee doelgroepen gebruiken de applicatie op een verschillende manier. Het ‘thuisfront’ beschikt over een interface waarmee ze de reis alleen kunnen volgen, de verhalen kunnen worden gelezen en de foto’s worden bekeken. De reiziger zelf heeft daarnaast de beschikking over ‘editing tools’, waarmee nieuwe hotspots (met bijbehorende foto’s en verhalen) aangemaakt kunnen worden.

Mogelijke uitbreidingen op de applicatie zijn het kunnen wijzigen van het detailniveau van de kaart (in- en uitzoomen) en een zoekfunctie naar tekst. Ondersteuning van geluidsfragmenten is ook een mogelijke functionaliteit. Laatstgenoemde functies worden enkel uitgewerkt wanneer er tijd over is.