Forum Topic: AS: Typewriter Effect

(4,512 views • 36 replies)

This topic is 2 pages long. [ 1 | 2 ]

<< < > >>
None

Nemo

Reply To Post Reply & Quote

Posted at: 6/30/05 10:51 AM

Nemo LIGHT LEVEL 34

Sign-Up: 06/13/03

Posts: 1,895

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.


None

Denvish

Reply To Post Reply & Quote

Posted at: 6/30/05 10:53 AM

Denvish DARK LEVEL 46

Sign-Up: 04/25/03

Posts: 16,236

Sweet.

- - Flash - Music - Images - -

BBS Signature

None

Dancing-Thunder

Reply To Post Reply & Quote

Posted at: 6/30/05 10:53 AM

Dancing-Thunder NEUTRAL LEVEL 04

Sign-Up: 04/19/05

Posts: 278

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


None

Khao

Reply To Post Reply & Quote

Posted at: 6/30/05 10:54 AM

Khao EVIL LEVEL 19

Sign-Up: 09/20/03

Posts: 2,765

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!


None

Nemo

Reply To Post Reply & Quote

Posted at: 6/30/05 10:57 AM

Nemo LIGHT LEVEL 34

Sign-Up: 06/13/03

Posts: 1,895

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.


None

speddyfeddy1234

Reply To Post Reply & Quote

Posted at: 6/30/05 11:03 AM

speddyfeddy1234 NEUTRAL LEVEL 03

Sign-Up: 02/23/05

Posts: 318

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


None

Inglor

Reply To Post Reply & Quote

Posted at: 6/30/05 11:28 AM

Inglor NEUTRAL LEVEL 17

Sign-Up: 01/26/03

Posts: 10,948

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


None

isthatlegal

Reply To Post Reply & Quote

Posted at: 6/30/05 01:06 PM

isthatlegal LIGHT LEVEL 21

Sign-Up: 05/25/03

Posts: 2,662

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

BBS Signature

None

cherrorist

Reply To Post Reply & Quote

Posted at: 6/30/05 01:20 PM

cherrorist DARK LEVEL 25

Sign-Up: 02/15/05

Posts: 1,000

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++;
};


None

JCesta

Reply To Post Reply & Quote

Posted at: 10/19/05 09:49 PM

JCesta LIGHT LEVEL 09

Sign-Up: 07/08/05

Posts: 433

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.


None

rightfoot10

Reply To Post Reply & Quote

Posted at: 10/27/05 06:32 PM

rightfoot10 NEUTRAL LEVEL 01

Sign-Up: 10/27/05

Posts: 1

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

Happy days


None

CaptinChu

Reply To Post Reply & Quote

Posted at: 11/8/05 12:11 PM

CaptinChu DARK LEVEL 15

Sign-Up: 09/11/05

Posts: 3,219

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?

All programming problems can be solved with Arrays!

BBS Signature

None

glomph

Reply To Post Reply & Quote

Posted at: 11/8/05 03:01 PM

glomph NEUTRAL LEVEL 10

Sign-Up: 06/16/05

Posts: 229

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

None

Majestic-Boy

Reply To Post Reply & Quote

Posted at: 7/27/06 12:59 PM

Majestic-Boy FAB LEVEL 19

Sign-Up: 06/27/06

Posts: 529

Very useful. Thanks a lot! =)

Majestic-Boy's Awesome Ways to Make Money and PHP Tutorials.


None

pivot11

Reply To Post Reply & Quote

Posted at: 8/21/06 02:28 AM

pivot11 FAB LEVEL 07

Sign-Up: 06/16/06

Posts: 1,124

so thats how they do that on those tutorials

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

BBS Signature

None

Rekhyt

Reply To Post Reply & Quote

Posted at: 10/5/06 10:00 AM

Rekhyt EVIL LEVEL 02

Sign-Up: 09/04/06

Posts: 42

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 ;)


None

Delta66

Reply To Post Reply & Quote

Posted at: 11/1/06 07:44 PM

Delta66 FAB LEVEL 11

Sign-Up: 08/09/06

Posts: 2,477

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


None

manhuntkl

Reply To Post Reply & Quote

Posted at: 11/22/06 08:45 PM

manhuntkl EVIL LEVEL 18

Sign-Up: 07/28/04

Posts: 69

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!


None

random-gamer

Reply To Post Reply & Quote

Posted at: 3/6/07 01:08 PM

random-gamer NEUTRAL LEVEL 16

Sign-Up: 09/03/06

Posts: 167

nothing happens

I make my home, be my gallows

BBS Signature

Happy

jesseRYU

Reply To Post Reply & Quote

Posted at: 3/30/07 04:46 PM

jesseRYU EVIL LEVEL 10

Sign-Up: 02/17/07

Posts: 1,305

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

Happy

TheGriffenFreak

Reply To Post Reply & Quote

Posted at: 3/30/07 05:19 PM

TheGriffenFreak FAB LEVEL 11

Sign-Up: 03/30/07

Posts: 314

OOOOOOOOooooo

AS: Typewriter Effect


None

random-gamer

Reply To Post Reply & Quote

Posted at: 3/31/07 10:41 AM

random-gamer NEUTRAL LEVEL 16

Sign-Up: 09/03/06

Posts: 167

your codes don't work

I make my home, be my gallows

BBS Signature

None

random-gamer

Reply To Post Reply & Quote

Posted at: 3/31/07 10:53 AM

random-gamer NEUTRAL LEVEL 16

Sign-Up: 09/03/06

Posts: 167

your codes don't work

I make my home, be my gallows

BBS Signature

None

spex13

Reply To Post Reply & Quote

Posted at: 4/1/07 07:28 AM

spex13 EVIL LEVEL 08

Sign-Up: 02/23/07

Posts: 195

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


None

furryfan87243

Reply To Post Reply & Quote

Posted at: 4/2/07 09:18 AM

furryfan87243 NEUTRAL LEVEL 02

Sign-Up: 09/26/04

Posts: 2

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")


None

GustTheASGuy

Reply To Post Reply & Quote

Posted at: 4/2/07 09:31 AM

GustTheASGuy LIGHT LEVEL 08

Sign-Up: 11/02/05

Posts: 11,378

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

#ngprogramming at irc.freenode.net
haXe | Keel imperative | Spyro! | Thru you


None

ironraven24

Reply To Post Reply & Quote

Posted at: 7/8/07 04:03 AM

ironraven24 DARK LEVEL 10

Sign-Up: 03/04/07

Posts: 2,347

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


None

Bobby444

Reply To Post Reply & Quote

Posted at: 1/29/08 03:14 PM

Bobby444 DARK LEVEL 05

Sign-Up: 12/03/07

Posts: 849

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

Happy

zenyara

Reply To Post Reply & Quote

Posted at: 1/29/08 05:19 PM

zenyara NEUTRAL LEVEL 13

Sign-Up: 06/17/05

Posts: 1,167


None

Insanimation

Reply To Post Reply & Quote

Posted at: 5/20/08 03:10 PM

Insanimation DARK LEVEL 21

Sign-Up: 02/27/08

Posts: 1,315

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

All times are Eastern Standard Time (GMT -5) | Current Time: 06:10 PM

<< Back

This topic is 2 pages long. [ 1 | 2 ]

<< < > >>
You need a Grounds Gold Account to post on the NG BBS! If you don't have one, click here to sign up now! It's fast, free, and easy — and opens up tons of great NG features!