1.2 CSS with AS 2.0, and with AS 1.0

Actionscript 2.0 introduced a new CSS class which allows us to use some basic CSS in our Flash movies. This is a massive step forward for typography in Flash because it allows even greater flexibility for formatting control. There are many excellent tutorials about using CSS in Actionscript 2.0 (this one at actionscript.org, for example), so I won't discuss how to use the CSS object in Actionscript 2.0 here.

But CSS is not limited to Actionscript 2.0. It is easily accomplished in Actionscript 1.0 too. The reason is that the CSS properties supported in Actionscript 2.0 correspond to the same properties supported by the TextFormat object. The only difference is that some of the CSS properties have slightly different names than they do in the TextFormat object. For example, the 'text-align' CSS property corresponds exactly to the 'textAlign' TextFormat property.

Making a CSS class in Actionscript 1.0 is thus a fairly trivial matter. You simply need to write a class which takes CSS properties, matches them up with the corresponding TextFormat properties, and then apply that TextFormat to the text field. Before Actionscript 2.0 was released, CSS was available in Actionscript 1.0 via this very technique (e.g. Thoth and DENG both provide CSS for Flash MX). For more information on using CSS with Actionscript 1.0, see my Actionscript 1.0 CSS.

In any case, using CSS in Flash is a great way to maintain a fair measure of control over type formatting. With CSS you can control your formatting externally and centrally: all in one document (or in one set of documents). This allows you to manage type formatting in one place (the CSS document) and deploy that formatting throughout your movies where needed.


2 Actionscripted type design

In addition to using the TextFormat object and CSS to control formatting, you can also use actionscript to do a whole number of things to the characters in a text field, things which aren't possible in other type mediums. With Flash, you can make your characters move, dance, flicker, disappear, transform, or whatever else your imagination can conceive. You can control character spacing with interesting algorithms, or even animate character spacing based on some relevant information. This is precisely where Flash comes into its own as a medium for typographic design. You can't do this stuff on the printed page, and you can't do it with HTML. Here Flash opens up a whole new world of typographic design considerations.

In this section I'll look at a basic technique for exposing the characters of a text string to actionscript's full range of Flash's animation powers. The technique is simple: put each character into its own movieclip so that you can control each character just as you would any other movieclip. We'll look at some code for doing just that, and we'll wrap it up in a simple Actionscript 2.0 class to provide a foundational typography API. This makes working with type in this fashion just as easy as working with text fields.

2.1 Break up a string into individual movieclips

The first thing to do here is break up a text string and put each character in its own movieclip. By putting each letter of a string into its own movieclip, you can then use actionscript to control each movieclip separately, or control them all in tandem. Then you can use actionscript to animate any of those characters just as you would any other movieclip: you can move them, scale them, rotate them, fade them, and so forth.

2.2 Keep the character movieclips in an array

There are many ways of breaking up a string and putting each character in its own movieclip. You are of course free to accomplish this however you like. The technique I have found to be most useful is this: place all the character movieclips into a single array. This gives you an array which acts much like a string.

You can then control the whole array as a single entity, just as you would control a single string. You can also access any given character by its array index, just as you would access any given character in a string by its character index. Applying transformations to any character is then as simple as applying a transformation to a particular item in the array. Similarly, applying transformations to all the characters at once is as simple as looping through each array item.

2.3 Implementing standard type methods

You can easily wrap all this up in a class which does the hard work for you. You can then implement standard text field methods for that class just as if the class were a text field. For example, you could implement a setTextFormat () method which loops through each character movieclip and applies a TextFormat object to that character. You could then define a text format and apply it to your array of character movieclips with the setTextFormat () method just as you would with a text field.

Let's create a basic Actionscript 2.0 class as an example. Let's call our class Typeset, since the class will let us set each character in the type however we like. The first step then is to define the class. We will need two class variables: typeString and typeArray. The typeString variable is the string we want to break up and put each character into its own movieclip. The typeArray variable is the array where we will store all our character movieclips:

class Typeset {
        private var typeString:String;
        private var typeArray:Array;
} // end Typeset class

Next, we need to define the constructor function. The user will pass the typeString value to the constructor as a parameter. The constructor will then invoke the init () method, which assigns the specified string to the typeString variable: 

class Typeset {
        
        private var typeString:String;
        private var typeArray:Array;
        
        function Typeset (_typeString:String) {
                this.init.apply (this, arguments);
        } // end constructor
        
        public function init (_typeString:String):Void {
                typeString = _typeString;
        } // end init () method
        
} // end Typeset class

To use the class, then, we simply instantiate the class, passing the desired string as a parameter:

var type:Typeset = new Typeset ("Hello World");

Next, of course, we need to break up the string and put each character in its own movieclip. Let's create a method called buildTypeset () to do this work, and we'll make the init () method invoke this method:

class Typeset {
        
        private var typeString:String;
        private var typeArray:Array;
        
        function Typeset (_typeString:String) {
                this.init.apply (this, arguments);
        } // end constructor
        
        public function init (_typeString:String):Void {
                typeString = _typeString;
                buildTypset ();
        } // end init () method
        
        private function buildTypeset () {
                // break up typeString,
                // putting each character into its own clip
        } // end buildTypeset () method
        
} // end Typeset class

To break up the string, we need to loop through each character of typeString and get the value of each character. Here's just the buildTypeset () method, looping through each character in the string and storing the value of that character as a temporary variable called thisChar:

private function buildTypeset ():Void {
        // break up typeString,
        // putting each character into its own clip
        for (var i = 0; i < typeString.length; i++) {
                // store the current character as 'thisChar'
                var thisChar = typeString.charAt (i);
        } // end looping through typeString
} // end buildTypeset () method