Ricostruzione MovieClip con la classe SharedObject

Durante questo tutorial, impareremo come implementare la classe SharedObject. Archiviamo tutti i dati essenziali di un MovieClip localmente, quindi lo ricarichiamo la prossima volta che l'applicazione viene aperta!

Abbiamo trovato questo fantastico autore grazie a FlashGameLicense.com, il posto dove comprare e vendere giochi Flash.

Grazie a manicho per l'icona del disco rigido.


Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:

Doodle un'immagine nella scatola con il mouse e premi il pulsante Salva. Aggiorna questa pagina nel browser e fai clic su Carica. Vedrai riapparire il tuo doodle, dopo essere stato caricato dal tuo disco rigido; l'animazione dello sfondo sarà anche sullo stesso fotogramma di prima!


Passaggio 1: Impostazione della nostra classe di documenti

Iniziamo creando un nuovo .fla. Salvalo e apri il pannello delle proprietà in Flash. Uso Flash CS5, ma questo tutorial dovrebbe funzionare con tutte le versioni di Flash CS. Nel pannello delle proprietà, premere modificare e assicurati che le tue impostazioni siano identiche all'immagine qui sotto:


Passaggio 2: Impostazione della classe di documenti

Ora che abbiamo impostato il nostro .fla, iniziamo la nostra Document Class. Per iniziare, apri il tuo editor di codice ActionScript preferito e salva un file .as chiamato "Main.as" nella stessa directory di .fla. Quindi vai nel pannello "Pubblica" di Flash. Imposta il campo di testo "Classe" su "Principale". Ora apri Main.as e copia e incolla il codice seguente per creare la nostra classe di documento principale.

 package import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Graphics; import flash.display.Shape; import flash.display.Sprite; import fl.controls.ComboBox import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Matrix; import flash.geom.Rectangle; importa flash.net.SharedObject; public class Main extends Sprite public function Main (): void 

Passaggio 3: il nostro oggetto principale

Ora creeremo la nostra Movie Clip principale. Conterrà 3 frame. Ognuno con una forma colorata. Disegna un rettangolo rosso, trasformalo in un Movie Clip con F8 e imposta il nome di MovieClip su "myObject". Assicurati che il punto di registrazione sia nell'angolo in alto a sinistra. Quindi crea due nuovi telai vuoti all'interno del MovieClip. Riempi uno con un triangolo verde e l'altro con un cerchio blu.

Il risultato finale dovrebbe apparire un po 'come questo:


Passaggio 4: utilizzo di un ComboBox

Ora useremo un ComboBox, che è fondamentalmente un elenco a discesa. Assicurati che anche l'istanza di myObject sullo stage sia etichettata come myObject. Quindi apri: Finestra> Componenti e trascina l'elemento "ComboBox" nella libreria. Se non si utilizza l'IDE Flash, è necessario fare clic con il pulsante destro del mouse> Esporta in SWC il ComboBox nella libreria.

Ora possiamo creare la variabile "myComboBox", posta sopra la funzione di costruzione.

 private var myComboBox: ComboBox = new ComboBox ()

Quindi aggiungi il seguente codice al tuo costruttore Main ():

 // Interrompe myObject MovieClip sul primo frame myObject.gotoAndStop (1) // Aggiunge i seguenti oggetti al ComboBox e assegna loro ogni etichetta univoca myComboBox.addItem (label: "Rectangle") myComboBox.addItem (label: "Circle") myComboBox.addItem (label: "Triangle") // Aggiunge il ComboBox addChild (myComboBox) // Lo sposta alle coordinate corrette myComboBox.move (280,150)

Ecco un'istantanea di come dovrebbe apparire la tua applicazione durante l'esecuzione:


Passaggio 5: modifica myObject montatura

Vogliamo che MovieClip cambi i fotogrammi quando selezioniamo un oggetto diverso!

Iniziamo aggiungendo EventListener al nostro costruttore - il listener di eventi Event.CHANGE - che verifica se l'oggetto selezionato nel ComboBox cambia. Questo è esattamente quando l'utente sceglie un nuovo oggetto ComboBox.

 myComboBox.addEventListener (Event.CHANGE, changeObjectFrame)

