Introduzione a ByteArray

ByteArray è una classe estremamente potente che può essere utilizzata per molte cose relative alla manipolazione dei dati, inclusi (ma non limitati a) il salvataggio dei dati di gioco online, la crittografia dei dati, la compressione dei dati e la conversione di un oggetto BitmapData in un file PNG o JPG. In questa introduzione, utilizzeremo la classe ByteArray per prendere un oggetto AS3 nativo e codificarlo su una stringa che potrebbe essere salvata su un server per il successivo ripristino, quindi decodificarla in un secondo momento.

Nelle esercitazioni precedenti abbiamo visto come utilizzare XML e JSON per codificare i dati in un formato testuale (String). Tuttavia, sia XML che JSON sono progettati per essere leggibili dall'uomo e, di conseguenza, sono molto più lunghi di quanto debbano essere. Può anche essere complicato convertire determinati tipi di oggetti AS3 in entrambi i formati. ByteArray ha alcune funzionalità veramente avanzate, ma per cominciare, ne vedremo una semplice: rende molto facile trasformare un oggetto AS3 in una stringa.


Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:

Quando si incolla una stringa ByteArray codificata in TextField e si fa clic sul pulsante Carica, la decodificherà e mostrerà le proprietà dell'oggetto salvate in essa. Puoi provare i seguenti ByteArrays codificati; copialo e incollalo nel campo di testo e fai clic sul pulsante Carica per vedere di cosa sto parlando:

 // Questo ByteArray mostrerà i miei dati (questo è il ByteArray predefinito caricato) CgsBFW9jY3VwYXRpb24GB0NUTw93ZWjzaXRlBiFodHRwOi8vaWt0LmNvLmlkCW5hbWUGDVRhdWZpawE =
 // Questo ByteArray mostrerà il mio pensiero attuale CgsBIWZvb2RfZm9yX3Rob3VnaHQGgnVJIGFtIHRoaW5raW5nIG9uIHNoYXJpbmcgdGhlIHRlY2huaXF1ZSBpIHVzZWQgdG8gbWFrZSBhIEZ1bGwgRmxhc2ggRHluYW1pYyBXZWJzaXRlIFNFTyBGcmllbmRseSBmb3IgbXkgbmV4dCBUdXRvcmlhbCBpbiBBY3RpdmVUdXRzKy4uLiA8dT5XaGF0IGRvIHlvdSB0aGluaz88L3U + IDxiPmlzIGl0IGEgZ29vZCBpZGVhPC9iPj8B
 // Questo ByteArray parlerà Flash e SEO e la mia esperienza con loro CgsBEXF1ZXN0aW9uBoEDPGI + PHU + Q2FuIGEgZnVsbHkgZHluYW1pYyBGbGFzaCBXZWJzaXRlIGJlIFNFTyBmcmllbmRseTwvdT48L2I + Pz8NYW5zd2VyBoM / SXQgY2FuLCBoZXJlIGlzIHRoZSBwcm9vZiwgPGEgaHJlZj0naHR0cDovL3d3dy5nb29nbGUuY28uaWQvc2VhcmNoP3E9Zmxhc2grc2VvJmllPXV0Zi04Jm9lPXV0Zi04JmFxPXQnIHRhcmdldD0nX2JsYW5rJz5odHRwOi8vd3d3Lmdvb2dsZS5jby5pZC9zZWFyY2g / cT1mbGFzaCtzZW8maWU9dXRmLTgmb2U9dXRmLTgmYXE9dDwvYT4sIGlrdC5jby5pZCBpcyByYW5rZWQgIzYgb3ZlciB0aGVyZQE =

Passaggio 1: creare un nuovo progetto ActionScript

All'interno della finestra "Flash Builder":

  1. Apri Flash Builder 4
  2. Fai clic sul menu File
  3. Passa al nuovo
  4. Fai clic su Progetto ActionScript

Passaggio 2: nuova installazione del progetto ActonScript

All'interno della finestra 'Nuovo progetto ActionScript':

  1. Digita "TUTORIAL_ByteArray" nel campo Nome progetto
  2. Per favore ricorda dove hai salvato il tuo progetto
  3. Fai clic sul pulsante "Fine"

Passaggio 3: Base64.as

Copia Base64.as nella directory 'com' del tuo progetto.

  1. Crea una nuova directory 'com' nella tua directory sorgente.
  2. Scarica il file Base64.as dal download di origine.
  3. Inserisci il file nella directory 'com' appena creata.

