[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();

}

};

};

[TUTORIAL] De Blokhaken notatie

De blokhaken( '[' en ']') notatie is eigenlijk min of meer de opvolger van wat eerst eval() was. Het idee is eigenlijk precies hetzelfde als een array, maar in plaats van dat je getallen gebruikt om een bepaald items hierin aan te spreken, gebruik je in deze notatie strings. De array word dan vervangen door een MovieClip, of een ander Object. Het stelt je dus in feite in staat een MovieClip of Object te doorzoeken of deze een instatie bevat gelijk aan de string. Wanneer je dit nog nooit hebt gebruikt zal je wel denken: als ik deze string weet, waarom noteer ik het dan niet gewoon bijvoorbeeld zo:

movieclip.referentie.waarde = "string";

Het antwoord is: het is niet dynamisch. Wanneer je bijvoorbeeld aan de hand van for-loops een bepaald aantal MovieClips op je stage laat zetten, weet je niet hoeveel het er zijn en dus welke instanties er na de loop op je stage staan. Met de blokhaken notatie kan je dus in de in een movieclip zoeken naar een string(en dus ook een string in combinatie van één of meer variabelen). Hé? Hoor ik daar variabelen? Inderdaad, nu is het wel dynamisch.

[b]Hoe gebruik ik de blokhaken notatie[/b]

Stel je voor, je maakt dmv een for-loop een x aantal MovieClips aan. De nieuwe naam die je toekent word samengesteld uit de string 'mc' met daarachter de huidige waarde van variablele 'i'. Hoe spreek ik deze movielip dan het beste aan?

var aantal:Number = 5;
for (var i:Number = 0; i <= aantal; i++)
{
this.attachMovie("mcinlibrary", "mc" + i, this.getNextHighestDepth());
this["mc"+i].i = i;
this["mc"+i]._x = this["mc"+i].i*20;
}

Het idee zal nu wel duidelijk zijn. aangezien je de nieuwe instantie in 'this' attachd, zal je hierin gaan 'zoeken'. De referentie is zoals je bij de instance name van de geattachde MC hebt ingegeven is "mc"+i. Met this["mc"+i] zal je dus de MovieClip bedoelen in 'this' met de instancename gelijk aan de uitkomst van de samengestelde string.

[TUTORIAL] Auto beweging met toetsenbord

In deze tutorial ga ik het rijden van een auto in flash behandelen. Zeker voor de beginnende flasher kan dit al snel een leuk resultaat geven. Ik behandel zowel de simpele vorm, en de wat realistischere vorm.

De simpele vorm:


De wat realistischere vorm:


De simpele vorm

Moeilijkste bij nieuwe dingen is altijd bedenken hoe je het aan gaat pakken. Hoe zal je dit nou aanpakken? Denk even goed na welke variabelen afhangen van de x en de y waarden. Dat zijn natuurlijk de snelheid en de rotatie. Waneer je hier een plaatje van tekent zal het je misschien wel opvallen, wiskunde!

Je ziet met de rode stip aangegeven de huidige positie van de auto, en de andere rode stip de positie waar hij moet eindigen met deze rotatie en snelheid.
Als je het nog goed herinnert van school, is dit makkelijk uit te rekenen met cos, sin en tan:

this._x += Math.sin(this._rotation*(Math.PI/180))*speed;

this._y += Math.cos(this._rotation*(Math.PI/180))*speed*-1;

Let op: vergeet niet de rotatie te vermenigvuldigen met PI/180, aangezien de rotatie in flash in graden gaat, en je de rotatie in radialen moet hebben (180 graden = 1PI radialen).

Met een beetje basis moet de rest helemaal simpel zijn:

var speed:Number = new Number(0);

car.onEnterFrame = function() {

if (Key.isDown(Key.UP) && speed<7) {

speed += .2;

} else if (Key.isDown(Key.DOWN) && speed>-3) {

speed -= .1;

}
if (Key.isDown(Key.LEFT)) {

car._rotation -= 4;

}
if (Key.isDown(Key.RIGHT)) {

car._rotation += 4;

}
this._x += Math.sin(this._rotation*(Math.PI/180))*speed;
this._y += Math.cos(this._rotation*(Math.PI/180))*speed*-1;

speed *= .98;
};

De realistischere vorm

Wat gebeurd er nou meer/minder dan bij de simpele vorm. Hier is een simpel truckje voor. Wat in de simpele vorm de x en y waarde worden, worden nu eerst virtuele x en y posities. Deze punten zijn als het ware het 'streven', je auto wil daar heen bewegen. Maar om het slippen mogelijk te maken zal hij er niet helemaal komen. We laten hem er elk frame als het ware naar toe easen. Bij een Framerate van 31 fps:

var vx:Number = car._x;
var vy:Number = car._y;
var speed:Number = new Number(0);

car.onEnterFrame = function() {

if (Key.isDown(Key.UP) && speed<7) {

speed += .2;

} else if (Key.isDown(Key.DOWN) && speed>-3) {

speed -= .1;

}
if (Key.isDown(Key.LEFT)) {

car._rotation -= 7;
speed -= .15;

}
if (Key.isDown(Key.RIGHT)) {

car._rotation += 7;
speed -= .15;

}
vx += Math.sin(this._rotation*(Math.PI/180))*speed;
vy += Math.cos(this._rotation*(Math.PI/180))*speed*-1;

this._x += (vx-this._x)/15;
this._y += (vy-this._y)/15;

speed *= .98;
};

Zoals je misschien wel is opgevallen, er is nu bij het draaien ook voor gezorgd dat je iets af remt, probeer het maar eens zonder en zie het resultaat.

[TUTORIAL] Rechtermuisknop Menu

Wat mij de laatste tijd vaak opvalt, zelfs bij professionele flash-websites is dat ze het rechtermuisknop-menu van flash laten voor wat het is. Dit geeft je het recht om in en uit te zoomen, de kwaliteit van je movie te bepalen, voor en achteruit in frames te gaan. Ik vind dit persoonlijk erg onprofessioneel en onhandig. Daarbij kan je ook je eigen items toevoegen, voor zowel algemeen, maar ook wanneer je rechtermuisknop klikt op een movieclip. In deze tutorial gaan we een eigen rechtermuisknop menu in elkaar zetten.

Build-in-Items

Voordat je begint met testen zal ik je vast van een hoop geprobeer af helpen: bij het testen van je movie (ctrl+enter) zie je rechtermuisknop menu NIET! Je moet je bestand dus openen in een 'gewone' flashplayer voor je het resultaat kan zien!

De standaard items zoals hierboven al aangegeven zijn gemakkelijk uit te schakelen. Eerst maak je een ContextMenu aan met de ContextMenu klasse, daarna ken je hem toe aan het menu. In onderstaand voorbeeld zie je hoe je ook weer bepaalde items aan kan zetten. In dit geval de print functie:

var my_cm:ContextMenu = new ContextMenu();

my_cm.hideBuiltInItems();

my_cm.builtInItems.print = true;

this.menu = my_cm;

Op deze manier is het dus ook makkelijk bijvoorbeeld alleen de zoom functie uit te schakelen. Het is dus niet de bedoeling alles uit te schakelen, en dan weer alles in te schakelen behalve een bepaald item!

var my_cm:ContextMenu = new ContextMenu();

my_cm.builtInItems.zoom = false;

this.menu = my_cm;

Custom Items

Het is ook mogelijk om eigen items toe te voegen aan het menu, met zelf gemaakte functies. Zo is het bijvoorbeeld mogelijk om een items toe te voegen om Een website te bekijken. Dit is bijvoorbeeld handig in flash signatures. Je menu bestaat uit een array, gevult met ContextMenuItems. Onderstaand voorbeeld laat zien hoe je een link naar www.google.nl toevoegt aan je menu:

var menu:ContextMenu = new ContextMenu();

menu.hideBuiltInItems();

var siteItem:ContextMenuItem = new ContextMenuItem("Visit Google", openSite);

