Now: Tutorial for Web and Software Design > Flash > Special Effect > Flash Content
> Typewriter Effect [Bookmark it]
Typewriter Effect

1. Create a new Flash document, set its size to 300×300.

2. In the First frame put in this script:

loadVariables("texteffect.txt","");

3. Right click on the Second frame, and Insert a Blank Key Frame.

Insert this following code in the second frame:

if (loaded != "yes") {
gotoAndPlay(1);
}

4. Right click on the Third frame, and Insert Blank Key Frame.

With the Text tool, draw a rectangle, and set it properties to Dynamic Text,

image 1

and set its variable to texteffect.

Then set the "Line Type" to Multiline. And set the font style you want the effect to use.

image 2

note: If you select the "render text as HTML" button, you'll be able to incorporate a link in this typewriting effect by using HTML stage in the txt file. see step 6

5. In the Third frame put this script:

stop();
var i = 0;
texteffect = "";
function textwritter() {
texteffect = txt.slice(0, i);
i++;
if (texteffect.length == txt.length) {
clearInterval(intervalID);
}
}
var intervalID = setInterval(textwritter, speed);

Your layer should look similar to this:

image 3

6. Now we need to make the text file that will contain the text, and the variable that will determine the typing speed. Make a text file and name it: texteffect.txt, put the following lines in the text file, then save the text file in the same directory as the .swf file

note: loadVariables (step 1) is the script that loads the information from the txt file.

&loaded=yes&
//Please do not edit this line.
&speed=50&
//The variable "speed" is actually the interval time in ms.
//Therefore the greater "speed" is, the slower the typing speed will be.
&txt=Type your text here.&

note:Type the text you want to apply the typewritter effect to between: '&txt=' and '&'

note: If you have selected the "render as HTML" (step 4) and that you want to add a link in this effect, just write something similar to this: '&txt=Click here&'

Now you're done, just run the swf file and you shall get this effect right away. Then, you can modify the speed. (located in the text file.)


[Bookmark][Print] [Close][To Top]
  • Prev Article-Flash:

  • Next Article-Flash:
  • Related Materias
    Shape Transformations
    Creating the Illusion of S
    Flash 8 Tutorial - Shape T
    Modify Shape Color with Ac
    Read _droptarget Property 
    Set Property
    Shape Tween
    Percentage Preloader
    Hyperlinks in Flash
    Tweening Shapes
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial