Практика создания динамических Web-узлов


Анимация в Web


Анимация в Web
Анимация в Web   Качество анимации в Web пока что оставляет желать лучшего. От всех этих мигающих огоньков, которыми украшают, как елочными игрушками, семейные страницы ко дню Благо...
Покадровое описание
Покадровое описание   Покадровое описание — это визуальное представление анимации. В нем указывается, что будет видно на экране, каким звуком это будет сопровождаться, какой текст, есл...
Формат и вид
Формат и вид Создание покадрового описания — несложная задача. Вся суть такого описания заключена в его названии. Для этого не обязательно быть выдающимся художником, достаточно иметь че...
Документ описывающей содержание
Рисунок 14.1. Документ, описывающей содержание кадра, сопровождающей звук и комментирующий текст Можно использовать и другой подход к составлению покадрового описания. На Рисунок 14.2 вы видите п...
Анимация в Fireworks MX
Анимация в Fireworks MX   Анимация в Fireworks MX не сильно отличается от детских рисунков на страницах блокнотика, которые при быстром пролистывании создают иллюзию движения, и в рез...
Инструменты анимации
Инструменты анимации В Fireworks есть множество средств для создании анимации, с помощью которых можно создать несложный ролик (Рисунок 14.3)....
Нужно всего 15 кадров для описания развития сюжета
Рисунок 14.2. Нужно всего 15 кадров для описания развития сюжета...
В Fireworks MX есть немало инструментов
Рисунок 14.3. В Fireworks MX есть немало инструментов для создания анимации Ниже описаны эти инструменты.  Панель Frames (Кадры). Ее можно открыть с помощью меню Window=> Frames, но обыч...
Работа с кадрами
Работа с кадрами Все самое главное для работы с анимацией в Fireworks MX содержится в панели Frames. В каждом кадре клипа есть некоторое содержание, которым вы так или иначе управляете....
Совет
Совет Если вы перетащите панель влево от группы панелей или на панель инструментов слева от рабочей области, появится цветное обрамление и панель при отпускании кнопки устанавливается к краю груп...
Перемещая объект в кадрах вы создаете иллюзию движения
Рисунок 14.4. Перемещая объект в кадрах, вы создаете иллюзию движения 7. Щелкните на кнопке воспроизведения или просмотрите все кадры по одному. Ваше имя как бы перемещается по экрану. Чтобы оста...
Использование слоев
Использование слоев Ваше имя приобрело подвижность и перемещается по экрану с помощью пяти кадров. Но что делать, если в вашем ролике должно быть нечто, что остается неподвижным, например некотор...
Кадры можно выбрать в панели Layers
Рисунок 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 секунды....
Используя средство Onion Skinning
Рисунок 14.9. Используя средство Onion Skinning, вы можете выбрать диапазон кадров...
Слоистость
Слоистость Обычно вы работаете с каждым кадром в отдельности и переключаетесь между ними для того, чтобы сравнить перемещение некоторого объекта относительно остальных кадров. Это приемлемо, но не...
В диалоговом окне Onion Skinning
Рисунок 14.10. В диалоговом окне Onion Skinning можно задать диапазон кадров и их прозрачность...
Замечание
Замечание При использовании средства Onion Skinning вам предлагается в меню флажок Multiple Editing. Если вы установите этот флажок, то сможете редактировать некоторый объект во всех кадрах ролик...
Циклическое воспроизведение
Циклическое воспроизведение Это совсем просто. Хотите ли вы, чтобы ваш ролик воспроизводился бесконечно? Например, у вас есть изображение вращающейся покрышки. Вполне естественно сделать так, что...
В диалоговом окне Looping можно
Рисунок 14.11. В диалоговом окне Looping можно указать, сколько раз вам нужно воспроизвести ролик...
Совет
Совет Если вы делаете кнопку ролловера с анимированным изображением, то воспроизведение нужно сделать бесконечным. Дело в том, что разные броузеры воспроизводят GIF-файлы по-разному и, установив...
Экспорт анимированного GIFфайла
Экспорт анимированного GIF-файла   После того как вы создали ролик Counterforce, вам нужно его экспортировать, чтобы его можно было воспроизвести в броузере. Если вам нужно воспроизв...
Оптимизация анимации
Оптимизация анимации Первый шаг при оптимизации анимации — это установка параметров циклического воспроизведения. После этого можно заняться размерами файла, сделав его минимальным и те...
Диалоговое окно Optimize
Рисунок 14.12. Диалоговое окно Optimize...
Совет
Совет При оптимизации часто приходится принимать решения, которые, по сути, основаны на субъективных ощущениях. Я уверен, что найдутся дизайнеры, которых удовлетворят 64 цвета в вашем ролике, но...
Экспорт анимированного GIFфайла
Экспорт анимированного GIF-файла Почти все параметры анимации, от частоты кадров до количества цветов, можно установить с помощью панелей Frames и Optimize, но в диалоговом окне Export Preview вс...
Диалоговое окно Export Preview
Рисунок 14.13. Диалоговое окно Export Preview...
Замечание
Замечание В Fireworks MX появилась новая возможность. Если вы делаете оптимизацию с помощью I панелей Frames и Optimize, щелкните на кнопке Quick Export и выберите Dreamweaver^ Export HTML. Откро...
Техника анимации в Fireworks MX
Техника анимации в Fireworks MX   После того как вы получили некоторое представление и простейшие навыки, займемся созданием анимации с помощью Fireworks MX, что позволит вам освоит...
Соединение
Соединение Соединение (tweening) — это процесс, при котором программа создает промежуточные состояния для некоторого объекта исходя из его начального и конечного состояния. Лучше всего это...
В этом окне можно задать число кадров для анимации
Рисунок 14.14. В этом окне можно задать число кадров для анимации Этот ролик можно отредактировать. Например, вы можете добавить логотип компании JCT и сделать так, чтобы маленький ботинок переме...
Воспроизведение ролика Fireworks MX во Rash MX
Воспроизведение ролика Fireworks MX во Rash MX Fireworks MX полностью интегрировано с Flash MX. Вы можете с помощью одного щелчка экспортировать векторную графику, ролики, графические кнопки из F...
В этом диалоговом окне можно экспортировать
Рисунок 14.15. В этом диалоговом окне можно экспортировать ролик во Flash MX...
Затемнение и проявление
Затемнение и проявление   Затемнение и проявление объектов совсем не сложно выполнить в Fireworks MX. Два экземпляра объекта располагаются в точности на одном и том же месте на холст...
Символы анимации в Fireworks MX
Символы анимации в Fireworks MX Символы анимации — это завершенные, предназначенные для многократного использования ролики, созданные в Fireworks MX. Некоторые дизайнеры пользуются этими...
Результат воспроизведения вашего ролика
Рисунок 14.16. Результат воспроизведения вашего ролика...
Диалоговое окно Animate
Рисунок 14.17. Диалоговое окно Animate 4. Щелкните на тексте. Все слова будут выделены как один блок. Выберите в меню Modify=>Ungroup. Теперь каждая буква в этом тексте представляет собой вект...
Управление символами анимации с помощью окна свойств
Управление символами анимации с помощью окна свойств Новинкой Fireworks MX является способность изменять многие свойства в диалоговом окне Animate, которое появляется при создании анимационного с...
С помощью инспектора свойств можно
Рисунок 14.18. С помощью инспектора свойств можно изменить свойства символов анимации Еще одна интересная черта приложения — это способность применять специальные эффекты к анимации. Например, ес...
Особый эффект в Fireworks MX
Особый эффект в Fireworks MX В Fireworks MX существует много разных эффектов, но иногда вам может не хватить даже этого. Нужно уметь выкручиваться. Вот как можно создать эффект появлени...
Совет
Совет При создании ролика для фиксирования общей точки отсчета удобно пользоваться направляющими 7. Выберите 10-й кадр. Выделите прямоугольник и удалите его. Воспроизведите ролик (Рисунок 14.19...
Интересный эффект можно создать нестандартными средствами
Рисунок 14.19. Интересный эффект можно создать нестандартными средствами...
Анимация во FreeHand
Анимация во FreeHand   Создание анимации во FreeHand несколько отличается от создания анимации в Fireworks и во Flash. Объекты, которые вы хотите анимировать, размещаются в своих со...
Анимированный текст
Анимированный текст Ниже описывается, как создать блок анимированного текста. Анимация текста применяется для создания логотипов и заголовков новостей. Способов использования анимированн...
В этом окне можно задать поведение анимации во FreeHand
Рисунок 14.20. В этом окне можно задать поведение анимации во FreeHand...
Меню Xrtas
Меню Xrtas Диалоговое окно, которое открывается после выбора пунктов меню Xtras=>Animate=> Release to Layers, предлагает на выбор несколько способов распределения объектов по слоям. В частн...
Анимация объектов
Анимация объектов Как вы уже знаете, FreeHand для создания анимации использует слои. Когда файл экспортируется в виде SWF, каждый слой FreeHand превращается в отдельный кадр. Мы создадим анимацию...
Совет
Совет Для того чтобы функции из меню Extras работали правильно все объекты должны быть сгруппированы....
Объекты расположены по кругу и готовы к созданию анимации
Рисунок 14.21. Объекты расположены по кругу и готовы к созданию анимации...
Диалоговое окно Movie Settings
Рисунок 14.22. Диалоговое окно Movie Settings позволяет вам установить параметры анимации 7. Выберите в меню File=> Export и в списке Save As выберите строку Macromedia Flash (SWF). Щелкните н...
Взаимодействие Flash MX и Freehand
Взаимодействие Flash MX и Freehand   Как вы поняли, Flash-анимацию можно создавать непосредственно во FreeHand. Это не особенно удивительно, поскольку оба эти приложения основаны на...
Анимация с помощью Dreamweaver MX
Анимация с помощью Dreamweaver MX   Анимация в Dreamweaver выполняется в основном программным путем. Используя динамическую разновидность языка HTML, называемую DHTML, вы можете изме...
Окно Timelines
Окно Timelines Окно Timelines (Рисунок 14.23) очень просто в использовании. Текущий кадр всегда находится под головкой воспроизведения, и вы можете перемещаться по ролику, перетаскивая...
Шкала времени в Dreamweaver MX
Рисунок 14.23. Шкала времени в Dreamweaver MX...
Создание анимации в Dreamweaver MX
Создание анимации в Dreamweaver MX Ниже описывается, как создать ролик, в котором изображение ботинка будет перемещаться по прямой линии на странице. Позже вы узнаете, как сделать так, чтобы изоб...
Движение по свободному пути
Движение по свободному пути Если для вас важна точность, то добавление ключевого кадра — подходящий способ создания движения по гладкой кривой. Однако иногда бывает нужно создать движение по крив...
Добавив ключевой кадр вы сможете
Рисунок 14.24. Добавив ключевой кадр, вы сможете создать криволинейное движение объекта...
Путь по свободной кривой записан
Рисунок 14.25. Путь по свободной кривой записан на шкале времени Dreamweaver MX...
Резюме
Резюме   В этой главе мы рассмотрели инструменты и средства программ Dreamweaver, Fireworks и FreeHand MX, предназначенные для создания анимации. В начале главы речь шла о создании...








Начало    


Книжный магазин