Einführung in ByteArray

ByteArray ist eine sehr leistungsstarke Klasse, die für viele Dinge im Zusammenhang mit der Datenmanipulation verwendet werden kann, einschließlich (aber nicht beschränkt auf) Online-Speichern von Spieldaten, Verschlüsseln von Daten, Komprimieren von Daten und Konvertieren eines BitmapData-Objekts in eine PNG- oder JPG-Datei. In dieser Einführung verwenden wir die ByteArray-Klasse, um ein natives AS3-Objekt in eine Zeichenfolge zu codieren, die zur späteren Wiederherstellung auf einem Server gespeichert und später dekodiert werden kann.

In früheren Tutorials haben wir gesehen, wie XML und JSON zum Codieren von Daten in einem Textformat (String) verwendet wurden. XML und JSON sind für Menschen lesbar, und sie sind viel länger als es nötig ist. Es kann auch schwierig sein, bestimmte Arten von AS3-Objekten in beide Formate zu konvertieren. ByteArray verfügt über einige wirklich erweiterte Funktionen, aber zunächst sehen wir uns nur eine einfache Sache an: Sie macht es sehr einfach, ein AS3-Objekt in einen String umzuwandeln.

Endergebnis Vorschau

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

Wenn Sie eine codierte ByteArray-Zeichenfolge in das TextField einfügen und auf die Schaltfläche Laden klicken, wird sie entschlüsselt und die darin gespeicherten Objekteigenschaften angezeigt. Sie können die folgenden codierten ByteArrays ausprobieren. Kopieren Sie sie, fügen Sie sie in das TextField ein und klicken Sie auf die Schaltfläche Laden, um zu sehen, wovon ich spreche:

1

//This ByteArray will show my data (This is the default ByteArray loaded)

2

CgsBFW9jY3VwYXRpb24GB0NUTw93ZWJzaXRlBiFodHRwOi8vaWt0LmNvLmlkCW5hbWUGDVRhdWZpawE=

1

//This ByteArray will show my current thought

2

CgsBIWZvb2RfZm9yX3Rob3VnaHQGgnVJIGFtIHRoaW5raW5nIG9uIHNoYXJpbmcgdGhlIHRlY2huaXF1ZSBpIHVzZWQgdG8gbWFrZSBhIEZ1bGwgRmxhc2ggRHluYW1pYyBXZWJzaXRlIFNFTyBGcmllbmRseSBmb3IgbXkgbmV4dCBUdXRvcmlhbCBpbiBBY3RpdmVUdXRzKy4uLiA8dT5XaGF0IGRvIHlvdSB0aGluaz88L3U+IDxiPmlzIGl0IGEgZ29vZCBpZGVhPC9iPj8B

1

//This ByteArray will talk about Flash and SEO and my experience with them

2

CgsBEXF1ZXN0aW9uBoEDPGI+PHU+Q2FuIGEgZnVsbHkgZHluYW1pYyBGbGFzaCBXZWJzaXRlIGJlIFNFTyBmcmllbmRseTwvdT48L2I+Pz8NYW5zd2VyBoM/SXQgY2FuLCBoZXJlIGlzIHRoZSBwcm9vZiwgPGEgaHJlZj0naHR0cDovL3d3dy5nb29nbGUuY28uaWQvc2VhcmNoP3E9Zmxhc2grc2VvJmllPXV0Zi04Jm9lPXV0Zi04JmFxPXQnIHRhcmdldD0nX2JsYW5rJz5odHRwOi8vd3d3Lmdvb2dsZS5jby5pZC9zZWFyY2g/cT1mbGFzaCtzZW8maWU9dXRmLTgmb2U9dXRmLTgmYXE9dDwvYT4sIGlrdC5jby5pZCBpcyByYW5rZWQgIzYgb3ZlciB0aGVyZQE=

Schritt 1: Erstellung des neuen ActionScript-Projekt

Im 'Flash Builder'-Fenster:

