I’ve run into a bug with the released version of the Adobe Flex 4.5 SDK. The 4.5 version of the SDK does not respect keeping [Embed] metadata in your SWF. This is problematic because we use this metadata extensively in PushButton Engine.

Take the following example into account:

TestMetadata.as

package
{
    import flash.display.Sprite;
    import flash.utils.describeType;
 
    public class TestMetadata extends Sprite
    {
        public function TestMetadata()
        {
            var typeInfo:XML = describeType(TestClassWithEmbed);
            trace(typeInfo);
        }
    }
}

TestClassWithEmbed.as

package
{
    public class TestClassWithEmbed
    {
        [Embed(source="assets/flip.png", mimeType="image/png" )]
        public var Flip:Class;
 
        [SomeMeta(source="assets/flip.png", mimeType="image/png")]
        public var Test:Class;
    }
}

In version 4.1 of the Adobe Flex SDK, we get the following back from describeType.

<variable name="Test" type="Class">
  <metadata name="SomeMeta">
    <arg key="source" value="assets/flip.png"/>
    <arg key="mimeType" value="image/png"/>
  </metadata>
  <metadata name="__go_to_definition_help">
    <arg key="file" value="/projects/zaalabs/workspace/TestMetadata/src/TestClassWithEmbed.as"/>
    <arg key="pos" value="243"/>
  </metadata>
</variable>
<variable name="Flip" type="Class">
  <metadata name="Embed">
    <arg key="source" value="assets/flip.png"/>
    <arg key="mimeType" value="image/png"/>
  </metadata>
  <metadata name="__go_to_definition_help">
    <arg key="file" value="/projects/zaalabs/workspace/TestMetadata/src/TestClassWithEmbed.as"/>
    <arg key="pos" value="136"/>
  </metadata>
</variable>

However, in version 4.5 of the Adobe Flex SDK, you can see the Embed metadata is being omitted. Same exact code, same compiler arguments, nothing has changed except the SDK.

<variable name="Test" type="Class">
  <metadata name="SomeMeta">
    <arg key="source" value="assets/flip.png"/>
    <arg key="mimeType" value="image/png"/>
  </metadata>
  <metadata name="__go_to_definition_help">
    <arg key="pos" value="243"/>
  </metadata>
</variable>
<variable name="Flip" type="Class">
  <metadata name="__go_to_definition_help">
    <arg key="pos" value="136"/>
  </metadata>
</variable>

As you can see, the Embed metadata is being stripped out, even though I explicitly set “–keep-as3-metadata+=Embed,SomeMeta” in the compiler. Since I don’t believe that the Adobe Flash Player team would break describeType in a minor release, I’m led to believe that this is a bug that was introduced in the 4.5 version of mxmlc in the Flex SDK.

Rant

:: UPDATE ::

This seems to have been an isolated incident on this specific day, bugs.adobe.com has worked well for me many times since then.

————————————————————————–

So I tried to do the “correct” thing and file this as a bug on bugs.adobe.com. And would happily do so if the site worked. In fact, in the time I’ve been waiting for bug.adobe.com to load and let me login… not only did I write the test case, but I wrote this entire blog post as well.

[UPDATE]
I was finally able to file the bug, I think… it won’t pull it up. SDK-30485.

10 minutes to diagnose the issue…
15 minutes to blog about it…
45 minutes… and counting to file a bug through the proper channels.

Can I grab a version number from the app-descriptor via ant and add that to the AIR filename? Anyone know?

This is a pretty straight forward thing to do using Ant-Contrib tasks, that are publicly available.

You can download the example files –> here.

Let’s take a quick look at the ANT script.

<project name="PopulateVersion" default="populateVersion" basedir=".">
 
  <taskdef resource="net/sf/antcontrib/antcontrib.properties">
      <classpath>
          <pathelement location="./ant-contrib.jar"/>
      </classpath>
  </taskdef>
 
  <property name="app.descriptor" value="air-app.xml" />
 
  <target name="populateVersion">
 
    <echo message="Parsing application.version from ${app.descriptor}"/>
    <xmlproperty file="${app.descriptor}" prefix="airApp.appdescriptor"/>
    <propertycopy property="versionNumber" 
                  from="airApp.appdescriptor.application.versionNumber" 
                  override="true" />
    <echo message="Parsed application version: ${versionNumber}"/>  
 
    <propertyregex property="fileVersionNumber"
                  input="${versionNumber}"
                  regexp="\."
                  replace="_"
                  casesensitive="false" />
 
    <echo>Version Number: ${versionNumber}</echo>                    
    <echo>File Version Number: ${fileVersionNumber}</echo>
  </target>
 
