A while back, I thought of adding a touch screen film onto my laptop's screen, so I could use Max/MSP/Jitter's incredible sound processing tools and interface more easily than keyboard and mouse in the context of an installation or a performance. It turns out that a couple of years later, screens are touchable more easily, although I have yet to find a tablet that will be interesting enough for me to buy and want to use with Max.

Nevertheless, I had fiddled around with AS3 to communicate with Max. I had planned for a while to write a post about this, but I thought it was more important to present how to start and manage a project. What I will present here is how to communicate data between the two software, and since Max is a desktop installation, I will create a pure AS3 Air project.

Just to give credit where credit is due, steps to create the Air project are mostly taken from here. Let's have at it now!

Create an Air Project

Let's first create a Flex project in Flash Builder 4. Right-click in the package explorer window, select "New > Flex Project". Make sure that you check the "Desktop (runs in Adobe Air)" option in the "Application type" subsection, you do not want to make a web project.

In the next window, leave the "Output folder" field as is and click "Next". Then, in the "Main application" field, change the .MXML extension to .AS and click "Finish."

As a habit, I always have a initStage() function. In Air, you need to spawn an actual window, something we never do for the web. This is the perfect place to do so.

ActionScript 3.0:

private function initStage():void
{
	// first, spawn a window
	stage.nativeWindow.activate();
	// then set stage params
	stage.align = StageAlign.TOP_LEFT;
	stage.scaleMode = StageScaleMode.NO_SCALE;
}

In order to communicate with Max, we need to create an XMLSocket.

ActionScript 3.0:

private var _socket:XMLSocket;
private var _host:String = "127.0.0.1";
private var _port:uint = 8080;
private function initSocket():void
{
	_socket = new XMLSocket();
	_socket.addEventListener(IOErrorEvent.IO_ERROR, xmlSocketEventsHandler);
	_socket.addEventListener(Event.CONNECT, xmlSocketEventsHandler);
	_socket.addEventListener(Event.CLOSE, xmlSocketEventsHandler);
	_socket.addEventListener(DataEvent.DATA, xmlSocketDataHandler);
	_socket.connect(_host, _port);
}
 
private function xmlSocketEventsHandler(event:Event):void
{
	trace("\n", this, "--- xmlSocketEventsHandler ---");
	switch(event.type)
	{
		case "ioError":
			trace("\tcould not connect");
			break;
 
		case "connect":
			trace("\tsocket connected");
			break;
 
		case "close":
			trace("\tsocket closed");
			break;
 
		default:
			trace("\t" + event.type);
			break;
	}
}

There are a couple of things to go through here. At the top of this code block, I instantiate the XMLSocket. I also create variables for the host and the port, which are both necessary to connect the XMLSocket.

Then, the initSocket() function takes care of initializing the XMLSocket, also adding some listeners to it and finally connecting it. For the connection, you may want to read about your platform (whether it's Windows, Mac OS or other) to see what is the host IP and what ports can be used locally. You may also read up a bit on the Flash Player security, in case you need a cross domain XML file, although since this project is desktop-based and not going through a browser, I did not need it.

The xmlSocketEventsHandler() simply traces what events the XMLSocket receives.

Create a Max patch

Max files are called patches. It goes back to patching cords, but I won't go too deep into the Max language, you may read all about it yourself on the Internet.

By default, Max does not communicate with Flash, but just like AS3, there are some "libraries" that can be added to Max, they are called externals. A couple of years back, the Flashserver external was easy to obtain from the author's website or from the Max Objects Database, but it is sadly not the case anymore. I still have it and it is bundled with the source files for this tutorial, I hope I am not infringing anyone's copyrights by making it available again.

Then let's create a new patch and add the Flashserver object. This post is unfortunately not about how to use Max, thus I will not explain how to use the software here. I may in some future post, but this is way out of scope for this post.

Simply look at the help for the Flashserver object if you need to, but quickly, after the name is the argument for what port to connect to ("8080") , and the last argument ("256") is the amount of clients or Flash applications that can connect to this Max patch.

Talking with Max

When Flash needs to communicate with other languages and software, the other software usually has the role of a server, therefore it needs to be opened before the Flash/Air app. Thus, make sure you open the Max patch before attempting to communicate with Flash.

First, let's look at receiving what Max may send to Flash. Earlier, there was one event handler that I did not define, here it is:

ActionScript 3.0:

private function xmlSocketDataHandler(event:DataEvent):void
{
	trace(event.data);
}

So the data is actually what Max sends to Flash. To send multiple values to Flash, you'll need to create a pack in Max and send it as a string and then parse it in Flash.

Let's look at the code to send data to Max:

ActionScript 3.0:

_socket.send("hello max;");

It's as simple as that! Note that the data always has to end with a semicolon (";"). In the case where there are multiple values that need to be sent, separate them all with a semicolon, like so:

ActionScript 3.0:

_socket.send("hello max; from flash;");

On Max's side, simply use the unpack object to be able to parse the values into your patch.

Source files

As promised, here are the files that I used to create this project. The Air project was created in Eclipse with the Flash Builder 4 plugin, and the Max patch with Max 5, with the Flashserver external installed.

After two arduous months of work—and during the hassle of me moving to Amsterdam nonetheless!—we finally managed complete the production of the adidas Originals Women's Lookbook SS10!

Lots of thought went into the architecture of that project so it would be easy to debug. I chose a homebrew MVC pattern for the structure, which worked well. Looking at my colleague working with RobotLegs, I believe this is what I'll look into next.

The localization worked like a charm with the locale mapping logic I wrote about before. The only issue I found is that since there were no specific fonts for non latin languages, there had to be a check to see what alphabet was used, to make sure that the fonts were not embedded if said alphabet was non latin.

The video had to stream in this case since we needed to jump at any moment in time in the video. Also, we faced an inconvenience when trying to get a bitmap from a streaming video, the solutions were on the server side.

Integrating the whole project into an existing parent SWF was also a challenge, since the class definitions would be kept in the appdom memory and causing issues when loading the site a second time. The solution to this was to apply an application domain when loading the microsite (link 1, link 2).

As I was looking for solutions, I found that wiki that is discussing about things like thinking in AS3, metadata, singletons, application domains and all sorts of interesting subjects.

All in all, that project was a good challenge, one I had been looking forward to for a while now.

The embeddable version seen in this post actually has been produced by Département in Montréal.

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.