Лекция 10. Программа ImageReady

Компьютерная графика. Лекция 10
1
Компьютерная графика
Авторы курса лекций:
Доросинский Леонид Григорьевич
д.т.н., профессор кафедры автоматизированных систем управления
Казанцева Любовь Николаевна
ст. преподаватель кафедры автоматизированных систем управления
Компьютерная графика. Лекция 10
Екатеринбург 2007
2
Программа ImageReady
Модуль 1
Компьютерная графика. Лекция 10
3
Лекция 10



Динамические подстановки
Карты изображений
Анимация
Компьютерная графика. Лекция 10
4
Цели изучения




Изучить способы создания динамических подстановок
различных типов.
Изучить типы подстановок и их использование.
Научиться создавать анимацию различных видов.
Изучить параметры анимации.
Компьютерная графика. Лекция 10
5
Содержание

Динамические подстановки






Состояния динамических подстановок
Создание подстановок с использованием стилей
Создание динамических подстановок из компоновки слоев
Создание удаленных динамических подстановок
Карты изображений
Анимация



Палитра Animation
Форматы GIF и Macromedia Flash
Создание анимации
Компьютерная графика. Лекция 10
6
Динамические подстановки



Динамическая подстановка (rollover) относится к типу
Web-графики, изменяющей свой вид, когда пользователь
позиционирует на ней курсор или щелкает кнопкой мыши.
Для создания динамической подстановки требуются не
только изображения, но и код JavaScript и HTML.
Этот код автоматически формируется вместе с
динамической подстановкой в ImageReady CS.
Компьютерная графика. Лекция 10
7
Состояние динамических подстановок





Normal (Обычное) – состояние до или после активации динамической
подстановки.
Over (Позиционировано) – состояние при позиционировании курсора
над областью вырезки или карты изображения без щелчка.
Down (Нажато) – состояние при выполнении щелчка в области
вырезки или карты изображения. Это состояние остается до тех пор,
пока пользователь не отпустит кнопку мыши.
Click (Щелчок) – состояние при выполнении щелчка в области
вырезки или карты изображения. Это состояние остается до тех пор,
пока пользователь не переместит курсор за пределы области действия
динамической подстановки.
Out (За пределами) – состояние при перемещении курсора за пределы
области вырезки или карты. Если данное состояние не определено,
изображение автоматически возвращается в состояние Normal.
Компьютерная графика. Лекция 10
8
Состояние динамических подстановок




Up (Отжато) – состояние при отпускании кнопки мыши, когда курсор
находится в области вырезки или карты. Если данное состояние не
определено, изображение автоматически возвращается в состояние
Over.
Custom (Специальное) – состояние, устанавливаемое при появлении
заранее предусмотренного события. Данное состояние позволяет
сформировать собственное событие в коде JavaScript и ввести его в
код HTML.
Selected (Выбрано) – состояние при выполнении щелчка в области
вырезки или карты изображения до тех пор пока не будет выбрано
другое состояние динамической подстановки.
None (Отсутствует) – состояние, устанавливаемое в том случае, когда
требуется сохранить текущее состояние для последующего
применения.
Компьютерная графика. Лекция 10
9
Создание подстановок с использованием
стилей
Компьютерная графика. Лекция 10
10
Создание динамических подстановок из
компоновки слоев
Компьютерная графика. Лекция 10
11
Создание удаленных динамических
подстановок
Компьютерная графика. Лекция 10
12
Инструменты для создания карт изображений




Rectangle Image Map – прямоугольная карта
изображения;
Circle Image Map – круглая карта изображения;
Polygon Image Map – многоугольная карта
изображения;
Image Map Select – выделение карты изображения.
Компьютерная графика. Лекция 10
13
Палитра Image Map









Name – имя выбранной карты
URL (унифицированный указатель ресурсов) – ссылка на ресурс
Target (место назначения) – окно браузера, в котором будет
открываться ресурс (_blank – новое, _self – то же)
Alt (Дублирующий текст) – текст на месте отсутствующих
изображений в окне браузера
X и Y – координаты левого верхнего края карты
Width (Ширина) и Height (Высота) – ширина и высота карты (кроме
карт круглой формы)
Radius (Радиус) – радиус для карт круглой формы;
Shape (Форма) – форма области, занимаемой картой;
Quality (Качество) – точность расположения вершин многоугольника
для карт, созданных из слоев.
Компьютерная графика. Лекция 10
14
Карта изображения из слоя
Компьютерная графика. Лекция 10
15
Палитра Animation







Frame Delay – время кадровой задержки
Looping – число повторений воспроизводимой анимации
First Frame – выбор первого кадра
Previous Frame –выбор предыдущего кадра
Tween – автоматическое формирование промежуточных
кадров между указанными ключевыми кадрами
Duplicate Current Frame – дублировать текущий кадр
Delete Selected Frame – удалить выбранный кадр.
Компьютерная графика. Лекция 10
16
Формат GIF



Формат GIF относится к тем немногим форматам файлов
Web-графики, которые поддерживают анимацию.
Для воспроизведения анимационных последовательностей
изображений формата GIF в Web-браузерах не требуется
подключаемых модулей. Это означает, что такие анимации
могут просматриваться во всех браузерах.
Код HTML для ввода анимации практически ничем не
отличается от кода HTML, необходимого для ввода
неподвижных изображений формата GIF.
Компьютерная графика. Лекция 10
17
Формат GIF Macromedia Flash




Любую анимацию, созданную в ImageReady CS, можно
экспортировать в формате файлов Macromedia Flash (swf).
Такой вид экспорта удобен для анимации, содержащей
фотографии и фотографические эффекты, а также
векторную графику и текст.
В формате SWF информация о векторной и растровой
графике сохраняется отдельно. Это означает, что
продолжительность анимации может быть увеличена без
ухудшения ее качества.
Кроме того, формат SWF идеально подходит для создания
анимации с фотографическим содержимым, поскольку
информация о растровых изображениях сохраняется в нем
отдельно, а размер файла остается при этом небольшим.
Компьютерная графика. Лекция 10
18
Создание анимации






В палитре Animation присутствует до создания анимации только один
кадр.
Чтобы создать другой ключевой кадр нужно щелкнуть на кнопке
Duplicate Current Frame (Дублировать текущий кадр), расположенной
в нижней части палитры Animation.
Ключевые кадры должны отличаться друг от друга. Можно изменить
видимость каких-либо слоев, изменить прозрачность, добавить
эффекты, переместить содержимое слоя.
Чтобы заполнить промежуток между ключевыми кадрами, нужно
щелкнуть на кнопке Tween (Заполнение промежутков), расположенной
в нижней части палитры Animation.
После этого открывается окно Tween, где в поле Frames To Add
(Заполняемые кадры) нужно ввести необходимое количество
промежуточных кадров.
Затем анимацию нужно оптимизировать и сохранить в формате GIF.
Компьютерная графика. Лекция 10
19
Создание анимации с использованием
видимости слоев
Компьютерная графика. Лекция 10
20
Выводы


Нужно обратить внимание на динамические
подстановки из компоновок. Они создаются не
изменением видимости слоев, а уже из созданных
ранее компоновок.
Необходимо усвоить:


назначение компоновок
различие между вырезками и картами изображений.
Компьютерная графика. Лекция 10
21
Информационное обеспечение лекции





Стейплз Таня. Практикум по Adobe Photoshop CS и ImageReady CS
для Web-дизайна: пер. с англ. / Таня Стейплз, Вайнман Линда М.:
Издательский дом «Вильямс», 2005. 832 с.
Гренлайт Д. www.макет / Д. Гренлайт; пер. с англ. И.С. Кармалито.
М.: ООО «Издательство Астрель»; ООО «Издательство АСТ», 2003.
192 с.: ил.
Лебедев С.В. Web-дизайн: учебное пособие для создания публикаций
для Интернет / С.В. Лебедев. М.: Издательский дом «Альянс-пресс»,
2004. 736 с.
Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова / Д. Кирсанов.
СПб.: Символ-Плюс, 1999. 376 с.
Нильсен Я. Веб-дизайн: книга Якоба Нильсена: пер. с англ. / Я.
Нильсен. СПб.: Символ- Плюс, 2000. 512 с.
Компьютерная графика. Лекция 10
22