Short Version

I’ve built an AIR application in my spare time using Flex that helps you play Dungeons & Dragons 4th edition faster. It took 6 months in my spare time and cost around $50k to build, and $40 a month to maintain.

See and download it here.

It was created in response to my new players, who are tech saavy, having a slow time getting a game going. I copied the design metaphor used in MMORPG games, as well as creating an online database via Django of user submitted content to help the process go faster, as well as supporting house rules. In doing market research, I found my product is for a younger generation, and this makes it challenging to market. I used an Iterative/Agile development process to ensure it got completed.

The app had 3 goals: make money, make our games quicker & easier, and prove to myself I could execute. I succeeded in the latter 2, and failed in the making money… so far.

Contents

• Preface
• Introduction: Why the need for Powerz?
• The Power of Power Bars
• Why AIR?
• Why Django?
• Self-Inflicted Iterations
• Quick Note on Scrum
• Schedule
• Technical Details
• Flex 3 vs 4
• Libraries
• Monkey Patches
• Development Challenges
• Feature Casualties
• Marketing & Research
• Target Audience
• Trip to Dragon*Con
• Failures
• Successes
• Conclusions

Preface

I’ve spent my spare time the last 6 months building an AIR application called “Powerz“. Simply, it is an application that allows you to play Dungeons & Dragons 4th edition a lot quicker. It was built in response to newer players hastily flipping back and forth through rule book pages, all the while lamenting how much easier it is to do this in World of Warcraft.

It also became a test for myself. I wanted to see if I could release a product on my own, perhaps even turn a profit. I’ve been attempting for 5 years to create an online version of D&D, fueled by the wishful emails of those around the world who both managed to get their hands on alpha builds and validated my target market. That, and I had recently become an advisor for a startup, so needed creditability that I had produced results in the product sphere as opposed to the service industry which I’m currently in (Flex & Flash consulting/contracting). I had just recently completed my first official Agile/Scrum project getting a startup client to (*ahem* near) Alpha, and upon reflecting, knew I was now capable of releasing a real product on my own.

Introduction: Why the need for Powerz?

D&D 4th edition was created, in my opinion, to cater to, what I call, the “WoW Generation”. Wizards of the Coast, the company also responsible for Magic the Gathering, owns the D&D game. They recognized that to gain broader appeal of a game traditionally challenging to learn and losing market share to video games, they needed to not only make it easier to learn and play, but also target this gaming demographic. The new rules do just that. They are easier to learn for those not inclined to “read a bunch of rules”, and the new power concept allows a gaming group to quickly ascertain how they can contribute to the group.

The problem with the WoW gen’s, though, is that they grew up texting, and not only want, but EXPECT digital tools to be there, as well as cross device. D&D, at least currently, doesn’t totally work like that. They have made great strides in years to provide online digital content, such as Character Builders, rules compendiums, and online magazines with exclusive content. What’s funny to me is that the main goal for most of this content is to be printed to paper and used during gameplay. If you want to use these tools strictly digitally, you can, but that wasn’t why they were made. Ultimately, your still going to be using “real” books during gameplay.

When you have a background in MMORPG’s, or even just gaming on consoles, you look at rule books as primitive, and cumbersome, and ultimately, not as fun. They, like me, know this problem has already been solved digitally.

What kept coming up as a hassle during gameplay with this new generation of gamers was referencing their character’s powers, the main crux of 4th edition rules. I figured if I could solve this problem digitally, I’d be onto something special. I knew I couldn’t solve everything; I’d tried multiple times in the past to digitize the entire D&D experience, and I simply didn’t have enough resources to pull that off. For a digital power bar, however, I didn’t need a lot of resources…

The Power of Power Bars

If you’ve ever played World of Warcraft, Star Wars Galaxies, DDO, or any other Massively Multiplayer Online Role Playing Game, they have the concept of a power bar. There are a series of slots on the bottom, like a horizontal list in Flex, and in each you can drop a power into. It’ll be represented as a little image icon that infers what the power does. Upon rolling over them, they provide details of what they do. Upon clicking them, you use them. While veteran players use keyboard shortcuts and macros, this GUI concept is the core to most MMORPG’s today. Players familiar with such games “get it”, just like you and I understand to click & drag on a scroll bar to scroll text.

This interface element is important because in MMO’s, those powers, while forming the crux of the 2 most important aspects in those games, chatting & fighting, they also serve another subtle purpose. RPG games in general are technical. They basically take a lot of math, specifically ratio’s & percentages, and personify the results through the use of chance. While neat from a geek perspective, newbie players, especially those not tech saavy, can get overwhelmed by information overload.

Just like how Word hides non-frequently accessed information in menu’s that reveal, so to do MMORPG’s “reveal” information when the user requests it. Additionally, since these interface elements are actually over top of a 3D virtual world, they need to be as non-intrusive as possible.

In short, they provide the user with the ability to learn what their character can do, when she/he can do it, all using a mnemonic device of visual icons that relate to the action in a non-intrusive interface.

Why AIR?

I’ve bashed her in the past and got shot down by desktop developers who came out of the wood work.  To this day I still don’t get clients asking me to build AIR apps.  Regardless, it was a pretty clear choice as to why I needed AIR: offline capability to run Flex apps.

You can play D&D ANYWHERE. I’ve played at friends houses, at a camp site deep in the woods, on a plane, a bus, etc. All of these places don’t always have internet. Nowadays with wireless and cell phones that have decent coverage, you can tether on your device to ensure you have an internet connection just about everywhere. “Just about” isn’t good enough; if you can’t use it, or it’s a spotty connection, you view the “cloud” as holding your data hostage vs. some benevolent caretaker.

So, I didn’t want an internet connection to be a requirement, and thus, targeted AIR vs. a web browser. If you know me, using the Flex SDK was a no-brainer. If you don’t, here’s the run down:

1. Needs to work on as many platforms as possible. AIR works on most PC, Mac, and enough Linux distros. I use a Mac mostly, my gaming group uses Linux and Windows. The Character Builder for DDi works on a PC with .NET. Using CrossOver or Parallels isn’t cheap. Buying an OS + emulation software when you already have a working computer is lamesauce.
2. Writing my own component framework is time consuming. It took me 6 months to build Shuriken for Flash Lite 2, I’m still working on CorePlay for pure AS3… so if I ended up doing that, I’d spend all my time on developing code to develop code vs. finishing my product. Flex has all the components & styling features I need, Flex 4 more so.
3. I make my living developing in Flex Builder. This is what I’m most comfortable, and thus productive in.

Why Django?

Once I personally started using Powerz in my game sessions, taking her for a test run with my gaming group, a new problem arose: setup time. While battles finally went a lot faster, and focused more on strategy and chaos vs. wtf can I do, actually STARTING to play took awhile. Players had to manually input the powers from the Players Handbook into Powerz. Without OCR, this is a lot of meticulous hand typing.  This included those who played with made up house rules.

I thought, why couldn’t we do something like the CDDB days of old? CDDB was an online database where people would submit CD track lists. That way, when you turned a CD into MP3’s, it automatically filled out the song names and album name for you.  By the time it got popular, most CD’s were in the database so you didn’t need to submit them yourself. This was the first Web 2.0 (aka the read-write web) phenomenon that I remember. Basically you are leveraging the community, much like Wikipedia leverages the knowledge from every contributor in the world. This is a double-edged sword, as sometimes CDDB would have incorrect data without an easy way to change it. Wikipedia has had its fair share of drama about article authenticity, and who defines the truth when multiple authors disagree about the same topic.

Regardless, both are using the forces of good, and showcase how leveraging community input can greatly benefit the masses. Two heads are better than one, and thousands are just f’ing awesome.

I set out to build an online database of powers so when one person submitted it, everyone else could use it.  The most common ones, say all 1st level ones for all classes, would be ready to go. That way, even new players could quickly get up to speed. Powerz is supposed to speed up gameplay, and this would be the final lynchpin.

I hate, and suck, and server-side anything. I’d argue the majority of arguments, philosophical debates, and technical podcasts about software are regarding server-side development (iPhone apps aside). When people talk about Inversion of Control, server clustering, or Aspect Orientated Programming, my eyes glaze over, I face palm, and am like, “Wow… that’ll solve like 10% of my problems. That 10% is on the server… WHERE MY CODE ISN’T RUNNING!” To be fair, the majority of all cool software is running on the server. Most Flex apps I’ve written are merely pretty faces for pimp server-side action. The problem with server-side stuff is that you can’t see it. I’m a visual person, I went to art school, and if I can’t see it, to me it’s boring. I like seeing visual results from my coding efforts, and no, logging statements don’t count.

So… I knew I was in trouble with my idea. Every time in the past I had such an idea, I merely turned to PHP, since finding good server devs looking to work for free is really hard. PHP is available on just about every web host, for free, and there are a lot of resources out on the internet for it. It’s also very similar in syntax to ActionScript, so learning it was easy. The problem is, I’m not “in” the PHP community.  Creating a user account system may seem like a reasonable programming task to me, but an ignorant waste of time to a veteran PHP programmer who has used Zend or Drupal on many projects. Most of my endeavors into larger PHP systems have failed because the workload was just to large for me to tackle both the front and back-end. I knew this time I HAD to find whatever framework others were using for a user account system. I’ve failed to find like-minded server-side developers in the past for such ideas. I actually had a friend offer his services for this very project, but I was concerned I might actually make money, and I make a rule of not mixing friends and business.

