Recently I had been approached to develop an interface for a huge interactive wall. The company has its own engine, but the interface runs as a Flash Player piece within that environment. I am not talking about Scaleform, which allows game developers to integrate interfaces built in AS3 into their projects, but the logic is pretty much the same.

So the idea was to use some simple 3D shapes and let users interact with it via a touch screen. The project did not go through, however I had done some research on the latest Flash Player beta developments and the latest alpha release of Away3D. As expected, I had to do a lot of searches in Google, I cursed at my computer once or twice, but I did learn a lot. I think it would be nice to share my discoveries.

Setting up FDT to publish onto Flash Player 11 Beta

I have to say a lot of people wrote blog posts already on how to do that. Although their posts explained more on how to use the incubator version of Flash Player, it's pretty easy to do a parallel. I'll just list the steps here and provide the sources to my information further down.

1. Get the latest available Flash Player debugger, Flex SDK and playerglobal.swc (by the way, since the IDE is now called Flash Builder, why is the SDK still called "Flex SDK " rather than "Flash SDK"?)
2. Uninstall whatever version of the player you have on your computer and install the latest one you have downloaded
3. Replace the playerglobal.swc in the SDK with the separate playerglobal.swc you have downloaded
4. Set up the SDK in FDT
5. When creating a new project, make sure to add the -swfversion=13 compile argument (I hope this will be dropped when the release is no longer in beta)
6. In your HTML page, do not forget to set wmode="direct" so the rendering can be done on the GPU

Now these steps are really well explained here, although since the release of the beta version (rather than the incubator version), it is no longer necessary to remove the flex.swc.

Now, all this is a bit of work to get running, and just recently, FDT released a template that sets up a lot of that stuff already. This template includes the compiler argument and an HTML template that presets the wmode, it even includes the M2D library, which is supposed to help creating 2D elements with the Stage3D API to enjoy the benefits of GPU rendering. Thanks guys! I guess now I want to look into creating templates.

Setting up Away3D

I have been reading good comments here and there about Away3D, and the running examples I have seen were quite convincing, so I decided to look into it. Getting started is quite simple.

1. Download the Away3D 4.0 alpha release
2. Add the provided source files to your classpath
3. Add the provided Apparat LZMA decoder library as well

Logically, this should be it and you should be able to go, but nooo! Have you ever seen a development project work properly on the first try? Especially not a project that uses both an alpha release and a beta release! After a bit of research, I found an article on DisturbMedia's wiki that basically explained the situation:

Most errors come from AGALMiniAssembler.as. I'm not sure why, but I found that if I split the multiple classes nested in the single file into multiple files that fixes most of the errors. At the end of the process you should have 3 additional classes: Sampler, Register and OpCode.

Once the split classes are added, some errors remain in the Away3D sources, however it is possible to compile an empty project at this point.

Next, you would expect to be able to use some Away3D classes already, so did I. The base requirement is to add a View3D, which contains a container that can be used as some sort of stage. Let's try:

ActionScript 3.0:

package
{
import away3d.containers.View3D;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
 
public class Main extends Sprite
{
	private	var	_view3D	:View3D;
 
public function Main()
{
	// set the stage
	stage.align = StageAlign.TOP_LEFT;
	stage.scaleMode = StageScaleMode.NO_SCALE;
 
	// create the View3D
	_view3D = new View3D();
	addChild(_view3D);
 
	//
	addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
 
private function enterFrameHandler(event:Event):void
{
	// render the View3D at every frame (or other update of your choice)
	_view3D.render();
}
 
}
 
}

Try and run that with the explanations I have given so far, you'll most probably run into the same situation I did: an error. Why? I mean, nothing seems wrong.

Here again, it took me a bit of research, but it turns out that a class needed a correction to handle a change made by the beta release of Flash Player. As I understand, this library was mostly written while the player was still an incubator release. Simply get that updated Stage3DProxy class with the one provided in the forum thread, and you're good to go.

From this point on, you can head to minute 2:30 of John Lindquist's tutorial to see how to add an awesome cube to your project, or look into the Away3D examples. Enjoy!

Thanks to Antti Kupila, I have been given a copy of Emanuele Feronato's book Flash Game Development by Example to read and critique. Emanuele has been blogging about Flash gaming for years, and since I am looking to get into gaming, I was eager to read the book.

So far I have made it only through the first three chapters. I did a preliminary critique of the book on the Amazon product page:

Emanuele Feronato has been blogging ([...]) good tips on Flash gaming and PHP development for a while now. When I learned he had written a book on how to get into game development, I had to try it.

In line with his blog, Feronato's writing is clear and concise, no fluff is added. A good thing is that he assumes the reader has already some knowledge of Flash and AS3. This book does present some basic information if you know nothing of Flash, but the intent of this book is to teach you how to do games, not how to program. This is really a good thing, for there are way too many books that think that all readers have never touched programming of their life.

Feronato does a good job at increasing the difficulty of concepts during each chapter. His introduction to each challenge, by splitting the concept and the coding, guides the reader properly.

As a web developer, jumping into gaming is a good and honest challenge. Oftentimes a web dev tends to create complex systems for data and views. Feronato brings back the joy of programming with simple and logic code structures.

I did get put off by the fact that his instructions make use of the Flash IDE, rather than Flash Builder, FDT or FlashDevelop. In a professional environment, it's quite inefficient to code in the Flash IDE, but I believe it would have taken too many explanations to put in a book about games. All in all, it is quite easy to transpose the instructions into code-only IDEs.

I would also have like some more game-oriented optimization tips (like using multiplications rather than divisions, since it is quicker), for gaming is all about being code-efficient. That said, it is a good buy for those who are serious about getting into Flash gaming.

I have read the other critiques of the book on Amazon and also other critiques from real game devs like Iain Lobb and Rasmus Wriedt Larsen and it got me thinking.

Critiquing the critique

My grandad used to say: "Only a fool does not change his mind." Whereas I do not think as harshly about the book, I do want to delve deeper into my critique to either correct what I said, or even add to it.

Lobb mentions the coding style of Feronato, which I also noted looks a lot like PHP's style:

We all write weird looking code sometimes, but I think a book needs to set a better example.

I must say that it did not deter me really too much, since I am used to pick up other people's work and fix it. However, now that I think of it, a book must set an example of good coding practices. I have to agree with Lobb on his critique.

Another practice that really should have been present in Feronato's code is tips that make code execute faster.

Using var array:Array = [] may look dirty, but it is way quicker than creating arrays with the new Array() declaration. His examples do not use many arrays, but I do not see why good habits should not be put forward.

Another tip is to try and use multiplications rather than divisions. Again, the examples do not use calculations that are processor intensive, but it is the best moment to explain to new game developers tips that will help them when they have to handle complex systems in the future.

But those tips are something that I knew already and that could have been used in the first three chapters of the book. Let's see when I get further in the book how it goes.

Both Lobb and Larsen look onto Feronato's code as merely scripts, for it doesn't push OOP concepts. As Feronato's book is really built on iterating his code and moving it forward, as many oftentimes code in real life, it would have been nice for him to explain how to transform hid code into classes etc. The speed at which Feronato moves through concepts means the reader is expected to know how to code. And if so, the reader could also then be expected to know some OOP. Feronato could have used such a premise to then push the use of classes. Unknowingly, I worked exactly how Larsen describes what he sees in his book:

[...] if you know how to code AS3 with OOP and good coding practises, plus being able to extract general ways of doing something from very specific examples [...]

As I mentioned in my Amazon critique, I would have preferred it if the author would have not used the Flash IDE to code, since it's pretty backwards. As I was going through his examples, I actually used FDT to create a proper project structure, with assets, packages and different classes for specific tasks.

I did enjoy Feronato's scripting style to read, but I do now think the book he wrote should have promoted practices that would be useful in professional environments.

Lobb critiques Feronato's choices of games for being out of touch with current trends. He makes an interesting point:

I really think that a lot of game developers around my age group (e.g. 25 and older) are stuck in the past somewhat with their ideas of what constitutes a computer game.

I think that using a lot of pixel sprites in my prototypes casts me in that group. However I must disagree with Lobb here. I am not fan of Flip and Match games, Tetris or other classic puzzlers per se. As good a developer I am, I have never tackled a real game project. Starting from scratch with basic concepts and logics actually helps me learn things properly.

For example, in Minesweeper, the logic of how to use and create a flood fill function is explained. Since I come from a web development, where the UI is usually the most important concern, I would not know what to call such a concept. It is a definite win for me here.

Another example is the Connect Four winning explanations. Feronato explains how a win is made in concepts and how to translate that in code. I know pseudo code is not something new in development, but learning to do it for gaming is, to me and maybe to other non-gaming developers, something refreshing and useful.

Let's take a look at what I was able to create with what I have read so far.

Concentration, a flip and match game

This game is pretty straightforward, we pretty much all know it. Feronato explains in simple terms how to build such a game.

What is missing however is an explanation for the reader on how to reset the game so the player can enjoy more than one game. Actually, the author does not explain how to restart any of the games he describes. That is a big part in gaming, it should be present in his book I believe. It would also have been a great way to show how to use functions. So as you can see from my prototype above, I have added that logic. Once the game is complete, the user can retry to play.

Stats on how the game progresses is also interesting for the player to see. Lobb actually mentions this in his critique, although I had though of adding these stats previous to reading the article.

As a personal touch, I decided to make my game shareable on Facebook's wall so that my friends could try that little prototype in their news stream. I will eventually explain how easy that is, but it is not the point of this blog post. You may try it yourself in sharing the URL http://jansensan.net/experiments/game-dev-concentration/ onto your news stream. Do not just copy the URL into your browser, it redirects to this post.

Once you share the above URL onto your news stream, it will then show like this:

If you ever used YouTube or Vimeo on your news stream, you know the Flash piece will expand when they click on the blue play button.

With those simple additions, people were enjoying a simple prototype and sharing it around.

Minesweeper

To be honest, I never understood the Minesweeper game, or rather what is compelling to play it. Or maybe I just hate it because that is the only game that was available on my dad's work computer at the government when I was visiting and he was asking me to wait for him... Anyways, I digress...

Feronato only explains what makes the player lose the game, however he should also have explained what is the win situation. An author cannot take for granted that the reader knows the game that is described.

With this game, Feronato explains some recursion and the concept of the flood fill, which I believe is well worth to learn.

Concerning the use of functions however, the explanations lack. Functions are made to reuse code and, again, restarting a game is the perfect need to reuse code. As you can see from the prototype, you can only play once, which as I mentioned before is not a way to build a complete game.

Maybe I have not read enough tech books, but whenever I stumble upon an example online that uses events, the tutorial not always explains that it is best to remove the event handlers, sometimes even in Adobe's documentation! Many a time did I have to explain or correct other people's code to reduce the demand on memory. Feronato does explain to remove the event handler, I have to give him props for this.

Connect Four

This game is not digital by any means, and recreating it does not make it more fun. However, the logic learning with this game is quite nice. Games like Drop 7 seems to be a game that extrapolates on the concepts defined in Connect Four.

The structure of the code in this game made me cringe. I believe that under no circumstance should a child tell its parent what to do. Sounds logical no? I mean not only about code, just read the previous sentence aloud and you will feel how much sense it makes.

Feronato actually does that here, he write something like this.parent.parent. It is not technically wrong, since it compiles, but I believe that conceptually it is not right. It makes it so complex for someone else to inherit a project and try to figure out such a logic. Big no-no.

While explaining how to check for the game completion, the author does bring forward the idea that is it not efficient to loop through all possible tiles. Good suggestion on code efficiency here.

So, what now?

I do see that this book has some flaws, but nothing that could not have been corrected or pushed more. I think also however that both Larsen and Lobb have dismissed a couple of things in their critique.

a) The audience. Larsen makes a good point that the code is quick and dirty and that the prototypes are not teaching concepts, but that is exactly what the introduction says:

Who this book is for

• AS3 developers who want to know quick and dirty techniques to create Flash games
• Flash animators who want to learn how to create games from their works with AS3
• Programmers who know languages different than AS3 and want to learn AS3 to make something more interesting and fun than the old "phone book"
• Even if you aren't a programmer, but you love Flash games, you can count on this book: you will be guided step by step with clear examples and the support of the full source code of every game

Now, is that audience right? That's another question, but it is clearly stated.

b) The types of game. Lobb did hit on that and I do what to bring it back. The title of the book clearly states that is for building classic games, mostly puzzlers.

Build 9 classic Flash games and learn game development along the way

Again, the question to raise is, is that a good thing to teach devs? With Stage3d (a.k.a. Molehill), P2P, game controllers on AIR and all sorts of awesome features, Flash can be so much more as a gaming platform.

All in all, I will go on reading the book, for I know I will learn some more things. I agree however that this book does not feel complete, but it feels like a good primer to get into game development. Hey, I may also be wrong, but once a reader knows about some concepts like AI, recursion, etc., it then becomes more possible to search for more precise concepts.

As creative developers, we need to be familiar with the concept of tracking. For those of you who are not familiar with the idea, tracking is a way of recording the user's interaction with a website, an installation, a game, or any other interactive piece. For example, you'll notice that I sometimes refer searches people did to end up on my site or what is the most popular post. I can get all that information via tracking.

The purpose

The data obtained from tracking can be used for different purposes. In theory, the strategist should meet with the information architect in the beginning of a project to share the learnings obtained from previous projects. Afterwards, the information architect adapts or corrects wireframes accordingly.

Let's think of a share button on a microsite. If an agency implements a share button, but said button is not used at all in any of it's sites, the strategist could then decide that the share button is either useless, then ask for it's removal. Also, it could mean that it is not either visible enough or in a proper location, that would then be a job for the information architect to rethink where that button should be placed in the site.

Tracking useless data: achievements?

That does mean however that when creating a tracking plan, a strategist might have to be careful to track every of the user's actions, useless data might serve no purpose. But in other contexts, such as games, tracking all sorts of useless things might serve a purpose: achievements.

Many people who are familiar with games know that there are tons of things tracked in there, and since their creation. Asteroid's rocks, Pac-Man pellets and fruits, Donkey Kong's barrels, Super Mario's coins. All those things were tracked in order to present a high score. Pretty basic, and a bit boring by today's standards.

Bubble Bobble, an old arcade game, had a lot of undisclosed tracking that affected how power-ups and points were attributed to the player.

Probably the most mysterious is the formula that determines when special items appear. Most players believe it to be random, but actually they're all directly determined by the player's actions. The game maintains counts of a large array of trivia, like bubbles popped, times jumped, water bubbles burst, and times wrapped around the screen. When a counter exceeds a threshold value, a flag is set scheduling the item to be generated in an upcoming level. – Source: Gamasutra - Game Design Essentials: 20 Mysterious Games

More recently, online gaming has allowed tracking results to be used as bragging rights in between gamers. Services like XBOX Live, Playstation Network and the recent Apple GameCenter all allow their players to track seemingly useless data and post it on a more developed online high score board.

A recent game went from indie to fame, Super Meat Boy. That game tracks the attempts of the player to succeed at passing the current level, and at the end of the level, presents a funny replay of all the attempts at the same time.

Tracking tools

There are multiple ways to track user interactions. As I have not worked in gaming, I can only mention those about websites, but the idea is mostly the same.

Google offers an easy to use free service, Google Analytics. Enterprises oftentimes go with professional companies that offer tracking services, such as CoreMetrics. Even Bitly, the URL shortener service, offers some tracking.

Those who ever worked with banners—ugh, I hate these things—know of something called the ClickTag. If you don't know what it really is or never cared to look it up, let me spell it out for you: it's a tracking tag. Yup! Those ad servers hosting the banners track the amount of clicks on those banners. I mean, it's important to the advertiser to know if the banner is successful. And just so you know, a banner click rate (views vs. clicks) is oftentimes less than 1%... Sometimes, they go as far as using heat maps to know what attracts the user to hover over or click on said banner.

