Victors & Spoils Logo Concept

I’ve submitted a few logos for the Victors & Spoils competition on crowdSPRING. Check ‘em out and vote if you like them!

The Schoolyard

The Schoolyard is up and running! Check out the Beta version of my very first Facebook game! Contact me if you’re interested in becoming a beta tester, and receive 5 Extra Credits and one exclusive item.

The Schoolyard

My very first Facebook game, The Schoolyard, is launching next week, Tuesday the 28th! Send me a message if you’re interested in becoming a beta tester. All volunteers receive 5 Extra Credits and one exclusive item only available to beta testers!

Information Is Beautiful

I love infographics, and Information Is Beautiful has some of the best I’ve seen.

Some highlights:

If Twitter was 100 People
The Hierarchy Of Digital Distractions
Walled World

So you’re ready to head off into the awesome world of freelance development: be your own boss, call your own shots, hire people, fire people, and rake in the money. The new freelancer is the virtual company: a team of individuals, each with their own unique talents – loosely associated with each other that come together on a project-by-project basis according to the needs of each assignment. Virtual companies are taking over the web development world. They are flexible and scalable, with low overhead and global reach. Getting up and running with your own virtual freelance business is now easier than ever. There are plenty of freely (and cheaply) available resources online to help you get started. But before you do anything, you need to make your company official. This series of articles are based largely upon my own experience in starting up a virtual company. This first segment will help you get your new business off the ground.

Consult the Experts

I highly recommend reading through The Business Side of Creativity: The Complete Guide for Running a Graphic Design or Communications Business by Cameron S. Foote before taking any steps towards your company launch. Much of what we’ll cover in the first step of this series is addressed in this book, and it will give you a good idea of what you’re getting into.

Form a Business Plan

Before you jump head-first into designing a logo, building a website, and schmoozing clients, take a step back and remember that this is a business. Without a solid plan of attack, your company will be in the red before you know it. Even if you never show your plan to anyone else, it’s a good idea to put your business goals down on paper, and to revise this plan every year. Secondly, if you ever want to convince a bank or a private investor in loaning money to your company, a business plan is mandatory. Here’s a sample business plan template to help you get started.

Choose Your Company Name and Register Your Domain

Now for the fun part. Be creative. Take into consideration the identity you want to portray. This is your brand. But keep in mind that naming your company and registering a domain go hand in hand. You won’t be taken seriously without a website, but virtually every real-word domain is already reserved, so think about spelling your company phonetically. It should be easy to remember. Dot-coms are the most desirable but they are not necessary, so consider all your options. Naming your company can actually be the most difficult step in your company launch. Take your time and find something that you know you’ll be happy with for many years. Above all, have some fun with the process. Here are some resources to help:

• How to Name Your Business
• Go Daddy
• Thesaurus.com
• Web 2.0 Domain Name Generator

Register With the IRS

Ahhh, taxes. There’s no way around it. But that’s not the only reason you should make your company officially registered with the government. Having a corporate identity offers a layer of protection between you and your clients/contractors. This also allows you to keep your business and personal finances separate from each other. Having an EIN lets you present yourself to your clients as a business entity, not just a freelancer. Of course, if you’re not located in the United States, you’ll need to register with your local government, not the IRS. There are plenty of services out there that will offer to take care of this legal process for you. However, doing this yourself is not difficult at all. Everything you need is available at the Internal Revenue Service website. You can apply for an EIN here. The application process takes less then an hour and you should receive all your paperwork in the mail within a few days.

Get a Business Account

You have your detailed plan of attack, your brilliant company name, your website domain reserved at your registrar of choice, and your business registered with the government. Take a second and breath. You’re official! With your new EIN, you can and should open up a business checking account. It’s always best to keep your business finances separate from your personal transactions. While you’re at it, make sure to order some nice professional voucher checks. Consider opening up a business credit account as well to build some credit for your company. Always deposit your business income in your business account, and pay all contractors from this account. Keeping all your business transactions in one place is a life-saver when tax season comes around.

Brand Yourself

Now it’s time to form your public identity. If you’re a designer this is the most fun. If you’re not a designer, it’s time to get in touch with one. You’ll need your business basics: a logo, some business cards, and a website. The website doesn’t need to be overkill, but be sure to include the essentials: about the company, contact information, and a big call to action to get in touch with you. Your business cards don’t need to be quite so typical either. The more unique and eye-catching, the better. I order my cards from MOO, skinny little cards that are especially great for designers/illustrators/photographers.

Congratulations!

At this point, your company is up and running! You may not have any clients available or work coming in, but your website is live and you’re ready to hand out your freshly printed business cards to everyone you meet. The hard part is over. In the next segment I’ll cover some useful web applications to help you easily run your new virtual company. Remember, you still need to manage projects, keep track of contractors, and stay on top of your invoices. If you found this segment useful, or if you have anything to add, or even if you completely disagree with every word on the page, feel free to contact me and let me know your thoughts.

Avatar Editor

About RAD

The Rapid ActionScript Development package lets developers get up and running with a lightweight flexible framework quickly and painlessly. Many developers are already using a model-view-controller framework. The RAD MVC package supplies a very clear set of abstract classes that will help any developer get up and running as fast as possible with a full-featured MVC design pattern. In lieu of a boring Hello World example, this demo will show how easy it is to setup an avatar editor in Flash using very little code. The user will be able to add or remove hair, add or remove a goatee, and change the hair color.

Required Files

RAD is available as open source through Google Code.
You can visit the project site or download the latest build.

You can download the entire demo source for this tutorial here.

Flash Visual Elements

This demo will have three visual components that we need to build in Flash: The Avatar Control Panel, an Avatar Info bar, and the Avatar himself. To begin, open up Flash and create a new AS3 file. Add a MovieClip titled ‘MVCDemo’ to the stage. Export the MovieClip as ‘com.craigphares.tutorials.mvc.MVCDemo’ and extend the ‘flash.display.Sprite’ class. This will be our main holder clip that will contain our three elements.

The Control Panel

Within the MVCDemo clip, create a new MovieClip called ‘ControlPanelView’, and set its instance property name on the stage to ‘controlPanelView_mc’. This will house our form controls to edit the avatar. Add a Flash ColorPicker component named ‘hairColor_cp’, and two CheckBox components named ‘hair_cb’ and ‘goatee_cb’. You can edit the labels to make it clear that one is for Hair and one is for the Goatee. That’s all we need for our ControlPanelView.

AvatarView

The Avatar Views

Return to the MVCDemo clip and create a new MovieClip named ‘AvatarView’, and set its instance property name on the stage to ‘avatarView_mc’. This is our main avatar display. Within the AvatarView clip, be sure to have one MovieClip named ‘hair_mc’, one named ‘eyebrows_mc’, and one MovieClip named ‘goatee_mc’. You can grab the artwork from the demo file available above, or create your own artwork for the Avatar. Just be sure to include separate artwork for the hair, eyebrows, and goatee.

Go back once more to the MVCDemo clip and create a new MovieClip named ‘AvatarInfoView’, and set its instance property name on the stage to ‘avatarInfoView_mc’. This will display some textual information about our avatar. Add a new TextField to the stage and name it ‘info_txt’.

Note: It’s important to name each important element on the stage. By working this way, a designer and programmer can work independently of each other, with the designer not needing to get involved with any ActionScript, and the programmer simply referencing the named objects within ActionScript and not worrying about the design. This significantly speeds up development time, as both members of the team can work simultaneously.

To illustrate the flexibility of the RAD framework, we’re going to show two different ways of converting these elements into View objects. So for now, edit the AvatarView in the library and export it for ActionScript as ‘com.craigphares.tutorials.mvc.AvatarView’, and export the ControlPanelView as ‘com.craigphares.tutorials.mvc.ControlPanelView’. Both of these classes will extend the RAD View class, and we will manually convert the AvatarInfoView to a View object in ActionScript.

The Model

Okay, our design is complete – now it’s on to the ActionScript. Open up your favorite ActionScript editor and create a new class named ‘com.craigphares.tutorials.mvc.AvatarModel’. This is our data model class and will extend the RAD Model class. Our AvatarModel class has three properties accessible through getters and setters: hairColor (uint), hasHair (Boolean), and hasGoatee (Boolean).

package com.craigphares.tutorials.mvc {

	import com.rad.mvc.*;

	public class AvatarModel extends Model {

		public static const DEFAULT_HAIR_COLOR:uint = 0x361808;

		private var _hairColor:uint = DEFAULT_HAIR_COLOR;	// hexadecimal hair color
		private var _hasHair:Boolean;						// if the avatar has hair
		private var _hasGoatee:Boolean;						// if the avatar has a goatee

		public function AvatarModel() {}

		public function get hairColor():uint { return _hairColor; }
		public function set hairColor(c:uint):void {
			_hairColor = c;
			notify();
		}

		public function get hasHair():Boolean { return _hasHair; }
		public function set hasHair(h:Boolean):void {
			_hasHair = h;
			notify();
		}

		public function get hasGoatee():Boolean { return _hasGoatee; }
		public function set hasGoatee(h:Boolean):void {
			_hasGoatee = h;
			notify();
		}

	}

}

The key feature of the AvatarModel is the notify() method. Whenever notify() is called from any Model, all Views associated with that Model run their own method named update(), which can handle any visual changes that need to be made to represent the change in the data model. You can see that we add the notify() method to each setter function in AvatarModel.