However, I had just got off a Django project. Having spent 5 years or so evangelizing AMFPHP, yet never actually successfully getting native object passing working, I decided I’d see how easy it was in Python. Additionally, my experiences using Django’s user administration interface along with PyAMF Flex integration was a very pleasant experience. Since I’d already taking a look at Ruby on Rails awhile ago, I figured I’d give Python a chance.

Best decision ever.

I don’t know Terminal, my SQL knowledge equates to SELECT * FROM *, and I’ve never coded Python before. Django is the shit. It’s so easy, I learned my way around Terminal enough to not only “run a local server” (I know, right?), sync my database, and even play with Python code, just like Director’s message window. I even learned how to remote ssh into my production server, install PyAMF remotely, and deploy my code. Django is merely a framework atop of Python, but you have to know all that insane crud just to do it. Oh yeah, and I ended up buying TextMate (in part to Kristofer’s recommendation) to use for coding Python.

Speaking of Python, it’s a LOT like ActionScript 1. Really strange going back to loose typing. Unfortunately, the only real benefit I found was more succinct code. The Aspect Orienated/Functional stuff that uses the Decorator pattern with metadata tags for designating what methods require the user to be logged in only works for more recent builds of Python. Still… I got it and think its hawt. Additionally, the fact that you can import just a method of a class and use it is neat. There’s been a request on an unnamed list requesting ActionScript 3 get this ability so when you import 1 method of a library, you don’t end up importing the whole library, and thus incur the file size penalty. Since SWF is for web, this makes a lot of sense in investing in such a feature. Python’s for loops? Holy fish, advanced, and really cool stuff, way easier than doing similiar things in ActionScript 3 (faster? doubt it). I still don’t get their slicing syntax, but I’m sure if I did it every day I would.

So why Django? Within 3 days I had learned Python, Django, and PyAMF integration to have a working user authentication system working in my Flex app. Blah blah blah… open source has no value… blah blah blah.

…I suck at debugging it, though, a friend told me to look into Python logging, but I just ran out of time… print print print OT OT OT. That, and my admin only works on my local box, not the remote server… *ahem*.

Self-Inflicted Iterations

All my personal projects suffered from the most common symptom that affects a lot of us software developers: starting new projects is ALWAYS more fun than finishing them. You accrue a long list of awesome ideas that never make it to fruition. Of those, a few you blog about. Knowing this industry, a bunch are probably worthy of actually finishing and marketing because they’ll make bling… but… we’re a busy bunch. That, or you see no point because you have no clue how to monetize them.

I’ve had this happen 3 times with my major D&D online project in 5 years, 3 times with some games, and once with every other project that wasn’t specifically created FOR a blog entry since my career started. I almost swore a blood oath before starting Powerz. I didn’t really have too, though, because of circumstances.

First, I had just got off the best gig I’ve had in my entire career. It was working for a startup as a service consultant through Enablus. So, I make bling, but see $0 bling when they insanely succeed. Quite the soul reflection project. Second, I read a book called “Rich Dad, Poor Dad” upon a recommendation form a friend, and was then pissed for 3 weeks straight. Third, I now knew how to do Agile development which was better than my made up iterative process of the past. Fourth, D&D 4th edition really is slow if you don’t know your powers by heart; it’s even worse for DM’s who have 50 billion other things to keep track of. I needed this tool!

I made a simple rule. If I was going to work on Powers, I needed to release SOMETHING a week from when I started. If I grabbed a beer and started coding on a Friday night, there better be a new build, with associated forum post, WORKING up online the following Friday. If I had something come up, like say real, paying work, or my kid(s) got sick, or whatever…. then 2 weeks. If that didn’t work because, say I only had 4 hours in a 2 week period, then I’d lock myself into finishing just one feature before I was allowed to work on anything else.

Failure was not an option. To fail is to fail myself, and everything I stood for, and for those who listened to my blog entries full of “advice”. If I did fail, it meant Agile didn’t work, and all 10 of those blog entries I wrote espousing it were utter bullshit, and I needed to die in a fire. Seriously. After being so frustrated for so long about “figuring out” software development for the past 9 years, this was the line in the sand. Pick your platform, pick your tool, pick your framework, and either put up, or shut up.  Get something done vs. proselytizing about “how to program” with nothing to show for it.

In short, finish something I started.

6 months later, I’ve released version 1.0. That feels f’ing good. Really good. That, and D&D is easier to play now for me, and a lot of others.

Quick Note on Scrum

Remember, if you ever hear about this Agile or Scrum stuff, and are like, “Wtf?”, don’t stress. All you need to know about using Scrum correctly is release working software with a new feature every week (or every 2 weeks). That’s it, that’s all you need to do to be JXL Scrum compliant. If you don’t do that, you should really take a look at what you are really trying to accomplish.

If you’re a manager who’s trying to implement it, and your developers keep going off on paths they weren’t assigned, play to their ego’s. For example, if someone says, “I could write a login form in less than a day!”. If it then takes them 8 days for the form to actually work, call them on it. I guarantee you they’ll spout off about “OOP/Framework setup”, or some other lack-of-DRY-adherence excuse. That’s ok; the point here is to show them that what they thought they could do, they didn’t actually execute on. They’ll either re-assess what it really takes to develop even simple things, or you’ll come to a mutual understanding of what “working” really means.

I had to do that. In 2001, I created a stock charting application in Flash 5, AS1 pre-#initclip days, knowing very little OOP, zero best practices, and no frameworks, in 1 month. Today, that same application would take me 4 to 6 months, and cost 177% more per hour. Granted, the devil is in the details (quality of user experience, less bugs, more features, I actually know what I’m doing now + have experience, etc), but that, to me, says something about my ability to execute. Those in software know faster doesn’t mean better… but when you start splitting hairs about even simple features, you find some surprising things about yourself. I call this, programmer self-awareness through Scrum.

Schedule

For those who are interested, here is how my schedule worked out. When I mention a week, I’m speaking about a week of development time. So, if I started coding on Friday night, but only put in 4 hours for an entire week… I certainly had very little to offer in a true build. So, my first rule was, if I could do a week, do a week, and release. If I couldn’t because I had real work to do, then I’d instead get 1 feature DONE and release. This was still hard, because even if I could only devote like 2 hours a week to my personal project, it HAD to be on that one feature, and I had to force myself to finish it so I could get a build up, and move onto another. It was far from perfect, but it’s as Scrum as I could get with my free time… and it guaranteed I’d release multiple builds with enough room for user feedback.

• First 3 weeks, spent designing & doing initial prototyping (aka design phase in Waterfall). I had no gig lined up, so worked 3 weeks straight on my own stuff. I worked for about 7 days straight in Photoshop CS3.
• Work 1 hour one night, 4 hours another, 8 maybe on a weekend, or perhaps none for 4 days in a row. Bottom line, I still followed my weekly/bi-weekly/single feature release schedule.
• One build took 6 weeks (Alpha 9 to Beta 1) because I had to learn Django and do real work at the same time. Some weeks during that time, I only worked 1 to 2 hours per week, others, I’d work 3 days straight.
• Some weeks were coding. Some weeks were pure Photoshop. Three weeks was learning/implementing Django. Four weeks was setting up the website, porting all code & assets to work on it, and installing all forum and blog software. All was mixed amongst each other. Since I was doing everything myself.
• I did Analytics once in the beginning, and then changed it 2 weeks later when I couldn’t understand my own metrics.
• Start Date: Around April 5th, 2009.
• End Date: Hopefully September 26th, 2009.
• Total Time: 6 months

It’s hard for me to predict how long Powerz would of taken had I been able to spend 100% of my time on it. A lot of things came up, positively & negatively, during development that adversely affected the timeline. Users asked for features, work flows I originally tried didn’t pan out, Photoshop designs took a few tries, and learning Django staggered overall development on the Community portion. All I know is, Flex Builder 3 and Flex SDK 3.3 is foogin’ solid for what I needed.

Technical Details

The web site is pretty standard stuff. Forum is PHPBB, and blog is vanilla install of WordPress. Hopefully post 1.0 launch, I can modify the blog to match the rest of the site look and feel (excluding forum) via the Dreamer, an easier way to design WordPress sites via Dreamweaver. Her majesty used it for her site and it’s pretty cool.  I also need to redo my dated screen cast, and tons of other things.

While I did the original web site designs in Photoshop, the site itself was done by her majesty and I in Fireworks.  Fireworks’ text handling is superior to Photoshop’s, and now that CS4 shares the same font engine, you can get good looking interfaces.  If Photoshop were to improve their text handling capabilities, I’d probably still use Fireworks for it’s easier object editing + grouping + moving functionality.  For the web with lots of content, it was just quicker for me and her majesty.

For the video, shot using a Sony DCR-SR200, and edited in Premiere CS3 & After Effects CS3.  ScreenFlow was used for demoing the software.

Flex 3 vs 4

