Introduction à ByteArray

ByteArray est une classe extrêmement puissante qui peut être utilisée pour de nombreuses tâches liées à la manipulation de données, notamment la sauvegarde en ligne de données de jeux, le cryptage, la compression et la conversion d'un objet BitmapData en fichier PNG ou JPG. Dans cette introduction, nous allons utiliser la classe ByteArray pour prendre un objet AS3 natif et le coder en une chaîne pouvant être enregistrée sur un serveur pour une récupération ultérieure, puis le décoder ultérieurement..

Dans des tutoriels précédents, nous avons vu comment utiliser XML et JSON pour coder des données dans un format textuel (String). Cependant, XML et JSON sont conçus pour être lisibles par l'homme, ils sont donc beaucoup plus longs que nécessaire. Il peut également être difficile de convertir certains types d'objet AS3 dans l'un ou l'autre format. ByteArray possède des fonctionnalités vraiment avancées, mais pour commencer, nous n'en regarderons qu'une simple: il est très facile de transformer un objet AS3 en une chaîne.


Aperçu du résultat final

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

Lorsque vous collez une chaîne ByteArray codée dans le champ TextField et que vous cliquez sur le bouton Charger, elle est déchiffrée et affiche les propriétés de l'objet qui y sont enregistrées. Vous pouvez essayer les ByteArrays codés suivants: copiez-les dans TextField et cliquez sur le bouton Charger pour voir de quoi je parle:

 // Ce ByteArray montrera mes données (c'est le ByteArray par défaut chargé) CgsBFW9jY3VwYXRpb24GB0NUTw93ZWJzaXRlBiFodHRwOi8vaWt0LmNvLmlkCW5hbWUGDVRhdWZpaw =
 // Cette ByteArray montrera ma pensée actuelle CgsBIWZvb2RfZm9yX3Rob3VnaHQGgnVJIGFtIHRoaW5raW5nIG9uIHNoYXJpbmcgdGhlIHRlY2huaXF1ZSBpIHVzZWQgdG8gbWFrZSBhIEZ1bGwgRmxhc2ggRHluYW1pYyBXZWJzaXRlIFNFTyBGcmllbmRseSBmb3IgbXkgbmV4dCBUdXRvcmlhbCBpbiBBY3RpdmVUdXRzKy4uLiA8dT5XaGF0IGRvIHlvdSB0aGluaz88L3U + IDxiPmlzIGl0IGEgZ29vZCBpZGVhPC9iPj8B
 // Ce ByteArray parlera de Flash et référencement et mon expérience avec eux CgsBEXF1ZXN0aW9uBoEDPGI + PHU + Q2FuIGEgZnVsbHkgZHluYW1pYyBGbGFzaCBXZWJzaXRlIGJlIFNFTyBmcmllbmRseTwvdT48L2I + Pz8NYW5zd2VyBoM / SXQgY2FuLCBoZXJlIGlzIHRoZSBwcm9vZiwgPGEgaHJlZj0naHR0cDovL3d3dy5nb29nbGUuY28uaWQvc2VhcmNoP3E9Zmxhc2grc2VvJmllPXV0Zi04Jm9lPXV0Zi04JmFxPXQnIHRhcmdldD0nX2JsYW5rJz5odHRwOi8vd3d3Lmdvb2dsZS5jby5pZC9zZWFyY2g / cT1mbGFzaCtzZW8maWU9dXRmLTgmb2U9dXRmLTgmYXE9dDwvYT4sIGlrdC5jby5pZCBpcyByYW5rZWQgIzYgb3ZlciB0aGVyZQE =

Étape 1: Créer un nouveau projet ActionScript

Dans la fenêtre "Flash Builder":

  1. Ouvrez Flash Builder 4
  2. Cliquez sur le menu Fichier
  3. Survolez vers le nouveau
  4. Cliquez sur Projet ActionScript

Étape 2: Nouvelle configuration du projet ActonScript

Dans la fenêtre "Nouveau projet ActionScript":

  1. Tapez 'TUTORIAL_ByteArray' dans le champ Nom du projet
  2. S'il vous plaît rappelez-vous où vous enregistrez votre projet
  3. Cliquez sur le bouton 'Terminer'

Étape 3: Base64.as

Copiez Base64.as dans le répertoire 'com' de votre projet.

  1. Créez un nouveau répertoire 'com' dans votre répertoire source.
  2. Téléchargez le fichier Base64.as à partir du téléchargement source.
  3. Placez le fichier dans le nouveau répertoire "com".

Base64.as sera utile plus tard. C'est Steve Webster, qui habitait sur dynamicflash.com (il a quitté la communauté Flash il y a quelques années).


