Reconstruction de MovieClip avec la classe SharedObject

Au cours de ce tutoriel, nous allons apprendre à implémenter la classe SharedObject. Nous stockerons toutes les données essentielles d'un MovieClip localement, puis nous les rechargerons à la prochaine ouverture de l'application.!

Nous avons trouvé cet auteur génial grâce à FlashGameLicense.com, le lieu d'achat et de vente de jeux Flash..

Merci à manicho pour l'icône du disque dur.


Aperçu du résultat final

Jetons un coup d'œil au résultat final sur lequel nous allons travailler:

Doodle une image dans la boîte avec votre souris et cliquez sur le bouton Enregistrer. Actualisez cette page dans votre navigateur et cliquez sur Charger. Vous verrez votre griffonnage réapparaître après avoir été chargé à partir de votre disque dur. l'animation d'arrière-plan sera même sur la même image qu'auparavant!


Étape 1: Configuration de notre classe de document

Commençons par créer un nouveau fichier .fla. Enregistrez-le et ouvrez le panneau de propriétés dans Flash. J'utilise Flash CS5, mais ce tutoriel devrait fonctionner avec toutes les versions de Flash CS. Dans le panneau des propriétés, appuyez sur le bouton modifier bouton et assurez-vous que vos paramètres sont identiques à l'image ci-dessous:


Étape 2: Configuration de la classe de document

Maintenant que nous avons configuré notre .fla, commençons notre classe de document. Pour commencer, ouvrez votre éditeur de code ActionScript préféré et enregistrez un fichier .as appelé "Main.as" dans le même répertoire que votre .fla. Ensuite, allez dans le panneau "Publier" de Flash. Définissez le champ de texte "Classe" sur "Principal". Maintenant, ouvrez Main.as et copiez et collez le code suivant pour créer notre classe de document Main.

 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; import flash.net.SharedObject; classe publique Main étend Sprite fonction publique Main (): void 

Étape 3: Notre objet principal

Nous allons maintenant créer notre MovieClip principal. Il contiendra 3 cadres. Chacun avec une forme colorée. Dessinez un rectangle rouge, transformez-le en MovieClip avec F8 et définissez le nom du MovieClip sur "myObject". Assurez-vous que le point d’enregistrement est situé dans le coin supérieur gauche. Créez ensuite deux nouvelles images vides à l'intérieur du MovieClip. Remplissez l'un avec un triangle vert et l'autre avec un cercle bleu.

Le résultat final devrait ressembler un peu à ceci:


Étape 4: Utiliser une ComboBox

Nous allons maintenant utiliser une ComboBox, qui est essentiellement une liste déroulante. Assurez-vous que l'instance de myObject sur la scène est également appelée myObject. Ouvrez ensuite: Fenêtre> Composants et faites glisser l'élément "ComboBox" sur la bibliothèque. Si vous n'utilisez pas l'EDI Flash, vous devez cliquer avec le bouton droit de la souris sur> Exporter vers le SWC le ComboBox dans la bibliothèque..

Maintenant, nous pouvons créer la variable "myComboBox", placée au-dessus de la fonction constructeur.

 var privé myComboBox: ComboBox = new ComboBox ()

Ensuite, ajoutez le code suivant à votre constructeur Main ():

 // Arrête myObject MovieClip sur la première image myObject.gotoAndStop (1) // Ajoute les objets suivants à la zone de liste déroulante et leur attribue des étiquettes uniques myComboBox.addItem (label: "Rectangle") myComboBox.addItem (label: "Cercle") myComboBox.addItem (label: "Triangle") // Ajoute le ComboBox addChild (myComboBox) // Le déplace aux bonnes coordonnées myComboBox.move (280,150)

Voici un aperçu de l'apparence de votre application lors de son exécution:


Étape 5: Changer monObjet Cadres

Nous voulons que notre MovieClip change d'image lorsque nous sélectionnons un élément différent!

Commençons par ajouter un EventListener à notre constructeur - l'écouteur d'événements Event.CHANGE - qui vérifie que l'objet sélectionné dans la zone de liste déroulante change. C'est exactement le moment où l'utilisateur choisit un nouvel élément ComboBox.

 myComboBox.addEventListener (Event.CHANGE, changeObjectFrame)

