Page 4 of 5
Next we need to create a movieclip to contain each character. The next line in our buildTypeset () method then will create a movieclip for each character:
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);
// create a movieclip
_root.createEmptyMovieClip ("typeset_" + i, _root.getNextHighestDepth ());
} // end looping through typeString
} // end buildTypeset () method
Here we simply create a movieclip at the next highest depth for each character in the string. Of course, we need to assign each movieclip to our typeArray:
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);
// create a movieclip in the array
typeArray[i] = _root.createEmptyMovieClip ("typeset_" + i, _root.getNextHighestDepth ());
} // end looping through typeString
} // end buildTypeset () method
Next, we need to create a textfield inside each movieclip:
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);
// create a movieclip in the array
typeArray[i] = _root.createEmptyMovieClip ("typeset_" + i, _root.getNextHighestDepth ());
// create a textfield inside that movieclip
typeArray[i].createTextField ("_txt", _root.getNextHighestDepth (), 0, 0, 100, 100);
} // end looping through typeString
} // end buildTypeset () method
Here we create a text field with the name "_txt" in each movieclip. Thus, to reference the movieclip of any character x in our string, use this inside our class:
typeArray[x];
And to reference the textfield of any character x in our string, use this code inside our class:
typeArray[x]._txt;
The last step is to set the value of each textfield to the value of the string's character, which is here 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);
// create a movieclip in the array
typeArray[i] = _root.createEmptyMovieClip ("typeset_" + i, _root.getNextHighestDepth ());
// create a textfield inside that movieclip
typeArray[i].createTextField ("_txt", _root.getNextHighestDepth (), 0, 0, 100, 100);
// set the textfield's value to 'thisChar'
typeArray[i]._txt.text = thisChar;
} // end looping through typeString
} // end buildTypeset () method
There, now this method takes the typeString string, breaks it up, and places each character in a movieclip. The movieclips are all stored in an array so that we can easily access each clip by the character's index number. So if we want to access the third character in the string, we can access its movieclip by an array index of 3:
typeArray[3];
Our class thus far reads like this:
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 ():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);
// create a movieclip in the array
typeArray[i] = _root.createEmptyMovieClip ("typeset_" + i, _root.getNextHighestDepth ());
// create a textfield inside that movieclip
typeArray[i].createTextField ("_txt", _root.getNextHighestDepth (), 0, 0, 100, 100);
// set the textfield's value to 'thisChar'
typeArray[i]._txt.text = thisChar;
} // end looping through typeString
} // end buildTypeset () method
} // end Typeset class
That much is the basic core of the class. It does the work of breaking up a string into its individual characters and placing each of those characters into its own movieclip. The class stores those movieclips internally as an array so that each character clip is easily accessible simply by its index number. From this point on, we can implement any other features we like simply by writing another method.
If you test this class, you'll notice that all the letters are jumbled together. The reason is that all the movieclips are created at (0, 0). Obviously it would be useful to have some methods for setting the spacing between the letters. To set the spacing between the letters, we simply adjust the _x value of each movieclip. Let's create a method called setSpacing (spacing), where spacing is the number of pixels we want between each character. Our method simply needs to loop through each movieclip and set the _x coordinate to the properly spaced value:
public function setSpacing (spacing:Number):Void {
// set the space between each character to 'spacing'
for (var i = 0; i < typeArray.length; i++) {
typeArray[i]._x = i * spacing;
} // end looping through each character
} // end getLength () method
Now in our movies, we can set the spacing of our Typesets to whatever we like. This puts 20 pixels between each letter in our 'Hello World' example:
// create an "Hello World" typeset
var type:Typeset = new Typeset ("Hello World");
// space the characters 20 pixels apart
type.setSpacing (20);
This method sets the spacing to a consistent number for each character, but you might want even more precise control. You could then implement some spacing methods which set the spacing only between specified characters. Thus you might implement a setSpacing (spacing, startIndex, endIndex) method, where spacing is the number of pixels to place between the characters from startIndex to endIndex. I'll let you do that yourself.
Another feature we want in our class is the ability to set the TextField properties in any of the character movieclips. For example, we might want to make the whole string unselectable, and to do that we need to set the 'selectable' property of each TextField to false. We can write a method that lets us set any text field property. Let's call this method setTextFieldProperty ():
public function setTextFieldProperty ():Void {
// set a textfield property
} // end setTextFieldProperty () method
The user will pass as parameters the name of the property to set and the value to which it should be set:
public function setTextFieldProperty (propertyName:String, propertyValue):Void {
// set a textfield property
} // end setTextFieldProperty () method
We also want it so the user can define the start and end character index to which the property should be applied:
public function setTextFieldProperty (propertyName:String, propertyValue, startIndex:Number, endIndex:Number):Void {
// set a textfield property from startIndex to endIndex
} // end setTextFieldProperty () method
Now, we simply need to loop through the characters from startIndex to endIndex and set the specified property to the specified value for each character:
public function setTextFieldProperty (propertyName:String, propertyValue, startIndex:Number, endIndex:Number):Void {
// set a textfield property from startIndex to endIndex
for (var i = startIndex; i < endIndex; i++) {
typeArray[i]._txt[propertyName] = propertyValue;
} // end looping from startIndex to endIndex
} // end setTextFieldProperty () method
This method now lets us set the property of any character's textfield. For example, if we want to make the characters from 3 to 6 of a typeset unselectable, we can do it like this in our movie:
// create an "Hello World" typeset
var type:Typeset = new Typeset ("Hello World");
// make the characters from 3 - 6 unselectable
type.setTextFieldProperty ("selectable", false, 3, 6);
