2e Button zichtbaar in mouse over 1e button

[spiritonline]

Hallo,

Ik heb een pagina met meerdere buttons gemaakt. (allemaal mouse overs)

Nu is het probleem dat als ik in de exported movie mouse over maak over de 1e button de 2e button er "overheen zichtbaar is"


alle buttons zijn op de zelfde layer en ik heb dit command geprobeerd:
--------------------------------------
fire_button.onRollOver = function(){
this.swapDepths(10000);
}
--------------------------------------
Raadpleeg aub screenshot & swf voor meer detail.



Een screenshot is hier te vinden:
http://img178.imageshack.us/my.php?i...nscriptqx8.png

swf: http://www.mediafire.com/?uizzojc0znc

[digitalecartoons]

swapDepths (MovieClip.swapDepths method)
swapDepths werkt alleen met movieclips, niet met buttons. Als je van je buttons bij Properties de Instance Behaviour setting van button naar movieclip zet zal het waarschijnljik wel werken met de swapDepths die je gebruikte.

Wat ook werkt (dan kan je de Instance Behaviour op Button laten staan) is de swapDepth prototype van Movieclip naar Button kopieren:
Button.prototype.swapDepths = MovieClip.prototype.swapDepths;
Met dit extra regeltje werkt swapDepth tevens voor Buttons.

Hetzelfde truukje kan je ook voor textfields toepassen:
TextField.prototype.swapDepths = MovieClip.prototype.swapDepths;

[spiritonline]

Hoi,

aller eerst, onwijs bedankt dat je de tijd neemt me te helpen.

Ik heb het andere command geprobeerd maar toch krijg ik weer de zelfde fout...
Ik heb de fla dit keer toegevoegd aan de post. Zou je a.u.b. kunnen kijken wat ik fout gedaan heb ?

Alvast enorm bedankt !

link:
http://www.mediafire.com/?zacxnmndn5d

[digitalecartoons]

Heb helaas geen CS3, dus kan 'm niet openen. Is het mogelijk dat je 'm als Flash 8 kopie opslaat?

[spiritonline]

Ja tuurlijk. een moment a.u.b.

[spiritonline]

flash 8 link:
http://www.mediafire.com/?mnlnwjmucwm

(sorry voor de tijdsduur, mijn upload snelheid is niet erg snel)

[digitalecartoons]

Heb je file even bekeken en het beste wat je zou kunnen doen is om niet gebruik te maken van de standaard buttons van flash (met de up/over/down/hit states), maar van 'movieclip buttons'. Je weet hoe je die maakt?

Heb bijgaand een voorbeeldje gemaakt van twee movieclip buttons. In plaats van up/over states staat iedere 'state' in een apart keyframe. Frame 1 begint met stop() zodat hij niet loopt. Op de onderste laag staat een vlak die als hitvlak dient. Een simpele rechthoek, geconverteerd naar movieclip, met een alpha van 0 zodat die verder onzichtbaar is. Zowel de movieclip als de geneste hitvlak movieclip hebben een instance naam. Zodat je dat hitvlak kan targetten.

De code voor één button is bijvoorbeeld als volgt:
btn1.hitarea1.onRollOver = function() {
btn1.swapDepths(9999);
btn1.gotoAndStop(2);
};
btn1.hitarea1.onRollOut = function() {
btn1.gotoAndStop(1);
};
Hitarea1 is dan die hitvlak clip die binnenin de btn1 clip zit op de onderste laag. Die kan je dus opvangen met onRollOver/onRollOut. Zodat de movieclip button in principe hetzelfde werkt als een normale button. Bij een onRollOver wordt gesprongen naar frame 2 (die dus als Over State dient) en bij een onRollOut weer terug naar frame 1. Met een onRelease kan je er zo ook nog een klik actie op ondervangen. Een standaard button is dus prima na te maken in movieclip vorm.

Ik heb hier dus twee van die movieclip buttons geplaatst en door bij een onRollOver een swapDepths erop toe te passen komt de clip op de voorgrond. Het maakt niet uit dat beide swapDepths hetzelfde zijn: zodra een clip een depth krijgt die de vorige clip net had (9999 in dit geval) schuift de vorige clip automatisch een stapje naar beneden.

Zoals je ziet komt de clip waarover bewogen wordt nu automatisch op de voorgrond. In jouw file valt dat ook nog aan te passen. Allereerst in je Library met rechts op al je buttons klikken en het Type van Button naar Movieclip veranderen. Dan ook nog de instances op de stage ervan selecteren en bij Properties de Instance Behaviours ervan op Movieclip zetten.

Dan zijn al je buttons nu movieclips geworden. Als je nu op die movieclip-button instances dubbelklikt (zijn nu dus movieclips als type geworden), dan zie je in plaats van de states nu individuele keyframes. Dan moet je het een en andere daarin ordenen zoals het in mijn voorbeeldbuttons staat: een stop() plaatsen op frame 1, de twee up/over states in aparte keyframes op laag 2 en op de onderste laag een rechthoek plaatsen en converteren naar movieclip zodat die als hitvlak kan dienen. Dan moet je nog onRollover events in je main timeline ervoor schrijven zodat de nu movieclip button hetzelfde werkt als de button die het voorheen was. Daarna zal swapdepths erop werken zoals de bedoeling was.

Het is even een klus, maar je zal zien dat 'movieclip buttons' veel prettiger werken en met meer mogelijkheden dan de normale buttons van Flash.

[digitalecartoons]

Omdat er nog maar twee buttons op stonden (de 'fire' en 'bathroom') heb ik het bestand er alvast op aangepast. Het heeft nu geen button-buttons meer maar enkel movieclip-buttons. Als je de rest van de buttons nu precies hetzelfde doet en daarna de onRollOver/onRollOut/onRelease events ervoor toevoegt in de main timeline, zal het verder prima werken. Wellicht dat je nog de twee hitvlakken nauwkeurig moet positioneren, die heb ik nu grofweg geplaatst. In je library zie je dan ook nog een Hitvlak movieclip. Die dient hiervoor en is met alpha=0 onderaan in beide clips geplaatst.

Nu heb je in de maintime de volgende code die de twee buttons laat werken en ieder naar de voorgrond haalt:
fire_button.fire1.onRollOver = function() {
fire_button.swapDepths(9999);
fire_button.gotoAndStop(2);
};
fire_button.fire1.onRollOut = function() {
fire_button.gotoAndStop(1);
stopAllSounds();
};
//
bathroom_button.bath1.onRollOver = function() {
bathroom_button.swapDepths(9999);
bathroom_button.gotoAndStop(2);
};
bathroom_button.bath1.onRollOut = function() {
bathroom_button.gotoAndStop(1);
stopAllSounds();
};

'bath1' en 'fire1' zijn dan dezelfde movieclip ('hitvlak'), enkel met een andere instancenaam.

Je nieuwe bestand kan je downloaden op:
http://www.yousendit.com/download/bVlEeEVWSWhQb0pMWEE9PQ

[spiritonline]

Echt onwijs bedankt !!!

heb er de hele dag over lopen piekeren en dacht dat ik er nooit uit zou komen. Ik denk dat ik redelijk volg wat je heb gezegd. Alleen in de nieuwe file kan ik niet helemaal vinden op welk keyframe (en welke layer) nou de hit movieclip zit. Aangezien deze transparant is kan ik hem ook niet visueel vinden op de stage.

nogmaals... enorm bedankt !

[digitalecartoons]

Hij zit op de hele onderste layer (layer 3) van beide movieclip-buttons. Als je zo'n movieclip button (fire of bath) dubbelklikt en de bovenste twee even onzichtbaar maakt en/of locked, dan kan je de hit movieclip selecteren en de alpha ervan verhogen om hem te zien.

In het volgende bestand heb ik ze gewoon een alpha van 100 gehouden. Ze zijn visueel nu zichbaar als groene vlakken in beide clips. Nu heb ik in de main timeline de alpha van beide clips op 0 laten zetten zodat ze in de swf alsnog onzichtbaar worden:
http://www.yousendit.com/download/bVlEeEVUTStGR0hIRGc9PQ

[spiritonline]

Ik heb een hele onbeschofte vraag...

zou u mischien via destkop sharing software
(bied de mogelijkheid controle over mijn pc te nemen)