Yes, I very much wanted to use Flex 4. Unlike Flex 2 Alpha, however, she’s unstable and changes all the time. You could build some pretty Enterprise stuff on Flex 2, Beta 1. I would never do such a thing with Flex 4 just because she’s in such flux, and the IDE (+ Catalyst builds) is somewhat flaky. Obviously 6 months later things are more stable… but they still changed a lot (fx prefix, Halo interop, etc.).

I used Flex Builder 3 & Flex SDK 3.2… then 3.3… then 3.4. I use AIR 1.5.2. AIR still has a bug where you can’t seem to use compc (aka Library Projects) because of some weird Vector bug in playerglobals.swc or something. So I just gave up on using a library project.

Libraries

I have 1 Flex project, and a ton of libraries. Ones of note are:

• Cliff Hall’s PureMVC
• Ely’s SuperImage (that I patched)
• Claus Wahlers’ and Max Herkender’s FZip for reading & writing my custom file formats
• Christian Cantrell’s NativeAlert ported to Flex
• Google Analytics
• Google AdSense
• as3corelib for JSON, used in reading & writing custom file format
• Adobe AIR Update framework (which refuses to GTFO of RAM) with custom badges written in Flash (zomg!)
• my DebugMax window which is a lame attempt to copy that older Flash debug window (the Portuguese one)
• …and Grden’s localToLocal function
• Server is running Django on Python, using PyAMF to send AMF objects back and forth. I’m only using one class; getting nested ValueObjects to work with inherited and one to many relationships in Django’s Models was nigh impossible to debug.  For now, I just pass simple Objects which are uber-easy to parse.

Blah blah blah… open source provides no value… blah blah blah.

Monkey Patches

1. Commented out a bunch of InterManagerRequest code in AIR’s NativeDragManagerImpl class. Doing drag operations would cause the app to lock up for 7 to 11 seconds. Not sure if this was fixed in 3.4, but I don’t load multiple Flex apps with different SDK versions, so don’t need this code.
2. Added bitmap smoothing in SWFLoader, which Flex SDK 3.4 (or 3.3 I forget which, added officially)
3. Added a numLines getter to Label for more accurate text height measurement… which I then later didn’t use.  Proper invalidation fixed my measurement bug; text can be finicky, but if you wait a frame……

Development Challenges

There were 3 development challenges I faced.

The first was developing in AIR. If you are using Flex in AIR, it’s nearly the same thing. The hard parts were learning how Windows work, and their quirks (such as when does Window REALLY get its reference to nativeWindow?). How do you design for this as a designer, and what is an appropriate design metaphor? Multiple windows, or 1 window with many states? Also, event bubbling doesn’t work with windows, since each has it’s own stage, so there was a learning curve of when to manually re-dispatch, and when to just hand off to PureMVC Mediators.

The second was learning to work with reading and writing files. The FileReference class is EASY, but there are actually 3 classes (really you just work with 2) for AIR. They too have intricacies to learn, and how you can abstract them, and what the costs are in doing so. What was fun to figure out was how to associate a file with a document window in the PureMVC framework. I really had a tough time trying to tightly couple something when you’re technically not supposed to tightly couple anything in programming.

The third was creating a file format. I believe most traditional developers would of used some sort of serialization via ByteArray and the IExternalizable interface for your objects. To me, that stuff takes a lot of work, and isn’t easy for me to debug, nor verify if it worked. Maybe to those who think in 0’s and 1’s, but not me. It took some tinkering; I copied how SWC works.  SWC is a ZIP file with some XML and binary assets all inside. My file formats are basically the same thing; a ZIP file with a JSON text file holding the serialized object, images for any icons, and a text file determining what type the file format is (since you can’t rely on file extension). This allowed me to open up the file to see it’s contents and confirm my code worked as well as perusing the JSON to see if my objects serialized correctly.

What was great about being the only developer was that I was also the designer and back-end developer.  I knew how to design assets for Flex and could predict what I’d need designed. As the back-end developer, I could create data that the client would need, thus making my job easier in both places.

Feature Casualties

I had 2 features that caused major scope creep, and thus extended how long it took. They weren’t a waste of time, but as with every project, I learned something.

The first was the whole “document editing process” that people are used to. You open a file, edit it, save it if it’s dirty, and close the “document”. If you “Save As…”, you create a new file, yet use same window. I didn’t use this model at first. Instead, I just opened files, kept a reference to the file handle for each AIR window, and removed it when the window closed. However, this is not how every other desktop application works. Additionally, for those on network drives, you couldn’t really work with the files easily when moving things since it always had an opened file handle. So, it was a pretty big re-write/re-factoring effort to put this functionality & work flow in. I know how to do it now, but I’m just glad no one asked for undo yet. *whew*

The second was pimping out Christian’s NativeAlert window. I spent 3 days in AfterEffects when I was between gigs creating a transition in and transition out for the window.  Instead of just popping in, it’d “materialize” in, all magical like. To me, and one of my users, it looked awesome. It got old after 2 uses because you had to wait for it and there are a few alerts when saving files. If I speed it up any, it loses fidelity… so I just removed it. It required a lot of custom code to make the alert do it’s modality magic in time with the transition. I didn’t get to use any of it.

Marketing & Research

This was the most interesting for me. While I’m not a good salesman, I feel that I get online marketing and branding. I also feel like I understand my target audience, since I’m part of that audience. I actually did market research (aka learning my target audience and their needs) both at the start and during development.

I looked online and read about what WotC was offering, and then I looked at all the 3rd party offerings. I took a few for a spin. I read user reviews on forums and blogs, especially the passionate ones. I wanted to gain a better understanding of what they liked about the software, and how they expected software to work. There wasn’t really a pattern. The bitching about lack of Linux/Mac support was low, and a lot of the 3rd parties utilized Java. For those that didn’t, there we already well documented ways of installing a Windows emulator.

One thing that reading the forums did for me was really educate me on the current flux of the industry. Technology really has changed, and continues to change, table top gaming. WotC is in an interesting time of the market, and frankly I’ve think they’ve done a good job on positioning their D&D brand & rules for 4th edition to perform well with these changes. Where they haven’t done entirely well is executing both their community aspects online, as well as delivering their associated digital tools.

The short version of WotC’s transition to the digital age is, as magazine sales declined, WotC first sold their magazines to Piazo, and later brought them back and incorporated them into their new online subscription service; they no longer print magazines. You get the monthly magazines digitally, exclusive content, as well as access to their desktop and web tools. There are good and bad things about this. Some of their software isn’t released years later, but the ones that are are definitely nice.

Target Audience

I wrote something similar to this over a the Powerz blog.  Bottom line, there is a lot of confusion, at least for me, on who really is the target demographic. The high level view is that the older players prefer tangible rule books, whereas the younger ones are more apt to digital content. That’s where the black and white views end. Some from both groups are fine with digital content, but intend to transfer that content to paper in use in their games. Others would prefer to wholly digital, yet still play in person with their friends; like a LAN party.

I intended to confirm this suspicion beyond just talking online…

Trip to Dragon*Con

…so I took a trip to Dragon*Con 2009 this year. I go every so often to stock up on new dice as well as to see the 501st. My goal this year was to promote Powerz, and meet potential customers. I knew it would be challenging for a few reasons. First off, finding D&D players is actually hard. It’s a huge Sci-fi & fantasy conference; it’s not solely for D&D’ers. Additionally, most D&D’ers who do go play with their friends at predefined tables in a reserved hotel ballroom. These are usually niche groups, and while friendly, you can’t just barge in on them in a middle of game. If someone did that to me during mine, I’d be really ticked off. Additionally, the conference itself is confusing because it’s spaced around 4 semi-adjoining hotels (Hilton, Marriott, Sheraton, etc.), and signage isn’t large/verbose enough for you to get a clear picture of where you are, nor what events are happening where. I knew it’d be hard. Her majesty helped set my expectations to a reasonable level.

My first attempt was while waiting in dice line (like a food large buffet, except there are different colored dice you can choose from). One particular customer was taking awhile to get his transaction finished, and was in a TF2 spy costume (I think), so I figured he was a good target.

“Hey chief, you play D&D?”

“Yeah!”

“Cool, you play 4th edition?”

“Naw, 3.5.”

*sigh*

I then asked the attendant who was waiting on customers, but he didn’t play, just pointed to one of his co-workers; but they were UBER busy. Even Solid Snake briefly came out of his box to browse their wares. I didn’t want to annoy every customer, so moved to another vendor booth, full of D&D books.

A girl was just sitting down in a chair, and lamenting about how good it was to sit down. Prime target.

“Hey, you play D&D?”

“Yeah…”

“4th edition?”

Irritatedly, “Only because my group made me…”

“Rad, do you mind if you ask you a few questions about some software I’m building?”

Cautious, and body language suggesting she was about run at the slightest sign I was a vampire, “Ooookkkayy….”

I sat down next to her on the floor to make her feel more comfortable with my laptop, and briefly walked her through why I created Powerz, and what it does.

She immediately got excited, “Oh we already use that through our DM. He uses WotC’s subscription service… DD something…”

“DDO or DDi?”

“Yeah.”

“Which one?”

She shrugged but excitedly explained, “I don’t know, but it’s great. You can input all of your character data, and it prints out all your powers. Our whole group does it.”

