Oplossing voor een knop animatie

[JanHoos]

hey! Ik heb weer iets waar ik op vast loop ;)

Zie dit vaak gebeuren op flash sites met geanimeerde knoppen. Knoppen hebben dan een glow of er komt iets uit schuiven als je er met je muis overheen gaat. Maar stel die animatie duurt 5 seconden. En je gaat er met je muis af op de 2 seconden dan loopt de animatie terug van de 5 seconden zeg maar.

Ter illustratie zo zou het in de tijdlijn kunnen staan:

Home
Home met mouse over
Home>>>>>>>>>>>>Hier lees je over ons
pijltje stellen animatie voor van Hier lees je over ons die uit home komt
Bij mouse out
Home<<<<<<<<<<<<Hier lees je over ons

Maar wat! als ik met mouse over stop als Hier lees je over ons in het midden van de rij pijltjes staat. Dan begint de mouse out wel gewoon helemaal achter aan. Hier lees je over ons zal dus een sprong naar rechts maken.

Nou heb ik het voor een deel opgelost door op 3 punten extra listeners te plaatsen. Stel je gaat er bij het pijltje 3 af dan begint de terug animatie bij 3. etc etc

Maar dan komt hij terug bij 0. Als ik dan bij pijltje 1 eraf gaat begint de terug animatie wel bij het verste, laatst gebruikte punt. Dus stel ik heb 1x mouse out bij 3 gedaan maar ook een keer bij 6 dan zal hij elke keer terug springen naar 6.

Hoe lossen julie dit probleem op?

[mknol]

Wat ik eruit begrijp (het is niet heel duidelijk, maar dat kan aan mij liggen), is dat je een tijdlijn maakt voor elke button, en dat je bij bepaalde mouse-states een gotoAndPlay doet? En het probleem is dan dat je niet weet hoe je een soepele overgang maakt tussen een mouse over en een mouse out, als je niet weet waar je precies bent (in de tijdslijn), toch?

Nog even los van de animatie zelf (die snap ik niet zonder dat ik het zie);
Er zijn een aantal methodes:

Wat ik vaak doe is een soort disabler erop zetten. Dat houdt dus in, dat als je tussendoor een animatie iets probeert te doen met je muis, dat hij niet meer reageert, totdat de animatie klaar is. Dit kan gemakkelijk door met AS een boolean ( bijv. var isPlaying:boolean o.i.d.) aan te maken en die wel/niet te laten reageren met je muis acties. Dit is een vrij makkelijke methode, wat vaak goed werkt.

Wat ook kan is dit:
Stel je animatie duurt even lang naar voren als naar achter en doet vrijwel hetzelfde. Je zou een functie kunnen schrijven die i.p.v. gotoAndPlay naar een totaal andere animatie doet, ook een soort reverse functie kunnen maken. Laten we het simpel zeggen: gotoAndPlay( currentFrame - 1 )-achtig. Zo kun je eigenlijk de animatie terug spoelen. Even pielen met een mooi scriptje (is leuk om zelf uit te zoeken) en het voordeel is; tis altijd smooth. Dit werkt natuurlijk alleen als over en out animaties hetzelfde zijn.

Of als je hardcore wilt gaan, kun je ook alles gaan coden en bijvoorbeeld een Tween engine gebruiken zoals ZigoEngine Fuse (huidig alleen AS2) of Tweener (AS2 en AS3). Dan heb je uiteindelijk nog meer controle en kun je zelf bepalen wanneer wat gebeurt en naar welke posities dingen moeten bewegen, onafhankelijk van waar hij is. Dit is natuurlijk een uitdaging, maar kan ook een hoop frustraties geven als je nog niet echt ver bent met coden. Dit is natuurlijk aan jezelf.

Misschien kun je er wat mee.

[JanHoos]

Ja sorry ik vond het ook nogal *** om uit te leggen :P

Maar wat ik bedoel is het volgende:

Bij veel flash sites heb je bijvoorbeeld een glow die in het midden van de knop begint en naar de randen van de knoppen gaat. Maar dat gebeurd tijdens dat je je muis op de knop houdt. Maar als je eraf gaat krijg je een animatie dat die glow terug naar het midden gaat. Die animatie is zo opgezet dat hij begint van de grootste glow en vandaar terug loopt.

