Media Design opdracht: Ident voor Dolores Adventures

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.

For the subject Media Design we need to make an ident (introduction clip of something like 5 seconds) for a fictional game. We only had the name of the game and we could make the rest up. The name of the game is “Dolores Adventures” After designing a logo and style I had to make an ident.

We were free to make it in whatever we wanted (filming, stopmotion, animating), my love for ActionScript (since two months or so) made me make it in Flashbuilder.

Here is the ident for Dolores Adventures.

The code is fast written, easy and probably not very beautiful to look it, but you can use whatever you want from it. I use two classes. The class Bal (which is explained in my last tutorial in dutch) and the custom class for the ident. I work with a couple of timers to time everything out nice to the music.

/** Main.as -- Jan 16, 2011
 *
 * Beschrijving: [beschrijving van dit bestand]
 * 
 * @author Mike van Rossum
 *
 * Copyleft 2011, all wrongs reversed.
 */
package
{
    // Importeer benodigde classes
    import Bal;

import flash.display.Bitmap;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.media.Sound;
import flash.net.URLRequest;
import flash.utils.Timer;
import flash.utils.getTimer;

public class Main extends Sprite
{
    // Variabele declaratie
    private var yellowScreen:Sprite;
    private var yellowBlock:Sprite;

    [Embed(source="pics/Naamloos-2.jpg")] // verwijzing naar het bestand in de pics map
    private var Plaatje:Class; // Abstracte klasse die gebruikt wordt om het plaatje in te laden
    private var cleanLogo:Bitmap; // Bitmap object waarmee je het plaatje op de stage zet

    [Embed(source="pics/boom.png")] // verwijzing naar het bestand in de pics map
    private var Boom:Class; // Abstracte klasse die gebruikt wordt om het plaatje in te laden
    private var boom:Bitmap; // Bitmap object waarmee je het plaatje op de stage zet

    [Embed(source="pics/horrors.gif")] // verwijzing naar het bestand in de pics map
    private var Horrors:Class; // Abstracte klasse die gebruikt wordt om het plaatje in te laden
    private var horrors:Bitmap; // Bitmap object waarmee je het plaatje op de stage zet

    [Embed(source="pics/hangman.gif")] // verwijzing naar het bestand in de pics map
    private var Hangman:Class; // Abstracte klasse die gebruikt wordt om het plaatje in te laden
    private var hangman:Bitmap; // Bitmap object waarmee je het plaatje op de stage zet

    private var countTillSlogan:Timer;
    private var countTillHorror:Timer;
    private var countTillHangman:Timer;
    private var countTillBoom:Timer;

    private var trilling:int;

    private var slogan:Sound;
    private var boomTime:Boolean;
    private var bloed:Array;

    // Constructor functie
    public function Main()
    {
        stage.align = StageAlign.TOP_LEFT;
        stage.scaleMode = StageScaleMode.NO_SCALE;

        yellowScreen = new Sprite;
        yellowScreen.graphics.beginFill(0xECE985);
        yellowScreen.graphics.drawRect(0,0,750,500);    
        addChild(yellowScreen);

        cleanLogo = new Plaatje();
        cleanLogo.alpha = 0;
        cleanLogo.x = 30;
        addChild(cleanLogo);

        horrors = new Horrors();
        horrors.x = 332;
        horrors.y = 312;
        horrors.alpha = 0;
        addChild(horrors);

        yellowBlock = new Sprite;
        yellowBlock.graphics.beginFill(0xECE985);
        yellowBlock.graphics.drawRect(0,0,20,70);
        yellowBlock.alpha = 0;
        yellowBlock.x = 382;
        yellowBlock.y = 200;
        addChild(yellowBlock);

        hangman = new Hangman();
        hangman.alpha = 0;
        hangman.x = 360;
        hangman.y = 155;
        hangman.rotation = 11;
        addChild(hangman);

        boomTime = new Boolean;
        boomTime = false;

        countTillSlogan = new Timer(1000,1);
        countTillSlogan.addEventListener(TimerEvent.TIMER, startSlogan);
        countTillSlogan.start();

        countTillHorror = new Timer(2392,1);
        countTillHorror.addEventListener(TimerEvent.TIMER, startHorror);
        countTillHorror.start();

        countTillHangman = new Timer(3392,1);
        countTillHangman.addEventListener(TimerEvent.TIMER, startHangman);
        countTillHangman.start();   

        countTillBoom = new Timer(5792,1);
        countTillBoom.addEventListener(TimerEvent.TIMER, startBoom);
        countTillBoom.start();

        bloed = new Array;

        for (var i:int=0; i<18; i++)
        {
            var bal:Bal;
            bal = new Bal(0xff0000,1.5);
            bal.cirkel.alpha = 0;
            addChild(bal.cirkel);
            bloed[i] = bal.cirkel;
            bloed[i].x = 370 + 15 * Math.random();
            bloed[i].y = 245 + 220 * Math.random(); 
        }
    }

    // Eigen functies

    public function startSlogan(event:TimerEvent):void 
    {
        slogan = new Sound();
        slogan.load(new URLRequest("sounds/slogan-ident.mp3"));
        slogan.play();

        addEventListener(Event.ENTER_FRAME, fadeCleanLogo);
    }

    public function fadeCleanLogo(event:Event):void 
    {

        if (cleanLogo.alpha < 1)
        {
            cleanLogo.alpha += .15;
            trilling = (trilling + 5) % 10;
            cleanLogo.y = 80 + trilling;
        }
        else
        {
            removeEventListener(Event.ENTER_FRAME, fadeCleanLogo);
        }
    }
    public function fadeHorrors(event:Event):void 
    {               
        if (horrors.alpha < 1)
        {
            horrors.alpha += .3;
        }
        else
        {
            removeEventListener(Event.ENTER_FRAME, fadeHorrors);
        }
    }

    public function startHorror(event:TimerEvent):void 
    {
        addEventListener(Event.ENTER_FRAME, fadeHorrors);
    }

    public function startHangman(event:TimerEvent):void 
    {
        addEventListener(Event.ENTER_FRAME, moveHangman);
    }

    public function moveHangman(event:Event):void 
    {
        if (hangman.alpha < 1)
        {
            yellowBlock.alpha += .15;
            hangman.alpha += .15;
        }   
        else
        {
            startBloed();
        }

        if (hangman.rotation > 2 )
        {
            hangman.rotation -= 1;
        }   
    }

    public function startBloed():void 
    {
        for (var i:int=0; i<18; i++)
        {
            setBloedAlpha(i);
        }
        addEventListener(Event.ENTER_FRAME, moveBloed);
        removeEventListener(Event.ENTER_FRAME, moveHangman);
    }

    public function setBloedAlpha(j:int):void 
    {
        bloed[j].alpha = 1;
    }

    public function moveBloed(event:Event):void 
    {
        for (var i:int=0; i<18; i++)
        {
            bloed[i].y ++;

            if (bloed[i].y > 445 || boomTime == true)    
            {
                bloed[i].alpha -= .05;
            }

            if (bloed[i].alpha <= 0 && boomTime == false)
            {
                bloed[i].y = 245;
                setBloedAlpha(i);
            }
        }
    }

    public function startBoom(event:TimerEvent):void 
    {   

        boomTime = true;

        removeChild(cleanLogo);
        removeChild(horrors);
        removeChild(hangman);

        boom = new Boom();
        boom.alpha = 1;
        boom.x = 40;
        boom.y = 107;
        addChild(boom);

        addEventListener(Event.ENTER_FRAME, BoomLogo);
    }

    public function BoomLogo(event:Event):void 
    {       
        boom.scaleX *= 1.05;
        boom.x -= boom.width / 40;

        boom.scaleY *= 1.05;
        boom.y -= boom.height / 40;

        boom.alpha -= .05;
    }
}

Let me know what you think!

Posted at January 16, 2011, under AS3design.

ActionScript 3 Tutorial: Atomen animeren

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 tutorial ga ik uitleggen hoe ik de atomen uit mijn laatste opdracht voor het vak programmeren (in AS3) heb gemaakt. Het niveau van deze tutorial is niet heel hoog zodat het voor een stuk meer mensen toegankelijk is.

Eerst ga ik een class Bal maken met nogal simpele code, ik richt de class zo in dat wanneer ik een bolletje nodig heb ik deze zo kan importeren. Ik werk met hierbij met zogeheten arguments/parameters.

Arguments/parameters De makkelijkste manier om dit uit te leggen is om een situatie te schetsen. Stel je voor dat je een huisrobot programmeert om boodschappen voor je te doen: Je programmeert dat hij naar de supermarkt moet lopen, hoe hij met betalen en hoe hij terug moet lopen. Nu zijn deze dingen altijd hetzelfde, alleen moet je elke keer iets anders hebben van de supermarkt. Het makkelijkste zou zijn om hem naar de supermarkt te sturen met een boodschappenlijstje, dit is precies wat een argument is. De syntax ziet er als volgt uit:

voerFunctieUit(argument1, argument2, etc);

(dit is dus in principe je booschappenlijstje)

Hier is de code van de class Bal:

/** Bal.as -- Jan 6, 2011
 *
 * Beschrijving: [beschrijving van dit bestand]
 * 
 * @author Mike van Rossum
 *
 * Copyleft 2011, all wrongs reversed.
 */
package
{
    import flash.display.Sprite;

// Importeer benodigde classes
public class Bal
{
    public var cirkel:Sprite;   
    // Constructor functie
    public function Bal(kleur:uint, grootte:int)
    {
        cirkel = new Sprite;
        cirkel.graphics.beginFill(kleur);
        cirkel.graphics.drawCircle(0,0,grootte);
        cirkel.graphics.endFill();
    }
    // Eigen functies
}

Zoals je ziet zijn er twee argumenten, kleur en grootte. Elke keer als je een Bal wilt maken kan je meegeven welke kleur en hoe groot hij moet zijn. Op deze manier hoef je niet elke keer alle code te kopiëren en de kleur en grootte aan te passen.

En dan nu de Classe voor de atomen, ik begin met de basis variant en maak hem steeds moeilijker. Maar eerst een klein beetje theorie om te snappen hoe hij werkt. Hier is een stukje code van Justus dat een Sprite rond laat draaien. Dit stukje code hoef je niet te begrijpen, je moet alleen weten dat die 2 regels code iets in een cirkel kunnen laten bewegen. De beweging zit in Angle, dit staat voor een getal dat elk frame veranderd. Hij begint als 0 en elke keer komt er 0,1 bij.

Hierin zijn 2 waardes belangrijk als je er mee wilt gaan spelen: angle: als je deze kleiner maakt gaat de bal langzamer. En de waarde die nu 100 is. Deze staat gelijk aan de grootte van de cirkel.

Hieronder staat de code om een rode bal (half doorzichtig) te maken en hierin kleinere blauwe balletjes die volgens Justus zijn formule allemaal een rondje draaien.

/** Atoms.as -- Jan 10, 2011
 *
 * Beschrijving: [beschrijving van dit bestand]
 * 
 * @author Mike van Rossum
 *
 * Copyleft 2011, all wrongs reversed.
 */
package
{
    // Importeer benodigde classes
    import Bal;

import flash.display.Sprite;
import flash.events.Event;

public class Atoms extends Sprite
{
    // Variabele declaratie
    private var array:Array;
    private var angle:Number;
    private var rodeBal:Bal;
    private var defCircling:int;

    // Constructor functie
    public function Atoms()
    {
        addEventListener(Event.ENTER_FRAME, MoveAtoms);     

        array = new Array;

        angle = new Number;
        angle = 0;

        for (var i:int=0; i<15; i++)
        {
            var bal:Bal;
            bal = new Bal(0x0000ff,10);
            addChild(bal.cirkel);
            array[i] = bal.cirkel;
        }

        defCircling = new int;
        defCircling = 100;

        rodeBal = new Bal(0xff0000,160);
        rodeBal.cirkel.y = stage.stageHeight/2;
        rodeBal.cirkel.x = stage.stageWidth/2
        rodeBal.cirkel.alpha = .5;
        addChild(rodeBal.cirkel);   
    }

    // Eigen functies
    public function MoveAtoms(event:Event):void 
    {
        angle += .1;
        for (var i:int=0; i<15; i++)
        {
            array[i].x = stage.stageWidth/2 + Math.sin(angle) * 100;
            array[i].y = stage.stageHeight/2 + Math.cos(angle) * 100;
        }
    }
}

Hier is het resultaat gecompileerd

Ik maak eerst een rode bal en een Array aan. in de Array ga ik zometeen een aantal kleine balletjes stoppen. Dat doet ik met een foor loop om mijn werk te besparen. Het principe werkt als volgt: Alles wat in een for loop staat wordt niet 1 maar meerdere keren uitgevoerd. het nummertje I wat je overal in de foor loop ziet staan is iets wat gelijk is aan een nummer, hoeveel dit nummer is is afhankelijk van hoe vaak de for loop de code al heeft uitgevoerd. In mijn geval voert hij hem 15 keer uit. In het begin is i 0, de volgende keer 1, enzovoorts. Er worden dus gewoon 15 ballen aangemaakt.

Als je nu nog iets met een bal uit een Array wil doen kan je hem niet aanspreken als bal (daar zijn er namelijk meer van) maar als Array[nummer uit array]. Als je ze allemaal aan wilt spreken is het makkelijk om gewoon dezelfde for loop te gebruiken waarmee je ze hebt gemaakt. In ons geval is dat precies wat we willen. dus daarom zie je in de functie MoveAtoms dezelfde for loop als in de constructor.

Hoe komt het dat je maar 1 balletje ziet bewegen? We hebben 15 ballen en die bewegen we precies hetzelfde. Ze zitten dus elk frame precies op elkaar. Om te zorgen dat ze allemaal zichtbaar zijn kan je een aantal dingen doen:

  • Je kan de de draaicirkel van de een kleiner maken dan de ander
  • Je kan de een sneller laten gaan dan de ander
  • Je kan de cirkels op een ander punt laten starten

Laten we beginnen met optie 1 Met een for loop pas je de beweging van de balletjes aan, deze is voor elke bal hetzelfde dus het lijkt heel moeilijk. Maar dat is het niet want je hebt namelijk het getal i (een variabele die gelijk staat aan een getal, zelfs elke keer een ander getal) meenemen om de grootte van de draaicirkel te bepalen.

In dit geval is dat 100 maar we kunnen daar ook een rekensommetje inzetten: Laten we doen (i * 25). Dit betekend dat de for loop elke keer dezelfde code uitvoert en dan 1 bij i optelt. i begint bij 0 en wordt elke keer groter. Op deze manier wordt de grootte van de cirkel afhankelijk van de i.

Zie hier het resultaat.

Laten we de een sneller laten draaien dan de ander We kunnen weer met de i werken om elke bal een andere snelheid te geven. Ik zou al dat het met angle te maken had dus we maken hier een sommetje van om de i hier ook in te verwerken. Na wat spelen met verschillende getallen vond ik deze combinatie:

(angle *(i+7)/10)

Ik doe angle (wat elke keer veranderd) keer i + 7 en dat deel ik door 10. Al je dat doet krijg je dit resultaat (ik heb de balletjes ondertussen iets kleiner gemaakt).

Dit is de basis voor atomen, om het resultaat te krijgen wat lijkt op een atoom passen we alles dubbel toe wat we nu hebben. Om dit uit te leggen gebruik ik een voorbeeld van de aarde. De aarde draait net als een van onze blauwe balletjes om de zon (de rode bal). Om de aarde draait weer een maan. Probeer je dit te visualiseren en maak dan de aarde onzichtbaar. hier kan je zien wat ik bedoel. De half doorzichtige blauwe cirkels draaien rond en op basis van die positie draaien de kleine balletjes erin ook rond.

Zolang de binnenste draaibeweging heel klein blijft vergeleken met de buitenste draaibeweging blijf je het planeet met maan idee krijgen. Maar wanneer je de binnenste draaibeweging een stuk groter maakt krijg je andere vormen.

Hoe doe je dit in code?

Eerst hadden we een som en daarmee rekende we rechtstreeks de x en y positie uit van de bal per frame. Nu moeten we eerst de positie van de “aarde” opslaan (ook al is de aarde zelf niet zichtbaar) en vanuit dit punt een nieuwe berekening doen voor de maan.

voor het opslaan van getallen (namelijk een x en y positie van de “aarde”) gebruiken we variabelen. Net als angle. Het voordeel van een variabele ten opzichte van een direct getal is dat we de variabele kunnen aanpassen en op deze manier de uitkomst van de som veranderen zonder de som zelf te veranderen. We gaan nu twee variabelen maken waarin we elk frame de locatie van “aarde” opslaan.

private var cirkely:int = new int;
        private var cirkelx:int = new int;

Als je dit voor je constructor zet dan kan je ze later gebruiken.

En de code voor atomen ziet er zo uit:

cirkely = positieXCirkel + Math.sin(angle(i+7)/10) * 100;
            cirkelx = positieYCirkel + Math.cos(angle(i+7)/10) * 100           

        array[i].y = cirkely + Math.sin(-angle*(i+7)/20) * 50;
        array[i].x = cirkelx + Math.cos(-angle*(i+7)/20) * 50;

Zoals je ziet zie je twee keer de formule om iets in een cirkelbeweging te laten gaan. Alleen bij de eerste slaan we alleen de positie op in twee variabelen (de aarde: cirkely en cirkels) en vanuit die relatieve positie beginnen we de formule opnieuw. Door te spelen met de getallen kom je tot verschillende resultaten.

Het resultaat ziet er dan uit zoals in het filmpje (de atoom die links begint).

Na wat spelen met de getallen kom ik uit op <twee andere=”” bewegingen=”” die=”” je=”” <a=”” href=”http://mikevanrossum.nl/wp-content/uploads/2011/01/Atoms4.swf">hier kan zien.

Hier is de uiteindelijke broncode van het bovenstaande voorbeeld.

/** Atoms.as -- Jan 10, 2011
 *
 * Beschrijving: [beschrijving van dit bestand]
 * 
 * @author Mike van Rossum
 *
 * Copyleft 2011, all wrongs reversed.
 */
package
{
    // Importeer benodigde classes
    import Bal;

import flash.display.Sprite;
import flash.events.Event;

public class Atoms extends Sprite
{
    // Variabele declaratie
    private var arrayLinks:Array;
    private var arrayRechts:Array;

    private var grootteBal:int;
    private var angle:Number;

    private var linkerCirkel:Bal;
    private var rechterCirkel:Bal;

    private var LinkerCirkely:int;
    private var LinkerCirkelx:int;

    private var rechterCirkely:int;
    private var RechterCirkelx:int;

    private var vis:Number;

    // Constructor functie
    public function Atoms()
    {
        addEventListener(Event.ENTER_FRAME, MoveAtoms);     

        LinkerCirkely = new int;
        LinkerCirkelx = new int;

        rechterCirkely = new int;
        RechterCirkelx = new int;

        arrayRechts = new Array;
        arrayLinks = new Array;

        vis= new Number;
        vis = .035

        angle = new Number;
        angle = 0;

        for (var i:int=0; i&lt;15; i++)
        {
            var bal:Bal;
            bal = new Bal(0x0000ff,6);
            addChild(bal.cirkel);
            arrayLinks[i] = bal.cirkel;
        }

        for (var j:int=0; j&lt;15; j++)
        {
            var bal:Bal;
            bal = new Bal(0x0000ff,6);
            addChild(bal.cirkel);
            arrayRechts[j] = bal.cirkel;
        }

        linkerCirkel = new Bal(0xff0000,117);
        linkerCirkel.cirkel.y = stage.stageHeight/2; 
        linkerCirkel.cirkel.x = stage.stageWidth/20;
        linkerCirkel.cirkel.alpha = .5;
        addChild(linkerCirkel.cirkel);  

        rechterCirkel = new Bal(0xff0000,30);
        rechterCirkel.cirkel.y = stage.stageHeight/2;
        rechterCirkel.cirkel.x = stage.stageWidth/20*18; 
        rechterCirkel.cirkel.alpha = .5;
        addChild(rechterCirkel.cirkel); 
    }

    // Eigen functies
    public function MoveAtoms(event:Event):void 
    {

        //dit moeten we elk frame verhogen om te zorgen dat er een draaibeweging is
        angle += .1;

        //laat de rechterCirkel in en uit faden.
        rechterCirkel.cirkel.alpha -= vis;
        if (rechterCirkel.cirkel.alpha &gt;= 1 || rechterCirkel.cirkel.alpha &lt;= 0 )
        {
            vis *= -1;
        }

        //beweeg linkerballetjes
        for (var i:int=0; i&lt;15; i++)
        {   
            LinkerCirkely = stage.stageHeight/2 + Math.sin(angle*(i+7)/8) * 50;
            LinkerCirkelx = stage.stageWidth/20  + Math.cos(angle*(i+7)/8) * 50;

            arrayLinks[i].y = LinkerCirkely + Math.sin(-angle*(i+7)/100) * 60;
            arrayLinks[i].x = LinkerCirkelx + Math.cos(-angle*(i+7)/100) * 60;
        }

        //beweeg rechterballetjes
        for (var j:int=0; j&lt;15; j++)
        {
            rechterCirkely = stage.stageHeight/2 + Math.sin(angle*(j+7)/8) *  60;
            RechterCirkelx = stage.stageWidth/20*18 + Math.cos(angle*(j+7)/8) * 60;

            arrayRechts[j].y = rechterCirkely + Math.sin(-angle*(j+7)/20) * 25;
            arrayRechts[j].x = RechterCirkelx + Math.cos(-angle*(j+7)/20) * 25;
        }
    }
}

Posted at January 12, 2011, under AS3.

deeltoets 3: The origin of Snow

Today we had to hand in our final assignment for the subject Programming: Action Script 3. After my last assignment snow I wasn’t sure what to make next that would be at least as good as snow was. After a some time I knew I couldn’t just add stuff into snow to make it work better, so I thought: Why not make an intro movie or something? In the meantime I was practicing some things like arrays in arrays and the z index and I already had some half project lying around.

Here is everything combined together, into a full science science documentary! For the full experience sound is required. Here is The Origin of Snow (and basically everything else)!

When you see snow, you can make drag movements with your mouse.

Let me know what you think!

Posted at January 10, 2011, under AS3.

Houd de snelheid van je php script bij

Ik vroeg me af hoeveel impact een bepaalde PHP functie op de rendertijd van de output had. Een makkelijke manier om hierachter te komen is om bij te houden hoelaat PHP begint aan je script en hoelaat hij eindigt. Echo het verschil en je weet precies hoe lang je moet wachten tot dat de server je pagina uitspuugt.

Houdt er rekening mee dat de klok pas begint met lopen zodra de server de request heeft ontvangen (wat altijd later is dan wanneer je een verzoek doet tot de pagina vanaf een browser ivm. het internet). Ook stopt de klok _al_ zodra de server klaar is, hierna moet de webpagina nog verstuurd worden naar de client.

//helemaal aan het begin van je script zet je dit
$startTime = microtime(true)

// …

Nu kan je in je broncode van je html onderaan vinden hoelang de pagina ermee bezig was, iets in deze trend:

Ik kwam er al snel achter dat als je PHP in combinatie met SQL gebruikt (wat je altijd doet als je data op wilt slaan) er geen pijl meer op te trekken is hoelang de pagina erover doet.

Posted at January 05, 2011, under PHP.

Hoe programmeer je zwaartekracht in AS3?

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 tutorial maak ik zwaartekracht in een hele simpele vorm, je houdt een bal over die valt tot op de grond. En als je op een toets drukt springt hij omhoog. Dit is misschien niet de meest efficiente manier maar hij is volgens mij het meest simpel. (In het boek heb je een uitgebreidere manier met acceleratie.)

Eerst wat basis dingetjes:

  • zwaartekracht is gewoon een getal die elke keer bij de Y positie van een object wordt toegepast.
  • zwaartekracht mag alleen iets laten vallen op het moment dat het niet op de grond staat.
  • wanneer je een sprong maakt ga je in het begin snel, en daarna steeds langzamer tot je weer valt.

En hier zie je alvast de code gecompileerd (druk op toets voor sprong).

Hier is de code:

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

public class Zwaartekracht extends Sprite
{
    public var bal:Sprite;
    public var grond:Sprite;
    public var sprong:int;

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

        addEventListener(Event.ENTER_FRAME, beweegBal);
        stage.addEventListener(KeyboardEvent.KEY_DOWN, toets);

        bal = new Sprite;
        bal.graphics.beginFill(0xff0000);
        bal.graphics.drawCircle(0,0,20);
        bal.graphics.endFill();
        bal.y = 100;
        bal.x = 100;
        addChild(bal);

        grond = new Sprite;
        grond.graphics.beginFill(0x00000);
        grond.graphics.drawRect(0,0,1000,10);
        grond.graphics.endFill();
        grond.y = 500;
        grond.x = 0;
        addChild(grond);

        sprong = new int;
        sprong = 0;
    }

    public function beweegBal(event:Event):void
    {
        if (bal.y + bal.height/2 &lt; grond.y)
        {
            bal.y = bal.y + 10 - sprong;
        }
        else
        {
            bal.y = bal.y - sprong;
        }
        if (sprong &gt; 0)
        {
        sprong--;
        }   
    }

    public function toets(Event:KeyboardEvent):void 
    {
        sprong = 20;
    }
}

regel 22, 50 en 51 Hier maak ik een variabele aan met de naam sprong, overal waar je verder sprong ziet staan kan je dit woord vervangen door de waarde die hij heeft (een getal). Op regel 51 zie je dat die waarde standaard 0 is.

regel 54 tot 68 In deze functie gebeurt alle beweging.

Ik kijk eerst of de bal in de lucht hangt of op de grond ligt. Als het randje van de bal hoger is dan de Y as van de grond dan ligt hij dus NIET op de grond. En dan moet hij vallen dus: de Y van de bal WORDT de Y van de bal PLUS de zwaartekracht (ik koos voor 10). Ik doe hier nog iets namelijk – sprong. Zoals je weet staat sprong voor een getal, en staandaard op 0. Standaard kan je dit dus negeren.

Daarnaast haal ik elk frame 1 van sprong af behalve als hij 0 is.

regel 72 Nu valt je bal mooi omlaag maar hij moest ook kunnen springen, alles staat al goed omdat ik een variabele sprong heb: Elke keer als je op een toets drukt wordt de sprong gereset naar 20. Dit zorgt ervoor dat je de formule voor het berekenen van de Y iets veranderd: de Y van de bal WORDT de Y van de bal PLUS de zwaartekracht (ik koos voor 10) MIN de sprong. de sprong is 20 dus we kijken wat de Y as is, tellen daar 10 bij op en halen er dan weer 20 vanaf (oftewel we halen er 10 vanaf). Let erop dat als we de bal omhoog willen krijgen we iets van de Y as af moeten halen, we moeten namelijk richting de 0 (bovenkant).

En ik had ook gezegd dat elk frame er 1 van sprong (20) afgehaald moet worden zodat de sprong langzaam afremt en vanaf de 10 de bal weer valt (want + 10 – 10 is 0 en hierna wordt het alleen maar lager).

Dit is een hele simpele vorm van zwaartekracht, er zitten wat kleine bugs in zoals dat je kan springen in de lucht (te verhelpen met een simpel if statement) en dat hij soms in de grond valt (ook heel simpel te verhelpen).

Posted at January 03, 2011, under AS3.