Successivamente creeremo la funzione changeObjectFrame (). Questa funzione controlla per vedere quale sia l'etichetta corrente sul ComboBox, che è il nome dell'oggetto selezionato dall'utente. Andrà quindi alla cornice corretta di myObject per visualizzare il tipo di oggetto selezionato.

 funzione privata changeObjectFrame (e: Event): void //myComboBox.selectedLabel è il nome dell'oggetto corrente selezionato che abbiamo definito in precedenza ... if (myComboBox.selectedLabel == "Rectangle") myObject.gotoAndStop (1) if ( myComboBox.selectedLabel == "Triangle") myObject.gotoAndStop (2) if (myComboBox.selectedLabel == "Circle") myObject.gotoAndStop (3)

Ora puoi andare avanti e compilare l'applicazione. Dovresti essere in grado di passare a un oggetto diverso selezionandolo dal menu a discesa.


Passaggio 6: aggiunta dell'animazione

Successivamente, aggiungiamo alcune animazioni al nostro programma. Vai nel myObject MovieClip sul primo fotogramma. Seleziona tutto il rettangolo rosso e premi F8 per trasformarlo in un Movie Clip. Assicurati che il punto di registrazione sia nell'angolo in alto a sinistra. Fallo con ogni forma all'interno del myObject Un filmato

Successivamente dovremo assegnare ad ogni Movie Clip un'animazione. Vai nella forma rettangolo MovieClip e fai clic destro> Crea interpolazione forma sul riempimento a forma di rosso.

Quindi seleziona il 60 ° fotogramma del MovieClip sulla timeline e premi F6 per creare un nuovo fotogramma chiave. Fallo anche con il 30 ° frame. Ora puoi andare al 30 ° fotogramma e cambiare il colore del riempimento della forma. Ho scelto di cambiare il colore in un arancio dorato. Ora se giochi l'animazione, il colore dovrebbe cambiare da Rosso> Arancione> Rosso.

Vai avanti e fallo per ogni forma nel myObject Un filmato. Ora puoi andare avanti e compilare l'applicazione; ogni forma selezionata cambierà i colori.

L'applicazione corrente dovrebbe comportarsi in questo modo:


Step 7: Doodle Canvas

Ora, permettiamo all'utente di disegnare un piccolo doodle personalizzato sulla MovieClip. Questo è simile al mio ultimo tutorial in cui abbiamo permesso all'utente di disegnare un design personalizzato sul lettore. Tuttavia, faremo un ulteriore passo avanti in questo tutorial, consentendo all'utente di SALVARE il suo messaggio. Ma andiamo salvare quello per dopo!

Iniziamo impostando un'istanza della classe Shape. Aggiungi questo codice sopra il tuo costruttore:

 private var myCanvas: Shape = new Shape ()

Ora aggiungeremo la variabile myCanvas allo stage ... Aggiungi questo codice alla fine del nostro costruttore.

 addChild (MyCanvas))

Passaggio 8: Doodles

Lo faremo molto velocemente. Se vuoi ulteriori spiegazioni su come usare la classe Shape per disegnare, controlla il mio altro tutorial.

Inizia creando una variabile isDown del mouse ...

 // Controlla se il mouse è inattivo private var mouseIsDown: Boolean = false

Ora vai avanti e aggiungi i seguenti ascoltatori di eventi:

 stage.addEventListener (MouseEvent.MOUSE_MOVE, drawDoodle) stage.addEventListener (MouseEvent.MOUSE_DOWN, mouseDown) stage.addEventListener (MouseEvent.MOUSE_UP, mouseUp)

