Средства поддержки анимации 2D и 3D (стр. 3 из 4)
Предварительный просмотр анимации
1. В основном окне выберите вкладку Original (Исходное изображение) или Optimized (Оптимизированное изображение).
2. Если первый кадр не выделен, то в нижней части палитры Animation (Анимация) щелкните по кнопке Select first frame (Выделить первый кадр).
рис. 5. Дублирование кадра анимации
3. Щелкните по кнопке Play (Проиграть) - см. рис 5. Анимация будет воспроизводиться чуть медленнее, чем должна. (Предварительный просмотр в программе ImageReady происходит медленнее, чем в браузере.)
4. Щелкните по кнопке Stop (Остановить), которая имеет вид квадрата, чтобы приостановить воспроизведение.
5. Сохраните файл, затем щелкните по кнопке Default Browser (Предварительный просмотр в браузере по умолчанию), расположенной на панели инструментов. Щелкните по кнопке Back (Назад), чтобы вернуться в программу ImageReady, когда просмотр будет закончен.
Анимация покачивания предметов
Далее рассмотрено, как сделать так, чтобы элемент слоя покачивался из стороны в сторону. Этот тип анимации затрагивает точки слоя и копируется во все существующие кадры. Необходимо создавать дубликат слоя для каждого этапа движения.
Создадим анимацию, в которой объект будет перемещаться в определенном направлении и обратно.
1. Откройте изображение и палитру Animation (Анимация).
2. В нижней части палитры Animation щелкните по кнопке Duplicate current frame (Дублировать текущий кадр). Теперь будет выделен дубликат кадра.
3. На палитре Animation щелкните по кнопке Tween (Промежуточные кадры), а затем поставьте переключатель Layers (Слои) в положение All Layers (Все слой), введите число кадров в поле Frames to Add (Добавить кадры), чтобы создать анимацию, и щелкните по кнопке ОК.
4. Щелкните по кадру, в котором должно начаться покачивание.
5. На палитре Layers (Слои) создайте дубликат того слоя, изображение которого будет двигаться.
6. Отредактируйте дубликат слоя (например, подкорректируйте цвет). Спрячьте исходный слой, чтобы увидеть внесенные изменения. Изменения отразятся в выделенном кадре на палитре Animation.
7. Выберите следующий кадр. Сделайте исходный слой receiver видимым и спрячьте его отредактированный дубликат.
8. Щелкните по следующему кадру. Теперь покажите отредактированный дубликат слоя и спрячьте исходный слой.
Так попеременно показывайте/прячьте слои для оставшихся кадров анимации.
Открытие анимации в формате GIF
Единственное видимое преимущество использования формата GIF - это возможность применения или редактирования настроек оптимизации файла.
1. Выполните команду File > Open (Файл > Открыть) либо нажмите комбинацию клавиш Ctrl+O.
2. Найдите название файла с расширением .gif и щелкните по нему.
3. Щелкните по кнопке Open (Открыть). Кадры анимационной последовательности при этом будут сохранены. Однако на палитре Layers (Слои) теперь станет отображаться последовательность слоев: по одному слою для каждого кадра. Отдельные элементы слоя теперь нельзя редактировать независимо от других кадров!
1. В меню палитры Optimize (Оптимизация) воспользуйтесь командой Optimize Animation (Оптимизировать анимацию).
2. В группе параметров Optimize By (Оптимизировать с помощью) установите флажок Bounding Box (Габаритная рамка), чтобы сохранить первоначальный кадр, а также только те области, которые изменяются при переходе от одного кадра к другому. В результате уменьшится размер файла, но в то же время не все программы-редакторы, воспринимающие формат GIF, смогут работать с данным файлом.
В дополнение к этим действиям или вместо них установите флажок Redundant Pixel Removal (Удалить лишние точки), чтобы удалить те точки объекта или фона, которые не меняются, то есть повторно выводятся при загрузке каждого нового кадра. Это также поможет уменьшить размер файла.
Ни одна из этих опций не изменит фактического вида анимации, все изменения происходят «за сценой».
Сохранение анимации.
Созданную анимацию можно сохранить в формате GIF либо как фильм QuickTime. Другие форматы файлов, такие как JPEG или PNG, сохранят только первый кадр изображения, не позволяя воспроизвести всю анимацию. Существует несколько способов сохранить оптимизированную анимацию для использования на Web-странице. В ImageReady достаточно выбрать команду File > Save Optimized (Файл > Сохранить оптимизированный), чтобы сохранить анимацию с установками, выбранными при предыдущем ее сохранении. Если это не первое сохранение, то диалоговое окно Save (Сохранить) не появляется и название файла и его параметры остаются теми же, что были присвоены ранее.
Выбор команды File > Save Optimized As (Файл > Сохранить как оптимизированный) позволяет изменить имя файла и выбрать другое место его хранения. Кроме того, возможен выбор измененного параметра Save As Type (Тип файла) из набора доступных значений:
· HTML and Images (HTML и рисунки) — генерирует HTML-файл и сохраняет каждый изображение в виде отдельного файла;
· Images Only (Только рисунки) — сохраняет только изображение в отдельном файле;
· HTML Only (Только HTML) — сохраняет только HTML-файл без файлов изображений.
Кроме того, ImageReady позволяет создать HTML-файл по команде Copy HTML (Копировать HTML), которая копирует код HTML в буфер обмена, а затем он может быть вставлен на Web-страницу в любом HTML-редакторе. В случае изменений исходного изображения для обновления HTML-файла выполняют команду Update HTML (Обновить HTML) с указанием имени обновляемого файла.
Чтобы сохранить анимацию в формате QuickTime, следует выбрать команду File > Export Original (Файл > Экспорт начального) и из раскрывающегося списка выбрать значение QuickTime Movie (оно будет доступно, если на компьютере установлена программа QuickTime). Указав имя файла и его место расположения, щелчком на кнопке Save (Сохранить) создаем файл выбранного типа.
Как сделать анимированный дождь.
Шаг 1. Открываем изображение.
Шаг 2. Создаем новый слой и заливаем его серым цветом. И применяем к нему фильтр Filter - Noise - Add noise и выставляем такие настройки.
Затем применяем фильтр Filter-Blur-Motion Blur.
Ставим прозрачность слоя 30%
Шаг 3. Снова создаем новый слой и заливаем его серым цветом и применяем те же фильтры как в шаге номер два.но фильтр Motion Blur уже делаем с другими настройками.
и ставим прозрачность слоя 30%
Шаг 4. Опять повторяем все тоже самое что мы проделывали в шаге 2. Фильтр Motion Blur делаем с такми настройками и ставим прозрачность слоя 30%.
Шаг5. Переходим в Image Reader делается это с помощью сочетания клавиш ( Shift+Ctrl+M)
Шаг 6. Делаем длину кадра 0,1sec.
Шаг7. Делаем два дубликата нашего кадра.
Шаг 8. Переходим на первый кадр и делаем чтобы виден был только первый слой с каплями которые мы сделали.
Шаг 9. Переходим на второй кадр и делаем чтобы виден был только второй слой с каплями которые мы сделали.
Шаг 10. Переходим на третий кадр и делаем чтобы виден был только третий слой с каплями которые мы сделали.
Всё наша анимация готова!
В отличие от большинства программ для работы с трехмерной графикой, Xara3D имеет простой и дружественный интерфейс и минимальное число настроек, благодаря чему в ней легко и быстро разберется даже новичок. И хотя программа предназначена в первую очередь для создания объемных текста и кнопок, она прекрасно подходит и для получения анимаций в форматах Animated GIF и AVI. Поэтому она с успехом используется web-дизайнерами преимущественно для создания профессиональных трехмерных текстовых логотипов.
В арсенале программы — большой набор шрифтов и текстур для оформления создаваемых объектов. Она обеспечивает полный контроль над создаваемым текстом, включая его положение, выравнивание, интерлиньяж, кернинг и пр., эффективное и гибкое управление цветом и структурой трехмерного изображения. Кроме того, изображения можно сделать матовыми или блестящими, наложить на них мягкую обрамляющую тень и т.п. Достаточно широк выбор анимационных эффектов: объекты могут вращаться, постепенно проявляться, пульсировать, наступать, качаться или исчезать. Кроме того, можно импортировать особенности анимации из одного файла и применить их к другому. Простые средства управления анимацией позволяют установить любые временные границы, например добавить разные по времени паузы, или задать свои особенности анимации для каждого объекта.
Программа поддерживает импорт двумерных графических файлов в форматах WMF, EMF, GIF и PNG, а результаты анимации можно сохранить не только в формате Animation GIF, но это при желании и в форматах AVI или SWF.
Macromedia Flash
Если быть точнее, Adobe Flash - среда для создания приложений под Flash платформу (Flash Platform), наряду с ней существуют и другие инструменты (среды):
- Adobe Flex Builder;
- Flash Development Tool (FDT) и др .
Flash-приложения создаются с помощью ActionScript - языка программирования. Если исходник не содержит в себе инструкции языка, то при компиляции, в любом случае, генерируется некоторый базовый код на ActionScript (это можно увидеть, просмотрев Flash-байткод). Далее, соответственно, существует базовый клип на сцене, унаследованный от MovieClip класса, который и начинает воспроизводиться. Среда Adobe Flash ориентирована в большей мере на дизайнеров, аниматоров, хотя и имеется возможность писать полноценный код. Flex Builder, FDT, ориентированы на программирование, и там нет специальных инструментов интерфейса для анимации, визуализации.