Ensuite, nous allons créer la fonction changeObjectFrame (). Cette fonction vérifie le libellé actuel de la zone de liste déroulante, qui correspond au nom de l'objet sélectionné par l'utilisateur. Il ira ensuite au bon cadre de monObjet pour afficher le type d'objet sélectionné.

 fonction privée changeObjectFrame (e: Event): void //myComboBox.selectedLabel est le nom de l'objet actuel sélectionné que nous avons défini précédemment… if (myComboBox.selectedLabel == "Rectangle") myObject.gotoAndStop (1) if ( myComboBox.selectedLabel == "Triangle") myObject.gotoAndStop (2) if (myComboBox.selectedLabel == "Cercle") myObject.gotoAndStop (3)

Vous pouvez maintenant aller de l'avant et compiler l'application. Vous devriez pouvoir passer à un autre objet en le sélectionnant dans le menu déroulant..


Étape 6: Ajout d'animation

Ensuite, ajoutons une animation à notre programme. Aller dans le monObjet MovieClip sur la première image. Sélectionnez tout le rectangle rouge et appuyez sur F8 pour le transformer en MovieClip. Assurez-vous que le point d’inscription est dans le coin supérieur gauche. Faites-le avec chaque forme à l'intérieur du monObjet MovieClip

Ensuite, nous devrons donner à chaque MovieClip une animation. Allez dans la forme de rectangle MovieClip et faites un clic droit> Créer une interpolation de forme sur le remplissage de forme rouge.

Sélectionnez ensuite la 60ème image du MovieClip sur la timeline et appuyez sur F6 pour créer une nouvelle image clé. Faites cela avec le 30ème cadre également. Maintenant, vous pouvez simplement aller au 30ème cadre et changer la couleur du remplissage de la forme. J'ai choisi de changer la couleur en orange or. Maintenant, si vous jouez l'animation, la couleur devrait changer de Rouge> Orange> Rouge.

Allez-y et faites cela pour chaque forme de la monObjet MovieClip. Maintenant, vous pouvez aller de l'avant et compiler l'application; chaque forme sélectionnée changera de couleur.

L'application actuelle devrait agir comme ceci:


Étape 7: Doodle Canvas

Maintenant, permettons à l'utilisateur de dessiner un petit doodle personnalisé sur le MovieClip. Ceci est similaire à mon dernier tutoriel dans lequel nous avons permis à l'utilisateur de dessiner un dessin personnalisé sur le lecteur. Cependant, nous allons aller un peu plus loin dans ce tutoriel en permettant à l'utilisateur de ENREGISTRER son message. Mais faisons enregistrer que pour plus tard!

Commençons par configurer une instance de la classe Shape. Ajoutez ce code au dessus de votre constructeur:

 var privé myCanvas: Shape = new Shape ()

Ensuite, nous allons ajouter la variable myCanvas à la scène… Ajouter ce code au bas de notre constructeur.

 addChild (myCanvas))

Étape 8: Doodles

Nous allons faire cela très rapidement. Si vous souhaitez plus d'explications sur l'utilisation de la classe Shape pour le dessin, consultez mon autre tutoriel..

Commencez par créer une variable mouseIsDown…

 // Vérifie si la souris est abaissée private var mouseIsDown: Boolean = false

Maintenant, allez-y et ajoutez les écouteurs d'événement suivants:

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

Et voici les 3 fonctions attachées aux EventListeners:

 fonction privée mouseUp (e: MouseEvent): void mouseIsDown = false fonction privée mouseDown (e: MouseEvent): void mouseIsDown = true // Déplace le pointeur de la souris sur la souris myCanvas.graphics.moveTo (myCanvas.mouseX, myCanvas.mouseY) ;  fonction privée drawDoodle (e: MouseEvent): void // Si la souris est cliquée si (mouseIsDown) // Rend les paramètres de dessin corrects myCanvas.graphics.lineStyle (5, 0, 1) // Dessine la ligne de griffonnage myCanvas. graphics.lineTo (myCanvas.mouseX, myCanvas.mouseY); 

Maintenant, vous pouvez tester le programme et il devrait bien dessiner. Cependant, nous n'avons toujours pas limité l'espace de dessin de notre toile. Par conséquent, les dessins situés en dehors des limites de myObject sont toujours visibles. Dans la prochaine étape, nous allons résoudre tout cela!


