Уроки Adobe Illustrator от brush.spoke.ru

  Все выпуски  

Уроки Adobe Illustrator от brush.spoke.ru Flash-анимация в Adobe Illustrator


Сможешь нарисовать смайлик? Получи графический планшет! Подробнее...
"Белая..."
Пиранья. Модель. ЗБраш.
"Крекс-фекс-пекс..."
Прочитать Эффект рисования акварельными красками в Adobe Photoshop
Прочитать Анимация блика в Adobe Photoshop
Прочитать Кристаллы в Photoshop
Прочитать Металлическая кнопка в Photoshop

Информ-Лента

Конкурс!!!
Закончился прием работ на конкурс "Лучшие смайлики", всего было представлена 21 работа. У Вас еще есть время проголосовать за работы участников конкурса, каждый голос может повлиять на результат! Торопитесь.
Подробности здесь.

Рассылки Subscribe.Ru
Кино-обои от Hit-kino.ru
Другие рассылки от сайта Brush.spoke.ru

Рассылки Subscribe.Ru
Уроки Photoshop от Brush.spoke.ru

Есть вопрос или идея по поводу нового урока? Выскажите его администрации.
Задать вопрос.

Flash-анимация в Adobe Illustrator
автор: Alex

В этом редакторе, конечно нельзя реализовать все возможности Flash, но простейшую анимацию здесь можно выполнить без особого труда. Как же это здесь делается? Всё очень просто. Приступим.

Для начала создадим то, что в последствии будем анимировать. Все объекты будем создавать в одном слое. Начнём с фона. В новом документе (300х300 px) нарисуем квадрат, заполняющий лист, применим к нему градиентную заливку (рис.1).

Flash-анимация в Adobe Illustrator

рис.1

Поверх квадрата расположим не менее квадратную сетку с количеством линий (Dividers) 50 по горизонтали и 50 по вертикали. Применим к сетке белую обводку толщиной 5 pt. Мы получили белый фон с чёрными точками по всей площади. Причём их цвет переходит от 50% чёрного снизу к белому сверху. Чтобы всё сразу понять, посмотрите на рис.2. Добавим текст brush.spoke.ru с тёмно красной заливкой, выполним выравнивание по центру как относительно листа, так и в палитре Paragraph.

Flash-анимация в Adobe Illustrator

рис.2

Добавим четырёхугольники по всей облости листа (хотя на самом деле количество углов пусть определяет Ваша фантазия) и закрасим их чёрным или тёмно красным цветом (как цвет текста). Причём желательно сделать такое же количество четырёхугольников, что и количество символов в тексте "brush.spoke.ru" (включая точки).

Flash-анимация в Adobe Illustrator

рис.3

Мы создали основу, объекты, которые будем "оживлять" средствами Adobe Illustrator. По какому же принципу в AI задаётся анимация? Каждый слой при экспортировании в swf-файл будет преобразован в отдельный кадр. Следовательно нам нужно создать несколько слоёв, изменяя картинку в каждом из них. Итак, начнём! Скопируем все объекты документа (Ctrl+C) и удалим всё, кроме одной буквы текста и одного четырёхугольника. Создадим новый слой, куда вставим все объекты из буфера обмена (Ctrl+V). Удалим из этого слоя все объекты, кроме двух символов и двух прямоугольников. Таким же образом создаём новые слои и удаляем из них всё лишнее. Последовательность работы представлена на рис.4 (слева направо, сверху вниз). В последнем кадре я просто добавил подчёркивание к тексту.

Flash-анимация в Adobe Illustrator

рис.4

В палитре слоёв у нас должно получиться то же, что и на рис.5. Перед экспортирование сделайте видимыми все слои.

Flash-анимация в Adobe Illustrator

рис.5

Всё готово. Приступим к экспортированию swf-файла. Выбираем File/Export, сохраняем файл с разрешением swf, после чего появляется окно параметров экспортируемого файла (рис.6). В раскрывающемся списке "Export As:" выбираем "AI Layers to SWF Frames".

Flash-анимация в Adobe Illustrator

рис.6

После экспортирования можно открыть получившийся swf-файл (рис.7).

рис.7

Анимация, которую мы сейчас сделали, довольно проста. Этим способом можно за несколько минут сделать простенький баннер. Вот и всё. Удачи в изучении Adobe Illustrator!



В избранное