E qui ci sono le 3 funzioni che sono allegate agli EventListeners:

 funzione privata mouseUp (e: MouseEvent): void mouseIsDown = false funzione privata mouseDown (e: MouseEvent): void mouseIsDown = true // Sposta il puntatore del mouse sul mouse myCanvas.graphics.moveTo (myCanvas.mouseX, myCanvas.mouseY) ;  private function drawDoodle (e: MouseEvent): void // Se si fa clic con il mouse if (mouseIsDown) // Imposta le impostazioni di disegno right myCanvas.graphics.lineStyle (5, 0, 1) // Disegna la linea doodle myCanvas. graphics.lineTo (myCanvas.mouseX, myCanvas.mouseY); 

Ora puoi testare il programma e dovrebbe andare bene. Tuttavia, non abbiamo ancora limitato lo spazio di disegno della nostra tela, quindi i disegni all'esterno dei limiti myObject continuano a essere visualizzati. Nel prossimo passo, risolveremo tutto questo!


Passaggio 9: Mascheratura

Nel mio tutorial precedente, il processo di mascheramento era molto semplice perché ogni oggetto mascherato rimaneva lo stesso in tutte le applicazioni. Questa volta, abbiamo bisogno di una maschera che si adatta a ogni Movie Clip.

Andiamo avanti e fare clic destro> Copia il nostro myObject sul palco. Ora abbiamo bisogno di fare clic destro> Incolla in Place l'oggetto in modo che sia esattamente dove il nostro myObject era. Ora cambia il nome dell'istanza in "myObjectAsMask." Passa alla classe principale e aggiungi le seguenti linee al costruttore:

 // Questo dovrebbe essere auto-esplicativo! myCanvas.mask = myObjectAsMask myObjectAsMask.gotoAndStop (1)

Finora, la maschera dovrebbe funzionare solo per il primo oggetto. Abbiamo bisogno di regolare la funzione changeObjectFrame per cambiare la nostra maschera per soddisfare la nuova forma di myObject. Aggiungi il codice evidenziato alla funzione changeObjectFrame:

 funzione privata changeObjectFrame (e: Event): void if (myComboBox.selectedLabel == "Rectangle") myObject.gotoAndStop (1) if (myComboBox.selectedLabel == "Triangle") myObject.gotoAndStop (2) if (myComboBox.selectedLabel == "Circle") myObject.gotoAndStop (3) // Clears doodle myCanvas.graphics.clear () // Syncs myObject e myObjectAsMask frames myObjectAsMask.gotoAndStop (myObject.currentFrame)

Passaggio 10: il pulsante Salva

Prossimo passo: aggiungeremo un pulsante di salvataggio alla nostra applicazione. Successivamente, salverà tutti i dati di myObject in un oggetto SharedObject. Crea un nuovo pulsante e disegnalo come preferisci. Ho incluso il mio pulsante ma ti mostra come disegnarne uno non è importante.

Trascina un'istanza del pulsante sullo stage e assegnagli il nome di istanza di "saveStuff". Quindi aggiungi il seguente listener di eventi al costruttore:

 saveStuff.addEventListener (MouseEvent.CLICK, saveObjectData)

Successivamente, aggiungi questa funzione vuota che useremo per aggiungere il nostro codice che salva l'oggetto.

 funzione privata saveObjectData (e: MouseEvent): void 

Passaggio 11: creazione e accesso a un nuovo SharedObject

Per iniziare a utilizzare la classe SharedObject, sarà necessario creare una nuova istanza della classe SharedObject. Se non hai mai usato la classe SharedObject in precedenza, sarebbe un buon momento per dare un'occhiata a questo tutorial su Lavorare con SharedObjects per avere un'idea di base su come funzionano. Utilizzare questo codice per creare un oggetto SharedObject:

 private var mySaveData: SharedObject = SharedObject.getLocal ("saveData")

Vai all'interno della funzione saveObjectData e aggiungi il seguente codice per iniziare la nostra operazione di salvataggio:

 // Crea un nuovo array all'interno del programma var myDataArrayInProgram: Array = new Array () // Aggiunge alcuni dati casuali al nostro array myDataArrayInProgram.push ("WhateverDataYouWant") // Crea una variabile all'interno di SharedObject // e imposta il suo valore su il valore del nostro // locale array mySaveData.data.myDataArray = myDataArrayInProgram // "Flush" i dati da salvare nel // computer (sebbene il nome suggerisca altrimenti, // questo in realtà memorizza i dati!) mySaveData.flush ()