Étape 4: Classes nécessaires

Dans TUTORIAL_ByteArray classe (qui est la classe principale), importez les classes suivantes pour ce tutoriel:

 package import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import flash.events.MouseEvent; import flash.utils.ByteArray; import com.Base64; Classe publique TUTORIAL_ByteArray étend Sprite fonction publique TUTORIAL_ByteArray () 

Étape 5: Familiarisation avec Flash Builder I

Ajoutez le code suivant à l'intérieur TUTORIAL_ByteArray Constructeur pour un test très simple.

 fonction publique TUTORIAL_ByteArray () var _test: String = "Hello world!"; trace (_test); 

Appuyez sur la touche F11 pour exécuter ce projet, vous devriez obtenir le message dans la fenêtre de la console..


Étape 6: Familiarisation avec Flash Builder II

Maintenant, essayons de tracer le message à l'intérieur _tester variable, mais cette fois nous le ferons à partir d'une autre fonction:

 fonction publique TUTORIAL_ByteArray () var _test: String = "Hello world!"; TestFunction ();  fonction privée TestFunction (): void trace (_test); 

Appuyez sur CTRL + S pour enregistrer votre projet. Une erreur détectée après avoir enregistré votre projet. En effet, une variable déclarée dans une fonction ne sera disponible pour aucune autre fonction. Donc, dans ce cas, nous devons déclarer le _tester variable à l'extérieur:

 fonction publique TUTORIAL_ByteArray () TestFunction ();  fonction privée TestFunction (): void trace (_test);  private var _test: String = "Bonjour le monde!";

Étape 7: Variables privées nécessaires

Veuillez ajouter les variables privées suivantes pour ce projet:

 fonction publique TUTORIAL_ByteArray () TestFunction ();  fonction privée TestFunction (): void trace (_test);  private var _test: String = "Hello World!"; private var _loadButton: TextField; private var _inputField: TextField; private var _testObject: Object; private var _testByteArray: ByteArray;

Étape 8: interface utilisateur

Créons une interface utilisateur simple pour ce projet.

Maintenant que nous devons afficher quelque chose dans notre projet, nous devons déclarer nos tailles de scène (Ligne 13 de vérification).

Renommez notre TestFunction en fonction InitUI et placez la ligne de codes suivante à l'intérieur. Veuillez lire l'explication commentée à l'intérieur du code.

 [SWF (width = "550" ,, frameRate = "60", pageTitle = "Tutorial ByteArray")] public class TUTORIAL_ByteArray étend Sprite fonction publique TUTORIAL_ByteArray () InitUI ();  fonction privée InitUI (): void // Initialise nos TextFields pour pouvoir les utiliser _loadButton = new TextField (); _inputField = new TextField (); // Donne un defaultTextFormat pour les deux (Tahoma à 11pt, couleur 0x777777) _loadButton.defaultTextFormat = _inputField.defaultTextFormat = new TextFormat ("Tahoma", 11, 0x777777); // Attribue une bordure à tous les deux _loadButton.border = _inputField.border = true; // Définit la taille automatique de notre bouton Load afin qu'il se réduise / s'agrandisse automatiquement pour s'adapter au texte contenu dans _loadButton.autoSize = TextFieldAutoSize.LEFT; // Définissez la valeur sélectionnable de notre bouton Charger sur false, afin que l'utilisateur ne puisse pas sélectionner le texte qu'il contient _loadButton.selectable = false; // Définit le multiligne et le wordWrap de notre champ d'entrée sur true, de sorte qu'un texte long soit automatiquement renvoyé à la ligne suivante _inputField.multiline = _inputField.wordWrap = true; // Permettre à l'utilisateur de saisir quelque chose dans notre champ de saisie en définissant cette propriété de type _inputField.type = TextFieldType.INPUT; // Met du texte dans les deux _loadButton.text = "Load"; _inputField.text = ""; // Ajoute les deux dans la scène, de manière à ce qu'ils soient visibles par nos visiteurs. AddChild (_inputField); addChild (_loadButton); // Positionne notre champ d'entrée et le rend plus grand _inputField.x = 25; _inputField.y = 25; _inputField.width = 200; _inputField.height = 150; // Il y a une raison pour laquelle j'ai fait cela, de sorte que le bouton de chargement soit situé directement en dessous de notre champ de saisie // Pour que vous puissiez positionner le champ de saisie n'importe où, tant que ce code existe, le bouton de chargement reste en dessous le champ d'entrée _loadButton.y = _inputField.y + _inputField.height; _loadButton.x = _inputField.x; 

