ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Создание простого анимированного текста

Создание простого анимированного текста

Анимации, в том числе и текстовой, на сайте посвящен целый раздел. С анимацией в формате GIF некоторые из нас познакомились в книге Основы веб-дизайна. Графический редактор Adobe Fireworks CS4. В Photoshope также существует инструментарий для создания простейшей GIF-анимации. На этом уроке мы рассмотрим как создается простая текстовая анимация.

Создадим новый документ Файл ⇒ Создать.

Параметры нового документа

Выберем инструмент Горизонтальный текст с параметрами как на рисунке или другими, по вашему усмотрению и сделаем надпись.

Параметры горизонтального текста

Рисунок с надписью

Теперь создадим новый слой и зальем его синим цветом.

Создание нового слоя с заливкой синим цветом

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

Контекстное меню панели Слои

Рисунок примет следующий вид.

После создания обтравочной маски

Активируем текстовой слой и щелкнем по нему дважды левой кнопкой мыши. Появится диалоговое окно Стиль слоя. Установим параметры стилей Внутренняя тень, Наложение градиента, Обводка как показано на рисунке.

Параметры стиля Внутренняя тень

Параметры стиля Наложение градиента

Параметры стиля Обводка

Рисунок примет следующий вид.

Рисунок после использования слоев

Теперь откроем панель Анимация Окно ⇒ Анимация.

Панель покадровой анимации

Если у вас панель не та, то щелкните по левой нижней кнопке Преобразовать в покадровую анимацию. Панель примет вид показанный на рисунке.

На панели всего один кадр. Давайте создадим еще один — копию первого кадра. Для этого выделим первый кадр и нажмем на пиктограмму Создание копии выделенных кадров.

Панель Анимация

Выделите оба кадра и щелкните по пиктограмме Выбор времени отображения кадра, откроется контекстное меню. Выберите параметр равный 0, 5.

Выбор времени отображения кадра

Теперь сделаем следующее. Выделим первый кадр, перейдем на панель Слои и сделаем невидимым первый верхний слой Слой 1.

Рисунок после удаления видимости с верхнего слоя

Выделим второй кадр и восстановим видимость верхнего слоя Слой 1.

Рисунок с видимыми слоями

Теперь щелкнем по пиктограмме Выбор параметров цикла и установим флажок на пункте Постоянно.

Выбор параметров цикла

Вот почти и все. Запустим анимацию. Для этого нажмите кнопку Запуск воспроизведения анимации.

Запуск воспроизведения анимации

Делаем изображению Тримминг Изображение ⇒ Тримминг и убираем все лишнее

Сохраняем файл Файл ⇒ Сохранить для web и устройств.

Сохранение файла

Появится диалоговое окно Сохранить для web и устройств. Установливаем параметры и нажимаем Сохранить.

В итоге у нас получился вот такой анимированный текст.

Анимированный текст

Если мы немного изменим структуру панели Слои и Анимация, то можем получить исчезающий текст или допустим эффект пишущей машинки и другие интересные эффекты. У меня показан исчезающий текст.

Исчезающий текст