1. Öffnen Sie Flash Builder 4
2. Klicken Sie auf das Menü Datei
3. Bewegen Sie den Mauszeiger zu Neu
4. Klicken Sie auf ActionScript-Projekt

Schritt 2: Neues ActonScript-Projekt-Setup

Im Fenster 'Neues ActionScript-Projekt':

1. Geben Sie 'TUTORIAL_ByteArray' in das Feld Projektname ein
2. Bitte denken Sie daran, wo Sie Ihr Projekt speichern
3. Klicken Sie auf die Schaltfläche "Fertig stellen"

Schritt 3: Base64.as

Kopieren Sie Base64.as in Ihr Projektverzeichnis 'com'.

1. Erstellen Sie ein neues 'com'-Verzeichnis in Ihrem Quellverzeichnis.
2. Laden Sie die Datei Base64.as vom Quelldownload herunter.
3. Legen Sie die Datei in das neu erstellte Verzeichnis 'com'.

Base64.as wird später nützlich sein. Es ist von Steve Webster, der früher bei dynamicflash.com wohnte (er hat die Flash-Community vor ein paar Jahren verlassen).

Schritt 4: Notwendige Klassen

Importieren Sie in der TUTORIAL_ByteArray-Klasse (der Hauptklasse) die folgenden Klassen in diesem Lernprogramm:

1

package

2

{

3

	import flash.display.Sprite;

4

	import flash.text.TextField;

5

	import flash.text.TextFieldType;

6

	import flash.text.TextFieldAutoSize;

7

	import flash.text.TextFormat;

8

	import flash.events.MouseEvent;

9

	import flash.utils.ByteArray;

10

	import com.Base64;

11

12

	public class TUTORIAL_ByteArray extends Sprite

13

	{

14

		public function TUTORIAL_ByteArray()

15

		{

16

17

		}

18

	}

19

}

Schritt 5: Verwendung von Flash Builder I.

Fügen Sie den folgenden Code in TUTORIAL_ByteArray Constructor für einen sehr einfachen Test hinzu.

1

public function TUTORIAL_ByteArray()

2

{

3

	var _test:String = "Hello world!";

4

	trace(_test);

5

}

Drücken Sie die Taste F11, um dieses Projekt auszuführen. Die Meldung sollte im Konsolenfenster angezeigt werden.

Schritt 6: Verwendung von Flash Builder II

Versuchen wir nun, die Nachricht in der Variablen _test zu verfolgen, aber diesmal werden wir dies von einer anderen Funktion aus tun:

1

public function TUTORIAL_ByteArray()

2

{

3

	var _test:String = "Hello world!";

4

	TestFunction();

5

}

6

private function TestFunction():void{

7

	trace(_test);

8

}

Drücken Sie STRG + S, um Ihr Projekt zu speichern. Nach dem Speichern Ihres Projekts wurde ein Fehler festgestellt. Dies liegt daran, dass eine Variable, die innerhalb einer Funktion deklariert wurde, für keine andere Funktion verfügbar ist. In diesem Fall müssen wir die Variable _test außerhalb deklarieren:

1

public function TUTORIAL_ByteArray()

2

{

3

	TestFunction();

4

}

5

private function TestFunction():void{

6

	trace(_test);

7

}

8

private var _test:String = "Hello world!";

Schritt 7: Notwendige private Variablen

Bitte fügen Sie die folgenden privaten Variablen für dieses Projekt hinzu:

1

public function TUTORIAL_ByteArray()

2

{

3

	TestFunction();

4

}

5

private function TestFunction():void{

6

	trace(_test);

7

}

8

private var _test:String = "Hello World!";

9

private var _loadButton:TextField;

10

private var _inputField:TextField;

11

private var _testObject:Object;

12

private var _testByteArray:ByteArray;

Schritt 8:UI

Lassen Sie uns eine einfache Benutzeroberfläche für dieses Projekt erstellen.

Jetzt, da wir etwas in unserem Projekt anzeigen müssen, müssen wir unsere Bühnengrößen deklarieren (Check Line 13).

