I will be speaking at 360|Flex San Jose.

If you haven’t attended a 360|Flex conference before, you really should. In my opinion, 360|Flex is the best conference out there for Flex developers. It’s put on by developers for developers.

It is a very focused conference, where you can really get into the nitty gritty of Flex and geek out with other members of the community. Plus the food isn’t half bad.

When are you speaking?

I’ll be speaking on Wednesday, March 10th (my birthday) from 1:00 pm – 2:20 pm.

What will you be speaking about?

Session Title: Flexible Games… game development with stuff you already know.

Session Level: Intermediate

Description: I don’t know about you… but as an enterprise software developer, sometimes I need to take a break from the corporate world and want to develop something fun. In this session Nate Beck will take you through the basics of game development using the Flex SDK you know and love.

Nate will walk you through setting up your development environment, the basics of game development, using the open source PushButton game engine and building a functioning game.

What will Doug McCune do for revenge?

For those of you who weren’t at 360|Flex in Indianapolis, there was an incident… You can read about it in my Punking Doug McCune post.

Since the incident, Doug has vowed to get payback. And if you don’t know Doug, he is a scary creative guy. So we’ll have to see what he comes up with. Find out, along with me at my session.

Alright I’m convinced, where do I sign up?

Either click here or click the 360|Flex San Jose badge on the top right of my blog.

More information about travel and the conference in general can be found on the 360|Flex Website.

But tonight… I break my blog silence. As I just mentioned, I’ve been contributing to the PushButton Flash Game Engine. I’m now going to show you how to set up Flex Builder 3 or Flash Builder 4 in a way that allows you to develop games on PushButton Engine, as well as how to work on the core engine itself. I’m breaking this down into very small pieces so that everyone can follow along. So it’s going to be a long post with lots of pretty pictures.

After writing this post, it ended up being longer than I hoped. So I’m going to write a series of posts about developing games using PushButton Engine. This post will focus only getting set up inside Flash and Flex Builder. The plan is to add other IDEs in as well, for example FlashDevelop, FDT, etc…

Step 1 : Download the PushButton Engine source code.

[note]
If you are not familiar with Subversion or you need a primer to the basics of contributing to or working with open source projects please check out my “Getting Dirty with the Flex SDK” post, more specifically the TechWed Presentation.
[/note]

WARNING!! For these steps to work, you must use at least revision 602 of the PushButton Engine.

Download the PushButton Engine core from Google Code. Since I am a developer in the engine, I have checked out trunk and all of the branches. My working copy is located in /pbe (or C:/pbe on Windows). I will use that location throughout the rest of this post. Make sure that if you choose a different location that you sub it in wherever I use “/pbe”.

So on OS X, to checkout the source code, open up Terminal and type in the following lines:

cd /
svn checkout http://pushbuttonengine.googlecode.com/svn/ pbe

Step 2 : Import the PBEngine Library project within Flex/Flash Builder.

Open up Flex Builder (or Flash Builder), right click in the Flex Navigator and choose Import. (You can also use File > Import > Other).

Open up the “General” folder and choose “Existing Projects into Workspace” and click “Next”.

Click the “Browse” button next to “Select root directory”.

In revision 600 of the PushButton Engine I added “FB3″ and “FB4″ directories underneath “trunk/development”. These directories have a Flex Library project skeleton within them that can be imported directly into Flex Builder.

If you are using Flex Builder 3, use the FB3 directory, and if you’re using Flash Builder 4, use the FB4 directory.

Click Finish.

You will see a Flex Library project in the Flex Navigator now. You will also have an error, don’t worry, we’ll fix that in the next step.

Step 3 : Setup the a Linked Resource for PBE

So here is the error that you will see:
configuration variable ‘compiler.source-path’ value contains unknown token ‘PBE’

The project skeleton uses something called a “Linked Resource”, so that it can find the PushButton Engine source files. To set this Linked Resource, you do the following:

Open up Flex Builder’s preferences.

Under General > Workspace > Linked Resources… Click “New…”

Click on the “Folder…” button and navigate to the PushButton Engine “trunk” folder, “/pbe/trunk” (C:/pbe/trunk on Windows).

Hit “OK” and you should see PBE listed in the Linked Resources now.

Clean the project to incorporate and rebuild all of the changes.

If you see PBEngine.swc underneath the bin folder, you are good to go! Nice work!

:: UPDATE ::

There have been file renames and other changes in the PushButton engine since this post. If your SWC is failing to build do the following.