Étape 9: Masquage

Dans mon précédent tutoriel, le processus de masquage était très simple car chaque objet masqué restait le même tout au long de l'application. Cette fois, nous avons besoin d’un masque qui s’ajuste à chaque MovieClip.

Allons-y et faites un clic droit> Copier notre monObjet sur la scène. Maintenant, nous avons besoin de faire un clic droit> Coller en place l'objet de sorte qu'il est exactement où notre monObjet était. Modifiez maintenant le nom de l'instance en "myObjectAsMask". Basculez vers la classe principale et ajoutez les lignes suivantes au constructeur:

 // Tout cela devrait être explicite! myCanvas.mask = myObjectAsMask myObjectAsMask.gotoAndStop (1)

Jusqu'à présent, le masque ne devrait fonctionner que pour le premier objet. Nous devons ajuster la fonction changeObjectFrame pour modifier notre masque afin de respecter la nouvelle forme de myObject. Ajoutez le code en surbrillance à la fonction changeObjectFrame:

 fonction privée changeObjectFrame (e: Event): void if (myComboBox.selectedLabel == "Rectangle") myObject.gotoAndStop (1) if (myComboBox.selectedLabel == "Triangle") myObject.gotoAndStop (2) si (myComboBox.selectedLabel == "Circle") myObject.gotoAndStop (3) // Efface le cadre myCanvas.graphics.clear () // Synchronise les cadres myObjectAsMask et myObjectAsMask.gotoAndStop (myObject.currentFrame).

Étape 10: Le bouton Enregistrer

Ensuite, nous ajouterons un bouton de sauvegarde à notre application. Plus tard, toutes les données de notre myObject seront sauvegardées dans un SharedObject. Créez un nouveau bouton et concevez-le comme vous le souhaitez. J'ai inclus mon propre bouton mais il ne vous est pas important de vous montrer comment en dessiner un..

Faites glisser une occurrence du bouton sur la scène et attribuez-lui le nom d'occurrence "saveStuff". Ajoutez ensuite l'écouteur d'événement suivant au constructeur:

 saveStuff.addEventListener (MouseEvent.CLICK, saveObjectData)

Ensuite, ajoutez cette fonction vide que nous allons utiliser pour ajouter notre code qui enregistre l'objet.

 fonction privée saveObjectData (e: MouseEvent): void 

Étape 11: Création et accès à un nouvel objet partagé

Pour commencer à utiliser la classe SharedObject, nous devons créer une nouvelle instance de la classe SharedObject. Si vous n'avez jamais utilisé la classe SharedObject auparavant, ce serait un bon moment pour consulter ce tutoriel sur l'utilisation de SharedObjects pour avoir une idée de base de leur fonctionnement. Utilisez ce code pour créer un SharedObject:

 var privée mySaveData: SharedObject = SharedObject.getLocal ("saveData")

Accédez à la fonction saveObjectData et ajoutez le code suivant pour commencer notre opération de sauvegarde:

 // Crée un nouveau tableau dans le programme var myDataArrayInProgram: Array = new Array () // Ajoute des données aléatoires à notre tableau myDataArrayInProgram.push ("WhateverDataYouWant") // Crée une variable à l'intérieur de SharedObject // et lui attribue la valeur la valeur de notre // tableau local mySaveData.data.myDataArray = myDataArrayInProgram // "efface" les données à enregistrer dans l'ordinateur // (bien que le nom l'indique, // enregistre les données!) mySaveData.flush ()

Si vous voulez vérifier si ce code est efficace, ajoutez simplement cet extrait de code au bas de votre fonction:

 trace (mySaveData.data.myDataArray)

Étape 12: Enregistrement de nos données principales MovieClip

Jusqu'à présent, tout va bien. Nous avons réussi à créer un SharedObject et y avons stocké avec succès quelques octets de données. La prochaine étape consiste à préparer notre programme de reconstruction de notre MovieClip. Dans cette étape, nous allons ajouter toutes les données nécessaires à notre SharedObject pour que notre application reconstruise le MovieClip à partir de zéro..