Se vuoi verificare se questo codice è efficace, aggiungi questo snippet di codice alla fine della tua funzione:

 trace (mySaveData.data.myDataArray)

Step 12: Salvataggio dei nostri dati Movie Clip principali

Finora, tutto va bene. Siamo riusciti a creare un oggetto SharedObject e abbiamo memorizzato con successo alcuni byte di dati al suo interno. Il prossimo passo è iniziare a preparare il nostro programma per la ricostruzione del nostro MovieClip. In questo passaggio, aggiungeremo tutti i dati necessari al nostro SharedObject per la nostra applicazione per ricostruire il MovieClip da zero.

Per fare ciò, dovremo trasferire tutti i nostri dati nell'array myDataArrayInProgram in modo che sia collegato al nostro SharedObject. Ho modificato la funzione saveObjectData per fare tutto questo. Puoi vederlo qui sotto:

 Funzione privata saveObjectData (e: MouseEvent): void var myDataArrayInProgram: Array = new Array () // Aggiunge dell'oggetto X posizione myDataArrayInProgram.push (myObject.x) // Aggiunge dell'oggetto Y posizione myDataArrayInProgram.push (myObject.y) // Aggiunge currentFrame dell'oggetto // (l'oggetto corrente prescelto) myDataArrayInProgram.push (myObject.currentFrame) // aggiunge il fotogramma corrente dell'animazione myDataArrayInProgram.push del // dell'oggetto corrente (myObject.getChildAt (0) .currentFrame) mySaveData. data.myDataArray = myDataArrayInProgram mySaveData.flush () trace (mySaveData.data.myDataArray)

IMPORTANTE: getChildAt () accede ai figli dell'oggetto in base al loro indice. Quando c'è un solo oggetto in un Movie Clip, puoi essere sicuro getChildAt (0) ti porterà ad esso!

MA ANCORA PIÙ IMPORTANTE: Non preoccuparti se ricevi il seguente errore:

1119: accesso alla proprietà eventualmente non definita currentFrame tramite un riferimento con tipo statico flash.display: DisplayObject.

In tal caso, probabilmente hai abilitato la modalità rigorosa nelle impostazioni del flash. Il problema è che getChildAt () restituisce un DisplayObject e, a flash, che potrebbe essere un Bitmap, Sprite, MovieClip, ecc. Il problema con DisplayObject.currentFrame è che solo la classe MovieClip ha la proprietà currentFrame, perché nessuna altra classe ha alcuna animazione.

Per risolvere questo problema, vai su: File> Impostazioni pubblicazione> Impostazioni Actionscript e deseleziona "Errori: modalità rigorosa"

Editor: In alternativa, potresti lanciare l'oggetto restituito da getChildAt () come MovieClip, in questo modo:
 myDataArrayInProgram.push ((myObject.getChildAt (0) as MovieClip) .currentFrame)

Questo dice a Flash, "tratta questo oggetto come un Un filmato".


Passaggio 13: creazione di un pulsante di caricamento

Non siamo ancora nella fase in cui possiamo utilizzare i nostri dati di salvataggio, ma è comunque opportuno creare l'opzione UI per caricare SharedObject in anticipo. Proprio come il pulsante Salva, puoi progettare questo pulsante come se lo desideri; Non ho intenzione di guidarti a disegnarlo.

Crea un nuovo pulsante e trascina un'istanza sul palco. Quindi imposta il nome dell'istanza su "loadStuff".

E ora basta aggiungere il seguente listener di eventi:

 loadStuff.addEventListener (MouseEvent.CLICK, loadObjectData)

E creare la funzione loadObjectData in questo modo:

 funzione privata loadObjectData (e: MouseEvent): void 

Passaggio 14: pulsante Cancella tutto

