Выжигаем надпись лазером. Часть 2 - Появление надписи за лазером.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Информация
Автор/переводчик: 
TeT
Описание: 

Добрый день. Представляю вашему вниманию вторую часть урока.В этом уроке мы сделаем так, что бы текст появлялся сразу за лазером.

Прежде чем приступим к созданию этого эффекта, хочу сделать заметку.
Я хотел сделать так, что когда лазер переходил с одной буквы на другую, то искр не было.
Хотел я это сделать программно. Если вы хотите сделать также, то сперва дайте имена всем нужным мувиклипам.
Этот эффект содержит большое кол-во ключевых кадров и что бы не пришлось мувикам заново давать имена во всех кадрах это лучше сделать сразу. Этот момент я не продумал, и оставил все как есть.

Лазерный луч мы создали в предыдущем уроке. Приступим к созданию самого эффекта. Сделать этот эффект достаточно просто, но он требует усидчивости, т.к как тут используеться покадровая анимация (и не только она). Принцип создания одинаков для всех букв, по-этому я покажу на двух буквах.

1) Разберемся со слоями. Нам надо 4 слоя. Из них три слоя должны быть с одинаковой надписью. Обычная надпись в моих уроках - это easyflash.org :)

Создайте три слоя с одинаковой надписью, с одинаковыми ее координатами. Создайте еще один слой и поместите на него символ lazer (который мы создали в предыдущем уроке).

Верхний слой назовите guide.

Переместите под него слой с лазером и переименуйте его в lazer.

Третий слой сверху назовите mask.

Самый нижний слой назовите text.

Слой guide надо сделать направляющим. Для этого нажмите на него ПКМ и нажмите Guide.

Слой lazer надо сделать направляем. Для это щелкаем два раза на цветной квадратик возле названия слоя. И выбираем пункт Guided.

Слой mask надо превратить в маску. Для этого щелкаем на нем ПКМ и выбираем Mask.(Последний слой сам станет таким как нам надо).

2) Работа со слоем guide.

Направляющий слой ( Guide ) служит для создания движения мувиклипа по определенной траектории.

На этом слое создаеться путь по которому будет двигаться символ. Все что нарисовано на слое такого типа , в готовой флэшке видно не будет.

Заблокируйте и выключите видимсость всех остальных слоев.На этом слое мы что-то написали. Но нам на слое такого типа можно только использовать Линии или Формы (Shape).
Сделаем из текст Форму. Для этого выделим текст и нажмем Ctrl+B два раза.
Теперь надо "разорвать" каждую букву как на картинке:

Таким образом создадим начало и конец пути.

Работа с этим слоем окончена. Единственное что еще надо будет делать, так это увеличивать количество кадров.

Работа со слоем lazer.
На этом слое создаем движение лазера по форме букв. Для этого надо привязать кончик лазера к путям на слое guide.

Первое, что надо сделать с лазером, так это выбрать лазер с помощю инструмента Free Transform Tool (Q) и перенести белый кружочек на конец лазера. Этот кружочек является как бы осью.

Выберем инструмент выделения (V) и привяжем лазер к путям. Обратите внимание на черный кружочек рядом с курсором.

Что быпривязать символ к путям, надо просто переместить символ так, что бы кружочек оказался на нужном пути.

Теперь создайте еще один ключевой кадр. ( Где-то пятнадцатый). Переместите символ в конец пути. Создайте анимацию движения Classic Tween. Если протестируете ролик, то увидите, что лазер двигается по контуру буквы. Далее сделайте переход между буквами, для этого сделайте нужный кадр ключевым и переместите на нем лазер в начало пути следующей буквы. Создайте анимацию Classic Tween.

4)Работа со слоем mask.

Это самый трудный этап. Точнее трудного в нем ничего, но вот времени на него большего всего понадобиться.

Как видно из названия слоя, на нем мы будем работать с маской. Что бы нам было удобней работать выключите видимость слоя guide. А у слоя lazer, text включите режим контуров.

Если вы не забыли, то на этом слое мы так же создали текст. Надо из этого текста снова сделать форму Shape (Ctrl+B 2раза).

Перетаскиваем то что получилось в любое место сцены, но так, что бы текст этого слоя не соприкасался с текстом слоя text.

Теперь создадим несколько ключевых кадров. Количество ключевых кадров равно равно количеству кадров движения лазера по контуру одной буквы. То есть:

На первом кадре все оставляем так как есть. Переходим на второй. Сейчас я объясню задачу:
Движение лазера мы уже сделали. Если рассмотреть его покадрово, то заметим, что в каждом кадре он перемещается на определенное кол-во пикселей:

Пройденный лазером путь становится виден как линия, выжигаемая лазером.

Это сделать очень просто. Перетащим букву, в то же самое место на котором находиться такая же буква слоя text.

То есть:

Теперь надо удалить часть буквы, оставив тольку часть, по которой прошел лазер:

Вот то же самое делаеться и для остальных букв.

Примечание: маску можно было просто рисовать кисточкой например, но мне больше нарвиться метод описанный выше.

5) Работа со слоем text.

На этом слое ничего особого не надо делать. Но вы можете например применить к тексту какой нбудь фильтер и анимировать его.