Try tracking tools as much as you can, it is an important skillset to have.

Why should you care?

Well, you may not have to, it all depends on what you want to do. But like in anything, it's good to know how it works and how it affects you and your work.

If you aim to know programming in all its nook and crannies, if you like to optimize the hell out of your code and do not care about the rest of the project lifecycle, tracking will just be an annoying request from your project manager to add some lines of code in your project.

However, if you care about how the project got to what it is, if you care about the user interface and experience, you need to work with a strategist and an information architect before the project is started, and also afterwards once the project is complete to see what are the lessons learned. It is a great way to move forward in the world of development.

Further reading

There are obviously a lot of people writing about SEO, strategy and interaction design. Here are a couple blogs that I find relevant:

• 52 Weeks of UX
• The Future Buzz
• Get Elastic
• Ignore the Code
• Luke W: Ideation + Design
• UX Booth
• UX Movement

That is useful while debugging, however most often those traces are needed in the final context of the Flash piece, like a website.

There are some awesome tools out there that do just that and in style. I'm thinking of De MonsterDebugger. That tool is really good, although it requires some additional classes and long words to write to get something simple (eg: MonsterDebugger.trace(this, "Hello World!")).

There is a context in which that tool cannot be used, and that is Facebook. Ah! the ever hatable social network platform! Facebook does not allow ExternalInterface for security reasons, that is why tools like De MonsterDebugger are not available, this is how data is sent to their debugger. Edit: After receiving a comment, I investigated, it indeed turns out that MonsterDebugger is available when working on Facebook, as it indeed uses LocalConnection. My bad for assuming. However, the use of ExternalInterface is still not possible on Facebook, and the point of this post is more to show how to use the Terminal and Command Prompt to debug.

Sure you could create a textfield and add it to the display list, but that can become tedious if you need to add scrollbars and such.

A good alternative is to use a debugger that functions regardless of context. Adobe's open source Flex SDK comes with the Flash Debugger, a JAR package that can be run with Java from the command line.

Yikes!

That sounds more complicated than it really is actually. Let's see how to run the debugger on Mac OSX and Windows.

Terminal on Mac OSX

The screenshot above provides already a lot of information on how to run that package, but let's spell it out step by step:

1. Open Terminal
2. Go to the directory where of the Flex SDK you want to use
3. Go to the "lib" directory
4. In that directory, you need to run the "fdb.jar" package. To do so, type "java -jar fdb.jar"
5. To start the debugger, type "r", for run. The traces and errors will then be displayed in the Terminal

This will work for all SWFs published with debugging enabled, whether they are local or online, and that is where it becomes useful, for debugging stuff online. Just make sure then that you installed the debugger version of the Flash Player so it can communicate with the Terminal.

Command Prompt on Windows

It's pretty much the same on Windows with the Command Prompt. You can see here that I use Windows XP, so I'm sorry if there are slight differences on Vista or 7, I don't have those OSes.

1. Open the Command Prompt
2. Go to the directory where of the Flex SDK you want to use
3. Go to the "lib" directory
4. In that directory, you need to run the "fdb.jar" package. To do so, type "java -jar fdb.jar"
5. To start the debugger, type "r", for run. The traces and errors will then be displayed in the Command Prompt

Happy debugging!

Aah, the joy of being able to obtain code completion during development, what dev doesn't like this? A while back, I explained how to link to SWCs to get code completion, but not compile said SWC in the SWF, so it could be loaded at runtime. It turns out that all IDEs do not necessarily behave the same way Flash Builder 4 does. Figures...

Ever since I went to Flash on the Beach, I have been playing with more IDEs than Flash Builder. I have to say I've been quite lucky: all attendees were given the FDT 4 Pure IDE. Also, I have been one of the lucky winners of an IntelliJ IDEA 9 licence. And since I was already trying all sorts of IDEs, why not look at FlashDevelop, an open source IDE, sadly available only on Windows.

When I look at the metrics of my blog, it seems that loading a SWC at runtime (along with the post about Facebook and AS3) is the most popular subject, so I though it would be better if I was more thorough and explain how to repeat the workflow mentioned above for all these IDEs. Obviously, if anybody knows even better ways to go about what I'm about to explain, by all means share with me.

Flash Builder 4

I already published a post about this workflow and this IDE, simply refer back to it.

FDT 4

FDT is pretty much the same thing as FlashBuilder, albeit better. It is also based on Eclipse, but all those plugins I needed or those that some devs boasted about, they are already in place in FDT.

When you want to add an SWC, I must say it's quite simpler here. No need to go hunt in the preferences's subcategories. Right-click on that SWC, the select "Source Folder > Add to Classpath".

Now, the small issue that this presents, there is no prompt that asks whether you want to embed said SWC in your code, or to load it at runtime. I hunted a bit for this one, but in the end it takes s simple manual change. I was wrong on this one, as pointed out by Mattes Groeger:

[...] you can set this option via GUI. Just call the project “Properties” window by right clicking the project in the Flash Explorer view. Then in “FDT Build Path” click on the “Build Order” Tab. Here you can choose for each library via check box if it should be used as runtime library or not.

Alternatively, you can still go and play with the settings file, as I explain below.

Whenever you create a project in any Eclipse-based IDE, a .project file is created. With FlashBuilder, there is also a .actionScriptProperties. Do not worry if you have never seen these files, they are "invisible." They are actually XML files that contain project configurations. I'll probably have to come back to these sometime in the future.

