Анимация в Web

Анимация в Web   Качество анимации в Web пока что оставляет желать лучшего. От всех этих мигающих огоньков, которыми украшают, как елочными игрушками, семейные страницы ко дню Благо...

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

Формат и вид Создание покадрового описания — несложная задача. Вся суть такого описания заключена в его названии. Для этого не обязательно быть выдающимся художником, достаточно иметь че...

Рисунок 14.1. Документ, описывающей содержание кадра, сопровождающей звук и комментирующий текст Можно использовать и другой подход к составлению покадрового описания. На Рисунок 14.2 вы видите п...

Анимация в Fireworks MX   Анимация в Fireworks MX не сильно отличается от детских рисунков на страницах блокнотика, которые при быстром пролистывании создают иллюзию движения, и в рез...

Инструменты анимации В Fireworks есть множество средств для создании анимации, с помощью которых можно создать несложный ролик (Рисунок 14.3)....

Рисунок 14.2. Нужно всего 15 кадров для описания развития сюжета...

Рисунок 14.3. В Fireworks MX есть немало инструментов для создания анимации Ниже описаны эти инструменты.  Панель Frames (Кадры). Ее можно открыть с помощью меню Window=> Frames, но обыч...

Работа с кадрами Все самое главное для работы с анимацией в Fireworks MX содержится в панели Frames. В каждом кадре клипа есть некоторое содержание, которым вы так или иначе управляете....

Совет Если вы перетащите панель влево от группы панелей или на панель инструментов слева от рабочей области, появится цветное обрамление и панель при отпускании кнопки устанавливается к краю груп...

Рисунок 14.4. Перемещая объект в кадрах, вы создаете иллюзию движения 7. Щелкните на кнопке воспроизведения или просмотрите все кадры по одному. Ваше имя как бы перемещается по экрану. Чтобы оста...

Использование слоев Ваше имя приобрело подвижность и перемещается по экрану с помощью пяти кадров. Но что делать, если в вашем ролике должно быть нечто, что остается неподвижным, например некотор...

Рисунок 14.5. Кадры можно выбрать в панели Layers...

Движение объекта Теперь, когда вы знаете, как взаимодействуют слои и кадры при создании анимации, попробуем соединить в ролик два последних кадра из клипа Counterforce (см. Рисунок 14.2)...

Подготовка объекта к движению Прицел винтовки и текст должны находиться в разных слоях. Кроме того, слово COUNTERFORCE заставит вас повозиться, чтобы оно было похоже на свой образец на Рисунок 14...

Создание анимации Теперь, когда основные элементы для анимации подготовлены, можно приступить к созданию ролика из 11 кадров. На протяжении этих кадров изображение должно фокусироваться, а буквы...

Рисунок 14.6. Элементы для анимации подготовлены 2. Откройте панель Frames и выберите 1-й кадр. Выберите в меню Duplicate Frame. Откроется диалоговое окно. Число кадров задайте равным 10 и выбер...

Совет Есть способ сделать статические объекты общими для нескольких кадров. Создайте новый слой и скопируйте объекты в этот слой с помощью обычной операции копирования и вставки. Дважды щелкните...

Рисунок 14.7. Так выглядит законченная анимация...

Управление анимацией Очень важно иметь возможность управлять анимацией, иначе вы не сможете изменить ее скорость или, например, заставить ее воспроизводиться непрерывно. В Fireworks MX д...

Элементы воспроизведения Когда вы создавали ролик Counterforce, вам приходилось просматривать результаты своей работы, чтобы оценить полученный эффект. Для того чтобы понять, что хорошо, а что не...

Рисунок 14.8. Элементы управления воспроизведением расположены в главном окне и на панели Frames Элементы воспроизведения, расположенные в окне документа, позволяют не только воспроизводить ролик...

Управление задержкой В отличие от Flash MX, Fireworks MX не воспроизводит ролик на постоянной скорости, заданной для всех кадров. Например, во Flash время показа одного кадра равно 1/12 секунды....

Рисунок 14.9. Используя средство Onion Skinning, вы можете выбрать диапазон кадров...

Слоистость Обычно вы работаете с каждым кадром в отдельности и переключаетесь между ними для того, чтобы сравнить перемещение некоторого объекта относительно остальных кадров. Это приемлемо, но не...

Рисунок 14.10. В диалоговом окне Onion Skinning можно задать диапазон кадров и их прозрачность...

Замечание При использовании средства Onion Skinning вам предлагается в меню флажок Multiple Editing. Если вы установите этот флажок, то сможете редактировать некоторый объект во всех кадрах ролик...

Циклическое воспроизведение Это совсем просто. Хотите ли вы, чтобы ваш ролик воспроизводился бесконечно? Например, у вас есть изображение вращающейся покрышки. Вполне естественно сделать так, что...

Рисунок 14.11. В диалоговом окне Looping можно указать, сколько раз вам нужно воспроизвести ролик...

Совет Если вы делаете кнопку ролловера с анимированным изображением, то воспроизведение нужно сделать бесконечным. Дело в том, что разные броузеры воспроизводят GIF-файлы по-разному и, установив...

Экспорт анимированного GIF-файла   После того как вы создали ролик Counterforce, вам нужно его экспортировать, чтобы его можно было воспроизвести в броузере. Если вам нужно воспроизв...

Оптимизация анимации Первый шаг при оптимизации анимации — это установка параметров циклического воспроизведения. После этого можно заняться размерами файла, сделав его минимальным и те...

Рисунок 14.12. Диалоговое окно Optimize...

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

