Sunday, May 24, 2009

Typing Text Animation in Flash

I wrote a simple code in ActionScript 2.0 that can be used to dynamically create a "Typing Text" animation without having to manually animate in Flash. All you have to do is type your text into a dynamic text field and this script will animate for you.


Step 1: Create a Dynamic Text field in the first frame of the stage. Make sure to set the Line Type to Multiline. Type some text that you want to see animated.

Step 2: Give the text field an instance name of output and a variable name (Var:) of op. These names will be used in the ActionScript code to animate the containing text.

The rest is handled with ActionScript.

Step 3: Select the frame in the time line and open up the Actions Panel (F9). Enter the following code:

speed=60

texttoshow = op
output.text = ""
i = 0
j = 0
onEnterFrame = function(){
++j
if (j==Math.floor(60/speed)){
if (i<texttoshow.length){
output.text+=texttoshow.charAt(i)
++i
}
j = 0
}
}

Breakdown: Defining the variable "texttoshow" saves the text that you typed onto the text field. Later you see this variable using the .charAt() method to display one character at a time. [output.text = ""] clears the text field at runtime. Variables "i" and "j" will increment when onEnterFrame is called. To set how many frames per second you want the script to animate, assign a number to the "speed" variable.

"onEnterFrame = function() {}" will cause a function to run everytime the frame is entered (i.e. at the framerate). The first line of code in the function increments the "j" variable (++j); this is really for if you want to animate the text effect at a different rate than the movie's frame rate. The line "if (j==Math.floor(60/speed)){}" will run the animation at the speed you want (considering your movie's frame rate is 60). For example, if your speed is 30fps, it will animate once every two(2) frames (60/30). The Math.floor() method is just used so that you don't get decimal results.

The next line uses an if statement to keep the containing code from continuing after all the text has been typed. This is not really necessary in lightly scripted movies, but it is a good practice to keep from loading down processing. Next, the addition assignment opperator (+=) is used to incrementally assign the next character in your "texttoshow" variable. Then it is critical that you increment your "i" variable (++i) so that the next character in line displays the next time the script is run.

Finally, reset the "j" variable to zero so that it starts recounting the calculated frame rate.

Alternative: If you want an even simpler code that will run the animation at the movie's frame rate and that doesn't stop running after texttoshow.length is reached, enter this code:

onEnterFrame = function(){
output.text+=texttoshow.charAt(i)
++i
}

Disclaimer: For those of you who follow my blog for the artwork, this should thoroughly convince you of my "nerd" status. Thank you for humoring me. For anyone who found this post through a search engine, I hope it helped. Feel free to leave comments.

Monday, May 4, 2009

Product Package Design

Our new Illustrator project is creating a package design for some made-up project. This product was intended to be a portfolio piece so we were highly encouraged to do our absolute best on it. I haven't presented it yet but I'll let you know what kind of grade I get on it.

We also were to create some kind of promotional design for the product and the assignment handout suggested a coaster, so I figured that would be the easiest thing to do. Feedback is appreciated!