I was then thinking, FDT probably creates those files too. Lo and behold, it does! Now, how do you edit these? At the top right of the Flash Explorer panel, there is a triangle pointing down. In there, select " Filters...".

From there you can select what types of file you want and do no want to see. Personally, I really dislike it when there are hidden files, so I want to see all of them. Once you have that in place, you will be able to find the .settings folder.

I mentioned the .actionScriptProperties for FlashBuilder, for FDT you want to open com.powerflasher.fdt.classpath. In there, all the sources paths are listed. In order to change an SWC so that its code is not embedded in the SWF, change the useAsSharedCode attribute from false to true. Then just make sure you load your SWF before you instantiate any class from that shared library.

Voilà for FDT.

IntelliJ Idea

Now for another beast altogether. I must say I have not been able to familiarize myself much with this IDE yet, and I find it a bit more complex than necessary. I mostly had to refer myself to Jesse Freeman's posts about the AS3 in IntelliJ IDEA workflow to be able to set up and compile a basic project. Once that behemoth in the room is taken care of and you know where to add SWCs and sources as libraries, it turns out to be simple.

First, right-click on your project (which is called a module in IntelliJ IDEA) and select "Module Settings".

In these settings, select your module and go to the Dependencies tab. If your SWCs are not there already, add them with–you guessed it!– the "Add" button. At the right of the path to that SWC, there is a combo box from which you can select options for the scope: "Compile", "Test", "Runtime" and "Provided". The one we need to choose in this case is "Provided".

You can now go about your business for the rest of your project.

FlashDevelop

Working with FlashDevelop is a bit tricky for me, since I'm on a Mac. However, back when I was working at an e-com shop 3 years ago, I was using FlashDevelop, I should be alright. What really help I have to say is that this tool has an active community, which saved me a great deal of trouble. A search on Google and I got this forum thread which answers all my questions. So, credit given when credit due, now let's look at what is to be done with FlashDevelop.

First, select your SWC from your library, and from the contextual menu, choose "Add To Library".

Once the SWC is added, the label will show in blue. Right-click again on it, and then the "Options" menu is visible.

In that window, you are presented with the necessary options. In this IDE as well the terminology changes, but at least a description is given. Check "External library (not included)".

Ant

As you will see from the sources I provide at the end of the article, all these IDEs actually play along quite well. But if for one reason or another, you are more the I-don't-depend-on-no-IDE kind of person, you can also compile your project directly into Ant. I know that after I have written my post about Ant, I should have written about how to compile with said insect, but since I faced the loading a SWC at runtime issue first when I started dabbling with FDT, I thought about writing about this workflow first.

Let's get to business. In ant, you need to use the runtime-shared-library-path tag so that when you compile your code is checked against your library, but that the library is not included.

<runtime-shared-library-path path-element="${ASSETS_DIR}/swf/assets.swc">
<url rsl-url="${ASSETS_DIR}/swf/assets.swf"/>
</runtime-shared-library-path>

Specify in the path-element attribute the path to the SWC, and in the rsl-url attribute of the url tag against what SWF the SWC is compared.

Simple no?

Conclusion

This is actually the first time I try to do something and see how each IDE behaves. I'm quite happy to have found out that all of these play well together, that is good news to know that if you commit all of your project built in one IDE to SVN, that another developer can check it out and run it in another IDE without conflict.

However, one thing that did bother me is the amount of crap (the worst are Flash Builder and IntelliJ IDEA) that these idea create, there are so many useless files! And I am sorry for this, they are all part of the sources as well.

More related to the issue though, it is nice that all IDEs offer a way to work with code completion of assets at development time.

Sources

As promised.

As developers, there are inevitably repetitive tasks that need to be done and redone with each new project we undertake. The best example I can provide is creating the folder structure for our projects. Obviously this is personal to each dev, and there is also some stuff that some of our IDEs–hmm, I'm looking at you Flash Builder–add by themselves. Oftentimes I have simply copied/pasted the structure from project to project, even created a folder structure without any files, just so I could copy paste. That was a while ago.

In line with the mission of this blog, I present you with another useful tool: Ant.

Ant is basically a set of tasks written in an XML file. Tasks such as moving and copying files and directories, but sometimes much more powerful stuff. If I am not mistaken, this is how a lot of patient developers call manually on the compiler from the Flex SDK to create their SWCs and SWFs.

As I said in my previous posts, I never pretend to be a master at what I explain, but I like to share functional and straightforward knowledge of the tools, languages and utilities I use.

Of IDEs and Ant

As I have mentioned a couple of times, I do not use the Flash Builder 4 standalone IDE, but rather FB4 as a plugin to my Eclipse IDE. I once mentioned that already-integrated XML editor of Eclipse was an advantage over the standalone FB4. Here also Eclipse wins. Go to Window > Show View... > Other... and this is how you obtain a convenient Ant view panel.

FDT also offers such a panel, so does IntelliJ IDEA, however I have no idea what is available for FlashDevelop. For the standalone version of Flash Builder, a search on Google quickly provides examples of how to add the panel to the IDE.

Now, let's look at some Ant stuff!

Structure and conventions

Usually, Ant files are called "build.xml" and are placed in the "build" directory. That directory also contains a properties files called "build.properties."

Let's look at them.

a) build.xml

