New Document.
Insert > new symbol (Ctrl + F8)
Name it typewriter, type: Movie Clip.
Inside typewriter movie clip, create Key frames in frames 2,3,6,7 (select the frame, right clic > insert Keyframe or select the frame and press F6)
Select frame 2 and open the actions panel (Window > actions). Paste this actions:
var textWidth=550;
var textHeight=400;
var textXPosition=0;
var textYPosition=0;
charactersPerFrame=1;
this.createTextField("frase_txt",1,textXPosition,textYPosition,textWidth,textHeight);
style=new TextFormat();
style.font="fuente1";
sentence="Efecto Texto typewriter ::Stoma:: --Lab--";
The first 4 variables are the width, height, x position and y position of the textfield we are going to create. This is not really necesary in this case, but if you want to make a component, you would have to set the properties with variables).
charactersPerFrame is, well, its not very difficult to guess, how many
characters do we want to show every frame.
For example: if charactersPerFrame=1, first it will show "E", then "Ef"
- "Efe" - "Efec" and so on. If characters PerFrame, the result would be:
"Efec"
- "Efecto t" - "Efecto texto" and so on. It's better to set that value
to 1 for short sentences and bigger values for longer sentences.
this.createTextField("frase_txt",1,textXPosition,textYPosition,textWidth,textHeight). When we reffer to "this" we reffer to the movie clip. We create the text field, the instance name of the text field will be "frase_txt", depth 1, and then we set the x, y, width and height of the textfield. As I say before, you can put the values without the variables: this.createTextField("frase_txt",1,0,0,550,400)
style=new TextFormat()
style.font="fuente1"
this is optional. If you want to use a prettier font than Arial (or Times New
Roman, i don't know which one is the default font), what you have to do is:
Open the library. Right clic inside the library (don't select any symbol) > New
Font. Name: fuente1, font: the one you like most. OK. Now right clic the new
font in the library > Linkage... and select export for action script and export
in first frame. Identifier: fuente1. OK.
style=new TextFormat() This tells flash that "style"
will be a text format
style.font="fuente1" tells flash that
"style" uses the font "fuente1". "fuente1" referst to the identifier, not to
the name that appears in the library.
if you want, you can add more properties to style. These are some of them:
style.size=20;
style.bold=true;
style.underline=true;
style.color=0x000066;
sentence="Efecto Texto typewriter ::Stoma:: --Lab--" if we are talking about a typewriter effect, we need a text to apply it to!! You can write the story of your life, your dogs name or whatever.
Lets move to frame 3. Select frame 3, open the actions panel and paste this actions:
numbercharacters=sentence.length;
frase_txt.text="";
k=0;
numbercharacters=sentence.length this variable holds how many characters our sentence has.
frase_txt.text="" If you are going to run the code just once, this is not necesary, but you could use the same movie clip to display different sentences (all you have to do is change the variable sentence from outside and tell the movie clip to play from frame 2), we need to "erase" what was written before.
k=0 A variable we are going to use later.
Select frame 6, open the actions panel and paste this actions:
armarfrase(k);
function armarfrase(numletra) {
for(var i=1;i<=charactersPerFrame;i++){
frasecita=sentence.charAt(k);
frase_txt.text=frase_txt.text+frasecita;
frase_txt.setTextFormat(style);
frase_txt.embedFonts=true;
k++;
}
if (numletra==numbercharacters) {
gotoAndStop(1);
}
}
Don't get desperate, it's not that difficult! Let's have a look at it
armarfrase(k) calls the function "armarfrase", the parameter: k. So, if we are calling a function, we need that funcion
function armarfrase(numletra) { declare the function "armarfrase", we will use a parameter: numletra. When we call the function (armarfrase(k)), the value of numletra equals to k.
for(var i=1;i<=charactersPerFrame;i++){ we create a cycle. Init=1, condition: i<=charactersPerFrame, this means that it will loop until i is higher than charactersPerFrame (or it's the same to say that will do the loop as long as i<=charactersPerFrame). i++ increases "i" in 1 every time. For example, if charactersPerFrame=3, we start the cycle. First value of i: 1. is 1 <=charactersPerFrame?, yes, so do all the actions inside the for. Finished the last action of the for, we go up again. Add 1 to i, so now i=2. is 2 <=charactersPerFrame?, yes, so do all the actions inside the for. Then again, we add 1 to i. Now i=3. is 3<=charactersPerFrame?, yes, so do all the actions inside the for. When we add again 1 to i, i=4, the for asks: is 3<=charactersPerFrame? No way!, so the actions inside the loop won't run again.
The actions inside the for are:
frasecita=sentence.charAt(k);
frase_txt.text=frase_txt.text+frasecita;
frase_txt.setTextFormat(style);
frase_txt.embedFonts=true;
k++;
frasecita gets the value of a character inside sentence.
As flash functions are 0 based, when we want to know the first character
of our sentence, we ask for the character in the 0 position, for the second,
1, and so on.
frase_txt.text=frase_txt.text+frasecita we
ask our text field to display what it was displaying at that moment adding the
new character we got.
frase_txt.setTextFormat(style) we
apply the text format we declared in frame 2.
frase_txt.embedFonts=true necesary
to apply the text format
k++ we add 1 to the value of k. So, the first time we will get the character
in the position 0 (first character, then we add 1 to k, now k=1, so next time
we
will
get
the
character in the 1 position (second character) and so on.
} ends
the for cycle.
if (numletra==numbercharacters)
{
gotoAndStop(1);
} numletra
gets a higher value every time k increases. We want to stop once we have reached
all the characters, and this is what the if statement does. Once it's finished,
we tell the movie clip to go to frame 1 and to stay quiet there.
} End of the function
Finally, select frame 7 and paste this action:
gotoAndPlay(6);
this will make the loop, the function will be called once and again and again until the sentence is complete.
Then, go to the stage and place the movie clip on the stage.
Hope you enjoy it!
You should end up with something like this: