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.

Lots of websites done with static content or localized only in one language did not need to worry much about fonts, however as Flash grew in popularity and demand, projects became more complex and required text to be dynamic and localized. That’s when the party started.

What is presented here is a workflow that I have been using with my team for quite some time, and it has proven efficient. I do not dare to say it is the best, especially since dealing with fonts in Flash is such a pain that many people have probably lots of different ways to import and use fonts properly.

Creating a SWF Font File

The idea is to create a SWF file that contains the fonts necessary to the website and pair it with whatever little CSS ActionScript can handle. Lee Brimelow has a great video tutorial on how to create such a SWF. Dominic Gelineau from Zedia Flash Blog also posted something quite similar to what I explain here, he just posted before me, while my text was still a draft.

When I was working on a project for a client that needed all sorts of different languages (Chinese,  Japanese, Russian, English, French, etc.), I made different SWF files and named them according to the alphabet they contained:

• chineseFonts.swf
• cyrillicFonts.swf
• japaneseFonts.swf
• latinFonts.swf

Using the unicodeRange parameter is quite interesting, especially for Chinese characters, so you can considerably reduce the size of your embedded font.

I noticed recently with the update to Flash Builder 4 beta 2 that the embedAsCFF parameter was now set to true by default. This is quite annoying, because unless you use the new Flash Player 10 Text Layout Framework, text will not render on screen. I now always set the embedAsCFF as false.

In your project, load the SWF file that contains the font just like I explained how to load SWF files whose library contain classes that are meant to be exported for ActionScript. Here as well, the LoaderContext's application domain parameter must be set to ApplicationDomain.currentDomain so that the loaded fonts are available to the whole application.

It may be useful to test if the fonts are indeed embedded once the file has loaded. Here is a little function that will trace all embedded fonts in your app:

ActionScript:

public function traceEmbeddedFonts():void
{
	trace(this, "--- traceEmbeddedFonts ---");
	var embeddedFonts:Array = Font.enumerateFonts(false);
	var font:Font
	var i:int = 0;
	var numLoops:int = embeddedFonts.length;
	for(i; i < numLoops; i++)
	{
		font = embeddedFonts[i];
		trace("[" + i + "]\nfontName:" + font.fontName + ",\nstyle: " + font.fontStyle + ",\ntype: " + font.fontType + "\n");
	}
}

I strongly suggest that developpers always include the font files they use in their assets directory, for it is a great pain to discover that the version of the font used for developement differs than the one we may actually have in hand. Font may have different kerning and leading from version to version, which sometimes leads to completely redoing the design. Keep that in mind people.

Using CSS

Now that we know we have our needed font loaded into our application, let's look at the CSS part of it. Here as well, I named the CSS files according to alphabet, since not all fonts were laid out the same.

• chineseFonts.css
• cyrillicFonts.css
• japaneseFonts.css
• latinFonts.css

In the CSS, I made sure that the font tag would use the font name I gave my font in the SWF file created earlier.

CSS:

.someCSSClass
{
	font-family:"CustomFontName";
}

Once the CSS is loaded into my application, I convert it to a StyleSheet. Then, I can use it like this:

ActionScript:

var styleSheet:StyleSheet = new StyleSheet();
styleSheet.parseCSS([the-loaded-CSS-goes-here]);
 
var t:TextField = new TextField();
t.width = 320;
t.height = 240;
t.embedFonts = true;
t.styleSheet = styleSheet;
t.htmlText = "&lt;span class='someCSSClass'&gt;<span class="customCSSClass">Some text goes here&lt;/span&gt;</span>";

I believe in using CSS rather than AS3's native TextFormat for it is possible to change the text layout without having to recompile the application every time. Do make sure to check what tags are actually supported as it is quite limited.

Pixel Fonts

I recently created a game in which I wanted to make sure I could use pixels, which

meant I needed a pixel font. After looking googling and reading many blogs and tutorials, it became clear that Lee’s technique would not be useful this time, since there was no way to choose bitmap when embedding the font.

Instead, I found a workaround that did just the trick. In the Flash IDE, I created a symbol, which I named BitmapTextFieldAsset and gave it the exact same class name. In that symbol, I created a textfield into which I embedded the whole bitmap font like we did back when sites could be static. I then created a class that would be the one I used as a textfield whenever I needed the bitmap font in the game, and voilà! A dynamic custom textfield class that would use a Bitmap font. CSS does work as well in this case.

Conclusion

It would be presomptuous from me so say I covered all there is to say about fonts and CSS in Flash, but I do believe that in a nutshell, this workflow is efficient.

What say you?

The first part is obviously loading your image. Create our loader and add listeners to it.

ActionScript:

private var _loader:Loader;
 
public function loadImage():void
{
	var urlRequest:URLRequest = new URLRequest();
	urlRequest.url = "image.jpg";
 
	_loader = new Loader();
	_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loaderProgressHandler, false, 0, true);
	_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler, false, 0, true);
	_loader.load(urlRequest);
}

The loaderProgressHandler will serve to display the percentage of the load of your image. Here I will simply show how to trace the percentage. This is where you can get creative with what you do with said percentage.

ActionScript:

private function loaderProgressHandler(event:ProgressEvent):void
{
	var ratio:Number = event.bytesLoaded / event.bytesTotal; // this division will give us a ratio out of one
	var loaded:String = "Loaded: " + int(ratio * 100) + "%"; // we cast the number to an int (integer) so its floating points get truncated
	trace(loaded);
}

Next up is handling the loaded image. Prior to eveything, in the variables declarations, create a placeholder for the image to be added onto. It has to be done outside of the function so that said holder may be available throughout the class.

ActionScript:

private var _imageHolder:Sprite;
 
private function loaderCompleteHandler(event:Event):void
{
	// always remember to remove your listeners when you are done with them
	_loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, loaderProgressHandler);
	_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loaderCompleteHandler);
 
	// handle the content of the loader
	// pass the data to a bitmap object
	var bitmap:Bitmap = Bitmap(_loader.content);
 
	// make sure you add smoothing to the bitmap, so the resizing is not pixelated
	bitmap.smoothing = true;
 
	// add the bitmap to the display list
	_imageHolder = new Sprite();
	_imageHolder.addChild(bitmap);
	addChild(_imageHolder);
}

To handle the resizing of the image, listen to the resize event from the stage. However, that is not sufficient, you need to make sure that your stage is aligned in the top left to make sure that it is locked in place.

ActionScript:

private function initStage():void
{
	stage.align = StageAlign.TOP_LEFT;
	stage.scaleMode = StageScaleMode.NO_SCALE;
	stage.addEventListener(Event.RESIZE, stageResizeHandler, false, 0, true);
}
 
private function stageResizeHandler(event:Event):void
{
	// calls this function everytime the stage is resized
	// in this case, the browser window
	resize(stage.stageWidth, stage.stageHeight);
}

In the following example, the image is resized to always view the whole image. I also usually create _width and _height variables, if i ever need those values called at other moments than when the stage is resized.

ActionScript:

private var _width:int;
private var _height:int;
 
public function resize(newWidth:int, newHeight:int):void
{
	_width = newWidth;
	_height = newHeight;
 
	if(_imageLoaded)
	{
		// assign a new width to the image
		_imageHolder.width = _width;
 
		// give the height the same scale as the width, so the image is proportionnal
		_imageHolder.scaleY = _imageHolder.scaleX;
 
		// if the image is too high, rely on the height
		if(_imageHolder.height > _height)
		{
			// assign a new height to the image
			_imageHolder.height = _height;
 
			// dont forget to give the width the same scale as the new height, so the image stays proportionnal
			_imageHolder.scaleX = _imageHolder.scaleY;
		}
 
		// center the image
		_imageHolder.x = int(stage.stageWidth * 0.5 - _imageHolder.width * 0.5);
		_imageHolder.y = int(stage.stageHeight * 0.5 - _imageHolder.height * 0.5);
	}
}

You may need to cover the whole background rather than see the whole image. In that case, let's take the resize functionality and put it into different functions, so we may test their different uses.

ActionScript:

public function resize(newWidth:int, newHeight:int):void
{
	_width = newWidth;
	_height = newHeight;
 
	if(_imageLoaded)
	{
	//resizeImageToViewAllOfIt();
	resizeImageToFillBackground();
 
	// center the image
	_imageHolder.x = int(stage.stageWidth * 0.5 - _imageHolder.width * 0.5);
	_imageHolder.y = int(stage.stageHeight * 0.5 - _imageHolder.height * 0.5);
	}
}
 
	private function resizeImageToViewAllOfIt():void
	{
	// assign a new width to the image
	_imageHolder.width = _width;
 
	// give the height the same scale as the width, so the image is proportionnal
	_imageHolder.scaleY = _imageHolder.scaleX;
 
	// if the image is too high, rely on the height
	if(_imageHolder.height > _height)
	{
		// assign a new height to the image
		_imageHolder.height = _height;
 
		// dont forget to give the width the same scale as the new height, so the image stays proportionnal
		_imageHolder.scaleX = _imageHolder.scaleY;
	}
}
 
private function resizeImageToFillBackground():void
{
	// assign a new width to the image
	_imageHolder.width = _width;
 
	// give the height the same scale as the width, so the image is proportionnal
	_imageHolder.scaleY = _imageHolder.scaleX;
 
	// if the image does not cover the whole height, change the scale
	if(_imageHolder.height < _height)
	{
		// assign a new height to the image
		_imageHolder.height = _height;
 
		// dont forget to give the width the same scale as the new height, so the image stays proportionnal
		_imageHolder.scaleX = _imageHolder.scaleY;
	}
}

Notice the subtlety: when you need to see the whole image, you check if the image height is higher than the available height to make sure it does not exceed it, while when you want to cover the whole background with your image, you check if the height is lower than the available height so that there is no moment when one side of the image is too small.

I hope this helps, here are the sources for this tutorial. Simply comment either resizeImageToViewAllOfIt() or resizeImageToFillBackground() to test the different behaviors.

Let's start by creating an ActionScript project. The image on the left is a screenshot of how I usually create my folder structure inside an ActionScript project.

Importing an SWC into an ActionScript project

The easiest thing we can start with is importing an SWC from a third party into our project. We can either use Papervision or FisixEngine, as I stated before. Once you downloaded the sources, locate the SWC file and copy it into the "swc" directory, either with Finder if you are on Mac, or with Windows Explorer if you use Windows.

Once the file is placed, go back to Eclipse (or Flash/Flex Builder) and refresh your entire project so that the added file may be taken into account. You may right-click onto the folder and select "Refresh", or simply click on the folder and hit F5 on your keyboard.

On a side note, it is actually a good habit to take to always refresh your project folder when you go back to your IDE after adding files into said project. It will save you some headaches.

Right-click on the project folder and go to "Properties", and then select the "ActionScript Build Path" tab on the left. At the right of that window, click on the button "Add SWC..." and browse to the SWC you just added into your project.

The link type is set to "Merged into code" by default. What this means is that the SWC is added to your code at compile time, adding some size to your project. In the case of third party code libraries, you cannot modify this since they do not provide an SWF to load at runtime (more on this below).

Now all the classes from that are included into that SWC are available to you in your code, and you can get code complete as well. Also, another folder has been added to your project folder, "Referenced Libraries". If you expand this icon, you will see the libraries you imported and all their API.

Creating an SWC from Flash and loading it dynamically

As you can see from the first screenshot in this post, I made a distinction between embedded assets and authoring assets.

What I mean by that is that the embedded assets are visual assets created in Flash, exported as an SWC and merged into the code (as seen in the previous point). The authoring assets are planned to be loaded at runtime, to ligthen the size of my final SWF. Let's see how this goes.

In the embedded assets, I usually just have the preloader, since this is something we always need. In the Flash library, check the properties of the preloader MovieClip. Make sure to check the "Export for ActionScript" box. Also, give it the "Preloader" class name. No association to any .AS file, a simple class. Flash will alert that no class is associated and that it will create one on its own, which is all good.

What this means is that the Preloader class is available to you in code complete in your IDE since you will be able to see it in the Referenced Libraries.

Referenced Libraries:

Since this class you created extends MovieClip, the said class inherits of all the functions and variables. If you were to nest MovieClips into the one created and give them name, they will appear in the autocomplete as well. Quite useful, let me tell you!

ActionScript:

var preloader:Preloader = new Preloader();
addChild(preloader);
trace("preloader.fillMC.width: " + preloader.fillMC.width);

That's all fine and dandy, but it's just a repeat of the previous point. What we need is actually to take some weight off of the filesize, load the assets dynamically and still be able to work as we did so far. Let's first create MovieClips in the authoringAssets.fla with classes names and then export the SWF and the SWC. Then, once you imported the SWC, change the link type to "External". Simply double click on the "Link type" and change it from the combo box.

Referenced librairies:

However in this case it is important that you do not create an instance of these classes before the external assets are loaded, otherwise you would get an error during the compilation.

ActionScript:

package
{
 
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;
 
public class Main extends Sprite
{
 
private var _loader:Loader;
 
public function Main()
{
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler);
var loaderContext:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
_loader.load(new URLRequest("../assets/swf/authoringAssets.swf"), loaderContext);
}
 
private function loaderCompleteHandler(event:Event):void
{
var whiteSquare:WhiteSquare = new WhiteSquare();
var blackSquare:BlackSquare = new BlackSquare();
blackSquare.x = 32;
addChild(whiteSquare);
addChild(blackSquare);
}
 
}
 
}

The LoaderContext is essential here. What this does is to make sure that once the SWF is loaded, its contents, namely the classes you put in it, are available everywhere in the application. Once the SWF is loaded, then you can create as many instances as you need. If you end up having tons of classes and a huge assets file, at least it's easy to use a preloader to deal with them.