Ant being an XML, it is obviously written in tags. However contrary to XML, tag names are important here:

Ant:

 
<project name="Project Name" default="Default Task Name" basedir="../">
	<!-- your tasks here -->
</project>

So as you can see, the root tag is named  "project" and it contains some attributes:

• The "name" attribute is the label that will be presented in the the Ant view panel.
• The "default" attribute is the task that is called by default. More explanations on that further.
• The "basedir" attribute is the base directory from where the tasks are called for moving, creating, etc.

b) build.properties

The properties file is a variables container.

Properties:

projectname=Tutorial_AntToLeverageInteractiveDev
 
source.filename=Main.swf
source.debugdir=bin-debug/
source.releasedir=bin-release/
 
target.filename=deployed-file.swf
target.deploydir=www/

Simply write the variable name, an equal sign ("=") and the value. There is no need for semi-colon at the end of the line.

To import it in the build, use the property tag. As we have seen, all paths are relative to the value of the basedir tag, defined before.

Ant:

 
<project name="Project Name" default="Default Task Name" basedir="../">
<property file="build.properties" />
</project>

Now all those variables are available for you to use in your tasks. The syntax to use a property is simple: start with a dollar sign ($), and put the property name in curly brackets ({}).

Ant:

<echo>This property has a value of ${someProperty}</project>

Tasks

Tasks are basically Ant functions or methods. The Apache Ant Manual is full of examples that can be used quickly, but if you have never used Ant, it might be overwhelming. Let's start by looking at simple things that can be done.

One main thing that annoys me with Flash Builder is the superfluous use of the html-template folder and wrapper. Also, if I happen to put any directories or file in the bin-debug, they got overwritten for all sorts of reasons. I then took the habit of having some folders of my own at the root level of my project, namely:

• assets (for the assets used by the application)
• build (for the Ant tasks)
• libs (for external libraries)
• res (for all resources that the application does not use, tracking plans, copy decks, etc., which is not committed to SVN)
• www (the folder which actually contains the deployment files)

As I create these directories for most of my projects, it was becoming tedious to create them all the time. This is where Ant is your friend.

Ant:

<target name="Create AS3 Project Directories">
 
	<!-- create the assets directories -->
	<mkdir dir="assets/css"/>
	<mkdir dir="assets/fla"/>
	<mkdir dir="assets/fonts/osx"/>
	<mkdir dir="assets/fonts/win"/>
	<mkdir dir="assets/images"/>
	<mkdir dir="assets/sounds"/>
	<mkdir dir="assets/swf"/>
	<mkdir dir="assets/videos"/>
	<mkdir dir="assets/xml"/>
 
	<!-- create the libs directories -->
	<mkdir dir="libs/src"/>
	<mkdir dir="libs/swc"/>
 
	<!-- create the www directories -->
	<mkdir dir="www/assets/css"/>
	<mkdir dir="www/assets/images"/>
	<mkdir dir="www/assets/sounds"/>
	<mkdir dir="www/assets/swf"/>
	<mkdir dir="www/assets/videos"/>
	<mkdir dir="www/assets/xml"/>
	<mkdir dir="www/css"/>
	<mkdir dir="www/js"/>
	<mkdir dir="www/images"/>
 
</target>

The only thing needed when I start a new project is to copy my Ant build to the new project and then launch the Ant task, and all folders are created quickly. Let's analyze what I presented above.

The target tag contains the tasks. It is mandatory to give it a name, hence the name attribute. Inside that tag is where you place the Ant tasks, such as mkdir (make directory).

It is interesting to note that you can immediately create a directory inside another one, even if the root one does not exist. Calling mkdir with the attribute "www/assets" will create both the "www" and the "assets" directories at once.

Refreshing the workspace

Whenever files are modified outside of an Eclipse-based IDE, it is good to refresh the workspace. When creating, moving, deleting or renaming files in Ant, such a refresh is also necessary. It is however quite annoying to do this manually every time.

The first time you run an Ant task, it will then be added in Eclipse's External Tools Configuration menu. You can access it by clicking on the button that has sort of a suitcase icon.

Earlier I wrote about the default task of the build task. I usually echo the timestamp as the default task, so I can then simply double click on my build in the Ant view to trigger it and avoid creating or deleting stuff too early. Then I go to the config.

Let's take a look at them.

The first thing you want to do in these configs is to make sure that you check the "Run in the same JRE as the workspace" in the "JRE" tab, so that the refresh succeeds. Obviously, if you have other used for the JRE, rely on your knowledge, but for generic AS3 development, this serves my purpose.

Then, head to the "Refresh" tab and check what you want to refresh once the Ant build has completed.

Look at the ants on the floor
They work real hard, lifting three times their mass
And sometimes more

Nick Diamonds could not have phrased it better when he sung Let's Get Known. What I presented here and what I know of Ant is but a small part of what it can do. When you realize that you repeat actions often in your Finder or Windows Explorer, think of this tool, it will save you time.

Of the tech stuff

Since my blog is mostly about technical stuff (i.e. code tips, tutorials), it goes without saying that the technical side of the conference is quite important.

Speakers such as Mario Klingemann, Branden Hall, Joa Ebert and Ralph Hauwert presented quite interesting  technical talks about impressive mathematical and code creations and prowesses. I'm not gonna explain them here, you can read about it in details on their blog.

Evidently, Adobe had their representatives there. At the beginning of the conference, they boasted some updates on Flash Builder, but the more I look at it, the more it feels like they are simply trying to catch up with FDT.

