Page 1 of 1
This user is yet to take control of their account and provide a biography. If you are the author of this article, please contact us via support AT actionscript DOT org.View all articles by GotCha
Animating Text By Using ActionScript
Note: This is quite an old tutorial. You may wish to examine new open source such as Jesse Stratford's Dynamic Multi-line Text Animator. It's well commented and has updated functionalities and syntax.
This tutorial will display a way to animate text by using ActionScript. In order to understand this tutorial properly, one should be acquainted with the basics of Flash and furthermore the use of variables, duplicating movie clips, loops and the properties of movie clips.
The idea is to have a movie clip named "letters", which contains a text field that is also named "letters" (please choose names more suitable for your own needs). This movie clip is nested inside another movie clip named "ani", because it contains the animation the letters will perform. This structure makes it possible to duplicate the movie clip ani after a certain interval, and then set the letter inside based upon a variable, after which it will perform the animation. By using Set Property, we make sure that the letters are placed in the right position.
Initialising our environment
When opening the file, you will see four layers, though only the layers "ani" and "actions" are necessary. You could simply delete the layers "The Passionate World" and "squares" if you want - the animation would still work J
In frame 1 in the layer "actions" we set our initialising environment. Here we have the following actions:
Set Variable: "text" = "The Passionate World is round. For days we sail, for months, and still the way is new; strange stars. Drawn to you, taut over time, ropes connect this floating floor to the wind, fraying into sound. To arrive is to sleep where we stop moving. Past the shoal of clothes to that shore, heaped with debris of words. A hem of salt, white lace, on sea-heavy legs. Love longs for land. All night we dream the jungle's sleepy electricity; gnashing chords of insects swim in our ears and we go under, into green. Anne Michaels"
Set Variable: "startx" = 165
Set Variable: "starty" = 45 Set Property ("/ani", Visibility) = False
Set Variable: "length" = Length (text)
Set Variable: "linelength" = 25
Set Variable: "kerning" = 6
Set Variable: "charinline" = 0 Set Variable: "linenumber" = 1
Set Variable: "linespace" = 10 Set Variable: "i" = 1
Set Variable: "x" = 1 Set Variable: "lettercount" = 1
The first variable "text" is the text we want to animate (I've chosen a poem I found somewhere on the net by Anne Michaels). The next two variables are our horizontal and vertical starting points. Hereafter we make the movie clip "ani" invisible by setting it's visibility to False (we could also set it to 0 - the result would be the same). The variable "length" returns the length of the text we want to animate, which is necessary to control our loops. The variable "kerning" is the distance between the letters, while "charinline" keeps track of the characters in each line. The variables "linenumber" and "linespace" keeps track of the number of lines and the vertical space between the lines. Finally the variables "i", "x" controls our loops (I prefer to have two variables, but you could have just one), while "lettercount" is used to control when the letters should fade out.
Creating the text
In frame 10 we have the following actions (the frame number doesn't matter; it could also be frame number 2):
Set Variable: "charinline" = charinline+1
If (charinline >= linelength)
Set Variable: "prevent" = Substring(text,i-1,1)
If (prevent eq " ")
Set Variable: "linenumber" = linenumber+1
Set Variable: "charinline" = 1
Duplicate Movie Clip ("/ani", "ani"&i, i)
Set Property ("ani"&i, X Position) = startx+charinline*kerning
Set Property ("ani"&i, Y Position) = starty+linenumber*linespace
Set Variable: "/ani"&i&"/letters:letters" = Substring ( text, i, 1 ) Set Variable: "i" = i+1
First, we increase the variable "charinline" by one, because we add a character to our line. After this, we ask whether or not the number of characters in the line is greater or equal to the length of the line. If this occurs, then we create a variable ("prevent") that makes sure that we do not start a new line with a character, which is a part of a word placed on the line above (i-2). We then increase "linenumber" by one and set "charinline" to 1, because we commence a new line. The following duplicates the movie clip "ani", positions it and sets the letter inside the movie clip using Substring.
The number of frames between frame 10 and the following represents the interval between the letters. The following keyframe contains these actions:
If (i <= length)
Go to and Play (10)
This stops the animation and increases the variables "lettercount" on the main timeline by one. If "lettercount" on the main timeline equals the length of our text, then all letters have reached this point in their individual animation. Therefore we can start fading out the letters. This action is performed on the main timeline, which is why we use Tell Target to Go To and Play the label "end" on the main timeline.
On the main timeline we find that the label "end" contain the following actions:
If (x <= length)
Begin Tell Target ("ani"&x)
Go to and Play ("end")
End Tell Target
Set Variable: "x" = x+1
Here, if "x" is less or equal to the length of our text we Go To and Play the label "end" in the movie clip "ani"&x. This means that the above would start by fading out ani1, because we set "x" to 1 in frame 1. We then increase "x" by one to make sure that when the actions are carried out the next time, they will cause ani2 to fade out. The following frame on the main timeline contains the following actions, which makes sure that the actions described above are carried out continuously:
Go to and Play (_currentframe-1)