Je kunt objecten natuurlijk laten bewegen met Motion Tween, maar het kan ook met ActionScript.
Maar waarom zouden we het met ActionScript doen, als het ook met Motion Tween kan?
Nou, met ActionScript kun je een beweging laten maken die altijd anders is of dat de beweging spiegelend is op de vorige enz.
Verder zal ik in deze tutorial ActionScript vaak afkorten met AS.
In de tutorial van vinTage over het tekening met ActionScript staat bovenin een swf:
In zijn tutorial wordt uitgelegd hoe je die driehoek tekent met AS, en hij zei dat hij later een tutorial zou schrijven over het bewegen.
Dit heeft hij gedaan, maar niet hier gepost; daarom schrijf ik er nu eentje.
Maar we gaan dus die animatie hierboven namaken.
We gaan beginnen vanaf het begin (dat ik ooit zo logisch zou praten :P).
Neem een nieuw document en maak hier een MC (MovieClip) in aan (bijvoorbeeld een klein balletje).
Dan ga je nu naar het AS-panel van de MC, dit panel kun je openen door de MC te selcteren en op F9 te drukken.
Type in het AS-panel de volgende code:
onClipEvent(enterFrame){
this._x = this._x + 5;
}
Even wat uitleg over de code hierboven: onClipEvent(enterFrame) zegt dat telkens waneer je in het frame komt hij onderstaande actie uit moet voeren.
Mocht je dit weglaten, dan zou de MC 5 pixels van de plek waar je hem geplaatst hebt staan, maar niet bewegen: zeer belangrijk dus. this._x = this._x + 5; zegt dat de x-coördinaat van deze MovieClip, de x-coördinaat van deze MovieClip moet zijn plus 5.
Dit zorgt er dus voor dat elke keer dat het frame geladen wordt (normaal 12 keer per seconden) de MC 5 pixels naar rechts verschuift.
De 5 bepaalt dus de snelheid waarmee schuift.
Als je nu bekijkt wat je gemaakt hebt (ctrl + enter) dan zul je zien dat je MC naar rechts schuift: jeh! hij beweegt!
Mocht dit niet het geval zijn, dan heb je het fout gedaan.
Zo kun je heb ook naar beneden laten schuiven door, zoals je waarschijnlijk al raad, _x te vervangen door _y.
Als je het scriptje hierboven gebruikt, dan zul je zien dat hij aan de rand van het venster gewoon door schuift.
Dit moeten we niet hebben.
Nou kunnen we het makkelijk zo maken dat hij aan de rand stil staat:
Hierin is 550 de breedte van het venster (standaard).
Maar je kunt er ook voor kiezen om de MC dan de andere kant op te laten gaan.
De code hiervoor staat hieronder, hij zorgt er ook gelijk voor dat de MC links ook niet uit het venster kan:
Ik neem aan dat bovenstaande duidelijk is, alleen zal opvallen dat ik plots de snelheid heb opgeslagen in een variabel, die in onClipEvent(load) staat.
Dit houdt in dat de snelheid eenmalig in de variabel wordt opgeslagen.
Als je de variabel in onClipEvent(enterFrame) aanmaakt, krijgt hij telkens opnieuw de waarde 5, wat ervoor zorgt dat de mc gewoon door schuift.
Het doel van deze tutorial was dat je die swf van vinTage zelf kunt maken.
Je hebt nu geleerd hoe je een MC via AS kunt laten bewegen en dan in de scherm houdt.
Met een beetje fantasie kun je al aardig wat berijken, zoals een balletje langs de rand laten glijden.
Maar om de swf bovenaan de pagina te kunnen maken, moet je weten hoe je de MC random (dus willekeurig) kunt laten bewegen.
Dat ga ik in dit gedeelte uitleggen.
Het belangrijkste 'nieuwe' element dat we hiervoor gaan gebruiken is random(), dat we gebruiken met Math.random().
Dit doet hetzelfde als wat het in JavaScript doet: het geeft een getal tussen 0 en 1 met enkelen deciamelen.
En dit wordt dan de code die we ervoor gaan gebruiken:
onClipEvent(load){
snelheid = 30; //de maximale snelheid
// een variable snelheid aanmaken voor x en y appart
snelheidx = Math.random() * snelheid;
snelheidy = Math.random() * snelheid;
}
// de positie bepalen, wat telkens herhaald wordt
onClipEvent(enterFrame){
this._x = this._x + snelheidx;
this._y = this._y + snelheidy;
// de positie is nu dus al bepaalt, nu alleen nog "binnen de muren" houden
if(this._x + (this._width) > 550){
snelheidx = - Math.random() * snelheid;
}
if(this._x < 0){
snelheidx = + Math.random() * snelheid;
}
if(this._y + (this._height) > 400){
snelheidy = - Math.random() * snelheid;
}
if(this._y < 0){
snelheidy = + Math.random() * snelheid;
}
}
Ik geef verder geen uitleg dit lijkt me namelijk wel duidelijk.
Je kunt nu dus allerlei bewegingen maken met AS.
Probeer maar eens met je intelligentie en deze tutorial een bal te maken dat stuiterd (met zwaartekracht dus).
Maar eerst nog even de opdracht afronden: de swf van vinTage namaken:
Open een nieuw flash-document.
Je tekent een balletje van 10 bij 10 pixels en maakt hier een MovieClip van.
Deze zet je drie keer in het document (kopiëren dus).
Je geeft ze elk een andere Instance Name: de een mc1, de ander mc2 en de overige mc3.
Je geeft elk hetzelfde script, en dan het script dat hierboven staat, zodat ze elk onafhankelijk van elkaar random bewegen.
Nu verbinden we de balletjes met lijnen zodat je een driehoek krijgt en deze kunt je dan een achtergrond kleurtje geven.
Hiervoor moet je devolgende code in het AS-panel van het keyFrame plakken:
Ik ga geen uitleg geven over deze code, kijk daarvoor hier.
Als je de swf precies wilt namaken zet je nog even met de text-tool de tekst sitemasters.
Maar goed, als je de Movie nu afspeeld zul je zien dat je de swf van vinTage hebt nagemaakt.
Maar dat is nog niet alles: je hebt ook nog heel wat over ActionScript bij geleerd!
Dus feliciteer jezelf en bedankt vinTage en mij maar, dan kun je nu lekker verder flashen!
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.67) 