As an attendee, I was lucky enough to receive a free version of FDT Pure. I will look into it in the coming weeks and most probably will talk about it in future posts.

IntelliJ also had their booth set up to promote their IDE, although I have to say i have not looked much into it.

Some speakers, like André Michelle, were making their code available. Being a musician myself, I will probably look into his library for sound manipulation and creation. Branden Hall presented a JS framework that uses the same logic as AS3's bitmaps to draw. He dubbed it Okapi, and I believe that this is the blog-to-be for it. He also presented the HYPE framework, which has a really interesting simplified approach to timing.

On Tuesday morning, there was a session called the Elevator Pitch, which is basically an hour made up of three minutes presentation of all sorts. Not all of these were interesting (most were not actually), but some caught my eye. I will definitely look into xJSFL, a jQuery-like syntax to write JSFL. There was also this concept of a console to aid development, just like game devs have. Well worth a look. But to all of those who try to create a new AS3 IDE with AIR, please let it go. That is not worth your efforts.

There were two people who touched quickly on tangible computing with microcontrollers and MIDI controllers. I believe that there should be a bigger space given to that world in conferences like this one, as the world of physical computing is huge and I believe way more creative than the interactive screen-based works.

Of creativity

One thing I was not quite prepared for was how blown away I was by the creativity of some people!

FOTB 2010 Titles from Süperfad on Vimeo.

Nando Costa and his team created the titles for this year's edition of Flash on the Beach. He also presented the impressive quality of his agency's work, Süperfad, which revolves a lot around motion design.

Grant Skinner is one of the rare public figures that makes me proud to be Canadian. He presented some of his works obviously, but I really liked how he chose to harness moments of short attention span into efficient creative moments. I have been interested in physical computing for quite some time now, I find it fascinating that such a guy is having fun with those things with projects such as his multiplayer Androideroids and the Nexus One Gas Pedal.

Robert Hodgin's efforts are quite commendable, the results of his creations are impressively beautiful and mesmerizing, but I have to say I find myself puzzled as to what to think of his generative art–which by the way is used for the iTunes visualizer. People like Joshua Davis and Jared Tarbell turn these pieces into prints, maybe he does as well, but I guess all that coding creativity is not reaching me much.

Cyriak presented a lot of his wacky animations and videos. That man's mind is impressively twisted! Funny to see that since a lot of his works were refused, he started working on personal projects, and then got noticed! That's a good lesson really.

One man really impressed me. I come from the indie rock and the media art world, so public figures in design and publicity are quite foreign to me. Stefan Sagmeister is well known I found out. His thoughts, his approach to work and life are equally impressive. He balances defines balanced moments in one's life between work and sabbaticals, which he explains refuels creativity.

The last session was Jared Tarbell. He explained how he turned his work into physical pieces, either prints or laser cuts. The work is nice, but I have to say the passion that this man conveys and puts into his work are far more impressive. Once you hear him talk about his environment and process, you can't help but feel all that passion emanating from the small pieces of wood and cardboard he created.

Of the human side

Some sessions were also about other things than code or creativity, but also about subjects like management, presentation and work environments. During the Elevator Pitch, Trine Falbe gave tips on how to better one's presentations.

Chris Pelsor did a good presentation on how to properly manage teams. The simple question of "how often do you share a drink with a colleague?" is quite revealing. I have to admit that some things that I take for granted may indeed be improved upon in other work environments. Creating team spirit is always important.

Joshua Hirsh, of NYC's Big Spaceship presented an experiment him and his agency conducted. As summers are usually a bit less busy, they decided to try and reserve fridays for internal and personal projects. It turned out it kinda worked and kinda didn't work, obviously due to all sorts of commercial and professional reasons. I have to say that organizing downtime is indeed not easy, but providing the opportunity for employees is important. Working at Sid Lee give me that opportunity and allowed me during this summer to try and play with some technologies.

If there is one thing that this conference made me realize is that I am not a PR person at all, but then again I wasn't the only one.

Many of us were hanging out in the lounge area, next to each other but looking at our mobile phones. I am in no way blaming people, I was doing the same, unfortunately. I guess that is a skill that I should develop. That said, I was quite happy to meet freelancers and technical directors from Paris, I will have to force myself to keep contact better.

On a side note, I was quite happy that I got to see my good friend James Paterson! He was giving a workshop on Sunday and was leaving on Monday, so I managed to catch a glimpse of him Monday morning.

Of the future

Now that this event is over, what to do with all this inspiration and motivation?

Well I for one will list all the projects I have started, personal or professional, and see what I want to do with them and where I want to lead them. I am not going to do this here in full extent, but you may interested to know that I have such things as a personal Facebook app project and a pixel-based fangame in the works.

This blog is by no means changing it's vocation. As stated before, I started writing this as guides and notes for when I started giving AS workshops in Montréal. I may commit to write more often about more technologies and creative uses for them though.

And who knows what else?

As for Flash on the Beach, there are some minor things I could see would make it better. The bar section where everybody meets could have benefited from a DJ, whether it's an actual one or simply a playlist, it would have greatly improved on the mood. As I understand there was a Spotify collaborative playlist to which people contributed a lot, this could have played there.