Pour ce faire, nous devrons placer toutes nos données dans le tableau myDataArrayInProgram afin qu'elles soient attachées à notre SharedObject. J'ai modifié la fonction saveObjectData pour faire tout cela. Vous pouvez le voir ci-dessous:

 fonction privée saveObjectData (e: MouseEvent): void var myDataArrayInProgram: Array = new Array () // Ajoute l'emplacement X de l'objet myDataArrayInProgram.push (myObject.x) // ajoute l'emplacement Y de l'objet, myDataArrayInProgram.push (myObject.y). // Ajoute le currentFrame de l'objet // (L'objet actuel choisi) myDataArrayInProgram.push (myObject.currentFrame) // Ajoute le cadre actuel de // l'animation de l'objet // myDataArrayInProgram.push (myObject.getChildAt (0) .currentFrame) mySaveData. data.myDataArray = myDataArrayInProgram mySaveData.flush () trace (mySaveData.data.myDataArray)

IMPORTANT: getChildAt () accède aux enfants de l'objet en fonction de leur index. Lorsqu'il n'y a qu'un seul objet dans un MovieClip, vous pouvez être sûr que getChildAt (0) va vous y amener!

PLUS IMPORTANT: Ne vous inquiétez pas si vous obtenez l'erreur suivante:

1119: Accès à la propriété currentFrame, éventuellement non définie, via une référence de type statique flash.display: DisplayObject.

Si tel est le cas, le mode strict est probablement activé dans vos paramètres de flash. Le problème est que getChildAt () renvoie un objet DisplayObject et clignotant, qui pourrait être un bitmap, un sprite, un MovieClip, etc. Le problème avec DisplayObject.currentFrame est-ce que seule la classe MovieClip a la propriété currentFrame, car aucune autre classe n'a d'animation.

Pour résoudre ce problème, sélectionnez Fichier> Paramètres de publication> Paramètres Actionscript et décochez l'option "Erreurs: mode strict".

Éditeur: Alternativement, vous pourriez jeter l'objet renvoyé par getChildAt () en tant que MovieClip, comme suit:
 myDataArrayInProgram.push ((myObject.getChildAt (0) en tant que MovieClip) .currentFrame)

Ceci dit à Flash, "traite cet objet comme une MovieClip".


Étape 13: Création d'un bouton de chargement

Nous ne sommes pas encore au stade où nous pouvons utiliser nos données de sauvegarde, mais il est toujours bon de créer l'option d'interface utilisateur pour charger le SharedObject à l'avance. Tout comme le bouton de sauvegarde, vous pouvez concevoir ce bouton comme vous le souhaitez; Je ne vais pas vous guider.

Créez un nouveau bouton et faites glisser une occurrence sur la scène. Puis définissez le nom de l'instance sur "loadStuff".

Et maintenant, ajoutez simplement l'écouteur d'événement suivant:

 loadStuff.addEventListener (MouseEvent.CLICK, loadObjectData)

Et créez la fonction loadObjectData comme ceci:

 fonction privée loadObjectData (e: MouseEvent): void 

Étape 14: Bouton Effacer tout

Ajoutons maintenant un nouveau bouton à notre interface utilisateur. Ce bouton supprimera tout ce qui se trouve dans notre SharedObject et effacera également le doodle actuel sur myCanvas..

Tout comme les autres boutons, je choisirai mon propre graphique; vous pouvez choisir le vôtre ou utiliser le mien.

Cette fois, vous pouvez définir le nom d’instance du bouton sur "clearStuff".

Maintenant, ajoutez cet écouteur d'événement:

 clearStuff.addEventListener (MouseEvent.CLICK, clearObjectData)

Et créez la fonction clearObjectData comme suit:

 fonction privée clearObjectData (e: MouseEvent): void // Clear SharedObject mySaveData.clear () // Efface les graphiques myCanvas myCanvas.graphics.clear ()

Étape 15: instantanés BitmapData

Maintenant, vous commencez à demander: "Pourquoi ne puis-je pas enregistrer le griffonnage de l'utilisateur comme n'importe quelle autre propriété?" Malheureusement, Flash ne vous permet pas de sauvegarder directement MovieClips, Bitmaps ou même des formes à l'intérieur d'un objet SharedObject, mais vous pouvez le faire en enregistrant la valeur pixel par pixel DE l'image.

