Share
Una dintre cele mai simple mecanici de joc este să lași jucătorul să găsească un obiect ascuns. Jocurile bazate pe acest lucru iau mai multe forme: Unde este Waldo, Peek-A-Boo, Spot Diferența, Ascunde și Căutați și, desigur, Obiect Ascuns. În acest tutorial Premium, vă voi arăta două metode de a observa o scenă, astfel încât jucătorul să o poată dezvălui mai târziu.
În primul SWF, faceți clic pe nebun pentru a afișa toate baloanele. Bine, nu este o provocare foarte mare, dar imaginați-vă că faceți acest lucru împotriva ceasului, sau cu mai multe baloane care apar tot timpul.
În al doilea SWF, ștergeți murdăria prin deplasarea mouse-ului peste imagine. Acest mecanic a fost folosit în Window Washy, unul dintre primele jocuri pentru PS2 EyeToy - ca să nu mai vorbim de nenumărate cărți de înșurubat!
Trebuie să creăm baloanele înainte de a le putea izbucni. Voi folosi Flash Pro CS3 pentru a face acest lucru; dacă nu aveți Flash Pro, puteți să vă trasați propriile metode folosind oricare metodă pe care o utilizați în mod obișnuit sau să utilizați SWC din pachetul de descărcare și să schimbați toți pașii din acest tutorial, explicând cum să desenați. Voi include instrucțiuni pentru utilizatorii altor editori, dacă este cazul.
Deschideți Flash Pro și creați un fișier Flash nou (ActionScript 3.0). Mă voi baza pe designul baloanelor mele pe tutorialul Illustrator de la Vectortuts + - dar folosind instrumentele Flash, evident.
Selectați instrumentul Creion și puneți-l în modul Smooth, cu un accident de 1px negru. Am folosit valoarea implicită de netezire de 50.
Acum, trageți o formă de balon dur. Nu vă faceți griji pentru a fi perfectă; o vom ajusta într-o secundă. Iată-mi:
Hmm. Vedeți acele colțuri ascuțite? Îndepărtează-le. Utilizați instrumentul Selecție pentru a selecta acea secțiune a liniei, apoi faceți clic pe butonul Smooth de câteva ori.
Sunt sigur că există o modalitate mai bună pe care profesioniștii o folosesc, dar asta face de obicei truc pentru mine. Ajustați forma balonului oricum doriți - amintiți-vă, puteți să faceți clic și să trageți orice punct de pe linie pentru al întinde.
Iată ce am ajuns:
Acum adăugați nodul. După cum spune Jesse în tutorialul Vectortuts + menționat anterior, "este doar un cerc simplu cu o formă rotundă sub formă de triunghi sub formă de colț de dedesubt".
Acum, umpleți balonul cu o culoare pastelă plăcută (am selectat # dae8b3, care este din nou din tutorialul Vectortuts +) și ștergeți toate liniile.
Nu-i rău! Dacă doriți să adăugați o strălucire, utilizați instrumentul de linie, cu o lățime mai mare a cursei (am folosit 3px) și o culoare albă, pentru a desena o linie dreaptă într-un "colț", apoi utilizați instrumentul Selecție pentru ao curba.
Selectați această linie de strălucire, apoi faceți clic pe Modificați | Formă | Conversia liniilor la umpleri -- în acest fel, dacă redimensionați balonul, strălucirea va rămâne aceeași dimensiune proporțională cu restul balonului.
Pentru a interacționa cu un balon folosind ActionScript, trebuie să îl convertim la un simbol. Selectați-vă arta, apoi faceți clic pe Modificați | Conversia la simbol. Faceți-i un simbol de film clip numit Balon, și exportați-o pentru ActionScript folosind același nume de clasă.
Ignorați avertismentul despre faptul că nu există o clasă cu același nume, dacă apare după ce faceți clic pe OK.
Puteți găsi un FLA și SWC a bunurilor utilizate până acum în dosarul BalloonsStep2 din descărcarea sursei.
Alegeți un fundal pentru ca dvs. să plutiți în fața lui. Am ales acest fundal (credit LGLab și envato) și l-am tăiat ușor:
Dacă utilizați Flash Professional, adăugați un nou strat în scenă și importați imaginea. În caz contrar, încorporați graficul și adăugați-l în partea de jos a listei de afișare utilizând metoda pe care o preferați. Poate doriți să redimensionați scena dvs. pentru a se potrivi imaginii, așa cum am făcut.
Apoi vom face ca acest balon singuratic să dispară când este apăsat.
Timp pentru un cod!
Creați o clasă, numită Main.as, în același director ca și FLA dvs. și conectați-o la FLA ca clasă de document - vedeți aici pentru detalii. (Dacă nu utilizați Flash Pro, atunci presupun că știți cum să faceți echivalentul în editorul dvs., trebuie să fi creat deja o clasă principală pentru a obține fundalul pe scenă.)
pachet import flash.display.MovieClip; clasa publică Extensie principală MovieClip funcția publică principală ()
Trebuie să accesăm balonul din clasa de documente, așa că trebuie să îi oferim un nume de clasă.
Dacă utilizați Flash Professional, selectați balonul pe scenă și tastați theBalloon în caseta din panoul Proprietăți. Apoi apasa Fișier | Publicați setările, deschide bliț fila, faceți clic pe Setări? lângă caseta derulantă Versiunea ActionScript și debifați caseta "Deconectați etapele automate". (Nu este strict necesar, dar permite ca codul să fie același indiferent dacă utilizați Flash Pro sau un alt editor.)
Apoi, modificați clasa de documente astfel:
pachet import flash.display.MovieClip; public class Main Extinde MovieClip public var theBalloon: Balloon; funcția publică principală ()
Dacă utilizați un alt editor, adăugați o instanță a clasei Balon în lista de afișări la orice coordonate doriți (atâta timp cât este în fața fundalului), dându-i un nume de instanță theBalloon.
Vom folosi un ascultător MouseEvent pentru a detecta când se face clic pe balon și o funcție de manipulare pentru ao elimina:
pachet import flash.display.MovieClip; importul flash.events.MouseEvent; public class Main Extinde MovieClip public var theBalloon: Balloon; funcția publică principală () theBalloon.addEventListener (MouseEvent.CLICK, onClickBalloon); funcția privată onClickBalloon (a_event: MouseEvent): void this.removeChild (Balonul); Balloon.removeEventListener (MouseEvent.CLICK, onClickBalloon);
Lucruri simple. Testați-l:
Nimic nu suflă, dar cel puțin funcționează.
Nu este o mare provocare în asta, nu-i așa? Trageți încă câteva baloane pe scenă, pe același strat ca cel original:
Cum vom accesa aceste coduri? Cred că i-am putea da toate numele de instanțe de genul greenBalloon1, greenBalloon2, și așa mai departe, și adăugați un ascultător MouseEvent la fiecare? Ugh. Codificăm, putem automatiza asta.
Clasa de documente este a MovieClip, ceea ce înseamnă că este a DisplayObjectContainer (hooray pentru moștenire), ceea ce înseamnă că are o funcție getChildAt () și o proprietate numChildren, ceea ce înseamnă că putem folosi o pentru buclă pentru a itera prin toate obiectele de pe scenă. O să dovedesc asta. Modificați funcția Contructor principal () astfel:
funcția publică Main () pentru (var i: int = 0; i < this.numChildren; i++) trace(getChildAt(i)); theBalloon.addEventListener(MouseEvent.CLICK, onClickBalloon);
(Puteți lăsa codul pentru a elimina balonul original.) Rulați SWF și verificați panoul de ieșire:
[obiect Balon] [balon obiect] [balon obiect] [balon obiect] [balon obiect] [balon obiect] [obiect balon] [obiect balon]
Codul returnează tipul fiecărui copil din Main - adică fiecare obiect din lista de afișare, din partea de jos (getChildAt (0)) sus (getChildAt (10)). Pentru că nu am exporta imaginea de fundal pentru ActionScript, Flash știe că este ceva Formă.
Trebuie să adăugăm onClickBalloon () ascultător pentru fiecare dintre baloane, dar nu pentru fundal. Din fericire, există un cuvânt cheie care ne permite să verificăm clasa unui obiect: este. Putem să o folosim așa:
funcția publică Main () pentru (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon);
(Rețineți că am eliminat linia care adaugă în mod special ascultătorului evenimentului la theBalloon instanță.)
Testați SWF-ul:
Hmm. Nu este corect, nu-i așa??
Indiferent de balonul pe care faceți clic, balonul original este eliminat. Cauza acestui lucru este ușor de observat:
funcția publică Main () pentru (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);
În linia 16, adăugăm ascultătorul evenimentului la fiecare balon; cu toate acestea, în liniile 23 și 24, eliminăm în mod specific theBalloon instanță. În cazul funcției de manipulare a evenimentului, trebuie să eliminăm în schimb ce balon a fost apăsat. Aceasta se numește eveniment țintă, și pot fi accesate prin a_event.target proprietate. Asadar, te-ai astepta ca aceasta sa functioneze:
funcția privată onClickBalloon (a_event: MouseEvent): void this.removeChild (a_event.target); a_event.target.removeEventListener (MouseEvent.CLICK, onClickBalloon);
? dar nu este; avem o eroare:
1118: Constrângerea implicită a unei valori cu tip static Obiect la un tip posibil de nerelat flash.display: DisplayObject.
Vezi, Flash nu știe ce clasă de obiect este evenimentul țintă, deci nu știe sigur că poate fi removeChild ()-ed sau că poate fi atașat orice ascultător al evenimentului. Trebuie să-i spunem lui Flash să trateze ținta evenimentului la fel de o instanță a clasei Balon, așa cum este:
funcția privată onClickBalloon (a_event: MouseEvent): void this.removeChild ((a_event.target ca Balon)); (a_event.target ca balon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
Încearcă acum:
Grozav! Aceasta este o piatră de hotar decentă; puteți găsi toate fișierele create până în prezent în BalloonsStep8 folderul din descărcarea sursei.
Provocare: Încercați să numărați cât de multe baloane există atunci când SWF se încarcă mai întâi, numărați cât de mulți sunt eliminați la apăsarea acestora și afișând un text de felicitare sau un sunet de victorie când toate baloanele au dispărut.
Apoi, hai să facem baloanele pop cu o mică animație când sunt apăsate.
Nu eram sigură cum să animăm acest lucru, așa că m-am uitat la un videoclip lent-mo al unui adevărat balon care izbucni:
Din păcate, acest lucru mi se pare fals (știu), așa că am încercat altceva.
Editați balonul și adăugați un nou cadru pe cronologie. În acest cadru, trageți o mizerie mare cu ajutorul creionului:
Ștergeți linia de strălucire (umpleți-o cu culoarea balonului) și trageți câteva linii de la mizeria spinoasă spre marginea balonului:
Faceți clic pe fiecare secțiune, transformați-o într-un grup (CTRL-G), separați-o ușor de ceilalți și ștergeți liniile:
Creați un nou cadru cheie și optimizați biții separați utilizând instrumentul Free Transform Tool și întinzând unele dintre marginile umplerilor. Am activat aici Ceiling Skinning, pentru a vedea cum compar compartimentele mele cu pozitiile lor in cadrul anterior:
Am descoperit că ajută la păstrarea bucăților balonului în interiorul aceleiași zone pe care balonul le-a ocupat înainte, dar puteți experimenta acest lucru. Apoi, creați un alt keyframe și faceți toate segmentele chiar mai mici:
Am făcut ca segmentele să cadă aici, ca și cum ar fi datorită gravității. Acum adăugați o nouă cheie cheie, complet goală. Testați-vă animația (poate doriți să ajustați rata de cadre a filmului dvs., m-am dus pentru 24 de cadre pe secundă).
Minunat. Desigur, dacă rulați acum SWF-ul dvs., toate baloanele vor continua să se repete din nou și din nou:
? deschideți astfel panoul Acțiuni în primul cadru al cronologiei Balonului și adăugați acest cod:
Stop();
Animația balonului este inclusă în SWC și FLA din directorul BalloonsStep9 din sursa de descărcare.
Pentru a face un pop balon doar atunci când este apăsat, trebuie să facem animația Joaca():
funcția privată onClickBalloon (a_event: MouseEvent): void (a_event.target ca Balon) .play (); this.removeChild ((a_event.target ca Balon)); (a_event.target ca balon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
? er, cu excepția faptului că nu va funcționa, deoarece balonul va fi imediat eliminat din lista de afișare, nu-i așa? Doar comentați removeChild () linie pentru acum și asigurați-vă că SWF funcționează:
Trebuie, bine Stop() animația odată ce sa terminat. Deschideți cadranul cheie cheie din cronologia balonului și adăugați acesta:
Stop();
De fapt, în timp ce suntem aici, ne-am putea rezolva removeChild () problemă. Dacă facem expedierea balonului a COMPLET evenimentul când animația sa spargere a terminat, am putea asculta pentru acest eveniment în Main.as, și scoateți balonul din lista de afișare odată ce îl auzim. Adăugați această linie la acțiunile cheie ale cadrului cheie:
Stop(); dispatchEvent (eveniment nou (Event.COMPLETE));
(Acesta este totul în SWC BalloonsStep10 și FLA, nu vă faceți griji.) Acum, în Main.as, modificați-vă onClickBalloon () funcția de manipulare:
funcția privată onClickBalloon (a_event: MouseEvent): void (a_event.target ca Balon) .play (); //this.removeChild((a_event.target ca Balon)); (a_event.target ca balon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target ca balon) .addEventListener (Event.COMPLETE, onBalloonBurst);
? creaza un onBalloonBurst () handler, care va fi rulat odată ce animația a terminat:
funcția privată peBalloonBurst (a_event: Event): void this.removeChild (a_event.target ca Balon);
? și importați clasa Eveniment:
pachet import flash.display.MovieClip; importul flash.events.Event; importul flash.events.MouseEvent;
Testați-l:
Privind bine până acum.
Provocare: Ce zici de a anima baloanele astfel incat sa bobieze un pic inainte de a le da click pe ele?
Am găsit un efect de sunet perfect pentru asta pe AudioJungle: Balon Pop. Nu pot să o includ în sursa de descărcare, dar o puteți cumpăra cu doar un dolar.
Dacă doriți, cumpărați acest efect, sau găsiți altul online și faceți-l să se joace când este lansat un balon. Pentru aceasta, mai întâi adăugați-o în Bibliotecă și exportați-o pentru ActionScript (sau încorporați-o în proiect, pentru utilizatorii non-Flash Pro), cu numele de clasă PopSWF.
Apoi în Main.as, creați o instanță privată a sunetului:
public class Main Extinde MovieClip public var theBalloon: Balloon; privat var popSfx: PopSFX = nou PopSFX ();
? și să o joace când este necesar:
funcția privată onClickBalloon (a_event: MouseEvent): void popSfx.play (); (a_event.target ca balon) .play (); //this.removeChild((a_event.target ca Balon)); (a_event.target ca balon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target ca balon) .addEventListener (Event.COMPLETE, onBalloonBurst);
Încearcă:
Să umplem ecranul cu mai multe culori de baloane. Duplicați simbolul Balon din Bibliotecă și sunați-l BlueBalloon, cu Clasă de BlueBalloon. Păstrați-l identic cu balonul original, dar cu o umplere albastră (am folosit # c1e6ee, din nou de la tutorialul Vectortuts +).
Trageți câteva momente pe scenă. Rețineți că puteți elimina unele dintre baloanele verzi și puteți redimensiona oricare dintre baloane dacă doriți:
Dacă testați SWF-ul, baloanele albastre nu fac încă nimic:
Baloanele albastre nu fac nimic, deoarece tot codul nostru este scris pentru a face față Balon clasă, și nu BlueBalloon clasă. Am putea duplica tot codul nostru pentru a face față diferitelor culori ale balonului, dar asta e dezordonat și ar fi o durere de schimbat mai târziu dacă vrem.
În schimb, să facem balonul albastru și balonul verde să folosească aceeași clasă, folosind puterea de moștenire. Selectați simbolul original al balonului din Bibliotecă și redenumi-l la GreenBalloon; schimbați clasa la GreenBalloon de asemenea.
Scopul nostru este să oferim ambelor baloane o clasă de bază de Balon; acest lucru va însemna că fiecare balon verde este văzut ca un exemplu de Balon precum și din GreenBalloon, și fiecare balon albastru este văzut ca un exemplu de Balon precum și BlueBalloon -- codul nostru, care este scris în clasa Balon în minte, va funcționa bine.
Din păcate, deși putem seta Clasa unui simbol la numele unei clase care nu există, nu putem face același lucru cu clasa de bază. Trebuie să creăm un fișier de clasă pe care cei doi baloane îl pot moșteni.
Creați un nou fișier de clasă, Balloon.as, în același director ca și FLA și introduceți acest cod:
pachet import flash.display.MovieClip; public Balloon de clasă extinde MovieClip funcția publică Balloon ()
Asta e tot ce ai nevoie. Trebuie să se extindă MovieClip deoarece ambele baloane utilizează animații; dacă ne-am lărgit, să spunem, spiriduș în schimb, cele două simboluri balon nu puteau folosi o cronologie și ar fi imagini statice.
Setați clasa de bază a fiecărui simbol al balonului din Bibliotecă la Balon, și executați SWF-ul:
Grozav! Acum va fi ușor să adăugați orice altă culoare a balonului. Doar pentru a dovedi asta, să adăugăm cele roșii și galbene.
Acesta este un pas simplu. Duplicați simbolul balonului verde de două ori și recolorați un roșu pastel (# f2daea), cu un nume și o clasă de RedBalloon, și celălalt galben pastel (# f6f5b4), cu un nume și o clasă de YellowBalloon. În fiecare caz, setați Clasa de bază la Balon. Adăugați o mulțime de fiecare pe scenă.
Rulați SWF-ul; noile baloane ar trebui să funcționeze fără probleme.
Dacă orice culoare refuză să apară, asigurați-vă că este setată Clasa de bază a simbolului Balon.
Suntem condiționați să credem că obiectele Flash sunt clicabile numai dacă cursorul mouse-ului se transformă într-o mână când vom trece peste ele. Pentru ca această mână să apară, trebuie să setăm balonul buttonMode proprietate la Adevărat.
Cel mai simplu loc pentru a face acest lucru este în pentru bucla în care adăugăm CLIC ascultător de evenimente pentru fiecare balon. Cu toate acestea, toate cunoștințele Flash despre baloane în acest stadiu sunt faptul că acestea sunt cazuri de DisplayObject, de vreme ce asta e getChildAt () se întoarce - dar buttonMode este o proprietate a clasei Sprite. Asta înseamnă că trebuie să folosim la fel de cuvânt cheie din nou. Am putea scrie:
funcția publică Main () pentru (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;
? și apoi importați flash.display.Sprite dar din motive de simplitate o să folosesc Balon clasa:
funcția publică Main () pentru (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;
Rulați SWF:
Provocare: Pentru a păstra tema balonării, puteți schimba cursorul mouse-ului pe un ac sau un bolț. Pentru ajutor, aruncați o privire la acest sfat rapid pentru a face acest lucru făcând un clip video urmând mouse-ul, sau unul cu privire la schimbarea cursorului nativ al sistemului de operare.
Felicitări, ați terminat această secțiune a tutorialului! Dacă ați urmat toate provocările până acum, ar trebui să vă deplasați într-un minigame minunat.
Să ne grăbim prin asta. Dacă utilizați Flash Pro:
Dacă utilizați un editor diferit, creați doar un nou proiect AS3 folosind orice metodă ați proceda în mod normal. Sunați la proiect WindowCleaning și clasa principală Main.as, pentru a face acest tutorial mai ușor de urmărit.
În ambele cazuri, clasa principală ar trebui să arate astfel:
pachet import flash.display.MovieClip; clasa publică Extensie principală MovieClip funcția publică principală ()
Unele versiuni ale Flash și unele editoare pot genera un cod ușor diferit pentru această clasă; că e bine, du-te cu defectele sale. Dacă editorul dvs. nu generează automat niciun cod, copiați-mă de sus.
Pentru a începe, vom crea un dreptunghi solid de culoare și vom curăța acest lucru; vom trece mai departe la imagini mai complicate.
În clasa principală, creați un nou Sprite pentru a conține acest dreptunghi "murdar":
pachet import flash.display.MovieClip; import flash.display.Sprite; public class Extensie principală MovieClip public mur dirt: Sprite = Sprite nou (); funcția publică principală ()
Apoi, folosește Sprite-ul grafic proprietatea de a crea un dreptunghi de culoare de dimensiunea scenei. Ați putea codifica greșit valorile în, dacă doriți (FLA meu este 500x400px) sau setați dinamic valorile așa cum am făcut aici:
pachet import flash.display.MovieClip; import flash.display.Sprite; public class Extensie principală MovieClip public mur dirt: Sprite = Sprite nou (); funcția publică principală () dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Acest lucru nu va fi vizibil decât dacă alegem o culoare de umplere. Am ales # 440000, un roșu adânc.
funcția publică Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stadiu.staj Lățime, stadiu.staj înălțime);
Trebuie să adăugăm murdărie Sprite în lista de afișare:
funcția publică Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stadiu.staj Lățime, stadiu.staj înălțime); this.addChild (murdărie);
Rulați SWF-ul. Dacă nu vedeți o culoare solidă, probabil că FLA dvs. nu este conectat corect la clasa de documente.
În tutorialul lui Carlos Yanez, Creați o aplicație de bază de desen cu Flash, ne-a arătat cum să creăm aspectul că culorile de pe panza au fost șterse de cursorul mouse-ului, pur și simplu prin desenarea unei linii albe groase care urmează mouse-ul. Vom folosi același șmecherie aici.
În primul rând, trebuie să creăm un ascultător MouseEvent pentru a urmări mouse-ul pe măsură ce se mișcă și o funcție de manipulare pentru atunci când o face:
pachet import flash.display.MovieClip; import flash.display.Sprite; importul flash.events.MouseEvent; public class Extensie principală MovieClip public mur dirt: Sprite = Sprite nou (); funcția publică Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stadiu.staj Lățime, stadiu.staj înălțime); this.addChild (murdărie); dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); funcția privată onMouseMoveOverDirt (a_event: MouseEvent): void
Apoi, trebuie să trasăm o linie din poziția anterioară a mouse-ului în poziția sa actuală:
funcția privată onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY);
Nu uitați tipuri de linii () apel; prima linie este grosimea liniei (în pixeli); al doilea definește culoarea sa (#ffffff este alb).
Încearcă:
Wow, asta e? un efect interesant, dar nu ceea ce mergeam! Problema este aici lineTo () trasează o linie din murdărie obiect grafic poziția curentă a desenului la oricare dintre punctele pe care le specificați (coordonatele mouse-ului, în acest caz). Cu toate acestea, nu ne mișcăm poziția actuală de desen, așa că rămâne la (0, 0), colțul din stânga sus al scenei. Avem nevoie de poziția de desen pentru a urmări și mouse-ul în jur; putem face acest lucru cu MoveTo () metodă:
funcția privată onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Încercați SWF acum:
Destul de bun, cu excepția faptului că punctul inițial este setat la (0, 0), ceea ce înseamnă că prima linie trasată va sari întotdeauna din colțul din stânga sus. În plus, dacă mutați mouse-ul din SWF într-un singur loc și în SWF la altul, linia sare din nou.
Pentru a rezolva ambele probleme, ar trebui:
Iată codul pentru asta. Dacă nu urmăriți în întregime logica, încercați să comentați anumite linii sau să vă adăugați propria dvs. pentru a vedea cum modifică efectul final.
pachet import flash.display.MovieClip; import flash.display.Sprite; importul flash.events.MouseEvent; public class Extensie principală MovieClip public mur dirt: Sprite = Sprite nou (); funcția publică Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stadiu.staj Lățime, stadiu.staj înălțime); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (murdărie); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt); funcția privată onMouseLeaveDirt (a_event: MouseEvent): void dirt.removeEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); funcția privată onMouseReturnToDirt (a_event: MouseEvent): void dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); dirt.graphics.moveTo (mouseX, mouseY); funcția privată onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Rulați SWF-ul:
Destul de bine! Nu este perfect, dar demonstrează ce vrem să facem destul de bine.
Scopul nostru final este să ștergem un prim plan pentru a dezvălui un fundal. În momentul de față, par să ștergem un prim plan roșu pentru a descoperi un fundal alb; acum, să adăugăm o replică mai interesantă.
Am ales această imagine a ușii din față a biroului Envato de la Flickr (credit la Envato), împodobită pentru a se potrivi cu FLA mea:
Dacă utilizați Flash Pro, creați un nou simbol al filmului, glisați imaginea selectată în el (sau creați-vă propriul utilizând instrumentele de desenare) și exportați simbolul pentru ActionScript cu un nume de clasă fundal. Dacă utilizați un alt editor, încorporați-l în proiect (și cu numele fundal) folosind metoda obișnuită. Am inclus această imagine în WindowWashing.swc în interiorul descărcării sursei.
În loc să-l trageți pe scenă, utilizați codul pentru ao adăuga în lista de afișare de sub murdărie:
pachet import flash.display.MovieClip; import flash.display.Sprite; importul flash.events.MouseEvent; public class Extensie principală MovieClip public mur dirt: Sprite = Sprite nou (); var var fundal: Background = new Background (); funcția publică principală () this.addChild (fundal); dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stadiu.staj Lățime, stadiu.staj înălțime); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (murdărie); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt);
Deci fundalul este acum sub murdărie, dar îl putem vedea?
Nu, nu.
Cea mai ușoară modalitate de a verifica dacă fondul este de fapt acolo este de a reduce alfa din prim-plan astfel încât să fie semi-transparent:
funcția publică principală () this.addChild (fundal); dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stadiu.staj Lățime, stadiu.staj înălțime); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (murdărie); dirt.alpha = 0.5; dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt);
După cum puteți vedea din SWF de mai jos, fundalul este acolo:
Acest SWF explică, de asemenea, de ce nu vedem că fundalul strălucește (în cazul în care nu l-ați mai descurcat deja): desenați linii albe pe roșu, fără a elimina complet linia roșie. În mod ideal, am face zo
Accentsconagua