MovieClip-Rekonstruktion mit der SharedObject-Klasse

In diesem Lernprogramm erfahren Sie, wie Sie die SharedObject-Klasse implementieren. Wir speichern alle wesentlichen Daten eines MovieClips lokal und laden ihn beim nächsten Öffnen der Anwendung erneut!

Wir haben diesen großartigen Autor dank FlashGameLicense.com, dem Ort zum Kaufen und Verkaufen von Flash-Spielen, gefunden.

Vielen Dank an Manicho für das Festplattensymbol.


Endergebnisvorschau

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:

Kritzeln Sie mit der Maus ein Bild in das Feld und drücken Sie die Schaltfläche Speichern. Aktualisieren Sie diese Seite in Ihrem Browser und klicken Sie auf Laden. Sie werden sehen, wie Ihr Gekritzel wieder von Ihrer Festplatte geladen wird. Die Hintergrundanimation befindet sich sogar in demselben Frame wie zuvor!


Schritt 1: Einrichten unserer Dokumentenklasse

Beginnen wir mit dem Erstellen einer neuen .fla. Speichern Sie es und öffnen Sie das Eigenschaftenfenster in Flash. Ich verwende Flash CS5, aber dieses Tutorial sollte mit jeder Flash CS-Version funktionieren. Drücken Sie im Eigenschaftenfenster auf Bearbeiten und stellen Sie sicher, dass Ihre Einstellungen mit dem folgenden Bild identisch sind:


Schritt 2: Einrichten der Dokumentenklasse

Nun, da wir unsere .fla eingerichtet haben, beginnen wir mit unserer Document Class. Öffnen Sie zunächst Ihren bevorzugten ActionScript-Code-Editor, und speichern Sie eine .as-Datei mit dem Namen "Main.as" im selben Verzeichnis wie Ihre .fla. Als nächstes gehen Sie in das "Veröffentlichen" -Feld von Flash. Setzen Sie das Textfeld "Class" auf "Main". Öffnen Sie nun Main.as und kopieren Sie den folgenden Code, um unsere Hauptdokumentklasse zu erstellen.

 Paket 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; import flash.net.SharedObject; public class Main erweitert Sprite public function Main (): void 

Schritt 3: Unser Hauptobjekt

Jetzt erstellen wir unseren Haupt-MovieClip. Es wird 3 Frames enthalten. Jeder mit einer farbigen Form. Zeichnen Sie ein rotes Rechteck, verwandeln Sie es mit F8 in einen MovieClip und setzen Sie den Namen des MovieClips auf "myObject". Stellen Sie sicher, dass sich der Registrierungspunkt in der oberen linken Ecke befindet. Erstellen Sie dann zwei neue leere Frames im MovieClip. Füllen Sie eines mit einem grünen Dreieck und das andere mit einem blauen Kreis.

Das Endergebnis sollte ungefähr so ​​aussehen:


Schritt 4: Verwenden einer ComboBox

Jetzt verwenden wir eine ComboBox, die im Grunde eine Dropdown-Liste ist. Stellen Sie sicher, dass die Instanz von myObject auf der Bühne auch mit myObject bezeichnet wird. Öffnen Sie dann: Fenster> Komponenten und ziehen Sie den Eintrag "ComboBox" in die Bibliothek. Wenn Sie die Flash-IDE nicht verwenden, müssen Sie die ComboBox in der Bibliothek mit Rechtsklick> In SWC exportieren ausführen.

Jetzt können wir die Variable "myComboBox" erstellen, die sich oberhalb der Konstruktorfunktion befindet.

 private var myComboBox: ComboBox = neue ComboBox ()

Fügen Sie dem Main () -Konstruktor den folgenden Code hinzu:

 // Stoppt den myObject MovieClip im ersten Frame. MyObject.gotoAndStop (1) // Fügt der ComboBox die folgenden Objekte hinzu und gibt ihnen jeweils eindeutige Labels: myComboBox.addItem (label: "Rectangle") myComboBox.addItem (label: "Circle") myComboBox.addItem (label: "Triangle") // fügt die ComboBox addChild (myComboBox) hinzu // Verschiebt sie zu den korrekten Koordinaten myComboBox.move (280,150)