Vous devez vous demander: "Mais le doodle n’est pas un bitmap, c’est une image vectorielle dessinée par l’utilisateur et contenue dans une forme?!" C'est vrai, mais nous pouvons le convertir en données Bitmap en prenant un instantané avec la classe BitmapData.!

Continuez et créez la variable suivante au-dessus du constructeur de notre application principale:

 var privé bitmapDataSnapshot: BitmapData

Cette variable sera la "caméra" qui prend un instantané du doodle.

Ajoutez maintenant les lignes en surbrillance suivantes à la fonction saveObjectData à l’emplacement indiqué ci-dessous:

 fonction privée saveObjectData (e: MouseEvent): void var myDataArrayInProgram: Array = new Array () myDataArrayInProgram.push (myObject.x) myDataArrayInProgram.push (myObject.currentFrame) myDataArrayInProgram.push (myObject.prendre) / Crée une nouvelle instance de la classe BitmapData, // lui donne la taille de la scène, active la transparence, // et définit le remplissage en blanc bitmapDataSnapshot = new BitmapData (640, 480, true, 0) // Indique le appareil photo pour prendre un instantané // de myCanvas, ignore les 3 paramètres suivants, // et indique à la zone d'instantané d'inclure uniquement // les éléments couverts par le bitObject MovieClip bitmapDataSnapshot.draw (myCanvas, null, null, null, new Rectangle ( 250, 30, 150, 100)) mySaveData.data.myDataArray = myDataArrayInProgram mySaveData.flush () trace (mySaveData.data.myDataArray)

Étape 16: enregistrement de BitmapData dans un objet partagé

Terminons le processus de sauvegarde de notre programme. Maintenant que nous avons créé une instance BitmapData avec toutes nos données myCanvas, nous devons la stocker dans un ByteArray pour pouvoir l'envoyer à notre SharedObject. Pour ce faire, nous pouvons utiliser une fonction très pratique à l'intérieur de la classe BitmapData. Son nom est getPixels ().

getPixels () renvoie un ByteArray de toutes les données de pixels d'un BitmapData. Contrairement à la classe BitmapData, ByteArrays pouvez être stockés à l'intérieur de SharedObjects afin qu'ils soient le bon outil pour enregistrer notre Doodle.

Tout ce que vous avez à faire est d’ajouter cette ligne de code dans votre fonction saveObjectData juste après la fin de votre travail BitmapData:

 // Pousse la valeur du // ByteArray renvoyé de la fonction getPixels () // dans myDataArrayInProgram // getPixels () nécessite un rectangle // indiquant la partie des pixels de l'objet // que nous voulons réellement! // NOTE: Le rectangle en cours est seulement // une approximation de l'endroit où le doodle // devrait apparaître! mySaveData.data.myDataArray.push (bitmapDataSnapshot.getPixels (nouveau Rectangle (250, 30, 150, 100)))

Pour la dernière étape. Une fois les données sauvegardées, nous devons demander à l'utilisateur d'actualiser la page pour prouver que leur griffonnage a été sauvegardé sur leur disque dur, et pas uniquement stocké dans la mémoire temporaire. Dessinez une boîte noire autour de la scène et ajoutez-y un texte qui demande au joueur de se rafraîchir. Ensuite, sélectionnez l'objet entier et appuyez sur F8. Assurez-vous de cocher la case "Exporter pour Actionscript" et réglez la "Classe" sur "refreshScreen". Vous pouvez maintenant supprimer l'objet sur la scène…

Ci-dessous, le refreshScreen que j'ai dessiné:

Ajoutez maintenant ce code au bas de votre fonction saveObjectData:

 addChild (new refreshScreen ())

Votre fonction saveObjectData finie devrait ressembler à ceci:

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

Étape 17: Reconstruire notre Doodle

Il est temps de reconstruire l'intégralité de notre Doodle à partir du ByteArray que nous avons enregistré précédemment.!

Vous devez penser: "Qu'est-ce que je fais avec un ByteArray, c'est juste un tas de charabia brouillé!" Et vous avez raison, c'est ça! Heureusement, Adobe nous a également confié une fonction géniale appelée setPixels () auquel vous donnez le même Rectangle et ByteArray, pour recréer le même BitmapData que vous aviez!