In the Flex Navigator, right click on the PBEngine Flex Library project. Click Properties. Go to “Flex Build Library Path”, under “Classes” uncheck [source path] src and recheck it. If you are using Flash Builder 4, you can simply select “Include all classes from all source paths”. Any other questions… post a comment and I’ll answer them.

Step 4 : Create your game!

For this example I’m going to create a VERY simple Hello World game to show that we have everything working correctly.

Right-click in Flex Navigator and choose “New” > “ActionScript Project”.

Give it a name of “HelloGame”, and click Finish.

Now, to use the PBEngine Library within our HelloGame project, we need to create a link between the two.

To do this, right click on the “HelloGame” project and choose “Properties”.

Choose “ActionScript Build Path” from the list, and then click on “Add Project…”

You should see “PBEngine” in the list.

If you don’t see PBEngine, or you get a message that tells you, “There are no Flex Library projects in your workspace”, make sure that a) you have created a PBEngine Library by following the previous steps and b) the project is not closed.

Select “PBEngine” and click “OK”. You will now see PBEngine listed in the Build path libraries box.

Now that the two projects are linked, you can start using classes right out of the PushButton Engine. Code completion works, and everything compiles. Woot!

Great, now let’s write our impressive Hello World game.

Here is the source:

package {
	import com.pblabs.engine.PBE;
	import com.pblabs.engine.debug.Logger;
 
	import flash.display.Sprite;
 
	public class HelloGame extends Sprite
	{
		public function HelloGame()
		{
			PBE.startup(this);
			Logger.print(this, "Hello Nate!");
		}
	}
}

Run or Debug the game. At first you will see a blank screen, that is expected… Press the ~ (tilde or `) key, and the PushButton Console should come up.

The console has some commands by default: help, version, showFps and verbose (1 || 2)

You can add your own custom commands to the console to assist you while developing your games… but that is a post for another time.

Any questions, be sure to hit us up over on the PushButton Engine Forums or in the freenode IRC channel: #pbengine.

I do give huge props to Adobe for releasing both of these betas in “June” as they said they would. To be quite honest, it’s still technically May here in Seattle. Great work Adobe, another job well done. *slow clap*

:: UPDATE ::

Also, major props to the Flex SDK team for getting the beta out even with all of the Fx prefix madness that has been going on.

:: UPDATE 2 ::

Adobe Developer Connection has posted a list of informational links about Flash Builder 4, Flex 4 SDK and Flash Catalyst. Check it out!

[Bindable] private var _skills:Array = 
[
	{label: "---", id: -1},
	{label: "1 - Newbie", id: 1},
	{label: "2 - Some Experience", id: 2},
	{label: "3 - Expert", id: 3},
	{label: "4 - I'm a baller", id: 4}
];

And then binding this data provider to a ComboBox…

<mx:ComboBox id="skillsCB" dataProvider="{_skills}" />

Well it turns out there is a much easier way of doing this that I never knew of until today. ComboBox has a “prompt” attribute that you can set. It’s so easy…

<mx:ComboBox id="skillsCB" dataProvider="{_skills}" prompt="---" />

I told you it was easy. Can’t believe I never noticed it before.

Your tip for the day… The Flex SDK team has a guide that explains the coding conventions that they use within the SDK (for the most part).

Flex SDK coding conventions and best practices

I agree with almost all of the conventions they list here. If you’re planning on contributing the to Flex SDK, you NEED to be familiar with these conventions.

This situation brings up a valid question.

How do we (the Flex community) effectively help the Flex SDK team in a way that doesn’t hinder them? Let’s face it, spamming the inbox of Flex team members isn’t going to get us anywhere.

As I was contemplating this situation, I opened up my Google Reader. It turns out that Joan (a member of the Flex SDK QA team) has a series of posts discussing tips and tricks to using JIRA, along with what we can do to escalate issues that are important.

So for today’s tip, I’m going to provide links to these great posts:

• Flex SDK Fixed Bugs in 3.3
• Flex JIRA Tips (part I): Voting on Bugs
• Flex JIRA Tips (part II) : XML Feeds and Email Subscriptions
• Flex JIRA Tips (part III): How do I reopen a ‘Closed’ bug?
• Flex JIRA Tips (part IV): Community Fix Candidates
• Flex JIRA Tips (part V) – What does it mean when my bug is ‘Deferred’?
• Flex JIRA Tips (part VI): Understanding Milestones
• Flex JIRA Tips (part VII): How do I request a Feature in Flex?

I’ll update these links as she posts more.

Today I found a cool button that I wanted to use in my Flex application.

The button (roll your mouse over me):

The thing about this button is that it has complex roll over and roll out animations. Of course we could create the same thing within Flex using an ActionScript tween class… but some things are better left to the Flash timeline.

So how do we get our button into Flex, with all of its animation and interactivity intact? The answer, my friends, is to use Adobe’s Flex Component Kit.

Doing some research online, it’s not really clear where to get it, or how to use it. According to labs, it’s released within Flex 3… but I don’t have a clue where. So we’re going to do this my way…

Step 1 : Install Adobe Extension Manager 2.1

Obviously, you can skip this step if you already have Extension Manager 2.1 installed.

If you didn’t install the Adobe Extension Manager when you installed your copy of CS4, you can download it here —> Download Adobe Extension Manager

If you already had Adobe Extension Manager installed… just be sure it has been updated to version 2.1.

Download and open up Setup.app

Click Next

Let it run

You’re welcome Adobe

Extension Manager > About Extension Manager

Says 2.1… cool, we’re ready to move on to step 2.

Step 2 : Install the Flex Component Kit

Now we need to go download the extension —> Download the Flex Component Kit (you need an adobe.com account)

All the way at the bottom you’ll find the extension we’re looking for… Flex Component Kit for Flash CS3 Professional (I know it says CS3 and we’re working in CS4, don’t worry)

Once downloaded, unzip and double-click FlexComponentKit.mxp

Read this whole agreement and only if you agree the terms click “Accept”

…how many of you read that?

Okay, you should see this now.

Documentation for this component can be found here —> FCK Docs

Onward!

Step 3 : The Flash Side

Let’s take our button and load it into Flash. We’re going to name it “MyButton”.

Create an AS3 class to handle all of the button interactions we need

package {
	// MyButton
	import mx.flash.UIMovieClip;
	import flash.events.MouseEvent;
 
	public class MyButton extends UIMovieClip
	{
		public function MyButton()
		{
			super();
 
			buttonMode = true;
			useHandCursor = true;
 
			addEventListener(MouseEvent.MOUSE_OVER, onOver);
			addEventListener(MouseEvent.MOUSE_OUT, onOut);
		}
 
		public function onOver(event:MouseEvent):void
		{
			gotoAndPlay(1);
		}
 
		public function onOut(event:MouseEvent):void
		{
			gotoAndPlay("end");
		}
 
	}
}

Make sure you have MyButton selected in the Library, and then use Commands > Convert Symbol to Flex Component.

Your output panel will let you know the command worked properly.

Test the movie by pressing ⌘ + enter (ctrl + enter on the PC).

Publish the movie, which creates both a SWF and a SWC file.

Now that we have our SWC file, we’re ready to move into Flex Builder.

Step 4 : The Flex Side

Copy our newly create SWC file into our libs directory.

With the SWC in our libs directory, it will automatically be included in the classpath of our Flex application (see this tip for more information on the libs directory).

The SWC file includes the MyButton class, so we can now write our code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:local="*" 
	layout="absolute" backgroundColor="0x000000" backgroundGradientAlphas="[0,0]" 
	creationComplete="onReady()">
	<mx:Script>
		<![CDATA[
			private function onReady():void
			{
				// How to use the custom button in ActionScript 
				/*
				var button:MyButton = new MyButton();
				button.x = 35;
				button.y = -10;
 
				addChild(button);
				*/
 
				// And just for fun				
				makeGrid();
			}
 
			private function makeGrid():void
			{
				var pad:int = 35;
				var gridWidth:int = 10;
				var gridHeight:int = 10;
				var yOffset:int = -45;
				var xOffset:int = -25;
 
				for(var h:int=1; h<=gridHeight; h++) {
					for(var w:int=1; w<=gridWidth; w++) {
						var button:MyButton = new MyButton();
						button.x = w*pad+xOffset;
						button.y = h*pad+yOffset;
						myPanel.addChild(button);
					}
				}
 
			}
		]]>
	</mx:Script>
	<mx:Panel id="myPanel"
		layout="absolute" left="10" right="10" top="10" bottom="10" 
		backgroundColor="#1D1D1D" title="Hey look, I'm a Flex Panel"/>
 
	<!-- How to use the custom button in MXML -->
	<!--<local:MyButton x="-5" y="-10" />-->
</mx:Application>

And here’s what it looks like:

Weeeeee…. that’s fun, you can download the source here.

The source there is an Archived Flex project, all you need to do is Import it into Flex Builder and you’re good to go.

That was a long tip, any questions please post them.

There has been some good and bad feedback regarding the open source aspects of the Flex SDK and the team has decided to go out into the community to hear your thoughts. You can call in to air your concerns or share ideas.

Lately there has been a big upheaval throughout the Flex community dealing with the Fx prefixes in Flex 4. I’m not going to get into it here, but long story short… many people in the community aren’t happy about it.

Even though the Flex SDK is “open source”, it is still tightly controlled by Adobe. All of the planning, new features, all the decisions reside within Adobe. There is the Flex Bug System and it accepts feature requests from the community, which they take into account… but let’s face it, it’s a weak solution.

Today, I had the opportunity to attend the forum. It was absolutely a step in the right direction. Sure, they might have ticked some people off… Nobody likes being told, “This is how we are going to do it, and you have no choice”. That’s not what open source software is about. Sure, it might be too late to take the Fx prefix out of Gumbo… but at least Adobe came to their senses and realized that the community is as vested in this technology as they are.

From my own personal experience… there is a certain disappointment that comes when you’ve invested your own time to contribute to the Flex SDK just to have it deferred or ignored. We’re not being paid to build these things. Don’t take this blog post as a complaint about Adobe or the Flex SDK team, it’s not meant to be that at all. I just think that if Adobe trusts more in the community we can build something amazing.

I think it would be a great thing for Adobe to promote select community members… invite them into planning and discussions, assign features and bugs to them, involve them in decision making. I can rattle off a list of people who would love to be involved on that level with the Flex SDK, me being one of them.

I said it during the meeting, and I’ll say it again. The Flex SDK team should realize that even though it’s their full-time job to make this platform the best it can be.. for a lot of us, it’s our full-time job dealing with the decisions that are made.

:: Update ::

The recording is now available.

Additional Links

Jesse Warden’s thoughts on the issue
Tom Chiverton’s thoughts on the talk

I just wanted to ping everyone and get their opinion on something. Why would anyone ever want to use the include directive? I’ve recently been working on poorly designed project where at the top of every module there is an “include Header.as” statement that has 30 include statements within it. To give a datagrid additional functionality, you give it an id=”myDataGrid”, and the include statement takes care of the rest. It’s really bad.

I just don’t see a good use for the include statement anymore. In my opinion, it just promotes bad programming practices.

I mean, can’t everything be taken care of using OOP methodologies? Thoughts?

I’d like to thank everyone who responded, you all gave me quite a bit of insight.

After thinking about this for a while now, here is my list of the common reasons people incorrectly use include (include directive).

I have common functionality that I want shared across multiple components.

That’s great that you’re using DRY philosophy! However, it’s much better to combine the DRY philosophy with object-oriented programming practices. Instead of using the include directive, abstract out common functionality into a parent class. Then you can create children of your parent component, and add additional functionality as needed.

I’m building a framework.

Great… don’t use include. See above reason.

I want to use Code-Behind.

Ted Patrick wrote a wonderful post on Code-Behind in Flex 2. He accomplishes Code-Behind, and does so in an object-oriented manner without using include statements.

Adobe doesn’t natively allow multiple inheritance in AS3, and using the include directive is the only way to fake it.

Frankly, if you understand that statement… you’re advanced enough to know what you’re doing, and you don’t need this tip.

== Conclusion ==

There are rare occasions where include is exactly what you need. However, if you still feel you have a valid reason to use the include directive on a regular basis, please leave a comment below and explain yourself.

To be honest with you guys, I’ve never really been a huge fan of Fireworks. I’m a Photoshop guy, and I have been since version 5.5 (hooray ImageReady). However, at our last SeaFlex meeting Marty gave a quick introduction into Flex skinning using Fireworks. My eyes were opened! So here is the basic run down of creating Flex skins using Fireworks CS4.

1. Within Fireworks go to Commands > Flex Skinning > New Flex Skin
   
2. Select the components you want to skin.
   
3. Skin to your heart’s desire.
   
4. When you’re finished, go to Commands > Flex Skinning > Export Flex Skin
   
5. I created a new folder called testSkin and saved to that.
   
6. Now in Flex Builder. File > Import > Skin Artwork
   
7. Browse to the folder we just exported our assets to.
   
8. Make sure the image to component mappings are correct.
   
9. And…. you’re done.
   

Amazing.

:: UPDATE ::

Marty just posted a PC (and more in depth version) of the skinning your Flex applications with Fireworks. Read it here!