I then proceeded to ask her questions about how her group plays, and take notes. Another gent from her gaming group joined in on the conversation, and motioned to a 3rd member who was also browsing books nearby. After I had asked my questions, I thanked them for their time… and went looking for a bar. I suddenly felt insecure, ‘How could DDi do all that? There is no way, I’ve seen the screen shots, read the reviews….’

While waiting for the bar tender who was overworked, and was already getting heckled by some disgruntled women next to me, I reflected on those I had talked to. I knew a lot of the older generation was very pro-3.5, me included. I really like, still, the 3.5 rules and felt they were akin to Macromedia’s Flash 8; the pinnacle of the company. I started getting really depressed, and quickly started going over all of my past research in my head.

…then I remembered something the girl had said. “Print them out.” Print? To paper? wtf? A smile came to my face, I gave up waiting on the bartender, and quickly headed to where I remembered the D&D gaming tables being the previous year. I stopped by the bellman’s desk to obtain some change so I could buy a few people beers in exchange for me pestering them with questions.

Paper. That was really what I kept seeing. The generation gap in that one prefers tangible assets to play with and the younger ones do not. Again, it’s not that black and white sometimes, but it’s still true. While waiting 1 hour and 40 minutes in line, I met a father who had brought his 11 year old daughter to “meet” the creators of the online game she played. It was some alternative to Club Penguin, which was apparently ruined under new management. She was really excited, and wanted to be a programmer when she grew up. The father, clearly out of his element, saw me in my business professional getup, clearly over dressed for such a casual, and often costumed event, and seemed happy to have some one to talk to. He found it strange that his daughter would spend his money on these online games for things that didn’t exist. Instead of a new barbie doll, she’d get a some new, exclusive outfit for her online character. We discussed her online habits, and those of her friends. I explained what I did, and he was intrigued.

His daughter is my target audience. The girls and boy in front of her, definitely early teens, one dressed up as Naruto, and others as Sango from InuYasha… those are my target audience. They grew up texting, the internet always existed. Those who were my age, dressed up as star trek characters… those probably aren’t my target audience. These kids revel in online content, but still have social interactions with each other in person.

People like me, and the kids who are used to digital tools don’t mind keeping things digital. Others see digital tools as a means to a paper end.

Upon leaving, I was convinced my target audience was mostly online and not at Dragon*Con… or at Dragon*Con WITH their PARENTS. It was a great learning experience, even talking to the few people I did was helpful.

Failures

The project as a whole, while successful, failed to meet one of its primary goals: make money. It does have some successes, which I document below. I had two main goals: releasing a product to prove I could execute, and to make money, enough to cover costs. Currently, there is not enough community features to justify a subscription pricing model. Additionally, I highly doubt I’ll get enough users to cover the costs via the ad supported model I use currently.

If you add up all the costs:

• Around 6 to 10 weeks of man hours (design, development, marketing + expenses)
• hosting costs ($20 hosting + $20 Django container @ Mediatemple)

The total comes to around $50,000. Each month I go $40 more into the hole as the ads currently aren’t providing enough revenue to cover costs, and I haven’t figured out how to monetize the anonymous usage data.

I have a new idea that will actually generate revenue, and Powerz could actually be a companion application, so that’s a positive.

I’m not sure about this statement, but… here goes: I’m glad I know I’m capable of executing vs. knowing how to make money and not execute. This, as opposed to someone who knows how to make money, but can’t execute. The sad fact is, most rich people I read about know how to make money, and get other more qualified individuals to execute for them.  Doh!

As a developer, however, I view this as yet another thing to learn, so that’s a good thing! If I start learning how to monetize things better, I can focus my development efforts on what matter monetarily, and eventually find easier ways to leverage help vs. doing everything myself. If at first you don’t succeed, try, try again.

Successes

My favorite part, the wins.

1. I now have a tool to make my D&D gaming easier, and more fun.
2. Others now have access to the same tool, with the ability to help guide it’s direction.
3. I’ve proved to myself for the 2nd time that Iterative development works.
4. I’ve proved to myself that I can execute on my ideas.
5. I learned Django & Python, and also learned not to hate the server-side.
6. I’ve learned, again, how much work it really takes beyond just coding to release a product.
7. I learned a little bit about engaging potential customers.
8. I learned a little bit about market research.
9. I learned how NOT to migrate data.
10. I now have something new to learn: How to make money with software.

Conclusions

While I’m disappointed I failed to monetize my work, it’s still early in the game, so maybe I’ll think of something. Overall, I’m really happy to have finally finished one of personal projects into an actual product. That, and I learned a ton. Soon, onto idea #2!

If you play D&D 4th edition, check it out and let me know what you think. If you don’t, but know people who do, let ’em know; I’d be most appreciative!

Contents

• Introduction – What and Why MIX?
• Conference Grounds – Where was MIX and how did it go down
• DoubleClick – Syndication ready Silverlight
• Have we seen this before? – “Dude, Flash did that years ago.”
• Silverlight Adaptive Streaming – Curious about how the buffering works.
• Silverlight on Mobile – Same problems as Flash Lite has.
• Silverlight for Flash Developers – I do Flash; can I do Silverlight?
• AOL’s Silverlight Email App – Enterprise Silverlight
• Bloggers Mingling – A-list bloggers, and who I met
• Conclusions – What I took away from MIX.
• History Repeating – Some of the .NET crew is doing what the Java crew already did.
• Force Fed Silverlight – Silverlight is an alternative, not a choice.

Introduction

I was invited to attend the Microsoft MIX 2008 conference. After discussing this years conferences as well as the technology involved with my CTO, he decided we should go together. We headed to Las Vegas, where the conference was held, with the sole goal of evaluating Silverlight for use in our self-service video platform, one of our company’s main products I work on.

Although a lot our focus nowadays is on Flash video, we have a significant amount of money and technology invested in Windows Media. We also do way more Windows Media business, especially in the fun Live events arena. We currently create a lot of custom Flash video players that interface with our back-end video CMS system. Some are simple while others are full blown multimedia applications.

Can we do the same with Silverlight 2?

That was the fundamental question to answer, or have answered, at MIX.

Conference Grounds

I’d been to the Venetian Hotel in Vegas before for Macromedia’s / Adobe’s MAX 2006. The MIX conference had about 1000 less attendees than MAX 2k6 (2000+), but was no less grand. You could spot the geeks everywhere, and they seemed to outnumber the suits. Registration was simple, our hotel accommodations were great, and the facilities and layout were a lot more informal that I originally expected. I had this expectation of Microsoft being stodgy, formal, and just overall “proper like”. This was smashed when I visited the HQ in Janurary and met Bill Gates in person, but apparently that experience wasn’t enough.

The conference, however, felt a lot like MAX. It definitely was a fun multimedia event with code. My CTO and I made a decent attempt to talk to a variety of conference goers, not just Adobe & Microsoft employee’s. My interest was solely to identify what their background was, why they were at MIX, and what they hoped to get out of it. That, and I like meeting new people, especially people outside of the Adobe sphere who do software for a living.

Identifying a technology’s validity are based halfway on the technology’s merits. The other half comes from identifying the community around the technology, and seeing if the 2 have a future together. Do they mesh? If not, is that a big deal? Is there even an identifiable community? How does it compare to other technology communities that I’m familiar with? What are the pain points, and what are the great matches?

All of these questions I was continually asking myself quietly as I listened to speakers, both official and informal.

Keynote Day 1: DoubleClick

The were a couple things that I found interesting about the keynote.

The first was Ari Paparo from DoubleClick. Scott Guthrie, Corporate Vice President in the Developer division at Microsoft, was talking about some of the Ad features in Visual Studio. I had Twittered how irrelevant this stuff is in the media industry. If Silverlight had any chance of making a dent in what Flash is doing, it needed to integrate with a real ad platform, like say,DoubleClick.

Not 5 seconds had I twittered that, Scott Guthrie had a witty introduction to Ari who showed a brief overview of the SDK of using DoubleClick with Silverlight. For those who don’t know, DoubleClick is one of the largest ad platform providers. I think last week in fact, the FCC approved Google‘s acquisition of them. One of many, we utilize DoubleClick at work to allow customers to have relevant video & image ads to show in their video players, allowing them to monetize their content.

Getting an ActionScript 3, heck even an mxmlc (Flex‘s compiler) compatible version from them has been like pulling teeth. While frustrating, what was more frustrating was the lack of ANY Silverlight information a few months ago. Our first project utilizing Silverlight, used primarily as a solution for Mac users since Flip4Mac is noble, but flaky. One of the things that eventually forced our Silverlight player to be removed, replaced by Windows Media, and thus flipping the bird to Mac users was the lack of official DoubleClick support. It’s joke really since both Windows Media and Silverlight take the same ASX play list file (text file with a bunch of URL’s to media basically).

Now, it’s official; they can play ball in the online media & syndication world.

Keynote Day 1: “We” Have/Haven’t Seen This Before

The second thing that really jumped out at me was a lot of the Silverlight content shown that could of been done in Flash, or had already been done years ago. It was extremely frustrating to here the “oohs” and “aaaahs” from the crowd. I’m like, “Have you all actually used the Internet in the past 5 years?”.