Benennen Sie unsere TestFunction in InitUI-Funktion um und fügen Sie die folgende Codezeile ein. Bitte lesen Sie die Erklärung im Code.

1

[SWF(width="550", height="400", frameRate="60", pageTitle="Tutorial ByteArray")]

2

public class TUTORIAL_ByteArray extends Sprite

3

{

4

	public function TUTORIAL_ByteArray()

5

	{

6

		InitUI();

7

	}

8

	private function InitUI():void{

9

		//Initialize our TextFields so that we can use them

10

		_loadButton = new TextField();

11

		_inputField = new TextField();

12

13

		//Give a defaultTextFormat for both of them (Tahoma at 11pt, colored 0x777777)

14

		_loadButton.defaultTextFormat = _inputField.defaultTextFormat = new TextFormat("Tahoma", 11, 0x777777);

15

16

		//Give both of them a border 

17

		_loadButton.border = _inputField.border = true;

18

19

		//Set the autosize for our Load Button , so that it will automatically shrink / grow to fit the text inside

20

		_loadButton.autoSize = TextFieldAutoSize.LEFT;

21

22

		//Set the selectable of our Load Button to false, so that user cannot select the text in it

23

		_loadButton.selectable = false;

24

25

		//Set the multiline and wordWrap of our Input Field to true, so that a long text will automatically wrapped to the next line

26

		_inputField.multiline = _inputField.wordWrap = true;

27

28

		//Enable user to type something into our Input Field, by setting this type property 

29

		_inputField.type = TextFieldType.INPUT;

30

31

		//Put some text into Both of them

32

		_loadButton.text = "Load";

33

		_inputField.text = "";

34

35

		//Add both of them into stage, so that they are visible to our visitors

36

		addChild(_inputField);

37

		addChild(_loadButton);

38

39

		//Position our Input Field and make it bigger 

40

		_inputField.x = 25;

41

		_inputField.y = 25;

42

		_inputField.width = 200;

43

		_inputField.height = 150;

44

45

		//There is a reason why i did this, so that the Load Button is located directly below our Input Field

46

		//So you can position the Input Field anywhere you like, as long as there is this code, the Load Button will stick below the Input Field

47

		_loadButton.y = _inputField.y + _inputField.height;

48

		_loadButton.x = _inputField.x;

49

	}

Drücken Sie F11, um dieses Projekt auszuführen und die von uns erstellte einfache Benutzeroberfläche anzuzeigen.

Schritt 9: Aktivieren Sie die Interaktivität

Bitte lesen Sie die Erklärung im Code

1

	_loadButton.y = _inputField.y + _inputField.height;

2

	_loadButton.x = _inputField.x;

3

4

	//Add an Event Listener for our _loadButton, so whenever the user clicks this button, 

5

	//Flash will call _loadButton_CLICK() Method

6

	_loadButton.addEventListener(MouseEvent.CLICK, _loadButton_CLICK, false, 0, true);

7

}

8

//This method will be called whenever user click the _loadButton

9

private function _loadButton_CLICK(Events:MouseEvent = null):void{

10

	//Get anything that the user input and save them into our _test variable

11

	_test = _inputField.text;

12

13

	//Trace the _test variable

14

	trace("User input the following message : " + _test);

15

}

Drücken Sie F11, um dieses Projekt zu starten. Versuchen Sie, etwas in das _inputField einzugeben, und klicken Sie dann auf den _loadButton. Dies ist die grundlegendste Technik, um eine Variable von unserem Benutzer abzurufen und in unserer privaten Variablen zu speichern.

Denkanstöße

Wir haben endlich unsere wichtigsten Schritte in diesem Projekt erreicht, aber bevor wir fortfahren, möchte ich einen mentalen Anreiz zum Denken geben. Derzeit sind wir in unserem Projekt in der Lage, einen String abzurufen und in unserer privaten Variablen zu speichern. Aber es ist nur eine Schnur; Wie wäre es, wenn ein Benutzer etwas in _inputField eingeben soll, damit ich ein Objekt daraus abrufen kann? Was soll der Benutzer eingeben? Die Antwort ist ein 'Encoded Base64 ByteArray'