Here are the sources for this tutorial. Thanks to James Paterson for showing me this useful technique!

When I first got into Flash in 1999-2000, I only knew one way to import my assets into Flash: File > Import > Import to Stage/Import to Library. It's actually quite practical, since you can place your elements as you would in Photoshop or Illustrator and create all sorts of MovieClips easily. And it's actually still the best way to create banners and quick projects.

In order to call the attachMovieClip function (remember this was with AS2), an identifier name was given when the "Export for ActionScript" box was checked. After a while, I learned that I could relate ActionScript classes to that specific MovieClip in the library, so I would end up also a class name like com.clientname.ui.SomeClass, a habit I kept until recently, even in AS3.

This presented some inconvenients, mainly beefing up the size of the file. Also, creating variable names in the class that had the same names as in the MovieClip associated to the said class would cause some namespace issues in AS3.

With Flex Builder, now Flash Builder, you can embed image files in your code and make them act as classes (example 1, example 2). Quite useful, but again, it just makes your file size bigger. Having a preloader that would stop the timeline until all is loaded, or having two separate SWFs with one that loads the other, both those two options seemed a bit unclean and inefficient, especially if you eventually want to hand the project to someone else.

There is also the option of loading everything at runtime. And I mean everything, all images, sounds, etc. It's a step towards making the file lighter, but sometimes you do need to edit your assets à la Photoshop, have multiple MovieClips, and basically using the Flash IDE at this point would help. Sure you could recreate everything in code, place all your elements, TextFields, MovieClips and the likes in code, but sometimes you may want to use components too, and I've faced moments where I could create components dynamically. And doing all that just in code is time consuming, and let's face it, this industry is based on efficiency and speed of delivery.

Enter SWC files. These files are either a compiled library of code–just like Papervision or Fisix Engine do–or a compiled FLA file that includes a library of assets built in the Flash IDE. There are different ways to use these files and when possible, it is even possible to load them dynamically.

In the next tutorials, I will show how to use and create these files and how to import and use fonts and CSS. All these things may be basic, but I think it is worth it to summarize all the different ways I have learned about on the web and while working in producton teams.

I've been thinking of what to write for my first post, other than "Welcome to this blog". I realized that since I intend to share my work habits and to make some tutorials out of what I have learned the past few years, I might as well present how I work.

I have tried different ways of writing ActionScript over the last years: the Flash IDE (not really efficient), FlashDevelop (is a good start), Flex Builder and finally Eclipse. Ok, the last two are actually the same. Here is why I am now using Eclipse to write my ActionScript projects, and sometimes even other projets.

The Flash IDE is a great visual tool as it merges some parts of Photoshop, Illustrator, After Effects and a code editor. However, try as you might, you can be good at a lot of things, but rarely can you master them all. The code completion in the Flash IDE is less than optimal, I haven't found a way to create snippets and honestly, it's missing many customization options.

FlashDevelop is great. Honestly. But you have to have a Windows system. Ever since I bought my MacBook Pro, I don't have that anymore. Sure I could install Parallels, but I think it's a lot of time wasted in an efficient workflow.

When I started at Sid Lee, I switched to Flex Builder since this is the tool used there. At iCongo, where I worked previously, we were using Eclipse, so I kind of got used to that workflow. After Flash Builder's (or Gumbo's) release, I struggled with some bugs and decided to move back to Eclipse.

I now use Eclipse 3.4 with the Flash Builder 4 plugin. I prefer Eclipse to Flash Builder as the base IDE since Eclipse already includes an XML and HTML editor. Another huge... ok, let me rephrase... HUGE advantage that Eclipse has over FlashDevelop is the fact that Eclipse has a plugin for dealing with SVN, which I think is crucial for teamwork. Oh yea, you can install TortoiseSVN on your machine and deal with SVN separately from your code, but let's face it, that offers more chances for your team to mess the SVN flow.

So, to sum it up, I added the Subclipse plugin to my Eclipse setup.

I also added the FlexFormatter plugin, which allows me to format my code automatically the way i want. Quite useful when you are a neat freak like me.

When working with Java developpers at iCongo, I have seen that they had a tab for tasks, which I found useful. When I code, I may not want to write all the code at once, so I need to sprinkle some reminders along the way. The TODO and FIXME tags are quite useful in that sense. The Flex Builder 2 task extension does just the thing!

Finally, since I started to edit my WordPress blog, I added a PHP extension to my Eclipse.

If I was only work oriented, that would be sufficient. But I like my work environment to look great. I remembered three articles that Lee Brimelow wrote about making your Eclipse look better (Pimp my Eclipse part 1, part 2, part 3). There is a lot of stuff from his articles I did not use, but that could be useful nevertheless.