Статьи

Совет: создайте класс текстового эффекта пишущей машинки

В этом кратком совете мы создадим статический класс ActionScript для многократного использования, который будет создавать эффект «Пишущая машинка» в одну строку. Читай дальше!


Мы разделим пользовательскую строку на массив, а затем добавим полученные буквы в TextField по TextField , используя класс Timer .


Наш класс будет static , что означает, что его не нужно создавать с использованием ключевого слова new . Чтобы получить доступ к члену статического класса, используйте имя класса вместо имени экземпляра.

Создайте новый файл ActionScript и напишите следующий код:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package
{
    import flash.text.TextField;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
     
    public final class Typewriter
    {
        /* Declare the variables and methods as static */
 
        private static var chars:Array;
        private static var tf:TextField;
        private static var timer:Timer;
        private static var i:int = 0;
         
        public static function write(txt:String, txtField:TextField, time:Number):void
        {
            chars = txt.split(«»);
            tf = txtField;
            timer = new Timer(time);
             
            timer.addEventListener(TimerEvent.TIMER, writeChar);
            timer.start();
        }
         
        private static function writeChar(e:TimerEvent):void
        {
            if (i < chars.length)
            {
                tf.appendText(chars[i]);
                i++;
            }
            if (i >= chars.length) //check whether string is complete
            {
                timer.stop();
                timer.removeEventListener(TimerEvent.TIMER, writeChar);
                timer = null;
            }
        }
    }
}

Использование не может быть проще — просто добавьте класс Typewriter.as в папку вашего проекта и используйте следующий код:

1
2
3
import Typewriter;
 
Typewriter.write(‘Text to Write’, targetTextfield, 50);

Вот и все, протестируйте свой фильм, и вы увидите свой TextField, используя эффект «Пишущая машинка».


Я использовал класс в этом примере SWF, чтобы вы могли увидеть эффект:


Используйте этот класс, чтобы создавать свои собственные эффекты!

Спасибо за чтение. Если вам нужна более продвинутая версия этого эффекта для использования в ваших проектах, взгляните на Анимацию Letter By Letter от Rasmus Wriedt Larsen.