Hier ist eine Momentaufnahme, wie Ihre Anwendung beim Ausführen aussehen sollte:


Schritt 5: Ändern meinObjekt Frames

Wir möchten, dass unser MovieClip Frames ändert, wenn wir ein anderes Element auswählen!

Beginnen wir mit dem Hinzufügen eines EventListener zu unserem Konstruktor - dem Event.CHANGE-Ereignis-Listener -, der prüft, ob sich das ausgewählte Objekt in der ComboBox ändert. Genau dann wählt der Benutzer ein neues ComboBox-Element.

 myComboBox.addEventListener (Event.CHANGE, changeObjectFrame)

Als Nächstes erstellen wir die changeObjectFrame () - Funktion. Diese Funktion prüft, wie das aktuelle Label in der ComboBox lautet. Dies ist der Name des Objekts, das der Benutzer ausgewählt hat. Dann geht es zum richtigen Frame von meinObjekt um den ausgewählten Objekttyp anzuzeigen.

 private Funktion changeObjectFrame (e: Event): void //myComboBox.selectedLabel ist der Name des aktuell ausgewählten Objekts, das wir zuvor definiert haben. if (myComboBox.selectedLabel == "Rectangle") myObject.gotoAndStop (1) if ( myComboBox.selectedLabel == "Dreieck") myObject.gotoAndStop (2) if (myComboBox.selectedLabel == "Circle") myObject.gotoAndStop (3)

Sie können jetzt die Anwendung kompilieren. Sie sollten zu einem anderen Objekt wechseln können, indem Sie es aus dem Dropdown-Menü auswählen.


Schritt 6: Animation hinzufügen

Als Nächstes fügen wir unserem Programm eine Animation hinzu. Geh in die meinObjekt MovieClip beim ersten Bild. Markieren Sie das gesamte rote Rechteck und drücken Sie F8, um daraus einen MovieClip zu machen. Stellen Sie sicher, dass sich der Registrierungspunkt in der oberen linken Ecke befindet. Tun Sie dies mit jeder Form im Inneren meinObjekt Filmausschnitt

Als Nächstes müssen wir jedem MovieClip eine Animation geben. Gehen Sie in die Rechteckform MovieClip und klicken Sie mit der rechten Maustaste auf die rote Formfüllung.

Wählen Sie dann den 60. Frame des MovieClips in der Timeline aus und drücken Sie F6, um einen neuen Keyframe zu erstellen. Tun Sie dies auch mit dem 30. Frame. Jetzt können Sie einfach zum 30. Bild wechseln und die Farbe der Formfüllung ändern. Ich habe mich entschieden, die Farbe in ein goldenes Orange zu ändern. Wenn Sie jetzt die Animation abspielen, sollte sich die Farbe von Rot> Orange> Rot ändern.

Machen Sie dies für jede Form in der meinObjekt Filmausschnitt. Jetzt können Sie die Anwendung kompilieren. Jede ausgewählte Form ändert ihre Farbe.

Die aktuelle Anwendung sollte folgendermaßen aussehen:


Schritt 7: Doodle Canvas

Jetzt können wir dem Benutzer erlauben, ein kleines benutzerdefiniertes Gekritzel auf dem MovieClip zu zeichnen. Dies ist ähnlich wie in meinem letzten Tutorial, in dem wir dem Benutzer gestatteten, ein benutzerdefiniertes Design auf dem Player zu zeichnen. Wir werden jedoch in diesem Tutorial noch einen Schritt weiter gehen, indem wir dem Benutzer das Speichern seiner Nachricht ermöglichen. Aber lass uns sparen das für später!

Beginnen wir mit dem Einrichten einer Instanz der Shape-Klasse. Fügen Sie diesen Code über Ihrem Konstruktor hinzu:

 private var myCanvas: Shape = neue Shape ()

Als Nächstes fügen wir der Bühne die myCanvas-Variable hinzu. Fügen Sie diesen Code am unteren Rand unseres Konstruktors hinzu.

 addChild (myCanvas))

Schritt 8: Kritzeleien

Wir machen das sehr schnell. Wenn Sie weitere Informationen zur Verwendung der Shape-Klasse zum Zeichnen benötigen, lesen Sie mein anderes Lernprogramm.