Base64.as tornerà utile in seguito. È di Steve Webster, che risiedeva su dynamicflash.com (ha lasciato la community Flash un paio di anni fa).


Step 4: Classi necessarie

Nel TUTORIAL_ByteArray classe (che è la classe principale), per favore importa le seguenti classi per questo tutorial:

 pacchetto 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; public class TUTORIAL_ByteArray estende Sprite public function TUTORIAL_ByteArray () 

Passaggio 5: abituarsi a Flash Builder I

Aggiungi il seguente codice all'interno TUTORIAL_ByteArray Costruttore per un test molto semplice.

 public function TUTORIAL_ByteArray () var _test: String = "Ciao mondo!"; trace (_test); 

Premere il tasto F11 per eseguire questo progetto, si dovrebbe ottenere il messaggio all'interno della finestra della console.


Passaggio 6: abituarsi a Flash Builder II

Ora proviamo a rintracciare il messaggio all'interno _test variabile, ma questa volta lo faremo da un'altra funzione:

 public function TUTORIAL_ByteArray () var _test: String = "Ciao mondo!"; TestFunction ();  funzione privata TestFunction (): void trace (_test); 

Premi CTRL + S per salvare il tuo progetto. Un errore rilevato dopo aver salvato il tuo progetto; questo perché una variabile che è stata dichiarata all'interno di una funzione non sarà disponibile per nessuna altra funzione. Quindi per questo caso, dobbiamo dichiarare il _test variabile all'esterno:

 public function TUTORIAL_ByteArray () TestFunction ();  funzione privata TestFunction (): void trace (_test);  private var _test: String = "Hello world!";

Passaggio 7: Variabili private necessarie

Aggiungi le seguenti variabili private per questo progetto:

 public function TUTORIAL_ByteArray () TestFunction ();  funzione privata 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;

Step 8: UI

Creiamo una semplice interfaccia utente per questo progetto.

Ora che abbiamo bisogno di mostrare qualcosa nel nostro progetto, dobbiamo dichiarare le nostre dimensioni di stage (Controlla linea 13).

Rinominare la nostra funzione TestFunction nella funzione InitII e inserire la seguente riga di codici. Si prega di leggere la spiegazione commentata all'interno del codice.

 [SWF (width = "550" ,, frameRate = "60", pageTitle = "Tutorial ByteArray")] public class TUTORIAL_ByteArray estende Sprite public function TUTORIAL_ByteArray () InitUI ();  funzione privata InitUI (): void // Inizializza i nostri campi di testo in modo che possiamo usarli _loadButton = new TextField (); _inputField = new TextField (); // Fornisci un defaultTextFormat per entrambi (Tahoma a 11pt, colorato 0x777777) _loadButton.defaultTextFormat = _inputField.defaultTextFormat = new TextFormat ("Tahoma", 11, 0x777777); // Assegna a entrambi un bordo _loadButton.border = _inputField.border = true; // Imposta l'autosize per il nostro pulsante di caricamento, in modo che si riduca / ingrandisca automaticamente per adattarsi al testo all'interno di _loadButton.autoSize = TextFieldAutoSize.LEFT; // Imposta su False il selezionabile del nostro Load Button, in modo che l'utente non possa selezionare il testo in esso _loadButton.selectable = false; // Imposta la multilinea e il wordWrap del nostro campo di input su true, in modo che un testo lungo venga automaticamente spostato alla riga successiva _inputField.multiline = _inputField.wordWrap = true; // Abilita l'utente a digitare qualcosa nel nostro campo di input, impostando questo tipo property _inputField.type = TextFieldType.INPUT; // Metti un po 'di testo in Both of them _loadButton.text = "Load"; _inputField.text = ""; // Aggiungili entrambi allo stage, in modo che siano visibili ai nostri visitatori addChild (_inputField); addChild (_loadButton); // Posiziona il nostro campo di input e ingrandiscilo _inputField.x = 25; _inputField.y = 25; _inputField.width = 200; _inputField.height = 150; // C'è una ragione per cui l'ho fatto, in modo che il pulsante di caricamento si trovi direttamente sotto il campo di inserimento // Così puoi posizionare il campo di input dove preferisci, a patto che ci sia questo codice, il pulsante di caricamento rimarrà sotto il campo di input _loadButton.y = _inputField.y + _inputField.height; _loadButton.x = _inputField.x; 

Premere F11 per eseguire questo progetto e vedere la semplice interfaccia utente che abbiamo creato.


Passaggio 9: abilitare l'interattività

