Share
Een van de eenvoudigste spelmechanismen is om de speler een verborgen object te laten vinden. Spellen op basis hiervan kunnen verschillende vormen aannemen: Waar zijn Waldo, Peek-A-Boo, Spot the Difference, Hide and Seek, en natuurlijk Hidden Object. In deze Premium-zelfstudie laat ik je twee methoden zien om een scène te verduisteren, zodat de speler deze later kan ontdekken.
Klik in de eerste SWF als gek om alle ballonnen te laten knappen. Oké, er is niet veel uitdaging, maar stel je voor dat je het doet tegen de klok in, of dat er steeds meer ballonnen verschijnen.
In de tweede SWF veegt u het vuil weg door met uw muis over de afbeelding te vegen. Deze monteur werd gebruikt in Window Washy, een van de eerste games voor de PS2 EyeToy - en niet te vergeten in talloze scratchcards!
We moeten de ballonnen maken voordat we ze kunnen laten barsten. Ik zal Flash Pro CS3 gebruiken om dit te doen; als u geen Flash Pro hebt, kunt u uw eigen tekenen met behulp van de methode die u normaal gebruikt, of de SWC uit het downloadpakket gebruiken en alle stappen in deze zelfstudie doorbladeren met uitleg over tekenen. Ik zal indien nodig instructies voor gebruikers van andere editors opnemen.
Open Flash Pro en maak een nieuw Flash-bestand (ActionScript 3.0). Ik ga het ontwerp van mijn ballonnen baseren op deze Illustrator-tutorial van Vectortuts + - maar met behulp van de tools van Flash, uiteraard.
Selecteer het gereedschap Potlood en plaats het in de modus Vloeiend, met een 1px zwarte lijn. Ik heb de standaardwaarde voor Smoothing van 50 gebruikt.
Teken nu een ruwe ballonvorm. Maak je geen zorgen om het perfect te krijgen; we zullen het binnen een seconde aanpassen. Hier is die van mij:
Hmm. Zie je die scherpe hoeken? Maak ze glad. Gebruik het gereedschap Selecteren om dat gedeelte van de regel te selecteren en klik vervolgens een paar keer op de knop Vloeiend.
Ik ben er zeker van dat er een betere manier is die de professionals gebruiken, maar dat doet meestal de truc voor mij. De vorm van de ballon aanpassen zoals u wilt - onthoud, u kunt op elk punt op de lijn klikken en slepen om het uit te rekken.
Dit is waar ik mee ben geëindigd:
Voeg nu de knoop toe. Zoals Jesse in de bovengenoemde Vectortuts + tutorial zegt: "het is gewoon een simpele cirkel met een driehoekige vorm in de vorm van een driehoek hieronder."
Oké, vul nu de ballon met een prettige pastelkleur (ik heb # dae8b3 uitgekozen, wat weer uit de Vectortuts + tutorial komt) en verwijder alle regels.
Niet slecht! Als u een glans wilt toevoegen, gebruikt u het lijngereedschap met een dikkere streekbreedte (ik heb 3 px gebruikt) en een witte kleur, om een rechte lijn over een "hoek" te tekenen en vervolgens het gereedschap Selecteren om het te omlijnen.
Selecteer deze glanslijn en klik vervolgens op Wijzigen | Vorm | Converteer lijnen naar opvullingen -- op deze manier, als je de grootte van de ballon aanpast, blijft de glans even groot als de rest van de ballon.
Als u een ballon wilt gebruiken met ActionScript, moeten we deze converteren naar een symbool. Selecteer je kunst en klik dan Wijzigen | Converteren naar symbool. Maak er een filmclipsymbool van Ballon, en exporteer het voor ActionScript met dezelfde klassenaam.
Negeer de waarschuwing dat er geen klasse is met dezelfde naam, als deze verschijnt nadat u op OK hebt geklikt.
U kunt een FLA en SWC vinden van de tot nu toe gebruikte activa in de map BalloonsStep2 van de brondownload.
Kies een decor waar je voor zweeft. Ik heb dit behang gekozen (krediet LGLab en envato) en heb het enigszins bijgesneden:
Als u Flash Professional gebruikt, voegt u een nieuwe laag toe aan het werkgebied en importeert u uw afbeelding. Sluit anders de afbeelding in en voeg deze onder aan de weergavelijst toe met de methode die u verkiest. Misschien wil je het formaat van je stage aanpassen om in de afbeelding te passen, zoals ik heb gedaan.
Vervolgens gaan we deze eenzame ballon laten verdwijnen wanneer erop wordt geklikt.
Tijd voor wat code!
Maak een klasse, genaamd Main.as, in dezelfde map als uw FLA en koppel deze aan de FLA als de documentklasse - kijk hier voor meer informatie. (Als u Flash Pro niet gebruikt, neem ik aan dat u weet hoe u het equivalent in uw editor moet doen: u moet al een hoofdklasse hebben gemaakt om de achtergrond op het podium te krijgen.)
pakket import flash.display.MovieClip; public class Main breidt MovieClip uit public function Main ()
We moeten toegang krijgen tot de ballon vanuit de documentklasse en moeten deze een klassenaam geven.
Als u Flash Professional gebruikt, selecteert u de ballon in het werkgebied en typt u de ballon in de in het paneel Properties. Dan klikken Bestand | Publiceer instellingen, open de Flash tab, klik instellingen? naast de vervolgkeuzelijst ActionScript-versie en verwijder het vinkje uit het selectievakje "Stadiuminstellingen automatisch declareren". (Dit is niet strikt noodzakelijk, maar staat toe dat de code hetzelfde is, ongeacht of u Flash Pro of een andere editor gebruikt.)
Wijzig vervolgens uw documentklasse als volgt:
pakket import flash.display.MovieClip; public class Main breidt MovieClip uit public var theBalloon: Balloon; openbare functie Hoofd ()
Als u een andere editor gebruikt, voegt u een instantie van de klasse Ballon toe aan de weergavelijst op de gewenste coördinaten (zolang deze zich voor de achtergrond bevindt) en geeft u deze een instantienaam van de ballon.
We zullen een MouseEvent-luisteraar gebruiken om te detecteren wanneer op de ballon wordt geklikt en een handlerfunctie om deze te verwijderen:
pakket import flash.display.MovieClip; import flash.events.MouseEvent; public class Main breidt MovieClip uit public var theBalloon: Balloon; public function Main () theBalloon.addEventListener (MouseEvent.CLICK, onClickBalloon); private function onClickBalloon (a_event: MouseEvent): void this.removeChild (theBalloon); theBalloon.removeEventListener (MouseEvent.CLICK, onClickBalloon);
Eenvoudige dingen. Test het uit:
Niets winderigs, maar het werkt tenminste.
Niet veel uitdaging hierin, toch? Sleep nog een paar ballonnen naar het podium, op dezelfde laag als het origineel:
Hoe gaan we deze in code benaderen? Ik denk dat we ze allemaal instant-namen kunnen geven zoals greenBalloon1, greenBalloon2, en ga zo maar door en voeg een MouseEvent-luisteraar toe aan elk apparaat? ugh. We zijn aan het coderen, we kunnen dit automatiseren.
De documentklasse is een Filmclip, wat betekent dat het een is DisplayObjectContainer (hoera voor overerving), wat betekent dat het een functie getChildAt () en een eigenschap numChildren heeft, wat betekent dat we een voor lus om door alle objecten op het podium te itereren. Ik zal het bewijzen. Wijzig uw hoofd () contsructor-functie als volgt:
public function Main () for (var i: int = 0; i < this.numChildren; i++) trace(getChildAt(i)); theBalloon.addEventListener(MouseEvent.CLICK, onClickBalloon);
(U kunt de code verlaten om de originele ballon te verwijderen.) Voer de SWF uit en controleer uw Output-paneel:
[voorwerp Vorm] [voorwerp Ballon] [voorwerp Ballon] [voorwerp Ballon] [voorwerp Ballon] [voorwerp Ballon] [voorwerp Ballon] [voorwerp Ballon] [voorwerp Ballon] [voorwerp Ballon] [voorwerp Ballon]
De code retourneert het type van elk kind van Main - dat wil zeggen, elk object in de weergavelijst, van onderaan (getChildAt (0)) naar boven (getChildAt (10)). Omdat ik de achtergrondafbeelding voor ActionScript niet heb geëxporteerd, weet Flash alleen dat het een soort van is Vorm.
We moeten het toevoegen onClickBalloon () luisteraar naar elk van de ballonnen, maar niet naar de achtergrond. Gelukkig is er een sleutelwoord waarmee we de klasse van een object kunnen controleren: is. We kunnen het als volgt gebruiken:
public function Main () for (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon);
(Merk op dat ik de regel heb verwijderd die specifiek de gebeurtenislistener toevoegt aan de de ballon aanleg.)
Test de SWF:
Hmm. Niet helemaal goed, is het?
Het maakt niet uit op welke ballon u klikt, de originele ballon is verwijderd. De oorzaak hiervan is gemakkelijk te herkennen:
public function Main () for (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); private function onClickBalloon(a_event:MouseEvent):void this.removeChild(theBalloon); theBalloon.removeEventListener(MouseEvent.CLICK, onClickBalloon);
In regel 16 voegen we de gebeurtenislistener toe aan elke ballon; In regel 23 en 24 verwijderen we echter specifiek de de ballon aanleg. In het geval van handlerfunctie moeten we de ballon waarop is geklikt, verwijderen. Dit wordt het doel van de gebeurtenis, en is toegankelijk via de a_event.target eigendom. Dus je zou verwachten dat dit werkt:
private function onClickBalloon (a_event: MouseEvent): void this.removeChild (a_event.target); a_event.target.removeEventListener (MouseEvent.CLICK, onClickBalloon);
? maar dat doet het niet; we krijgen een foutmelding:
1118: Impliciete dwang van een waarde met statische type Object naar een mogelijk niet-verwant type flash.display: DisplayObject.
Zie, Flash weet niet welke klasse van objecten het doel van de gebeurtenis is, dus het weet niet zeker dat het kan zijn removeChild ()-ed of dat hieraan eventuele gebeurtenislisteners kunnen worden gekoppeld. We moeten Flash vertellen om het evenementdoel te behandelen zoals een instantie van de Balloon-klasse, zoals zo:
private function onClickBalloon (a_event: MouseEvent): void this.removeChild ((a_event.target as Balloon)); (a_event.target als Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
Probeer het nu uit:
Super goed! Dat is een goede mijlpaal; je kunt alle bestanden vinden die tot nu toe zijn gemaakt in de BalloonsStep8 map in de brondownload.
Uitdaging: Probeer te tellen hoeveel ballonnen er zijn wanneer de SWF voor het eerst wordt geladen, tellen hoeveel er worden verwijderd als er op wordt geklikt, en wat felicitatietekst weergeven of een overwinningsgeluid afspelen wanneer alle ballonnen weg zijn.
Laten we vervolgens de ballonnen laten knappen met een kleine animatie wanneer erop wordt geklikt.
Ik wist niet zeker hoe ik dit moest animeren, dus ik keek naar een slow-mo video van een echte ballon die barstte:
Helaas ziet dit er alleen maar nep uit (ik weet het), dus ik probeerde iets anders.
Bewerk je ballon en voeg een nieuw frame toe aan de tijdlijn. Teken in dit kader een grote stekelige puinhoop met de potloodtool:
Verwijder de glanslijn (vul deze met de ballonkleur) en teken een paar lijnen van de stekelige puinhoop naar de rand van de ballon:
Klik op elke sectie, verander het in een groep (CTRL-G), scheid het iets van de anderen en verwijder de regels:
Maak een nieuw hoofdframe en pas de afzonderlijke bits aan met het gereedschap Vrije transformatie en trek enkele randen van de vullingen uit. Ik heb Onion Skinning hier aangezet, zodat je kunt zien hoe mijn secties zich verhouden tot hun posities in het frame voor:
Ik heb gemerkt dat het helpt om de stukken van de ballon binnen hetzelfde gebied te houden als waarin de ballon zich bevond, maar je kunt hiermee experimenteren. Maak vervolgens nog een keyframe en maak alle segmenten nog kleiner:
Ik heb de segmenten hier een beetje laten vallen, als gevolg van de zwaartekracht. Voeg nu een nieuw keyframe toe, helemaal leeg. Test je animatie (je zou misschien de framerate van je film willen aanpassen, ik ging voor 24 fps).
Geweldig. Natuurlijk, als u nu uw SWF uitvoert, blijven alle ballonnen steeds opnieuw knallen:
? open dus het deelvenster Handelingen in het eerste frame van de tijdlijn van de ballon en voeg deze code toe:
hou op();
De animatie van de ballon is opgenomen in de SWC en FLA in de map BalloonsStep9 van de brondownload.
Om een ballon alleen te laten knallen wanneer erop wordt geklikt, hoeven we alleen de animatie te maken spelen():
private function onClickBalloon (a_event: MouseEvent): void (a_event.target as Balloon) .play (); this.removeChild ((a_event.target als Balloon)); (a_event.target als Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
? eh, behalve dat dit niet werkt, omdat de ballon dan onmiddellijk uit de weergavelijst wordt verwijderd, is het niet? Gewoon commentaar geven op de removeChild () regel voor nu en zorg ervoor dat de SWF werkt:
O ja, we moeten het doen hou op() de animatie als het klaar is. Open het lege hoofdframe in de tijdlijn van de ballon en voeg dit toe:
hou op();
Eigenlijk kunnen we, terwijl we hier zijn, ons oplossen removeChild () probleem. Als we de ballon laten verzenden COMPLEET wanneer de burst-animatie is voltooid, kunnen we binnen deze gebeurtenis luisteren Main.as, en verwijder de ballon uit de displaylijst zodra we deze horen. Voeg deze regel toe aan de acties van het lege hoofdframe:
hou op(); dispatchEvent (nieuw evenement (Event.COMPLETE));
(Dit is allemaal in de BallonnenStap10 SWC en FLA, maak je geen zorgen.) Nu, in Main.as, wijzig uw onClickBalloon () handler functie:
private function onClickBalloon (a_event: MouseEvent): void (a_event.target as Balloon) .play (); //this.removeChild((a_event.target as Balloon)); (a_event.target als Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target als Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
? Creëer een onBalloonBurst () handler-functie, die wordt uitgevoerd zodra de animatie is voltooid:
private function onBalloonBurst (a_event: Event): void this.removeChild (a_event.target as Balloon);
? en importeer de gebeurtenisklasse:
pakket import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent;
Test het uit:
Ziet er tot nu toe goed uit.
Uitdaging: Wat dacht je van het animeren van de ballonnen, zodat ze een beetje bobben voordat je erop klikt?
Ik vond hiervoor een perfect geluidseffect op AudioJungle: Balloon Pop. Ik kan het niet opnemen in de brondownload, maar je kunt het voor slechts een dollar kopen.
Als je wilt, koop dan dit effect of zoek een ander online en laat het spelen als er een ballon wordt gepoft. Voeg dit eerst toe aan uw bibliotheek en exporteer het voor ActionScript (of sluit het in uw project in, voor niet-Flash Pro-gebruikers), met een klassenaam van PopSWF.
Dan in Main.as, maak een privé-instantie van het geluid:
public class Main breidt MovieClip uit public var theBalloon: Balloon; private var popSfx: PopSFX = nieuwe PopSFX ();
? en speel het wanneer nodig:
private function onClickBalloon (a_event: MouseEvent): void popSfx.play (); (a_event.target als Balloon) .play (); //this.removeChild((a_event.target as Balloon)); (a_event.target als Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target als Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
Probeer het:
Laten we het scherm vullen met meerdere kleuren ballonnen. Dupliceer het Ballonsymbool in de Bibliotheek en roep het BlueBalloon, met een Klasse van BlueBalloon. Houd het identiek aan de originele ballon, maar met een blauwe vulling (ik heb # c1e6ee gebruikt, wederom van die Vectortuts + tutorial).
Sleep een paar instanties naar het werkgebied. Vergeet niet dat je enkele van de groene ballonnen kunt verwijderen, en je kunt de grootte van elk ballonnen veranderen als je wilt:
Als je de SWF test, doen de blauwe ballonnen nog niets:
De blauwe ballonnen doen niets omdat al onze code geschreven is om met de Ballon klasse, en niet de BlueBalloon klasse. We kunnen al onze code dupliceren om verschillende kleuren ballon te verwerken, maar dat is rommelig en het zou lastig zijn om later te veranderen als we wilden.
Laat in plaats daarvan de blauwe ballon en de groene ballon dezelfde klasse gebruiken, met behulp van de kracht van overerving. Selecteer uw originele Ballonsymbool in de Bibliotheek en hernoem het naar GreenBalloon; verander de klasse in GreenBalloon ook.
Ons doel is om beide ballonnen een basisklasse van te geven Ballon; dit betekent dat elke groene ballon als een voorbeeld wordt gezien Ballon zo goed als van GreenBalloon, en elke blauwe ballon wordt gezien als een instantie van Ballon net zoals BlueBalloon -- onze code, die is geschreven met de Balloon-klasse in gedachten, zal allemaal goed werken.
Helaas kunnen we, hoewel we de klasse van een symbool kunnen instellen op de naam van een klasse die niet bestaat, niet hetzelfde doen met de basisklasse. We moeten een klassenbestand maken dat de twee ballonnen kunnen erven.
Maak een nieuw klassenbestand, Balloon.as, in dezelfde map als uw FLA en voer deze code in:
pakket import flash.display.MovieClip; public class Balloon breidt MovieClip uit public function Balloon ()
Dat is alles wat je nodig hebt. Het moet uitbreiden Filmclip omdat beide ballonnen animaties gebruiken; als we het uitbreiden, laten we zeggen, sprite in plaats daarvan konden de twee ballonsymbolen geen tijdlijn gebruiken en zouden het statische afbeeldingen zijn.
Stel de basisklasse van elk van de ballonsymbolen in de bibliotheek in Ballon, en voer de SWF uit:
Super goed! Het is nu gemakkelijk om een andere kleur ballon toe te voegen. Om het te bewijzen, laten we er rode en gele toevoegen.
Dit is een eenvoudige stap. Dupliceer het groene ballonsymbool nog tweemaal, en kleur een pastel rood (# f2daea), met een naam en klasse Rode ballon, en de andere pastel geel (# f6f5b4), met een naam en klasse van YellowBalloon. Stel in beide gevallen de basisklasse in Ballon. Voeg veel van elk op het podium.
Voer de SWF uit; de nieuwe ballonnen zouden zonder problemen moeten werken.
Als een kleur weigert te knallen, zorg er dan voor dat de basisklasse van het symbool is ingesteld op Ballon.
We zijn geconditioneerd om te denken dat Flash-objecten alleen klikbaar zijn als de muiscursor in een hand verandert als we erover zweven. Om deze hand te laten verschijnen, hoeven we alleen de ballon in te stellen buttonMode eigendom aan waar.
De gemakkelijkste plaats om dit te doen is in de voor lus waar we het toevoegen KLIK gebeurtenisluisteraar voor elke ballon. Echter, alle Flash weet over de ballonnen in dit stadium is dat ze voorbeelden zijn van DisplayObject, want dat is wat getChildAt () retourneert - maar buttonMode is een eigenschap van de Sprite-klasse. Dit betekent dat we het moeten gebruiken zoals sleutelwoord opnieuw. We zouden kunnen schrijven:
public function Main () for (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); (getChildAt(i) as Sprite).buttonMode = true;
? en importeer vervolgens de flash.display.Sprite klasse, maar omwille van de eenvoud ga ik de Ballon klasse in plaats daarvan:
public function Main () for (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); (getChildAt(i) as Balloon).buttonMode = true;
Voer de SWF uit:
Uitdaging: Om bij het thema van het knallen van ballonnen te blijven, zou je de muiscursor kunnen veranderen in een naald of een speld. Bekijk voor hulp deze Quick Tip wanneer u dit doet door een filmclip te maken met de muis of deze om de eigen cursor van het besturingssysteem te wijzigen.
Gefeliciteerd, je hebt dit gedeelte van de tutorial voltooid! Als je alle uitdagingen tot nu toe hebt gevolgd, moet je goed op weg zijn naar een leuk klein minigame.
Laten we hier doorheen rennen. Als u Flash Pro gebruikt:
Als u een andere editor gebruikt, maakt u gewoon een nieuw AS3-project met de methode die u normaal zou gebruiken. Bel het project Ramen wassen en de hoofdklasse Main.as, om deze tutorial gemakkelijker te volgen te maken.
In beide gevallen ziet je hoofdklasse er ongeveer zo uit:
pakket import flash.display.MovieClip; public class Main breidt MovieClip uit public function Main ()
Sommige versies van Flash en sommige editors genereren mogelijk iets andere code voor deze klasse; dat is prima, ga gewoon met de standaardwaarden. Als uw editor niet automatisch een code genereert, kopieert u de mijne van boven.
Om te beginnen, gaan we een stevige rechthoek van kleur creëren en dat opruimen; we gaan later over naar meer gecompliceerde afbeeldingen.
Maak in je hoofdklasse een nieuwe Sprite om deze "vuile" rechthoek te bevatten:
pakket import flash.display.MovieClip; import flash.display.Sprite; public class Main breidt MovieClip uit public var dirt: Sprite = new Sprite (); openbare functie Hoofd ()
Gebruik vervolgens de Sprite's grafisch eigenschap om een rechthoek van kleur de grootte van het werkgebied te maken. U kunt de waarden hard coderen als u dat wilt (mijn FLA is 500x400 px), of stel de waarden dynamisch in zoals ik hier heb gedaan:
pakket import flash.display.MovieClip; import flash.display.Sprite; public class Main breidt MovieClip uit public var dirt: Sprite = new Sprite (); public function Main () dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Dit zal niet zichtbaar zijn, tenzij we een opvulkleur kiezen. Ik heb # 440000 gekozen, een dieprode kleur.
public function Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Oh, we moeten het toevoegen vuil Sprite naar de displaylijst:
public function Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (vuil);
Voer uw SWF uit. Als u geen effen kleur ziet, is uw FLA misschien niet correct gekoppeld aan uw documentklasse.
In de tutorial van Carlos Yanez, Create a Basic Drawing Application with Flash, liet hij ons zien hoe je het uiterlijk kunt creëren dat kleuren op een canvas door de muiscursor zijn gewist, simpelweg door een dikke witte lijn achter de muis te tekenen. We zullen dezelfde truc hier gebruiken.
Eerst moeten we een MouseEvent-luisteraar maken om de muis bij het verplaatsen te volgen en een handler-functie voor wanneer:
pakket import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class Main breidt MovieClip uit public var dirt: Sprite = new Sprite (); public function Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (vuil); dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); private function onMouseMoveOverDirt (a_event: MouseEvent): void
Vervolgens moeten we een lijn tekenen van de vorige positie van de muis naar de huidige positie:
private function onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY);
Vergeet het lineStyle () noemen; de eerste regel is de dikte van de lijn (in pixels); de tweede bepaalt zijn kleur (#ffffff is wit).
Probeer het:
Wauw, dat is? een interessant effect, maar niet waar we voor gingen! Het probleem hier is dat lineTo () tekent een regel van de vuil grafische objecten huidige tekenpositie naar welk punt u ook opgeeft (in dit geval de coördinaten van de muis). We verplaatsen de huidige positie van de tekening echter niet, dus het blijft (0, 0), de linkerbovenhoek van het podium. We hebben de tekenpositie nodig om ook de muis rond te volgen; we kunnen dit doen met de moveTo () methode:
private function onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Probeer de SWF nu:
Best goed, behalve dat het eerste punt is ingesteld op (0, 0), wat betekent dat de eerste getrokken lijn altijd uit de linkerbovenhoek zal springen. Als u uw muis op een andere plek uit de SWF beweegt en op een andere in de SWF, springt de lijn opnieuw.
Om beide problemen op te lossen, moeten we:
Hier is de code voor. Als je de logica niet helemaal volgt, probeer dan commentaar te geven op bepaalde regels of je eigen regels toe te voegen om te zien hoe het uiteindelijke effect verandert.
pakket import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class Main breidt MovieClip uit public var dirt: Sprite = new Sprite (); public function Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (vuil); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt); private function onMouseLeaveDirt (a_event: MouseEvent): void dirt.removeEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); private function onMouseReturnToDirt (a_event: MouseEvent): void dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); dirt.graphics.moveTo (mouseX, mouseY); private function onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Voer uw SWF uit:
Redelijk goed! Het is niet perfect, maar het laat zien wat we goed genoeg willen doen.
Ons uiteindelijke doel is om een voorgrond te wissen om een achtergrond te onthullen. Op het moment lijken we een rode voorgrond te wissen om een witte achtergrond te onthullen; laten we nu een interessantere achtergrond toevoegen.
Ik heb deze afbeelding van de voordeur van Envato op Flickr uitgekozen (tegoed aan Envato), ingekort om te passen in mijn FLA:
Als u Flash Pro gebruikt, maakt u een nieuw filmclipsymbool, sleept u de gewenste afbeelding erin (of maakt u zelf een afbeelding met de tekenhulpmiddelen) en exporteert u het symbool voor ActionScript met een klassenaam van Achtergrond. Als u een andere editor gebruikt, sluit u deze in uw project in (ook met de naam Achtergrond) met behulp van uw gebruikelijke methode. Ik heb deze afbeelding ingevoegd WindowWashing.swc in de brondownload.
In plaats van het naar het podium te slepen, gebruik je de code om het toe te voegen aan de displaylijst onder het vuil:
pakket import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class Main breidt MovieClip uit public var dirt: Sprite = new Sprite (); public var background: Background = new Background (); public function Main () this.addChild (background); dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (vuil); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt);
Dus nu is de achtergrond onder het vuil, maar kunnen we het zien?
Er, nee.
De eenvoudigste manier om te controleren of de achtergrond er daadwerkelijk is, is om de alpha van de voorgrond te ve
Accentsconagua