Advertisement
  1. Code
  2. ActionScript
Code

Introduction to ByteArray

by
Difficulty:IntermediateLength:ShortLanguages:

ByteArray is an extremely powerful Class that can be used for many things related to data manipulation, including (but not limited to) saving game data online, encrypting data, compressing data, and converting a BitmapData object to a PNG or JPG file. In this introduction, we'll use the ByteArray class to take a native AS3 object and encode it to a string that could be saved to a server for later recovery, then decode it later.

In previous tutorials we've seen how to use XML and JSON to encode data in a textual (String) format. However, both XML and JSON are designed to be human-readable, and as a result they're much longer than they need to be. It can also be tricky to convert certain types of AS3 object to either format. ByteArray has some truly advanced features, but to start with, we'll just look at one simple one: it makes it very easy to turn an AS3 object into a String.


Final Result Preview

Let's take a look at the final result we will be working towards:

When you paste an encoded ByteArray string into the TextField and click the Load button, it will decrypt it, and show the object properties saved in it. You can try the following encoded ByteArrays; copy-paste them into the TextField and click the Load button to see what I am talking about:


Step 1: Create New ActionScript Project

Create New ActionScript Project

Within the 'Flash Builder' window :

  1. Open Flash Builder 4
  2. Click the File Menu
  3. Hover to New
  4. Click ActionScript Project

Step 2: New ActonScript Project Setup

ActionScript Project Setup

Within the 'New ActionScript Project' window :

  1. Type 'TUTORIAL_ByteArray' into Project name field
  2. Please remember where you save your project
  3. Click 'Finish' button

Step 3: Base64.as

Copy Base64.as into your project 'com' directory.

Copy Base64.as file into 'com' directory
  1. Create a new 'com' directory inside your source directory.
  2. Download the Base64.as file from the source download.
  3. Put the file into the newly created 'com' directory.

Base64.as will come in useful later. It's by Steve Webster, who used to reside at dynamicflash.com (he left the Flash community a couple of years ago).


Step 4: Necessary Classes

Import all Classes used in this project

In TUTORIAL_ByteArray class (which is the main class), please import the following Classes for this tutorial:


Step 5: Getting used to Flash Builder I

Trace the 'Hello World' message

Add the following code inside TUTORIAL_ByteArray Constructor for a very simple test.

Press F11 key to run this project, you should get the message inside the Console Window.


Step 6: Getting used to Flash Builder II

Local variable only available inside the function it is created

Now let's try to trace the message inside _test variable, but this time we will do it from another function:

Press CTRL+S to save your project. An error detected after you saved your project; this is because a variable which has been declared inside a function will not be available for any other function. So for this case, we need to declare the _test variable outside:

Private variables are available to all function inside the same class

Step 7: Necessary Private Variables

Create all private variables for this project

Please add the following private variables for this project:


Step 8: UI

Let's create a simple user interface for this project.

a Simple user interface

Now that we need to display something into our project, we need to declare our stage sizes (Check Line 13).

Rename our TestFunction into InitUI function, and put the following line of codes inside. Please read the explanation commented inside the code.

Press F11 to run this project and see the simple user interface we have created.


Step 9: Enable Interactivity

Type into the field and click the load button

Please read the explanation commented inside the code

Press F11 to run this project; try typing something into the _inputField and then click the _loadButton. This is the most basic technique of getting a variable from our user and storing it into our private variable.


Food for Thought

We have finally reach our most important steps in this project, but before we continue let me provides a mental stimulus for thinking. Currently in our project, we are capable of getting a String and storing it in our private variable. But it is only a string; how about if I want a user to type in something inside _inputField so that I can get an Object from it? What should the user type? The answer is an 'Encoded Base64 ByteArray'


Step 10: Introduction to ByteArray

Output from our ByteArray

We will proceed slowly this time, so that you will understand the ByteArray class and be able to create your own data manipulation and apply it to your own projects. Please read the explanation commented inside the code:

Press F11 to run this project. See how simple it is, this ByteArray is an extremely powerful class and yet it is not hard at all. We've taken a native AS3 Object and converted it to Action Message Format.

Before sending the data to our PHP Script using the GET method, we should convert it into a Base64 String. This is because Base64 can be carried by XML (and by HTML).


Step 11: Encoding ByteArray into Base64 String

a Base64 String representation of our Byte data

Please read the explanation commented within the code.

Press F11 to run this project. If converting an Object into a ByteArray is simple, converting the Byte value of our data into Base64 String is as simple, thanks to Base64.as.


Step 12: Converting Encoded Base64 String into Object

Converting a Base64 String into Object and displaying its properties and values

We will try to decode the entered Base64 String into an Object whenever the user clicks the _loadButton, change our _loadButton_CLICK function. Please read the explanation commented inside the code:

Press F11 to run this project. We get our encoded Base64 String of our _testObject inside our _inputField; click the _loadButton to see our project convert this Base64 String back and display all of its properties and values. You can try to copy and paste the Base64 Strings at the beginning of this tutorial and read all of my messages.


Conclusion

The ByteArray Class is an extremely powerful Class, and yet it is very simple to use. I have seen many great Flash apps out there utilizing this ByteArray to perform so many mind blowing data manipulation, such as those kinds I mentioned at the beginning of this tutorial. I have heard many Flash game programmers utilize XML to save their visitors' 'Save Game Data', but as we all already know, XML is one hell of a very complicated class; with ByteArray I can save something like this EASILY.

Yeah, something this complicated only takes a couple line of codes, imagine the horror of saving this data using XML and retrieving them back for further use. All in all I have to say that with Byte data manipulation you can achieve a lot of things, and some might be the solution you have been looking for all this time.

I hope you have found this tutorial useful. Thanks for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.