Вот впрнципе и все. Возможно будут в уроке ошибки, по-этому если что не понятно, спрашивайте :)

Исходник: 

Внимание!

Вы можете изучить все секреты flash анимации всего за 3 недели! Перейти из разряда новичка в разряд опытного пользователя даже без посещения дорогих курсов и чтения толстенных талмудов.

110 видео уроков,

в превосходном качестве помогут пройти, Вам, терни flash анимации самым быстрым и легким путём! +ActionScript 3.0

Подробнее

Комментарии

Аватар пользователя kuzen

эффект совковый получился да анимация не на высоте, я бы еще сделал постепенное остывание вслед за лазером, как на раскаленном метале.

Аватар пользователя TeT

Сделай :) И напиши урок. Всем будет интересно :)

Keyboard not found. Press any key to continue

Аватар пользователя Александр21

Мне понравилось. Спасибо!

Аватар пользователя Александр21

один глупый вопрос:"Теперь надо "разорвать" каждую букву как на картинке:"- как это сделать. выделить- выделил, а дальше не пойму каким именно инструментом "разорвать"

Аватар пользователя samana

Цитата: Александр21

каким именно инструментом "разорвать"

Наверно лестик-резинка самое оно.

Аватар пользователя jg54

samana,
ластиком не выходит. Контур искажается но не разрывается. Где с бубном попрыгать?  Спасибо.

Аватар пользователя TeT

странно... неичего не должно искажться... в таком случае можно выделить нужный отрезок инструментом выделиния и удалить его клавишей делит

Keyboard not found. Press any key to continue

Аватар пользователя vanya_vip

TeT,
Зделай видео урок пожалуйста я тя очень прошу

Аватар пользователя jg54

TeT,
может быть дело в самом шрифте? Я имею в виду контурное написание? Я писал обычно, просто потом в слое с текстом включал опцию контур.

Аватар пользователя TeT

Аааа... вот в чем дело. Опция контура нужна только для удобства работы)). Надо из текста сделать форму)) Для этого надо выделить текст и нажать Ctrl+B 2 раза. После первого нажатия текст разобьеться на буквы, а после второго превратиться в форму )) После этого можно будет ластиком разорвыавть ))

Keyboard not found. Press any key to continue

Аватар пользователя jg54

В этом то и затык.  Текст не желает разрываться  после всех этих манипуляций. Буква ( ставшая формой, естественно, после 2-х Ctrl+B)  искажается по форме прикладываемого ластика и не более.( Скоро будет как Уральского  

ag

 http://www.youtube.com/watch?v=BsjAzOGe0cI))  
Про контурное написание  я имел ввиду не опцию шкалы времени, а сам шрифт. Жаль нельзя скриншот прицепить, было бы понятней. 

Аватар пользователя TeT

Страно и не понятно... Можно попробывать тогда сделать из буквы форму и с помощью инструмента Ink Bottle tool (вроде так. Спрятан на иконке синструментом заливки) создать новый контур букв..

 

... Как фигово работать в саппорте

Keyboard not found. Press any key to continue

Аватар пользователя Gesha

У меня таже проблема. Буквы становятся сетчатыми, как шлейв в уроке с подсветкой.Ластиком выгрызается кусок буквы. Ink Bottle tool не хочет работать. Может это действительно зависит от шрифта? Как называется шрифт в котором вы писали? И мне не очень понятно что вы имели ввиду "что бы кружочек оказался на нужном пути" а какой путь нужный?

Аватар пользователя NOTone

У меня тоже была проблема з буквами, но я решыл ее просто: обрисовал буквы по кунтуру. Но возникла новая проблема, лазер прорисовывает по траектории, но непаказываетса контур з слоя mask, в тоже время слово з text мигает, тем самим виден текст. тоисть лазер рисует, но ничево непрорисовываетса, а то што должен нарисавать лазер уже видно, незнаю как ето решыть.

Аватар пользователя TeT
Цитата: NOTone

незнаю как ето решыть.

незнаю как ето панать 

Keyboard not found. Press any key to continue

Аватар пользователя Doublman
Тут в задних рядах у Буратины вопрос:

В AF CS 3 получилось создать слои как в "букваре", но контур не создается что б его... рвать потом (маму его). На скрине видно.

 http://img852.imageshack.us/i/cs3d.jpg/ 

Аватар пользователя Doublman

Есть мнение что гражданин лукавит. Одними ресурсами Adobe Flesh не добиться описаного в п.2.
Надо сказать товарищу Берия пусть разберется. 

Аватар пользователя TeT

можно снчала сделать из буквы форму (Ctrl+B) а потом с помощью инструмента Ink bottle tool сделать контур

Keyboard not found. Press any key to continue

Аватар пользователя VittyRude

Хороший урок, спасибо! Вот зделал одно - vittyrude , только я не ко всем буквам эффект приминял)

Аватар пользователя Gesha

Да только проблемы у многих появляются. И не понятно как их решать. Я уже спрашивал: "что вы имели ввиду "что бы кружочек оказался на нужном пути" а какой путь нужный?" И не получил ответ.

Аватар пользователя TeT

Что такое путь описано в пункте 2  Работа со слоем guide.

Keyboard not found. Press any key to continue

Аватар пользователя DimanVersion

Большое спасибо за великолепный урок ^_^