Ora aggiungiamo un nuovo pulsante alla nostra interfaccia utente. Questo pulsante elimina tutto nel nostro SharedObject e cancella anche il doodle attuale su myCanvas.

Proprio come gli altri pulsanti, sceglierò la mia grafica; puoi scegliere il tuo o usare il mio.

Questa volta puoi impostare il nome dell'istanza del pulsante su "clearStuff".

Ora aggiungi questo Listener di eventi:

 clearStuff.addEventListener (MouseEvent.CLICK, clearObjectData)

E creare la funzione clearObjectData in questo modo:

 funzione privata clearObjectData (e: MouseEvent): void // Cancella SharedObject mySaveData.clear () // Cancella grafica myCanvas myCanvas.graphics.clear ()

Passaggio 15: Snapshot di BitmapData

Ora stai cominciando a chiedere: "Perché non posso salvare il doodle dell'utente come qualsiasi altra proprietà?" Sfortunatamente, Flash non ti consente di salvare direttamente MovieClip, Bitmap o anche forme all'interno di un oggetto SharedObject, ma puoi farlo salvando il pixel per valore del pixel dell'immagine.

Devi chiedertelo: "Ma lo scarabocchio non è una bitmap, è un'immagine vettoriale disegnata dall'utente contenuta in forma ?!" Esatto, ma possiamo convertirlo in dati basati su Bitmap acquisendone uno snapshot con la classe BitmapData!

Vai avanti e crea la seguente variabile sopra il costruttore della nostra applicazione principale:

 private var bitmapDataSnapshot: BitmapData

Questa variabile sarà la "fotocamera" che cattura un'istantanea dello scarabocchio.

Ora aggiungi le seguenti linee evidenziate alla funzione saveObjectData nella posizione mostrata di seguito:

 funzione privata saveObjectData (e: MouseEvent): void var myDataArrayInProgram: Array = new Array () myDataArrayInProgram.push (myObject.x) myDataArrayInProgram.push (myObject.currentFrame) myDataArrayInProgram.push (myObject.getChildAt (0) .currentFrame) / / Crea una nuova istanza della classe BitmapData, // rende le dimensioni dello stage, abilita la trasparenza, // e imposta il riempimento su un bitmap bianco trasparenteDataSnapshot = new BitmapData (640, 480, true, 0) // Indica al camera per scattare una foto // di myCanvas, salta i prossimi 3 parametri, // e dice all'area dell'istantanea di includere solo // le cose coperte da myObject MovieClip bitmapDataSnapshot.draw (myCanvas, null, null, null, new Rectangle ( 250, 30, 150, 100)) mySaveData.data.myDataArray = myDataArrayInProgram mySaveData.flush () trace (mySaveData.data.myDataArray)

Passaggio 16: salvataggio di BitmapData in un oggetto condiviso

Completiamo il processo di salvataggio del nostro programma. Ora che abbiamo creato un'istanza BitmapData con tutti i dati myCanvas, è necessario archiviarla in un ByteArray per essere inviata al nostro SharedObject. Per fare ciò, possiamo usare una funzione molto utile all'interno della classe BitmapData. Il suo nome è getPixels ().

getPixels () restituisce un ByteArray di tutti i dati pixel di un BitmapData. A differenza della classe BitmapData, ByteArrays può essere memorizzati all'interno di SharedObjects in modo che siano lo strumento giusto per salvare il nostro doodle.

Tutto quello che devi fare è aggiungere questa riga di codice nella tua funzione saveObjectData subito dopo aver terminato di eseguire il tuo lavoro su BitmapData:

 // Spinge il valore // ByteArray restituito della funzione getPixels () // in myDataArrayInProgram // getPixels () richiede un rettangolo che // mostri quale parte dei pixel dell'oggetto // vogliamo effettivamente! // NOTA: il rettangolo corrente è solo // un'approssimazione di dove dovrebbe apparire // il doodle! mySaveData.data.myDataArray.push (bitmapDataSnapshot.getPixels (new Rectangle (250, 30, 150, 100)))

