If you’re a Flash Developer and you are still compiling your projects from inside the Flash IDE, it’s time to make the switch!

Now with break-point debugging and support for a whole host of other plugins, you guys have done a fantastic job and really given Adobe a run for their money.

Thanks and Congratulations to Mika and Philippe, the team behind FlashDevelop.

(For a quick HTML5 refresher, check out this cute overview)

Don’t get me wrong, I think HTML5 is a great development for the future of the internet, but it’s important to realise it’s promising yet humble place in the technology landscape.

To put HTML5 into perspective, let me try to dispel a few myths…

HTML5 versus Adobe Flash Player Myths

• Myth #1: HTML5 offers the same interactivity, creative freedom and power of Flash Player. HTML5 is at best, a poor cousin to Flash Player for performance and interactivity in any areas outside standard, cookie-cutter, one-size-fits-all purposes like video players, map viewers etc. Sure, by now you have probably watched online video playing nicely in HTML5 players, but how much more does HTML5 offer for creative, unique offerings and experiences? Adobe (actually Macromedia) spent a solid decade optimising and improving flash player and flash authoring. Sure, they only recently implemented a respectable programming language (AS3), built a (reasonably) stable authoring environment, provided command line compilation and other run-of-the-mill features for a programming language, but they got there in the end. The very thought of authoring animations, bitmap effects, and 3D in javascript gives me goosebumps. Not to mention performance. By all accounts, if you try to do anything vaguely graphically intensive in HTML5 you start to run into trouble pretty quickly.
• Myth #2: HTML5 is coming soon. Actually, it may be coming soon to the bleeding edge, but certainly not to the masses. Adobe also spent that decade building saturation for their plugin and the unique payoff for designers and developers is that you know what to expect regardless of operating system. Now, should we really bet the farm on browsers fully, consistently adopting HTML5 standards any time soon? Usually we need to design for the bulk of users, not just the bleeding edge. You should expect to write off a good chunk of your users if you rely on HTML5 as your only delivery platform within the next year or two. On a side note, I dread a future where we need to code HTML5 browser hacks the same way we need to code CSS browser hacks today. Not only should we consider end users, we also need to consider the time required for a strong Developer and Designer community to grow for HTML5. And even before then, we need the time to develop decent HTML5 development tools to rival Flash Professional. That’s a long road.
• Myth #3: HTML5 is so much better because it’s free and open. Flash Player is much more open than you think. Did you know that you can download “Flash Develop” (www.flashdevelop.org, a fantastic free, open source ActionScript IDE) and the free Flex3SDK (http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK) and compile Adobe Flash projects without even needing to purchase any software at all? As Adobe continues to feel the heat, we might expect this trend towards openness to continue.

Adobe is a big, big company with lots and lots of Money
Do you really think Adobe will go down without a fight? After investing literally billions building browser saturation, building a global developer base, out-innovating wannabe competitors such Silverlight, cementing their place as THE dominant rich media advertising platform, I suspect they will find some creative ways of staying at the top of the pile.

The End Game
With Android devices running Flash just fine, pretty soon iPad owners will start to feel like they’re missing out without flash support. With one cheeky OS update, it’s within Apple’s power to grant them the gift of flash.

Assuming Apple does not rule the free world any time soon, don’t write off any hope of Flash support for iPad just yet…

Using this technique, you can use the font anywhere in your project, including inside other swc components. As for limitations: As I said, this is the “Easy” way to embed fonts, not necessarily the best way for all circumstances. e.g. If you are using many fonts or fonts with very large character sets this will result in very slow compile times and large file sizes. But in the majority of cases, this is a nice light, flexible, simple way to embed your fonts. Click here to download the sample fla for embedding fonts for AS3 in Flash CS3 IDE.

1. In the libary options, choose “New Font”
2. Choose the font you want to use from the dropdown and set the name of the font to be exactly the same as the dropdown value (making these identical just makes things easier). For this example we will use “Arial”
3. Set linkage options: Embed for actionscript = true, Export in first frame = true, Class = Arial, Base Class = flash.text.Font. This ensures the font gets compiled into your swf.
4. Create text field and text format as follows (obviously this is just an example, there’s more than one way to skin a cat)var textField:TextField = new TextField();
   var format:TextFormat = new TextFormat();format.font = ‘Arial’;
   format.color = 0xEDEDED;
   format.size = 60;
   format.align = ‘center’;textField.defaultTextFormat = format;
   textField.alpha = 0.8;
   textField.selectable = false;
   textField.embedFonts = true;
   textField.text = ‘Hello World’;