Beginnen Sie mit der Erstellung einer mouseIsDown-Variablen…

 // Überprüft, ob sich die Maus im privaten Bereich befindet. Var mouseIsDown: Boolean = false

Nun fügen Sie die folgenden Ereignis-Listener hinzu:

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

Und hier sind die 3 Funktionen, die an die EventListener angeschlossen sind:

 private Funktion mouseUp (e: MouseEvent): void mouseIsDown = false private Funktion mouseDown (e: MouseEvent): void mouseIsDown = true // Bewegt den Mauszeiger zur Maus myCanvas.graphics.moveTo (myCanvas.mouseX, myCanvas.mouseY) ;  private Funktion drawDoodle (e: MouseEvent): void // Wenn die Maus geklickt wird, wenn (mouseIsDown) // Zeicheneinstellungen richtig gemacht werden myCanvas.graphics.lineStyle (5, 0, 1) // Zeichnet die Gekritzellinie myCanvas. graphics.lineTo (myCanvas.mouseX, myCanvas.mouseY); 

Jetzt können Sie das Programm testen und es sollte gut zeichnen. Wir haben den Zeichenbereich unserer Leinwand jedoch immer noch nicht eingeschränkt, sodass Zeichnungen außerhalb der myObject-Grenzen weiterhin angezeigt werden. Im nächsten Schritt werden wir all das lösen!


Schritt 9: Maskieren

In meinem vorherigen Tutorial war der Maskierungsprozess sehr einfach, da jedes maskierte Objekt in der gesamten Anwendung gleich blieb. Diesmal benötigen wir eine Maske, die sich an jeden MovieClip anpasst.

Machen wir weiter und klicken Sie mit der rechten Maustaste meinObjekt auf der Bühne. Jetzt müssen wir das Objekt mit Rechtsklick> Einfügen einfügen, damit es genau dort ist, wo es ist meinObjekt war. Ändern Sie jetzt den Instanznamen in "myObjectAsMask". Wechseln Sie zur Hauptklasse und fügen Sie dem Konstruktor die folgenden Zeilen hinzu:

 // Das sollte alles selbsterklärend sein! myCanvas.mask = myObjectAsMask myObjectAsMask.gotoAndStop (1)

Bisher sollte die Maske nur für das erste Objekt funktionieren. Wir müssen die changeObjectFrame-Funktion anpassen, um unsere Maske an die neue Form von myObject anzupassen. Fügen Sie den markierten Code der changeObjectFrame-Funktion hinzu:

 private Funktion changeObjectFrame (e: Event): void if (myComboBox.selectedLabel == "Rectangle") myObject.gotoAndStop (1) if (myComboBox.selectedLabel == "Triangle") myObject.gotoAndStop (2) wenn (myComboBox.selectedLabel == "Circle") myObject.gotoAndStop (3) // Löscht doodle myCanvas.graphics.clear () // Synchronisiert meine Frames myObjectAsMask und myObjectAsMask.gotoAndStop (myObject.currentFrame)

Schritt 10: Die Schaltfläche Speichern

Als nächstes: Wir fügen unserer Anwendung eine Schaltfläche zum Speichern hinzu. Später werden dadurch alle Daten von myObject in einem SharedObject gespeichert. Erstellen Sie einen neuen Button und gestalten Sie ihn nach Belieben. Ich habe meinen eigenen Button beigelegt, aber es ist nicht wichtig, Ihnen zu zeigen, wie man einen zeichnet.

Ziehen Sie eine Instanz der Schaltfläche auf die Bühne und geben Sie den Instanznamen "saveStuff". Fügen Sie dem Konstruktor dann den folgenden Ereignis-Listener hinzu:

 saveStuff.addEventListener (MouseEvent.CLICK, saveObjectData)

Fügen Sie als Nächstes diese leere Funktion hinzu, mit der wir unseren Code hinzufügen, der das Objekt speichert.

 private Funktion saveObjectData (e: MouseEvent): void 

Schritt 11: Erstellen und Zugreifen auf ein neues SharedObject

