Archives for February 2010...

SharedObject - Flash Cookies

Tue Feb 16 06:04:06 2010

For anyone making applications using ActionScript 3.0, SharedObject is an absolute must! It allows data to be stored inside the flash player itself, meaning applications you create do not have to reply on browser cookies, and thus there is no worry of browser cookies being deleted or the hassle of writing a program in something like PHP to store your data on a database for example... although that may be a little more efficient especially if you are writing something that stores long-term data.

To use SharedObject, all you have to do is create a variable and datatype it to SharedObject. Don't forget to import flash.net.SharedObject if you haven't already. Take at the variable below.

var myData:SharedObject = SharedObject.getLocal("data"); 

By setting the SharedObject it will automatically be created by the Flash Player. There are no further steps involved in creating this data so it's quick and easy.

The SharedObject will accept all kinds of data including numbers, strings, arrays, etc. When data is not already set inside your SharedObject, it will return undefined. For example, I have yet to set any data in the variable 'myData' that I created earlier and so if I tried to trace any data I would get undefined.

trace("My data : "+myData.data.mySetData); //traces My data : undefined 

If I were now to actually set data and then trace it, SharedObject would return that data back to me.

myData.data.mySetData = "I set this."; 
trace("My data : "+myData.data.mySetData); //traces My data : I set this

Additionally, you can clear any data set by calling the clear() method on your variable.

myData.clear();
trace("My data : "+myData.data.mySetData); //traces My data : undefined

Naturally, that is not all there is to know about SharedObject, but it should be enough to get those who are not yet savvy about this on their feet. As a side note, this has been around for quite sometime and those game creators who haven't yet checked this out should definitely do so.

Tweet

Use the Flex Framework with the Least MXML Possible

Mon Feb 15 00:54:09 2010

Using the Flex Framework is great tool to have if you know what you're doing. Sadly, not everyone has the time to put in the extra man hours to learn it, although I would thoroughly recommend trying to do so if you had the chance, as it can speed up your workflow immensely and there are so many pre-made components out there that you are really spoiled for choice.

In any regard, this post is mainly for those people who want to know how they can import components such as the ComboBox, Button, and the infamous DataGrid, and all with the minimum amount of MXML possible. However, I would just like to say before I go any further that it is probably a lot faster and easier in most cases just to learn that little bit of MXML than by doing it all in ActionScript alone... and believe me, being a big ActionScript fan, I was one of the ones who just didn't want to let go either. Anyhow, with all that said, let's get coding.

To my current knowledge, there are a few ways of getting this to work. In this post I will run through what I think is the best way of doing it. First off, you will need to create an MXML file. All files after this one can be ActionScript files, but the main project file must be a MXML file. Inside that file, you will need to place the following code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:classLocation="*">
	
	<classLocation:myClassName/>

</mx:Application>

I have set the layout to absolute since this will enable you to put your objects anywhere on the screen. Note that there are two more properties that you can play with; vertical and horizontal, which I won't go into now, but Flash coders for example will probably feel most at home with absolute layout.

The important thing to remember for this file is that when importing you own classes, you have to set the location so that flex can find it. I have used xmlns:classLocation="*", the * [hash] of which simply denotes 'root level', or the place where the MXML file exists. Alot of flex coders put their custom classes or components inside a folder called components and so they would use xmlns:classLocation="components.*". Finally on line 5 we call out custom class/component using classLocation:myClassName/>. The actual class name is determined in place of 'myClassName'.

Next create an ActionScript file as you would normally. The code below can be used for quick reference.

package{	
   import mx.core.*;
   import mx.controls.*;	

   public class Main {

      public function Main(){
		
         var app:Object = FlexGlobals.topLevelApplication;
         var l:Label = new Label();
         app.addChild(l);
         l.text = "Minimum MXML";

      }
   }
}

The code above simply places a label on the stage and sets the text to "Minimum MXML". The important thing to remember here is that in most cases you will need to set a reference to the FlexGlobals.toplevelapplication in order to add things to the display list, which is something I discovered recently after the move from Flex 3 to the Flex 4 SDK. On line 9 of the code above, I have created a variable called app, datatyped it to an Object and set it to FlexGlobals.toplevelapplication. Now each time I add something to the stage, I use app as a reference as seen on line 11.

And that's it. Compile the MXML file and you should see the words "Minimum MXML". If you aren't sure on how to compile MXML and ActionScript, take a look at one of my previous posts Compile AS files with Flex SDK

If you would like to download the example files for this post, you can get them from the link below.

Download Minimum MXML files

**Remember though, I do recommend learning a little MXML if that's why you are looking for this information. Don't fight it! You know that you want it really.

Tweet

Passing Serialized Arrays Between PHP Pages

Fri Feb 12 05:58:43 2010

Passing arrays between pages can be a useful thing to know, particularly when you feel data is a little too long to stick inside a url and use $_GET[]. That is not to say that this is the best way of doing it. I am quite sure that there are many coders out there just shouting about a better method, or about the does and don'ts of PHP, but this, as I say, is good to know. So here goes...

First off, we need an array to pass. I will be using the one below as an example.

$arrayToSerialize = array("key1"=>"value1","key2"=>"value2","key3"=>"value3");

As you can see, it is an associative array with keys and values. To serialized the array simply call the serialized() method and pass in the array name, as in the following example. Note that I have used the variable $serializedArray to store the serialized data.

$serializedArray = serialize($arrayToSerialize);

Now we create a form to send the serialized data on a submit button click as follows.

<form action="unserialize.php" method="post">

      <input type="hidden" id="serializedArray" name="serializedArray" 
         value='<?php echo $serializedArray;?>'/>

      <input type="submit" value="Continue;">
</form>

The action of the form above points to a file we will create next called unserialize.php. The method is set to post as we will be sending the data. Inside the form, there is a hidden input which will store and pass the data on to the unserialize.php file. The name of the hidden input is set to 'serializedArray' which we will need to remember for later. Lastly, inside the form also resides the submit button that will trigger the form and send the data.

Next we need to create a file called unserialize.php as we mentioned earlier. Inside that file we write the following.

$serializedArray = $_REQUEST["serializedArray"]; 
$unserializedArray = unserialize(stripslashes($serializedArray));  

The code above captures the serialized data in a variable again called $serializedArray. Notice that the name of the hidden input inside serialize.php is placed inside a server $_REQUEST[] to retrived the data. In the line after that the data is unserialized with the unserialize() method call, passing in the $serializedArray variable. The unserialized data is them stored in another variable called $unserializedArray. The $unserializedArrayvariable can now be used as any other array. If you use print_r($unserializedArray), you will notice the results shown below are the same as the original array passed from serialized.php.

Results of print_r($unserializedArray) :

Array ( [key1] => value1 [key2] => value2 [key3] => value3 )

I have put together a quick example which you can download from the link below.

Download Serialize Array Example

Tweet

Migrating From FLEX 3 to FLEX 4: FlexGlobals.topLevelApplica

Sun Feb 7 04:16:48 2010

Today I cam across an interesting problem while working with the new Flex 4 SDK. I kept getting the following error.

Warning: 'application' has been deprecated since 4.0.  
Please use 'FlexGlobals.topLevelApplication'.

Naturally, I had no idea what this meant until I did a little research. Apparently, an application runs in its own ApplicationDomain which in turn has it's own topLevelApplication. Thus, you have to set the correct reference to the constructor of said top level application in order to get rid of the warning.

Replace this...

var mxmlApp:Application = Application(Application.application);

with this...

var mxmlApp:Object = FlexGlobals.topLevelApplication;

...and the sun will shine once more.

Tweet

Easy ActionScript Chain Events

Fri Feb 5 15:19:45 2010

Ok, so this week I have been playing around with events and building all kinds of useless applications... and all while trying to further my education in the Flex Framework and Papervision 3D, which is all going ever so slowly. However, something interesting came from all my futility when I created a class that would pass multiple EventListeners together in a single sentence, giving you something that resembles the functionality of jQuery, albeit a lot less advanced. Allow me to explain...

FIrst of all, this class requires instantiation. Therefore, you will need the following import statement and the call for instantiation.

import Bind;
private var bind:Bind = new Bind();

Ok, so now that we have our Bind class ready, next we need something to test it on. Let's make a quick button.

var btn:MovieClip = new MovieClip();
btn.graphics.lineStyle(2, 0xffffff, .5);
btn.graphics.beginFill(0xCCCCCC);
btn.graphics.drawRoundRect(0,0,100,30, 10);
btn.graphics..endFill();
addChild(btn);
btn.mouseChildren = false;

var btnTxt:TextField = new TextField();
btnTxt.text = "Button";
var format:TextFormat = new TextFormat("Courier", 16, 0x333333);
btnTxt.autoSize = TextFieldAutoSize.LEFT;
btnTxt.setTextFormat(format);
btn.addChild(btnTxt);
btnTxt.x = btn.width/2-btnTxt.width/2;
btnTxt.y = btn.height/2-btnTxt.height/2;
btn.x = btn.y = 10;

Nothing special so far. Basically, all this code does is makes a slightly rounded rectangle and puts some text in it with the label 'Button'. We also set a TextFormat to set the style of the text and move the entire button 10px from top and left of the screen, just so we can see it properly.

Now, if we call the following code, the button will come to life.

bind.bind(btn,{over:overHandler, out:outHandler, click:clickHanlder});

private function overHandler(event:MouseEvent):void{
   //do something
}

private function outHandler(event:MouseEvent):void{
   //do something
}

private function clickHandler(event:MouseEvent):void{
   // do something
}

Ordinarily you would write this...

btn.addEventListener(MouseEvent.CLICK, clickHandler);
btn.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
btn.addEventListener(MouseEvent.MOUSE_OUT, outHandler);

instead of this...

bind.bind(btn,{over:overHandler, out:outHandler, click:clickHanlder});

Quick example

The following example simply shows that in one line of code, you can add a remove multiple listeners from an object.

As you may see, the bind method allows you to string together Events and MouseEvents in one single sentence in the form of an object. Other parameters include "down" (MOUSE_DOWN"), "up" (MOUSE_UP), "move" (MOUSE_MOVE), "doubleClick (DOUBLE_CLICK), added (ADDED_TO_STAGE), enterFrame (ENTER_FRAME).

In addition to the bind method. there is an unbind method. If bind works the same as addEventListener, then unbind would be it's removeEventListener. In fact, not too surprising is the fact that both methods call add/removeEventListener.

I will try to update this class if I feel it is worth continuing, in which I case will write the version alongside the download below. It is currently version 1.0. If that is a different number to the one shown on the download link, then you will know I have updated it. On the other hand, I may never update it. In either case, I hope you enjoy it. I really don't expect you to use it in the place of addEventListener, but it should be good educational material.

Anyway, that's all for now, so get downloading it and see what you think.

Download Bind.as (Version 1.0) Class here

Tweet