I also believe that there could have been more cross pollination. It is indeed important that Flash on the Beach promotes the Flash ecosystem, that is a big part of its existence, but I believe that there should more and more presence of interactive works that come from other environments and languages. I would love to see some installations and touch screen in the lobby for people to enjoy what else the computer has to bring than just screen based works.

I have originally planned to help and guide students and beginners with this blog, to use the posts as notes and references for some tutorials I have given at Concordia University in Montréal. I strongly believe that it is the responsibility of senior developers and creatives to provide newcomers to this overwhelming field with the proper tools to learn to work efficiently and professionally.

Because, let's face it schools and universities fail in this domain. These institutions do not aim "to create mindless production drones for the interactive industry blah blah blah..." This is such a hypocritical argument that could be easily refuted by looking at how computer engineering or administration programs teach students how to be organized in their thoughts and workflow. Others have actually had confrontations much stronger than I and have lived to tell about it.

For my part, I have chosen to provide Sid Lee, where I currently work, with information and references to good practices in the form of a wiki. A wiki is easy to update and it is a well known way to organize information, so most people can navigate quickly.

Also, most things in many people's jobs do not need to be remembered by heart. Hell, I hope nobody says stuff without references, especially technical references necessary for a project! That is why such references are useful, especially for training newcomers and simply for keeping inline with company policies.

In the wiki, I presented what is needed for a project from many players in the process of the production, such as producers, designers and interactive developers. This is an internal tool not available to the public, but today I stumbled upon an article, What to Deliver a Flash Developer, which highlights a lot of the similar points that I have brought up to many kick off meetings. Since this blog is aimed at helping developers to learn good practices, I thought it would be a good idea to republish and comment on the post.

Note that I am careful in not utilizing the term "Flash developer" as the authors of the post did, as I believe this is plain wrong. Do we call designers "Photoshoppists"? Flash is just a tool currently used often in the creation of RIAs, but it is not and will not always be the case. Some of us work with ActionScript, some others with PHP, with CSS, with HTML, with Objective-C, with Android, with Java, with OpenFrameworks, etc. Specialists exist indeed in all fields, but workflows for RIAs, games and other interactive projects are not confined to Flash development.

Whatever rant or complaint I may seem to voice here, the article aforementioned is a great read for anybody who wishes to manage development of projects, or simply to make sure that parts are not forgotten along the way.

Honestly, all that stuff is too complex for me to care.

What you and I really want, is to be able to develop our projects locally without issues, because let's face it, we trust our own actions. The following simple steps will present how to set the Flash Player Security settings for you to be able to work without hinderance.

First, head to the Flash Player Security Settings page. Yes, it is online and you can only access it if you are connected to the Internet. It is ridiculous, I know, it should be available from other means, like right-clicking on a Flash Player object, but it is not so.

Then, you will encounter this:

If it is not already, select the Global Security Settings tab (3rd one, as seen above).

Click on “Edit locations” and select “Add location...”

Select “Browse for folder” and select the folder to which you want Flash Player to have access. I chose the whole computer so I can work properly.

And voilà! You now can now load XML files and dynamic classes easily without facing unexpected errors.

Once you have done it you will not need to do it again, but when you change computers or reformat one, it's not necessarily something you think at first. This is when this post will become useful!

In this post I will try to present what I believe is a simple way to deal with localization and minimize file copying etc.

I learned of localization when I was working at an e-commerce production shop previously. That company had most of its clients in Canada and in the US, meaning that we only had to deal with a minimal amount of localization, namely "en-US", "en-CA" and "fr-CA".

If you have no idea what those codes are about, the first two letters represent the language (following the ISO 639-2 codes) and the las two letters represent the country (following the ISO 3166-1 codes).

Recently I had to complete projects for an employee that left the company I currently work for. I had actually never dealt with localization in Europe and obviously, that means a lot more languages. I also discovered that some countries reuse copy. For example, the swedish and greek localization of one of our client's site reuse the english copy. The way the project was set up at that moment was to have one directory per country, meaning that we had to remember to duplicate the english copy into all the directories that used that language as well.

A recipe for disasters.

Here is where the idea of mapping becomes useful. In the site's config file, I simply thought of adding a node that would contain the locale mapping, meaning what country is associated to what language etc.

XML:

<localeMapping>
     <locale country="ca" language="en" alphabet="latin" />
     <locale country="cf" language="fr" alphabet="latin" />
     <locale country="fr" language="fr" alphabet="latin" />
     <locale country="jp" language="ja" alphabet="japanese" />
     <locale country="kr" language="ko" alphabet="korean" />
     <locale country="se" language="en" alphabet="latin" />
     <locale country="uk" language="en" alphabet="latin" />
     <locale country="us" language="en" alphabet="latin" />
</localeMapping>

The alphabet tag is not relative to any specific standard, but just actually the logic part of what I use to load the fonts and the CSS (see previous post).

So far as the logic goes, once the config file is loaded it is easy to associate a country with a language and load the related files. If a user comes to a website and there a script that detects France, it is then possible to know what to load: the french copy, the latin font set and the latin CSS. Same goes for any country.

Antti Kupila, a colleague of mine, believes that it is kind of cheating to reload a a whole website to change the locale. I agreed when he explained how to realize this.

Whenever a TextField is added in the application, it is registered and a reference to it is kept in memory somewhere. When the user changes the locale, there is no need to reload all assets, just the necessary copy, the font set and the CSS (or TextFormat, depending). Once all is loaded, update the TextFields.

Here you go Internets, another way to organize and simplify your life.