Um die SharedObject-Klasse verwenden zu können, müssen Sie eine neue Instanz der SharedObject-Klasse erstellen. Wenn Sie die SharedObject-Klasse noch nie zuvor verwendet haben, sollten Sie sich dieses Tutorial zum Arbeiten mit SharedObjects ansehen, um eine Vorstellung davon zu bekommen, wie sie funktionieren. Verwenden Sie diesen Code, um ein SharedObject zu erstellen:

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

Gehen Sie in die saveObjectData-Funktion und fügen Sie den folgenden Code hinzu, um mit dem Speichern zu beginnen:

 // Erstellt ein neues Array innerhalb des Programms var myDataArrayInProgram: Array = new Array () // Fügt unserem Array myDataArrayInProgram.push ("WhateverDataYouWant") einige zufällige Daten hinzu // // Erstellt eine Variable innerhalb des SharedObject // und legt deren Wert fest der Wert unseres lokalen // Arrays mySaveData.data.myDataArray = myDataArrayInProgram // "Spült" die Daten, die auf dem // Computer gespeichert werden sollen (obwohl der Name andernfalls darauf hinweist, // dass die Daten tatsächlich gespeichert werden!) mySaveData.flush ()

Wenn Sie prüfen möchten, ob dieser Code wirksam ist, fügen Sie diesen Code-Ausschnitt am Ende Ihrer Funktion hinzu:

 trace (mySaveData.data.myDataArray)

Schritt 12: Speichern der wichtigsten MovieClip-Daten

Bisher ist alles gut. Wir haben es geschafft, ein SharedObject zu erstellen, und haben einige Datenbytes darin erfolgreich gespeichert. Im nächsten Schritt bereiten Sie unser Programm für die Rekonstruktion unseres MovieClips vor. In diesem Schritt fügen Sie unserem SharedObject alle erforderlichen Daten für unsere Anwendung hinzu, um den MovieClip von Grund auf zu rekonstruieren.

Dazu müssen wir alle unsere Daten in das Array myDataArrayInProgram verschieben, damit sie an unser SharedObject angefügt werden. Ich habe die saveObjectData-Funktion geändert, um all dies zu tun. Sie können es unten sehen:

 private Funktion saveObjectData (e: MouseEvent): void var myDataArrayInProgram: Array = new Array () // Fügt die X-Position des Objekts hinzu myDataArrayInProgram.push (myObject.x) // Fügt die Y-Position des Objekts myDataArrayInProgram.push (myObject.y) hinzu. // fügt den aktuellenFrame des Objekts hinzu // (das aktuell gewählte Objekt) myDataArrayInProgram.push (myObject.currentFrame) // Fügt den aktuellen Frame der // Animation des aktuellen Objekts myDataArrayInProgram.push (myObject.getChildAt (0) .currentFrame) mySaveData hinzu. data.myDataArray = myDataArrayInProgram mySaveData.flush () trace (mySaveData.data.myDataArray)

WICHTIG: getChildAt () greift auf die untergeordneten Objekte des Objekts basierend auf ihrem Index zu. Wenn sich in einem MovieClip nur ein Objekt befindet, können Sie sich darauf verlassen getChildAt (0) werde dich dazu bringen!

WICHTIGER: Machen Sie sich keine Sorgen, wenn Sie die folgende Fehlermeldung erhalten:

1119: Zugriff auf möglicherweise undefinierte Eigenschaft currentFrame über eine Referenz mit dem statischen Typ flash.display: DisplayObject.

In diesem Fall haben Sie möglicherweise den Strict-Modus in Ihren Flash-Einstellungen aktiviert. Das Problem ist, dass getChildAt () Gibt ein DisplayObject zurück, und zum Flashen können Bitmap, Sprite, MovieClip usw. verwendet werden. Das Problem mit DisplayObject.currentFrame ist, dass nur die MovieClip-Klasse über die Eigenschaft currentFrame verfügt, da keine andere Klasse Animationen enthält.

Um dieses Problem zu beheben, gehen Sie zu: Datei> Einstellungen für Veröffentlichungen> Actionscript-Einstellungen und deaktivieren Sie "Fehler: Strikter Modus".

Editor: Alternativ können Sie Besetzung das von getChildAt () als MovieClip zurückgegebene Objekt, wie folgt:
 myDataArrayInProgram.push ((myObject.getChildAt (0) als MovieClip) .currentFrame)

