ONSTUIMIG

Het leek me leuk om foto’s zo te presenteren dat het lijkt of ze gemaakt zijn met een polaroidcamera. Want er is niets leuker dan digitaal analoog, of analoog digitaal. Of whatever. Uiteindelijk is dat allemaal gelukt door Flash te gebruiken waar het voor bedoeld is:

Zonder al te veel in details te vervallen, hebben we het volgende nodig:

• een stapel vakantiefoto’s in het formaat van 232x202. voorbeeld
• een XML-bestand met de verwijzingen naar die fotos
• een fotolijstje a la polaroid

Basis
Een van de eerste dingen die ik altijd doe wanneer ik werk met Flash is het instellen van de volgende properties:

• Aantal frames per seconde naar 31
  
• Bij ‘Profile’ breid ik de Actionscript 3 settings uit om zo een startpunt voor de code te krijgen (document class) en alle classes te groeperen. Dus onder ‘source path’ ./classes toevoegen.

Om het fotolijstje te kunnen gebruiken moeten we deze importeren in de libary: ‘file -> import -> import to libary’. Nu is ie op zich al te gebruiken, maar om ervoor te zorgen dat het lijstje gedraaid kan worden en dat foto er netjes in komt hebben we twee symbolen nodig van het type ‘Movie Clip’.

MovieClip1 noem ik ‘empty’ en daar zal ook niets in komen. Ik gebruik hem alleen maar om de locatie van de foto te kunnen aangeven.

MovieClip2 noem ik ‘polaroid’. Ik geef onder linkage ‘Export for actionScript’ aan en geef als classnaam ‘onstuimig.vakantiefotos.Polaroid’ op.

Polaroid
Om het fotolijstje goed te plaatsen hebben we drie lagen nodig op de tijdlijn (frame, foto en bg). Sleep vanuit je library de polariod op de stage, in de laag ‘frame’. Align de foto verticaal op de nullijn en centreer horizontaal.

In de laag ‘Foto’ plaatsen we vanuit de library het symbool ‘empty’ en geven deze een instancenaam ‘c’. Hierin kunnen we de blije vakantiefotoheid plaatsen. De positie van dit object wordt de rechterbovenhoek van het frame, in dit geval, x= -116 & y=10. Als laatste tekenen we in de bg-laag een ‘grijs’ vierkant achter het fotolijstje dat ervoor zorgt dat de fotolijst niet meer transparant is.

Polaroid.as
Deze code is gekoppeld aan de movieclip ‘Polaroid’ en hebben we nodig om straks de ingelezen fotos goed te koppelen aan de polaroid, zodat de foto in de zonet aangemaakte ‘c’ komt. Hiervoor hebben we de volgende code nodig:

Op regel 13: De foto komt binnen in het object.
Op regel 16: De foto wordt gekoppeld aan het object c.

Foto.as
In heb begin hebben we bij de document properties opgegeven dat het Foto-object het uitgangspunt is. Het object bestaat uit de volgende code:

Regel 2 t/m 19: Inlezen van andere objectenrommeltjes die we nodig hebben.
Op regel 25: Welke foto word er op dit moment getoond?
Op regel 26: DataManager is nodig om het XML-bestand te kunnen inlezen.
Regel 43 t/m 45: Het initaliseren van de DataManager en het inlezen van de data.
Regel 51: Wanneer de DataManager het bestand heeft ingelezen, begint het inlezen van de foto.
Regel 59: Zolang er in het databestand nog een foto staat, zal deze worden ingelezen.
Regel 70: Voor iedere ingelezen foto wordt deze methode aangeroepen. Hij maakt van de foto een polaroid (73-80), plaatst hem op een willekeurige plek (83-87) en toont hem (88).

Meer weten of zelf gebruiken? Download dan het volgende pakketje waar het uitgewerkte voorbeeld in te vinden is. Voor extra-onstuimig-gratis. Zo zijn we.

Pakketje