public function set hairColor(c:uint):void {
	_hairColor = c;
	notify();
}

AvatarView

Next, let’s create our AvatarView class. This class requires two methods, init() and update(). The init() method is called explicitly once to setup the view according to the supplied model, which will be our AvatarModel. The update() method is called every time a change is made to the AvatarModel.

package com.craigphares.tutorials.mvc {

	import com.rad.mvc.*;
	import flash.geom.ColorTransform;
	import flash.display.Sprite;
	import flash.events.Event;

	public class AvatarView extends View {

		private var _hair_mc:Sprite;
		private var _goatee_mc:Sprite;
		private var _eyebrows_mc:Sprite;
		private var _colorTransform:ColorTransform;

		public function AvatarView(m:IModel = null, c:IController = null, s:Sprite = null) {
			super(m, c, s);
		}

		override public function update(e:Event = null):void {

			_colorTransform.color = (getModel() as AvatarModel).hairColor;

			_hair_mc.transform.colorTransform = _colorTransform;
			_goatee_mc.transform.colorTransform = _colorTransform;
			_eyebrows_mc.transform.colorTransform = _colorTransform;

			_hair_mc.visible = (getModel() as AvatarModel).hasHair;
			_goatee_mc.visible = (getModel() as AvatarModel).hasGoatee;

		}

		public function init():void {

			_hair_mc = getChildByName("hair_mc") as Sprite;
			_goatee_mc = getChildByName("goatee_mc") as Sprite;
			_eyebrows_mc = getChildByName("eyebrows_mc") as Sprite;

			_colorTransform = new ColorTransform();

			update();

		}

	}

}

Let’s take a closer look at the update() method:

_colorTransform.color = (getModel() as AvatarModel).hairColor;

_hair_mc.transform.colorTransform = _colorTransform;
_goatee_mc.transform.colorTransform = _colorTransform;
_eyebrows_mc.transform.colorTransform = _colorTransform;

_hair_mc.visible = (getModel() as AvatarModel).hasHair;
_goatee_mc.visible = (getModel() as AvatarModel).hasGoatee;

Basically, we are grabbing the hair color from the model, and applying a colorTransform to all three avatar display objects: hair, goatee, and eyebrows. We also hide or show the hair or goatee based on the hasHair and hasGoatee properties of the AvatarModel. Simple enough.

AvatarInfoView

Our AvatarInfoView is even simpler. Here we are just describing the avatar as a “Hairy Man” or “Bald Man” based on whether the AvatarModel has hair.

package com.craigphares.tutorials.mvc {

	import com.rad.mvc.*;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;

	public class AvatarInfoView extends View {

		private var _info_txt:TextField;

		public function AvatarInfoView(m:IModel = null, c:IController = null, s:Sprite = null) {

			super(m, c, s);

			_info_txt = getSprite().getChildByName("info_txt") as TextField;
			update();

		}

		override public function update(e:Event = null):void {

			if ((getModel() as AvatarModel).hasHair) {
				_info_txt.text = "Hairy Man";
			} else {
				_info_txt.text = "Bald Man";
			}

		}

	}

}

Note: The AvatarInfoView class does not require an init() method because we will be constructing the class within ActionScript instead of exporting it for ActionScript within Flash. Therefore we have the ability to pass the model to the view during its construction and our initialization can happen within the constructor.

ControlPanelView

The ControlPanelView class will simply add EventListeners to the form controls and pass them along to our Controller class. During initialization we make sure to update the form controls to match the AvatarModel defaults.

package com.craigphares.tutorials.mvc {

	import com.rad.mvc.*;
	import fl.controls.ColorPicker;
	import fl.controls.CheckBox;
	import flash.display.Sprite;
	import flash.events.Event;

	public class ControlPanelView extends View {

		public function ControlPanelView(m:IModel = null, c:IController = null, s:Sprite = null) {
			super(m, c, s);
		}

		override public function defaultController(m:IModel):IController {
			return new AvatarController(getModel());
		} 

		public function init():void {

			var hairColor_cp:ColorPicker = getChildByName("hairColor_cp") as ColorPicker;
			hairColor_cp.selectedColor = (getModel() as AvatarModel).hairColor;
			hairColor_cp.addEventListener(Event.CHANGE, (getController() as AvatarController).onChange);

			var hair_cb:CheckBox = getChildByName("hair_cb") as CheckBox;
			var goatee_cb:CheckBox = getChildByName("goatee_cb") as CheckBox;

			hair_cb.addEventListener(Event.CHANGE, (getController() as AvatarController).onChange);
			goatee_cb.addEventListener(Event.CHANGE, (getController() as AvatarController).onChange);

		}

	}

}

The Controller

