Анимация - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Покадровая анимация
Это анимация, полностью составленная из ключевых кадров, т. е. пользователь самостоятельно определяет, как содержимое кадра, так и его "длительность" (т. е. сколько таких статических кадров будет занимать изображение). ( временная шкала и покадровая анимация).
Достоинства:
Покадровая анимация дает, в некотором смысле, больший контроль над анимацией, и если вы опытный аниматор, вы можете выгодно ею пользоваться.
Это единственный способ организовать смену абсолютно независимых изображений - слайд шоу (например, создавая обычный баннер средствами Flash).
И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.
Недостатки:
Покадровую анимацию сложно модифицировать. Особенно, если это не дискретный набор изображений, а связанная анимация. Приходится модифицировать все кадры. На деле, у опытных Flasher-ов, такая ситуация практически не встречается.
Покадровая анимация занимает достаточно большой объем, так как приходится хранить информацию о каждом кадре.
Анимация с построением промежуточных кадров (tweened motion)
При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами. Это означает, что сначала рисуется объект, потом на другом кадре производите изменения, Flash рассчитает те кадры, которые лежат между этими двумя ключевыми кадрами. Он выполняет эту работу, и вы получаете плавную анимацию.
Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма (movie). Для качественной анимации скорость должна быть не меньше 12 (рекомендуется) кадров в секунду.
Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент). Например, если скорость вашего фильма - 12 кадров/сек., и вам нужно совершить перемещение, скажем, самолетика, из одного угла картинки - в другой за 3 секунды, то на это движение вам нужно отвести 36 кадров.
Во Flash существует два варианта построения промежуточных изображений - motion tweening (построение анимации на основе модификации символов) и shape tweening (построение анимации на основе изменения формы). Эти способы отличаются в корне. Первый используется чаще всего, т. к. с помощью него можно построить подавляющее большинство анимаций. Второй применяется в случаях, когда нужно плавное изменение формы.
Shape tweening
Например, нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетек в силуэт волка. В этих случаях используется shape tweening.
Как обычно, задаются два ключевых кадра на некотором расстоянии друг от друга. В этом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов).
После того как у вас есть два ключевых кадра, делается активным первый из них (просто переходите на него), и надо выбрать на панели Properties в списке Tweening строку Shape. Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка
В результате получится ряд промежуточных кадров, которые будут отражать переход от первой фигуры ко второй.
В этой маленькой анимации круг переходит в некое подобие полумесяца. Немного о параметрах shape tweening. Появилась пара других параметров, если выбрать shape tweening в панели Frame - Easing и Blend. Поле Label содержит метку кадра. Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если задавать отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться и наоборот, если easing будет положительным, анимация будет замедляться.
Параметр Blend, определяет алгоритм перехода: Distributive (распределяющий, общий) и Angular (угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов. Если переход не удовлетворяет пользователя, можно поэкспериментировать с этим параметром.
И, наконец, последний инструмент в анимации shape tweening - контрольные точки (shape hints, дословно - подсказки для форм). Это точки, с помощью которых можно помочь Flash правильно осуществить переход. Без них не обойтись в случае сложных форм. Пользоваться ими очень легко:
На первом ключевом кадре (с которого начинается анимация) добавляется контрольная точка (Modify->Shape->Add shape hint, Ctrl+Shift+H). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Надо прикрепить ее к той части изображения, которая двигается не так, как надо. Затем перейти на второй ключевой кадр, и прикрепить эту же точку к части, в которую должна была перейти часть на начальном кадре. Точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Так можно отличать начальные и конечные ключевые точки, так как на одном кадре могут присутствовать и те и другие.
Удалить все точки можно с помощью Modify->Shape->Remove All Frame. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Frame.
И, наконец, наиболее часто используемая техника анимации во Flash - Motion Tweening. В этом случае анимация строится на основе модификации символов, т. е. объектом анимации является символ.
Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения.
Вот какие параметры символа могут модифицироваться при использовании Motion Tweening:
Размер (как пропорционально, так и непропорционально - отдельно высоту и ширину)
Наклон
Расположение
Угол поворота
Цветовые эффекты
Можно использовать направляющие слои для задания траектории движения объекта
Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween. Универсальный способ включения/выключения motion tweening - с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:
Easing - обратное экспоненциальное ускорение, работает абсолютно так же, как и в shape tweening.
Rotate позволяет управлять вращением. Auto - Flash автоматически пытается определить количество витков. CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise - против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None.
Orient to path - поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей. (см. ниже)
В случаях, когда количество кадров основной сцены не бывает кратным количеству кадров символа, флажок Synchronize позволяет синхронизировать эти две анимации.
Направляющие слои(guide layers). Это слои, которые содержат кривую, по которой должен двигаться объект. Например, нужно анимировать самолетик, который выписывает виражи по небу. На создание этого движения может уйти много времени. При этом анимация будет состоять из маленьких отрезков motion tweening и отдельных кадров. Вместо этого можно нарисовать траекторию на специальном слое и привязать символ самолетика к ней.
Итак, если использовать траекторию, то вам нужен дополнительный слой для нее. Кстати, с одной траекторией можно использовать несколько символов.
Для того чтобы добавить направляющий слой, нужно выбрать слой, на котором находится нужный символ, и, нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим. (см. рис. 10 - Направляющий слой)
Далее, нужно нарисовать траекторию движения. Траекторией может быть любая кривая, не являющаяся областью заливки.
Можно его запретить для редактирования, чтобы было удобней работать, а в дальнейшем и вовсе сделать его невидимым.
Теперь, чтобы использовать этот слой, нужно взять нужный символ за центральную точку (маленький кружок) и перетащить ее на траекторию. Символ "зацепится" за нее, и будет видно, как он будет по ней скользить. Далее все по знакомому сценарию - ключевые кадры, включаем motion tweening... Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней то на панели Frame нужно включить флажок Orient to path.
Сложности:
- 1) Самое простое: чем больше у вас анимирующихся объектов в сцене, тем сложнее Flash обрабатывать их, и тем медленней будет воспроизведение. 2) Выгодней использовать один символ, содержащий мелкие объекты, чем много символов, отдельно для каждого объекта.
Основные достоинства Flash
Маленький размер получающихся файлов. Flash использует векторный формат изображений и сжимает растровые и звуковые файлы
Мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, при помощи которого можно создавать "интеллект" для конкретной анимации. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash CS3 (несмотря на название "ActionScript") - это полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать.
Красота. Да, да, именно! Flash имеет автоматическую поддержку anti-aliasing (антиалайсинг, сглаживание контуров с помощью смешения соседних цветов). В результате любой элемент, нарисованные во Flash, выглядят приятно для глаз.
Клипы, созданные во Flash, можно транслировать как по ТВ, так и через сеть
Недостатки:
1.Изображения, Исполненные В Технике Векторной Графики, Всегда Имеют Стилизованный, "мультяшный" Характер, ощущается их "нарисованность", хотя при известном навыке и использовании некоторых хитростей, например градиентных заливок, можно добиться потрясающих результатов.
Векторная графика масштабируется без особых ограничений и без потери качества. Однако с ростом детализации векторной картинки количество информации возрастает, и на определенном этапе векторная графика теряет свое преимущество компактности перед растровой графикой.
Еще сильнее это сказывается на анимации. Ведь алгоритмы обработки векторной графики требуют больше ресурсов компьютера и выполняются медленнее.
Похожие статьи
-
Что такое Flash? Flash (от англ. Flash - "вспышка", произносится "флэш") Flash - это технология веб-мультипликации и создания интерактивного контента от...
-
Если сравнить исходные тексты различных Web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по...
-
Для того, чтобы понять структуру и сценарий Web-документа, мы должны рассмотреть несколько Web-страниц и выявить общие элементы. Любой Web-документ...
-
Практическое решение примеров в программе Macromedia Flash (скриншоты примеров) Пример анимационная баннер сайта. Пример баннер сайта состоит 227 кадров...
-
Гипертекстовые ссылки - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Одним из самых важных элементов языка, обеспечивающий создание гиперссылок является: <A></a> Чаще всего используется такой шаблон: Произвольный...
-
У Flash задействуется все еще преимущественно в интернет-бизнесе: для привлечения посетителей владельцы развлекательных сайтов вывешивают серию за серией...
-
ВВЕДЕНИЕ - Составление анимации в web-сайте с применением Macromedia Flash-технологии
В последние годы мультимедиа стало образом жизни для многих пользователей, программы и игры сделаны более интересными и впечатляющими. В настоящее время...
-
Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Действительно,...
-
HotDog Professional 3 - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Редактор гипертекста HotDog Professional 3 создан фирмой Sausage Software. От других его выгодно отличает обилие инструментов, подпрограмм и сервисных...
-
В данной дипломной работе рассмотрены актуальные вопросы разработки и создания современного Web-сайта. При этом мною были решены следующие задачи: -...
-
Adobe Dreamweaver - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Adobe Dreamweaver - идеальная программа для веб-дизайнеров, html-кодеров и разработчиков веб-приложений. Новые функции программы дают возможности удобной...
-
HoTMetal PRO 3.0 - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Редактор гипертекста HoTMetaL был одним из первых программных продуктов подобного рода. Основная цель редактора заключалась в том, чтобы красиво...
-
Приложения - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Исходный код сайта. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">...
-
Области применения экспертных систем - Экспертные системы
Области применения систем, основанных на знаниях, могут быть сгруппированы в несколько основных классов: медицинская диагностика, контроль и управление,...
-
Анимация, Виртуальная студия - 3D моделирование
Трехмерный графика моделирование Анимация -- один из самых сложных этаов трехмерного моделирования. Для трехмерной анимации мы должны иметь широкие...
-
Как представлять непрерывную информацию?, Выводы - Информация и способы ее получения
Для представления непрерывной величины могут использоваться самые разнообразные физические процессы. В рассмотренном выше примере весы позволяют величину...
-
Растровое изображение. - Кодирование информации в компьютере
При помощи увеличительного стекла можно увидеть, что черно-белое графическое изображение, например из газеты, состоит из мельчайших точек, составляющих...
-
Скалярные переменные - Язык программирования PERL. Сфера применения
Как отмечалось, скалярная переменная может содержать единственное значение. В языке Perl имена скалярных переменных всегда начинаются со знака ($). В еле...
-
Использование языка PERL для написания CGI-cкриптов - Язык программирования PERL. Сфера применения
Как вы узнали из предыдущей главы, CGI обеспечивает узлам Web вoзмoжнoсть интерактивной работы с клиентскими программами, в качестве которых обычно...
-
Подпрограммы - Язык программирования PERL. Сфера применения
Как и все структурированные языки программирования, Perl поддерживает подпрограммы. Подпрограмма может быть определена с помощью ключевого слова sub, как...
-
Методика анимации - Работа с языком Турбо Паскаль
Эффект анимации достигается быстрым чередованием кадров постепенно изменяемого изображения. При этом нежелательно формировать каждый кадр целиком,...
-
Применение IE вне системы Web, Электронная почта - Microsoft Internet Explorer 3.0
Хотя система Web более известна своими гипертекстами, она также обеспечивает простой доступ к другим услугам Internet. Например, с помощью Web можно...
-
Оптимизатор - Разработка программного средства, позволяющего оптимизировать SQL-скрипты
Задача оптимизатора в рамках данной дипломной работы - исправлять части SQL-кода, которые могут приводить к дополнительным тратам памяти и ресурсов. На...
-
Кодирование текстовой информации - Кодирование информации в компьютере
В настоящее время большая часть пользователей при помощи компьютера обрабатывает текстовую информацию, которая состоит из символов: букв, цифр, знаков...
-
Операции с файловой структурой - Операционная система Windows
К основным операциям с файловой структурой относятся: - навигация по файловой структуре; - запуск программ и открытие документов; - создание папок; -...
-
ПОРЯДКОВЫЕ ТИПЫ, Логический тип - Типы данных в программе Турбо Паскаль
К порядковым типам относятся целые, логический, символьный, перечисляемый и тип-диапазон. Целые типы. Диапазон возможных значений целых типов зависит от...
-
Кодированием называется представление символов одного алфавита средствами другого алфавита. Алфавит содержащий два символа называется двоичным (часто их...
-
Среда объектно-ориентированного программирования Delphi Delphi - это комбинация нескольких важнейших технологий, высокопроизводительный компилятор в...
-
Сервисы и протоколы. World Wide Web (WWW) - Интернет технологии
World Wide Web (WWW, Всемирная паутина) - это наиболее популярный вид информационных услуг Internet, основанный на архитектуре клиент-сервер. В конце...
-
Технология геокешинг - Информационные технологии обучения
Информационные технологии обучения - это все технологии, использующие специальные технические средства (ЭВМ, аудио, кино, видео). Когда компьютеры стали...
-
Введение - Применение нейрокомпьтерных технологий в методах управления сложными объектами
Данная статья посвящена аналитическому обзору возможностей управления сложными объектами с помощью нейрокомпьютеров. Рассмотрено несколько областей, в...
-
Список был составлен на основе знаний, полученных в течение курса макроэкономики, а так же на основе частоты упоминаний в статьях подобной тематики. ВВП...
-
Сферы применения UGC - Пользовательский контент
В этой части мы обозначим основные сферы применения UGC (пользовательского контента) в Интернет-среде. Условно разделим их на 3 исследуемых категории:...
-
Настройка анимации, Настройка переходов - Работа в Power Point
Выделяем объект. Переходим на вкладку Анимация Добавить анимацию (см. Рисунок 14) Рисунок 14. Вкладка Анимация В раскрывающемся списке (см. Рисунок 15)...
-
Работа программы представлена на рисунке 2.3 Рис. 2.3 Кодирование и тестирование программы Программа кодировалась на языке Си++, используя библотеку Qt5x...
-
Постановка задачи на разработку программного обеспечения Для того чтобы предлагаемая схема была интегрирована в САПР, который не имеет функции интеграции...
-
В последнее время можно заметить стремительный рост значимости различных интернет-порталов, мобильных приложений, сервисов и IT-систем, существенно...
-
Заключение - Применение информационно-коммуникационных технологий в интернет-среде
Интернет и различные информационные технологии уже давно вошли в жизнь практически каждого человека. Сегодня невозможно представить жизнь общества без...
-
Российская система здравоохранения: текущее состояние, основные проблемы и барьеры для дальнейшего развития Российское здравоохранение на сегодняшний...
-
После создания диапазона критериев можно запустить расширенный фильтр и подвергнуть данные списка фильтрации. Для этого надо: Поместить указатель ячейки...
Анимация - Составление анимации в web-сайте с применением Macromedia Flash-технологии