Sull'ultimo passo. Una volta salvati i dati, è necessario che l'utente aggiorni la pagina, per dimostrare che il proprio doodle è stato salvato sul proprio disco rigido e non solo nella memoria temporanea. Disegna una scatola nera attorno al palco e aggiungi del testo che chiede al giocatore di rinfrescare. Quindi selezionare l'intero oggetto e premere F8. Assicurati di selezionare la casella "Esporta per Actionscript" e imposta "Class" su "refreshScreen". Ora puoi eliminare l'oggetto sullo stage ...

Di seguito è riportato il refreshScreen che ho disegnato:

Ora aggiungi questo codice nella parte inferiore della funzione saveObjectData:

 addChild (new refreshScreen ())

La tua funzione saveObjectData finita dovrebbe assomigliare a questa:

 funzione privata saveObjectData (e: MouseEvent): void var myDataArrayInProgram: Array = new Array () myDataArrayInProgram.push (myObject.x) myDataArrayInProgram.push (myObject.currentFrame) myDataArrayInProgram.push (myObject.getChildAt (0) .currentFrame) bitmapDataSnapshot = new BitmapData (640, 480, true, 0) bitmapDataSnapshot.draw (myCanvas, null, null, null, new Rectangle (250, 30, 150, 100)) myDataArrayInProgram.push (bitmapDataSnapshot.getPixels (new Rectangle (250, 30 , 150, 100))) mySaveData.data.myDataArray = myDataArrayInProgram mySaveData.flush () trace (mySaveData.data.myDataArray) addChild (new refreshScreen ())

Passaggio 17: Ricostruzione del nostro doodle

È tempo di ricostruire il nostro intero Doodle dal ByteArray che abbiamo salvato in precedenza!

Devi pensare: "Che diamine faccio con un ByteArray, è solo un mucchio di mumbo-jumbo ingarbugliato!" E hai ragione, lo è! Per fortuna, Adobe ci ha anche dato una grande funzione chiamata setPixels () che tu dai lo stesso Rectangle e ByteArray, per ricreare lo stesso BitmapData che avevi!

Prima di ricostruire l'intero MovieClip, dovremmo andare avanti ed eseguire un test per vedere se è possibile ricostruire lo stesso BitmapData. Modifica il tuo loadObjectData funzione in modo che assomigli a questo:

 funzione privata loadObjectData (e: MouseEvent): void // Crea un BitmapData e rende // la dimensione dello stage e // applica tutte le vecchie impostazioni var loadBitmapData: BitmapData = new BitmapData (640, 480, true, 1) // Imposta i pixel di loadBitmap // usando il nostro vecchio rettangolo e // accedendo al nostro SaveData ByteArray // (quarto elemento in myDataArray (myDataArray [3])) loadBitmapData.setPixels (new Rectangle (250, 30, 150 , 100), mySaveData.data.myDataArray [3]) // Crea una nuova Bitmap e gli dice di // caricare la sua immagine da loadBitmapData var display: Bitmap = new Bitmap (loadBitmapData) // Sposta la maschera dell'oggetto // playhead a il frame corretto myObjectAsMask.gotoAndStop (mySaveData.data.myDataArray [2]) // Maschera l'immagine con la maschera display.mask = myObjectAsMask // Aggiunge la Bitmap allo stage addChild (display)

Passaggio 18: Ricostruzione completa di myObject

Ora è il momento di mettere tutto insieme! Innanzitutto, fai clic con il tasto destro del mouse su myObject (in libreria)> Proprietà. Ora seleziona la casella "Esporta per Actionscript" e imposta "Class" su "myObjectType". Confronta le tue proprietà con quelle nell'immagine:

Se è lo stesso, allora siamo pronti per partire! Aggiungi questo sopra il nostro costruttore:

 private var myNewObject: myObjectType;