Now we can create our ‘AvatarController’ class, which extends the abstract Controller class. All our user input will pass through to this class through event listeners, and this class will be sure to tell the AvatarModel to change its data accordingly.

package com.craigphares.tutorials.mvc {

	import com.rad.mvc.*;
	import flash.events.Event;

	public class AvatarController extends Controller {

		public function AvatarController(m:IModel = null) {
			super(m);
		}

		public function onChange(e:Event):void {

			switch (e.target.name) {

				case"hair_cb":
					(getModel() as AvatarModel).hasHair = e.target.selected;
				break;

				case "goatee_cb":
					(getModel() as AvatarModel).hasGoatee = e.target.selected;
				break;

				case "hairColor_cp":
					(getModel() as AvatarModel).hairColor = e.target.selectedColor;
				break;

			}
		}

	}

}

The Main Class: MVCDemo

Finally, we put this all together in the ‘MVCDemo’ class:

package com.craigphares.tutorials.mvc {

	import flash.display.Sprite;

	public class MVCDemo extends Sprite {

		private var _avatarModel:AvatarModel;
		private var _controlPanelView:ControlPanelView;
		private var _avatarView:AvatarView;
		private var _avatarInfoView:AvatarInfoView;

		public function MVCDemo() {

			_avatarModel = new AvatarModel();

			_controlPanelView = getChildByName("controlPanelView_mc") as ControlPanelView;
			_controlPanelView.setModel(_avatarModel);
			_controlPanelView.init();

			_avatarView = getChildByName("avatarView_mc") as AvatarView;
			_avatarView.setModel(_avatarModel);
			_avatarView.init();

			var avatarInfoView_mc:Sprite = getChildByName("avatarInfoView_mc") as Sprite;
			_avatarInfoView = new AvatarInfoView(_avatarModel, null, avatarInfoView_mc);			

		}

	}

}

You can see that we created the AvatarInfoView differently from the AvatarView and ControlPanelView. By not exporting the class to ActionScript within Flash, we can pass the ‘avatarInfoView_mc’ Sprite through the View constructor from ActionScript. We also don’t explicitly pass the AvatarController, instead defining the defaultController within the ControlPanelView. This makes it easier to change controller classes later on without having to change our code in two places.

_avatarModel = new AvatarModel();

_controlPanelView = getChildByName("controlPanelView_mc") as ControlPanelView;
_controlPanelView.setModel(_avatarModel);
_controlPanelView.init();

_avatarView = getChildByName("avatarView_mc") as AvatarView;
_avatarView.setModel(_avatarModel);
_avatarView.init();

var avatarInfoView_mc:Sprite = getChildByName("avatarInfoView_mc") as Sprite;
_avatarInfoView = new AvatarInfoView(_avatarModel, null, avatarInfoView_mc);

So now we have a working avatar editor. You’ll see that both the AvatarView and the AvatarInfoView update in real time as you change the controls within the ControlPanelView. You can have unlimited views associated with each Model, allowing you to keep your data nice and tidy within one place.

If you have any questions or comments about this tutorial, feel free to contact me. I hope this makes your Flash projects much easier and faster to develop.

RAD Package

I’ve updated the Rapid ActionScript Development package on Google Code. This update includes greater flexibility for the model-view-controller classes. This makes it even easier for both designers and hard-core programmers to use the framework. Stay tuned for a step-by-step tutorial on how to use the MVC feature of the RAD package.

RAD is available as open source through Google Code. You can visit the project site or download the latest build.

Alternatively, you an checkout the latest source from Subversion using the following command:
svn checkout http://radpackage.googlecode.com/svn/trunk/ radpackage-read-only

.forcewrap {
	display: block;
	white-space: pre-wrap; /* css3 */
	white-space: -moz-pre-wrap !important; /* mozilla */
	white-space: -pre-wrap; /* opera 4-6 */
	white-space: -o-pre-wrap; /* opera 7 */
	word-wrap: break-word; /* ie 5.5+ */
}

Here is an example of its use:

<div style="width:100px;">
	<a href="http://www.averylonglinkthatwillnotwrapnomatterwhatyoudo.com" class="forcewrap">http://www.averylonglinkthatwillnotwrapnomatterwhatyoudo.com</a>
</div>

RAD Package

The RAD package has been born. This is a collection of ActionScript classes that I use often in my work. In the future I plan on posting a number of tutorials with examples of their use. I’ve added the full MVC design pattern and several Papervision3D utility classes. As I go through and clean up more ActionScript, I’ll be incrementally adding these to the repository and releasing new downloads.

RAD is available as open source through Google Code. You can visit the project site, or download the latest build.

Alternatively, you an checkout the latest source from Subversion using the following command:
svn checkout http://radpackage.googlecode.com/svn/trunk/ radpackage-read-only