Askmike.org

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.

Laatst ben ik bezig geweest met arrays in arrays, dit heb ik gelijk gecombineerd met de Z as. Hieronder staat de code, je kan dit bekijken of gebruiken (voor deeltoets 3?). Ik zou het leuk vinden als je mij dit laat weten.

De code staat uitgebreid toegelicht met commentaar zodat je alles goed na kan lezen. Hetgeen wat ik wou testen was arrays binnen arrays, als je dat nodig hebt kan je in mijn code kijken hoe het werkt. Ook heb ik een simpele animatie toegevoegd om gelijk te laten zien dat het ook iets kan (ik haal niet het volle uit de array binnen array constructie maar je krijgt toch een beeld).

Hier is het eindresultaat gecompileerd. Hier is een ander voorbeeldje wat ik met de opbouw binnen 5 minuten heb gemaakt.

En hier is de code:

/** Arrays.as -- Dec 16, 2010
 *
 * Beschrijving: bestand ter info voor
 * mede studenten, hopelijk heeft iemand
 * er iets aan.
 * 
 * @mike van rossum
 *
 * Copyleft 2010, all wrongs reversed.
 */
package
{
    // Importeer benodigde classes
    import flash.display.Bitmap;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;

public class Arrays extends Sprite
{
    // Variabele declaratie
    public var xRij:Array;

    // Constructor functie
    public function Arrays()
    {
        // Stel de stage in op niet meeschalen
        stage.align = StageAlign.TOP_LEFT;
        stage.scaleMode = StageScaleMode.NO_SCALE;

        addEventListener(Event.ENTER_FRAME, beweegAlles);

        xRij = new Array();
        //hierboven maa ik een nieuw array aan genaamd xRij
        for(var i:int=0; i<10; i++)
        { //deze for loop zegt dat de code hierbinnen tien keer uitgevoerd wordt
            xRij[i] = new Array();
            //hier maar ik een array aan BINNEN IN de array xRij
            for (var j:int=0; j<10; j++)
            { //deze loop zorgt ervoor dat wat hierbinnen staat tien keer uitgevoerd wordt, 
                //deze loop zelf wordt al 10 keer uitgevoerd dus in totaal 
                //wordt de code hieronder 100 keer uitgevoerd.
                xRij[i][j] = new Array();
                //binnen de Array binnenin xRij maak ik nog een array aan.
                for (var k:int=0; k<10; k++)
                {//de code hierin run ik weer 10 keer, deze loop wordt 100 keer uitgevoerd dus 
                    //in totaal wordt de onderstaande code 1000 keer uitgevoerd.
                    xRij[i][j][k] = new Array();
                    //binnen de array binnenin de array binnenin de array xRij komt nog een Array
                    var bal:Sprite = new Sprite;
                    //maak een bal
                    if (i == j)
                    { // als de bal in de array xRij[i] staat die hetzelfde nummertje heeft als xRij[i][j] wordt hij rood
                        bal.graphics.beginFill(0xff0000);
                    }
                    else
                    {//anders wordt hij blauw
                        bal.graphics.beginFill(0x0000ff);       
                    }

                    bal.graphics.drawCircle(0,0,5);
                    //zet de x van de bal op een plek afhankelijk van in welke positie I is.
                    bal.x = i * 100 + 100 + 5*k;
                    //zet de y van de bal op een plek afhankelijk van in welke positie J is.                        
                    bal.y = j * 50 + 50;
                    //zet de z van de bal op een plek afhankelijk van in welke positie I, J en K zijn.          
                    bal.z = k*3 + j*2 + i*2;
                    //voeg hem toe aan de display
                    addChild(bal);
                    //voeg hem toe aan de array, dit wordt dus in totaal 1000x gedaan
                    xRij[i][j][k] = bal;
                }
            }
        }
    }
    // Eigen functies
    public function beweegAlles(event:Event):void
    {
        for(var i:int=0; i<10; i++)
        {   
            for (var j:int=0; j<10; j++)
            {
                for (var k:int=0; k<10; k++)
                { //zelfde for loop om alles uit te lezen
                    //de vars zijn lokaal, dat betekend dat ze alleen bestaan binnen deze functie
                    //dit zijn andere I, J, K dan hierboven maar toevallig hebben ze elke keer dezelfde waarde.
                    xRij[i][j][k].z++;
                    //verplaats ze naar achter (z as)
                    xRij[i][j][k].alpha -= .1;
                    //maak ze minder zichtbaar
                    if (xRij[i][j][k].z > 40)
                    {//wanneer ze te ver naar achter zijn:
                        xRij[i][j][k].z -= 40
                        xRij[i][j][k].alpha = 1;
                    // gooi ze naar voren en maak ze zichtbaar
                    }
                }
            }
        }
    }
}

Bij het maken van erg ingewikkelde animatie’s kan je bijna niet meer om Particle Systems heen. Als je deze animatie’s toch wilt maken is het belangrijk dat je begrijpt hoe Particle Systems in elkaar zitten. In deze paper ga ik de volgende dingen behandelen:

• Wat is een Particle System? Hermeutisch onderzoek
• Metaforen Voorbeelden Sneeuw Code voorbeeld sneeuw in AS3
• Wat is een Particle System?
• Hermeutisch onderzoek

Om erachter te komen wat een Particle System is wend ik mij eerst tot het woordenboek. Het woordenboek wat ik heb gebruikt is “Webster’s New Explorer Dictionary and Thesaurus”, om te kijken wat dit woordenboek zegt over Particle Systems moeten we het begrip eerst opsplitsen.

Particle

1. A very small bit of matter.
2. A unit of speech (as an article, preposition, or conjunction) expressing some general aspect of meaning or some connective or limiting relation.

De eerste omschrijving komt heel dicht in de buurt met wat we ermee bedoelen. In het woordenboek wordt fysieke materie bedoeld. Binnen software komt dit sowieso niet voor, aangezien dit allemaal virtueel is. Wanneer we een animatie maken visualiseren we een bepaalde situatie, meestal zo echt mogelijk (zo nauw met de werkelijkheid als mogelijk). Zodat wanneer wij de animatie zien we ook kunnen inbeelden wat er op het scherm beweegt.

System

1. A group of units so combined as to form a whole and to operate in unison.
2. The body as a functioning whole; also: a group of bodily organs (as the nervous system) that together carry on some vital function.
3. A definite scheme or method of procedure of classification.
4. Regular method or order.

Ook bij Systems komt de eerste omschrijving het dichtst bij wat een Particle System is. A group of units staat in ons geval voor de particles. Wanneer een aantal dingen operate in unison dan gebeurd het tegelijk in een bepaald ritme. Dit is iets anders dan willekeurig (er kunnen wel willekeurige elementen verwerkt zijn in het systeem maar dit wordt dan gecontroleerd gedaan).

Binnen Particle Systems staat particle voor virtuele materie binnen een animatie die ons helpen bij het begrijpen van een ingewikkele animatie. En systems staat voor het feit dat al deze deeltjes met elkaar “samenwerken” om een bepaald resultaat in de vorm van een animatie te komen.

We zijn nu al een heel eind in onze ontdekking naar wat een Particle System is. We weten al dat je een Particle System kan inzetten wanneer je animatie’s maakt, dat het allemaal kleine deeltjes zijn (ala virtuele materie) die samenwerken in een systeem waardoor ze een groot geheel vormen (dit betekend niet perse dat de deeltjes niet meer visueel zijn te onderscheiden van het geheel).

Het is tenslotte ook belangrijk te weten dat een Particle System niet gelimiteerd is tot een animatie. In een statische afbeelding kan ook een Particle System zitten.

Elk particle system bestaat uit 2 onderdelen, namelijk:

• Een functie van het systeem
• De functies van de deeltjes

Voor de beeldvorming verwijs ik naar een metafoor: het menselijk lichaam. Hoewel dit niet echt een Particle System is, is het toch goed vergelijkbaar:

• De functie van je lichaam is om het lichaam in leven te houden jou in staat te stellen na te denken, rond te lopen, enz.
• Je lichaam heeft allemaal organen, in dit voorbeeld zijn deze organen alle deeltjes. Elk deeltje heeft zijn eigen functie, de longen hebben bijvoorbeeld als functie om het bloed van zuurstof te voorzien. Deze functie staat los van de functie van het lichaam om te kunnen bewegen.

Op deze manier kan je beter begrijpen dat elk deeltje zijn eigen rol heeft binnen het collectief.

Het is wel belangrijk om te weten dat bij een Particle System bijna altijd alle deeltjes dezelfde functie hebben. Maar omdat het er meer zijn geeft dit het systeem toch een andere functie. Ook is het belangrijk te beseffen dat de functie binnen een Particle System altijd is om iets te visualiseren, naar wat dat verschilt per Particle System.

Dit wordt makkelijker als we naar het metafoor van een zwerm bijen. De hele zwerm heeft als functie om het voortbestaan van zichzelf en van de koningin te garanderen. Maar elke bij heeft een aantal functies zoals eten zoeken en de koningin bevruchten. Voorbeelden van Particle Systems zijn rook, vuur, bewegend water, regen, sneeuw en vallende bladeren. Ik ga het Particle System sneeuw nader toelichten.

Sneeuw Sneeuw is een goed voorbeeld van een Particle System. Het bestaat zoals elk Particle System uit twee onderdelen:

• Het systeem: sneeuw, er wordt de illusie gewekt dat het sneeuwt.
• Deeltjes: dit wordt gedaan door een hele hoop sneeuwvlokken langzaam over het beeld te laten bewegen.

Doordat er een hoop vlokken zijn wordt het een geheel, een systeem. Dit voorbeeld heb ik gemaakt voor deeltoets 1 en is hier te bekijken: http://askmike.org/sneeuw.swf.

Ik haal een aantal truukjes uit met de vlokjes om het Systeem realistischer te maken:

1. Hoe snel de vlokken bewegen is afhankelijk van hun grootte. Dit doe ik om de illusie van diepte te creëren binnen het hele systeem.
2. Hoe ver de vlokken heen en weer bewegen is afhankelijk van hun grootte, ook om diepte te maken.
3. Hoe hard de deeltjes wegwaaien (maak een sleep beweging met de muis) is afhankelijk van hoe groot de deeltjes zijn.

Op deze manieren heb ik een extra laag binnen mijn Particle System toegevoegd met als doel het Particle System realistischer te animeren. Hierdoor is het makkelijker geworden om er sneeuw in te herkennen.

Hoe wordt zoiets gerealiseerd in ActionScript 3? Zoals je inmiddels weet is een Particle System een verzameling deeltjes. Meestal zijn het er een hoop. Om een hoop deeltjes te maken kan je gebruik maken van het datatype Array. In mijn sneeuw geval staan alle vlokken random op het scherm, dit is een techniek die vaak gebruikt wordt bij Particle Systems. Ik maak een Array aan en daar stop ik aan de hand van een for loop een hele hoop sneeuwvlokken in. Omdat bij elke vlok opnieuw een random bepaald wordt hoef ik dit niet voor elk vlokje met de hand te doen. Hoe ziet dat in code eruit?

for (var i:int = 0; i < 1000; i++) 
    {
        vlok = new Balletje();
        //maak de beginx random
        vlok.beginx = Math.random() * breedte;
        //tijdens het maken is x gelijk aan beginx
        vlok.x = vlok.beginx;
        //maak y random en zet hem 1 scherm boven het zichtbare scherm
        vlok.y = Math.random() * hoogte -- hoogte;
        //als de angle niet random is per vlok bewegen ze allemaal in dezelfde zwiep
        vlok.angle = Math.random() * 10;
        //hoe hard vlok zwiept is afhankelijk van de grootte (om diepte te creeeren)
        vlok.zwiepBeweging = vlok.grootte * 7;
        addChild(vlok);
        //stop hem in de array
        Sneeuwvlokken.push(vlok);
    }

Vervolgens ga ik elk frame de hele Array af met een for each loop om elk vlokje te verplaatsen op basis van zijn huidige positie. Hoe ziet dat eruit?

for each (var vlok:Balletje in Sneeuwvlokken) 
        {   //zwiep beweging op de x as
        vlok.x = vlok.beginx + Math.sin(vlok.angle) * vlok.zwiepBeweging;
        //val beweging op y as, de snelheid is afhankelijk van de grootte om diepte te scheppen 
        //(kleinere zijn niet kleiner maar verder weg en die zie je minder snel vallen)
        vlok.y += vlok.grootte /2;
        //tel iets bij de angle op (om zo te kijken waar in de zwiepbeweging de sneeuw moet zijn)
        //er hoeft geen modulus aan te pas te komen omdat sin een patroon is
        vlok.angle += .1;
        //neem de wind mee in de x as berekening
        vlok.beginx += wind/7*vlok.grootte;
        //als de vlok onder het scherm komt, spawn hem boven op de random x as

Misschien is het je opgevallen dat ik de for each loop niet helemaal netjes heb afgesloten. Dit komt omdat er ook nog drie checks zijn die ervoor zorgen dat de sneeuw die onder het beeld verdwijnt boven (random gepositioneerd op de x as) verschijnen. Hetzelfde geldt voor de linker en rechterkant. Dit heb ik weggelaten omdat dit niet nodig is binnen dit voorbeeld.

Ik heb sneeuw als voorbeeld genomen omdat de deeltjes (vlokken) duidelijk los te bekijken zijn en het hele systeem ook goed te begrijpen is. Het is een simpel maar effectief voorbeeld.

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.

In deze post ga ik stap voor stap omschrijven hoe ik een hondje via ActionScript 3 ga animeren. Dit is een vervolg op een andere post waar ik inga op de denkwijze die je nodig hebt om te programmeren.

Dit is het niveau van deeltoets 1. Ik ga op alles redelijk uitgebreid in dus als je iets niet helemaal meer snapte dan kan je het hier opzoeken. En als je er helemaal niks van snapt kan je alles lezen.

Waar waren we gebleven? O ja, we gaan een hondje gaan animeren over het scherm. Justus heeft voor de voorbereiding op deeltoets 1 een opzet gemaakt, dit bestand gebruiken we om onze eigen animatie te maken. Hier zie je de opzet met wat basis aanpassingen.

/** HondInKamer.as -- Nov 24, 2010
 *
 * Copyleft 2010, all wrongs reversed.
 * 
 * 
 * background: http://www.flickr.com/photos/maurice_flower/152750470/sizes/z/in/photostream/
 */
package
{
    // Importeer benodigde classes
    import flash.display.Bitmap;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;

public class HondInKamer extends Sprite
{
    // Variabele declaratie
    public var woefie:Hond;

    // Plaatje embedden *dit heb je nodig voor de achtergrond*
    [Embed(source="pics/woonkamer.jpg")] // verwijzing naar het bestand in de pics map
    private var BackgroundPicture:Class; // Abstracte klasse die gebruikt wordt om het plaatje in te laden
    private var background:Bitmap; // Bitmap object waarmee je het plaatje op de stage zet

    // Constructor functie
    public function HondInKamer()
    {
        // Stel de stage in op niet meeschalen
        stage.scaleMode = StageScaleMode.NO_SCALE;
        stage.align = StageAlign.TOP_LEFT;

        // Voeg het achtergrondplaatje toe aan de display list
        background = new BackgroundPicture();
        addChild(background);

        // Zet de placeholder neer
        woefie = new Hond();
        woefie.x = 320;
        woefie.y = 330;
        addChild(woefie);
    }

    // Eigen functies
}

Regel 1 Ons project heet niet meer DT1_opzet maar we moeten hem een naam geven die iets zegt over onze klasse. Ik heb gekozen voor HondInKamer. Ook heb ik de variabele Placeholder vernoemd naar Hond en in de Hond wat aanpassingen gedaan met de Draw Api. Op de Draw Api ga ik niet diep in aangezien iedereen dit al gehad heeft en ik hier geen ster in ben. Ik maak onze hond woefie aan, van de klasse Hond. Let op: Klasses beginnen altijd met een hoofdletter en variabelen met een kleine letter!

Regel 22 Standaard heeft Justus een plaatje met sneeuw / ruis / noise op de achtergrond staan. Ik heb in het mapje pics (in je project map) een plaatje woonkamer gestopt, op regel 22 geef ik aan dat de woonkamer mijn achtergrond plaatje is.

Regel 40 Ik heb de Y positie van hond iets aangepast zodat hij beter op het scherm geplaatst wordt.

Als we nu kijken naar ons lijstje waar de animatie omschreven wordt:

• 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.

Dan zien we dat stap 1 , 2 en 3 al gedaan zijn. We zijn al bijna op de helft van de eisen en we hebben tot nu toe alleen enkele regeltjes veranderd!

Als je dit zou uitvoeren dan krijg je dit resultaat: HondInKamer – Versie 0.1

Animatie En dan komt nu een moeilijker gedeelte, namelijk de Animatie. Ik had gezegd “Wanneer flash een nieuw frame maakt wordt de hond iets meer naar rechts neergezet.” We moeten dus bij elk nieuw frame de positie van de hond iets veranderen. Dit gaan we doen met het ENTER_FRAME event. Dit is een gebeurtenis die elke keer gebeurd wanneer flash een nieuw frame wil gaan tekenen.

Deze regel code zorgt ervoor dat de functie beweegWoefie voor elk frame wordt uitgevoerd:

addEventListener(Event.ENTERFRAME, beweegWoefie);

_Deze zet je in je constructor, Het enige wat je hierover hoeft te weten is dat beweegWoefie wordt aangeroepen zodra de EventListener merkt dat het event ENTER_FRAME gebeurd. Er is nog een extra dingetje dat je moet doen voordat je het ENTER_FRAME event mag aanroepen in je programma. Je moet het importeren. Dit doe je door op regel 15 deze code neer te zetten.

import flash.events.Event;

Nu gaan we onze eigen functie maken, namelijk beweegWoefie. We zetten onze eigen functies neer na regel 44. Dit is de code voor onze eigen functie:

public function beweegWoefie(event:Event):void 
    {
        //hier komt onze code
    }

Vanaf regel 3 zetten we onze eigen code erin. wat moeten we hier nou typen dan? Laten we kijken naar ons af te werken lijstje.

• Wanneer flash een nieuw frame maakt wordt de hond iets meer naar rechts neergezet

Ow dus hier moeten we ervoor zorgen dat woefie steeds iets meer naar rechts moet. Woefie begint op x as op 320 pixels. Dus als we hier nou 325 zetten dan gaat woefie naar rechts, toch? Het antwoord is ja, hij gaat naar rechts, alleen hij gaat maar een keer naar rechts, namelijk wanneer het eerste frame wordt gemaakt. Wat we in deze functie eigenlijk moeten zeggen is: Kijk naar de x positie van Woefie en tel daar 5 bij op. In het begin is woefie op x = 320. Op het eerstvolgende frame is woefie op 325, op het frame daarna 330 en ga zo maar door. Omdat er in 1 seconde heel veel frames zitten wordt het een vloeiende beweging.

We moeten dus een stukje code hebben die zegt “Kijk naar de x positie van Woefie en tel daar 5 bij op”. Als we dit vertalen naar Wiskunde dan krijgen we: woefie.x + 5 = woefie.x Dit is precies wat we in ActionScript ook doen, alleen daar zetten we het + 5 achter het =. Waarom doen we dit? Nou in ActionScript betekend = helemaal niet is gelijk aan, het betekend wordt (is gelijk aan heb je wel in ActionScript, maar dat druk je uit als ==). Als je zegt woefie.x + 5 wordt woefie.x dan verander je woefie.x niet, in ieder geval niet zoals we het willen. Daarom zeggen we woefie.x wordt woefie.x + 5. In code zetten we dit in de beweegWoefie functie, zodat woefie.x elk frame wordt veranderd.

woefie.x = woefie.x + 5;

Dit werkt wel, maar je kan het nog makkelijker opschrijven. Omdat iets optellen en iets aftrekken redelijk standaard is, hebben ze er iets makkelijks van gemaakt, namelijk:

woefie.x += 5;

Dit ziet er anders uit maar het betekend precies hetzelfde.

Als je dit zou uitvoeren dan krijg je dit resultaat: HondInKamer – Versie 0.2

if statement Maar Woefie rent het scherm uit! Dat mag niet de bedoeling zijn. Al helemaal niet als we kijken naar

• Als de hond rechts is spiegel hem en laat hem naar links gaan

Hoe gaan we dit aanpakken? We zien een “als” dit wijst op een if statement (if = als in het engels). Een if statement ziet er zo uit:

if (conditie)
    { 
        dan
    }

Als [conditie] [dan] Als [de hond rechts is] [dan spiegel hem en laat hem naar links gaan] Maar ActionScript weet niet wat rechts is en wat we hiermee bedoelen, hier moeten we een formule van maken.

Het scherm heeft een X en een Y as. links boven is op beide assen 0. Maar waar zit dan de rechterkant? De rechtergrens is net zo groot als het plaatje breed is. Als het plaatje 100 pixels breed is en 0 is links boven, dan is 100 rechtsboven. Mijn woonkamer plaatje is 639 pixels breed. De rechtergrens is dus op de x as op 639. Je kan ook met stageHeight werken, dat maakt niet uit zolang je het principe maar snapt!

We moeten dus een formule maken die zegt: Als Woefie verder is op de x as dan 639, spiegel hem en laat hem de andere kant op gaan. Als we het dikgedrukte gedeelte weer wiskundig vertalen kunnen we zeggen: Als woefie op de X as groter is dan 369. En dat is hetzelfde als: als (woefie op de X as > 639) En dat is hetzelfde als:

if (woefie.x > 639)

Ok dat was het als gedeelte van de if statement: wanneer moet woefie omdraaien en spiegelen? Als zijn x groter is dan 369! En wat moet er gebeuren als dat klopt? Als dat klopt moet woefie omdraaien en spiegelen.

Om woefie makkelijk de andere kant op te laten gaan is het beter als we de regel binnen onze beweegWoefie functie wat aanpassen. De regel was:

woefie.x += 5;

maar het is makkelijk als we die 5 veranderen in een variabele die ook voor 5 staat maar we kunnen veranderen. Huh een variabele? Een variabele is iets waar je gegevens in op kan slaan van een bepaalt type, en elk moment wijzigen: Ons object woefie is ook een variabele (kijk maar toen we zeiden woefie = new var, var = variabele).

Als we die 5 nou eens opslaan in een variabele snelheid. Zolang de var snelheid 5 blijft veranderd er niks aan ons resultaat. Hoe maak je een variabele?

Als we kijken naar woefie, hij is gedefined op regel 19. Hieronder kan je onze nieuwe variabele maken:

public var snelheid:int

he int? Elk type variabele kan zijn eigen soort gegevens aan. het type int kan getallen opslaan (negatief en positief) dus in dit geval is een int handig. Nu moeten we zeggen dat de int snelheid in het begin 5 is, “in het begin” zegt het al een beetje: alles wat in het begin moet doe je in de contructor. We zetten dus onder de constructor:

snelheid = 5

Nu we een variabele snelheid hebben kunnen we gemakkelijk spelen met de snelheid. Als je zegt:

snelheid = -1

_dan heb je het al opgelost, huh hoe deed ik dat zo snel? snelheid *= -1 is hetzelfde als 5 = 5-1_. Altijd als je iets keer -1 doet dan zet je er een minnetje voor of haal je er een minnetje af. Ok er staat nu -5, waarom -5?

De snelheid bepaald waar woefie elk frame naar toe gaat. als de snelheid 5 is betekend dat: pak de huidige X positie en tel er 5 bij op. Maar nu krijgen we: pak de huidige X positie en tel er -5 bij op. Als je ergens een negatief getal bij optelt dan haal je het er eigenlijk gewoon van af: 5 +- 5 = 0 is hetzelfde als 5 – 5 = 0. En als we 5 van de X van woefie afhalen dan veranderd de X dus in een kleiner getal, een getal dichter bij 0. Op een X is dat dus richting links (0 punt), oftewel hij beweegt naar links.

Om ervoor te zorgen dat woefie het scherm niet uit kan rennen aan de rechterkant maken we dus deze if statement:

if (woefie.x > 639)
    {
        snelheid *= -1;
    }

Hah het werkt! maar nu gaat woefie links net zo makkelijk het scherm uit

We hebben al een if statement die er heel veel op lijkt dus we kunnen hem bijna kopieren.

if (woefie.x > 639)

639, dat is toch de grens aan de rechterkant? De grens aan de linkerkant is 0 dus dat veranderen we. woefie.x wordt steeds kleiner, moeten we dan kijken wanneer woefie.x groter is dan 0? Nee wanneer hij kleiner is dan 0.

if (woefie.x < 0)

woefie stuitert nu lekker heen en weer, alleen hij komt nooit helemaal links, het is meer alsof hij zijn kont stoot tegen de zijkant. Dit komt omdat het 0 punt van woefie ergens bij zijn kont zit. We kunnen 0 gewoon iets kleiner maken om het wel mooi te hebben. Ik maak er nu -100 van.

Maar woefie moet ook nog gespiegeld worden op het moment dat hij rechts op links het scherm uitgaat. Daarvoor kunnen we de scaleX variabele van woefie. Net als woefie.x is woefie.scaleX standaard beschikbaar alleen normaal doe je hier niet zoveel mee. Maar nu dus wel!

woefie.scaleX = -1;

Dit betekend spiegel woefie linksom.

woefie.scaleX = 1;

Dit betekend spiegel woefie niet (of reset hem als hij gespiegeld was). Als we deze toevoegen in de if statements kunnen we hem precies op het goede moment elke keer laten omdraaien.

Waar moeten we deze 2 if statements nou neerzetten? Om dat te weten moet je jezelf afvragen: Wanneer moet flash checken of woefie links of rechts het scherm uit gaat? Elk frame natuurlijk, dus je kan hem binnen je beweegWoefie functie zetten.

Onze functie beweegWoefie ziet er inmiddels zo uit:

public function beweegWoefie(event:Event):void 
        {
            woefie.x += snelheid;
            if (woefie.x > 639)
            {
                snelheid *= -1
                woefie.scaleX = -1;
            }
            if (woefie.x < -100)
            {
                snelheid *= -1
                woefie.scaleX = 1;
            }
        }

En als je dit alles uitvoerd, is dit ons resultaat: HondInKamer – Versie 0.3

Als we nu kijken naar ons lijstje:

• 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.

zien we dat we alleen het laatste dingetje nog af moeten strepen. Dit ga ik in een andere post uitleggen.

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore.

I started programming in ActionScript 3 weeks ago for school and we need to hand in our first program. Here is mine, I called it Snow.

It works really simple:

• you can add wind by dragging with your mouse or using the arrow keys on the keyboard.
• Press P to spawn a person, note that the person is having trouble with the wind.
• If you can let the wind go hard enough the person will fly away!
• How much wind you need depends on the weight of the person (how big he looks) which is generated randomly.

[dutchmode] Weten hoe ik dit gemaakt heb? Stap 1: snap de basis Stap 2: kan de basis [/dutchmode] Step 3: use my code and explanation for the snow + wind animation

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.