Экспорт анимированного GIF-файла Почти все параметры анимации, от частоты кадров до количества цветов, можно установить с помощью панелей Frames и Optimize, но в диалоговом окне Export Preview вс...

Рисунок 14.13. Диалоговое окно Export Preview...

Замечание В Fireworks MX появилась новая возможность. Если вы делаете оптимизацию с помощью I панелей Frames и Optimize, щелкните на кнопке Quick Export и выберите Dreamweaver^ Export HTML. Откро...

Техника анимации в Fireworks MX   После того как вы получили некоторое представление и простейшие навыки, займемся созданием анимации с помощью Fireworks MX, что позволит вам освоит...

Соединение Соединение (tweening) — это процесс, при котором программа создает промежуточные состояния для некоторого объекта исходя из его начального и конечного состояния. Лучше всего это...

Рисунок 14.14. В этом окне можно задать число кадров для анимации Этот ролик можно отредактировать. Например, вы можете добавить логотип компании JCT и сделать так, чтобы маленький ботинок переме...

Воспроизведение ролика Fireworks MX во Rash MX Fireworks MX полностью интегрировано с Flash MX. Вы можете с помощью одного щелчка экспортировать векторную графику, ролики, графические кнопки из F...

Рисунок 14.15. В этом диалоговом окне можно экспортировать ролик во Flash MX...

Затемнение и проявление   Затемнение и проявление объектов совсем не сложно выполнить в Fireworks MX. Два экземпляра объекта располагаются в точности на одном и том же месте на холст...

Символы анимации в Fireworks MX Символы анимации — это завершенные, предназначенные для многократного использования ролики, созданные в Fireworks MX. Некоторые дизайнеры пользуются этими...

Рисунок 14.16. Результат воспроизведения вашего ролика...

Рисунок 14.17. Диалоговое окно Animate 4. Щелкните на тексте. Все слова будут выделены как один блок. Выберите в меню Modify=>Ungroup. Теперь каждая буква в этом тексте представляет собой вект...

Управление символами анимации с помощью окна свойств Новинкой Fireworks MX является способность изменять многие свойства в диалоговом окне Animate, которое появляется при создании анимационного с...

Рисунок 14.18. С помощью инспектора свойств можно изменить свойства символов анимации Еще одна интересная черта приложения — это способность применять специальные эффекты к анимации. Например, ес...

Особый эффект в Fireworks MX В Fireworks MX существует много разных эффектов, но иногда вам может не хватить даже этого. Нужно уметь выкручиваться. Вот как можно создать эффект появлени...

Совет При создании ролика для фиксирования общей точки отсчета удобно пользоваться направляющими 7. Выберите 10-й кадр. Выделите прямоугольник и удалите его. Воспроизведите ролик (Рисунок 14.19...

Рисунок 14.19. Интересный эффект можно создать нестандартными средствами...

Анимация во FreeHand   Создание анимации во FreeHand несколько отличается от создания анимации в Fireworks и во Flash. Объекты, которые вы хотите анимировать, размещаются в своих со...

Анимированный текст Ниже описывается, как создать блок анимированного текста. Анимация текста применяется для создания логотипов и заголовков новостей. Способов использования анимированн...

Рисунок 14.20. В этом окне можно задать поведение анимации во FreeHand...

Меню Xrtas Диалоговое окно, которое открывается после выбора пунктов меню Xtras=>Animate=> Release to Layers, предлагает на выбор несколько способов распределения объектов по слоям. В частн...

Анимация объектов Как вы уже знаете, FreeHand для создания анимации использует слои. Когда файл экспортируется в виде SWF, каждый слой FreeHand превращается в отдельный кадр. Мы создадим анимацию...

Совет Для того чтобы функции из меню Extras работали правильно все объекты должны быть сгруппированы....

Рисунок 14.21. Объекты расположены по кругу и готовы к созданию анимации...

Рисунок 14.22. Диалоговое окно Movie Settings позволяет вам установить параметры анимации 7. Выберите в меню File=> Export и в списке Save As выберите строку Macromedia Flash (SWF). Щелкните н...

Взаимодействие Flash MX и Freehand   Как вы поняли, Flash-анимацию можно создавать непосредственно во FreeHand. Это не особенно удивительно, поскольку оба эти приложения основаны на...

Анимация с помощью Dreamweaver MX   Анимация в Dreamweaver выполняется в основном программным путем. Используя динамическую разновидность языка HTML, называемую DHTML, вы можете изме...

Окно Timelines Окно Timelines (Рисунок 14.23) очень просто в использовании. Текущий кадр всегда находится под головкой воспроизведения, и вы можете перемещаться по ролику, перетаскивая...

Рисунок 14.23. Шкала времени в Dreamweaver MX...

Создание анимации в Dreamweaver MX Ниже описывается, как создать ролик, в котором изображение ботинка будет перемещаться по прямой линии на странице. Позже вы узнаете, как сделать так, чтобы изоб...

Движение по свободному пути Если для вас важна точность, то добавление ключевого кадра — подходящий способ создания движения по гладкой кривой. Однако иногда бывает нужно создать движение по крив...

Рисунок 14.24. Добавив ключевой кадр, вы сможете создать криволинейное движение объекта...

Рисунок 14.25. Путь по свободной кривой записан на шкале времени Dreamweaver MX...

Резюме   В этой главе мы рассмотрели инструменты и средства программ Dreamweaver, Fireworks и FreeHand MX, предназначенные для создания анимации. В начале главы речь шла о создании...