You couldn’t deny it, though. There was a subtle vibe. I looked around the crowd and saw muted discussion as each Silverlight application was shown. Whatever negative thoughts I had clearly were not shared by the majority. There was muted discussions amongst co-workers. People sitting next to each other were in quiet, yet excited conversation. Clearly they had ideas about how to utilize the technology and wanted to act on them.

As Ryan Stewart said, “This crowd isn’t just familiar with our technology”. Ryan’s typical & positive Care Bear Stare attitude did nothing to sway my feelings. I call bs ; this has nothing to do with technology familiarity and everything with technology approachability. The Microsoft crowd DID and DOES know about Flash & Flex, at least some. The only reason it was apparently invalid in their eyes is that it didn’t integrate with Visual Studio & .NET easily, and wasn’t presented as a valid business case by Microsoft. That has to be it. There is no way the thousands of competent developers and designers there had no clue these abilities couldn’t be done pre-Silverlight Beta 1 in Flash or Flex.

Keynote Day 1: Silverlight Adaptive Streaming

Everyone thought it was really rad. I yawned. While down-graded on-t3h-fly streams has always been a touted feature of Windows Media, especially over Flash Media Server, I’ve never seen it work… at least at my place of employment. Additionally, if you have enough bandwidth to down-grade streams on the fly from 500k to 100k, you’re clearly running on a network that has issues. You’re best bet in this case is not to spend an inordinate amount of time trying to be clever and preload lower bit-rate streams into the buffer. Instead, just feed them a 100k stream, and call it a day. Disagree? Works for YouTube, so…

Even Flash Player’s double-buffering has left me not impressed on uber-slow speed connections. Besides, the graph they showed was VERY well designed, making me question the validity of every image thenceforth I was shown. Bottom line: I’ll need to play with it on a production environment to really believe it has any value. With most broadband customers, decent double-buffering prevents all problems with On Video & 24/7 video.

There is a company out there that has a comparable solution for Flash, but that’s for another blog entry. This does add ammo that Adaptive Streaming is valid, and thus usable.

Keynote Day 1: Silverlight on Mobile

It doesn’t really matter if it works, nor if they formed a partnership with Nokia. I’m American, and as such, my country is held in the grip of operators who have walled gardens. Meaning, I get tons Flex & Flash work, but only received 2 Flash Lite job offers in 2007. Flash Lite is not popular here for the same reasons Silverlight won’t be.

Windows Mobile and CE have always been good. I had Flash 6 running well back in 2003 on a Windows Mobile device. Logically, one could assume Silverlight would work just as well. At that point, though, I’d much rather utilize WPF, not Silverlight… unless the content was already created, and you’re merely porting, but that’s never how I’ve seen it work.

Sessions: Silverlight for Flash Developers

Not the exact session name, but close enough. I sat in for half of this; I believe one of blokes from Cynergy Systems was presenting. In the 40 minutes that I caught, he went over the API and how you can code Silverlight without using Blend just like you can code Flash without using the Timeline.

It was really uncool to see, even in C#, that working with XAML via code is still a bitch. Some could argue that it’s nice to have such low-level access to XAML via code. The presenter did the same thing in C# that I did in JavaScript in Silverlight 1.0: Abstract everything you normally do with GUI objects in a base class to act like the nice API of Flash.

So, instead of guiObject.SetValue(“Canvas.Left”, 30), you instead make a base class do that as a getter / setter, so you can instead go guiObject.x = 30. Lame.

I’m not sure if the new GUI components fix this. While boilerplate access can be fun if you’re an uber-geek, high level abstraction into easy to use components allow you to get stuff done. Just ask Simeon and his adventures in not-using the Flex SDK, instead trying various pure AS3 approaches.

What was nice, though, was that clearly XAML & C# are definitely do-able by traditional Flash devs. You’ll do the same thing that you did learning Flex & AS3: Learning the new tool(s) and learning the new API.

Although the Adobe CS3 installation process is horrible (not Flex), I’m pretty sure the Visual Studio + Blend is worse, especially for the beta bits based on mourning Twits I read. You’ve been warned.

Sessions: AOL’s Silverlight Email Application

The only true Enterprise application I saw during the keynote was AOL‘s email application. A whopping 10-billion alarm bells went off when I saw it for a few reasons.

First, I’ve had the pleasure of working with & meeting one of AOL’s good acquisitions. They are a smart, talented team who’ve already had proven results. That doesn’t mean that all of AOL is, but it certainly gives me the impression those who are doing the acquisitions know what they are doing. Second, the AJAX version of their email client was really fast and seemed to work great.

You have a perfectly well and good AJAX email client… why in the heck did you make a Silverlight version? I made a note to attend this session to find out. I got my answer at the end during questions. Someone asked did you look at Flash as an option (he should of said Flex, but whatever). They responded with “Microsoft Partnership”. That’s all I needed to know. It was nice to know that they had an existing .NET team that already knew C#… whatever. Programming is programming. C#, AS3… if you can code, you can learn another language and platform.

However, this session overall was enlightening as to what Silverlight developers perceive they need. Aka, all the stuff the Flex SDK already has. Keep in mind, they built this while Silverlight 2 was still in early development, so I don’t think they had any access to the controls.

That’s right, they had build their own component framework. $10 bucks says they spent 6 months just building the component infrastructure they needed to actually build an application.

What they DID go over were high level & low level details of each of the facets of their development. This was the really cool part. They built their own component base classes, and controls. They built their own measurement engine. They built their own skinning engine (read run-time skinning, not just Blend). Basically, anything you’d find in the bowls of UIComponent in the Flex SDK and all of his helper classes, they did some of that on some level. In short, a TON of work just to get started. Very impressive from a developer perspective, very crazy from a “how much R&D money did this team actually get from Microsoft, ZOMG!!!1111”.

Hopefully, other teams won’t have to do that much work assuming the components, both Microsoft’s and all the 3rd party ones I’ve seen advertised, do a lot of this already.

It was pretty annoying to debate quietly with my CTO in the audience. “Dude, they have AbstractClass as a keyword.”

“What, AS3 doesn’t have that?”

“No dude… you just add an Abstract prefix and follow the convention.”

*grumble* *grumble*

“Dude, Silverlight has threads?”

“What, Flash Player doesn’t have threads?”

“OMG, you don’t NEED threads to produce a nice, working Enterprise application.”

“I can’t believe Flash Player doesn’t have threads.” *grumble* *grumble*

In conclusion, I was very impressed with what the AOL team had done. I was also impressed that Silverlight 2 Beta 1 is already creating this level of applications. “This level” will have be carefully scrutinized; I did not get a chance to play with the real application to see how it felt compared to Gmail, Gooey, etc. The AOL team also didn’t discuss their battle scars. I love Flex & Flash, but even I have tons of battle scars to talk about.

Bizzness

I managed to tag along on 2 business meetings my CTO had with 2 cool companies. Can’t really say who they were, but can say they are relevant to my business: online video. Totally out of my element, so naturally it was fun to learn how those things go down. One was all formal with the pretense of informality, and the other was just an introduction to get to know each other.

It’s more likely for these things to happen since everyone is more likely to be at the same place at a conference like MIX.

BlogZone MIXer

I got invited to the BlogZone MIXer; a who’s who of the blogsphere. I brought my CTO along to this A-List event. There, your usual celebrities like Robert Scoble, Molly Holzschlag, Eric Zocher, Ryan Stewart, etc. The one dude I really got to have interesting conversations that I never finished was Alex Russell. Among other things, he’s one of the creators of Dojo, the Open Source DHTML toolkit written in JavaScript that helps abstract browser incompatibilities. Anyone who does JavaScript for a living is a prime target for my wrath. Unfortunately, he was really cool so I found it really hard to take the piss out of him.

I drilled him about his role on the “Board”. You know, the ones who are shaping the future of JavaScript 2. I tried to get as much dirt as possible since I only ever hear mostly positive things which I know can’t be right. As central a role as JavaScript plays on the web today, you KNOW there is some drama up in that mug.

Alex is bright. Regardless of the historical reasons of how he got on the Board, if you ever have some spare positive karma, be sure to throw it his way. Encourage him to keep fighting the good fight, to battle cynicism, and to never give in. He’s clearly qualified. He’s got some good ideas that apparently are shared by others.

Like all standards boards, I felt like some of the non-vendors give a flip for the implementers. For example, Object.prototype was a great idea, but I’ve yet to see a tool that helps you identify who’s mixing what on your prototypes. Who’s fault is that? Those who built tools like Adobe Flash or those who built the language and didn’t give an easy way in the language for tool makers to latch onto? It’s pure speculation; we didn’t get to finish our 3 concurrent conversations so maybe they do communicate each other’s concerns and I’m just not seeing it. I’ve read like 1 blog entry on Colin Moock’s blog with a summary of the action. After talking to Alex, I’m glad that’s all I’ve read, and that people like Alex are in there.

Hang in there, buddy!

Conclusions

I had a good time at MIX and definitely plan on speaking next year. Not sure on what yet, but it doesn’t matter. I’m really appreciative of Microsoft for inviting me. I loathe Vegas, yet really dug the event and how everything was put together. I felt their execution was good, and the topics relevant. There were also a lot of cool & intelligent people there, which is the most important part of conferences for me. Also, thanks to Cynergy Systems (I believe it was them) for the Tao party. Had a lot of fun there.

