четверг, 27 января 2011 г.

Урок 13. Текстовый эффект

Вот собственно и он:




Начнём. Создаём текстовое поле, в нём пишем словно, которое должно у нас падать по буквам. Написали. Теперь нажимаем правой кнопкой мыши и выбираем пункт Break Apart. Текстовое поле разбивается на отдельные текстовые поля, которые содержат отдельную букву. Если Вы ничего не нажимали, то у Вас все эти текстовые поля останутся выделенными. Нажимаем Break Apart ещё раз. И теперь текстовые поля превратились в shape. Теперь самое скучное – выделяем первую букву, конвертируем в символ MovieClip, называем l0 (letter 0) и в строке имени, где написано тоже пишем l0 и так далее (l1, l2, l3…). Так, если Вы сделали эту рутинную работу, то выделяем все буквы, жмём F8, называем word, в строке имени пишем то же самое.
Создаём статичное (нельзя изменять текст) текстовое поле, в нём пишем restart, конвертируем и везде ставим имя restart_bt. Графическая часть готова. Теперь на сцене в первом кадре пишем код:

var fall_distance:Number=200;//дистанция, на которую будут падать буквы
var fall_speed:Number=7.5;//скорость падения
var currentLetter:Number=0;//текущая падающая буква
var start_position:Number=0;//начальный y буквы
restart_bt.visible=false;//прячем кнопку
st_pos();//узнаём стартовый y
restart_bt.addEventListener(MouseEvent.CLICK, restart);
function restart(e:MouseEvent){
 restart_bt.visible=false;//прячем кнопку
 currentLetter=0;//устанаввливаем текущую букву в 0
 for(var i:int=0;i<word.numChildren;i++){//уменьшаем y всех букв на fall_distance
  word.getChildAt(i).y-=fall_distance;
 } 
 word.addEventListener(Event.ENTER_FRAME, fall_letter);//добавляем слушатель
}
word.addEventListener(Event.ENTER_FRAME, fall_letter);//добавляем слушатель
function fall_letter(e:Event){
 var CurLet=word.getChildByName("l"+currentLetter);//текущая буква (уже не просто номер, а мувиклип)
 if(CurLet.ycurrentLetter+1){//если это была не последняя буква,
   currentLetter++;//то увличиваем номер 
   st_pos();//и пересчитывем начальный y
  }
  else{
   restart_bt.visible=true;//кнопка появляется
   word.removeEventListener(Event.ENTER_FRAME, fall_letter);//слушатель удаляется
  }
 }
}
function st_pos(){
 start_position=word.getChildByName("l"+currentLetter).y;//устанавливается начальный y буквы
}

Но так скучно, нужно добавить эффекты, не зря же так звучит тема) Как не странно это займёт мало места, т.к. есть встроенная функция, которая называется filters (фильтры). Сейчас мы будем использовать один вид фильтра – GlowFilter (Свечение). Пишем после строки:

restart_bt.addEventListener(MouseEvent.CLICK, restart);

строку

this.addEventListener(Event.ENTER_FRAME, effect);//добавляем слушатель, чтобы всегда был эффект свечения

и пишем саму функцию:

function effect(e:Event){
 word.filters = [new GlowFilter(Math.random()*0xFFFFFFFF, 1, 20, 20, 3.2, 3, false, false)];//создаём фильтр свечения с рандомным цветом, не прозрачный, с разбросом по x 20 и по y 20 и т.д.
}

Только для красоты следует установить цвет фона тёмный.
Нажимаем Ctrl+Enter и любуемся) Исходник как всегда для Вас в свободном доступе) Пока!

Комментариев нет:

Отправить комментарий