Schritt 10: Einführung in ByteArray

Wir werden diesmal langsam vorgehen, damit Sie die ByteArray-Klasse verstehen und in der Lage sind, Ihre eigene Datenmanipulation zu erstellen und auf Ihre eigenen Projekte anzuwenden. Bitte leen Sie die Erklärung im Code:

1

public function TUTORIAL_ByteArray()

2

{

3

	InitUI();

4

	CreateByteArray();

5

}

6

private function CreateByteArray():void{

7

	//Initialize our _testObject variable, so that we can populate many dynamic properties and store String data in it (we will load them later whenever user clicked the _loadButton)

8

	_testObject = new Object();

9

	_testObject.name = "Taufik";

10

	_testObject.website = "<a href='https://ikt.co.id'>http://ikt.co.id</a>";

11

	_testObject.occupation = "CTO";

12

13

	//Initialize our _byteArray variable, so that we can start converting object into a ByteArray

14

	_testByteArray = new ByteArray();

15

16

	//Convert the Object into Byte Array, This is how you do it, to convert an Object into a ByteArray, IT IS SIMPLE isnt it? :))

17

	_testByteArray.writeObject(_testObject);

18

19

	//Lets see if everything works properly

20

	trace("Our first ByteArray created :: " + _testByteArray.toString());

21

}

Drücken Sie F11, um dieses Projekt auszuführen. Sehen Sie, wie einfach es ist, dieses ByteArray ist eine extrem mächtige Klasse und doch ist es überhaupt nicht schwer. Wir haben ein natives AS3-Objekt genommen und es in das Aktionsnachrichtenformat konvertiert.

Bevor wir die Daten mit der GET-Methode an unser PHP-Skript senden, sollten wir sie in einen Base64-String konvertieren. Dies liegt daran, dass Base64 von XML (und von HTML) übertragen werden kann.

Schritt 11: Codieren von ByteArray in Base64 String

Bitte lesen Sie die Erklärung im Code.

1

private function CreateByteArray():void{

2

	//Initialize our _testObject variable, so that we can populate many dynamic properties and store String data in it 

3

	//(we will load them later whenever user clicks the _loadButton)

4

	_testObject = new Object();

5

	_testObject.name = "Taufik";

6

	_testObject.website = "<a href='http://ikt.co.id'>http://ikt.co.id</a>";

7

	_testObject.occupation = "CTO";

8

9

	//Initialize our _byteArray variable, so that we can start converting object into a ByteArray

10

	_testByteArray = new ByteArray();

11

12

	//Convert the Object into Byte Array, This is how you do it, to convert an Object into a ByteArray, IT IS SIMPLE isnt it? :))

13

	_testByteArray.writeObject(_testObject);

14

15

	//Encode the ByteArray into Base64 String (so that we can send them via PHP or copy the text to notepad), again IT IS VERY SIMPLE!

16

	var encoded:String = Base64.encodeByteArray(_testByteArray);

17

18

	//Put the encoded Base64 String into our _inputField (so that we can copy them into notepad)

19

	_inputField.text = encoded;

20

}

Drücken Sie F11, um dieses Projekt auszuführen. Wenn das Konvertieren eines Objekts in ein ByteArray einfach ist, ist das Konvertieren des Bytewerts unserer Daten in Base64 String dank Base64.as genauso einfach.

Schritt 12: Konvertieren eines codierten Base64-Strings in ein Objekt

Wir werden versuchen, den eingegebenen Base64-String in ein Objekt zu dekodieren, wenn der Benutzer auf den _loadButton klickt, und unsere _loadButton_CLICK-Funktion ändern. Bitte lesen Sie die Erklärung im Code:

1