Appuyez sur F11 pour exécuter ce projet et voir l'interface utilisateur simple que nous avons créée..


Étape 9: Activer l'interactivité

Veuillez lire l'explication commentée à l'intérieur du code

 _loadButton.y = _inputField.y + _inputField.height; _loadButton.x = _inputField.x; // Ajoute un écouteur d'événement pour notre _loadButton. Ainsi, chaque fois que l'utilisateur clique sur ce bouton, // Flash appelle _loadButton_CLICK (), méthode _loadButton.addEventListener (MouseEvent.CLICK, _loadButton_CLICK, false, 0, true);  // Cette méthode sera appelée chaque fois que l'utilisateur cliquera sur la fonction privée _loadButton _loadButton_CLICK (Events: MouseEvent = null): void // Récupère tout ce que l'utilisateur a entré et enregistre dans notre variable _test _test = _inputField.text; // Trace la variable _test trace ("L'utilisateur a saisi le message suivant:" + _test); 

Appuyez sur F11 pour exécuter ce projet. essayez de taper quelque chose dans le _champ de saisie puis cliquez sur le _loadButton. C'est la technique la plus élémentaire pour obtenir une variable de notre utilisateur et la stocker dans notre variable privée..


Nourriture pour la pensée

Nous avons enfin atteint nos étapes les plus importantes dans ce projet, mais avant de continuer, laissez-moi vous donner un stimulus mental pour réfléchir. Actuellement dans notre projet, nous sommes capables d’obtenir un Chaîne et le stocker dans notre variable privée. Mais ce n'est qu'une ficelle; que diriez-vous si je veux qu'un utilisateur tape quelque chose à l'intérieur _champ de saisie pour que je puisse avoir un Objet à partir de cela? Que doit taper l'utilisateur? La réponse est un 'Encoded Base64 ByteArray'


Étape 10: Introduction à ByteArray

Nous allons procéder lentement cette fois-ci, afin que vous compreniez la classe ByteArray et soyez capable de créer votre propre manipulation de données et de l'appliquer à vos propres projets. Veuillez lire l'explication commentée à l'intérieur du code:

 fonction publique TUTORIAL_ByteArray () InitUI (); CreateByteArray ();  fonction privée CreateByteArray (): void // Initialise notre variable _testObject, afin que nous puissions renseigner de nombreuses propriétés dynamiques et y stocker des données String (nous les chargerons plus tard, chaque fois que l'utilisateur clique sur _loadButton) _testObject = new Object (); _testObject.name = "Taufik"; _testObject.website = "http://ikt.co.id"; _testObject.occupation = "CTO"; // Initialise notre variable _byteArray, afin que nous puissions commencer à convertir un objet en ByteArray _testByteArray = new ByteArray (); // Convertir l'objet en tableau d'octets, voici comment procéder: convertir un objet en tableau d'octets, C'EST SIMPLE, n'est-ce pas? :)) _testByteArray.writeObject (_testObject); // Voyons si tout fonctionne correctement trace ("Notre premier ByteArray créé ::" + _testByteArray.toString ()); 

Appuyez sur F11 pour exécuter ce projet. Vous voyez comme c'est simple, ce ByteArray est une classe extrêmement puissante et pourtant, ce n'est pas difficile du tout. Nous avons pris un objet AS3 natif et l'avons converti au format de message d'action.

Avant d’envoyer les données à notre script PHP à l’aide de la méthode GET, nous devons le convertir en chaîne base64. C’est parce que Base64 peut être porté par XML (et par HTML).


Étape 11: codage de ByteArray dans Base64 String

Veuillez lire l'explication commentée dans le code.

 fonction privée CreateByteArray (): void // Initialise notre variable _testObject afin de pouvoir renseigner de nombreuses propriétés dynamiques et y stocker des données String // (nous les chargerons plus tard lorsque l'utilisateur clique sur le _loadButton) _testObject = new Object (); _testObject.name = "Taufik"; _testObject.website = "http://ikt.co.id"; _testObject.occupation = "CTO"; // Initialise notre variable _byteArray, afin que nous puissions commencer à convertir un objet en ByteArray _testByteArray = new ByteArray (); // Convertir l'objet en tableau d'octets, voici comment procéder: convertir un objet en tableau d'octets, C'EST SIMPLE, n'est-ce pas? :)) _testByteArray.writeObject (_testObject); // Encodez le ByteArray en Base64 String (afin que nous puissions les envoyer via PHP ou copier le texte dans le bloc-notes), encore une fois, C’EST TRÈS SIMPLE! var encoded: String = Base64.encodeByteArray (_testByteArray); // Placez la chaîne Base64 encodée dans notre _inputField (afin que nous puissions les copier dans le bloc-notes) _inputField.text = encoded; 

Appuyez sur F11 pour exécuter ce projet. Si la conversion d'un objet en ByteArray est simple, la conversion de la valeur en octets de nos données en Base64 String est aussi simple, grâce à Base64.as.


Étape 12: Conversion de la chaîne codée en Base64 en objet

Nous allons essayer de décoder la chaîne Base64 entrée en un objet chaque fois que l'utilisateur clique sur le _loadButton, changer notre _loadButton_CLICK une fonction. Veuillez lire l'explication commentée à l'intérieur du code:

 fonction privée _loadButton_CLICK (Events: MouseEvent = null): void // Nous devons capturer les erreurs try // Nous décodons notre chaîne Base64 codée en un ByteArray, afin de pouvoir récupérer notre objet retour var DecodedByteArray: ByteArray = Base64. decodeToByteArray (_inputField.text); // Si la conversion d'un objet en ByteArray est simple, la récupération d'un objet à partir de ByteArray est aussi simple que cette var LoadedObject: Object = DecodedByteArray.readObject (); // Préparez-vous à sortir toutes les propriétés et leurs valeurs à l'intérieur de LoadedObject var Output: String = ""; for (var VarName: String dans LoadedObject) Sortie + = VarName + ":" + LoadedObject [VarName] + "
"; // les exporter dans notre _inputField _inputField.htmlText = Output; catch (err: Error) _inputField.text =" Veuillez saisir un ByteArray codé dans ce TextField avant de cliquer sur le bouton 'Charger'. Message d'erreur :: "+ err.message;

Appuyez sur F11 pour exécuter ce projet. Nous obtenons notre chaîne encodée en Base64 de notre _testObject à l'intérieur de notre _champ de saisie; clique le _loadButton pour voir notre projet reconvertir cette chaîne Base64 et afficher toutes ses propriétés et valeurs. Vous pouvez essayer de copier et coller les chaînes Base64 au début de ce didacticiel et lire tous mes messages..


Conclusion

La classe ByteArray est une classe extrêmement puissante et pourtant très simple à utiliser. J'ai vu beaucoup d'excellentes applications Flash utilisant ce ByteArray pour effectuer de nombreuses manipulations de données époustouflantes, telles que celles que j'ai mentionnées au début de ce didacticiel. J'ai entendu beaucoup de programmeurs de jeux Flash utiliser XML pour enregistrer leurs visiteurs. «Sauvegardez les données de jeu», mais comme nous le savons tous déjà, XML est un enfer d'une classe très compliquée. Avec ByteArray, je peux enregistrer quelque chose comme ceci..

 fonction privée CreateByteArray (): void _testObject = new Object (); _testObject.name = "Taufik"; _testObject.website = "http://ikt.co.id"; _testObject.occupation = "CTO"; _testObject.level = 99; // Obtenir l'état de cet inventaire des personnages de jeu var _inventory: Array = new Array (item_id: 5, montant: 1, item_id: 85, montant: 1, item_id: 42, montant: 5); _testObject.inventory = _inventory; // Obtenir quelle est la compétence déjà mise à niveau var _skill: Array = new Array (skill_id: 1, level: 0, skill_id: 2, level: 1); _testObject.skill = _skill; // Initialise notre variable _byteArray, afin que nous puissions commencer à convertir un objet en ByteArray _testByteArray = new ByteArray (); // Convertir l'objet en tableau d'octets, voici comment procéder: convertir un objet en tableau d'octets, C'EST SIMPLE, n'est-ce pas? :)) _testByteArray.writeObject (_testObject); // Encodez le ByteArray en Base64 String (afin que nous puissions les envoyer via PHP ou copier le texte dans le bloc-notes), encore une fois, C’EST TRÈS SIMPLE! var encoded: String = Base64.encodeByteArray (_testByteArray); // Placez la chaîne Base64 encodée dans notre _inputField (afin que nous puissions les copier dans le bloc-notes) _inputField.text = encoded; 

Oui, quelque chose d'aussi compliqué ne prend que quelques lignes de codes, imaginez l'horreur de sauvegarder ces données en utilisant XML et de les récupérer pour une utilisation ultérieure. Dans l'ensemble, je dois dire qu'avec la manipulation de données Byte, vous pouvez réaliser beaucoup de choses, et certaines pourraient être la solution que vous recherchiez depuis tout ce temps..

J'espère que vous avez trouvé ce tutoriel utile. Merci d'avoir lu!