Si prega di leggere la spiegazione commentata all'interno del codice

 _loadButton.y = _inputField.y + _inputField.height; _loadButton.x = _inputField.x; // Aggiungi un listener di eventi per il nostro _loadButton, quindi ogni volta che l'utente fa clic su questo pulsante, // Flash chiamerà _loadButton_CLICK () Method _loadButton.addEventListener (MouseEvent.CLICK, _loadButton_CLICK, false, 0, true);  // Questo metodo verrà chiamato ogni volta che l'utente fa clic sulla funzione privata _loadButton _loadButton_CLICK (Events: MouseEvent = null): void // Ottieni tutto ciò che l'utente inserisce e salvale nella nostra _test variable _test = _inputField.text; // Traccia la variabile di variabile _test ("Utente ha inserito il seguente messaggio:" + _test); 

Premere F11 per eseguire questo progetto; prova a digitare qualcosa nel _Campo di inserimento e quindi fare clic su _loadButton. Questa è la tecnica più basilare per ottenere una variabile dal nostro utente e archiviarla nella nostra variabile privata.


Cibo per la mente

Finalmente abbiamo raggiunto i nostri passi più importanti in questo progetto, ma prima di continuare permettimi di fornire uno stimolo mentale per pensare. Attualmente nel nostro progetto, siamo in grado di ottenere un Stringa e memorizzarlo nella nostra variabile privata. Ma è solo una stringa; che ne dici se voglio che un utente digiti qualcosa dentro _Campo di inserimento in modo che io possa ottenere un Oggetto da? Cosa dovrebbe scrivere l'utente? La risposta è un 'ByteArray Base64 codificato'


Passaggio 10: Introduzione a ByteArray

Questa volta procederemo lentamente, in modo da comprendere la classe ByteArray ed essere in grado di creare la propria manipolazione dei dati e applicarla ai propri progetti. Si prega di leggere la spiegazione commentata all'interno del codice:

 public function TUTORIAL_ByteArray () InitUI (); CreateByteArray ();  funzione privata CreateByteArray (): void // Inizializza la nostra variabile _testObject, in modo che possiamo popolare molte proprietà dinamiche e archiviare i dati String in esso (caricherli in seguito ogni volta che l'utente fa clic sul _loadButton) _testObject = new Object (); _testObject.name = "Taufik"; _testObject.website = "http://ikt.co.id"; _testObject.occupation = "CTO"; // Inizializza la nostra variabile _byteArray, in modo che possiamo iniziare la conversione dell'oggetto in un ByteArray _testByteArray = new ByteArray (); // Converti l'oggetto in matrice di byte, questo è il modo in cui lo fai, per convertire un oggetto in un ByteArray, È SEMPLICE no? :)) _testByteArray.writeObject (_testObject); // Vediamo se tutto funziona correttamente trace ("Our first ByteArray created ::" + _testByteArray.toString ()); 

Premere F11 per eseguire questo progetto. Guarda come è semplice, questo ByteArray è una classe estremamente potente e tuttavia non è affatto difficile. Abbiamo preso un oggetto AS3 nativo e lo abbiamo convertito in formato messaggio di azione.

Prima di inviare i dati al nostro PHP Script usando il metodo GET, dovremmo convertirlo in una Base64 String. Questo perché Base64 può essere trasportato da XML (e da HTML).


Passaggio 11: Codifica ByteArray nella stringa Base64

Si prega di leggere la spiegazione commentata all'interno del codice.

 funzione privata CreateByteArray (): void // Inizializza la nostra variabile _testObject, in modo che possiamo popolare molte proprietà dinamiche e memorizzare i dati String in essa // (li caricheremo in seguito ogni volta che l'utente fa clic sul _loadButton) _testObject = new Object (); _testObject.name = "Taufik"; _testObject.website = "http://ikt.co.id"; _testObject.occupation = "CTO"; // Inizializza la nostra variabile _byteArray, in modo che possiamo iniziare la conversione dell'oggetto in un ByteArray _testByteArray = new ByteArray (); // Converti l'oggetto in matrice di byte, questo è il modo in cui lo fai, per convertire un oggetto in un ByteArray, È SEMPLICE no? :)) _testByteArray.writeObject (_testObject); // Codifica ByteArray nella stringa Base64 (in modo che possiamo inviarli tramite PHP o copiare il testo nel blocco note), di nuovo È MOLTO SEMPLICE! var encoded: String = Base64.encodeByteArray (_testByteArray); // Inserisci la stringa Base64 codificata nel nostro _inputField (in modo che possiamo copiarli nel blocco note) _inputField.text = encoded; 

