We’re going to start this tutorial with our trusty old friend Flash Professional.  The first thing you need to do is create a MovieClip.  Create a graphic and right click on it, then select convert to symbol.  As shown below, select Type: Movie Clip.  Make sure to check both Export for ActionScript and Export in frame 1.  Set the class to the name of your MovieClip.  In my case this is vLogo. Remember to be case sensitive and treat this as camel case because we’re ultimately going to be turning our MC into an object.  Set your base class to flash.display.Sprite.  You can also use flash.display.MovieClip should you need additional functionality, but sprite has less overhead.

Flash will warn you that your classpath is wrong, just click OK.

Now open FlashBuilder.  Select File>New>ActionScript Project.

Create a project name of your choice.  Set the folder to a location that you can easily access on your computer.

Now lets change gears and go back into Flash Professional.  Go into the library and select the MovieClip that you created at the beginning of the tutorial.Right Click on it and select Export SWC File.

Now we need to save the file into the ASExample folder that we created for our FlashBuilder project. Return to FlashBuilder.  You’ll notice that your SWC, in our case vLogo.swc has made itself visible alongside our other assets. Right click on ASExample and select New>Folder.  Set the folder name to ‘libs’ and place it on the top level directory inside the ASExample folder.

You can now create instances your Sprite or MovieClip and add them to your display list.

Now that you’ve learned the basics of working with SWCS, we’re going to get into working directly with the Flex Compiler.  FlashBuilder simplifies the user’s interaction with the compiler, making compile jobs mostly transparent. To enable this kind of transparency, Adobe had to add quite a bit of obfuscation to a process that is really quite simple.  Next time, we’ll look at how compiler flags and debug modes are set inside an XML file.  We’ll also talk about the best way to debug your project, both at runtime and compile time.  We’ll also explore alternative developer tools like TextMate and FlashDevelop, as well as some other nifty developer tools Like Ack and Project++.

This is going to be a pragmatic series of blog posts that I hope will empower other ActionScript Developers.  On the FlashCodersNY user group mailing list a question that is often asked is:

“What book should I buy to start learning ActionScript 3?”

This can be a very hard question to answer, and there are actually several books that I would recommend.  I’ll list them at the end of this post, but there is a significant problem with every single one of them.

To get right to the point, none of these books will teach you the workflow that you need to be a top tier Flash Developer, or even Designer for that matter.  The people that are doing the best work out there have the best process, and everyone else spends their days either tediously working in Flash Professional or clicking back and forth between Flash Pro and a conventional text editor.  Compared to the workflows of Java, Visual Studio .Net, Xcode, and even open source tools like MonoDevelop, Flash Professional is just appalling.  Slow, difficult to code and search text in, Flash Professional teaches bad habits for the benefit of animators picking up some coding here and there. But in this day and age, even the animators can benefit by splitting up the responsibilities amongst different tools that are more effective for the job.

In 2004 Adobe announced Flex.  Among Adobe’s many goals for Flex was the desire to attract experienced developers to the Flash platform.  To do this, they crafted a toolkit that consists of 4 primary pieces:

1.  The FlashBuilder IDE (Formerly Called FlexBuilder) – Adobe took a very popular Java Programming application called Eclipse and customized it to work with ActionScript. The project began as a plugin for Eclipse, but later branched out into a product of its own.  It offers advanced debugging features and a completely integrated development environment.  Other advanced features include code hinting and simplified asset injection.  Because Eclipse is open source, any company can create their own Forked version with customization and sell it as their own.  FlashBuilder’s top competitor FDT was built this way and offers many features not found in FlashBuilder.

2.  Adobe created the MXMLC compiler (later optimized and often referred to as FCSH).  This new compiler is able to compile ActionScript as well as an XML-like markup language known as MXMLC.  MXMLC is included as the compiler for FlashBuilder, but its also available for free and can be used in conjunction with a variety of other tools.  We’ll get into that later on in the series.

3.  Adobe created frameworks and components to facilitate enterprise level Data Services in Flex.  Flex is able to utilize additional frameworks that are not part of the Flash Player.  These Frameworks, otherwise known as RSLs or Runtime Shared Libraries are downloaded by the client at runtime and are cached within the Flash Player.  They are downloaded the first time the user runs a website or Application that requests the flex libraries.  All of this is done transparently, and once the RSLs are cached the user will not need to download them again.

4.  To increase scalability, the SWC format was introduced.  SWCs are binary files similar to SWFs but have enhanced abilities that allow them to be woven seamlessly into the code of a project.  Think of them as a user-generated RSL.  Toolkits such as PureMVC and RobotLegs make use of SWCs to further enhance the scalability of Flex.  Later on we’ll take a look at how you can use SWCs to talk to your MovieClips.

In the next section, I’ll talk about how how you can harness the power of these seemingly overwhelming tools and how to get started on smaller projects using simple ActionScript.

Books That I Like

The Actionscript 3 Bible Second Edition – Roger Braunstein

Essential Actionscript 3 – Colin Moock

ActionScript 3.0 Design Patterns – William Sanders

Learning Actionscript 3.0 – Rich Shupe  *This is a great book for the beginner programmer.

There have been some pretty huge changes to Flash in the past few years.  Last month at Adobe MAX we saw a fusillade of new products and prototypes utilizing Flash technologies. Everything from the Molehill 3D API to enhanced support for Touch devices in the updated Flex SDK.  In fact it was the largest number of new product releases that I’ve ever seen from Adobe, whose bread and butter products were dreamed up decades ago.  The announcements marked a significant commitment to mobile as well as HTML5 development, an indicator that Adobe is responding to to shifts in the multimedia market.  If you haven’t heard yet, I suggest you take a look! This news, combined with Microsoft’s announcement that they are ceasing development of Silverlight for the PC Market, has been the been the biggest news in interactive development since… Well actually, since Silverlight was announced in 2007.  But lets not forget the other force to be reckoned with from 2007, the iPhone.  Microsoft has an uncanny knack for writing the right software at the right time, and Silverlight was their ace in the hole for Developing Windows Phone 7.  Instead of having to chase after the iPhone UI like everyone else, they had already built the framework of what they needed.  But even with the head start, it still took them 3 years to bring the product to fruition.  It seems Microsoft have become wise in their years and have learned not to release a product before it is ready.  It really shows, as Windows Phone 7 has a brilliant interface.

Meanwhile at Sun Oracle there have been a series of unfortunate departures of product leads. This coming just in time for Apple to announce the deprecation Java support in Mac OS. Soon after, Sun Oracle announced that they would be taking on the project. At least the Java Devs can relax now and buy their Silverlight buddies a drink.

I mention Sun here not just because of the odd parallelism going on between Sun Oracle and Microsoft.  Its also not just because I have a soft spot for for a company that once made the most reliable hardware on the planet.  I bring them up because they brainstormed multi-platform software runtimes about 20 years too early and never got any credit.  Most Flex developers use Java every day in the form of the Eclipse, Flashbuilder, or FDT.  The Android phone UI layer is all written through Java APIs as well.  When I look back at Java One and the Java Ring it makes me wonder where we would be today without Sun.  And much like my Sparc Ultra 60 that has been collecting dust for years, it is hard to say goodbye to a Master or their day.

Here are some found, unaltered film frames. The first looks like some kind of medium format print that is likely from a kodak brownie 127 given the 1960′s background. The rest are 35mm slides. The film was beyond cleanable from years of exposure to the elements. Its interesting to see what destroyed prints and negatives actually look like considering the effect is faked so often. I’m sure we could make some nifty photoshop overlays out of these, but its interesting to have a look at them at face value.

A child from the age of entitlement, I grew up surrounded by devices with things like remote controls, digital screens, and little glowing ‘on’ lights.  User interfaces abounded in video games, televisions, microwaves.  For any consumer need, there was a team of engineers designing something that a non-engineer could use. Sure they weren’t always successful. How many people could actually set the time on their VCR?   And that meant if it took a complex mind to make a consumer device work it would end up in the technology graveyard.

So, we were used to having these simple interfaces around us that made an existing object or idea just a bit more ‘better’.  Eventually, we went interface crazy. The more buttons and LCD screens, the better a device must be!  Stereos now had screens but sounded worse.  Cars were riddled with sensors and digital dashboards that never worked right.  Phones got cordless, light up buttons, and voice recorders. But they also got NiCd batteries, so they had to be thrown out every 3 years.

Stop it, just stop it, you say!  This old junk is getting boring.  1980’s technology is all about the F-14 tomcat and blowing stuff up using that kick-ass Liquid Crystal Display technology. If that stuff kicked so much ass, why are all of the 80’s kids working as middle managers instead of avionics designers?  I think the answer is simply that we’ve already flown an F-14 on a Sony Playstation.  Its a lot more fun for most people to use technology than to design it.  And so the system cannibalizes itself.

So, if a playstation did in fact cause us to lose a few avionics engineers, its time to go dumpster diving in the technology graveyard to see what did inspire.

Enter my 1974 Saab Model 99.  Forget what you know about design.  This Saab is a user interface, and it doesn’t even have a radio!

In 1947 post-war Sweden a group of designers and engineers came together.  A group that loved to engineer even more than they loved to drive.  In fact, most of them didn’t even have a license.  They also didn’t have access to tooling to build their prototypes, and the steel body panels had to be hand beaten into shape on a wooden jig. They were the antithesis of the children of entitlement, and they designed a car that was as wonderful to build as it was to drive.

The 99 was the car that propelled Saab into the auto industry.  The car was bought almost exclusively by architects, engineers, and creatives.  Don’t believe me?  Look what Jim Davis was driving 5 years before he created Garfield.

The saab’s interface is in the design language of the car’s mechanicals.  This language is evident on every inch of engineering.  From the mechanism that slides the hood forward, then up at a 90º angle, to the mechanical height adjusters that hold the front seat in place with just 2 bolts.  In the unibody on which every panel is formed into an aerodynamic shape.  In the engine and transmission with longitudinal orientation that make the Saab the first and only performance oriented front wheel drive car.  Even the doors tuck under the body at a 90º angle for structural rigidity and remove the frame rail hump that makes it difficult to exit a conventional car.  These are just a few examples of the Saab interface.

This car taught me that good interfaces do real things.  People understand good functional design when they see it, in part because the human body is a machine of its own.  Design without function inhuman.  The curiosity of interacting with other machines is something that defines us as a species.  Working with the Saab, there is a persistent feeling that the car is alive and has a soul with its own intuition, its own personality, and perhaps most importantly, its own story.

Good interfaces should make us feel the satisfaction of turning a wrench on a bolt, engaging us in the story of a virtual object.  Just as the process of a sliding open the Saab’s hood creates a visceral reveal the engine, a drawer on a computer screen can slide and transform to reveal colorful imagery and data.  An engine can be rotated 90º for better performance, just as a web page can be rotated on an iPhone for better usability.  The values of good design don’t change, they just play musical chairs inside the design complex.

Its our job as designers to remember that the joys of being human can manifest themselves in rust or RegEx.

Threw this weekend’s videos into flash media encoder.  Check them out, here.

Here is something that has been driving me totally crazy.  Cmd+Z not working. Even selecting edit>undo was null.  The fix was to change the Preferences > Performance > History & Cache settings back to defaults.  I had previously modified the Tall and Thin / Big and Flat tile settings, which was the apparent cause of the problem.