Dies teilt Flash mit, "behandeln Sie dieses Objekt wie ein Filmausschnitt".


Schritt 13: Erstellen einer Ladetaste

Wir sind noch nicht in dem Stadium, in dem wir unsere Sicherungsdaten verwenden können, aber es ist immer noch gut, die UI-Option zu erstellen, um das SharedObject vorzeitig zu laden. Genau wie die Schaltfläche "Speichern" können Sie diese Schaltfläche so gestalten, wie Sie möchten. Ich werde dich nicht durch das Zeichnen führen.

Erstellen Sie eine neue Schaltfläche und ziehen Sie eine Instanz auf die Bühne. Setzen Sie dann den Instanznamen auf "loadStuff"..

Fügen Sie nun den folgenden Event Listener hinzu:

 loadStuff.addEventListener (MouseEvent.CLICK, loadObjectData)

Und erstellen Sie die loadObjectData-Funktion wie folgt:

 private Funktion loadObjectData (e: MouseEvent): void 

Schritt 14: Alles löschen

Jetzt fügen wir unserer Benutzeroberfläche einen neuen Button hinzu. Diese Schaltfläche löscht alles in unserem SharedObject und löscht auch das aktuelle Doodle auf myCanvas.

Genau wie bei den anderen Schaltflächen wähle ich meine eigene Grafik. Sie können selbst wählen oder meins verwenden.

Diesmal können Sie den Instanznamen der Schaltfläche auf "clearStuff" setzen..

Fügen Sie nun diesen Event Listener hinzu:

 clearStuff.addEventListener (MouseEvent.CLICK, clearObjectData)

Und erstellen Sie die clearObjectData-Funktion wie folgt:

 private Funktion clearObjectData (e: MouseEvent): void // SharedObject löschen mySaveData.clear () // Löscht die myCanvas-Grafiken myCanvas.graphics.clear ()

Schritt 15: BitmapData-Snapshots

Jetzt beginnen Sie zu fragen: "Warum kann ich das Gekritzel des Benutzers nicht wie andere Eigenschaften speichern?" Leider können Sie MovieClips, Bitmaps oder sogar Shapes nicht direkt in einem SharedObject speichern. Sie können jedoch Pixel für Pixel des Bildes speichern.

Sie müssen sich fragen: "Aber das Doodle ist kein Bitmap, sondern ein von einem Benutzer gezeichnetes Vektorbild, das in der Form enthalten ist ?!" Das ist richtig, aber wir können es in Bitmap-basierte Daten konvertieren, indem wir mit der BitmapData-Klasse einen Schnappschuss davon machen!

Erstellen Sie die folgende Variable über dem Konstruktor unserer Hauptanwendung:

 private var bitmapDataSnapshot: BitmapData

Diese Variable wird die "Kamera" sein, die eine Momentaufnahme des Gekritzels macht.

Fügen Sie der saveObjectData-Funktion an der folgenden Stelle die folgenden hervorgehobenen Zeilen hinzu:

 private Funktion saveObjectData (e: MouseEvent): void var meinDataArrayInProgram: Array = new Array () myDataArrayInProgram.push (myObject.x) myData.ArrayInProgram.push (myObject.currentFrame) myDataArrayInProgram.push (myObject.currentFrame) / Erstellt eine neue Instanz der BitmapData-Klasse, // die Größe der Bühne, aktiviert die Transparenz, // und setzt die Füllung auf ein transparentes weißes BitmapDataSnapshot = new BitmapData (640, 480, true, 0) // Tells the Kamera, um einen Snapshot // von myCanvas aufzunehmen, überspringt die nächsten drei Parameter // und weist den Snapshot-Bereich an, // nur die Inhalte des myObject MovieClip-BitmapDataSnapshot.draw (myCanvas, null, null, null, neues Rechteck ( 250, 30, 150, 100)) mySaveData.data.myDataArray = myDataArrayInProgram mySaveData.flush () trace (mySaveData.data.myDataArray)

Schritt 16: Speichern von BitmapData in einem SharedObject

Lassen Sie uns den Speichervorgang unseres Programms abschließen. Nachdem wir nun eine BitmapData-Instanz mit all unseren myCanvas-Daten erstellt haben, müssen wir sie in einem ByteArray speichern, um sie in unser SharedObject zu senden. Dafür können wir eine sehr praktische Funktion innerhalb der BitmapData-Klasse verwenden. Sein Name ist getPixels ().

getPixels () Gibt ein ByteArray aller Pixeldaten einer BitmapData zurück. Im Gegensatz zur BitmapData-Klasse, ByteArrays können in SharedObjects gespeichert werden, so dass sie das richtige Werkzeug zum Speichern unseres Doodle sind.

Sie müssen nur diese Codezeile in Ihre saveObjectData-Funktion einfügen, nachdem Sie die BitmapData-Arbeit abgeschlossen haben:

 // Schiebt den Wert des zurückgegebenen // ByteArray der Funktion getPixels () // in meinDataArrayInProgram // für getPixels () ist ein Rechteck erforderlich, das // zeigt, welchen Teil der Pixel des Objekts // wir eigentlich wollen! // HINWEIS: Das aktuelle Rechteck // ist nur eine Annäherung davon, wo // das Gekritzel angezeigt werden soll! mySaveData.data.myDataArray.push (bitmapDataSnapshot.getPixels (neues Rechteck (250, 30, 150, 100)))

Zum letzten Schritt. Sobald die Daten gespeichert sind, muss der Benutzer die Seite aktualisieren, um zu beweisen, dass das Gekritzel auf seiner Festplatte gespeichert wurde und nicht nur im temporären Speicher gespeichert ist. Zeichnen Sie eine schwarze Box um die Bühne und fügen Sie etwas Text hinzu, der den Spieler zur Aktualisierung auffordert. Wählen Sie dann das gesamte Objekt aus und drücken Sie F8. Aktivieren Sie das Kontrollkästchen "Exportieren für Actionscript" und setzen Sie die "Klasse" auf "RefreshScreen". Sie können das Objekt jetzt auf der Bühne löschen…

Unten sehen Sie den RefreshScreen, den ich gezeichnet habe:

Fügen Sie diesen Code jetzt am Ende Ihrer saveObjectData-Funktion hinzu:

 addChild (new refreshScreen ())

Ihre fertige saveObjectData-Funktion sollte folgendermaßen aussehen:

 private Funktion saveObjectData (e: MouseAvent): void var meinDataArrayInProgram: Array = new Array () myDataArrayInProgram.push (myObjectAxray.x) myDataArayArrayInProgram.push (myObject.currentFrame) = new BitmapData (640, 480, true, 0) bitmapDataSnapshot.draw (myCanvas, null, null, null, neues Rechteck (250, 30, 150, 100)) myDataArrayInProgram.push (bitmapDataSnapshot.getPixels (250, 30) , 150, 100))) mySaveData.data.myDataArray = myDataArrayInProgram mySaveData.flush () trace (mySaveData.data.myDataArray) addChild (new refreshScreen ())

Schritt 17: Rekonstruktion unseres Gekritzels

Es ist an der Zeit, unser gesamtes Doodle aus dem zuvor gespeicherten ByteArray zu rekonstruieren!

Sie müssen denken: "Was zum Teufel mache ich mit einem ByteArray, es ist nur ein Haufen verstümmelten Hokuspokus!" Und du hast recht, es ist so! Zum Glück hat Adobe uns auch eine tolle Funktion genannt setPixels () Damit geben Sie dasselbe Rechteck und ByteArray wieder, um die gleichen BitmapData wiederherzustellen, die Sie bereits hatten!

Bevor wir unseren gesamten MovieClip rekonstruieren, sollten wir einen Test durchführen, um zu sehen, ob wir die BitmapData selbst rekonstruieren können. Ändern Sie Ihre loadObjectData Funktion, so sieht es so aus:

 private Funktion loadObjectData (e: MouseEvent): void // Erzeugt ein BitmapData und macht // die Größe der Bühne, und // wendet alle alten Einstellungen an. var loadBitmapData: BitmapData = new BitmapData (640, 480, true, 1) // Legt die Pixel von loadBitmap // unter Verwendung unseres alten Rechtecks ​​fest und // durch Zugriff auf unser SaveData-ByteArray // (viertes Element in myDataArray (myDataArray [3])) loadBitmapData.setPixels (neues Rechteck (250, 30, 150) , 100), mySaveData.data.myDataArray [3]) // Erzeugt eine neue Bitmap und fordert sie auf, // ihr Bild aus loadBitmapData zu laden. Var display: Bitmap = neue Bitmap (loadBitmapData) // Verschiebt die Objektmaske // in die Abspielposition der rechte Rahmen myObjectAsMask.gotoAndStop (mySaveData.data.myDataArray [2]) // Maskiert das Bild mit der Maske display.mask = myObjectAsMask // Fügt die Bitmap der Bühne addChild (Anzeige) hinzu

Schritt 18: myObject vollständig rekonstruieren

Jetzt ist es Zeit, dies alles zusammen zu stellen! Klicken Sie zuerst mit der rechten Maustaste auf meinObjekt (in der Bibliothek)> Eigenschaften. Aktivieren Sie nun das Kontrollkästchen "Exportieren für Actionscript" und setzen Sie die "Klasse" auf "myObjectType". Vergleichen Sie Ihre Eigenschaften mit denen im Bild:

Wenn alles gleich ist, dann sind wir bereit zu gehen! Fügen Sie dies über unserem Konstruktor hinzu:

 private var myNewObject: myObjectType;

Und füge hinzu alles davon an die Spitze von loadObjectData ().

 // Erstellt eine neue Instanz von myObjectType (myObject) myNewObject = new myObjectType () // Setzt das X auf die alte Position myNewObject.x = mySaveData.data.myDataArray [0] // Setzt das Y auf die alte Position myNewObject.y = mySaveData.data.myDataArray [1] // Wählt das alte Objekt myNewObject.gotoAndStop (mySaveData.data.myDataArray [2]) aus. // Bewegt den Abspielkopf zum rechten Animationsrahmen myNewObject.getChildAtData (0) .gotoAndStop .myDataArray [3]) // Fügt das Objekt der Bühne hinzu. addChild (myNewObject) // Entfernt den comboBox-Ereignislistener myComboBox.removeEventListener (Event.CHANGE, changeObjectFrame) // Entfernt die Listener "doStuff" -Ereignis für die Schaltflächen saveStuff.removeEventListener (). (). (). (0). (0). (0). (0). (0). (0). (0) ) Hirsch e.removeEventListener (MouseEvent.MOUSE_UP, mouseUp) // Entfernt die nicht benötigte Benutzeroberfläche removeChild (myObject) removeChild (saveStuff) removeChild (loadStuff) removeChild (clearStuff) removeChild (myComboBox) removeChild (myCanvas)

Testen Sie die App, es sollte perfekt funktionieren.

Herzliche Glückwünsche! Sie haben einen MovieClip mithilfe der SharedObject-Klasse offiziell rekonstruiert!


Schritt 19: Hinzufügen einer Play-Animationsschaltfläche

Wenn die obige Anwendung funktioniert, sollte ein angehaltenes Bild des Speicherorts von myObject angezeigt werden. Damit die Animation erneut abgespielt werden kann, erstellen Sie eine Schaltfläche "Wiedergabe". Hier ist der, den ich ausgewählt habe:

Ziehen Sie es einfach darunter meinObjekt auf der Bühne und den Instanznamen auf "playAnimation" setzen.

Fügen Sie dies unten in unserem Konstruktor hinzu:

 // verbirgt die Schaltfläche playAnimation.visible = false // fügt Schaltflächen hinzu Ereignis-Listener playAnimation.addEventListener (MouseEvent.CLICK, playObjectAnimation)

Dann lege das unten auf loadObjectData ().

 // Zeigt die Schaltfläche playAnimation.visible = true

Zum Schluss fügen Sie diese Funktion Ihrem Programm hinzu:

 private Funktion playObjectAnimation (e: MouseEvent): void myNewObject.play ()

Schritt 20: Final Source

Hier ist unser Final Application Source Code. Wenn es einen Unterschied zwischen Ihrem Code und diesem gibt, gehen Sie zurück und sehen Sie, wo Sie einen anderen Pfad gewählt haben.

 Paket 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; import flash.net.SharedObject; Die öffentliche Klasse Main erweitert 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 öffentliche Funktion 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.addJaOnlIst , mouseDown) stage.addEventLakeer (MouseEvent.MOUSE_UP, mouseUp) myCanvas.mask = myObjectAsMask myObjectAsMask.gotoAndStop (1) saveStuff.addEventListener (MouseEvent.CLICK, saveObjectData) loadStuff.addEventLacker (1) eEvent.CLICK, clearObjectData) playAnimation.visible = false playAnimation.addEventListener (MouseEvent.CLICK, playObjectAnimation) private Funktion clearObjectData (e: MouseEvent): void mySaveData.clear () myCanvas.graphics.clear () private Funktion loadObjectLibrary e: MouseEvent): void myNewObject = new myObjectType () myNewObject.x = mySaveData.myDataArray [0] myNewObject.y = mySaveData.data.myDataArray [1] myNewObject.gotoAndStop (my). myNewObject.getChildAt (0) .gotoAndStop (mySaveData.data.myDataArray []]) addChild (myNewObject) myComboBox.removeEventListener (Event.CHANGE, changeObjectFrame) saveStuff. loadObjectDataData) clearStuff.removeEventListener (MouseEvent.CLICK, clearObjectData) stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawDoodle) stage.removeEventListener (MouseEvent.MOUSE_DOWN, mouseDown) stage.removeEventLerArr veChild (myObject) removeChild (saveStuff) removeChild (loadStuff) removeChild (clearStuff) removeChild (myComboBox) removeChild (myCanvas) var loadBitmapData: BitmapData = neue BitmapData (640, 480, true, 1) loadBitmapDataatata , 150, 100), mySaveData.data.myDataArray [4]) var display: Bitmap = neues Bitmap (loadBitmapData) myObjectAsMask.gotoAndStop (mySaveData.myDataArray [2]) display.mask = myObjectAsMask addChild (display) play = true private Funktion playObjectAnimation (e: MouseEvent): void myNewObject.getChildAt (0) .play () playAnimation.visible = false private Funktion saveObjectData (e: MouseEvent): void var myDataArrayInProgram: Array = new Array () myDataArrayInProgram.push (myObject.x) myDataArrayInProgram.push (myObject.y) myDataArrayInProgram.push (myObject.currentFrame) bitmapDataSnapshot.draw (myCanvas, null, null, null, neuer Recta ngle (250, 30, 150, 100)) myDataArrayInProgram.push (bitmapDataSnapshot.getPixels (neues Rechteck (250, 30, 150, 100))) mySaveData.data.myDataArray = myDataArrayInProgram mySaveData.flush () - Ablauf mySaveData.flush () - Ablauf myDataArray) private Funktion mouseUp (e: MouseEvent): void mouseIsDown = false private Funktion mouseDown (e: MouseEvent): void mouseIsDown = true myCanvas.graphics.moveTo (myCanvas.mouseX, myCanvas.mouseY);  private Funktion drawDoodle (e: MouseEvent): void if (mouseIsDown) myCanvas.graphics.lineStyle (5, 0, 1) myCanvas.graphics.lineTo (myCanvas.mouseX, myCanvas.mouseY);  private Funktion changeObjectFrame (e: Event): void if (myComboBox.selectedLabel == "Rechteck") myObject.gotoAndStop (1) if (myComboBox.selectedLabel == "Triangle") myObject.gotoAndStop (2)  if (myComboBox.selectedLabel == "Circle") myObject.gotoAndStop (3) myCanvas.graphics.clear () myObjectAsMask.gotoAndStop (myObject.currentFrame)

Fazit

Wie Sie sehen, ist es mit ein wenig Optimierungsaufwand absolut möglich, alle MovieClip-Daten zum späteren Laden in SharedObjects zu speichern. Wenn Sie also ein Spiel schreiben, können Sie einfach Sicherungszustände erstellen, anstatt kleine Kontrollpunkte zu haben.

Viel Glück bei der Verwendung dieser Methode zum Speichern von Daten in Ihren Spielen und Anwendungen, um Ihre Programme besser als je zuvor zu machen!

Danke fürs Lesen!