Blend and Visual Studio still look appealing and valid, but I’m not looking forward to my first Silverlight project mainly because I’ll probably spend yet another 3 days getting up and running again. The install requirements as well as required times are just insane. Flex Builder 3 takes 40 minutes to download on DSL, and 5 minutes to install and configure. The Eclipse plug-in + various JRE’s can definitely take up a lot of your day, but not days plural. In all fairness, it IS still a ton of beta bits working together. Maybe it’ll be decent by launch.

…did I mention I’ll have to do Bootcamp or Parallels since Microsoft doesn’t appear to have any plans for supporting Silverlight development on my Mac, just debugging? My PC at home will be fine since I’ve got tons of alpha and beta bits working (somewhat, *ahem*) on it.

I can see why .NET dudes are so excited about Silverlight. The coding style and language look a lot like regular .NET development. I don’t do .NET, nor do I do server-side development, but I’ve debugged .NET code other people wrote in the past and the learning curve will hopefully be just API and runtime features since it’s C#.

…and that’s the confusing part. What is .NET 3.5 now… 48 megs or so? Let’s just pretend it’s near there. Silverlight 2.0 probably won’t cap 4 megs (unofficial cap based on rumor from one WPF project manager I talked to). What of .NET is missing based on those 44 megs NOT being in the Silverlight plug-in? What of XAML isn’t supported? What of C#’s features aren’t supported? VB, JPython, JRuby ? Those are questions I need to answer to see how well their execution of making it easy for existing .NET developers to transition.

History Repeating

The most important thing for me that I took away from MIX was that I’ve seen this before. Flash Developers had an awesome multimedia platform to build upon for years. Java guys came, and then left. A few masochists stuck around really helping the community, and growth of the platform, out a lot.

Years later, Flex came out, and changed everything. Java devs came in droves. Then came PHP guys, Python, you name it. Flex allowed traditional developers to succeed where they apparently could not before using Flash or various other open source alternatives like FAME, Flash Develop, or FDT, etc. After learning to code for years, I physically cannot go back to Flash to do large scale development. Therefore, I totally understand why traditional developers couldn’t fathom how to do large scale scale projects in Flash.

I’m seeing the same signs in the .NET world. It’s been 2 years+ on the new runtime in Flash Player 9. Building applications in Flex, both Enterprise as well as widgets, are now proven to work well. Aka, we have a great runtime and a great set of tools. I worked with a .NET team 5 years ago to do the front-end in Flash & HTML, and the back-end in .NET. The work flow was good enough. I know a lot of .NET guys who use Flex for the front end.

Yet the impression I got from the conference was that this side of .NET is unknown by a lot of people. Either that, or just that client side development in something other than server-side generated HTML/JS/CSS was, and is, possible.

I’m seeing the same signs. These traditional server-side .NET devs ask, “So, how do you handle session data?” …and then the cliche response we’ve read soo many times in the Flash & Flex world, “We’re a stateful client. There are no pages. This is an application.” “How do you store local data?” “So the middle tier no longer handles the rendering of the GUI?” etc., etc., etc. Some get frustrated. Most get excited, see the light, and start asking both themselves and their cohorts a multitude of questions how much better things could be.

2 years later, Flex is the poster child for Java developers. In 2010, will we be seeing signs of Silverlight being the standard for .NETerz?

Every word above this sentence is invalid until they get their plug-in installation correct. A lot of the Silverlight installs that were 1.0, and people upgraded to 1.1, is where the trouble started. Some of the plug-in detection code got confused, asking you to upgrade even though you were. Some of those affected blogged conflicting reports, causing confusion of what the real problem was.

This is exactly the opposite of what you want to happen. This is also one of the main reasons Macromedia Director‘s “Shockwave” Internet plug-in failed. I’d create something, upload it to my website, and my mom couldn’t view it because of plug-in installation issues. That’s a serious problem.

Flash didn’t have this problem. It just worked. For years. Silverlight the plug-in INCLUDING THE DEFAULT DETECTION CODE needs to just work. For years. If not, it’s doomed. “Doomed” not meaning in never being a viable solution, but rather, Microsoft will have to spend major PR money to compensate for the negative perception that plug-in installations gone awry will cause.

Force Fed Silverlight

What does this mean for Flex & Flash devs? If you’re a Flex dev… not much. We need to wait for someone to intelligently blog their experiences with not just the controls offered by Microsoft, but by the multitude of 3rd party developers.

If you’re a Flash dev in the agency world, you need to pay attention. Yes, please temper this with the fact that, even though it’s a week+ past, I was still at a Microsoft conference bombarded by marketing hoopla. Regardless, media work will come your way where a client will want Silverlight. This can either be because of a partnership, because the company already has a plethora of Windows Media content that cannot be cost-effectively converted to Flash, or because like most clients, they don’t care about the technology choice and therefore the decision was already made long before the requirements hit your PM’s desk.

I would HIGHLY suggest you get training in Blend in a official capacity if you’re job can fund it. If you’re bored, add Visual Studio to the mix as well. This will save a lot of frustration and a lot of time. Blend and Flash aren’t a lot a like when it comes to animation and work flow. Blend is NOT alien, however. You can learn it. I’ve seen a traditional designer use it (caveat, at Microsoft HQ) and was impressed at how fluidly he made things.

If you’re a Flash dev as a contractor, you can wait a few more months. I’ve gotten 1 Silverlight job and one WPF designer job in 2008. This compared to at least 1 Flex or Flash job a day, every day. Once Silverlight 2 gets out of beta, it may behoove you to at least be capable of compiling a simple app… say, drawing a circle to the screen in XAML and then making it clickable . Sounds simple enough, but you’d be surprised how much time that effort really can take. And as you know, time is money in the 1099 world. Hopefully it’ll take less time by launch to get up and running.

If you’re a Flash designer, you’ve actually got it pretty good. Blend and Design are not just for Silverlight development, but also for WPF development, aka rich desktop application development. This means that if you become familiar with the tools, you’ll suddenly have a lot of traditional .NET shops looking for “designers”. Not all, but more than are now. A lot of the .NET shops will be just as fine with 2 shades of gray as some of the small software shops using Flex. All that has to happen is to have upper management see a demo, recognize that their team is already “capable” of using their existing skills, and demand Silverlight. Someone who’s had experience, and has the budget, will request a proper designer / consultant be hired. The work flow between Design and Blend wasn’t that great for me, though. Probably because I’m a n00b. PNG FTW!

4 years ago, I choose to experiment in Flex, and eventually make it my full-time career. This was a choice I made. There were no job offers for Flex. Enterprises were still experimenting in Flex projects. Flashdevs loathed the Enterprise price tag and having the compiler be on the server. I didn’t care… I loved it! 4 years later, Flex is still rocking strong, and has a bright future.

Silverlight? The marketing machine at Microsoft is awesome. You don’t have a choice to learn Silverlight or not. You can choose not too, but companies WILL be utilizing the technology, some requesting it specifically. For the later, you can either cater to that, and take their money. …Or not, and find some effective way to sell them on Flex / Flash. In a sense, we’re being force fed Silverlight. Assuming things go well for Microsoft, I’m not “choosing” to be a Silverlight developer. Rather, I’m merely reacting to market conditions. Flex was easy… it was love at first sight. Silverlight? It looks fun if I actually had people to pay me do it, but Flex is more fun.

Either way, you can relax. Flash Player is still king, and there is still a lot more money to made for a long time.

However, I have an inkling most traditional programmers love it specifically because when it comes to Design vs. OOP, they’ll side with OOP. Not to mention .NET I think… like… works this way, hehe. I side with Design because of my Flash background. Either way, after seeing the example code in these posts, I have a much better appreciation for code behind and how it relates to Sliverlight’s implementation. Specifically how the View’s GUI layout is done in XAML, and that XAML can be used in both Design and Blend. Hotness.

If the Adobe CS suite would ever catch the heck up, we could be doing stuff like this. Imagine it:

– Designer makes comps in Photoshop or Fireworks
– Designer can animate and layout screens in Flash
– Flex or Flash Developer could then program ActionScript around those screens.

Vice-versa, the designer could design around the programmer’s implementation of screens. Agency vs. software shop work-flow, but either way. For now, us in the Adobe camp muddle through our production art / break up, and can only look on with envy.

Via Russell Myers.

Flash Design in Flex Application Proof of Concept.

To see a video walk through describing the code base, skip to the Code Walkthrough section.

To get the source, head to the Source Code section.

Introduction

Unlike my previous article on getting a Photoshop interface into Flex, my goals here are to integrate Flash with Flex, not treat it just as a design asset tool, but a contributor to the functionality of the client; using Flash for enhancing the design, and helping reduce transition code which tends to be verbose in Flex. Below I’ve got a sample application that has integration of a complicated Flash design done using many different techniques. I describe the reasons for why you would want to work this way, compare with other techniques, and walk through the code & files in my example.

To be clear, this is a proof of concept, and uses a variety of techniques for the purposes of showing developers a variety of ways to do things. It is not meant to indicate all ways to integrate Flash & Flex, nor necessarily the best ways for all occasions. Yes, I did in fact abuse this design fo schizzle my nizzle.

Why Integration?