Avant de reconstruire l'intégralité de notre MovieClip, nous devrions procéder à un test pour voir si nous pouvons reconstruire le BitmapData lui-même. Modifier votre loadObjectData fonctionne donc il ressemble à ceci:

 fonction privée loadObjectData (e: MouseEvent): void // crée un BitmapData et le convertit // en taille de la scène, et // applique tous les anciens paramètres var loadBitmapData: BitmapData = new BitmapData (640, 480, true, 1) // Définit les pixels de loadBitmap // en utilisant notre ancien rectangle et // en accédant à notre SaveData ByteArray // (4ème élément de myDataArray (myDataArray [3])) loadBitmapData.setPixels (nouveau Rectangle (250, 30, 150 , 100), mySaveData.data.myDataArray [3]) // Crée un nouveau bitmap et lui dit de // charger son image à partir de loadBitmapData var display: Bitmap = new Bitmap (loadBitmapData) // Déplace le masque d'objet // tête de lecture sur le cadre de droite myObjectAsMask.gotoAndStop (mySaveData.data.myDataArray [2]) // masque l'image avec le masque display.mask = myObjectAsMask // ajoute le bitmap à la scène addChild (display)

Étape 18: Reconstruction complète de myObject

Maintenant il est temps de mettre tout cela ensemble! D'abord, faites un clic droit sur monObjet (dans la bibliothèque)> Propriétés. Cochez maintenant la case "Exporter pour Actionscript" et définissez la "Classe" sur "myObjectType". Comparez vos propriétés à celles de l'image:

Si tout est pareil, alors nous sommes prêts à partir! Ajoutez ceci au dessus de notre constructeur:

 var privé myNewObject: myObjectType;

Et ajouter tout de cela au sommet de loadObjectData ().

 // Crée une nouvelle instance de myObjectType (myObject) myNewObject = new myObjectType () // Définit le X sur l'ancienne position myNewObject.x = mySaveData.data.myDataArray [0] // Définit le Y sur l'ancienne position myNewObject.y. = mySaveData.data.myDataArray [1] // sélectionne l'ancien objet myNewObject.gotoAndStop (mySaveData.data.myDataArray [2]) // déplace la tête de lecture vers le cadre d'animation de droite myNewObject.getChildAt (0) .gotoAndStop (mySaveData.data). .myDataArray [3]) // Ajoute l'objet à la scène addChild (myNewObject) // Supprime l'écouteur d'événement comboBox myComboBox.removeEventListener (Event.CHANGE, changeObjectFrame) // Supprime l'événement "doStuff" pour les écouteurs d'événement des boutons saveStuff.removeEventRallover (en anglais) .cliquer, saveObjectData) loadStuff.removeEventListener (MouseEvent.CLICK, loadObjectData) clearStuff.removeEventListener (MouseEvent.CLICK, clearObjectData) // Enlève le dessin des écouteurs d'événements stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawDoodle) stage.removeEventListener (MouseEvent.MOUSE_DOWN, mouseDown ) cerf e.removeEventListener (MouseEvent.MOUSE_UP, mouseUp) // Supprime l'interface utilisateur superflue removeChild (myObject) removeChild (saveStuff) removeChild (loadStuff) removeChild (clearStuff) removeChild (myComboBox) removeChild (myCanvas)

Testez l'application, cela devrait fonctionner parfaitement.

Toutes nos félicitations! Vous avez officiellement reconstruit un MovieClip à l'aide de la classe SharedObject!


Étape 19: Ajout d'un bouton d'animation de lecture

Si l'application ci-dessus fonctionne, elle devrait présenter une image en pause de l'endroit où vous avez enregistré myObject. Pour relancer l’animation, créons un bouton "Jouer". Voici celui que j'ai choisi:

Faites-le glisser juste en dessous monObjet sur la scène et définissez son nom d'instance sur "playAnimation".

Maintenant, ajoutez ceci au bas de notre constructeur:

 // Masque le bouton playAnimation.visible = false // Ajoute des boutons Listener d'événements playAnimation.addEventListener (MouseEvent.CLICK, playObjectAnimation)

Ensuite, mettez ceci au bas de loadObjectData ().

 // Affiche le bouton playAnimation.visible = true

Enfin, ajoutez cette fonction à votre programme:

 fonction privée playObjectAnimation (e: MouseEvent): void myNewObject.play ()

