Как сделать флеш графику
Обновлено: 08.07.2024
Приветствую Вас на первом уроке курса "ActionScript 3 Уроки для новичков".
На этом уроке я расскажу о том, что такое флеш-технология, почему так называется, какие программы входят в ее состав и для чего предназначены.
Flash-платформа
Итак, компания Adobe распространяет серию созданных ею продуктов под общим названием Flash-платформа . Все эти продукты могут работать вместе и использоваться для разработки компьютерных приложений на базе Flash , чтобы затем воспроизводиться различными системами.
Два основных приложения или программы Flash-технологии — это Flash Professional и Flash Player , но в ее состав также входят Flash Builder , Flex , Scout , Gaming SDK , Flash Media Server и Flash Lite .
Flash Professional
Flash Professional – это интегрированная среда разработки (IDE) для создания флеш-контента. Когда я говорю об изучении или использовании Flash, я имею ввиду изучение Flash Professional. Во всех последующих уроках, упоминая Flash, я буду подразумевать Flash Professional. От создания файла во Flash до полноценного программирования на ActionScript ООП — вот цель этого курса.
На сегодняшний день Adobe Flash Professional является промышленным стандартом в создании анимации, видео, игр и другого контента, воспроизводимых на различного рода устройствах от настольных компьютеров под управлением операционных систем Windows или Mac OS , до планшетов и мобильных телефонов с операционными системами Android и iOS .
Несмотря на большое количество мощных инструментов, которыми данная программа укомплектована для создания сайтов, интерактивных игр и компьютерных приложений, она довольно легко осваивается.
Первое название Flash было Future Splash . В то время это была простенькая программа для создания анимации. Компания Macromedia купила его в 1997 году и изменила имя на Flash . Adobe же, в свою очередь, выкупил продукт у Macromedia в 2006 году. И именно Flash был тогда главной причиной этой сделки.
Flash Player
Flash Player – это программа, которая используется для просмотра флеш-роликов и является как бы основным визуализатором flash-технологии. Вне зависимости от того, с помощью каких инструментов была сделана флеш-анимация или игра, Ваши пользователи будут просматривать их и взаимодействовать с ними через Flash Player. По статистике, это единственная программа, которая установлена на 99% компьютеров по всему миру. (подробная информация о Flash Player).
Последняя версия Flash Player'a выпущенная Adobe на момент записи этого видео — шестнадцатая.
Flash Builder
Flash Builder так же как и Flash Professional является средой разработки (IDE), но больше предназначен для разработчиков, а не для дизайнеров. Используя этот продукт во flash-технологии, Вы сможете создавать полноценные приложения для интернет, настольных компьютеров и мобильных телефонов, применяя Action Script 3.0 и фреймворк с открытым кодом Flex . Программа включает в себя профессиональные инструменты тестирования, такие как профайлеры, обеспечивает сетевой мониторинг, а также поддерживает возможность тестирования отдельных частей приложения.
Flex – это комплект ( SDK - softwear development kit) с открытым исходным кодом для создания приложений, публикуемых в интернет и воспроизводящихся с помощью Flash Player'a, а также для создания приложений для настольных компьютеров, мобильных устройств, работающих в среде воспроизведения AIR . Этот комплект представляет из себя библиотеку компонентов, написанную на ActionScript.
Flex позволяет разработчикам создавать визуальную разметку в формате MXML .
Если нет дополнительной информации о том, с помощью каких инструментов создавался, например, веб-сайт или приложение, то Вы не сумеете определить, в какой среде он разрабатывался: Flash Professional или Flex.
Adobe Scout
Adobe Scout — это упрощенное, но полнофункциональное средство профилирования SWF , предназначенное для разработчиков игр на Flash. Любой SWF-файл, независимо от того, предназначен он для работы в браузерах или на мобильных устройствах, можно легко профилировать, не внося изменения в код. Adobe Scout при этом быстро и эффективно обнаружит потенциальные проблемы производительности.
Adobe Gaming SDK
Набор Adobe Gaming SDK предоставляет основную коллекцию платформ, примеров кода и обучающих ресурсов, которые вместе помогают разработчикам создавать и публиковать игры на ActionScript для различных устройств.
Flash Media Server
Flash Media Server позволяет транслировать видео через Flash Player. Он работает посредником, т.е. осуществляет связь между веб-сервером и веб-браузером для проигрывания видео-роликов. Естественно, что любой флеш-фильм может быть загружен на Flash Media Server.
Flash Lite
Flash Lite – это версия Flash Player, разработанная специально для сотовых телефонов и мобильных устройств. Многие современные сотовые телефоны позволяют играть во Flash-игры, созданные при помощи flash-технологии, которые воспроизводятся с помощью Flash Lite. Некоторые сотовые телефоны используют Flash для отображения меню и других элементов интерфейса. Для того чтобы протестировать созданные Вами приложения для сотовых телефонов, Вы можете использовать специальный инструмент Device Central , который включен в установочный пакет Flash Professional.
Creative Cloud
Flash Professional распространяется, также, и как часть пакета Creative Cloud . Пакет включает в себя серию компьютерных программ, обеспечивающих дизайнеров и разработчиков инструментами по созданию веб-, видео- и печатных приложений.
Дополнительная информация
Векторная графика
Создавая изображения во Flash, Вы будете работать с векторной графикой. Традиционные графические изображения и форматы, такие как JPG и GIF, известны как растровые или bitmap. Такие изображения состоят из пикселов. Если представить себе экран монитора в виде листа чертежной бумаги-миллиметровки, то все начерченные на ней квадратики будут пикселами. Раскрашивая каждый из них определенным цветом, Вы можете создавать в итоге полноцветные изображения.
Векторные программы работают с графикой радикально другим способом. Вместо того, чтобы закрашивать квадратики-пикселы, Вы создаете векторное изображение, определяя точки, или так называемые узлы, а затем с помощью математических вычислений компютер соединяет их линиями, или путями. Линии бывают либо прямыми, либо кривыми. Внутреннее пространство, ограниченное этими линиями, может быть закрашено цветом. Масштабирование в векторной графике происходит за счет изменения расстояния между точками-узлами. В этот момент компьютер заново производит соответствующие математические вычисления, и качество изображения остается неизменным.
Большинство современных графических редакторов преимущественно ориентированы на работу с одним видом изображений: либо растровыми, либо векторными. Хотя каждый из них имеет в своем арсенале инструменты для работы с другим типом графики. Самые известные на сегодняшний день примеры таких программ это Adobe Photoshop – растровая графика, Adobe Illustrator – векторная.
Flash работает исключительно с векторной графикой, и в нем нет инструментов для работы с растром. Но Вы можете импортировать растровые изображения во флеш-фильм и анимировать их. Однако, Вы не сможете их редактировать. Чтобы это сделать, изображения необходимо сначала конвертировать в векторный формат в другом редакторе. Единственное же, что Вам будет доступно во Flash – это их масштабирование. Тем не менее, качество изображения все равно пострадает, если Вы произведете слишком радикальные изменения.
Для любого инструмента есть свой набор параметров (OPTIONS), двойной щелчок на конкретную опцию позволит модифицировать параметры. Например, для прямоугольника меняется степень округления углов.
Применение пера позволит создать любую фигуру их линий. Изменить форму линии можно инструментом SUBSELECT (белая стрелка справа)
Заливка контура, заливка фона
Левое ведерко дает заливку контура, правое - заливку фона (PAINT BACKET), соответственно, на панели COLOR верхний цвет (с пиктограммой карандаша) при двойном нажатии меняется палитра цветов для контура, нижний - заливка фона.
Изменение толщины контура - на панели STROKE - STROKE – выбрать толщину.
Выделение фона - щелчок по фону, выделение контура - щелчок по контуру, выделение фона и контура - двойной щелчок по фону.
Урок1 -2 Модификация контура и заливки (смотри файл Приложение2.swf).
Для 1 -ой фигуры выберите синий цвет, толщину 3.75, контур кружочками (STROKE - STROKE). Выделите всю фигуру (можно просто ее обвести черной стрелкой – инструмент ARROW). В опциях для этого инструмента выберите изменитель формы SCALE и вращение ROTATE.
Для 2 -ой фигуры выберите линейную заливку (панель STROKE - FILL -LINER GRADIENT). Добейтесь заливки по образцу. Добавление нового цвета - щелчок на образце цветов Edit gradient range (появится новый треугольничек, удаление - потянуть треугольник вниз). Протягивая треугольник влево-вправо, вы меняете количество выбранных цветов на линейке.
Для 3 -ой фигуры выберите круговую градиентную заливку (панель STROKE - FILL -RADIAL GRADIENT). Добейтесь заливки по образцу по цветовой гамме. Но этого не достаточно: для изменения формы заливки выберите инструмент заливки фона (PAINT BACKET) и в его опциях - Transform FILL. Щелкните по выделенной заливке - появятся управляющие кнопки изменителя формы заливки (прямоугольник и две окружности); воспользуйтесь ими, предварительно сместив центр заливки.
Урок1 -3 Опции заливки по степени замкнутости контура модификация фигур по узловым точкам, изменение кривизны (смотри файл Приложение3.swf).
Создайте карандашом две фигуры. Залейте их. Заливка имеет опции: замкнутой фигуры и далее по возрастанию степени разомкнутости.
Шапочка создана пером.
Для изменения формы инструментом SUBSELECT (белая стрелка справа) потяните за узлы или измените кривизну за касательную к узловой точке. Щелчок пером на узле удаляет узел, на свободном месте - добавляет.
Урок 1 -4 Карандаш, кисть, модификация фигур по узловым точкам (повторение), изменение формы (смотри файл Приложение4.swf).
Для создания первых мультиков достаточно знать 3 инструмента : карандаш, кисть заливка.
Карандаш имеет 3 опции: рисование прямыми линиями (Straighten), скругленные линии (Smooth), точно повторяющие движение мышки (Ink).
Трапецию создайте для тренировки пером, скопируйте ее, затем потяните к центру инструментом SUBSELECT (белая стрелка справа) - получится необходимая фигура.
Для создания бабочки можно нарисовать форму карандашом, затем выбрать инструмент ARRROWS (черная стрелка), поместить курсор рядом с контуром (появится дуга) и поменять форму. Причем, не важно, когда вы зальете контур: до изменения формы или после.
Кисть имеет опции:
Изображение сверху заливки и контура; под контуром; под заливкой и контуром;
размер и форму. Помните, что все нарисованное одним цветом, сливается в одну фигуру. И это хорошо.
Урок 1 -5 Линия, сетка, разбиение фигур (смотри файл Приложение5.swf).
Файлы Урок 1 -5, Урок 1 -5 -1. Для 1 -ой фигуры выберите синий цвет, толщину 3.75, контур кружочками (STROKE - STROKE).
Для этого урока может понабиться для удобства сетка на экране VIEW - GRID - SHOW GRID.
Линией создайте треугольник по образцу, залейте его градиентной линейной заливкой, разрежьте треугольник линиями по образцу, перетащите мышкой раздельные части фона и сложите из нее фигуру по образцу.
Урок 1 -5 -1. Задание подобно уроку Урок 1 -4. Дополнительно используется инструмент Кисть. Обратите внимание на опции вида кисти и размера кисти. Разрезание круга проводится карандашом. Для карандаша используйте опцию SMOOTH (скругление).
Урок 1 -6 Растровая заливка (смотри файл Приложение6.swf).
Этот урок назовем “Кот в мешке”.
Карандашом нарисуйте мешок. Вставьте рисунок FILE - IMPORT -.
Уменьшите рисунок, выделите его, выберите заливку фона. Появится новая заливка, которую всегда можно будет выбрать как заливку в панели Fill - Bitmap. Воспользуйтесь ею. Осталось перевернуть заливку: опция для заливки фона Transform.
Урок1 -7 Растровая заливка. Применение. Слои (смотри файл Приложение7.swf).
Этот урок назовем “Вид из окна”.
Создайте 2 окна. Создайте растровую заливку (FILE - IMPORT - , выделить картинку, выбрать инструмент заливки фона). Удалите картинку на экране за ненадобностью. Выберите эту растровую заливку с параметром LOCK (Замок), щелкните ведерком в предполагаемый центр, т.е. между окон, а затем в каждое окно.
Скорректируйте заливку: выберите масштаб 25%, смещая центр и увеличивая размер заливки, добейтесь нужного результата.
Урок 2 -1. Инструмент ТЕКСТ, разбиение на части, трансформация (смотри файл Приложение8.swf).
В окне CHERACTER установить шрифты (FONT) размер 24р жирность, цвет синий, межбуквенные интервалы 7.
Урок 2 -2. Пример оформления текста (смотри файл Приложение9.swf ) [2].
- Создать текстовый объект.
- Применить к нему операцию Разбиения текста (MODIFY - BREAK APART).
- Изменить цвет текста каждой буквы.
- На отдельном слое создать дугу (создать круг, выделить щелчком и удалить заливку или окружность с запретом заливки), резинкой подтереть нижнюю половину окружности. Для этого слоя включить режим недоступности для редактирования (замок). Необходимо, чтобы был включен режим прилипания (магнит).
- Переместить буквы на дугу.
Каждую букву повернуть перпендикулярно касательной к дуге.
Урок 2 -3. Анимация изменения формы (смотри файл Приложение10.swf).
Объекты должны быть простой формы, без контура, разгруппированы, не являться рисунком, т.е. к рисунку должна быть применена операция разбиения (MODIFY - BREAK APART).
1) Создать объект - круг без контура. Для удаления контура понадобится резинка (третья сверху).
На временном интервале 35 создайте ключевой кадр (F6 или INSERT -KEY FRAME)
Удалите круг, на его месте создайте прямоугольник другого цвета.
- Выделите все кадры (щелчок на промежуточном кадре и SHIFT последний кадр).
- FRAME - FRAME - TWEEN – SHAPE.
- Проиграйте (ENTER).
2) Уменьшите по времени временной интервал (потяните влево последний ключ).
3) Передвиньте вправо прямоугольник в последнем кадре. Проиграйте.
Анимация изменения формы. Трансформация текста (смотри файл Приложение11.swf).
- Аналогично уроку 2 -3. Но предварительно к каждому тексту должна быть применена операция разбиения (MODIFY - BREAK APART).
Анимация изменения формы. Покадровые изменения. (смотри файл Приложение12.swf).
1) Создайте кистью человечка.
Сделайте глазки и ротик верхней резинкой.
Создавайте ключевые кадры клавишей F6 через каждые 10 секунд. И на каждом этом ключевом кадре увеличивайте в размере человечка, потянув за правый верхний угол.
Когда вы сочтете нужным, начинайте поднимать ручку, лучше, если выделите часть руки и повернете ее.
Затем, точно также опустите руку. Здесь разумно скопировать всю руку с какого - то кадра.
2) Анимация изменения формы.
А теперь аналогично уроку 2 -3 выделите все кадры и выберите режим SHAPE. Проиграйте и посмотрите на это безобразие! Сделаем выводы: неизменяемую часть нужно помещать на отдельном слое.
Анимация изменения формы. Покадровые изменения (смотри файл Приложение13.swf).
- Создайте рыбку, двигающую плавниками по образцу.
Рекомендации: фон, туловище, плавники должны быть на отдельных слоях. Каждый слой нужно разумно переименовать.
-Дополнительно создайте фон морского дна, поместите на задний план.
Следующие два мультфильма (см. файлы Приложение14.swf, Приложение15.swf) - примеры работ учащихся Городилова Андрея и Васильевой Кати.
Урок3. Анимация движения
- Объектами анимации могут быть: рисунок, символы, сгруппированные объекты (но ни как не заливки и контуры).
- В одном блоке анимации должен двигаться только один объект.
- Во всех ключевых кадрах блока должен содержаться один и тот же объект.
- В ключевых кадрах должны изменяться только следующие параметры: положение на рабочем поле, угол поворота, сила сдвига, масштаб, параметры изображения.
- Создать объект “Мячик” с радиальной заливкой со смещением центра заливки.
- Сгруппировать объект.
- Переместить его по середине слева.
- Создать следующий кадр и переместить на нем мячик по центру слева.
- Установить курсор на первом кадре и для него выбрать параметры FRAME - MOTION (движение), ROTATE (вращение по часовой стрелке CW) и TIMES (количество оборотов).
- Для эффекта падения с ускорением установить параметры силы сдвига EASING на первом кадре -100, на последнем кадре +100.
Далее для создания эффекта отскакивающего мячика от пола о правую стену создать кадр, фактически повторяющий предыдущий и повторить все с пункта 4. Но движение будет против часовой стрелки (CCW) с замедлением (EASING на первом кадре +100, на последнем кадре -100).
Просмотрите результат (выбрать первый кадр и ENTER ). Для создания файла - просмотра нажать CONTROLE - TEST MOVIE
Вы увидите, что экран несколько шире. Поэтому на отдельном слое создайте две стены, от которой шарики и будут отскакивать. Обязательно защитите этот слой от изменения.
Продолжите анимацию отскакивающего мячика от потолка и от левой стены.
Урок3 -2. “Мячик катится по полянке”. Движение по заданному пути (смотри файл Приложение17.swf).
-Создать объект “Мячик”, сгруппировать его (можно скопировать его с урока 3-1).
-Создать слой - путь (нажать на значок GUIDE).
-Создать путь движения как контур (инструмент карандаш), обязательно защитите его от изменения (замок).
-В первом кадре перенести мячик к началу пути, совместив центры.
-INSERT - CREATE - MOTION TWEEN (Можно было как в уроке 3 -1, но в этом случае необходимо заботиться о совмещении центра объекта к началу пути на первом кадре и концу пути на следующем кадре; малейшая неточность - и движение будет по прямой).
-Перенести мячик на конец пути, центрируя его.
-Добавьте слой с фоном.
-Проиграйте.
Урок3 -3.“Гонки”.Движение по заданному пути. Ориентация по пути. Движение нескольких объектов по пути. Создание символов (смотри файл Приложение18.swf).
1)Создание символов.
Создайте символ INSERT - NEW SYMBOL. Выберите тип символа “графика” (GRAPHIC) Назовите символ “Машина”.
Создайте объект “Машинка”.
2)Перейдите в режим экрана (Screen).
Создадим слой “Машина красная”, откроем библиотеку (WINDOW LIBRARY) , перетащим на сцену наш символ “Машина” на начало пути.
3)Далее, как в уроке 3 -2 создайте анимацию движения по пути.
4)Чтобы движение было естественным, на первом кадре расположите объект перпендикулярно касательной в начале пути, на последнем кадре - концу пути (Давайте передвинем не на конец пути, а раньше, чтобы создать эффект обгона нашей машины.
Для ориентации движения по пути выберите параметры FRAME - OPTHION - ORIENT TO PATH. Проиграйте.
5)Приступим к анимации движения по этому же пути другой машинки.
-Создадим слой “Машина желтая”.
-На временном кадре 5 для слоя “Машина желтая” создадим кадр F6.
-Перетащим в этом кадре на текущий слой наш символ “Машина” на начало пути. Перекрасим заливкой машинку в желтый цвет, предварительно разбив рисунок на части (MODIF - BREAK APART).
-Сгруппируем машинку. Делаем движение по пути как обычно (INSERT - CREATE MOTION TWEEN, FRAME - OPTHION - ORIENT TO PATH, перенос объекта на конец пути, путь под замком).
Урок 4. Создание маски
Маска - это выделение видимой части анимации. Маска должна быть с заливкой.
Урок 4 -1. Шарик в подзорной трубе с использованием маскирования (смотри файл Приложение19.swf)
-Создать символ (INSERT NEW SYMBOL) под именем ШАР с типом MOTION.
-Создать объект ШАРИК на слое Шарик.
-Создать в этом символе движение по заданному пути (создать слой пути - запретить его -изменение - шарик сгруппировать—переместить его на начала пути - INSERT CREAT MOTION TWEEN – выбрать временной интервал - создать ключевой кадр F6 - переместить шарик на конец пути в последнем кадре).
-Перейти на сцену.
-На слой Шарик переместить символ ШАР.
-Создать новый слой под именем Маска перед слоем Шарик и на нем – контур маски с любой заливкой - в форме круга.
-Преобразовать слой в маску (правая клавиша - MASK).
-Можно подложить вниз прямоугольный слой на весь экран и переместить его под слой Шарик. - Обратите внимание, все слои, привязанные к маске, защищены от записи (с замком) и смещены относительно маски вправо.
Урок 4 -2. Эффекты символов: цвет, яркость (смотри файл Приложение20.swf) [2].
-Создать рисунок чайника, преобразовать его в символ (INSERT CONVERT TO SYMBOL).
-На первом кадре выбрать FRAME –MOTION.
-На 20 кадре создать ключевой кадр (F6).
-Выделить чайник и для него выбрать цвет EFFECT - TINT - красный цвет.
-На 40 кадре создать ключевой кадр (F6).
-Выделить чайник и для него выбрать яркость EFFECT - BRIGHTNESS -50%.
-Проиграйте.
Урок 4 -3. Эффекты символов: прозрачность (смотри файл Приложение21.swf ) [2].
-Создать рисунок Рыбки на слое РЫБКА.
-На первом кадре выбрать FRAME –MOTION.
-На 30 кадре создать ключевой кадр (F6).
-На первом кадре выделенную рыбку преобразовать его в символ (INSERT CONVERT TO SYMBOL) с эффектом прозрачности слоя (EFFECT -ALPFA) - 100 %.
-На последнем кадре – с эффектом прозрачности слоя 0%.
-Создать рисунок Лягушки на слое ЛЯГУШКА и повторить все действия как и с рыбкой с той лишь разницей, что эффект прозрачности для 1 слоя должен быть 0%, а для последнего - 100%.
-Проиграйте.
Урок 4 -4. Симуляция движение автомобиля за счет движения фона с использованием маски (смотри файл Приложение22.swf [2]).
-Создать фон: звездное небо, дорога на слое ФОН.
- Открыть файл урока 3 -3, создать слой МАШИНА и перенести на него символ МАШИНА из библиотеки урока 3 -3. Защитите оба слоя от изменения.
Создайте слой ДОМА.
Скопируйте их и присоедините без стыка!
Выделите оба изображения и преобразуйте в символ под именем ДОМА.
Создайте анимацию движения, сдвинув на первом кадре дома влево, а на последнем - вправо.
Создайте маскируемый слой размером в половину зданий.
-Импортируйте картинку, и если под рукой нет карты земного шара, подойдет любое изображение. Позаботьтесь о состыковке двух картинок, совмещенные, они должны создавать впечатление единой картинки.
Далее как в уроке 4 -4.
Для достижения впечатления объема создайте верхний слой под названием Сфера такого же размера, что и маска. В окне MIXER выберите радиальную заливку с 4 компонентами.
Для 1 -го 250, 250, 250, 60% (R,G,B,Alfa). 2 -го 115, 115, 115, 50%, 3 -го 61, 61, 61, 50%, 4 -го 0, 0, 0, 100%.
Сместите центр заливки.
Проиграйте фильм. Чем меньше масштаб изображения, тем быстрее будет вращение.
Хотите узнать, как создавать контурную анимацию в Adobe Animate? В текущей статье я бы хотела поделиться с вами опытом по анимации векторного персонажа. Вы узнаете, как сделать реалистичный поворот головы и развивающиеся волосы. Уверена, мой опыт будет полезен вам.
Цель данной статьи показать примерный алгоритм действий, который я выполнила, чтобы создать такой ролик. Не будем углубляться в подробности каждого шага, иначе статья будет просто необъятной. К тому же главные 2 инструмента, которыми я пользовалась, были — Стандартная анимация движения (Motion Tween) и Анимация формы (Shape tween). Сам процесс достаточно длительный и требующий внимания к деталям.
Подготовка материалов
1 шаг:
Сначала я подобрала 2 изображения с примерно похожими девушками в разных состояниях.
2 шаг:
С помощью инструмента Перо обрисовала первое изображение. Все линии оставила в одном слое. Получилось следующее:
Далее нужно было определить какие части мы будем анимировать. Я решила, что это будет анимация развивающихся волос и анимация глаз.
Анимация волос
3 шаг:
Начнем с анимации волос. Нам нужно создать иллюзию развивающихся волос. Для этого нужно воспользоваться анимацией формы.
Каждую линию, которую мы хотим анимировать распределим на отдельный слой и создадим анимацию формы, используя несколько ключевых кадров.
Чтобы анимация была зацикленная, нужно первое и последнее состояние линии сделать одним и тем же. После данных манипуляций, шкала времени у меня выглядела таким образом:
Нужно помнить, что Анимация формы (Shape tween) достаточно коварная функция. Если вы неправильно передвинете точки, то вся линии перекрутится, но не даст нужного изгиба.
Поэтому нужно стараться передвигать именно те ключевые точки, которые вы создавали при прорисовке линии, и изгибать эти линии не сразу под большим углом а постепенно, через несколько ключевых кадров. Тоже касается и перемещения точек. В результате получилось следующее:
Анимация глаз
4 шаг.
Теперь разберемся с анимацией глаз. Я разбила все линии на вот такие слои:
При моргании у глаз будут двигаться левое и правое верхние веки. Дуги верхних век трансформируем с помощью Анимации формы.
Опустим их, а затем поднимем через некоторую паузу.
Но при этом возникнет проблема — дуги верхних век будут перекрывать зрачки. мы должны подстроить форму зрачка под каждое новое положение века. Это можно было сделать двумя способами:
- Создать для каждого слоя зрачка маску и заанимировать каждую маску синхронно процессу опускания века.
- Разбить каждый слой со зрачками на ключевые кадры и поработать ластиком — на кадром слое при закрытии глаза стирать все больше и больше и наоборот, при открытии стирать все меньше и меньше.
Я воспользовалась вторым вариантом, как вы видите на иллюстрации выше. Кстати сделать не ключевой кадр ключевым очень просто — для этого нужно поставить курсор на не ключевой кадр, а затем нажать F6.
Отличие ключевого кадра от не ключевого в том, что содержимое и его изменения, если таковое произойдет, будет повторяться во всех последующих не ключевых кадрах до тех пор пока не появится новый ключевой кадр. В результате вот, что получилось:
Анимация поворота головы
5 шаг.
Теперь приступим к самому главному — повороту головы.
Для начала мы должны в том же самом файле, где находится обрисованная девушка отступить несколько кадров, необходимых для поворота и вставить в качестве шаблона конечного состояния фото со вторым изображением девушки.
Теперь самое главное, нужно определить, какие линии первого состояния мы будем преобразовывать в линии второго состояния…
Я постаралась изобразить некоторые из таких преобразований в следующей иллюстрации.
Слева и справа одним цветом обозначены линии, которые будут трансформировать друг из друга:
Здесь обозначены не все линии.
Все линии волос справа будут преобразовываться из первого состояния во второе так как есть — по порядку.
Линии плеч и платья так же преобразуются как есть, кроме линии груди — они будут дорисовывать в отдельном слое — просто постепенно проявляться в каждом новом кадре.
Тоже касается и линии лба — она будет дорисована в отдельном слое ближе к концу поворота головы. Посложнее дела обстоят с волосами слева.
Только крайняя левая линия будет перетекать в крайнюю левую второго состояния — все остальные новые постепенно прорисовываться, а лишние старые стираться. Все эти преобразования будут совершаться с помощью Анимации формы.
Глаза же будем преобразовывать Анимацией движения. Для этого каждый глаз нужно сделать отдельным символом (так как анимация движения действует только для символов) и подстроить каждый глаз под новое состояние с помощью стандартных функций преобразования.
Временная шкала в результате этих преобразований у меня выглядит следующим образом:
Macromedia Flash MX 2004 предоставляет несколько способов создания анимационных последовательностей:
• анимационные эффекты — программа сама создает последовательность кадров, имитирующую тот или иной эффект применительно к некоторому объекту;
• покадровая анимация — пользователь создает каждый кадр будущей анимации;
• автоматическая tweened-анимация, или анимация трансформации, — пользователь задает начальный и конечный кадр, а программа сама создает промежуточные кадры на основе программной интерполяции.
Анимационные эффекты
Flash MX 2004 включает предварительно подготовленные анимационные эффекты (timeline-эффекты), которые позволяют создавать сложные анимации, используя минимальное количество действий. Вы можете применять функцию Timeline Еffects к следующим объектам:
• графические объекты, включая формы, сгруппированные объекты и графические символы;
Когда вы добавляете анимационные эффекты к объекту, Flash автоматически создает соответствующий слой и все трансформации движения и формы, необходимые для данного эффекта, реализуются в этом слое. Новый слой автоматически получает то же имя, что и эффект.
Рис. 1. Выделенный текстовый объект
В результате появится одноименная панель (рис. 2), предоставляющая возможность настройки целого ряда параметров эффекта.
Рис. 2. Панель Explode
Наличие окна предпросмотра позволяет анализировать разные вариации эффектов, не покидая панели Explode. После того как вы выберете необходимые параметры, нажмите кнопку ОК и получите примерно такую анимацию.
Аналогично эффекты можно применить к растровому изображению. Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File => Import => Import to stage (рис. 3) и применим эффект Вlur по команде Insert => Timeline Effects => Effects => Blur. В результате получим следующий ролик.
Рис. 3. Растровое изображение, импортированное на сцену
Для того чтобы отредактировать анимационный эффект, выделите на сцене объект, ассоциированный с эффектом, и в появившемся окне Properties нажмите кнопку Edit (рис. 4) — в результате появится панель Blur.
Рис. 4. Кнопка Edit находится внизу на панели Properties
В панели Blur можно вновь поменять параметры эффекта и сохранить новые настройки (рис. 5).
Рис. 5. Панель Blur позволяет поменять настройки эффекта
Рассмотрим простейший пример — листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси.
Рис. 6. Первый ключевой кадр анимации
Нарисуем кленовый листочек, например такой, как показано на рис. 6, — соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр — это кадр, в котором происходит помещение содержимого или его изменение.
Рис. 7. Второй кадр создадим перетаскиванием и трансформацией первого
Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe. В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Arrow) и повернем, используя команду Modify => Transform => Free Transform (рис. 7).
Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение (рис. 8).
Рис. 8. Последний кадр анимации
Обратите внимание на панель Properties (рис. 8) — в левой ее части указывается тип объекта. В каждом кадре листок является объектом типа Shape (форма), о других типах объектов будет рассказано чуть позже.
Для того чтобы экспортировать фильм в виде SEF-файла (родной формат Macromedia для Flash-фильмов), выполним команду File => Export => Export Movie. В результате получим следующий фильм (исходник к данному фильму находится в прилагаемом файле leave1.fla). Просмотреть получившийся фильм можно не покидая программы Flash по команде Control => Test Movie. Причем для того, чтобы просмотреть, какой объем занимают отдельные кадры фильма, следует выполнить команду . В результате мы увидим, что каждый из шести кадров занимает около 600 Кбайт (рис. 9). Таким образом, объем всего фильма составляет 3686 байт.
Рис. 9. Просмотр фильма в режиме Bandwidth Profiler
Для того чтобы оценить, много это или мало, рассмотрим, как аналогичный фильм можно сделать с помощью автоматической анимации, или анимации трансформации движения.
Автоматическая анимация
Рис. 10. Объект автоматически превращается в графический символ
Рис. 11. Каждый новый символ становится частью библиотеки
Если выполнить команду Window => Library, то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1. Для того чтобы присвоить символу другое имя, достаточно дважды щелкнуть по названию и заменить его на желаемое. После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации (пусть это будет 15-й кадр) и вставим ключевой кадр (по команде Insert Keyframe). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси (по команде Modify Transform=>Free Transform), как в предыдущем примере. Как видно из рис. 12, все кадры между двумя ключевыми окрасились в голубой цвет и от первого ключевого кадра к последнему протянулась стрелка, что указывает на создание анимации Motion Tween.
Рис. 12. Стрелка на голубом фоне свидетельствует о создании анимации Motion Tween
Выполнив команду Control => Test Movie, получим информацию, представленную на рис. 13.
Рис. 13. Просмотр фильма в режиме Bandwidth Profiler
Несмотря на то что в этом примере у нас 15, а не шесть кадров, как в предыдущем, и анимация получилась более плавная, размер результирующего файла оказывается меньше — всего 900 байт. Как видно из диаграммы (рис. 13), информация об объекте хранится только в первом кадре, а в каждом новом кадре необходимо запоминать лишь новые положения листка. На это уходит в среднем всего по 20 байт.
Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify => Transform => Flip Horizontal. В результате получим следующий фильм.
Теперь рассмотрим пример, когда листочек приближается к зрителю. Для этого в конечном кадре вместо зеркального отображения (Flip Horizontal) будем увеличивать размер листка. Для того чтобы не возникало ощущения замедления движения при приближении объекта к зрителю, скорость его движения необходимо увеличивать. Для того чтобы добиться этого эффекта, необходимо щелкнуть по первому кадру и обратиться к разделу Ease в панели Properties. Положительные значения параметра Ease приводят к замедлению движения, а отрицательные — к ускорению. Выберем максимальное ускорение объекта.
Рис. 14. Выберем максимальное ускорение объекта Ease = –100
Для этого выставим значение параметра Ease равным –100 (рис. 14). В результате получим фильм. Отметим, что первый кадр можно поместить и за сценой, тогда мы получим фильм, в котором листок будет влетать в кадр и двигаться навстречу зрителю. Можно моделировать вращение листа вокруг смещенного центра симметрии. Надеюсь, читатель сам сможет поэкспериментировать, усложняя модификацию конечного кадра и изменяя таким образом характер движения листа.
Движение по заданной траектории
Flash позволяет задать движение объекта вдоль заданной траектории. Для того чтобы задать эту траекторию, выполните команду Insert => Timeline => Motion Guide.
В результате над текущим слоем появится специальный слой, который по умолчанию будет иметь имя Guide Layer 1.
Рис. 15. Пример задания траектории движения
Теперь перейдем в первый кадр (щелкнем по нему мышью) и в появившейся панели Properties установим флажок Snap (задает режим привязки к траектории движения) — рис. 16.
Рис. 16. Параметр Snap задает режим привязки к траектории движения
Рис. 17. Объект как бы прилипает к траектории движения своим центром
Перейдите на последний кадр и аналогично привяжите листок к конечной точке траектории движения. Для придания фильму объемности добавим трансформацию Flip Horizontal, — в результате получим фильм.
При движении листа вдоль траектории нам не важно, как он будет повернут в направлении движения. Но если мы аналогичным образом задаем траекторию полета птицы, то на некоторых участках кривой окажется, что птица летит хвостом вперед.
Очевидно, что если мы хотим анимировать полет самолета или птицы, то нам нужно, чтобы они все время двигались носом вперед. Во Flash такой характер движения задать очень просто (рис. 18).
Рис. 18. Если поставить флажок Orient to Path, птица будет лететь головой вперед
Необходимо поставить флажок Orient to Path, и движение птицы изменится на вполне привычное (исходник к данному ролику — полет птицы.fla).
Рис. 19. Добавление одноцветного фона
Если вы хотите добавить одноцветный фон, щелкните мышью по фону и в появившейся панели Properties (рис. 19) в поле Background выберите необходимый цвет фона.
Если мы хотим добавить фоновый рисунок, нам понадобится для этого отдельный слой. В принципе, программа Flash предлагает возможность создания системы слоев, сходной с теми, что используются в классической анимации, при которой фон и различные подвижные объекты рисуются каждый на своем слое прозрачной пленки.
Рис. 20. На новом слое создадим неподвижный фоновый объект
Подредактируем объекты фильма (для того чтобы птица кружила на фоне солнца, изменим траекторию ее полета и поменяем соотношения размеров солнца и птицы) и получим следующий ролик.
Рис. 21. Для анимации облака создадим отдельный слой
Теперь добавим к нашей анимации подвижные объекты, например облако. Для облака создадим новый слой и на нем зададим анимацию трансформации движения. Для того чтобы облако влетало в сцену, расположим его, как показано на рис. 21. В результате получим следующий фильм (исходник к данному фильму находится в прилагаемом файле полет птицы-с облаком.fla).
Читайте также: