The need for libraries like this hit home a few days ago when I was building a playlist plugin for OSMF. The display object I was working with had a bunch of children that came in and out of the screen in an animated fashion. It occurred to me this display object had more than one state. An Initial state that shows up when first run, and an open state that happened once I rolled over a hotspot.

So, I was reminded of a library I built a couple of years ago. I always meant to share it with the community. I decided to scavenge around my old files. Once I found it, I dusted it off and added a couple more things to it. So with out further a due, here it is.

WHAT IS IT?

It’s a library of code that lets you organize the different states of a class. I’ve only ever used it for display object but I guess you could use it for other things as well. It’s super simple and easy to follow. I’ve also made it as light weight as possible. There’s no need to extend your class but I’ve included two helper classes to do just that.

HOW TO USE IT

The first thing you need to do is decide your class is in need of state management. Then create an instance of StateManager and pass it the class you will be managing. This example will have a simple square on the upper left hand corner. Later, we’ll use that square to demonstrate the different states of our Sprite.

package
{
	import com.meekgeek.statemachines.finite.manager.StateManager;
 
	import flash.display.Sprite;
 
	public class FSMTest extends Sprite
	{
		public var square:Square;
 
		private var _manager:StateManager;
 
		public function FSMTest()
		{
			square = new Square();
 
			this.addChild( square )
 
			_manager = new StateManager(this);
		}
	}
}
 
import flash.display.Sprite;
 
class Square extends Sprite
{
	public function Square()
	{
		this.graphics.beginFill(0x00)
		this.graphics.drawRect(0,0,50,50);
		this.graphics.endFill();
	}
}

Then start adding your states. In order to do just that, you’ll have to create a class that extends State. These state classes will be where all of your management code goes in. In the background, these state classes will be told what the context ( in our example FSMTest ) will be. Once added, the StateManager will call three function of that state class. “doIntro”, “action”, and “doOutro” at different times of the process. “doIntro” gets called at the beginning of the state. “Action” once the “doIntro” is complete and “doOutro” is called when moving away from a state. In order to move the states along, it’s your responsibility to dispatch a couple of events to the StateManager. The State class, which you have extended has a few helper methods to help you do this. We’ll go over that in just a bit.

I like to keep the states of my display in a separate folder. So, first create a states folder next to your display class. Then create your InitState that extends State.

package states
{
	import com.meekgeek.statemachines.finite.states.State;
 
	public class InitState extends State
	{
		public function InitState()
		{
			super();
		}
	}
}

Now lets add some code. In the Initial State, our square will be centered in the middle of the stage. So, we add the code to do just that in the “doIntro” method. I’ll be tweening the square over to the middle with a popular Tween engine, once the animation is complete, I’ll dispatch my “StateEvent.ON_INTRO_COMPLETE” StateEvent. I can do this by just calling the protected function “signalIntroComplete”.

package states
{
	import com.greensock.TweenMax;
	import com.meekgeek.statemachines.finite.states.State;
 
	public class InitState extends State
	{
		public function InitState()
		{
			super();
		}
 
		override public function doIntro():void
		{
			TweenMax.to( 
				FSMTest( this.context ).square, 
				.5, 
				{ 	
					x:300, 
					y:300, 
					onComplete:this.signalIntroComplete 
				} 
			);
		}
	}
}

Once in that state, let’s color, the square, red. We only want this to happen once we’re in the action section of our state. The action status is given to a state once it’s “doIntro” method is complete and no other states have set. Otherwise, the action is skipped and “doOutro” is called immediately.

override public function action():void
{
	var ct:ColorTransform = new ColorTransform();
		ct.color = 0xFF0000;
 
	FSMTest( this.context ).square.transform.colorTransform = ct;
}

That’s it, we’ve created our first State, now lets add it the StateManager back in our FSMTest class.

_manager.addState( "init", new InitState(), true );

You’ll notice, the “addState” method accepts three parameters. The first is a key, this is how we reference our states from now on. The second is an instance of the state we just created. The third method is optional, it lets the StateManager know whether or not to use the state you just created as the initial state. Because we do, we set it to true.

It’s best practice to set our key as a constant in our State. This will remove any chance of misspellings in the future. So lets do that,

Add this to the properties section of your InitState class.

static public const KEY:String = "init";

