Fotoblog mijnrealiteit.nl vernieuwd

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

Ik heb onlangs mijn fotoblog mijnrealiteit vernieuwd. Ik heb de website ontworpen met de simpliciteit van een aantal tumblr blogs in mijn achterhoofd. Op de site plaats ik foto’s die ik zelf maak (voornamelijk met mijn iPhone). Van opvallende dingen tot instagram achtige foto’s.

Ik heb bij het ontwerpen van de website zoveel mogelijk rekening gehouden met verschillende platformen (eerlijk gezegd alleen met PC, iPad en iPhone) door gebruik te maken van media queries.

De website draait op WordPress, dit lijkt misschien onnodig in verband met de enorm simpele website maar heeft voor mij een groot voordeel: Je kan publishen op een wordpress site door gebruik te maken van de native iPhone app. Dit kan ik niet alleen ter plekke gelijk na het maken van de foto, ook wordt de geolocatie gelijk opgeslagen.

Alle code van het wordpress thema staat op github.

Extreem simplistische contactpagina

Ik zat al een tijdje met het idee in mijn hoofd om een extreem simplistische / strakke / contrasterende website te designen. En dit is het resultaat:

Check de live website, of download de PSD.

Ik ben benieuwd wat jullie ervan vinden.

Posted at September 17, 2011, under design.

Nieuw WordPress Theme: mijnrealiteit

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

Vorige week heb ik snel een nieuw WordPress thema gemaakt voor mijn fotoblog mijnrealiteit.nl. Ik maakte al een tijdje gebruik van een verouderd thema waar ik eigenlijk nooit tevreden over ben geweest. Vorige week had ik eindelijk tijd om hier eens voor te zitten.

In plaats van om van scratch te beginnen leek het me slim om een boilerplate te gebruiken (zoals de html 5 boilerplate). Dit is een html reset (lege pagina) waarin een hele hoop al voor je geregeld is, er zitten ook scriptjes bij die automatisch alles voor je minify’en en je plaatjes comprimeren. Kortom een perfect startpunt.

Ik kwam er al snel achter dat iemand deze boilerplate al had ingebakken in een leeg wordpress thema. Vanwege het enorm simplistische thema en de html5 boilerplate als startpunt was ik ook bijzonder snel met het complete thema klaar, compleet HTML5.

Ik gebruik redelijk wat jQuery voor wat animatie effectjes (niet te fancy) om bijvoorbeeld als je ergens overheen hovert al het overige uit te faden en te blenden. Ook gebruik ik de google maps API om foto’s aan geo locatie’s te koppelen.

Hier is het eindresultaat en je kan alle code bekijken op github.

Binnekort zal ik een korte tutorial schrijven over hoe je dit thema zelf kan gebruiken (inclusief de ingebakken koppeling met google Maps).

Redesign portfolio website

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

De laatste paar weken heb ik me bezig gehouden met het redesignen van mijn portfolio website. Ik heb besloten de site in het Nederlands te houden in tegenstelling tot zijn voorganger.

Je kan de nieuwe website bekijken op mikevanrossum.nl

Hier kan je de oude website bekijken om te vergelijken: mikevanrossum.com

De blog pagina is nog niet af maar hij is nu toch al redelijk compleet. Laat me weten wat je ervan vindt!

Posted at March 21, 2011, under design.

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 17, 2011, under AS3design.