[TUTORIAL] Soepele Button Animaties

Overal zie ik vaak vragen voorbij komen over hoe je nou zo'n soepele button maakt, die wanneer je met de muis erop komt begin te spelen, en wanneer je met je muis eraf gaat vanaf hetzelfde punt weer terug gaat. Met deze tutorial hoop ik toch daar een einde aan te maken, want zo moeilijk is het niet! Laat ik de vraag eens anders formuleren, en het word misschien al wel duidelijk: 'Hoe kan ik mijn button op het moment dat er op sta een frame verder laten gaan, en wanneer ik er weer af ga frame's terug spelen tot hij weer op de startpositie staat? '.

Waarschijnlijk begrijp je na deze formulering wel dat het absoluut niet nodig is een animatie voor de heen gaande EN de terug gaande beweging te maken. Deze is immers alleen maar omgekeerd (en wanneer deze niet hetzelfde zijn, kan je ook niet op het zelfde punt terug spelen). Even een voorbeeldje van zo'n button:


Het is dan ook vrij simpel om de rest te scripten. Het bestaat uit een onRollOver event (welke aangeroepen word wanneer je de muis op je button zet) en een onRollOut event (welke natuurlijk aangeroepen word wanneer je de button weer verlaat met je muis). Binnen bijde events word in deze button een onEnterFrame event gemaakt, die bij elke frame (dus afhankelijk van de frame rate) word aangeroepen. in de onEnterFrame event van de onRollOver komt dan eerst de vergelijking om te kijken of we niet al bij het laatste frame zijn. Wanneer dit het geval is stoppen we de onEnterFrame. Waneer dit niet zo is doen we een frame verder:

btn1.onRollOver = function()
{

this.onEnterFrame = function()
{

if (this._currentframe == this._totalframes)
{

delete this.onEnterFrame;

}
else
{

this.nextFrame();

}

};

};

Daarna doen we vrijwel hetzelfde voor de onRollOut event, het enige verschil is natuurlijk dat we in plaats van het volgende frame natuurlijk het vorige frame aanroepen, en in plaat van controleren of we het laatste frame hebben bereikt, kijken we of het eerste frame is bereikt. Het totaal ziet er dan zo uit:

btn1.onRollOver = function()
{

this.onEnterFrame = function()
{

if (this._currentframe == this._totalframes)
{

delete this.onEnterFrame;

}
else
{

this.nextFrame();

}

};

};

btn1.onRollOut = function()
{

this.onEnterFrame = function()
{

if (this._currentframe == 1)
{

delete this.onEnterFrame;

}
else
{

this.prevFrame();

}

};

};