(ik ben bekend met teamviewer & hulp op afstand)
voor mij nogmaals 1 zon button kunnen doen op mijn pc zodat ik kan meekijken en zien wat u doet. Ik kom er namelijk niet precies uit hoe de frames worden verschoven over de verschilende lagen.

Als u msn heeft zou u me dan alstublieft kunnen toevoegen mijn email is:
snyper_fox@hotmail.com

nogmaals enorm bedankt om de tijd te nemen mij te helpen. ik wardeer dit echt.

[digitalecartoons]

Ik kom er namelijk niet precies uit hoe de frames worden verschoven over de verschilende lagen.
Nee, maar wat is niet helemaal duidelijk?

[spiritonline]

Op laag 1 staan 2 frames volgens mij het:
hit frame en het over frame

maar waar zoorgt laag 2 voor ?

Laag 3 bevat de hit frame. Zover ben ik ;)

Het probleem is alleen dat ik niet helemaal snap welke frames waar naartoe te slepen en hoe dit gedaan is. De movieclip heeft in het begin namelijk maar 1 layer. Zou je me aub kunnen uitleggen hoe je veder gaat na het converteren van de button naar movieclip ?

(en hoe het zelfde hitvlak te gebruiken voor meerdere buttons)

het spijt me als ik vervelend ben maar ik wardeer uw hulp enorm :) !

[digitalecartoons]

De bovenste laag, genaamd 'Layer 2' (heb wat in de volgorde geschoven zonder ze echt te noemen, dus wellicht oogt het wat onlogisch), staat de actionscript van de movieclip. Dat is niets meer dan 'stop();' Dit zorgt ervoor dat de movieclip niet afspeelt verder.

De middelste laag, 'Layer 1' genoemd, bevat twee keyframes: op frame 1 staat wat eerst de Up State van de button was, op frame 2 staat wat eerst de Over State van de button was (de uitvergrotingsclip). Bij het converteren van button naar movieclip had je daar ook nog frame 3 en 4, maar die kan je gelijk verwijderen (die waren eerst de Down en Hit State frames van de button, maar hier verder niet nodig).

De onderste laag, 'Layer 3' genoemd, bevat enkel een movieclip van een vlak die als hit-object dient. Gewoon een rechthoek die de button bedekt, geconverteerd naar movieclip, onzichtbaar gemaakt en een instancenaam gegeven zodat de onRollOver/Out commands die clip herkennen.

Bijgaand nog even een bestand met één zo'n enkele button, wat logischer genoemd. Bovenaan die de 'Scripts' laag, daaronder de laag met de 'Up en Over States' frames, en onderop de 'Hitvlak' laag.

In de Library zie je ook een 'Hitvlak' movieclip. Die kan je dan naar al je movieclips zo slepen om als hitvlak te gebruiken. Als je dan de movieclip-button een instancenaam geeft en de hitvlak-clip daarin ook een instancenaam, dan kan je de movieclip met onRollOver/Out/Release als button laten werken. Als je die hitvlak-clip voor meerdere buttons wilt gebruiken hoef je ze enkel maar naar de clip van die movieclip-button onderop te slepen en ze individuele instancenamen te geven zodat de code op de main timeline ze uit elkaar kan houden. Die van de fire button heb ik b.v. fire1 genoemd en die van de bathroom button bath1.

[spiritonline]

bedankt voor de zeer heldere uitleg !

Nou vraag ik me nog 1 ding af... Is het aan te raden eerst de normale button te maken en daarna te converteren naar movie clip of gelijk te beginnen aan de movieclip button ?

echt onwijs bedankt !

[digitalecartoons]

Ik zou gewoon 'normale flash buttons' vergeten en gelijk overstappen naar 'movieclip buttons' . Ik gebruik zelf ook nooit meer de normale buttons in mijn werk.

Dus:
- Foto en tekst selecteren en converteren naar movieclip
- In de clip keyframe 2 toevoegen en daar de vergrotingsclip plaatsen
- Laag bovenaan toevoegen en daar het stop(); commando op frame 1 zetten
- Laag onderop toevoegen en daar de hitvlak clip uit de library naartoe slepen en een unieke instancenaam geven
- Terug in de main timeline de totale movieclip-button ook een unieke instancenaam geven
- En al deze clips dan in de main timeline met stukjes onRollOver/Out/Release code besturen, door de geneste hitvlakken in die clips te targetten.