Early on in Flex 2’s release, many Flash Developers recognized immediately that there were serious interop issues with Flash & Flex. This stems from the Flash Player 9’s new AVM, or ActionScript Virtual Machine that runs the new ActionScript 3 programming language. ActionScript 2, ActionScript 1, and Flash Player 4 scripting on down uses the old AVM engine. For security & various other engineering reasons, the AVM’s cannot talk to each other. This results in a SWF written in the Flash 8 IDE not being able to “talk” to a Flex 2 SWF. The need for doing such is that the Flash IDE allows creation of design content that Flex cannot create on it’s own. Flex 2 is an awesome programming environment compared to Flash, is approachable by developers, and is more geared towards large programming projects vs. multimedia. Therefore, there is much incentive to get them to work together, and not just by using a loadMovie approach (dynamically loading in the Flash created SWF at runtime).

There are a few solutions out there. One is do just that; load in the content dynamically by using a SWFLoader component in a Flex 2 project. In the cases of a ActionScript 3 only project, you merely use the flash.display.Loader class. If the content can operate on it’s own, and/or show design content correctly, this is satisfactory.

Another is to utilize a small set of classes to communicate via LocalConnection. LocalConnetion is a class that allows multiple SWF’s on the same computer to talk to each other. This helps bridge the AVM gap via viable API’s. This is asynchronous, however, and error checking is faith based.

A third one is to utilize ExternalInterface. Flash Player 8 introduced the ExternalInterface, and API to allow Flash Player to talk, synchronously (aka to block) with its hosting environment and receive callbacks from those method calls. This not only allows strongly typing those external calls, but hosts can call into the SWF they are hosting as well. In this method an API is used to have the Flash Player 8 SWF that is loaded into a Flex 2 to make a call to ExternalInterface which calls out to JavaScript on the hosting HTML page. The hosting HTML page then forwards that call into the same Flex 2 SWF. The Flex 2 SWF can do the same thing going back since both SWF’s can independently register callbacks in JavaScript.

A fourth option is to create the SWF using the Flash 9 Public Alpha up on labs. It has the ability to not only use ActionScript 3 in the Flash IDE, but can also produce Flash Player 9 SWF’s. One technique in doing this is to have have AS3 in the talk up to Flex who is loading it. There are some small gotchas with “digging” your way up to talk to Flex, but it can be done.

So, why not use one of the above methods. First off, Flash is powerful; it’s not just a design asset. So, simply being loaded in isn’t good enough for some functionality; Flash & Flex need to talk. Secondly, LocalConnection isn’t syncronous, and doesn’t have good error checking. This makes debugging long and frustrating. Third, Externalnterface uses JavaScript. You’ve now gone from 2 languages to 3; ActionScript 3, ActionScript 2 (or 1), and JavaScript as well as at least 2 different tools; Flex Builder for ActionScript 3 and JavaScript and Flash 8 for

What does integration get you?

I’m making it sound like integration is actually not the best solution, but rather, the less of the evils. It is. This is how things are, and even when Flash 9 is released, things wont be much better. Regardless, Flash can produce design content that Flex cannot, and used together the tools are powerful with the right team. Integrating Flash into the developers work flow rather than a design afterthought is the best thing to do on larger programming projects; which is typically what Flex is used for. Either that, or the primary skill set on your team is traditional programming, and thus the natural choice is Flex vs. Flash, in which case, Flash is the odd man out, but still a valid contributor.

As mentioned above, you can use the same code. You can write a Flash component in ActionScript 3, and use that same component in Flex. You can integrate it into the same Flex project and check it into the same version control. Traditional programmers will get that good feeling they typically don’t get with Flash projects with regards to maintenance.

You can compile the same code in both programs. Since you are using ActionScript 3, Flex Builder, mxmlc, and Flash 9 can compile it. Granted, there are caveats with embedding, and it’s a bitch. If I knew RegExp, I’m sure I could get an Ant script to do it. Leif suggested to look into it, but this isn’t my strength. Either way, you can even create Flash based test cases that you only use to test the Flash symbol class using the new Document class feature. Flex, which typically wraps the symbol class created in Flash in a UIComponent class via composition, can have it’s own test case.

You can compile once in Flash. Like the MTASC days of old, mxmlc, the commandline Flex compiler, has the ability to do bytecode injection; aka compiling incrementally. What this means is, you can compile in Flash for the mere sake of “getting the design assets into theSWF”. If you later change the code in Flex, it’ll merely change the code, but leave the original SWF design assets intact. Since you are embedding the symbol class into a main Flex SWF anyway, it’ll compile the assets in the Flash SWF into the main one, and use the updated code you just changed. This is nice because it basically treats the SWF’s as little design asset DLL’s so to speak, and uses the most up to date code. Unlike DLL’s, the SWF’s aren’t needed at runtime . It also means, you don’t necessarily need Flash to compile the Flex project, which scores major points with some traditional programmers. Third party developers and/or contractors, based on requirements, can deliver just a SWF to some clients or a SWF and a class(es) without having to turn over a FLA. I always give my source to clients, but I know some people have legal reasons for not being able to do so.

Finally, you can produce more types of components. Since Flash can do some crazy design ideas that Flex can’t, or can’t quickly, you can integrate a lot of that into components to be used in Flex; 3D exported to FLV integration, various compositing, and other hardcore visualizations.

How does integration work?

For a simple example, you can see here where I use a Flash 9 button in Flex 2.

Integration starts with coding the component in Flash you wish to use in Flex. Everything is a component; you think in that mentality, no matter how small the asset, and you’re good to go. You write an AS3 class that represents the asset in Flash. Like the AS2 days of old, you make the linkage ID of the symbol in Flash point to your AS3 class. Since everything is a class now in Flash Player 9, your Flash design component asset is too. This class, by my convention, ends in “Symbol”. So, if you are creating a glowing button, it’s “GlowButtonSymbol”. The “Symbol” denotes a Flash based asset. That way, when you see the class amongst hundreds of others, you can immediately identify it as Flash specific. Typically, the only thing you would do in Flex Builder to this class is add the Embed tag at the top. Flash IDE will ignore the Embed tag when compiling.

The second step is to create a UIComponent based class in Flex. This class will use your Flash class via composition. You are not required to extend UIComponent; you could extend Container or Canvas for example. A lot of Flash components, however, are design assets using low-level, boilerplate design functionality, so UIComponent usually is sufficient. Everything has to be at least extend, or be wrapped in, a UIComponent. If it’s not, Flex will throw an exception.

That’s it!

You can take this a little farther. I like to create test cases, classes that test to see if the component, and only that component, works. They basically throw it on the stage, and calls their exposed methods, if any. This makes debugging a lot faster and a lot less frustrating. It may seem to take longer at the beginning; it does. You’ll find, though, in the long run you spend less time compiling your whole application only to find one stupid thing in your component made everything else blow up.

In Flash, this is just test_GlowButton.as. This class is a Document class that you input into the Document class field in the Flash 9 IDE. It attaches the component and hits some of it’s methods. I like to use keyboard commands to test methods and such. You can save this in the same Flash folder as well, thus segregating it from the rest of your code base.

In Flex, I basically do the same thing: make an application class, embed the component, and test it’s methods. Flex Builder 2 makes me keep these on the root folder, though, since they are Application files… *cough* *Flex Team* *cough* *fixplz* *cough*.

Pitfalls & Frustrations

“Is it that simple?”

No. There are a plethora of gotchas. I’ll try to list the most glaring here.

The most annoying is embedding of sound and images in Flex. For example, Flex doesn’t have a library. You therefore use embed tags in your Flex code. This associates an external image or sound with a variable, and you can thenceforth treat that variable as a link to the asset. This embeds it in theSWF, so you don’t have to worry about preloading, unlike using loadMovie on external images or Sound.loadSound for streaming MP3’s. Flex wraps these assets in special classes called “Asset” classes. Sort of the same thing when you import a sound into the Flash Library, and export it with a linkage name. When you embed a Flash MovieClip symbol in an eternal SWF , it wraps it in a mx.core.MovieClipAsset class. When you embed an image, it wraps it in a mx.core.BitmapAsset class. This is nice. You get strong-typing with embedded assets.

The bad news is, Flash doesn’t have access to these classes. I reckon you could use intrinsics, a class that implies “it’ll be in the SWF at runtime”, and allows Flash to compile. These have to be installed in the Flash 9 classes directory, though; if you put it in Flex’s project directory, things could get dazed & confused and Flex isn’t from da erf. If you have to recompile in Flash for whatever reason, you have to comment out the sound code, compile, then undo your comments. Running Flash + Flex Builder at the same time with design intensive files open uses a lot of RAM, thus your comp goes slow, further exacerbating the frustration.

Fonts. Are. The. WORST! Flex 2.0.1, which isn’t yet, apparently has fixed some font importing challenges so you can import more than just polite ttf’s. In the past, if you wanted the Flash Player 8 FlashType (aka Saffron) engine to show really nice looking fonts, you had to embed them using Flash 8, and then reference that SWF as the font source in the Flex CSS. Either way, it’s commonplace to utilize fonts willy nilly in Flash without thinking about what you are embedding. Static text fields, for example, embed fonts by default. There of course is the issue between how they are embedded. Bold or not? Animation anti-alias or readability? Did Flex already embed the font? Who killed JR?