</project>

As you can see it’s very straight forward to parse the version number out of the Application Descriptor. The only other thing we do is us RegEx to change the periods in the version number to underscores to make for more friendly file names.

Using the same concept it is very easy to also populate a Version file that gets compiled into your application which can include build numbers, or other interesting things… but we’ll save that for another day.

The Flex Show – Episode 115

RIARadio – Episode 17

GangstaCast Episode 1: Celebrity Stalker Edition

Also, I was thrilled to find out that I was mentioned on TWiT.tv’s Tech News Today for an article I wrote regarding tracking celebrities by scraping exif data from photos uploaded to TwitPic, yfrog, TweetPhoto and TwitGoo.  The part when they talk about the article is about 15 minutes into the episode.

Tech News Today 34: Take Off Your Pants, America

Article on ZaaLabs

So all in all, it’s been a very interesting week.

This process has gotten much easier, you can now use software update to get AIR 2 as well as Flash Player 10.1 in Flash Builder… check out this post.

Adobe AIR 2 and Flash Player 10.1 were released on June 10th, 2010. It’s an exciting time. This weekend I decided to do some development on AIR 2 to try out some of the new features.

On the Adobe AIR Team blog’s post they mention that the free standalone download of the AIR 2 SDK will be available on Tuesday, June 15th… but I wanted to play with the SDK today.

So I went over to the Adobe AIR labs page and downloaded the AIR 2 Release Candidate SDK which is –> here.

You can download the released SDK from –> here

After downloading the Adobe AIR 2 SDK, I followed the directions on the release notes which explained how to overlay the AIR 2 SDK with my current version of Flex 4.

I’m on a mac, here are the commands I used in Terminal:

cd /Applications/Adobe\ Flash\ Builder\ 4/sdks/
ls
cp -r 4.0.0 4.0.0AIR2
ls
cp ~/Downloads/air2_rc1_sdk_mac_051110.tbz2 4.0.0AIR2
cd 4.0.0AIR2
tar jxvf air2_rc1_sdk_mac_051110.tbz2

I then added a new SDK to the installed SDK’s inside of Flash Builder:

Now, I already had an Adobe AIR application project set up, and I switched over to the new SDK the I installed:

However, when I tried to run my AIR application, I ran into this error:

VerifyError: Error #1014: Class IIMEClient could not be found.
 
	at flash.display::MovieClip/nextFrame()
	at mx.managers::SystemManager/deferredNextFrame()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:267]
	at mx.managers::SystemManager/preloader_preloaderDocFrameReadyHandler()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:2460]
	at flash.events::EventDispatcher/dispatchEventFunction()
	at flash.events::EventDispatcher/dispatchEvent()
	at mx.preloaders::Preloader/timerHandler()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\preloaders\Preloader.as:488]
	at flash.utils::Timer/_timerDispatch()
	at flash.utils::Timer/tick()

After doing a bit of research I found out that my Adobe AIR project’s application descriptor file wasn’t using the correct namespace for the AIR 2.0 SDK. According to the Adobe AIR 2 Release Notes:

You must update your application descriptor file to the 2.0 namespace in order to access the new AIR 2 APIs and behavior. If your application does not require the new AIR 2 APIs and behavior, you are not required to update the namespace from 1.x based namespace. To update the namespace, change the xmlns attribute in your application descriptor to: http://ns.adobe.com/air/application/2.0

Sure enough, I hadn’t changed my namespace from AIR 1.5.3 to AIR 2.

I made the change in the descriptor file, and now everything works perfectly.

Built in image support of Adobe Flash Player limits you to 3 image formats: gif, jpg and png. While this has worked well for many, many years… I recently have needed to expand the types of formats that I could use in Flash Player. I should also note that you can absolutely add support for these formats directly in ActionScript using ByteArray. For example Mike Chambers blogged about an AS3 BMP parser.

I was originally looking for support for TGA, BMP and PSD, when my friend Ben pointed me to DevIL and challenged me to port it using Alchemy.

Porting C code using Alchemy is not a very straight forward process, but between Aaron and I… and with help from Ben Garney and Branden Hall… worked our way through it. We plan on a series of blog posts discussing the process of using Alchemy in detail. Hopefully we can garner enough interest in the community around Alchemy to get Adobe to continue work on it.

ZaaIL is being released as open source software (MIT if you’re interested). We will post it all on GitHub when we get the chance.

[sidenote]
I have been asked by a few people if I think Adobe should expand from their three image formats and use something like DevIL in Flash Player… I don’t think they should. Adobe has given us the tools to create really cool things such as ZaaIL. I’d rather the Flash Player team focus on things I find way more important… such as 3D support, mobile performance, hardware accelerated graphics, etc…
[/sidenote]

ZaaIL allows developers to now to load more that 40 different image types… go ahead give it a try, I particularly like using a PSD file or cover art embedded into an MP3 (View source is enabled):

More information can be found over at ZaaLabs.

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 will be giving this presentation again tonight at the Seattle Flex User Group, so if you are in Seattle… show up. We’ll have a bit more time for questions at tonight’s presentation.

:: PRESENTATION MATERIALS ::

Slides
TechWed Presentation
FlexMeetup.com Presentation

So a fortnight (I wait two weeks to tell anyone anything… so I can use the word fortnight) ago, I had the opportunity, nay the privilege, to attend Doug McCune’s “Cool Shit” session at 360|Flex. As many of you may heard, read or watched, there was an… incident that occurred during Doug’s session.

Apparently, I have been thrown under the bus as the co-conspirator of said incident.

So let us take a journey… starting two nights prior to Doug’s session.

Monday Night

A couple friends and I were hanging around the hotel after partying at the Rock Bottom. We weren’t ready to call it a night. So we decided to see what else Indianapolis could offer us and we hit the streets. We quickly found ourselves at Monument Circle. That’s when one of my colleagues remembered that there was some sort of crazy bowling in Indy.

We had no idea where to go until we ran into Tanner (a horse) and Sky (a man… I think). He gave us directions to duckpin bowling. However, It was too far to walk, so we went back to the hotel where we ran into some other “accomplices”. After a few minutes of trying to figure out what time the duckpin bowling alley closed, one of the Crowne Plaza employees informed us that Jillians had bowling.

We headed over there with the crew. Unfortunately, the bowling alley was full. Undeterred, we went down to the video arcade. We enjoyed Hyper Bowling, Super Shot Deluxe Basketball and Ski Ball. The party came crashing down when a Jillians employee informed us that they will be closing in 30 minutes. With thousands of credits still left on our cards, we decided to see how many tickets we could win before they kicked us to the curb.

So I went to the game that gave us the greatest chance of winning loads of tickets… I’m not sure what it’s called. It’s the dome game with the circle of lights… Well wouldn’t you know it… the first time I hit the button… I hit the jackpot of 375 tickets! I have ninja-like reflexes.

Here is a picture of one of my accomplices with a handful of tickets.

We were able to accrue around 645 tickets in less than 30 minutes, but what do you do with all of those tickets? Well, we decided to cash them out in bouncy balls… all bouncy balls (with the exception of one paratrooper).

Tuesday Night

After a great day at 360|Flex Indy. A group of us decided to try our luck at the bowling alley.

While bowling, we discussed the countless applications of 42 multi-colored, rubber bouncy balls.

Someone mentioned that Doug McCune had tweeted about shaving his chest for his session, and the ideas started flowing. Now as much as I’d love to claim that the brilliant idea of throwing bouncy balls at Doug during his session was all mine… it was truly a group effort.

Wednesday Morning

Wednesday morning rolled around, and I loaded the cup of bouncy balls into my backpack and made my way to the final keynote. We knew Doug’s session would be crowded, so we were sure to sit near the stairs that led up to the room where his session would be held.

After the keynote was finished, we rushed up the stairs to Doug’s room. It was already packed… people had camped out up there during the keynote.

Luckily, I was able to grab a seat in the front row. As soon as I sat down, I noticed that Doug had left the room, probably to refill his glass with water… or vodka. I quickly grabbed a handful of bouncy balls and went to work. Handing them out to the first few rows and giving them the simple instructions of.. “When Doug takes his shirt off, throw the ball at him”.

I wasn’t able to hand out all of the bouncy balls, as Doug re-entered the room and made his way to the front.

Then as the story goes… Doug took his shirt off…

There was a visual hesitation the moment Doug took off his shirt. Nobody was going to throw their ball… and it wasn’t me… but to whomever threw their ball first… bravo!

And finally… the video speaks for itself…

And there you have it… consider yourself in the know.

I also wanted to thank Doug for being such a great sport about the whole thing. You my friend are a rockstar… Keep up the great work!

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!