and change our code in our managed display to represent that.

_manager.addState( InitState.KEY, new InitState(), true );

All we have to do now, is create another state to demonstrate. The following state moves the square to the right side of the stage at 400px by 100px and colors the square blue. I’ve called it ‘BlueState’.

package states
{
	import com.greensock.TweenMax;
	import com.meekgeek.statemachines.finite.states.State;
 
	import flash.geom.ColorTransform;
 
	public class BlueState extends State
	{
		static public const KEY:String = 'blue';
 
		public function BlueState()
		{
			super();
		}
 
		override public function doIntro():void
		{
			TweenMax.to( 
				FSMTest( this.context ).square, 
				.5, 
				{ 	
					x:400, 
					y:100, 
					onComplete:this.signalIntroComplete 
				} 
			);
		}
 
		override public function action():void
		{
			var ct:ColorTransform = new ColorTransform();
			ct.color = 0x0000FF;
 
			FSMTest( this.context ).square.transform.colorTransform = ct;
		}
	}
}

Now lets add it the the StateManager.

_manager = new StateManager(this);
_manager.addState( InitState.KEY, new InitState(), true );
_manager.addState( BlueState.KEY, new BlueState() );

Run the example and you’ll see that our square immediatly goes to the Initial state and turns red. That the basics of it, pretty easy right.

So now, lets change states. We’ll do this by making square a button and when clicked will move our square to the ‘BlueState’.

square.buttonMode = true;
square.addEventListener( MouseEvent.CLICK, changetoBlueState );

Now lets create the “changeToBlueSate” function and call the “setState” method on our StateManager.

private function changeToBlueSate(e:MouseEvent):void
{
	_manager.setState( BlueState.KEY );
}

Run the code again, and then click on our new button. So far so good. Let’s now make away to go back to the InitState when we get to BlueState. The StateManager dispatches events at all parts of a state change. They are “onIntroStart”, “onIntroComplete”, “onAction”, “onOutroStart”, and “onOutroComplete”. The event fired has reference to State key. We’ll use this to remove the current listener to move to blue and replace it with one to move to Init.

_manager.addEventListener( StateManagerEvent.ON_OUTRO_START, onOutroStart );
_manager.addEventListener( StateManagerEvent.ON_INTRO_START, onIntroStart );

private function onOutroStart(e:StateManagerEvent):void
{
	switch(e.key)
	{
		case InitState.KEY:
			square.removeEventListener( MouseEvent.CLICK, changeToBlueSate );
		break;
	}
}
 
private function onIntroStart(e:StateManagerEvent):void
{
	switch(e.key)
	{
		case BlueState.KEY:
			square.addEventListener( MouseEvent.CLICK, changeToInitState );
		break;
	}
}

Run the code again and play with it.

ADDING SOME POLISH

I’ve included some helper class you can extend if you’re going to be using Movieclips or Sprites. They initialize the StageManger and even listen for all the different events that get fired. Just override some protected function in order to add and remove event listeners based on the state you’re in.

WHAT NOW?

The possiblities our endless. For games, you can use this for character animations. You don’t have to use tweens, you can control frames in your states using the Movieclip methods. I’ve built really neat looking menus and the animation of pages loading in an out. I love this library and hope that you’ll love it too. It’s really up to you how you want to use it.

Download the code here.

My criteria for finding my next bookmarking tool were as follows:

• Was it free? I don’t like spending my money
• Was it cluttered? I hate seeing ads everywhere
• Nice user interface
• How mobile is it? I want to make sure I have them everywhere I go

I narrowed my search to a hand full of alternatives. The following is a list of other services I considered with reasons why I decided not to commit.

• Google Bookmarks
  This probably would have been my first choice but my Gmail account tied to my Google account is messed up and Google provides no way to change it. It’s really been a soar spot for me when it comes to Google services in general. Plus, I would have to install some bulky toolbar in Firefox. Sorry Google, I just need a little bit of space.
• Pinboard.in
  Almost jumped on board with this, It was $8.10 when I wrote this. The pressure was killing me, and I’ve learned to never do things under pressure. Plus if you look at the fine print, some of the services coast $25 dollars a year.
• Zootool
  They don’t even work right now. The rumors where too much for there servers to handle. Say’s a lot about a the people who run it too me. Won’t even bother.
• Diigo
  They have an impressive set of features but I didn’t like the clutter. It can get kinda pricey too.

AND THE WINNER IS
After a couple of hours of research, I bookmarked what might be my last bookmark on delicious. I’ve settled on Xmarks. Why, there’s no clutter. There’s no ads that I can see right away and if I want to upgrade, the cost is minimal. The tools fit nicely in the browser and are available for all the browsers I use. In the end, I feel good about my purchase because I haven’t spent any money yet.

Hope this helps somebody make a decision.

[UPDATE]

After only a few hours my Firefox bookmark database got corrupt. I’m not blaming Xmarks, but in desperation I quickly opened a Pinboard account for $8.31.

[UPDATE]

Delicious isn’t going anywhere, it’s the best out there so I probably won’t be going anywhere. You can check out there blog here

Today I woke up excited to get to the Apple store and purchase the new IPad. I stood in line for about 30 minutes while my turn came up, when it finally did, the worker was very attentive and almost made me believe the apple care plan was worth it. She asked me if I’d had a chance to try it out. When I said, “It’s just a big IPhone, isn’t it?” she acted if I kicker her in the face. She was like, “No! don’t say that! It’s way more.” I’d later realize that she was kind of right.

I came home and plugged it into my MacBook Pro. ITunes alerted me that I needed to update to the latest version. About one hour later, I was finally up and running. It seems you can’t even start it up to the home screen unless you go through this step. The first thing you’ll want to do when you start it is sync it up to your ITunes. You’ll see a screen that asks you if you want to use your IPhone’s data to sync it up or start it up as new. I selected “start up as new” and I suggest you do the same because I was surprised to see that all of your IPhone application don’t work the way you would expect on your IPad. Apps made for your IPhone will display at the same resolution on your IPad, which means you’ll see a lot of black surrounding your little app in the middle – not good. This means that you’ll start looking for IPad versions of the same app as soon as you see how nasty it looks when you try and scale it up. Another thing that you might notice is that the apps are a little more expensive. I believe companies think if your buying apps this early in the IPad game, you have a little money to spend, whatever, they’re probably right, and I’ve spent $25 dollars in apps today to prove it.

When you’re done syncing, you’ll want to start playing with it, but wait! You’ll need to get your Wi-Fi password to get your IPad working to it’s full potential. This part really frustrated me, connecting to my network was not cut and dry. It took several attempts. I realize that everyone’s network is different but I would be curious to see if I’m not the only one to have these troubles. However, now that I’ve got it successfully set up, my IPhone hasn’t been able to connect. Perhaps I’ve exceeded my wireless connections?

So once I was on, my next stop was the apple store. One of the first apps you’ll see in the featured section is IWorks. I believe it’s a group of apps that contains a word processor (Pages) and some other apps that allow you to prepare presentations. I don’t believe the IPad will replace your computer for things like this. I suggest you restrain from buying these types of apps until you get a little more familiar with the key board. Like I said before, be prepared to pay a little more of some of your favorite apps.

I’ve had a chance to play with my new toy for a few hours now and I’m liking what I see. Is it worth the money? I think so. You see, there are certain apps that I believe are better served from this screen. Will it replace your IPhone? I think not, although that thought did cross my mind. Like I said before, most of the apps I use are better served on this new resolution. Will it replace the computer? Definitely not! Or at least, definitely not right now!

VS KINDLE

IPad wins hands down. My new IPad is years ahead of the Kindle, and no one can argue with that. I almost felt bad for the poor girl who ended up buying my old kindle, but I’m glad she did. Apple put out a Kindle reader and that pretty much put the nail in the coffin. Now to tell you the truth, I only bought one Kindle book. The main reason why I bought these two products was for their PDF support. Kindle allowed me to view them, but it’s lack of the zoom feature really bugged me sometimes. Especially when the PDF resolution wasn’t as great as I would have wanted. The native PDF support on the IPad doesn’t allow me to save my spot but I was able to find an app that did.

VS MACBOOK

The real question is, will this ( I say “this” because I’m actually writing this part of the post on it. ) IPad revolutionize the way we compute, like Steve Jobs said it would? I’m afraid to say this, but it just might. My first thought was that there was no way to replace the key board. I mean, we need to feel the keys if we wanted to really get rid of it, but I’m very surprised at how fast I’ve been able get through this. It is something you have to get use to.

That being said, my MacBook Pro has now become obsolete for a lot of what I’ve used it for in the past. Come to think about it, my Iphone has become obsolete for somethings as well. But the fact of the matter is, developers like me need a mouse and it will take a long time for it to be replaced by all eight fingers. Obviously, the computing power of an IPad is about a fraction of what my laptop can do but my grandma could care less, and really, it’s the consumer who uses the computer for casual things like email that really benefit from products like this.

THE CONCLUSION

This is a developers blog and the IPad is my tool. I’d like to leave you with a few apps that are essential to somebody like me.

• WordPress for IPad
• PDF Reader Pro for IPad
• NetNewWire

A LITTLE JAVA TO THE RESCUE

The code below has been posted on several blogs. I’ve found versions of it at Pete Freitag’s site. I modified it just a tad to serve my purpose. Now it’s object in, binary out and vice versa.

<cffunction name="serialize" access="public" output="false" returntype="Binary" >
     <cfargument name="object" type="any" required="true">
 
	   <cfset byteOut = CreateObject("java", "java.io.ByteArrayOutputStream")/>
	   <cfset byteOut.init()/>
	   <cfset objOut = CreateObject("java", "java.io.ObjectOutputStream")/>
	   <cfset objOut.init(byteOut)/>
	   <cfset objOut.writeObject(object) />
	   <cfset objOut.close()/>
 
     <cfreturn byteOut.toByteArray() />
</cffunction>
 
<cffunction name="deserialize" access="public" output="false" returntype="any">
     <cfargument name="data" type="Binary" required="true" />
 
          <cfset inputStream = CreateObject("java", "java.io.ByteArrayInputStream") />
	  <cfset objIn = CreateObject("java", "java.io.ObjectInputStream") />
	  <cfset object = "" />
 
	  <cfset inputStream.init( data ) />
          <cfset objIn.init(inputStream) />
	  <cfset object = objIn.readObject() />
	  <cfset objIn.close() />
 
     <cfreturn object />
</cffunction>

AND NOW FOR A REAL EXAMPLE

The following code invokes a Serializer component, then creates a struct, and puts some code in it. I call a stored procedure that excepts my serialized struct.

<cfinvoke component="com.meekgeek.utils.Serializer" method="init" returnvariable="serializer" />
 
<cfset myStruct = structNew() />
<cfset myStruct["SomeNumber"] = 1 />
<cfset myStruct["MyArray"] = ArrayNew() />
 
<cfset results = "" />
 
<cfstoredproc datasource="#APPLICATION.dataSource#" procedure="save_struct_stored_procedure">
   <cfprocparam cfsqltype="CF_SQL_BLOB" variable="_MY_STRUCT" value="#serializer.serialize(myStruct)#" />
 
   <cfprocresult name="results" />
</cfstoredproc>

Now, I will retrieve my struct and dump it.

<cfinvoke component="com.meekgeek.utils.Serializer" method="init" returnvariable="serializer" />
 
<cfset results = "" />
<cfstoredproc datasource="#APPLICATION.dataSource#" procedure="get_struct_stored_procedure">
   <cfprocresult name="results" />
</cfstoredproc>
 
<cfset unserialized = serializer.deserialize( results.My_Struct ) />
 
<cfdump var="#unserialized#" />

Now, before you go about serializing everything. There are a few things you should know. Morgan Tocker posted an article you should read titled When should you store serialized objects in the database? I hope this saves someone some time.

You can download the class above here.

I’m not sure how long they’ve been providing this service but I do know I’ve been missing out. Say good bye to limits imposed by your current hosting providers. Rackspace offers a virtually dedicated server of your own for probably less than what your spending right now. Choose a server size and pay for what you use. They offer root access and it’s fully customizable.

HOW IT WORKS

You select the size of your server. Anything from 256 up to 16 GB, then you select your operating system. If you’re a more experience Linux user and love the technical stuff you will consider going with Fedora, or if you’re more of a beginner (like me) and need a community you won’t be afraid to ask question in, you’d select something like Ubuntu. Then you can start playing with it. They provide you with a graphical shell you can use to start plugin away, start up terminal (on a mac), or download Putty on windows.

WHY I’M MOVING

It’s complicated really, my main reason for going with Gearhost in the first place was because they provide great Coldfusion service for a very low price. Well, after the last Adobe Max conference I went to, I realized just how expensive programming for Adobe can be, and Enterprise level solutions are starting to be something I’m interested in. Coldfusion Enterprise is something out of my price range, and LiveCycle ES2 is something not even our clients can afford. I don’t think I’m the only one who feels this way. So I’ve decided to learn JAVA and hope that Adobe provides a free Coldfusion solution in the near future.

Don’t get me wrong, if your looking for great Coldfusion hosting, check out Gearhost. I don’t think you’ll be disappointed.

WANT TO FOLLOW ME?

You’ll have to know some Linux, and well, just about 3 weeks ago, I didn’t know it either. Beginning Ubuntu Server Administration: From Novice to Professional was a great book to help me get started. But here’s a few commands to help you get started…

#Change Directory
root@yourserver:~# cd /directory
 
#See Files and Folers in Current Directory
root@yourserver:~# ls
 
#View File Conents
root@yourserver:~# cat yourfile
 
#Edit A File
root@yourserver:~# vim yourfile
#To quit the editor hit escape, then, type ':wq!' without quotes to save it, 
#or type ':q!' to quite without saving.  
 
#Create A File
root@yourserver:~# touch filename
 
#Removes File
root@yourserver:~# rm yourfile
 
#Create a Directory
root@yourserver:~# mkdir directory

You don’t have to type in the “root@yourserver:~#” part. ‘root’ is the user your logged in as and ‘yourserver’ is your server. I hope this helps someone. And if anybody wants, I could post a detailed explanation on how to set up your new server for wordpress.

JSFL FILE TO THE RESCUE

JSFL stands for JavaScript Flash. A JSFL file contains a form of JavaScript that the Flash IDE uses to automate task. Almost anything that you do in flash, you can do with JSFL. Let’s say for example you wanted to add a new scene. The code would look something like this.

flash.getDocumentDOM().addNewScene("myScene");

You can see all that JSFL has to offer by downloading the documentation here.

SOME FREE STUFF!

So remember my co-worker? I coded a simple script that allows you to select all the instances on the stage and name them all according to there class names. I also created one that allowed you to select an instance that had a shape in it and convert it into a MovieClip. He was then able to link these scripts to a quick key and finish the job in a fraction of the time.

You can download the source code here. Feel free to use it and modify it.

WHAT IS THERE NOW?

We don’t have the Service class of ActionScript 2.0 anymore so what do we do? You can feel good in knowing that many programmers have already taken the time to create great libraries for remoting. Here’s a few different libraries to get you started.

• ByteArray.org By: Thibault Imbert
• Foxrock By: Epox
• As3lrf By: Danny Patterson

There are many others out there but these are the ones that I’ve used personally and recommend.

THINGS YOU MAY INCOUNTER

The first thing you’ll want to watch out for is ObjectEncoding. This property indicates which Action Message Format (AMF) the player is using to serialize the data. There are two version of AMF, AMF3 and AMF0. There are many advantages in using AMF3 and you can read all about them in the ActionScript3 Language Reference. By default the NetConnection class uses AMF3, this is great except that sometimes you might need to change this to AMF0 in order for your data to serialize correctly. That being said, after reading this post and my upcoming post on Flash Remoting with AMF3 ( Not Flex ) and Coldfusion, you’ll never need to use anything other than AMF3.

The second thing you might encounter might be when returning a struct from Coldfusion to flash. There has been some issues with your result properties coming back in uppercase. Leif Wells wrote a little about this on his blog here. To be honest, this has not been a problem for me because anything I can put in a struct I can put in a Value Object and this is what we’ll talk about next.

Also note, if you’re application will be needing to authenticate a user you’ll want to look into the addHeader method of the NetConnection class. It will do the trick.

VALUE OBJECTS

Value Objects are probably one of the top 5 reasons to use Remoting in the first place. They’re simply an object of properties you want to send to your Application Server. The player registers and links them to an object on the application server. These Value Objects are then serialized and converted correctly for everyone to enjoy. This conversion also works when sending data back to flash.