E aggiungi tutti di questo in cima a loadObjectData ().

 // Crea una nuova istanza di myObjectType (myObject) myNewObject = new myObjectType () // Imposta X alla vecchia posizione myNewObject.x = mySaveData.data.myDataArray [0] // Imposta Y al vecchio postazione di myNewObject.y = mySaveData.data.myDataArray [1] // Seleziona il vecchio myNewObject.gotoAndStop oggetto (mySaveData.data.myDataArray [2]) // sposta la testina al fotogramma animazione destra myNewObject.getChildAt (0) .gotoAndStop (mySaveData.data .myDataArray [3]) // aggiunge l'oggetto addChild fase (myNewObject) // Rimuove comboBox evento ascoltatore myComboBox.removeEventListener (Event.CHANGE, changeObjectFrame) // rimuove gli ascoltatori evento "DoStuff" per i pulsanti saveStuff.removeEventListener (MouseEvent .CLICK, saveObjectData) loadStuff.removeEventListener (MouseEvent.CLICK, loadObjectData) clearStuff.removeEventListener (MouseEvent.CLICK, clearObjectData) // Rimuove i listener degli eventi di disegno stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawDoodle) stage.removeEventListener (MouseEvent.MOUSE_DOWN, mouseDown stag e.removeEventListener (MouseEvent.MOUSE_UP, mouseUp) // rimuove non necessari UI removeChild (myObject) removeChild (saveStuff) removeChild (loadStuff) removeChild (clearStuff) removeChild (myComboBox) removeChild (MyCanvas)

Prova l'app, dovrebbe funzionare perfettamente.

Congratulazioni! Hai ricostruito ufficialmente un Movie Clip utilizzando la classe SharedObject!


Passaggio 19: aggiunta di un pulsante di animazione di riproduzione

Se l'applicazione sopra funziona, dovrebbe presentare un'immagine in pausa di dove hai salvato myObject. Per riprodurre nuovamente l'animazione, creiamo un pulsante "Riproduci". Ecco quello che ho scelto:

Trascinalo appena sotto myObject sullo stage e imposta il nome dell'istanza su "playAnimation".

Ora aggiungi questo in fondo al nostro costruttore:

 // Nasconde il pulsante playAnimation.visible = false // Aggiunge pulsanti Event Listener playAnimation.addEventListener (MouseEvent.CLICK, playObjectAnimation)

Quindi mettilo in fondo a loadObjectData ().

 // Mostra il pulsante playAnimation.visible = true

Infine, aggiungi questa funzione al tuo programma:

 funzione privata playObjectAnimation (e: MouseEvent): void myNewObject.play ()

Step 20: Fonte finale