Maar wat als je nou met je muis van de knop afgaat als de glow nog maar net begonnen is. Dan springt de glow verder naar het punt dat hij helemaal gevuld is om dan weer terug te lopen.

Is er iets om te testen zodat je kan zien de glow 10% is met mouse over dus ga dan ook naar het punt in de mouse_out animatie waar die op 10% zit.

Maar volgens mij heb jij het wel aardig begrepen ;) Ik ga zo nog even kijken.

[joranderaaff]

Edit:
Neem me niet kwalijk, zat AS2 te typen

[MAST]

Als ik je goed begrijp (ik geloof het wel, ik probeer namelijk hetzelfde te maken) dan wil je dat ie altijd vloeiend weer terug loopt, ookal onderbreek je de animatie, right?

Ik had een ideetje, maar door mijn gebrek aan AS kennis kan ik het niet helemaal uitwerken:

Stel de mouseOver-animatie duurt 10 frames, van 1 t/m 10
Stel de mouseOut-animatie duurt ook 10 frames, van 10 t/m 19

Stop in frame 1 en 10 een stop() command

Er moet een script komen die in elke frame op de tijdlijn werkt:

Script in woorden:

actieveFrame = frame waar je op dat moment bent

Als (muis over de button gaat) en (actieveFrame is niet 1 of 19) {
ga naar frame (20 - actieveFrame)
}

*edit*

Dat wat ik wilde maken is in ieder geval gelukt, misschien kan je er wat hulp uit halen:


knop.addEventListener(MouseEvent.MOUSE_OVER, rollOver)
function rollOver (e:MouseEvent) {
if (currentFrame == 1) {
gotoAndPlay(2);
}
else {
gotoAndPlay(30 - currentFrame);
}
}

knop.addEventListener(MouseEvent.MOUSE_OUT, rollOut)
function rollOut (e:MouseEvent) {
if (currentFrame == 15) {
gotoAndPlay(16);
}
else {
gotoAndPlay(30 - currentFrame);
}
}

[Mr. Black]

Het script van MAST komt aardig in de buurt, maar er zitten nog wat schoonheidsfoutjes in. Het volgende script 'draait de animatie ook om' als hij aan het teruggaan is, je zult zien wat ik bedoel. Verder kan je de animatie beter binnen de MovieClip regelen (misschien doe je dat nu ook al) en dan vanaf buiten aansturen.


button.addEventListener( MouseEvent.MOUSE_OVER, overHandler );
button.addEventListener( MouseEvent.MOUSE_OUT, outHandler );

function overHandler( event:Event ):void
{
if ( button.currentFrame == 1 )
{
button.play();
}

else if ( button.currentFrame > 20 )
{
button.gotoAndPlay( 40 - button.currentFrame );
}
}

function outHandler( event:Event ):void
{
if ( button.currentFrame == 20 )
{
button.play();
}

else if ( button.currentFrame < 20 )
{
button.gotoAndPlay( 40 - button.currentFrame );
}
}

Het gaat hier om een animatie van 40 frames, 20 heen en 20 terug. Op de frames 1 en 20 staat stop();.

Succes nog! :)

[MAST]

Het script van MAST komt aardig in de buurt, maar er zitten nog wat schoonheidsfoutjes in.

Welke bedoel je?

[Mr. Black]

Welke bedoel je?
Niet aangevallen voelen hoor. :)

Maar ten eerste heb je het in je verhaaltje over 20 frames, maar in je script gaat het toch echt om 30 frames. Kan voor verwarring zorgen.

Ten tweede moet je binnen de functie 2 maal de currentFrame checken, niet slechts 1 keer zoals jij doet:


if (currentFrame == 1) {
gotoAndPlay(2);
}
else {
gotoAndPlay(30 - currentFrame);
}

Als currentFrame nu 10 is, en je gaat er met je muis op (snel af en op voor het middenpunt dus), dan zou hij verder gaat bij 20 - teruglopend! Als je dan met je muis erop gaat loopt de animatie weer terug, dat is natuurlijk niet zo logisch. Je moet (nou ja, moet is een groot woord) dus even kijken of currentFrame al over de helft is. :)

En ten slotte is het netter om de animatie in een MovieClip zelf te stoppen, zoals ik al aangaf. :)