Share
En av de enkleste spillmekanikkene er å la spilleren finne en skjult gjenstand. Spill basert på dette tar mange former: Hvor er Waldo, Peek-A-Boo, Spot forskjellen, skjul og søk, og selvfølgelig skjult objekt. I denne Premium opplæringen vil jeg vise deg to metoder for å skjule en scene slik at spilleren kan avdekke den senere.
I den første SWF klikker du så sint at du poper alle ballongene. Ok, det er ikke mye utfordring, men tenk å gjøre det mot klokken, eller med flere ballonger som dukker opp hele tiden.
I den andre SWF tørker du av smuss ved å sveipe musen over bildet. Denne mekanikeren ble brukt i Window Washy, en av de første spillene til PS2 EyeToy - for ikke å nevne i utallige skrapelodd!
Vi må lage ballongene før vi kan sprekke dem. Jeg bruker Flash Pro CS3 til å gjøre dette; hvis du ikke har Flash Pro, kan du enten tegne din egen ved hjelp av hvilken som helst metode du vanligvis bruker, eller bruk SWC fra nedlastingspakken og skum alle trinnene i denne opplæringen forklarer hvordan du tegner. Jeg vil inkludere instruksjoner for brukere av andre redaktører når det er relevant.
Åpne Flash Pro og opprett en ny Flash-fil (ActionScript 3.0). Jeg skal basere utformingen av ballongene mine på denne Illustrator-opplæringen fra Vectortuts + - men med Flash-verktøy, selvsagt.
Velg blyantverktøyet og sett det i glatt-modus, med 1px svart slag. Jeg har brukt standard utjevningsverdien på 50.
Nå tegne en grov ballongform. Ikke bekymre deg for å få det perfekt; Vi justerer det om et sekund. Her er min:
Hmm. Se de skarpe hjørnene? Glatt dem ut. Bruk markeringsverktøyet til å velge den delen av linjen, og klikk deretter Smooth-knappen et par ganger.
Jeg er sikker på at det er en bedre måte som fagpersonene bruker, men det gjør det vanligvis for meg. Tweak ballongens form, men du liker - husk, du kan klikke og dra et hvilket som helst punkt på linjen for å strekke det ut.
Her er hva jeg har endt med:
Legg nå knuten. Som Jesse sier i den nevnte Vectortuts + opplæringen, "er det bare en enkel sirkel med en rund hjørnet trekantaktig form under."
Ok, fyll nå ballongen med en hyggelig pastellfarge (jeg har valgt # dae8b3, som igjen er fra Vectortuts + opplæringen) og slett alle linjene.
Ikke verst! Hvis du vil legge til en glans, bruk linjeprogrammet, med en tykkere slagbredde (jeg har brukt 3px) og en hvit farge, for å tegne en rett linje over et "hjørne", bruk deretter markeringsverktøyet til å kurve det.
Velg denne glanslinjen, og klikk deretter Endre | Form | Konverter linjer til fyll -- På denne måten, hvis du endrer størrelsen på ballongen, vil skinnen forbli den samme størrelsen proporsjonal med resten av ballongen.
For å kunne samhandle med en ballong ved hjelp av ActionScript, må vi konvertere den til et symbol. Velg kunst, klikk deretter Endre | Konverter til symbol. Gjør det et filmklippssymbol som heter Ballong, og eksporter den til ActionScript med samme klassenavn.
Ignorer advarselen om at det ikke er en klasse med samme navn, hvis det kommer opp etter at du har klikket på OK.
Du kan finne en FLA og SWC av eiendelene som er brukt så langt i BalloonsStep2-mappen til kilde nedlastingen.
Velg et bakteppe for at du skal flyte foran. Jeg har plukket dette tapetet (kreditt LGLab og envato) og klippet det litt:
Hvis du bruker Flash Professional, legger du til et nytt lag på scenen og importerer bildet ditt. Ellers legger du inn grafikken og legger den til bunnen av visningslisten ved hjelp av hvilken som helst metode du foretrekker. Du kan ønske å endre størrelsen på scenen din for å passe bildet, som jeg har gjort.
Deretter skal vi få denne lone ballongen til å forsvinne når den klikkes.
Tid for noen kode!
Opprett en klasse, kalt Main.as, i samme katalog som FLA, og koble den til FLA som dokumentklassen - se her for detaljer. (Hvis du ikke bruker Flash Pro, vil jeg anta at du vet hvordan du gjør tilsvarende i editoren din, du må allerede ha opprettet en hovedklasse for å få bakgrunnen på scenen.)
pakke import flash.display.MovieClip; offentlig klasse Main utvider MovieClip offentlig funksjon Main ()
Vi trenger tilgang til ballongen fra dokumentklassen, og så må den gi et klassenavn.
Hvis du bruker Flash Professional, velger du ballongen på scenen og skriver inn theBalloon inn i det boksen i Egenskaper-panelet. Deretter klikker du Fil | Publiser innstillinger, åpne Blits Klikk, klikk innstillinger? ved siden av rullegardinmenyen for ActionScript-versjonen, og fjern merket for "Automatisk deklarere scenevisninger" -boksen. (Dette er ikke strengt nødvendig, men lar koden være den samme uansett om du bruker Flash Pro eller annen redigerer.)
Deretter må du endre dokumentklassen slik:
pakke import flash.display.MovieClip; offentlig klasse Main utvider MovieClip public var theBalloon: Balloon; offentlig funksjon Main ()
Hvis du bruker en annen redaktør, legger du til en forekomst av ballongklassen til visningslisten på alle koordinater du liker (så lenge den er foran bakgrunnen), og gir den et forekomstnavn på theBalloon.
Vi bruker en MouseEvent-lytter til å oppdage når ballongen er klikket, og en håndteringsfunksjon for å fjerne den:
pakke import flash.display.MovieClip; importer flash.events.MouseEvent; offentlig klasse Main utvider MovieClip public var theBalloon: Balloon; offentlig funksjon Main () theBalloon.addEventListener (MouseEvent.CLICK, onClickBalloon); privat funksjon onClickBalloon (a_event: MouseEvent): void this.removeChild (theBalloon); theBalloon.removeEventListener (MouseEvent.CLICK, onClickBalloon);
Enkle ting. Test det ut:
Ikke noe å si, men i det minste fungerer det.
Ikke mye utfordring i dette, er det? Dra noen flere ballonger til scenen, på samme lag som originalen:
Hvordan skal vi få tilgang til disse i kode? Jeg antar vi kunne gi dem alle forekomstnavn som greenBalloon1, greenBalloon2, og så videre, og legg til en MouseEvent-lytter til hver? ugh. Vi er kodende, vi kan automatisere dette.
Dokumentklassen er en Filmklipp, noe som betyr at det er en Display (Hør for arv), som betyr at den har en getChildAt () -funksjon og en numChildren-egenskap, noe som betyr at vi kan bruke en til loop for å iterere gjennom alle gjenstandene på scenen. Jeg skal bevise det. Endre Main () contsructor-funksjonen som slik:
offentlig funksjon Main () for (var i: int = 0; i < this.numChildren; i++) trace(getChildAt(i)); theBalloon.addEventListener(MouseEvent.CLICK, onClickBalloon);
(Du kan forlate koden for å fjerne den originale ballongen i.) Kjør SWF og sjekk utgangspanelet:
[objektballong] [objektballong] [objektballong] [objektballong] [objektballong] [objektballong] [objektballong] [objektballong] [objektballong] [objektballong]
Koden returnerer typen av hvert barn til Main - det vil si hver gjenstand i visningslisten, fra bunnen (getChildAt (0)) til toppen (getChildAt (10)). Fordi jeg ikke eksporterte bakgrunnsbildet til ActionScript, vet alle Flash at det er en slags Form.
Vi må legge til onClickBalloon () lytter til hver av ballongene, men ikke til bakgrunnen. Heldigvis finnes det et søkeord som lar oss sjekke klassen av et objekt: er. Vi kan bruke det slik:
offentlig funksjon Main () for (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon);
(Merk at jeg har fjernet linjen som spesifikt legger hendelseslytteren til theBalloon forekomst.)
Test SWF:
Hmm. Ikke helt riktig, er det?
Uansett hvilken ballong du klikker, blir den opprinnelige ballongen fjernet. Årsaken til dette er lett å få øye på:
offentlig funksjon 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);
I linje 16 legger vi hendelseslytteren til hver ballong; I linjene 23 og 24 fjerner vi imidlertid spesifikt theBalloon forekomst. I tilfelle handler-funksjonen må vi fjerne hvilken ballong som ble klikket på, i stedet. Dette kalles hendelsesmål, og kan nås via a_event.target eiendom. Så, du forventer at dette skal fungere:
privat funksjon onClickBalloon (a_event: MouseEvent): void this.removeChild (a_event.target); a_event.target.removeEventListener (MouseEvent.CLICK, onClickBalloon);
? men det gjør det ikke; vi får en feil:
1118: Implisitt tvang av en verdi med statisk type Objekt til en muligens ikke-relatert type flash.display: DisplayObject.
Se, Flash vet ikke hvilken klasse av objekt hendelsesmålet er, så det vet ikke sikkert at det kan være removeChild ()-ed eller at det kan ha noen hørere tilknyttet. Vi må fortelle Flash å behandle hendelsesmålet som en forekomst av ballongklassen, slik som:
privat funksjon onClickBalloon (a_event: MouseEvent): void this.removeChild ((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
Prøv det nå:
Flott! Det er en anstendig milepæl; Du kan finne alle filene som er opprettet så langt i BalloonsStep8 mappe i kilde nedlasting.
Utfordring: Prøv å telle hvor mange ballonger det er når SWF først laster, teller hvor mange er fjernet som de klikkes, og viser noen gratulererende tekst eller spiller seierlyd når alle ballongene er borte.
Deretter la vi få ballongene til å pope med litt animasjon når de klikkes.
Jeg var ikke sikker på hvordan å animere dette, så jeg så på en slow-mo-video av en ekte ballong som ble brast:
Dessverre ser dette bare ut til meg (jeg vet), så jeg prøvde noe annet.
Rediger ballongen din, og legg til en ny ramme til tidslinjen. I denne rammen tegner du et stort spiky rot med blyantverktøyet:
Slett glanslinjen (fyll den med ballongfargen), og trekk noen linjer fra det spikete rotet ut til kanten av ballongen:
Klikk på hver seksjon, slå den til en gruppe (CTRL-G), skill den fra de andre litt, og slett linjene:
Opprett en ny keyframe, og tweak de separate brikkene ved hjelp av Free Transform Tool og ved å strekke noen av kantene på fyllene. Jeg har slått på Onion Skinning her slik at du kan se hvordan delene mine sammenligner med stillingene i rammen før:
Jeg har funnet det hjelper å holde ballongens brikker innenfor det samme området ballongen okkupert før, men du kan eksperimentere med dette. Deretter oppretter du en annen keyframe og gjør alle segmentene enda mindre:
Jeg har gjort segmentene slippe litt her, som om på grunn av tyngdekraften. Legg nå til en ny keyframe, helt tom. Test ut animasjonen din (du kan ønske å justere bildefrekvensen for filmen, jeg gikk for 24 fps).
Rått. Selvfølgelig, hvis du kjører SWF nå, vil alle ballongene fortsette å popping igjen og igjen:
? så åpne handlingspanelet i den første rammen av ballongens tidslinje og legg til denne koden:
Stoppe();
Ballongens animasjon er inkludert i SWC og FLA i BalloonsStep9-mappen til kilde nedlastingen.
For å bare lage en ballongpopp når den klikkes, må vi bare lage animasjonen spille():
privat funksjon onClickBalloon (a_event: MouseEvent): void (a_event.target as Balloon) .play (); this.removeChild ((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
? er, bortsett fra at det ikke vil fungere, fordi ballongen umiddelbart blir fjernet fra visningslisten, vil det ikke? Bare kommentere removeChild () linje for nå og sørg for at SWF fungerer:
Oh, riktig, det må vi Stoppe() animasjonen når den er ferdig. Åpne den tomme nøkkelrammen i ballongens tidslinje og legg til dette:
Stoppe();
Faktisk, mens vi er her, kan vi løse vår removeChild () problem. Hvis vi lager ballongen a FULLSTENDIG hendelse når den sprengende animasjonen er ferdig, kunne vi lytte til denne hendelsen i Main.as, og fjern ballongen fra visningslisten når vi hører den. Legg denne linjen til de tomme keyframes handlinger:
Stoppe(); dispatchEvent (nytt arrangement (Event.COMPLETE));
(Dette er alt i BalloonsStep10 SWC og FLA, ikke bekymre deg.) Nå, i Main.as, endre din onClickBalloon () håndteringsfunksjon:
privat funksjon onClickBalloon (a_event: MouseEvent): void (a_event.target as Balloon) .play (); //this.removeChild((a_event.target som ballong)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target as Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
? opprett en onBalloonBurst () håndteringsfunksjon, som vil bli kjørt når animasjonen er ferdig:
privat funksjon onBalloonBurst (a_event: Event): void this.removeChild (a_event.target as Balloon);
? og importer hendelsen klassen:
pakke import flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent;
Test det ut:
Ser bra ut så langt.
Utfordring: Hva med å animere ballongene slik at de bobler litt før du klikker på dem?
Jeg fant en perfekt lydeffekt for dette på AudioJungle: Balloon Pop. Jeg kan ikke inkludere den i kilde nedlasting, men du kan kjøpe den for bare en dollar.
Hvis du vil, kjøp denne effekten, eller finn en annen online, og la den spille når en ballong er poppet. For å gjøre dette må du først legge det til i biblioteket ditt og eksportere det til ActionScript (eller legge det inn i prosjektet ditt, for ikke-Flash Pro-brukere), med et klassenavn for PopSWF.
Så, i Main.as, opprett en privat forekomst av lyden:
offentlig klasse Main utvider MovieClip public var theBalloon: Balloon; private var popSfx: PopSFX = ny PopSFX ();
? og spill det når det trengs:
privat funksjon onClickBalloon (a_event: MouseEvent): void popSfx.play (); (a_event.target som ballong) .play (); //this.removeChild((a_event.target som ballong)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target as Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
Prøv det:
La oss fylle opp skjermen med flere farger med ballonger. Dupliser ballong-symbolet i biblioteket, og ring det BlueBalloon, med en Klasse av BlueBalloon. Hold den identisk med den opprinnelige ballongen, men med en blå fylling (jeg har brukt # c1e6ee, igjen fra den Vectortuts + opplæringen).
Dra noen eksempler på scenen. Husk at du kan fjerne noen av de grønne ballongene, og du kan endre størrelsen på noen av ballongene hvis du liker:
Hvis du tester SWF, gjør de blå ballongene ikke noe enda:
De blå ballongene gjør ikke noe fordi all vår kode er skrevet for å håndtere Ballong klasse, og ikke den BlueBalloon klasse. Vi kan kopiere all vår kode for å håndtere forskjellige ballongfarger, men det er rotete, og det ville være vondt å endre senere hvis vi ønsket å.
I stedet la vi gjøre den blå ballongen og den grønne ballongen bruke samme klasse, ved hjelp av arvskraften. Velg ditt originale ballonsymbol i biblioteket og gi nytt navn til det GreenBalloon; endre klassen til GreenBalloon også.
Vårt mål er å gi begge ballongene en baseklasse av Ballong; Dette vil bety at hver grønn ballong ses som en forekomst av Ballong så vel som av GreenBalloon, og hver blå ballong ses som en forekomst av Ballong i tillegg til BlueBalloon -- vår kode, som er skrevet med ballongklassen i tankene, vil fungere bra.
Dessverre, selv om vi kan sette klassen av et symbol til navnet på en klasse som ikke eksisterer, kan vi ikke gjøre det samme med baseklassen. Vi må lage en klassefil som de to ballongene kan arve.
Lag en ny klassefil, Balloon.as, i samme katalog som din FLA, og skriv inn denne koden:
pakke import flash.display.MovieClip; offentlig klasse Ballong utvider MovieClip offentlig funksjon Ballong ()
Det er alt du trenger. Det må utvides Filmklipp fordi begge ballongene bruker animasjoner; hvis vi forleng, si, Sprite i stedet, da de to ballong symbolene ikke kunne bruke en tidslinje, og ville være statiske bilder.
Angi basklassen for hver av ballonsymbolene i biblioteket til Ballong, og kjør SWF:
Flott! Det blir nå enkelt å legge til en annen ballongfarge. Bare for å bevise det, la oss legge til røde og gule.
Dette er et enkelt steg. Dupliser det grønne ballonsymbolet to ganger til, og skriv en pastellrød på nytt (# f2daea), med et navn og en klasse av RedBalloon, og den andre pastellgulten (# f6f5b4), med et navn og en klasse av YellowBalloon. I hvert tilfelle skal du angi baseklassen til Ballong. Legg masse av hver til scenen.
Kjør SWF; De nye ballongene skal fungere uten problemer.
Hvis noen farge nekter å pope, må du kontrollere at symbolets baseklasse er satt til Ballong.
Vi er betinget av å tro at Flash-objekter bare er klikkbare hvis musepekeren blir en hånd når vi svinger over dem. For å få denne hånden til å virke, må vi bare sette ballongen buttonMode eiendom til ekte.
Det enkleste stedet å gjøre dette er i til loop hvor vi legger til KLIKK hendelse lytter til hver ballong. Men alle Flash vet om ballongene på dette stadiet er at de er forekomster av Displayobject, siden det er hva getChildAt () returnerer - men buttonMode er en eiendom av Sprite-klassen. Dette betyr at vi må bruke som søkeord igjen. Vi kunne skrive:
offentlig funksjon 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;
? og deretter importere flash.display.Sprite klasse, men for enkelhets skyld skal jeg bruke Ballong klassen i stedet:
offentlig funksjon 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;
Kjør SWF:
Utfordring: For å holde med temaet for popping ballonger, kan du endre musepekeren til en nål eller en pinne. For hjelp, ta en titt på denne Quick Tip ved å gjøre et filmklipp følger musen, eller denne om å endre operativsystemets innfødte markør.
Gratulerer, du er ferdig med denne delen av opplæringen! Hvis du har fulgt alle utfordringene så langt, bør du være godt på vei til et pent lite minigame.
La oss skynde oss gjennom dette. Hvis du bruker Flash Pro:
Hvis du bruker en annen editor, må du bare opprette et nytt AS3-prosjekt ved hjelp av hvilken som helst metode du vanligvis ville. Ring prosjektet WindowCleaning og hovedklassen Main.as, for å gjøre denne opplæringen enklere å følge.
I begge tilfeller skal hovedklassen din se slik ut:
pakke import flash.display.MovieClip; offentlig klasse Main utvider MovieClip offentlig funksjon Main ()
Noen versjoner av Flash og noen redaktører kan generere litt litt annen kode for denne klassen; Det er greit, bare gå med standardene sine. Hvis editoren din ikke genererer noen kode automatisk, kopier min fra ovenfor.
Til å begynne med skal vi lage et solidt rektangel av farge og rydde opp det; Vi går videre til mer kompliserte bilder senere.
I hovedklassen lager du et nytt Sprite for å inneholde dette "skitne" rektangelet:
pakke import flash.display.MovieClip; importer flash.display.Sprite; offentlig klasse Main utvider MovieClip public var dirty: Sprite = new Sprite (); offentlig funksjon Main ()
Deretter bruker du Sprite grafisk egenskap for å lage et rektangel av farge størrelsen på scenen. Du kan hardkode verdiene i, hvis du vil (min FLA er 500x400px), eller sett verdiene dynamisk som jeg har gjort her:
pakke import flash.display.MovieClip; importer flash.display.Sprite; offentlig klasse Main utvider MovieClip public var dirty: Sprite = new Sprite (); offentlig funksjon Main () dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Dette vil ikke være synlig med mindre vi velger en fyllfarge. Jeg har valgt # 440000, en dyp rød.
offentlig funksjon Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Oh, vi må legge til skitt Sprite til skjermlisten:
offentlig funksjon Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (skitt);
Kjør din SWF. Hvis du ikke ser en solid farge, er det ikke sikkert at FLA-en din ikke er koblet til dokumentklassen på riktig måte.
I Carlos Yanez 'opplæring, Lag et grunnleggende tegneprogram med Flash, viste han oss hvordan du lager utseendet som farger på et lerret hadde blitt slettet med musemarkøren, ganske enkelt ved å tegne en tykk hvit linje som følger musen. Vi bruker det samme trikset her.
Først må vi opprette en MouseEvent-lytter for å spore musen når den beveger seg, og en håndteringsfunksjon for når den gjør det:
pakke import flash.display.MovieClip; importer flash.display.Sprite; importer flash.events.MouseEvent; offentlig klasse Main utvider MovieClip public var dirty: Sprite = new Sprite (); offentlig funksjon Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (skitt); dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); privat funksjon onMouseMoveOverDirt (a_event: MouseEvent): void
Deretter må vi tegne en linje fra musens tidligere posisjon til sin nåværende stilling:
privat funksjon onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY);
Ikke glem det linestyle () anrop; Den første linjen er tykkelsen på linjen (i piksler); den andre definerer fargen sin (#ffffff er hvit).
Prøv det:
Wow, det er det? en interessant effekt, men ikke hva vi skulle for! Problemet her er det lineTo () trekker en linje fra skitt grafisk objekt nåværende tegningsposisjon til hvilket punkt du angir (musens koordinater, i dette tilfellet). Vi flytter imidlertid ikke den nåværende tegningsposisjonen, så den forblir på (0, 0), det øverste venstre hjørnet av scenen. Vi trenger tegneposisjonen for å følge musen også; vi kan gjøre dette med flytte til() metode:
privat funksjon onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Prøv SWF nå:
Ganske bra, bortsett fra at startpunktet er satt til (0, 0), noe som betyr at den første linjen tegnet alltid vil hoppe fra øverste venstre hjørne. I tillegg, hvis du beveger musen ut av SWF på ett sted og inn i SWF på en annen, hopper linjen igjen.
For å løse begge problemene bør vi:
Her er koden for det. Hvis du ikke følger logikken helt, kan du prøve å kommentere bestemte linjer eller legge til din egen for å se hvordan den endrer den endelige effekten.
pakke import flash.display.MovieClip; importer flash.display.Sprite; importer flash.events.MouseEvent; offentlig klasse Main utvider MovieClip public var dirty: Sprite = new Sprite (); offentlig funksjon Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (skitt); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt); privat funksjon onMouseLeaveDirt (a_event: MouseEvent): void dirt.removeEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); privat funksjon onMouseReturnToDirt (a_event: MouseEvent): void dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); dirt.graphics.moveTo (mouseX, mouseY); privat funksjon onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Kjør SWF:
Ganske bra! Det er ikke perfekt, men det demonstrerer hva vi vil gjøre godt nok.
Vårt endelige mål er å slette en forgrunn for å avsløre en bakgrunn. I øyeblikket ser vi ut til å slette en rød forgrunn for å avsløre en hvit bakgrunn; la oss legge til en mer interessant backgound.
Jeg har valgt dette bildet av Envato-kontoret inngangsdør fra Flickr (kreditt til Envato), trimmet for å passe til min FLA:
Hvis du bruker Flash Pro, lager du et nytt filmklippssymbol, dra det valgte bildet inn i det (eller lag ditt eget ved hjelp av tegneverktøyene), og eksporter symbolet for ActionScript med et Klassenavn for Bakgrunn. Hvis du bruker en annen rediger, legg det inn i prosjektet ditt (også med navnet Bakgrunn) ved hjelp av din vanlige metode. Jeg har tatt med dette bildet i WindowWashing.swc inne i kilden nedlasting.
I stedet for å dra den på scenen, bruk koden for å legge den til skjermlisten under smusset:
pakke import flash.display.MovieClip; importer flash.display.Sprite; importer flash.events.MouseEvent; offentlig klasse Main utvider MovieClip public var dirty: Sprite = new Sprite (); offentlig var bakgrunn: Bakgrunn = Ny Bakgrunn (); offentlig funksjon Main () this.addChild (bakgrunn); dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (skitt); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt);
Så nå er bakgrunnen under smusset, men kan vi se det?
Er, nei.
Den enkleste måten å sjekke at bakgrunnen egentlig er der, er å redusere alfa av forgrunnen slik at den er halvtransparent:
offentlig funksjon Main () this.addChild (bakgrunn); dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (skitt); dirt.alpha = 0.5; dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt);
Som du kan se fra SWF nedenfor, er bakgrunnen der:
Denne SWF gjør det også klart at vi ikke ser bakgrunnen skinne gjennom (i tilfelle du ikke hadde utarbeidet det allerede): Vi tegner hvite linjer på toppen av det røde, og fjerner ikke de røde linjene helt. Ideelt sett ville vi gjøre de mørkere områdene av smuss ugjennomsiktig, mens de hvite områdene var gjennomsiktige. Dette er mulig ved bruk av blandingsmodus.
Hvis du ikke har brukt blandingsmodus før, sjekk ut denne introduksjonen av Trent Sterling. Kort sagt, en blandingstilstand definerer hvordan to bilder blandes sammen når man legges ovenpå den andre.
Blendmodusen vi skal søke på kalles mørkere. Tenk på det på denne måten: For hver piksel sammenligner Flash fargen på den pikselet fra de to bildene, og viser hvilken som er den mørkeste (dvs. den som er lengst unna ren hvit). Slik ser det ut om vi legger det røde smusset på toppen av Envato-skiltet og bruker blandingsmodus:
Sammenlign det med det opprinnelige tegnet bildet:
De mørke blues og greener i skiltet regnes som mørkere enn det dype røde av smuss, og så viser seg. Graden av bildet fører til den interessante flekkede effekten på det blandede bildet.
Hvordan skriver vi koden
Accentsconagua