menu.customItems.push(siteItem);

this.menu = menu;

function openSite() {

getURL("http://www.google.nl/", _blank);

}

Deze custom-items zijn ook toe te kennen aan MC's. Je kan hier leuke dingen mee doen, hier een voorbeeldje van hoe je hem kan laten roteren.

var menuMc:ContextMenu = new ContextMenu();

var hoofdMenu:ContextMenu = new ContextMenu();

hoofdMenu.hideBuiltInItems();

var siteItem:ContextMenuItem = new ContextMenuItem("Rotate 90 degrees", rotate);

menuMc.customItems.push(siteItem);

mc1.menu = menuMc;

this.menu = hoofdMenu;

function rotate(target:MovieClip) {

target._rotation += 90;

}

onSelect()

Het onSelect() event geeft ons de mogelijkheid een actie uit te voeren wanneer de rechtermuisknop is ingedrukt, nog voordat het menu zichtbaar word. Als laatste voorbeeld heb ik hier een script om door middel van het indrukken van je rechtermuisknop om op die plek een vierkantje aan te Stage toe te voegen:

this.createEmptyMovieClip("square", this.getNextHighestDepth());
square.lineStyle(1, 0x000000, 100);
square.moveTo(-5, -5);
square.lineTo(5, -5);
square.lineTo(5, 5);
square.lineTo(-5, 5);
square.lineTo(-5, -5);
square._x = 1000;

var n:Number = 0;

var xm:Number = new Number();
var ym:Number = new Number();

var my_cm:ContextMenu = new ContextMenu();
var addsquare:ContextMenuItem = new ContextMenuItem("Add Square", addSquare);
my_cm.customItems.push(addsquare);
my_cm.onSelect = save;
this.menu = my_cm;

function save(obj:Object, menu:ContextMenu) {

xm = _root._xmouse;
ym = _root._ymouse;

}

function addSquare() {

n++;
square.duplicateMovieClip("square"+n, _level0.getNextHighestDepth());
_level0["square"+n]._x = xm;
_level0["square"+n]._y = ym;

}

Wanneer je een site maakt, of iets anders in Flash, raad ik toch echt aan van deze mogelijkheden gebruik te maken. De gebruiker kan anders ongewenste acties laten uitvoeren, waardoor je movie niet meer goed werkt!

[EXPERIMENT] PhotoGallery

Misschien ben je het al wel eens tegen gekomen, een prototype 3d desktop genaamd BumpTop. Naar mijn idee is het idee geniaal, ik weet niet zeker of het handig werkt. Hier een preview van hoe het zal worden:

Dit heeft mij ertoe gezet er een beetje mee te gaan experimenten in Flash. In mijn geval heb ik het dan wel gewoon 2d gehouden. Even wat functies en uitleg voordat ik je het resultaat tot nu toe zal laten zien:

Bovenin staat het menu. Deze kan je openen en sluiten door op menu te drukken. In dit menu staat een textvak met standaard de text "URL of Picture goes here...". Daar kan je de URL invullen van een foto dit in dezelfde map als het .swf bestand, of een URL van een plaatje van internet. Wanneer je dan op de 'Add Picture' knop druk zal je afbeelding in het midden van het scherm verschijnen.

Er zijn 2 mode's: de 'Explore Mode' en de 'Arrange Mode'. Bij de 'Arrange Mode' is het mogelijk je foto's te slepen en te gooien. Zo kan je foto's bij elkaar leggen en ordenen. In de 'Explore Mode' is het mogelijk om door middel van de muis te bewegen de foto's in een wat groter formaat te bekijken.

Onder de rechtermuisknop zitten nog 3 functies verscholen. Hier kan je een foto verwijderen, hem draaien, en een functie welke nog niet helemaal werkt: je foto in de browser bekijken.

Ik hoop dat het een beetje duidelijk is. Ik ben nog bezig functies te verbeteren/toe te voegen. Ik zal dit binnenkort weer updaten.

Hier vind je het resultaat