Étape 20: Source finale

Voici notre code source de l'application finale. S'il y a une différence entre votre code et celui-ci, revenez en arrière et voyez où vous avez emprunté un chemin différent.

 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; import flash.net.SharedObject; classe publique principale étend Sprite private var myComboBox: ComboBox = new ComboBox () var privé myCanvas: Shape = new Shape () private var mouseIsDown: Boolean = false privé var mySaveData: SharedObject = SharedObject.getLocal ("saveData") privé privé bitmapDataSnapshot : BitmapData private var myNewObject: fonction publique myObjectType Main (): void myObject.gotoAndStop (1) myComboBox.addItem (label: "Rectangle") myComboBox.addItem (label: "Triangle") myComboBox.add label: "Circle") addChild (myComboBox) myComboBox.move (280, 150) myComboBox.addEventListener (Event.CHANGE, changeObjectFrame) addChild (myCanvas) stage.addEventListener (MouseEvent.MOUSE_MOVE_MOYDAGE). stage.addEventListener (MouseEvent.MOUSE_UP, mouseUp) myCanvas.mask = myObjectAsMask myObjectAsMask.gotoAndStop (1) saveStuff.addEventaldogrouverfermodal (en anglais seulement). eEvent.CLICK, clearObjectData) playAnimation.visible = false playAnimation.ADEventListener (MouseEvent.CLICK, playObjectAnimation) fonction privée clearObjectData (e: MouseEvent): void mySaveData.clear () myCanvas.graphics.clear () fonction privée loadObjectData e: MouseEvent): void myNewObject = new myObjectType () myNewObject.x = mySaveData.data.myDataArray [0] myNewObject.y = mySaveData.data.myDataArray [1] myNewObject.gotoAndStop (mySaveDataData). myNewObject.getChildAt (0) .gandAndStop (mySaveData.data.myDataArray [3]) addChild (myNewObject) myComboBox.remove (article), le produit que vous m'avez proposé, à savoir le produit suivant: loadObjectData) clearStuff.removeEventListener (MouseEvent.CLICK, clearObjectData) stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawDoodle) stage.removeEventListener (MouseEvent.MOUSE_DOWN, mouseDown) stage.removeEventListe veChild (myObject) removeChild (saveStuff) removeChild (loadStuff) removeChild (clearStuff) removeChild (myComboBox) removeChild (myCanvas) var loadBitmapData: BitmapData = nouveau BitmapData (640, 480, true, 1) loadBitmapData.setPixels (nouveau, 30, 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 fonction privée playObjectAnimation (e: MouseEvent): void monNewObject.getChildAt (0) .play () playAnimation.visible = false fonction privée 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) .couleurFormule d'imprimante pays en développement et en développement. 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.mDataArray = myDataArrayInProgram mySaveData.flush () trace (mySaveData.data.). myDataArray) fonction privée mouseUp (e: MouseEvent): void mouseIsDown = false fonction privée mouseDown (e: MouseEvent): void mouseIsDown = true myCanvas.graphics.moveTo (myCanvas.mouseX, myCanvas.mouseY);  fonction privée drawDoodle (e: MouseEvent): void if (mouseIsDown) myCanvas.graphics.lineStyle (5, 0, 1) myCanvas.graphics.lineTo (myCanvas.mouseX, myCanvas.mouseY);  fonction privée changeObjectFrame (e: Event): void if (myComboBox.selectedLabel == "Rectangle") myObject.gotoAndStop (1) if (myComboBox.selectedLabel == "Triangle") myObject.gotoAndStop (2)  if (myComboBox.selectedLabel == "Cercle") myObject.gotoAndStop (3) myCanvas.graphics.clear () myObjectAsMask.gotoAndStop (monObjet.currentFrame)

Conclusion

Comme vous pouvez le constater, avec quelques ajustements, il est absolument possible de sauvegarder toutes les données de MovieClip dans SharedObjects pour les charger ultérieurement. Cela signifie que si vous écrivez un jeu, vous pouvez facilement créer des états de sauvegarde au lieu d'avoir de petits points de contrôle…

Bonne chance pour utiliser cette méthode de sauvegarde des données sur vos jeux et applications, pour rendre vos programmes meilleurs que jamais!

Merci d'avoir lu!