Ecco il nostro codice sorgente dell'applicazione finale. Se c'è qualche differenza tra il tuo codice e questo, torna indietro e vedi dove hai preso un percorso diverso.

 package import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Graphics; import flash.display.Shape; import flash.display.Sprite; import fl.controls.ComboBox import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Matrix; import flash.geom.Rectangle; importa flash.net.SharedObject; public class Main extends Sprite private var myComboBox: ComboBox = new ComboBox () private var myCanvas: Shape = new Shape () private var mouseIsDown: Boolean = false private var mySaveData: SharedObject = SharedObject.getLocal ("saveData") private var bitmapDataSnapshot : BitmapData private var myNewObject: myObjectType public function Main (): void myObject.gotoAndStop (1) myComboBox.addItem (label: "Rectangle") myComboBox.addItem (label: "Triangle") myComboBox.addItem ( label: "Circle") addChild (myComboBox) myComboBox.move (280, 150) myComboBox.addEventListener (Event.CHANGE, changeObjectFrame) addChild (myCanvas) stage.addEventListener (MouseEvent.MOUSE_MOVE, drawDoodle) stage.addEventListener (MouseEvent.MOUSE_DOWN , mouseDown) stage.addEventListener (MouseEvent.MOUSE_UP, mouseUp) myCanvas.mask = myObjectAsMask myObjectAsMask.gotoAndStop (1) saveStuff.addEventListener (MouseEvent.CLICK, saveObjectData) loadStuff.addEventListener (MouseEvent.CLICK, loadObjectData) clearStuff.addEventListener (Mous eEvent.CLICK, clearObjectData) playAnimation.visible = false playAnimation.addEventListener (MouseEvent.CLICK, playObjectAnimation) funzione privata clearObjectData (e: MouseEvent): void mySaveData.clear () myCanvas.graphics.clear () funzione privata loadObjectData ( e: MouseEvent): void myNewObject = new myObjectType () myNewObject.x = mySaveData.data.myDataArray [0] myNewObject.y = mySaveData.data.myDataArray [1] myNewObject.gotoAndStop (mySaveData.data.myDataArray [2]) myNewObject.getChildAt (0) .gotoAndStop (mySaveData.data.myDataArray [3]) addChild (myNewObject) myComboBox.removeEventListener (Event.CHANGE, changeObjectFrame) saveStuff.removeEventListener (MouseEvent.CLICK, saveObjectData) loadStuff.removeEventListener (MouseEvent.CLICK, loadObjectData) clearStuff.removeEventListener (MouseEvent.CLICK, clearObjectData) stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawDoodle) stage.removeEventListener (MouseEvent.MOUSE_DOWN, mouseDown) stage.removeEventListener (MouseEvent.MOUSE_UP, mouseUp) remo veChild (myObject) removeChild (saveStuff) removeChild (loadStuff) removeChild (clearStuff) removeChild (myComboBox) removeChild (myCanvas) var loadBitmapData: BitmapData = new BitmapData (640, 480, true, 1) loadBitmapData.setPixels (new Rectangle (250, 30) , 150, 100), mySaveData.data.myDataArray [4]) var display: Bitmap = new Bitmap (loadBitmapData) myObjectAsMask.gotoAndStop (mySaveData.data.myDataArray [2]) display.mask = myObjectAsMask addChild (display) playAnimation.visible = true funzione privata playObjectAnimation (e: MouseEvent): void myNewObject.getChildAt (0) .play () playAnimation.visible = false funzione privata saveObjectData (e: MouseEvent): void var myDataArrayInProgram: Array = new Array () myDataArrayInProgram.push (myObject.x) myDataArrayInProgram.push (myObject.y) myDataArrayInProgram.push (myObject.currentFrame) myDataArrayInProgram.push (myObject.getChildAt (0) .currentFrame) bitmapDataSnapshot = new BitmapData (640, 480, true, 0) bitmapDataSnapshot.draw (myCanvas, null, null, null, new Recta ngle (250, 30, 150, 100)) myDataArrayInProgram.push (bitmapDataSnapshot.getPixels (new Rectangle (250, 30, 150, 100))) mySaveData.data.myDataArray = myDataArrayInProgram mySaveData.flush () trace (mySaveData.data. myDataArray) funzione privata mouseUp (e: MouseEvent): void mouseIsDown = false funzione privata mouseDown (e: MouseEvent): void mouseIsDown = true myCanvas.graphics.moveTo (myCanvas.mouseX, myCanvas.mouseY);  private function drawDoodle (e: MouseEvent): void if (mouseIsDown) myCanvas.graphics.lineStyle (5, 0, 1) myCanvas.graphics.lineTo (myCanvas.mouseX, myCanvas.mouseY);  funzione privata changeObjectFrame (e: Event): void if (myComboBox.selectedLabel == "Rectangle") myObject.gotoAndStop (1) if (myComboBox.selectedLabel == "Triangle") myObject.gotoAndStop (2)  if (myComboBox.selectedLabel == "Circle") myObject.gotoAndStop (3) myCanvas.graphics.clear () myObjectAsMask.gotoAndStop (myObject.currentFrame)

Conclusione

Come puoi vedere, con un po 'di modifiche, è assolutamente possibile salvare tutti i dati di MovieClip in SharedObjects per il caricamento successivo. Ciò significa che se stai scrivendo un gioco, puoi creare facilmente degli stati di salvataggio invece di avere piccoli checkpoint ...

Buona fortuna per l'utilizzo di questo metodo di salvataggio dei dati sui tuoi giochi e applicazioni, per contribuire a rendere i tuoi programmi migliori che mai!

Grazie per aver letto!