private function _loadButton_CLICK(Events:MouseEvent = null):void{

2

	//We have to catch any Errors

3

	try{

4

		//We decode our encoded Base64 String into a ByteArray, so that we can retrieve our Object back

5

		var DecodedByteArray:ByteArray = Base64.decodeToByteArray(_inputField.text);

6

7

		//If converting an Object into ByteArray is simple, retrieving an Object from ByteArray is as simple as this

8

		var LoadedObject:Object = DecodedByteArray.readObject();

9

10

		//Prepare to output all properties and their values inside the LoadedObject

11

		var Output:String = "";

12

		for (var VarName:String in LoadedObject){

13

			Output += VarName + " : " + LoadedObject[VarName] + "<br>";

14

		} 

15

16

		//Output them into our _inputField 

17

		_inputField.htmlText = Output;

18

	}catch(err:Error){

19

		_inputField.text = "Please input an Encoded ByteArray into this TextField before clicking the 'Load' Button. Error message :: " + err.message;

20

	}

21

}

Drücken Sie F11, um dieses Projekt auszuführen. Wir erhalten unseren codierten Base64-String unseres _testObject in unserem _inputField; Klicken Sie auf den _loadButton, um zu sehen, wie unser Projekt diesen Base64-String zurückkonvertiert und alle seine Eigenschaften und Werte anzeigt. Sie können versuchen, die Base64-Zeichenfolgen zu Beginn dieses Tutorials zu kopieren und einzufügen und alle meine Nachrichten zu lesen.

Abschluss

Die ByteArray-Klasse ist eine äußerst leistungsstarke Klasse und dennoch sehr einfach zu bedienen. Ich habe viele großartige Flash-Apps gesehen, die dieses ByteArray verwenden, um so viele atemberaubende Datenmanipulationen durchzuführen, wie die Arten, die ich zu Beginn dieses Tutorials erwähnt habe. Ich habe gehört, dass viele Flash-Spielprogrammierer XML verwenden, um die "Spieldaten speichern" ihrer Besucher zu speichern, aber wie wir alle bereits wissen, ist XML eine verdammt komplizierte Klasse. Mit ByteArray kann ich so etwas EINFACH speichern.

1

private function CreateByteArray():void{

2

	_testObject = new Object();

3

	_testObject.name = "Taufik";

4

	_testObject.website = "<a href='http://ikt.co.id'>http://ikt.co.id</a>";

5

	_testObject.occupation = "CTO";

6

	_testObject.level = 99;

7

8

	//Get the state of this Game Character Inventory

9

	var _inventory:Array = new Array({item_id:5, amount:1}, {item_id:85, amount:1}, {item_id:42, amount:5});

10

	_testObject.inventory = _inventory;

11

12

	//Get what is the skill they already level up

13

	var _skill:Array = new Array({skill_id:1, level:0}, {skill_id:2, level:1});

14

	_testObject.skill = _skill;

15

16

	//Initialize our _byteArray variable, so that we can start converting object into a ByteArray

17

	_testByteArray = new ByteArray();

18

19

	//Convert the Object into Byte Array, This is how you do it, to convert an Object into a ByteArray, IT IS SIMPLE isnt it? :))

20

	_testByteArray.writeObject(_testObject);

21

22

	//Encode the ByteArray into Base64 String (so that we can send them via PHP or copy the text to notepad), again IT IS VERY SIMPLE!

23

	var encoded:String = Base64.encodeByteArray(_testByteArray);

24

25

	//Put the encoded Base64 String into our _inputField (so that we can copy them into notepad)

26

	_inputField.text = encoded;

27

}

Ja, etwas, das so kompliziert ist, braucht nur ein paar Zeilen Code. Stellen Sie sich den Schrecken vor, diese Daten mit der Hilfe von XML zu speichern und zur weiteren Verwendung wieder abzurufen. Ich muss noch sagen, dass Sie mit der Byte-Datenmanipulation viele Dinge erreichen können, und einige von Ihnen könnten die Lösung finden, nach der Sie die ganze Zeit gesucht haben.

Ich hoffe, Sie haben dieses Tutorial nützlich gefunden. Danke für das Lesen!