Hoe ik deeltoets 1 gemaakt heb

Posted at December 01, 2010

You’ve found a dinosaur. This is one of my first posts about programming and the code quality is very poor, it is only here for archiving purposes.

Omdat sommige IAM propedeuse studenten moeite hebben met programmeren in Action Script 3 ga ik een hoop posts maken om programmeren duidelijker te maken. Voor deeltoets 1 heb ik een sneeuw animatie gemaakt. Binnekort ga ik een post schrijven waar alle code in staat en waar ik stap voor stap uitleg wat alle code betekend. Maar eerst schrijf ik deze post waarin ik wat basis elementen vertel die mij enorm hebben geholpen.

Toen ik hier zo’n drie weken geleden aan begon had ik nauwelijks programmeerkennis, ik kon in ieder geval niet programmeren.

Hoe begin ik nou aan het maken van een animatie?

Zoals je waarschijnlijk al hebt ondervonden is programmeren best lastig, en al helemaal als je zelf iets moet gaan bedenken. Hoe begin je hier nou aan?

Het is belangrijk dat voordat je begint met coden je al weet wat je wilt gaan maken. Maak bijvoorbeeld een tekening van wat je uiteindelijk wil programmeren, je kan met pijlen aangeven dat objecten een bepaalde kant op moeten bijvoorbeeld.

Wat ik hierna heb gedaan is alles omschreven wat in mijn hoofd zit, gewoon in het Nederlands met een aantal regeltjes. Die regeltjes gaan om hoe je programmeert, dit doe je stap voor stap en heel logisch. Hier is een voorbeeld van wat ik bedoel: (het is een simpel voorbeeld, maar pas zodra je dit ECHT snapt kan je mooiere dingen maken)

Ik wil een animatie van een hond die heen en weer rent
Wat bedoel ik hiermee? Ik wil een animatie van een hond in een woonkamer die naar links rent en als hij het scherm uit is omdraait en naar rechts rent, en ga zo maar door. Als je op de hond klikt maakt hij een sprongetje.
Hoe gaat dit stap voor stap?

  • In het begin is er een hond
  • De hond is op het midden van het scherm
  • Het scherm heeft een plaatje van een woonkamer
  • De hond beweegt eerst naar rechts
  • Als de hond rechts is spiegel hem en laat hem naar links gaan
  • Als de hond links is spiegel hem en laat hem naar rechts gaan
  • Wanneer iemand op de hond klikt, maakt de hond een sprongetje.

Als je goed kijkt zie je dat er een aantal dingen gebeuren die verband hebben met elkaar: de eerste drie stappen hebben met elkaar te maken, namelijk wanneer je animatie begint moeten deze drie dingen aanwezig zijn.

Daarna heb je een beweging en twee keer een als: we hebben van Justus geleerd dat alle beweging gaat via een of ander ENTER_FRAME event. Wat Justus heeft uitgelegd is dat animatie in flash een beetje nep is, wat er eigenlijk gebeurd is dat er een hoop net verschillende plaatjes (20 per seconde) achter elkaar worden gezet en het zo net lijkt of er animatie is. Dit plaatje heet een frame in ActionScript 3. Nu we dit weten moeten we eigenlijk ons lijstje met gebeurtenissen veranderen:

  • In het begin is er een hond
  • De hond is op het midden van het scherm
  • Het scherm heeft een plaatje van een woonkamer
  • Wanneer flash een nieuw frame maakt wordt de hond iets meer naar rechts neergezet
  • Als de hond rechts is spiegel hem en laat hem naar links gaan
  • Als de hond links is spiegel hem en laat hem naar rechts gaan
  • Wanneer iemand op de hond klikt, maakt de hond een sprongetje.

De eerste drie stappen hebben we behandeld, vanaf de vierde stap zien we twee keer wanneer terugkomen. Dit is belangrijk: elke keer wanneer je wanneer gebruikt gebeurd er iets speciaals:

In het begin gebeurt er niks met deze stappen, alleen wanneer er IETS gebeurd ga je iets uitvoeren. Er gebeurt dus iets waar je op reageert. Dit IETS heet ook wel een event of trigger. Dit is belangrijk om even te onthouden.

Je hebt ook nog twee als stappen. in programmeren maken we hier een if statement van: dit is een “check” tooltje die “checkt” of er aan een bepaalde voorwaarde voldaan wordt. Maar wanneer moet dit check tooltje checken of de hond rechts of links het scherm uit is? Niet in het begin, want dan staat de hond nog stil. Ook niet als je klikt. Deze check moet uitgevoerd worden elke keer als je naar een nieuw frame gaat, de hond wordt immers ook elk frame van positie veranderd toch?

Hier is het vervolg waar je kan zien hoe ik dit stap voor stap in flash maak.

Posted at December 01, 2010, under AS3.