Be a Supporter!

AS: Typewriter Effect

  • 6,268 Views
  • 36 Replies
New Topic Respond to this Topic
Nemo
Nemo
  • Member since: Jun. 13, 2003
  • Offline.
Forum Stats
Member
Level 34
Game Developer
AS: Typewriter Effect 2005-06-30 10:51:08 Reply

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
Denvish
Denvish
  • Member since: Apr. 25, 2003
  • Offline.
Forum Stats
Member
Level 46
Blank Slate
Response to AS: Typewriter Effect 2005-06-30 10:53:08 Reply

Sweet.


- - Flash - Music - Images - -

BBS Signature
Dancing-Thunder
Dancing-Thunder
  • Member since: Apr. 19, 2005
  • Offline.
Forum Stats
Member
Level 04
Blank Slate
Response to AS: Typewriter Effect 2005-06-30 10:53:24 Reply

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

Khao
Khao
  • Member since: Sep. 20, 2003
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: Typewriter Effect 2005-06-30 10:54:14 Reply

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!

Nemo
Nemo
  • Member since: Jun. 13, 2003
  • Offline.
Forum Stats
Member
Level 34
Game Developer
Response to AS: Typewriter Effect 2005-06-30 10:57:02 Reply

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
speddyfeddy1234
speddyfeddy1234
  • Member since: Feb. 23, 2005
  • Offline.
Forum Stats
Member
Level 03
Blank Slate
Response to AS: Typewriter Effect 2005-06-30 11:03:39 Reply

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

Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Typewriter Effect 2005-06-30 11:28:04 Reply

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

isthatlegal
isthatlegal
  • Member since: May. 25, 2003
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Typewriter Effect 2005-06-30 13:06:05 Reply

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

cherrorist
cherrorist
  • Member since: Feb. 15, 2005
  • Offline.
Forum Stats
Member
Level 25
Blank Slate
Response to AS: Typewriter Effect 2005-06-30 13:20:28 Reply

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

JCesta
JCesta
  • Member since: Jul. 8, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: Typewriter Effect 2005-10-19 21:49:26 Reply

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.

rightfoot10
rightfoot10
  • Member since: Oct. 27, 2005
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to AS: Typewriter Effect 2005-10-27 18:32:28 Reply

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

Happy days

CaptinChu
CaptinChu
  • Member since: Sep. 11, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Typewriter Effect 2005-11-08 12:11:00 Reply

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?

glomph
glomph
  • Member since: Jun. 16, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Typewriter Effect 2005-11-08 15:01:56 Reply

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
Majestic-Boy
Majestic-Boy
  • Member since: Jun. 27, 2006
  • Offline.
Forum Stats
Member
Level 19
Blank Slate
Response to AS: Typewriter Effect 2006-07-27 12:59:01 Reply

Very useful. Thanks a lot! =)

pivot11
pivot11
  • Member since: Jun. 16, 2006
  • Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to AS: Typewriter Effect 2006-08-21 02:28:08 Reply

so thats how they do that on those tutorials


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

BBS Signature
Rekhyt
Rekhyt
  • Member since: Sep. 4, 2006
  • Offline.
Forum Stats
Member
Level 02
Blank Slate
Response to AS: Typewriter Effect 2006-10-05 10:00:32 Reply

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

Delta66
Delta66
  • Member since: Aug. 9, 2006
  • Offline.
Forum Stats
Member
Level 11
Artist
Response to AS: Typewriter Effect 2006-11-01 19:44:47 Reply

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

manhuntkl
manhuntkl
  • Member since: Jul. 28, 2004
  • Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to AS: Typewriter Effect 2006-11-22 20:45:01 Reply

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!

random-gamer
random-gamer
  • Member since: Sep. 3, 2006
  • Offline.
Forum Stats
Member
Level 16
Blank Slate
Response to AS: Typewriter Effect 2007-03-06 13:08:26 Reply

nothing happens


I make my home, be my gallows

BBS Signature
jesseRYU
jesseRYU
  • Member since: Feb. 17, 2007
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Typewriter Effect 2007-03-30 16:46:50 Reply

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
TheGriffenFreak
TheGriffenFreak
  • Member since: Mar. 30, 2007
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: Typewriter Effect 2007-03-30 17:19:50 Reply

OOOOOOOOooooo

AS: Typewriter Effect

random-gamer
random-gamer
  • Member since: Sep. 3, 2006
  • Offline.
Forum Stats
Member
Level 16
Blank Slate
Response to AS: Typewriter Effect 2007-03-31 10:41:50 Reply

your codes don't work


I make my home, be my gallows

BBS Signature
random-gamer
random-gamer
  • Member since: Sep. 3, 2006
  • Offline.
Forum Stats
Member
Level 16
Blank Slate
Response to AS: Typewriter Effect 2007-03-31 10:53:45 Reply

your codes don't work


I make my home, be my gallows

BBS Signature
spex13
spex13
  • Member since: Feb. 23, 2007
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to AS: Typewriter Effect 2007-04-01 07:28:07 Reply

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

furryfan87243
furryfan87243
  • Member since: Sep. 26, 2004
  • Offline.
Forum Stats
Member
Level 02
Blank Slate
Response to AS: Typewriter Effect 2007-04-02 09:18:51 Reply

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

GustTheASGuy
GustTheASGuy
  • Member since: Nov. 2, 2005
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to AS: Typewriter Effect 2007-04-02 09:31:29 Reply

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


BBS Signature
Viri
Viri
  • Member since: Mar. 4, 2007
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Typewriter Effect 2007-07-08 04:03:34 Reply

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
Bobby444
Bobby444
  • Member since: Dec. 3, 2007
  • Offline.
Forum Stats
Member
Level 05
Blank Slate
Response to AS: Typewriter Effect 2008-01-29 15:14:58 Reply

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
zenyara
zenyara
  • Member since: Jun. 17, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Typewriter Effect 2008-01-29 17:19:12 Reply

http://medievalstudios.com/tutorials/typ ewritereffect.php

I made this tut

Insanimation
Insanimation
  • Member since: Feb. 27, 2008
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Typewriter Effect 2008-05-20 15:10:32 Reply

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