The trick to getting these objects converting correctly lies in the registerClassAlias method. It accepts two parameters, the first is a string that represents the server side component, and the second is the ActionScript class you’ll be linking it with. Make sure you register your class before you try using it. Using Epox’s remoting library provides a neat method for doing this. Patrick Tai wrote a very nice tutorial on Value Objects titled Passing custom objects between Flex and CF. It’s probably the best tutorial I’ve seen expect it’s assuming your only using Flex.

IN CONCLUSION

You’ll have a lot of fun!

Flash Remoting is just the way in which your ActionScript project connects to an application server like Coldfusion or PHP. It allows you to receive request by passing parameters through this connection. Very simply, it allows you to use your server side methods like an extension of your ActionScript. The end result is a Rich Internet Application that was both quick and easy to put together.

WHAT ARE THE BENEFITS?

The benefits of remoting might not be very apparent at first. Some might think that you can do anything you need via XML and the URLLoader class via “POST” and “GET” methods. You could do that; you could also get from L.A to New York on a tricycle. This method works, but what your effectively making is a middle man between your application and your data. You don’t need him, he’s just there to make your life a little harder. When compared to Remoting, this method is just not as efficient.

Lets take for example a small project where you want update a users phone number. The user presses the update button, your application starts packaging up the data in a well formed XML structure. The XML gets sent to your application server where it starts to drill down to the phone data you sent. It then updates your database and sends back some kind of name value pair that informs you wether or not the transaction was successful. I know that you didn’t really need a XML file to send this data. A name value pair would have been enough, but I’m trying to illustrate a point here. The point being that you had to parse the data on both the application server and then back when you receive a response. What if you wanted to pass a list of phone numbers in an array. Oh wait, you can’t send arrays via that method, only strings, looks like your going to have to package that up too.

Remoting solves scenarios like this. It not only handles all datatype conversion between your ActionScript and your application server. Under the hood, it serializes your data and sends it out in a more fast efficient way, improving your applications performance. And like in the example above, your application can get complex, wouldn’t it be nice to have a more consistent API for calling your server-side methods?

OK, I’M SOLD, WHAT DO I NEED?

The good news is that if your application server is Coldfusion, you don’t need anything. If your coding with PHP you can use AMFPHP. These are the only two that I’ve used and have personally worked with but Remoting is supported on all major servers. A search for “Flash Remoting for your server here” will give you the results that you want. If your a Java Developer, check out BlazeDS. There are many open-sourced solutions out there so money shouldn’t be a problem.

LETS DO THIS!

The following is the file structure that is used for this example. It consist of two files, the SWF and the CFC. The CFC is placed inside a ‘components’ folder.

The autonomy of a NetConnection call is very simple. You can see all of the of NetConnection’s methods here. The only two methods we’ll need is “connect” and “call”. The following code sends the string “Flash” to a method “hello” in a “service” cfc file, located in a “components” folder on the root directory.

package {
	import flash.display.Sprite;
	import flash.net.NetConnection;
	import flash.net.Responder;
 
	public class FlashRemoting extends Sprite
	{
		public var gateway:String = "http://{your domain}/flashservices/gateway";
		public var service:String = "components.service";
		public var method:String  = ".hello";
 
		private var nc:NetConnection;
		private var responder:Responder;
 
		public function FlashRemoting()
		{
			this.nc = new NetConnection();
			this.nc.connect( this.gateway );
 
			this.responder = new Responder( onResult, onFault );
 
			this.nc.call( this.service+this.method, this.responder, "Flash" );
		}
 
		private function onResult( e:String ):void
		{
			trace( e );
		}
 
		private function onFault( e:String ):void
		{
			trace( e );
		}
	}
}

Before you can make a call to your application server, you have to set up the connection. Please note, when you call connection, it doesn’t actually check weather or not your connection will work. NetConnection just keeps that URI referenced for when you use the call method. The call method accepts an indefinite number of arguments, the first is a reference to the method your trying to call, it’s preceded by the service. You could of just placed this string for the first parameter – “components.service.hello”. The second is a Responder class, which is nothing more than a reference to a function to call if you get a result and one if something wrong happens. From there on, you can pass as many parameters you want to pass to your method.

It’s that simple. Running this example will return a string like this, “Hello Flash, I’m Coldfusion”.

You can dowload the source for this exmple here.