Premere F11 per eseguire questo progetto. Se la conversione di un oggetto in un oggetto ByteArray è semplice, la conversione del valore Byte dei nostri dati nella stringa Base64 è altrettanto semplice, grazie a Base64.as.


Passaggio 12: conversione della stringa Base64 codificata in oggetto

Cercheremo di decodificare la stringa Base64 inserita in un oggetto ogni volta che l'utente fa clic su _loadButton, cambia nostro _loadButton_CLICK funzione. Si prega di leggere la spiegazione commentata all'interno del codice:

 funzione privata _loadButton_CLICK (Eventi: MouseEvent = null): void // Dobbiamo catturare qualsiasi errore try // Decodifichiamo la nostra stringa Base64 codificata in un ByteArray, in modo che possiamo recuperare il nostro oggetto indietro var DecodedByteArray: ByteArray = Base64. decodeToByteArray (_inputField.text); // Se la conversione di un oggetto in ByteArray è semplice, il richiamo di un oggetto da ByteArray è semplice come questa var LoadedObject: Object = DecodedByteArray.readObject (); // Preparare l'output di tutte le proprietà e i loro valori all'interno di LoadedObject var Output: String = ""; per (var VarName: String in LoadedObject) Output + = VarName + ":" + LoadedObject [VarName] + "
"; // Esegui l'output nel nostro _inputField _inputField.htmlText = Output; catch (err: Error) _inputField.text =" Inserisci un ByteArray codificato in questo TextField prima di fare clic sul pulsante "Load". Messaggio di errore :: "+ err.message;

Premere F11 per eseguire questo progetto. Otteniamo la nostra stringa Base64 codificata del nostro _testObject dentro il nostro _Campo di inserimento; clicca il _loadButton per vedere il nostro progetto, riconvertire questa Base64 String e visualizzare tutte le sue proprietà e valori. Puoi provare a copiare e incollare Base64 Strings all'inizio di questo tutorial e leggere tutti i miei messaggi.


Conclusione

La classe ByteArray è una classe estremamente potente, eppure è molto semplice da usare. Ho visto molte grandi app di Flash là fuori che utilizzano questo ByteArray per eseguire così tante manipolazioni di dati strabilianti, come quelle menzionate all'inizio di questo tutorial. Ho sentito molti programmatori di giochi Flash utilizzare XML per salvare i loro visitatori "Salva dati di gioco", ma come tutti sappiamo già, XML è una classe infernale di una classe molto complicata, con ByteArray posso salvare qualcosa del genere FACILMENTE.

 funzione privata CreateByteArray (): void _testObject = new Object (); _testObject.name = "Taufik"; _testObject.website = "http://ikt.co.id"; _testObject.occupation = "CTO"; _testObject.level = 99; // Ottieni lo stato di questo inventario dei personaggi del gioco var _inventory: Array = new Array (item_id: 5, amount: 1, item_id: 85, amount: 1, item_id: 42, amount: 5); _testObject.inventory = _inventory; // Ottieni qual è l'abilità che già livellano var _skill: Array = new Array (skill_id: 1, livello: 0, skill_id: 2, livello: 1); _testObject.skill = _skill; // Inizializza la nostra variabile _byteArray, in modo che possiamo iniziare la conversione dell'oggetto in un ByteArray _testByteArray = new ByteArray (); // Converti l'oggetto in matrice di byte, questo è il modo in cui lo fai, per convertire un oggetto in un ByteArray, È SEMPLICE no? :)) _testByteArray.writeObject (_testObject); // Codifica ByteArray nella stringa Base64 (in modo che possiamo inviarli tramite PHP o copiare il testo nel blocco note), di nuovo È MOLTO SEMPLICE! var encoded: String = Base64.encodeByteArray (_testByteArray); // Inserisci la stringa Base64 codificata nel nostro _inputField (in modo che possiamo copiarli nel blocco note) _inputField.text = encoded; 

Sì, qualcosa di complicato richiede solo una coppia di codici, immagina l'orrore di salvare questi dati usando XML e recuperarli per un ulteriore utilizzo. Tutto sommato devo dire che con la manipolazione dei dati di Byte puoi ottenere molte cose, e alcune potrebbero essere la soluzione che stavi cercando per tutto questo tempo.

Spero che tu abbia trovato utile questo tutorial. Grazie per aver letto!