00:00
00:00

AS: Typewriter Effect

7,906 Views | 36 Replies
New Topic Respond to this Topic

AS: Typewriter Effect 2005-06-30 10:51:08


AS: Main

Here is a quick code I made to simulate a typewriter effect where each letter of a string is written out onto a dynamic text field, the example seen here. This tutorial employs from AS: Functions by Inglor. Also, I use setInterval in this tutorial which I don't think has been covered in any of the other tutorials. Anyway, here we go!

First step is to open up your Flash and make a dynamic text box. Give this box the instance name of "showtext" (no quotes of course). Simple enough? Next, to complete the effect, we open up our actions panel for the frame we are in and add the following:

text = "This is the typewriter effect in action!";
l = text.length;
p = 1;
function spelltext() {
showtext = text.substring(0, p);
p++;
if (p == l+1) {
clearInterval(write);
}
}
write = setInterval(spelltext, 50);

And viola! A typewriter effect. Just type in whatever you want for your variable "text" to have the effect on it.
However, what is a tutorial if you don't know what you are doing? Here is an explaination of the code:

text = "This is the typewriter effect in action!";
This is where your text variable is declared. Whatever is in the quotes will be "typed" onto the screen in the dynamic text field for the variable "showtext".

l = text.length;
p = 1;

We use the letter l for length of the text, the total number of characters in it. We also use p for the current "position" of the text that is being typed out.

function spelltext() {
showtext = text.substring(0, p);
p++;
if (p == l+1) {
clearInterval(write);
}
}

This makes a new function, named spelltext which will make the new variable, showtext, display from the beginning of our original text to the current position, p. p++ adds one to the current position in the string. if(p == l+1) will check to see if the entire string has been "typed" out. If it has, the interval write will be terminated (see next step).

write = setInterval(spelltext, 50);
This creates an interval for the function "spelltext" so it occurs every 50 milliseconds (the value of milliseconds can be changed to make the typing go faster or slower). The name of the interval is "write", which will be terminated by the "spelltext" function when our entire phrase has been typed.

I think that concludes it. I might make one on setInterval and clearInterval if no one else does.


BBS Signature

Response to AS: Typewriter Effect 2005-06-30 10:53:08


Sweet.


- - Flash - Music - Images - -

BBS Signature

Response to AS: Typewriter Effect 2005-06-30 10:53:24


This is pretty useful, but dont you think it is just easier to animate the type writer effect?

Response to AS: Typewriter Effect 2005-06-30 10:54:14


At 6/30/05 10:53 AM, Dancing-Thunder wrote: This is pretty useful, but dont you think it is just easier to animate the type writer effect?

noooooooooo its so damn longer to animate it!

Response to AS: Typewriter Effect 2005-06-30 10:57:02


At 6/30/05 10:53 AM, Dancing-Thunder wrote: This is pretty useful, but dont you think it is just easier to animate the type writer effect?

And it takes up a LOT more space. With this you just paste the code and type in what you want. If you animate it then:
1. You are restricted by framerate.
2. You have to manually delete or type every letter of what you want. Doing an entire paragraph like this is a major hassel. This takes a lot of time.
3. Keyframes take up a heck of a lot more space than an Actionscript code.

Trust me, this is worth the time to copy and paste.


BBS Signature

Response to AS: Typewriter Effect 2005-06-30 11:03:39


Well, manually looks better because dynamic isnt vector art....

Response to AS: Typewriter Effect 2005-06-30 11:28:04


Yea, I think I'll make a setInterval tutorial if noone does that soon,

Sweet work ;)

I made AS typewrite credits with interval, but you pretty much covered how it's done

good tutorial

Response to AS: Typewriter Effect 2005-06-30 13:06:05


thats mint... you could add a key tap SFX into there too and there you hav it a perfectly syncronised typing effect

Response to AS: Typewriter Effect 2005-06-30 13:20:28


Kewl ;)

I've got another way of getting the typewriter effect, both code & the dynamic text field ('txtField') go into the first keyframe:

stop();
i = 0;
tehText = "typetypetypetype";
this.onEnterFrame = function() {
//txtField is the instance name for dynamic textBox:
txtField.text += tehText.charAt(i);
i++;
};

Response to AS: Typewriter Effect 2005-10-19 21:49:26


but i have trouble with the fact that when the text gets to the right of the box it just stops typyng, how can i make it so that the texts goes the the bottom left of the line under the first.

Response to AS: Typewriter Effect 2005-10-27 18:32:28


How do I move to the next frame after the script has run???

Happy days

Response to AS: Typewriter Effect 2005-11-08 12:11:00


Ugh!!! I just can't get it to work! I copied the script, pasted it onto the Actions for the frame, made a dynamic textbox with the same instance, but it still doesn't work!! What's wrong?

Response to AS: Typewriter Effect 2005-11-08 15:01:56


um well this is a bit off topic but i made a thing that desplays a mesage worrd by word but you need a movie clip. the code is this:

onClipEvent (load) {
wordList = ("text word by word").split(" ");
wordNum = 0;
frameDelay = 6;
frameCount = frameDelay;
}
onClipEvent (enterFrame) {
if (frameCount == frameDelay) {
_root.text = wordList[wordNum];
wordNum++;
if (wordNum>=wordList.length) {
wordNum = 0;
}
frameCount = 0;
}
frameCount++;

}

and a text feild for the var text
sorta self explanetry


I have done the deed. Didst thou not hear a noise?

BBS Signature

Response to AS: Typewriter Effect 2006-07-27 12:59:01


Very useful. Thanks a lot! =)

Response to AS: Typewriter Effect 2006-08-21 02:28:08


so thats how they do that on those tutorials


Blok' Party, Orbital Khaos, site, MSMstudios, Phrozen Phlame

BBS Signature

Response to AS: Typewriter Effect 2006-10-05 10:00:32


At 11/8/05 12:11 PM, CaptinChu wrote: Ugh!!! I just can't get it to work! I copied the script, pasted it onto the Actions for the frame, made a dynamic textbox with the same instance, but it still doesn't work!! What's wrong?

There is a mistake.

text = "This is the typewriter effect in action!";
l = text.length;
p = 1;
function spelltext() {
showtext.text = text.substring(0, p);
p++;
if (p == l+1) {
clearInterval(write);
}
}
write = setInterval(spelltext, 50);

That should work ;)

Response to AS: Typewriter Effect 2006-11-01 19:44:47


At 10/27/05 06:32 PM, rightfoot10 wrote: How do I move to the next frame after the script has run???

I want to know the same thing or in other words"ditto".


hello

Response to AS: Typewriter Effect 2006-11-22 20:45:01


At 6/30/05 10:51 AM, AtomicSponge wrote: Give this box the instance name of "showtext" (no quotes of course).

I figured out why this isnt working for alot of people... you have to give it a var name of "showtext" not a instance name.

I hope this helps out alot of people!

Response to AS: Typewriter Effect 2007-03-06 13:08:26


nothing happens


I make my home, be my gallows

BBS Signature

Response to AS: Typewriter Effect 2007-03-30 16:46:50


Thanks Nemo this just earned a page on my AS notes i've been taking

also thank you so much for explaining the code and not just craping it out for us.


New at flash then get some help.

BBS Signature

Response to AS: Typewriter Effect 2007-03-30 17:19:50


OOOOOOOOooooo

AS: Typewriter Effect

Response to AS: Typewriter Effect 2007-03-31 10:41:50


your codes don't work


I make my home, be my gallows

BBS Signature

Response to AS: Typewriter Effect 2007-03-31 10:53:45


your codes don't work


I make my home, be my gallows

BBS Signature

Response to AS: Typewriter Effect 2007-04-01 07:28:07


At 10/5/06 10:00 AM, Rekhyt wrote:
At 11/8/05 12:11 PM, CaptinChu wrote: Ugh!!! I just can't get it to work! I copied the script, pasted it onto the Actions for the frame, made a dynamic textbox with the same instance, but it still doesn't work!! What's wrong?
There is a mistake.

you must put showtext as a VAR not an instance name

Response to AS: Typewriter Effect 2007-04-02 09:18:51


How can I get this to delay between strings and make a ticking sound when it "types"? Like in Phoenix Wright? (Ex: "Blah blah blah blah, "pause for 2 seconds" blah blah blah")

Response to AS: Typewriter Effect 2007-04-02 09:31:29


How far can you get trying to leave coding knowledge out of your head, huh?
Not very.


BBS Signature

Response to AS: Typewriter Effect 2007-07-08 04:03:34


Ugh it's not working, I did everything and it doesn't work T~T


[Last.FM] [Steam ID]

Bros 4 lyfe (he dun did dis sig)

BBS Signature

Response to AS: Typewriter Effect 2008-01-29 15:14:58


At 10/19/05 09:49 PM, JCesta wrote: but i have trouble with the fact that when the text gets to the right of the box it just stops typyng, how can i make it so that the texts goes the the bottom left of the line under the first.

Change single line to multiline


OMG FISH

BBS Signature

Response to AS: Typewriter Effect 2008-05-20 15:10:32


Good idea. Badly written tutorial.

The 'name' you refer to should be the var name, not the instance name, as many people have pointed out....

Does anyone have any idea how yo make it go to the next frame afterwards, otherwise its pretty useless to me....


GOTPENMUSTFLASH!

BBS Signature