Font resources online:

Flash Designers use Flash CS4 IDE
The flash designers work with Flash CS3/CS4 in a fairly typical way, publishing from the Flash IDE. The IDE makes it very convenient for working with graphical assets, something which is very tedious in a code-focussed environment.
Flash Developers use FlashDevelop and Flex3SDK
The flash developers use FlashDevelop exclusively, and they compile their projects using Adobe Flex3SDK. They only publish SWFs for testing purposes, their real goal is to build the more complicated and powerful components that form the building blocks of the application. (These are code-based, non-visual components – sometimes called base classes or utility classes).

The trick is how all these users can work together.

Create SWC components from AS3 Classes for two way integration
We can export these non-visual components as swc files that can be used in two ways a) Designers can load the swc file into the CS3/CS4 library. From there you can use it just like a normal class, only you don’t need any of the code on hand, and more importantly, you don’t need to compile the code each time. This results in lightning fast compile times (a few seconds) and prevents your designers from screwing up your code. In truth, our designers are generally using flash develop a lot of the time anyway, due to nice things like code completion, a code-editing interface that wasn’t designed by an adobe intern, etc.

Furthermore, it’s not only the developers who can build and distribute their work as swc files – the designers can also export their visual, movieclip based classes in swc format. (Library panel >> Right click on library item >> Export to SWC). This is actually the key to closing the loop – if you want to compile your project from Flex3SDK, you naturally need all your visual components prepared in this way. In truth, we have not found that any of our projects have warranted this step to date – you seem to end up with a very unworkable library system where everything is so darn hard to edit. Furthermore, there is the added bonus that it keeps your developers honest, since they are forced to build self-contained, easily testable units.

Compiling SWC Components using compc.exe
We use the Flex command line tool (compc.exe) for compiling standard code-based classes into SWC. i.e. Classes that are code based and do not extend from Sprite, Movieclip etc. In this case we’re packaging up all the classes for Papervision3D into an swc named pv3d.swc.

Gotcha: Note that due to adobe/flex specialness, we needed to create a separate dummy class called PV3D outside the “include sources” location to avoid strange compiler errors lik “The definition is in circular inheritance” and “Could not find source for class Papervision3D in namespace…” and other fascinating tidbits. It is this dummy class that we tell the compiler is the main class for the component, even thought what we really want is all the other classes packaged up inside.

Compc command line arguments
c:\Flex3SDK\bin\compc -source-path c:\wwwroot\myproject\ -output PV3D.swc -include-sources c:\wwwroot\myproject\org\papervision3d -strict=false -compute-digest=false -namespace http://papervision3d.org c:\wwwroot\myproject\manifest.xml -include-namespaces http://papervision3d.org

Contents of the manifest xml file is as follows:

And Voila! You’ve got an swc file which contains all that papervision goodness. You have two options for using this.

• Flash IDE folk: Copy the swc into your flash components folder, close and open flash to refresh the components panel, then drag your component on the stage or into your library and hey presto.
• FlashDevelop/Flex folk: Put the swc somewhere nice like inside the /lib folder (it doesn’t actually matter where you put it). From the XYZ panel in FlashDevelop, right click on it and “add to library” to ensure that all it’s classes are available by bundling it up into your output swf. Bonus for FlashDevelop users is the ability to browse all the classes included inside the swc file.

I hope that helps a few of you out there trying to find their way in adobe’s increasingly confusing flash/flex journey.

Lastly, a few helpful references here and there:

SETTING UP FLASH DEVELOPMENT ENVIRONMENT WITH FLASHDEVELOP / FLEX SDK

1. Download latest flash develop (3.0.2) – requires java 1.6. http://www.flashdevelop.org/community/viewforum.php?f=11
2. Download latest Open Source Flex3SDK (v3.3) and extract into c:\Flex3SDK http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk
3. Configure Flash Develop to use Flex3SDK. Tools => Program Settings => AS3Context, set Flex SDK location to c:\Flex3SDK. Ensure you right click on any swc files that you want to include and choose “Add to Library”

Special thanks to Tim Walling for getting us started: http://www.timwalling.com/2007/10/22/compiling-flash-cs3-compatible-swcs-with-flex/

Official Flex documentation here for compc.exe (beware, it’s typically clunky) http://livedocs.adobe.com/flex/3/build_deploy_flex3.pdf

Apparently there’s an Export SWC plugin for Flash develop floating around, but I think that once you’ve got the hang of it, it’s probably easier to just use the command line version, outlined above. http://www.flashdevelop.org/community/viewtopic.php?t=2987&start=0