Share
Una delle meccaniche di gioco più semplici è quella di permettere al giocatore di trovare un oggetto nascosto. I giochi basati su questo prendono molte forme: dove sono Waldo, Peek-A-Boo, Trova la differenza, Nascondi e cerca, e naturalmente Oggetti nascosti. In questo tutorial Premium, ti mostrerò due metodi per oscurare una scena in modo che il giocatore possa scoprirla in seguito.
Nel primo SWF, fai clic su Mi piace per far scoppiare tutti i palloncini. Ok, non c'è molta sfida, ma immagina di farlo contro il tempo, o con più palloncini che appaiono tutto il tempo.
Nel secondo SWF, cancella lo sporco passando il mouse sull'immagine. Questa meccanica è stata utilizzata in Window Washy, uno dei primi giochi per PS2 EyeToy - per non parlare di innumerevoli gratta e vinci!
Dobbiamo creare i palloncini prima che possiamo scoppiarli. Userò Flash Pro CS3 per fare questo; se non si dispone di Flash Pro, è possibile disegnare il proprio utilizzando qualsiasi metodo che si utilizza normalmente, oppure utilizzare SWC dal pacchetto di download e sfogliare tutti i passaggi in questo tutorial che spiega come disegnare. Includerò le istruzioni per gli utenti di altri editor, se pertinenti.
Apri Flash Pro e crea un nuovo file Flash (ActionScript 3.0). Baserò il disegno dei miei palloncini in questo tutorial di Illustrator da Vectortuts +, ma ovviamente uso gli strumenti di Flash.
Seleziona lo strumento Matita e posizionalo in modalità Smooth, con un tratto nero di 1 pixel. Ho usato il valore Smoothing predefinito di 50.
Ora disegna una forma approssimativa a forma di palloncino. Non preoccuparti di renderlo perfetto; lo regoleremo in un secondo. Ecco il mio:
Hmm. Vedi quegli angoli acuti? Smooth fuori. Utilizzare lo strumento Selezione per selezionare quella sezione della linea, quindi fare clic sul pulsante Smussa alcune volte.
Sono sicuro che c'è un modo migliore che i professionisti usano, ma questo di solito è il trucco per me. Modifica la forma del palloncino come preferisci - ricorda, puoi fare clic e trascinare qualsiasi punto sulla linea per estenderlo.
Ecco cosa ho finito con:
Ora aggiungi il nodo. Come dice Jesse nel già citato tutorial di Vectortuts +, "è solo un semplice cerchio con una forma rotonda simile ad un triangolo".
Ok, ora riempi il palloncino con un piacevole colore pastello (ho scelto # dae8b3, che è di nuovo dal tutorial di Vectortuts +) ed elimina tutte le linee.
Non male! Se vuoi aggiungere una lucentezza, usa lo strumento linea, con una larghezza del tratto più spessa (ho usato 3px) e un colore bianco, per tracciare una linea retta attraverso un "angolo", quindi usa lo strumento Selezione per curvarlo.
Seleziona questa linea lucente, poi clicca Modifica | Forma | Converti linee in riempimenti -- in questo modo, se ridimensioni il palloncino, la brillantezza rimarrà della stessa dimensione proporzionale al resto del fumetto.
Per interagire con un fumetto utilizzando ActionScript, è necessario convertirlo in un simbolo. Seleziona la tua arte, quindi fai clic Modifica | Converti in simbolo. Rendilo un simbolo di clip filmato chiamato Palloncino, ed esportalo per ActionScript usando lo stesso nome di classe.
Ignora l'avvertimento che non esiste una classe con lo stesso nome, se viene visualizzata dopo aver fatto clic su OK.
È possibile trovare un FLA e un SWC delle risorse utilizzate finora nella cartella BalloonsStep2 del download di origine.
Scegli uno sfondo per il tuo di galleggiare di fronte. Ho scelto questo sfondo (credito LGLab e envato) e l'ho ritagliato leggermente:
Se utilizzi Flash Professional, aggiungi un nuovo livello allo stage e importa l'immagine. Altrimenti, incorpora l'elemento grafico e aggiungilo alla fine dell'elenco di visualizzazione usando il metodo che preferisci. Potresti voler ridimensionare il tuo stage per adattarlo all'immagine, come ho fatto io.
Poi faremo sparire questo palloncino solitario quando viene cliccato.
Tempo per un po 'di codice!
Crea una classe, chiamata Main.as, nella stessa directory del tuo FLA e collegala al FLA come classe del documento - vedi qui per i dettagli. (Se non stai usando Flash Pro, allora presumo che tu sappia come fare l'equivalente nel tuo editor, devi aver già creato una classe principale per ottenere lo sfondo sul palco.)
package import flash.display.MovieClip; public class Main estende MovieClip public function Main ()
Dobbiamo accedere al fumetto dalla classe del documento, e quindi dobbiamo dargli un nome di classe.
Se utilizzi Flash Professional, seleziona il fumetto sullo stage e digita theBalloon nel casella nel pannello Proprietà. Quindi, fare clic File | Pubblica impostazioni, apri il Veloce scheda, fare clic impostazioni? accanto alla casella a discesa Versione di ActionScript e deseleziona la casella "Presenta automaticamente istanze di stage". (Questo non è strettamente necessario, ma consente al codice di essere lo stesso indipendentemente dal fatto che tu stia utilizzando Flash Pro o qualche altro editor.)
Quindi, modifica la classe del documento in questo modo:
package import flash.display.MovieClip; public class Main estende MovieClip public var theBalloon: Balloon; funzione pubblica Main ()
Se stai utilizzando un altro editor, aggiungi un'istanza della classe Balloon all'elenco di visualizzazione in qualsiasi coordinate che ti piace (purché sia davanti allo sfondo), assegnandogli un nome di istanza di theBalloon.
Utilizzeremo un listener MouseEvent per rilevare quando viene cliccato il fumetto e una funzione di gestione per rimuoverlo:
package import flash.display.MovieClip; import flash.events.MouseEvent; public class Main estende MovieClip public var theBalloon: Balloon; funzione pubblica Main () theBalloon.addEventListener (MouseEvent.CLICK, onClickBalloon); funzione privata onClickBalloon (a_event: MouseEvent): void this.removeChild (theBalloon); theBalloon.removeEventListener (MouseEvent.CLICK, onClickBalloon);
Roba semplice Provalo
Niente di strabiliante, ma almeno funziona.
Non c'è molta sfida in questo, c'è? Trascina altri palloncini sullo stage, sullo stesso livello dell'originale:
Come accediamo a questi in codice? Immagino che potremmo dare loro tutti i nomi di istanze come greenBalloon1, greenBalloon2, e così via, e aggiungi un ascoltatore MouseEvent a ciascuno? ugh. Stiamo codificando, possiamo automatizzarlo.
La classe del documento è a Un filmato, il che significa che è un DisplayObjectContainer (hooray for inheritance), che significa che ha una funzione getChildAt () e una proprietà numChildren, il che significa che possiamo usare un per loop per scorrere tutti gli oggetti sul palco. Lo proverò. Modifica la tua funzione principale () contsructor in questo modo:
funzione pubblica Main () for (var i: int = 0; i < this.numChildren; i++) trace(getChildAt(i)); theBalloon.addEventListener(MouseEvent.CLICK, onClickBalloon);
(Puoi lasciare il codice per rimuovere il palloncino originale.) Esegui il file SWF e controlla il pannello Output:
[oggetto Shape] [oggetto Balloon] [oggetto Balloon] [oggetto Balloon] [oggetto Balloon] [oggetto Balloon] [oggetto Balloon] [oggetto Balloon] [oggetto Balloon] [oggetto Balloon] [oggetto Balloon]
Il codice restituisce il tipo di ogni figlio di Main - ovvero, ciascun oggetto nell'elenco di visualizzazione, dal basso (getChildAt (0)) all'inizio (getChildAt (10)). Poiché non ho esportato l'immagine di sfondo per ActionScript, tutto ciò che Flash sa è che è una specie di Forma.
Abbiamo bisogno di aggiungere il onClickBalloon () ascoltatore per ciascuno dei palloncini, ma non per lo sfondo. Fortunatamente c'è una parola chiave che ci permette di controllare la classe di un oggetto: è. Possiamo usarlo in questo modo:
funzione pubblica Main () for (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon);
(Nota che ho rimosso la linea che aggiunge in modo specifico il listener di eventi al file theBalloon esempio.)
Prova il SWF:
Hmm. Non proprio giusto, lo è?
Indipendentemente dal palloncino su cui fai clic, il palloncino originale viene rimosso. La causa di questo è facile da individuare:
funzione pubblica 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);
Nella riga 16, stiamo aggiungendo il listener di eventi a ciascun fumetto; tuttavia, nelle righe 23 e 24, stiamo specificamente rimuovendo il theBalloon esempio. Nella funzione del gestore di eventi, invece, è necessario rimuovere qualsiasi fumetto su cui è stato fatto clic. Questo è chiamato il destinazione dell'evento, e si può accedere tramite il a_event.target proprietà. Quindi, ti aspetteresti che funzioni:
funzione privata onClickBalloon (a_event: MouseEvent): void this.removeChild (a_event.target); a_event.target.removeEventListener (MouseEvent.CLICK, onClickBalloon);
? ma non è così; otteniamo un errore:
1118: coercizione implicita di un valore con tipo statico Oggetto su un tipo possibilmente non correlato flash.display: DisplayObject.
Vedi, Flash non sa quale classe di oggetti è il target dell'evento, quindi non sa per certo che può essere removeChild ()-ed o che può avere allegati di eventi. Dobbiamo dire a Flash di trattare l'obiettivo dell'evento come un'istanza della classe Balloon, in questo modo:
funzione privata onClickBalloon (a_event: MouseEvent): void this.removeChild ((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
Provalo ora:
Grande! Questa è una pietra miliare decente; puoi trovare tutti i file creati finora nel BalloonsStep8 cartella nel download sorgente.
Sfida: Prova a contare quanti palloncini ci sono quando il SWF viene caricato per la prima volta, contando quanti ne vengono rimossi mentre vengono cliccati, e mostrando del testo di congratulazione o giocando un suono di vittoria quando tutti i palloncini sono spariti.
Quindi, facciamo in modo che i palloncini si aprano con una piccola animazione quando vengono cliccati.
Non ero sicuro di come animare questo, quindi ho guardato un video slow-mo di un vero e proprio palloncino scoppiato:
Sfortunatamente, questo mi sembra finto (lo so), quindi ho provato qualcos'altro.
Modifica il tuo fumetto e aggiungi un nuovo fotogramma alla timeline. In questa cornice, disegna un grande pasticcio spinoso con lo strumento matita:
Elimina la linea dello splendore (riempila con il colore del palloncino) e disegna alcune linee dalla confusione appuntita fino al bordo del palloncino:
Fare clic su ciascuna sezione, trasformarla in un gruppo (CTRL-G), separarla leggermente dalle altre e eliminare le righe:
Crea un nuovo fotogramma chiave e modifica i bit separati utilizzando lo strumento Trasformazione libera e allungando alcuni bordi dei riempimenti. Ho attivato Onion Skinning qui per poter vedere come le mie sezioni si confrontano con le loro posizioni nel frame prima:
Ho trovato che aiuta a mantenere i pezzi del pallone all'interno della stessa area precedentemente occupata, ma puoi sperimentare con questo. Successivamente, crea un altro keyframe e rendi ancora più piccoli tutti i segmenti:
Ho fatto cadere i segmenti un po 'qui, come se fosse dovuto alla gravità. Ora aggiungi un nuovo keyframe, completamente vuoto. Prova la tua animazione (potresti voler regolare la frequenza dei fotogrammi del tuo filmato: sono andato per 24 fps).
Eccezionale. Naturalmente, se esegui il tuo SWF ora, tutti i palloncini continueranno a saltar fuori più e più volte:
? quindi apri il pannello Azioni nel primo fotogramma della timeline di Balloon e aggiungi questo codice:
Stop();
L'animazione del fumetto è inclusa in SWC e FLA all'interno della cartella BalloonsStep9 del download sorgente.
Per far scoppiare un fumetto solo quando viene cliccato, dobbiamo solo creare l'animazione giocare():
funzione privata 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, eccetto che non funzionerà, perché il fumetto verrà immediatamente rimosso dall'elenco di visualizzazione, non è vero? Basta commentare il removeChild () linea per ora e assicurati che il file SWF funzioni:
Oh, giusto, dobbiamo Stop() l'animazione una volta completata. Apri il fotogramma chiave vuoto nella timeline del fumetto e aggiungi questo:
Stop();
In realtà, mentre siamo qui, potremmo risolvere il nostro removeChild () problema. Se facciamo la spedizione del pallone a COMPLETARE evento quando la sua animazione è finita, potremmo ascoltare questo evento Main.as, e rimuovere il fumetto dall'elenco di visualizzazione una volta che lo ascoltiamo. Aggiungi questa linea alle azioni del fotogramma chiave vuoto:
Stop(); dispatchEvent (new Event (Event.COMPLETE));
(Questo è tutto nel BalloonsStep10 SWC e FLA, non preoccuparti.) Ora, in Main.as, modifica il tuo onClickBalloon () funzione del gestore:
funzione privata 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); (a_event.target as Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
? creare un onBalloonBurst () funzione di gestione, che verrà eseguita al termine dell'animazione:
funzione privata onBalloonBurst (a_event: Event): void this.removeChild (a_event.target as Balloon);
? e importare la classe Event:
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent;
Provalo
Guardando bene finora.
Sfida: Che ne dici di animare i palloncini in modo che si muovano un po 'prima di fare clic su di essi?
Ho trovato un effetto sonoro perfetto per questo su AudioJungle: Balloon Pop. Non posso includerlo nel download sorgente, ma puoi comprarlo solo per un dollaro.
Se vuoi, acquista questo effetto, o trovane un altro online, e fallo giocare quando viene fatto scoppiare un palloncino. Per fare ciò, prima aggiungilo alla Libreria ed esportalo per ActionScript (o incorporalo nel tuo progetto, per utenti non Flash Pro), con un nome di classe di PopSWF.
Quindi, in Main.as, crea un'istanza privata del suono:
public class Main estende MovieClip public var theBalloon: Balloon; private var popSfx: PopSFX = new PopSFX ();
? e giocaci quando necessario:
funzione privata onClickBalloon (a_event: MouseEvent): void popSfx.play (); (a_event.target as Balloon) .play (); //this.removeChild((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target as Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
Provalo:
Riempiamo lo schermo con più colori di palloncini. Duplica il simbolo del fumetto nella libreria e chiamalo BlueBalloon, con un Classe di BlueBalloon. Tenerlo identico al palloncino originale, ma con un riempimento blu (ho usato # c1e6ee, di nuovo da quel tutorial di Vectortuts +).
Trascina alcune istanze sul palco. Ricorda che puoi rimuovere alcuni dei palloncini verdi e puoi ridimensionare i palloncini se lo desideri:
Se testate il SWF, i palloncini blu non fanno ancora nulla:
I palloncini blu non stanno facendo nulla perché tutto il nostro codice è scritto per gestire il Palloncino classe, e non il BlueBalloon classe. Potremmo duplicare tutto il nostro codice per gestire i diversi colori del pallone, ma questo è disordinato e sarebbe un problema cambiare in seguito se volessimo.
Invece, facciamo in modo che il palloncino blu e il palloncino verde usino la stessa classe, usando il potere dell'eredità. Seleziona il simbolo del Palloncino originale nella Libreria e rinominalo GreenBalloon; cambia la classe in GreenBalloon anche.
Il nostro obiettivo è dare a entrambi i palloncini una Classe Base di Palloncino; questo significherà che ogni palloncino verde è visto come un'istanza di Palloncino così come di GreenBalloon, e ogni palloncino blu è visto come un'istanza di Palloncino così come BlueBalloon -- il nostro codice, che è stato scritto pensando alla classe Balloon, funzionerà perfettamente.
Sfortunatamente, sebbene possiamo impostare la Classe di un simbolo sul nome di una classe che non esiste, non possiamo fare lo stesso con la Classe Base. Dobbiamo creare un file di classe che i due palloncini possano ereditare.
Crea un nuovo file di classe, Balloon.as, nella stessa directory del FLA e inserisci questo codice:
package import flash.display.MovieClip; Balloon della classe pubblica estende MovieClip Balloon funzione pubblica )
Questo è tutto ciò di cui hai bisogno. Deve estendersi Un filmato perché entrambi i palloncini usano le animazioni; se abbiamo esteso, diciamo, folletto invece, i due simboli a palloncino non potevano usare una timeline e sarebbero immagini statiche.
Impostare la classe base di ciascuno dei simboli del fumetto nella libreria su Palloncino, ed esegui il SWF:
Grande! Ora sarà facile aggiungere qualsiasi altro colore del fumetto. Giusto per dimostrarlo, aggiungiamo quelli rossi e gialli.
Questo è un passo facile. Duplica il simbolo del palloncino verde due volte di più e ricolora un rosso pastello (# f2daea), con un nome e una classe di redballoon, e l'altro giallo pastello (# f6f5b4), con un nome e una classe di YellowBalloon. In ogni caso, impostare la classe base su Palloncino. Aggiungi un sacco di ciascuno sul palco.
Esegui il file SWF; i nuovi palloncini dovrebbero funzionare senza problemi.
Se un colore si rifiuta di apparire, assicurati che la Base Class del simbolo sia impostata su Palloncino.
Siamo condizionati a pensare che gli oggetti Flash siano cliccabili solo se il cursore del mouse si trasforma in una mano quando passiamo il mouse su di essi. Per far apparire questa mano, dobbiamo solo impostare la mongolfiera buttonMode proprietà a vero.
Il posto più facile per farlo è nel per loop dove aggiungiamo il CLIC ascoltatore di eventi per ciascun fumetto. Tuttavia, tutto ciò che Flash conosce sui palloncini in questa fase è che si tratta di istanze di DisplayObject, poiché è quello che getChildAt () ritorna - ma buttonMode è una proprietà della classe Sprite. Questo significa che dobbiamo usare il come parola chiave di nuovo. Potremmo scrivere:
funzione pubblica 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;
? e quindi importa il flash.display.Sprite classe, ma per semplicità userò il Palloncino classe invece:
funzione pubblica 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;
Esegui il file SWF:
Sfida: Per mantenere il tema dei palloncini popping, è possibile cambiare il puntatore del mouse su un ago o uno spillo. Per aiuto, dai un'occhiata a questo suggerimento rapido facendo in modo che un filmato segua il mouse, o questo sul cambiamento del cursore nativo del sistema operativo.
Congratulazioni, hai completato questa sezione del tutorial! Se hai seguito tutte le sfide finora, dovresti essere sulla buona strada per un piccolo minigioco pulito.
Corriamo attraverso questo. Se utilizzi Flash Pro:
Se stai usando un editor diverso, crea un nuovo progetto AS3 usando qualsiasi metodo tu normalmente. Chiama il progetto WindowCleaning e la classe principale Main.as, per rendere questo tutorial più facile da seguire.
In entrambi i casi, la tua classe principale dovrebbe essere simile a questa:
package import flash.display.MovieClip; public class Main estende MovieClip public function Main ()
Alcune versioni di Flash e alcuni editor possono generare codice leggermente diverso per questa classe; va bene, basta andare con le sue impostazioni predefinite. Se il tuo editor non genera automaticamente alcun codice, copia il mio dall'alto.
Per cominciare, creeremo un solido rettangolo di colore e lo puliremo; passeremo a immagini più complesse in seguito.
Nella tua classe Main, crea un nuovo Sprite per contenere questo rettangolo "sporco":
package import flash.display.MovieClip; import flash.display.Sprite; public class Main estende MovieClip public var dirt: Sprite = new Sprite (); funzione pubblica Main ()
Quindi, usa gli Sprite grafico proprietà per creare un rettangolo di colore delle dimensioni del palcoscenico. Puoi inserire i valori nel codice, se preferisci (il mio FLA è 500x400px) o impostare i valori dinamicamente come ho fatto qui:
package import flash.display.MovieClip; import flash.display.Sprite; public class Main estende MovieClip public var dirt: Sprite = new Sprite (); funzione pubblica Main () dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Questo non sarà visibile a meno che non scegliamo un colore di riempimento, però. Ho scelto # 440000, un rosso intenso.
funzione pubblica Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Oh, dobbiamo aggiungere il sporco Sprite all'elenco di visualizzazione:
funzione pubblica Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (sporcizia);
Esegui il tuo SWF. Se non vedi un colore a tinta unita, forse il tuo FLA non è collegato correttamente alla tua classe di documento.
Nel tutorial di Carlos Yanez, Creare un'applicazione di disegno di base con Flash, ci ha mostrato come creare l'aspetto che i colori su una tela erano stati cancellati dal cursore del mouse, semplicemente disegnando una linea bianca spessa che segue il mouse. Useremo lo stesso trucco qui.
Innanzitutto, dobbiamo creare un listener MouseEvent per tenere traccia del mouse mentre si sposta e una funzione di gestione per quando esegue:
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class Main estende MovieClip public var dirt: Sprite = new Sprite (); funzione pubblica Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (sporcizia); dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); funzione privata onMouseMoveOverDirt (a_event: MouseEvent): void
Successivamente, dobbiamo tracciare una linea dalla posizione precedente del mouse alla sua posizione corrente:
funzione privata onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY);
Non dimenticare il lineStyle () chiamata; la prima linea è lo spessore della linea (in pixel); il secondo definisce il suo colore (#ffffff è bianco).
Provalo:
Wow, questo è? un effetto interessante, ma non quello che stavamo per! Il problema qui è questo lineTo () disegna una linea dal sporco oggetto grafico posizione di disegno corrente a qualsiasi punto specificato (le coordinate del mouse, in questo caso). Tuttavia, non stiamo spostando la posizione del disegno corrente, quindi rimane (0, 0), l'angolo in alto a sinistra del palco. Abbiamo bisogno che la posizione del disegno segua anche il mouse; possiamo farlo con il moveTo () metodo:
funzione privata onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Prova subito il SWF:
Abbastanza buono, tranne che il punto iniziale è impostato su (0, 0), il che significa che la prima linea disegnata salterà sempre dall'angolo in alto a sinistra. Inoltre, se si sposta il mouse fuori dal SWF in un punto e nel SWF in un altro, la linea salta di nuovo.
Per risolvere entrambi i problemi, dovremmo:
Ecco il codice per questo. Se non segui interamente la logica, prova a commentare alcune righe o ad aggiungerne altre per vedere come cambia l'effetto finale.
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class Main estende MovieClip public var dirt: Sprite = new Sprite (); funzione pubblica Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (sporcizia); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt); funzione privata onMouseLeaveDirt (a_event: MouseEvent): void dirt.removeEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); funzione privata onMouseReturnToDirt (a_event: MouseEvent): void dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); dirt.graphics.moveTo (mouseX, mouseY); funzione privata onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Esegui il tuo SWF:
Piuttosto buono! Non è perfetto, ma dimostra ciò che vogliamo fare abbastanza bene.
Il nostro obiettivo finale è quello di cancellare un piano in primo piano per rivelare uno sfondo. Al momento, sembra che si stia cancellando un primo piano rosso per rivelare uno sfondo bianco; ora aggiungiamo un backgound più interessante.
Ho scelto questa immagine della porta d'ingresso dell'ufficio Envato da Flickr (credito a Envato), tagliato per adattarsi al mio FLA:
Se utilizzi Flash Pro, crea un nuovo simbolo di clip filmato, trascina l'immagine scelta (o creane uno personalizzato con gli strumenti di disegno) ed esporta il simbolo di ActionScript con un nome di classe di sfondo. Se stai utilizzando un altro editor, incorporalo nel tuo progetto (anche con il nome sfondo) usando il tuo solito metodo. Ho incluso questa immagine in WindowWashing.swc all'interno del download sorgente.
Invece di trascinarlo sul palco, usa il codice per aggiungerlo all'elenco di visualizzazione sotto lo sporco:
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class Main estende MovieClip public var dirt: Sprite = new Sprite (); background var pubblico: Background = new Background (); funzione pubblica Main () this.addChild (background); dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (sporcizia); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt);
Quindi ora lo sfondo è sotto la terra, ma possiamo vederlo?
Accentsconagua