Текст с курсором
Автор: Nikitar
Сайт: Rusforumz.com
Привет! Сегодняшний урок посвящён такому явлению как имитации набирания текста. Печатающий текст сделать не так сложно как кажется, но проблема в другом. В том, что он не похож на настоящий набирающийся текст. Проведём небольшой эксперимент. Откройте Word и попробуйте там что-то ввести, потом остановитесь и введите ещё что-то. Вот это выглядит естественно и мы должны будем это повторить. Большинство людей, когда делают этот эффект забывают про одну маленькую, но очень важную деталь - мигающий курсор! Действительно, именно он придаёт печатающему эффекту компьютерную окраску. Кстати, я использовал этот эффект в верхнем баннере (про попугаев). Итак, приступим.
1. Откройте программу Macromedia Flash (версия от 6-й подойдёт, у меня на скриншотах 8-я версия программы). Создайте новый документ, с любыми размерами, с fps 25 кадров.
2. Сейчас мы будем рисовать подложку под текст. Просто нарисуйте прямоугольник, как на скриншоте. Теперь давайте приступим непосредственно к курсору. Курсор мигающий как выглядит? Просто чёрная вертикальная палочка, то пропадающая, то появляющаяся вновь. Вот это мы и будем рисовать. Нарисуте вертикальную линию, высотой примерно с подложку, можно чуть ниже (или посмотрите внизу какой у меня курсор на конечном варианте). Выделяем его, затем жмём F8 - movieclip (видеоклип) - OK. Затем заходим в мувиклип и в 6-ом кадре вставляем пустой ключевой кадр (просто выделите 6-й кадр и нажмите F7), и в 12-м кадре тоже вставьте пустой ключевой кадр. Таким образом, у нас первые 6 кадров курсор виден, а с 6-12 кадры не виден. То есть мигает.
3. Возвращаемся на главную сцену. Выделяем нашу линию и прописываем в Instance name cur, этим мы назвали наш курсор, чтобы потом можно было к нему обращаться из кода. Теперь будем рисовать текстовое поле, в котором и будет печататься текст. Инструментом Text (текст) нарисуйте текстовое поле, по ширине и высоте примерно соответствующее подложке. Затем выставьте те же параметры для текстового поля, что и на скриншоте. А именно:
Тип поля: Dynamic Text (Динамический текст)
Название текстового поля: txt
Var (переменная): var_txt
Также не забудьте нажать на кнопку Embed (Встроить) и встроить в ролик те символы шрифта, которые будут показываться. Советую выбрать все символы группы Cyrillic, а также такие группы как: Punctuation, Numbers, Basic Latin.
4. Теперь сделаем поле для ввода текста, который будет печататься, а также кнопку, которая будет передавать текст для эффекта. Реализацию опять же, посмотрите внизу страницы, чтобы было более понятно, что и для чего мы делаем.
Создайте текстовое поле как и в предыдущем пункте, только тип поля сделайте Input Text (поле для ввода), а название поля input. Больше никаких параметров указывать не нужно. Ну, ещё embed поле можно заполнить. Теперь кнопка. Кнопка у нас не обычная, а сделанная из мувиклипа. Нарисуйте прямоугольник, выделите его двойным щелчком, далее F8 - movieclip (видеоклип) - OK. В instance name (имя экземпляра) введите btn. Теперь 2 раза кликните по прямоугольнику и войдите в мувиклип, который мы только что создали. В первом кадре создайте новый слой, и на прямоугольнике сделайте надпись, например, "Воспроизвести!", также в первый кадр вставьте код:
stop();
Во второй кадр скопируйте первый кадр и немного видоизмените его. Этот кадр у нас будет отображаться при наведении на кнопку.
5. Теперь переходим в главную сцену, там у нас один-единственный кадр, создаём новый слой, новый ключевой кадр и в него вставляем следующий код (для этого выделяем кадр, открываем панель Actions). Сначала код самого эффекта разберём, а потом уже всяких наворотов.
btn._visible=false
pt="Хочу 38 красных попугаев!"
txt.autoSize=true;
curposition=txt._x+txt._width;
cur._x=curposition;
ptf=new String(pt);
gr=ptf.length;
i=0;
a=0;
var_txt=""
type=true;
fd=random(5);
this.onEnterFrame=function(){
i++;
if(i>fd){
if(type==true){
if(a<= gr-1){
var_txt+=ptf.charAt(a);
curposition=txt._x+txt._width;
cur._x=curposition;
fd=random(5);
}
else{
btn._visible=true;
}
a++;
}
i=0;
}
}
Теперь поясню код. Так как сначала у нас проигрывается текст, который заложен в код, а не произвольно введённый пользователем, то кнопка воспроизвести нам не понадобится, поэтому мы её и делаем невидимой. Далее.
pt="Хочу 38 красных попугаев!"
txt.autoSize=true;
curposition=txt._x+txt._width;
cur._x=curposition;
ptf=new String(pt);
gr=ptf.length;
i=0;
a=0;
var_txt=""
type=true;
fd=random(5);
Это настройка эффекта. В переменной pt у нас содержится строка текста для эффекта.
txt.autosize - Наш эффект основан на ширине текстового поля, поэтому ширина текстового поля у нас динамическая и равна введённому тексту.
curposition - позиция курсора. Его мы двигаем в зависимости от того, какая буква печатается.
ptf,gr - не удивляйтесь, я всегда называю переменные 2-х или 3-х значными именами. ptf отвечает за преобразование текста в строку, а gr - вычисляет длину текста.
Остальные переменные нужны для настройки скрипта, их лучше не изменять, кроме fd, сейчас эта переменная равна 5, это максимум задержки между печатанием букв.
Поехали дальше, собственно сам код эффекта лучше не изменять, да и там алгоритм очень простой. Текст разбивается побуквенно, и в новое пустое текстовое поле прибавляется по одной букве, а после каждой буквы появляется курсор. По окончании набора текста появляется кнопка "Воспроизвести!".
btn.onRollOver=function(){
this.gotoAndStop(2);
}
btn.onRollOut=function(){
this.gotoAndStop(1);
}
btn.onRelease=function(){
if(input.text!=""){
pt=input.text;
}
txt.autoSize=true;
curposition=txt._x+txt._width;
cur._x=curposition;
ptf=new String(pt);
gr=ptf.length;
i=0;
a=0;
var_txt=""
type=true;
fd=random(5);
btn._visible=false
}
В принципе в этом коде описаны события на кнопку btn
onRollOver - то что случается при наведении на кнопку (в данном случае переходим на второй кадр кнопки)
onRollOut - то что случается, когда курсор не на кнопке (у нас переходит на первый кадр)
onRelease - при нажатии на кнопку (у нас восстанавливаются все исходные значения, которые были до эффекта (то есть первый десяток строк).
7. Всё должно работать. Жмём ctrl+Enter, и должно получиться нечто, что находится внизу этой страницы. После того, как закончит печататься надпись "Хочу 38 красных попугаев!" введите свой текст и нажмите на кнопку "Воспроизвести!", при этом кнопка пропадёт, текст напечатается, и кнопка снова появится. Скрипт работает до бесконечности :)