For example, I finally get a build working last night. I then implement the preloader via the preload attribute on the Application tag. Suddenly my navigation fonts don’t work. Huh? After 2 hours, I finally got it working again. The Flashpreloader had 2 static text fields that were using the same font that Flex was using. The difference? The preloader wasn’t using the readability version. It’s crap like that that eats away at your productivity and makes you want to start smoking again. Fonts have always been hard in Flash; now you REALLY have to micro-manage that stuff.

Flex Builder caching is another gotcha. When you recompile in Flash, you have to refresh your Flex Builder project. I usually refresh the whole thing; I click on the Flex project base folder, and hit F5. This can take as long as the dreaded “Building 0%” you see on the bottom right of Flex Builder / Eclipse. Basically, it’s just copying the updated SWF to your bin folder and/or re-compiling it into our main Flex SWF . This can drive you nuts if you are compiling, and fail to see your changes. Refreshing isn’t always enough. Sometimes, if you recompiled fonts or bitmap stuff in Flash, an actual Clean project is appropriate via the Project menu. Takes longer, but it works EVERY time. Good sanity check, that is.

Flash doing whack AS3 builds is another problem. It’s probably because I have alpha bits, because sometimes, if your class path changes, it’ll compile theSWF, but not with the real class. I’m not sure if Flash 9 is caching ABC files (AS3) vs. ASO (AS2) or what, but I’ll call methods on the class, and Flash compiles, but at runtime claims the method doesn’t exist. Go strong-typing. Anyway, you’ll go nuts staring at correct code, when in fact, the problem is your class path. I suffered a lot from this since I transfer code back and forth between my Mac and PC as well as re-factoring twice.

Framerate really can suffer in Flex. There are a plethora of reasons for this, but I’m having a hard time finding the time to make reproducible test cases to track down the issues. Here are some theories. First, I think Flash is better at producing SWF’s that “know” how to preload themselves. So, if you have a long PNG sequence, the SWF will playback well because… well… because Flash is good at doing animations. The same animation in Flex, though, is slow. Now, this isn’t as clear cut as that sentence reads. For starters, most of the Flash stuff I use is in states. States in Flex utilize the Flash Player 9 DisplayList. The DisplayList allows you to have a MovieClip exist, but not be drawn. My guess is, this violates the typically, “Hey, there is a long timeline with a lot of assets about to be played, let’spreload it.” Now, it’s “We don’t have to draw anything, so just chill…”. Thus, it doesn’t preload the required assets, and the animation plays slow.

States have the benefit of removing children that are not applicable to a state you are in. So, in the case of a LoginForm class that has the states of “signIn”, “error”, and “register”, the actual registration fields are not shown. They can actually exist to support databinding, but the actual vector graphics that represents them isn’t drawn. This is great.

For Flash animations, this isn’t so great. Especially when they are shown, and it now has to play the animation AND preload the assets, thus reducing your intended frame rate. That’s my theory, anyway.

Worse, states have the nice feature of removing children from the DisplayList that aren’t being drawn in the current state. My guess is, Flash Player uses this as an opportunity to run Garbage Collection on the not-being-drawn-assets. Remember, the unofficial ways the Flash Player 8 garbage collector works is A) every 60 seconds and/or B) when RAM usages increase by 20% or more. In the case of 60 PNG’s , each utilizing a meg of RAM (compressed!), that’s a ton of memory usage. Naturally, as soon as that animation is removed from the DisplayList, he’s a prime candidate for collection. Meaning, the PNG’s are no longer in RAM. When the animation is played again, it’s slow because the frames have to be loaded into memory yet again. That’s my theory too.

For the preload, my fix was pretty simple. You basically make a frame called “asset preload”, and throw EVERYTHING that animation needs on that frame. You can even put it at the front of the animation, in a graphic, alpha’d to 0. This forces Flash Player to throw all the assets in RAM. Since Flash Player is generally good at not running Garbage Collection while animations are going, you can usually be sure your animation will then run well. Did in my tests, anyway. This does NOT work if your computer itself is running low on RAM. For example, I ran a bunch of these examples at once, and my computers GC + Flash’s I guess were running at the same time, cause it’d freeze during the animations. That’s just my CPU being a pansy, though. No soup for you, sucka.

For the latter… not sure what to do. In Flash, this was easy. You just make a MovieClip’s visible property false. It’s still there, just not being shown, but as soon as you make visible true, it draws immediately. It IS being drawn, though, and taking up system resources. The DisplayList does the same thing with remove child. You can actually have an animation playing, but not in the DisplayList , taking up resources. It’s better than visible = false, that’s for sure. Either way, my guess is, visible = false is a better safeguard against Garbage Collection unloading your preloaded animation from memory vs. removing it from the DisplayList altogether. This is easy in Flash, hard in Flex if you are using states.

Sound compression is kind of frustrating too. For Flash, there are a multitude of ways to compress it with more codecs. In Flex, it’s a little harder. If you are sharing a lot of assets, you may run across the same sound sounding different because Flex compressed it differently. Really annoying. Or, you forgot to re-comment-in your code that you commented out to compile an ebmedded SoundAsset in Flash… thus you never compiled your sound into the SWF. How’s your brain’s cookie trail?

Resource usage is the biggest kicker. Eclipse 3.1 on my PC came, get this, standard with a max of 40 megs in the Eclipse ini. That’s right, 40 megs! AH, to be a full-time Java Developer, and need only that much. When dealing multimedia content, us Flashdevs need all the RAM we can get, and then some. Specially since FlexBuilder can actually render some of those SWF’s in real-time in Design View. It actually got so bad at one point, I couldn’t even compile! Java 1.5 would collapse on my Windows XP page file faster than Mike Foley, the guy who lives in a trailer down by the river, does on your coffee table. I closed every program to no avail. After finding this blog post, I upped mine and immediately everything worked fine. For the record, didn’t have this problem on my Intel MacBook using the standalone install of Flex Builder. In fact, I gave up looking for the Eclipse.ini on the Flex Builder install (non-plugin) because the performance was acceptable.

That’s the worst of the minefield.

The rest really have to do with the new ways Mouse, Keyboard, and focus events mesh with the updated and now built-in EventDispatcher and making sure you know exactly how things are working in ActionScript 3. For example, when listening for MouseEvent.CLICK events from your Flash created button, you’ll get 2. This is normal. By default, it sends one, as does your UIComponent. Since MouseEvent click events bubble, they’ll get to whoever’s listening. You should intercept it in your UIComponent wrapper, call stopPropagation on the event, create a new event, and dispatch something more meaningful.

Application Example

Flash Design in Flex Application Proof of Concept

Code Walkthrough

Here is a video tutorial walking through the code. In it, you’ll see animations created in Flash and then used in Flex in a variety of ways. I’ve also implemented someCairngorm 2 action with real dynamic data to showcase this isn’t just a proof of concept with no substance.

Code Walkthrough Video Tutorial

Source Code

Please note: I cannot give you access to FLA’s and fonts because I legally don’t own the design. The video tutorial should show you enough about how they are made. The actual code that made them I did include, as well as theSWF’s. Therefore, you CAN compile this in Flex using the provided SWF’s.

If you want the design, you can purchase it at Templatemonster.com, direct link to the design here.

Source Code to Flash Design in Flex App Example – View Source | ZIP

This is not the only way to do this.

I’ve had a designer export all PNG’s for me from Photoshop.

I’ve had a designer export all graphics as GIF’s with per-screen printouts to tape inside of my cube for visual reference.

I’ve had a designer give me a PSD with no fonts. When I got the fonts, they were the Mac fonts, not the PC fonts.

So, I’ve had a full gamut of situations on how this went down. Typically, most designers do not know, or just don’t care to export PNG’s out of Photoshop. GIF’s are sometimes ok . Thus, these are the measures us Flash & budding Flex developers have to go through to get the design into our world. I’m not saying it’s the right way, but without a designer capable of exporting PNG’s, we have no choice.

Maybe if every designer capable of doing this wasn’t always busy when I asked them to do contract work, I wouldn’t be posting this. Unfortunately, there is still a shortage of talent, or that talent in house doesn’t get effectively communicated to, and it’s just faster to do this yourself.

I’ll be speaking about this as well as Flash integration at the 360Flex Conference March 5-7, 2007 at Ebay in San Jose, California, USA. [pending topic approval]

Anyway, I say “denote” at least 7 times. Also, apologies for Flex Builder’s non-real-time typing. Eclipse is stealing the key presses from Captivate. It catches up when I click though, so just wait patiently, and you’ll see the code.

If you are a Designer, you can safely stop on “Contents Layout”, the 9th section. If you are curious to see how to animate & implement image assets in Flex, feel free to watch the whole thing. I covered states & transitions by accident. All 30 sections counted, the whole tutorial is about 58 minutes. Took about 7 hours to create & edit since it was improv. Uploaded all 150 megs of it all of last night. BTW, I had to update my CaptivatePlayer to work with Captivate 2 skin SWF’s, so any problems viewing, just let me know and I’ll just link to the files directly.

Hope it helps!

Getting a Photoshop Design into Flex 2 – A Video Tutorial using Photoshop CS2, Fireworks 8, and Flex Builder 2.