  Обращение к читателю

Предлагаем Вашему вниманию обучающее пособие по работе с нашими анимационными программами.

Что здесь есть и для кого всё это написано?

 Книга содержит обзор основных понятий, имеющих отношение к Web-графике, подробное объяснение функциональных возможностей трёх программ (Active GIF Creator (AGIF), Animate Me!  и Easy Banner Creator), идеи создания GIF- анимации и примеры их практического воплощения. Если вы хотите с “нуля” освоить приемы создания графических образов, то эта книга поможет вам выбрать инструмент для своего творчества. Особое внимание уделено описанию работы в AGIF, поскольку он многофункционален и универсален (позволяет рисовать и редактировать параметры каждого анимационного кадра, а также манипулировать кадрами). Поэтому новичкам без опыта мы предлагаем интуитивно понятные и более простые программы, такие как, Animate Me!  и Easy Banner Creator. Для более подкованных подойдёт наш бестселлер - Active GIF Creator. Реально ли  с помощью этой книги научиться создавать веб-изображения? Вполне, если имеете интерес к предмету изучения, сможете осилить хотя бы часть данной информации и поиграете с функционалом в бесплатно скаченной демо-версии любой из этих программ. Удачи Вам и немного терпения. Мы будем рады, если Вам понравится процесс создания анимации, и будем просто счастливы, если для этого Вы выберите наши программы.

1.   Введение.

Умение создавать графику для Web важно как для серьезного разработчика, так и для любителя. Квалификация в области Web-графики является гарантией того, что ваши страницы будут популярны и достойны регулярных посещений.

   Сложные инструментальные средства признанных лидеров требуют определенных трудовых и временных затрат, которые далеко не всегда оправдывают себя в виду простоты решаемой пользователем задач. Кроме того, их стоимость довольно высока. Поэтому мы – компания Image Tools Group - предлагаем вашему вниманию линейку собственных продуктов категории Shareware. Все программы работают на Windows XP/Vista/7/8.

   Создание целого пакета графических программ началось с программы Active GIF Creator в 2000 году. Переписка с пользователями помогала появлению и реализации новых идей на тему анимации и другой Web-графики. Работа над Active GIF Creator велась параллельно с работой над другими программами. Совершенствование наших программ направлено на расширение возможностей и удобство в работе, как для начинающих, так и для опытных пользователей.

Программы для создания GIF- анимации:

Active GIF Creator (russian edition) - мощный, компактный и доступный инструмент для создания, оптимизации и защиты GIF-анимаций, 2D и 3D кнопок, баннеров для Web-страниц и презентаций.

Animate Me! (russian edition) - c ее помощью любой, даже совсем не разбирающийся в графике человек, сможет создать сложную и интересную анимацию на основе списка эффектов (движущиеся объекты, частицы, бегущий текст, изменяющийся цвет, взрыв, волна, встряска, появление).

Easy Banner Creator - создание статических и анимированных баннеров любых размеров.

MakeGIF - визуальный командный процессор: создание GIF- файлов из командной строки в пакетном режиме.

Easy 3D Objects - создание 3D анимаций и иллюстраций.

Надеемся, что рассмотренные здесь теоретические и практические вопросы работы с этими программами помогут вам в решении творческих задач.

2. Основные понятия.

Компьютерная графика – специальная область информатики, занимающаяся методами и средствами создания и обработки изображений с помощью программно-аппаратных вычислительных средств.

Она разделяется на растровую (bitmap) и векторную (vector) графику. Отдельным предметом считается трехмерная (3D) графика.

 Векторная графика оперирует отрезками и кривыми. В векторной графике изображение строится на основе векторов, описанных математическими формулами. Рисунок в векторной графике состоит из объектов, которые можно свободно перемещать, менять их размеры, цвет независимо от остальных объектов. При этом потери качества не происходит. Изображения такого типа не зависят от разрешения. Широкое применение векторная графика нашла в графических шрифтах.

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

Пиксель – это аббревиатура от английских слов picture element (элемент изображения).

Каждый пиксель имеет определенное расположение и цвет.

Точечное изображение содержит фиксированное количество пикселей и характеризуется двумя основными параметрами: графическим разрешением и глубиной цвета.

Разрешение изображения или графическое разрешение определяет плотность пикселей в изображении и измеряется в пикселях на дюйм (ppi). Чем выше разрешение, тем больше пикселей содержится в изображении и тем меньше размер этих пикселей. Благодаря использованию большего числа пикселей, высокое разрешение позволяет получать в изображении более мелкие детали и более тонкие цветовые переходы, но при этом увеличивается объем файла.

Выбор оптимального разрешения для изображения зависит от того, каким образом вы собираетесь его отображать или тиражировать. Так, использование слишком низкого разрешения для книжной или журнальной иллюстрации приведет к резкому падению качества печатных изображений, вызванному чрезмерным увеличением размера пикселей. С другой стороны, выбор неоправданно высокого разрешения приведет к увеличению объема файла, что скажется на скорости его обработки, печати или передачи по сети.

   Заметим, что разрешение изображения и экранное разрешение – это разные вещи. Число экранных пикселей на единицу длины определяет разрешающую способность монитора; она зависит от размера экрана и от заданной размерности экранной матрицы.

Размер пикселя варьируется в зависимости от выбранного экранного разрешения, разрешения изображения и масштаба отображения. Поэтому растровые изображения могут терять детали или же становиться "рваными" при масштабировании.

Глубина цвета или битовое разрешение определяет число бит (как правило, от 1 до 48), используемых для кодирования цвета каждого пикселя. Чем больше глубина цвета, тем точнее представлены цвета в оцифрованном изображении, но тем больше объем файла с изображением. Например, пиксель с битовой глубиной, равной единице, имеет лишь два цвета: черный и белый. Пиксель с битовой глубиной в 8 единиц имеет 256 возможных цветовых значений. Пиксель с битовой глубиной в 24 единицы имеет 16,7 млн возможных значений. Считается, что такие изображения достаточно точно передают краски окружающего мира.

3D графика – построение объемных моделей объектов в виртуальном пространстве. Как правило, в ней сочетаются векторный и растровый способы формирования изображения.

2.1. Особенности Web- графики.

В Web- узле графика обычно применяется при дизайне, а также для идентификации и навигации.

Фоновые изображения загружаются на заднем плане страницы и определяют ее стиль.

Заголовки идентифицируют отдельную страницу.

Логотип идентифицирует родительский узел.

Навигационные кнопки осуществляют переход на другую страницу узла.

Маркеры, разделители используются для текста и других элементов страницы.

Картинки или фотографии выделяют или иллюстрируют на странице какое-либо содержимое в тексте.

Анимационные изображения, баннеры используются для оживления страниц или с целью рекламы. В настоящее время существует несколько технологий создания анимации для Web: анимационный (animated) GIF, Flash, Java и JavaScript. Анимационный GIF является самым простым в создании и практически любой современный браузер может его показать.

Карты ссылок – единое графическое изображение, части которого можно связать с отдельной Web- страницей.

Для графики Web- страниц необходимо применять цвета модели RGB.

RGB – цветовое пространство, основанное на трех цветах: Red (Красный), Green (Зеленый), Blue (Синий); в которой на каждый пиксель отводится 24 бита, что дает возможность закодировать 16,7 млн оттенков. RGB – не единственная цветовая модель, но в мониторах используется именно она. Чем выше интенсивность цвета, тем ближе он к белому цвету, а чем меньше – тем ближе он к черному цвету.

Для Web- графики стандартными считаются форматы JPEG, GIF и PNG.

JPEG (Joint Photographic Experts Group – Объединенная группа экспертов фотографии) - стандартный формат графических файлов для опубликования цветных фото в Web.

·         При разработке метода сжатия JPEG были учтены особенности органов цветового восприятия человека: чувствительность к изменению освещенности, а не собственно цвета. Увеличить сжатие можно путем отброса доброй половины информации об оттенке и насыщенности цвета. При этом наиболее важный для глаза компонент яркости остается нетронутым. После такой операции объем информации уменьшается на треть. Кроме того в JPEG реализован алгоритм сжатия "с потерями”, при котором информация о цвете каждого пикселя заменяется информацией о характере изменения цветов в пределах заданной области. Изображение преобразуется в мозаику из квадратов (обычно 8 х 8 пикселей). Внутри каждого такого квадрата распределение цветов описывается специальной математической функцией, коэффициенты которой и хранятся в JPEG-файле. Только после всех этих преобразований наступает очередь обычного сжатия (уже без потерь). Оптимальный коэффициент сжатия – возможность оптимизации изображения.

·         В формате JPEG можно хранить полноцветные изображения с глубиной цвета 24 бит/пиксель.

·         Существует разновидность формата JPEG, именуемая “прогрессивный JPEG”, который отличается от обычного тем, что при выводе на экран изображение появляется почти сразу, но плохого качества, а по мере загрузки качество улучшается.

GIF (Graphics Interchange Format – Формат для обмена графической информацией) создан фирмой CompuServe в 1987 году. На сегодня GIF остается одним из самых распространенных графических форматов, и его поддерживают все существующие графические браузеры. Фактически, понятие Web-графики большей частью сводится к технике создания GIF-изображений. Существует две версии формата: GIF87a и GIF89a. Прозрачность и анимация поддерживаются только в GIF89a, поэтому большинство программ создают файлы именно в этом варианте.

·         Информация об изображении в GIF-файле записывается построчно, то есть представляет собой массив описаний строк высотой в один пиксель.

·         Алгоритм LZW (по именам математиков Лемпеля, Зива и Велча) “без потерь”, используемый в формате GIF, подсчитывает идущие подряд по горизонтали точки одинакового цвета и сохраняет ссылку на цвет и количество точек, а не ссылки на все точки. Для узоров алгоритм сжатия не будет эффективным, т.к. меняется каждая точка.

·         Цветовая палитра фиксирована и ограничена 256 цветами (8 бит на пиксель). Информация о цвете точки изображения в GIF задается индексом в таблице цветов или палитры, хранящейся отдельно от графических данных. Частично решить проблему ограниченности палитры иногда помогает диффузия цветов - смешивание пикселей для получения переходного оттенка. Однако диффузия вносит в файл изображения дополнительную порцию беспорядка, что влияет на его сжимаемость. В результате смешивания на изображении могут появиться пятна и полосы, из-за чего оно станет искаженным и нерезким: разработчикам Web-страниц следует с осторожностью пользоваться GIF- изображениями. Компании Netscape и Microsoft пользуются "безопасной" палитрой, состоящей из 216 цветов, которая используется как в системах Macintosh, так и Window.

·         В GIF-файле определены два различных варианта хранения данных. В одном из них все строки изображения записываются подряд от начальной до конечной (построчное хранение - NonInterlaced). В другом варианте строки сохраняются в определенном порядке (хранение с чередованием строк - Interlaced): сначала на экран выводится каждая восьмая строка изображения, затем – четвертая и т.д., то есть полностью изображение показывается в четыре прохода.

·         Поддержка прозрачности. Это свойство формата GIF очень широко используется в Интернете, если возникает необходимость, чтобы фон Web-страницы просвечивал сквозь некоторые части изображения; это позволяет создавать изображения произвольной формы. Прозрачность обеспечивается за счет дополнительного Alpha-канала, сохраняемого вместе с файлом. Альфа-канал - однобитный, поэтому можно задавать только области абсолютной прозрачности или абсолютной непрозрачности. Обратите внимание на то, что прозрачность несовместима с диффузией цветов. Ели фон будет состоять из перемешанных близких по цвету пикселей, то сделать его полностью прозрачным не удастся, поскольку прозрачным может быть только один цвет. Для создания плавных переходов используется сглаживание внешних контуров изображения. В таких случаях при использовании прозрачного цвета сглаженные цвета образуют ореол или мусор вокруг изображения. Единственным способом уменьшения проявления этого эффекта является назначение прозрачности цвету, близкому к цвету фона, на котором будет использоваться GIF, и проведение сглаживания на этом же фоне. Особая разновидность прозрачных GIF-файлов - это файлы-распорки размером 1x1 пиксель.

·         Поддержка анимации.

PNG (Portable Network Graphics – Переносимая сетевая графика) – формат, основанный на вариации алгоритма сжатия без потерь качества.

·         В отличии от GIF, PNG сжимает растровые изображения и по горизонтали, и по вертикали, что обеспечивает более высокую степень сжатия.

·         Кроме того, он поддерживает цветные графические изображения с глубиной цвета до 48-бит включительно.

·         PNG реализует более эффективный алгоритм чередования. Первый проход занимает в PNG не одну восьмую исходного файла, как в GIF, а одну шестьдесят четвертую, при этом распознаваемость картинки лучше.

·         Каждый пиксель PNG-файла может иметь любую градацию прозрачности.

·         PNG позволяет хранить в файле исходный коэффициент яркости того дисплея, на котором изображение было создано.

Рассмотрим другие графические форматы, применяемые в наших программах.

TIFF (Tagged Image File Format) – растровый формат. Является наиболее гибким и удобным форматом для обмена графической информацией. Не имеет ограничений на размер растра, позволяет задавать изображения практически в любом цветовом пространстве и с любым методом компрессии. Хранит данные в структурированном виде, что позволяет приложениям осуществлять быстрый доступ к различным фрагментам большого изображения.

PCX (PC Paintbrush format from ZSoft Corporation) - графический формат для цветных изображений, используемый в большинстве графических редакторов, начиная с Paintbrush.

PSD - Adobe PhotoShop формат. Позволяет хранить информацию о слоях, каналах, масках, контурах при цветовом охвате до 48 бит.

TGA (TarGA Image File) - растровый формат от компании Truevision; используется для работы с видео и фотоизображениями.

BMP (Windows Bitmap) - стандартный формат графических файлов от Microsoft, предусматривающий 4, 8 и 24 бита на точку.

ICO (Windows  Icon) - используется для представления программ и других файлов.

WMF (Windows MetaFile format) - Microsoft векторный графический формат, более компактный и переносимый, чем BMP.

ANI (Animated Cursor) - формат анимированных курсоров для Microsoft Wimdows.

AVI (Audio Video Interleaved ) - формат видео для Windows.

2.2. GIF-анимация.

Достаточно интересным видом компьютерной графики является GIF-анимация. Формирование анимированных GIF-изображений основано на одном из старейших принципов анимации - быстрой смене картин, слегка отличающихся друг от друга. Как правило, все анимированные GIF-файлы содержат ряд отдельных кадров, при последовательном просмотре которых создается иллюзия движения. В отличии от обычного фильма, где длительность анимации определяется скоростью воспроизведения, для каждого кадра GIF-анимации может быть задана своя длительность показа на экране, а для всей анимации  может быть указано количество повторений. Кроме того изображения, содержащиеся в кадрах GIF-анимации, не обязательно должны быть одного размера, и вы можете расположить их по своему усмотрению.

Чтобы лучше понять, как работает GIF-анимация, следует представлять структуру формата GIF89a. Файл GIF89a состоит из блоков, расположенных в определенной последовательности:

Управляющие блоки: заголовок, описание логического экрана, управление графическими расширениями, признак конца - определяют, как будут обрабатываться изображения;

Блоки изображения: изображение, текст, описание палитры - содержат данные для самого изображения;

Блоки управления расширением: комментарии, прикладные расширения - никак не влияют на изображение, но могут обрабатываться прикладными программами по их усмотрению. Среди подобных блоков особо следует выделить прикладной блок Netscape Loop - он присутствует практически в каждой анимации. Если браузер видит этот блок, он проигрывает анимацию столько, сколько в нем указано раз, или бесконечно.

      Общая схема следования этих блоков приблизительно такова:

§         Заголовок - GIF87a или GIF89a - определяет формат файла;

§         Описание логического экрана (задается размер экрана, на котором будет проигрываться анимация);

§         Описание глобальной палитры (необязательно, но крайне желательно);

§         Произвольное количество блоков изображения (в том числе текстовых), или пар блоков: управление графическими расширениями - изображение. Блок управления графическим расширением может содержать в себе указание на локальную палитру, расположение на логическом экране, задержку и способ удаления изображения, и оказывает влияние только на следующий непосредственно за ним блок изображения;

§         Завершитель (признак конца).

              Блоки управления расширением могут располагаться где угодно, кроме как:

§         До описания глобальной палитры (если оно есть) или до описания логического экрана.

§         Между блоком управления и соответствующим ему блоком изображения.

§         После признака конца.

Блок расширения Netscape Loop должен следовать непосредственно за глобальной  палитрой.

GIF-анимация имеет большое значение в деле сайтостроительства. К несомненным ее достоинствам можно отнести:

- небольшой размер файла за счет оптимизации;

- не требует специальных программ для просмотра;

- для проигрывания не требует постоянной связи с сервером;

- простой способ помещения на Web-страницу.

После создания анимационного GIF-файла, его необходимо протестировать в разных браузерах. Имея в виду проблемы совместимости программ просмотра, при создании анимации рекомендуется соблюдать следующие правила:

- желательно не использовать локальные палитры: в некоторых случаях это приводит к неправильному отображению цветов;

- прозрачный цвет следует определять глобально; локальный прозрачный цвет не поддерживается;

- не всеми браузерами поддерживается замена изображения предыдущим;

- если изображение не умещается на логическом экране, то это может привести к аварийному завершению работы браузера;

- в некоторых версиях браузеров кадры не проигрываются быстрее, чем с задержкой 0,34 секунды.

Процесс создания анимации на базе GIF-файлов состоит из следующих этапов:
- подготовка отдельных кадров;
- сбор отдельных кадров в единый файл;
- задание параметров анимации;

- оптимизация  GIF-файла;

- сохранение анимации.

Заметим, что чрезмерное использование анимации отвлекает от чтения страницы и, кроме того, увеличивает время ее загрузки.

3. Создаем анимацию с помощью Active GIF Creator.

Active GIF Creator  (AGIF ) –  наиболее развитая программа для создания, редактирования, оптимизации и защиты GIF- анимаций и другой графики для Web-страниц и презентаций.

Встроенный графический редактор, редактор анимационных сценариев, создатель 2D и 3D кнопок, редактор карты ссылок, улучшенный диалог выбора графических файлов, пакетная обработка файлов, управление палитрой, большой набор инструментов для редактирования образов, коллекции образов, специальные эффекты, импорт / экспорт для различных графических форматов - это всего лишь часть свойств, доступных в Active GIF Creator.

3.1. Элементы главного окна Active GIF Creator (AGIF).

Компоненты главного окна программы:

- Меню  является стандартным элементом для всех Windows-программ, содержащим группы команд управления программой:

Файл – в этом меню находятся основные команды по созданию, открытию и сохранению файлов, а также команды по оптимизации GIF и восстановлению ранее оптимизированных образов. Кроме того, здесь присутствуют команды настройки, определяющие рабочие параметры, начальные параметры для нового GIF-файла и вставляемых образов, установки комментария и экспорта, параметры для Улучшенного диалога выбора файла картинки;    

Правка – редактирование: отмена и возврат действий во встроенном Графическом редакторе, копирование и вставка выделенных прямоугольных фрагментов, выделение образа целиком;

Вид – управление внешним видом Главного окна программы: переключение видимости Панели инструментов, Панели атрибутов, Статусной панели, а также – настройка Панели инструментов;

Глобальные - редактирование глобальных атрибутов GIF-файла, таких как:

·         размер логического экрана. Логический экран может ограничивать просмотр отдельного образа, но всё будет сохранено в GIF-файле в полном размере, так что в следующий раз вы сможете переопределить размер логического экрана и просмотреть скрытые части образа.
Включенный флажок Экран Авто на Панели атрибутов означает, что размер логического экрана будет перевычисляться после следующих операций над образами: добавить, удалить, вставить, переместить образ. Автоматическое вычисление производится по максимальным размерам всех образов;

·         размер целого анимированного GIF-файла;

·         цвет фона. Цвет фона определяет цвет областей, которые могут быть прозрачны при проигрывании анимации в Web-браузере. Он выбирается из глобальной палитры. GIF может не включать глобальную палитру (тогда каждый образ должен иметь локальную палитру); в этом случае вы не можете выбрать цвет фона, и вид GIF будет зависеть от Web-браузера и параметра образа "Как удалять". Параметр цвет фона GIF используется очень редко;

·         глобальная палитра;

Также вы можете редактировать количество циклов анимации на вкладке Глобальные на Панели атрибутов;

Образ – работа с изображением;

Анимация – команды для просмотра анимации и редактирования ее параметров;

Инструменты (Коллекции образов, Кнопка, Редактор карты ссылок, Web-страница, Подпись);

Справка.

Для выбора какой-либо команды меню следует щелкнуть мышью на названии группы, а затем, в появившемся подменю – на имени нужной команды.

- Панель инструментов содержит быстрые кнопки для часто используемых команд. Любой пользователь может переопределять набор и порядок следования командных кнопок с помощью диалога Вид / Настроить панели.

- Панель атрибутов содержит три закладки: Глобальные, Образ и Комментарий.

Закладка Глобальные предназначена для редактирования глобальных атрибутов GIF-файла, таких как: размер логического экрана, цвет фона, глобальная палитра, счётчик циклов.

С помощью пункта меню Глобальные / Размер вы можете изменить размер целого анимированного GIF-файла.

Образ - атрибуты текущего кадра (размер, смещение, прозрачность, локальная палитра, задержка, проявление, заголовок, “как удалять”).

Комментарий - текстовые комментарии. Вы можете добавить несколько текстовых комментариев к любому кадру, редактировать и удалить их.

- Список образов (кадров) содержит все образы GIF-файла в порядке следования анимации. Вы можете видеть маленькие картинки кадров (так называемые "иконки"), размер которых определяется на странице GIF в диалоге Файл / Настройки. Также можно изменить размер иконок непосредственно в Главном окне с помощью комбинации клавиш Alt+Up / Alt+Down. Заметим, что иконки показывают полный размер всех образов, хотя вы можете задать такое смещение, когда некоторые части образа будут расположены вне размеров логического экрана. Список образов имеет переключатели, позволяющие показывать образы из различных кадров одновременно на стадии редактирования (на вкладке Компоновка). Это помогает увидеть, как один образ расположен относительно другого. Обратите внимание, что эта возможность особенно полезна, когда в Списке образов непрозрачный образ идёт перед прозрачным. Пользователь может через контекстное меню (правая кнопка мыши) применять к любому из образов следующие команды: изменить атрибуты образа, удалить, переместить образ, изменить размер, положение, отобразить (повернуть) его в разных направлениях, добавить эффекты, комментарии и т. д.

- Область размещения образа содержит три вкладки:

Компоновка содержит область для показа одного или нескольких образов из Списка образов (кадров). Также вы можете передвигать образ при помощи мыши.

Правка содержит Графический редактор для создания и редактирования отдельных образов.

Сценарий содержит Редактор сценария для создания и редактирования анимационных сценариев, основанных на манипуляциях с объектами (небольшими образами) на фоновой картинке.

На странице GIF в диалоге Файл / Настройки можно настроить вид Области размещения образа и задать приоритетный метод работы.

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

3.2. С чего начать?

Все зависит от того, что вы хотите сделать:

- редактировать уже существующие (ранее созданные) файлы: проекты (файлы с расширением .agif), анимированные или неподвижные GIFы, растровые полоски, ANI и AVI- файлы.

Для загрузки существующего GIF- файла или проекта  выберите пункт меню Файл / Открыть или нажмите кнопку  на Панели инструментов. AGIF использует все глобальные установки и атрибуты образов из этого файла.

Импорт растровых полосок, ANI и AVI- файлов осуществляется выбором пункта меню Файл / Импорт.

Замечания:

§          импортируемый анимированный курсор должен иметь размер 32 x 32 и 16 или 256 цветов. Операционная система не может создать курсоры, размеры которых не поддерживаются текущими установками дисплея;

§          большие AVI-файлы могут потреблять значительное количество ресурсов. Скорость обработки и ограничения в использовании AVI- файлов в программе AGIF зависят от аппаратных средств, на которых работает программа;

- редактировать с помощью графических инструментов и сохранять многокрасочные (без ограничения количества цветов) изображения на вкладке Сценарий.

- создать новую анимацию или другую Web-графику.

3.3. Основные принципы создания GIF-анимаций в Active GIF Creator.

Создание GIF- анимации в Active GIF Creator осуществляется двумя способами: с помощью встроенного Графического редактора (вкладка Правка), либо Редактора сценария (вкладка Сценарий).

Редактор сценария дает возможность создавать и редактировать анимационные сценарии, основанные на манипулировании объектами (маленькими образами) на фоновой картинке. Сценарий сохраняется в проекте (в файле с расширением .agif) и позволяет редактировать параметры объектов быстро и легко. Редактор сценария  дает возможность автоматизировать рутинную работу по созданию большого количества похожих анимаций.

Активная вкладка (Правка или Сценарий) маркируется зеленой точкой. Приоритетный метод работы задаётся в диалоге Файл / Настройки на странице GIF.

Если вкладка Правка - активная, то вы можете создавать или редактировать GIF, в основном используя Графический редактор. В этом случае вкладка Сценарий - дополнительный инструмент для рисования. Вы можете добавлять объекты в сценарий и редактировать их атрибуты, но не можете видеть в текущем кадре немедленное добавление объектов и все их перемещения и изменения. Отображение сценария на кадры производится нажатием специальных кнопок.

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

3.3.1. Этап 1. Подготовка отдельных кадров (образов) анимации.

Базовые кадры создаются в любом графическом редакторе. Кадры изготавливают приблизительно по такому же принципу, по которому создается обычная мультипликация. Active GIF Creator имеет встроенный Графический редактор. Он предлагает набор инструментов для рисования и редактирования, опций просмотра и цветов.

Чтобы создать новую анимацию:
- выберите пункт меню Файл / Новый или нажмите кнопку  на Панели инструментов;
- добавьте в GIF пустой образ (выберите пункт меню Образ / Новый или нажмите кнопку на Панели инструментов). Первоначальная ширина и высота этого нового образа, а также использование локальной или глобальной палитры определяются в диалоге Файл / Настройки на вкладке Новое.

Вы можете задать размер образа или выбрать стандартный размер для баннера, задать форму и ее цвет для этого нового образа. Затем продолжите его рисование, используя Графический редактор на активной вкладке Правка. Он содержит Инструментальные средства и Цветовую палитру.

Инструментальные средства содержат инструменты:

- выделения:

 - выделение прямоугольной области

 - выделение произвольной области;

- управления просмотром:

 - масштаб;

- рисования:

 - карандаш,

 - кисть,

 - распылитель;

- ввода текста:

 - надпись;

- заливки:

 - заливка цветом;

- выбора цвета ();

- создания фигур:

 - линия,

 - кривая,

 - прямоугольник,

 - многоугольник,

 - скругленный прямоугольник,

 - эллипс.

Для выбора любого инструмента рисования нажмите на него левой кнопкой мыши. При этом внизу инструментальной панели появится блок, содержащий несколько вариантов этого инструмента (если таковые имеются).

Цветовая палитра редактируемого образа включает в себя:

 - Индикатор цвета, показывающий активный цвет карандаша и цвет фона;

Полоску палитры. Цвета палитры расположены в двух строках.

Когда вы рисуете левой кнопкой мыши, инструменты используют цвет карандаша из Цветовой палитры. Если вы рисуете правой кнопкой мыши - инструменты используют цвет фона в качестве активного. Чтобы выбрать активный цвет непосредственно из образа используйте инструмент Графического редактора. Выбираемый цвет отображается на цветовом индикаторе палитры. Первоначально вам предлагается некоторая Цветовая палитра для создания образа, содержащая не более 256 цветов. Если вы не находите желаемый цвет в предлагаемой палитре, то выберите любой ненужный цвет и замените его на необходимый.  Двойное нажатие на цвете палитры в полоске вызывает диалог редактирования палитры.

В открывшемся диалоге квадрат с выбранным цветом выделится красной рамкой. Вы можете редактировать его цвет в виде R, G, B компонент, в HEX- форме, либо посредством стандартного диалога выбора цвета, который появляется после двойного щелчка мыши на выделенном цвете в таблице, а также после нажатия на кнопку . Также вы можете добавить новый () и удалить ненужный цвет (); передвинуть цвет мышью или кнопками , ; сортировать цвета () по использованию или по R, G, B; объединить все одинаковые цвета в один () или удалить все неиспользуемые (); переопределить цвета в форме градиентного заполнения ; загрузить палитру из файла с расширением .p () и сохранить её ().

Замечания:

чтобы увидеть результаты по созданию образа на иконке в Списке образов надо переключиться на вкладку Компоновка;  

прозрачные образы будут выглядеть в Графическом редакторе как непрозрачные;

в процессе редактирования образа можно использовать операции: Отменить и Повторить (выберите пункты меню Правка / Отменить и Правка / Повторить или нажмите кнопки  и на Панели инструментов).

Предположим, что первый образ для анимации был нарисован успешно. Теперь нужно создать другие образы. Вы можете:

1) добавить еще один пустой образ и нарисовать новый кадр анимации по аналогии с предыдущим.

Например, мы нарисовали 2 исходных кадра: лошадь с открытыми и с закрытыми глазами:

2) если последующие кадры анимации будут не слишком отличаться друг от друга, то можно продублировать изображение нужное число раз и применить к ним или их прямоугольным фрагментам различные операции и эффекты.

Операции с образами.

Все операции делаются только с образами, выбранными из Списка образов.

Дублирование.

Используйте пункт меню Образ / Операции / Дублирование, либо нажмите кнопку  на Панели инструментов. Новый образ будет иметь атрибуты, как у текущего образа.

Слияние.  

Вы можете создать новый образ, состоящий из двух или более образов. Например, один образ может использоваться в качестве фона, а остальные будут размещаться на этом фоне в любом месте. Для слияния всех образов, отмеченных флажками в Списке образов, используйте пункт меню Образ / Операции / Слияние, или нажмите кнопку  на Панели инструментов. Если образы внутри GIF имеют локальные палитры с различным набором 256 цветов, то палитра объединенного образа будет преобразована в некоторую новую 256- цветную палитру. В результате чего цвета в объединённом образе могут измениться.

Замечания:

§         вы можете попытаться применить операцию Образ / Атрибуты / Удалить локальную палитру для исходных образов до слияния и затем слиять их;

§         вы можете задать атрибуты исходных образов до их слияния на вкладке Образ на Панели атрибутов.

Фрагмент.

Иногда возникает необходимость использовать в качестве нового образа его прямоугольный фрагмент. Это можно сделать с помощью пункта меню Образ / Операции / Фрагмент, или нажав на кнопку  на Панели инструментов.

Замечание: также можно выбрать прямоугольный фрагмент образа, используя инструмент Выделение в Графическом редакторе, и затем вырезать его, нажав кнопку  на Панели инструментов.

Размер.

Вы можете изменить размер любого образа. Для этого выберите пункт меню Образ / Операции / Размер, или нажмите кнопку  на вкладке Образ на Панели атрибутов.

Поворот и отражение.

С помощью AGIF можно повернуть образ налево или направо на 90 градусов, а также сразу на 180 градусов. Можно также зеркально отразить образ в горизонтальной или вертикальной плоскости. Эти операции можно выполнить, выбрав пункты меню Образ / Операции / Поворот и Образ / Операции / Отражение.

Эффекты.

Используйте пункт меню Образ / Операции / Эффекты, или нажмите кнопку  на Панели инструментов.
Выберите вкладку с нужным эффектом и задайте его параметры, затем нажмите кнопку Применить, чтобы увидеть действие эффекта. После этого вы можете редактировать параметры эффекта и видеть, как меняется при этом сам образ.
Кнопка Извлечь показывает текущий образ без применения новых эффектов.
Кнопка Фиксировать сохраняет текущий образ с примененным эффектом. Это позволяет применить к образу последовательно несколько эффектов.

Частицы.

Чтобы поместить частицы на образ или его фрагмент, выберите пункт меню Образ / Операции / Частицы.

Вы можете задать образ частицы, ее цвет из палитры текущего образа, определить способ размещения частицы на образе. Кнопка  этого диалога делает размер фрагмента равным размеру всего образа. Также можно использовать мышь для изменения позиции и размеров фрагмента.

Замечание: если вы хотите разместить частицы в определённых местах образа, используйте кисть в форме частицы. Для этого выберите вкладку Правка в Области размещения образа и нажмите кнопку   на вкладке с формами кистей в Графическом редакторе.

Переход.

Эта операция даёт эффект постепенного замещения одного образа другим (причем образы могут существенно отличаться друг от друга). Для использования этого эффекта вы должны иметь два или более образов в Списке образов. Выберите нужный образ (кроме последнего) в списке и используйте пункт меню Образ / Операции / Переход. Вы можете задать количество переходных кадров и одинаковую задержку для всех переходных кадров одновременно.

Замечания:

- можно использовать образы разных размеров, но желательно, чтобы замещающий образ не был больше заменяемого. Также вы можете задавать смещения маленьким образам в пределах заменяемого образа;
- все переходные фреймы имеют локальные палитры;
- если замещающий образ имеет прозрачный цвет, то во всех переходных образах этот цвет тоже будет прозрачным.

Использование коллекции образов.

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

При выборе пункта меню Инструменты / Коллекции образов появляется диалоговое окно со списком коллекций. Элементами списка являются имена файлов с растровыми полосками. Вы можете добавлять, удалять, сортировать, включать (выключать) флажки для элементов списка. При включенном флажке окно с соответствующим набором образов присутствует на экране. Вы можете перемещать это окно по экрану и менять его размеры.
Выберите вкладку Правка в главном окне программы, и нажмите на какой- либо образ в окне с коллекцией. Он будет вставлен в левый верхний угол текущего образа (аналогично операции Правка / Вставить). Переместите его в нужное место и продолжайте редактирование.

Замечания:

при вставке образа из коллекции его цветовая палитра преобразуется в палитру редактируемого образа;

вставляемый образ является непрозрачным.

Операции с прямоугольным фрагментом образа.

Вы можете:

перемещать выбранный фрагмент внутри области для рисования, используя мышь с нажатой левой кнопкой;

перемещать копию выбранного фрагмента в другую часть образа, используя мышь с нажатой левой кнопкой и с нажатой кнопкой CTRL на клавиатуре;

копировать выбранный фрагмент в буфер обмена (пункт меню Правка / Копировать) и вставлять его из буфера в текущий образ (пункт меню Правка / Вставить);

поворачивать и зеркально отражать выбранный фрагмент (аналогично операциям с образами);

применить эффекты к выбранному фрагменту (аналогично эффектам для образа).

3.3.2. Этап 2. Сбор отдельных кадров в единый файл.

К нарисованным образам или в совершенно пустой GIF можно:

1) добавить новый образ или группу образов (изображение, созданное в любом графическом редакторе, фотографическое изображение небольших размеров и другая графика, имеющаяся на вашем компьютере) и при необходимости подредактировать его. Выберите пункт меню Образ / Добавить или нажмите кнопку  на Панели инструментов. Вы можете выбрать BMP, JPEG, GIF, ICO, WMF, EMF, PCX, PNG, TGA или PSD-файлы для добавления в свой GIF из Улучшенного диалога выбора файла картинки (смотрите его параметры на вкладке Инструменты диалога Файл / Настройки).

Замечание: можно выбрать для добавления в GIF сразу группу графических файлов, используя клавиши Shift (выделяете первый кадр, затем с нажатой клавишей Shift - последний кадр группы; при этом все промежуточные кадры выделяются тоже) и Ctrl (выделяете только необходимые кадры).

Замечания:

каждый новый образ добавляется в конец Списка образов. Позже можно переместить образ в любое другое место списка;

можно изменять размеры JPEG-файлов и метафайлов при их добавлении в GIF, если включен флажок Вызывать диалог для размера на вкладке Добавление диалога Файл / Настройки;

новые образы имеют атрибуты, определенные на вкладке Новое диалога Файл / Настройки .
GIF-файл является исключением, так как он уже содержит фреймы с атрибутами. Поэтому вы можете оставить оригинальные атрибуты фреймов, если включен флажок Оставлять исходные атрибуты кадров в добавляемых GIF- файлах на вкладке Добавление диалога Файл / Настройки;

GIF не может содержать более 256 цветов. Поэтому при добавлении образов важно определить Сокращение цветов и Метод смешения на вкладке Добавление диалога Файл / Настройки. Значения по умолчанию- Quantize с 8 битами и Nearest (ближайший подходящий цвет без исправления ошибки).

2) добавить в GIF образ кнопки из диалога Создатель кнопок, нажав кнопку  этого диалога;

3) вставить образ в GIF из буфера обмена, нажав кнопку  на Панели инструментов. При этом образ с большим количеством цветов будет преобразован в 256-цветный. Вставка реализована подобно добавлению нового образа в конец Списка образов.

Теперь мы имеем какое-то количество кадров анимации в Списке образов. Нам необходимо определить взаимное расположение образов:

Смещение.

Каждый образ имеет индивидуальное смещение. Вы можете задать смещение отдельного образа на вкладке Образ на Панели атрибутов или переместить образ при помощи мыши на вкладке Компоновка.

Включенный флажок Экран Авто на вкладке Глобальные на Панели атрибутов означает, что размер логического экрана будет перевычисляться после любого смещения образа.

Прозрачность.

Образы в GIF- файлах имеют атрибут прозрачности, поэтому один из цветов в образе не отображается. Это позволяет видеть фон Web-страницы сквозь некоторые части изображения. Первоначальный цвет прозрачного фона для добавленного образа - цвет нижнего левого пикселя. Свойство "прозрачность" нового образа задаётся на вкладке Новое диалога Файл / Настройки. Прозрачный цвет выбирается из активной (локальной или глобальной) палитры. Вы можете выбрать прозрачный цвет прямо из образа на вкладке Компоновка в Области размещения образа. Для этого нажмите кнопку на вкладке Образ на Панели атрибутов и перемещайте курсор мыши над образом. Нажмите нужный цвет для фиксации выбора.

Список образов имеет переключатели, позволяющие показывать на вкладке Компоновка одновременно образы из различных кадров. Это помогает увидеть, как один образ расположен относительно другого. При необходимости вы можете задать прозрачный цвет фона для образа, находящегося сверху. Смотрите также операцию слияние образов.

Чтобы удалить ненужный образ из списка используйте пункт меню Образ / Удалить или нажмите кнопку  на Панели инструментов.

Замечание: вы можете удалить группу образов с включенными переключателями в Списке образов.

3.3.3. Этап 3. Построение анимации и задание анимационных параметров.

Анимация предполагает определенную последовательность кадров. Можно изменить позицию образа в списке, перетаскивая его мышью с нажатой левой кнопкой, либо с помощью кнопок  () на Панели инструментов.

Количество циклов (цикл- повтор последовательности кадров; может быть бесконечным или заданное количество раз). Для редактирования этого значения используйте Панель атрибутов (вкладка Глобальные) или нажмите кнопку  на Панели инструментов. Включенный флажок Бесконечный делает счётчик цикла недоступным;

Темп анимации (задержка - продолжительность отображения каждого кадра на экране, измеренная в сотых долях секунды). Вы можете определить индивидуальное значение задержки для каждого отдельного образа или одинаковую задержку сразу для всех образов. Для редактирования этого значения используйте Панель атрибутов (вкладка Образ) или нажмите кнопку  на Панели инструментов.

Варьируя время задержки между кадрами, вы можете добиваться определенных психологических и эстетических эффектов;

Метод замещения старого образа новым (атрибут "Как удалять"). Имеет принципиальное значение, если в изображении присутствует прозрачный цвет. В большинстве случаев Браузер Решает и Не Удалять означают, что кадры не исчезают с экрана, а отображаются поверх предыдущих кадров; Цвет фона и Предыдущее Состояние - что предыдущие кадры удаляются и на экране отображается только текущий кадр. Для задания этого значения используйте Панель атрибутов (вкладка Образ).

Пример GIFа с прозрачным фоном и одинаковым для всех кадров атрибутом “Цвет фона” или “Предыдущее состояние”:

Пример GIFа с прозрачным фоном и атрибутом “Не удалять” – для первого кадра и “Предыдущее состояние” – для остальных:

Значения по умолчанию для счетчика цикла, задержки, атрибута "Как удалять" нового GIF определяются на вкладке Новое диалога Файл / Настройки (или с помощью "горячей клавиши" F6).

Просмотр анимации. Кнопка  на Панели инструментов запускает анимацию, а кнопка  останавливает анимацию. Также вы можете просмотреть GIF-файл на Web-странице. Для этого выберите пункт меню Инструменты / Веб-страница и задайте цвет фона или фоновый рисунок, а также цвет текста. В программе можно сохранять GIF-анимацию сразу с HTML кодом.

Итак, вы можете редактировать:

- атрибуты образа (размер, смещение, прозрачность, локальную палитру, проявление, задержку, заголовок, "как удалять") с помощью соответствующих пунктов меню Образ / Атрибуты или на вкладке Образ на Панели атрибутов. Кнопка  назначает атрибуты текущего образа всем образам, отмеченным в Списке образов;

- глобальные атрибуты GIF- файла (размер целого GIF, размер логического экрана, цвет фона, глобальную палитру) с помощью пункта меню Глобальные или вкладки Глобальные на Панели атрибутов.

3.3.4. Этап 4. Оптимизация GIF- файлов.

Чтобы любое изображение можно было использовать на Web-странице, его необходимо предварительно оптимизировать, уменьшив до минимума размер файла и, следовательно, время его загрузки по сети так, чтобы качество изображения при этом заметно не ухудшилось. Оптимизация – это, по сути, компромисс между размером файла и качеством изображения.

·         Структура  GIF-файла.

Особенность LZW сжатия заключается в том, что сжатию лучше поддаются те области, которые заполнены однородным цветом, а хуже области, состоящие из набора разноцветных точек.
Например, если сделать фон полосатым в горизонтальную или вертикальную полоску, или разбить в шахматном порядке (причем красный и белый цвет одинаков), то минимальный размер будет у файлов с горизонтальной полоской.
От направления градиентной заливки цвета тоже зависит размер файла. Изображение с горизонтальной градиентной заливкой занимает меньше места на диске, чем с вертикальной,

Старайтесь не использовать диффузию цветов – смешивание пикселей для обеспечения  плавного перехода от цвета к цвету.

·         Оптимальное число кадров.

Анимированный GIF-файл содержит несколько образов. Каждый образ имеет индивидуальное время задержки и занимает некоторое место в памяти. При уменьшении числа образов будет уменьшаться время загрузки GIF- файла и его размер, так как время загрузки всего файла складывается из времени задержки каждого образа в отдельности. Но количество образов можно уменьшать до некоторого предела, так как это ведёт к ухудшению качества анимации. Поэтому важно найти баланс.

·         Размер и смещение образа.

Геометрический размер каждого отдельного образа определяет размер GIF-файла в целом, так как образы хранятся в GIF полностью, независимо от размера логического экрана (Логический экран определяет рабочую область для просмотра GIF).

Метод изменения размеров очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий собой чёрный квадрат размером 100х100 пикселей. Для уменьшения размера файла достаточно сделать GIF чёрного цвета размером 1х1 пиксель, но в HTML-файле размеры картинки указать 100х100.

Если во время анимации будет изменяться только часть анимированного рисунка, то вы можете создать маленькие образы и определить их смещения на логическом экране. Замечательной особенностью GIF формата является использование образов с различными размерами. Вы можете поместить каждый образ в любое место. Это делает возможным использовать маленькие образы для анимации только некоторых частей рисунка.

·         Использование диалога Оптимизация GIF. Выберите Файл / Оптимизация или нажмите кнопку  на Панели инструментов (либо "горячую клавишу" F5).

Шесть переключателей определяют режим оптимизации. Вы можете использовать различные комбинации переключателей и видеть, как они изменяют размер оптимизированного файла.

Оптимизация прозрачных изображений.

Обрезать области в прозрачных образах.

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

Удалить лишние пикселы.

В анимированных рисунках часто возникает ситуация, когда в разных кадрах используются одни и те же цвета. Например, в каждом кадре может присутствовать фон, или какое- либо изображение используется одновременно в нескольких или во всех кадрах. Можно удалить пикселы в прозрачном образе, которые уже отобразились в предыдущем кадре. Результат зависит от самих образов в очень большой степени. Иногда это может даже увеличивать размер GIF-файла!

Например, GIF- файл состоит из 5 кадров:

В результате оптимизации получим:

Оптимизация палитры изображения.

Отсортировать цвета и удалить неиспользуемые.

Для большинства изображений, не являющихся фотографиями, количество необходимых  для воспроизведения цветов часто меньше 256. Поэтому лишние цвета можно убрать из образа, тем самым, уменьшив его размер.

Замечание: цветовая палитра может содержать одно из следующих количеств цветов: 2, 4, 8, 16, 32, 64, 128, 256. Это означает, что после удаления неиспользуемых цветов размер цветовой палитры может быть уменьшен, а может быть и нет. Это зависит от количества цветов в используемой палитре и количества неиспользуемых цветов в образе.

Переместить цвета из локальной палитры в глобальную.

Локальная палитра определяет цвета для отдельного образа внутри GIF- файла. Она занимает некоторую дополнительную память в GIF-файле. Желательно по возможности не пользоваться локальными палитрами, а использовать глобальную, путём перемещения цветовых элементов из локальных палитр в глобальную. 

Удаление дополнительной текстовой информации.

Заголовки кадров и комментарии, добавленные в GIF, занимают дополнительную память. Поэтому вы можете удалить их и уменьшить размер GIF-файла.

·         Gif-изображения с чередованием имеют немного больший размер, чем простые.

·         Фрагментарная оптимизация неанимированного GIFа.

Применяется при сохранении в GIFe больших изображений, содержащих сильно отличающиеся по количеству цветов области. В целях оптимизации изображение можно разрезать на любое число более мелких фрагментов и поместить их в таблицу, тогда в браузере оно будет выглядеть как единое целое. Это даст возможность сохранить каждый фрагмент с собственной наиболее оптимальной палитрой: например, некоторым крупным кускам может хватить и двух цветов, а для какого-нибудь особо важного фрагмента можно "раскошелиться" и на все 256. Кроме того, изображение будет появляться на экране более равномерно, так как все фрагменты будут загружаться параллельно. Однако, если количество фрагментов превысит 10, то возможного выигрыша может и не быть.

3.3.5. Этап 5. Защита GIF-файлов от несанкционированного использования.

Для добавления скрытой подписи в GIF-файлы выберите пункт меню Инструменты / Подпись.

Кнопка Подписать предназначена для выбора существующего GIF-файла и сохранения его вместе со скрытой подписью, текст которой задаётся над кнопкой. Кнопка Проверить проверяет наличие вашей подписи в существующем GIF-файле.

Замечания:

максимальная длина подписи ограничена и зависит от расцветки и размера GIF;

скрытая подпись слегка увеличивает размер создаваемого GIF-файла.

3.3.6. Сохранение анимации.

Для сохранения вашей анимации, как GIF-файла, выберите пункт меню Файл / Сохранить GIF или нажмите кнопку  на Панели инструментов.

Замечание: GIF-файлы сохраняются в незарегистрированной копии AGIF с дополнительным текстом в левом верхнем углу каждого кадра: AGif - UNREGISTERED.

Для сохранения вашей анимации, как проекта в файле с расширением .agif, выберите пункт меню Файл / Сохранить или нажмите кнопку  на Панели инструментов. Если выбранный проект уже существует, то эта команда просто сохраняет изменения в нем. Имя сохранённого проекта отображается в заголовке главного окна. Можно сохранить проект с различными именами из пункта меню Файл / Сохранить Как.

Замечания:

лучше сохранять ваши оригинальные (неоптимизированные) GIFы, как проекты, для их будущего редактирования;

в незарегистрированной копии программы ваши GIF-файлы могут быть сохранены, как проекты; позднее в полнофункциональной копии AGIF вы сможете изготовить GIF-файл из ранее созданного проекта без текста: AGif - UNREGISTERED;

анимационный сценарий проекта позволит вам редактировать добавленные в сценарий объекты каждый раз при загрузке проекта.

Вы можете сохранить кадры GIF как набор BMP, TIFF, JPEG- файлов, как AVI или ANI- файл. Для этого выберите пункт меню Файл / Экспорт и затем BMP, TIFF, JPEG, AVI, ANI в качестве типа файла.

Замечания:

AVI формат имеет одну задержку для всех образов;

вы можете задать число циклов в экспортируемом AVI в диалоге Файл / Настройки на вкладке Экспорт;

AVI формат не имеет "прозрачности" для образа, так что AGIF экспортирует каждый кадр из GIF, как отдельный кадр для AVI, без прозрачности и наложения с предыдущими кадрами.

3.4. Анимационные сценарии.

Редактор сценария дает возможность создавать и редактировать анимационные сценарии, основанные на манипулировании объектами (маленькими образами) на фоновой картинке. Вы можете перемещать, поворачивать объекты, редактировать их с помощью Графического редактора объекта, изменять их размер, а также управлять их отображением.

В диалоге Файл / Настройки на вкладке GIF выберем вкладку Сценарий в качестве активной. В этом случае на текущем образе вы будете моментально видеть добавленные объекты, а также все их перемещения и изменения. Но любое редактирование в Графическом редакторе (на вкладке Правка) будет потеряно после любого действия в Редакторе сценария.

Анимационный сценарий сохраняется в проекте (в файле с расширением .agif ) и позволяет редактировать параметры объектов быстро и легко, автоматизируя процесс создания похожих анимаций.

Замечания:

при загрузке существующего GIF-файла или проекта программа создаёт сценарий из него автоматически;

при добавлении образа к GIF (в Список образов) копия этого кадра также будет добавлена в сценарий.

- Для создания нового сценария в виде последовательности образов (кадров GIF), нажмите кнопку .
- Чтобы добавить из Списка образов кадр GIF, как объект сценария, нажмите кнопку .
- Чтобы очистить существующий сценарий нажмите кнопку .
Вы можете добавлять объекты из файла (кнопка  ), из Коллекции образов, из диалога Экспорт образа кнопки (переключатель Копировать в сценарий), а также использовать текст в качестве объекта (кнопка ). Иконки в Листе сценария показывают тип объектов.

Если нажать на объект, находящийся на образе, мышью или выбрать его из Листа сценария, то этот объект выделяется на образе прямоугольником с 8 маркерами по периметру. Маркеры используются для изменения размеров объекта, если включен флажок Растяжение в диалоге Атрибуты объекта. Диалог Атрибуты объекта появится после двойного нажатия на объекте или на его обозначении в Листе сценария, а также по нажатию кнопки .

Вы можете перемещать выбранный объект мышью и редактировать его атрибуты.

Замечание: если нужно выбрать один из перекрывающихся объектов на образе используйте мышь с нажатой клавишей Ctrl или Лист сценария.

Видеть объект со всеми его перемещениями можно:

§         мгновенно на всех вкладках и в Списке образов (кадров), если вкладка Сценарий активна (с зеленой точкой);

§         только на вкладке Сценарий, если эта вкладка неактивна. Чтобы увидеть кадр GIF с добавленными объектами на других вкладках и в Списке образов (кадров), вы должны поместить снимок сценария в текущий кадр, нажав на кнопку .

Чтобы поместить снимок сценария в новый кадр, нажмите кнопку . При этом новый кадр появится в Списке образов (кадров). Вы можете передвигать объекты на вкладке Сценарий в другие места. Если вкладка Сценарий неактивна, а вы хотите увидеть результат своих действий с объектами сценария в Списке образов (кадров), перестройте текущий кадр (кнопка ).

Замечания:

Вы можете видеть, редактировать и сохранять многокрасочные (без ограничения количества цветов) образы на вкладке Сценарий в отличии от вкладок Правка и Компоновка;

когда вы помещаете снимок сценария в текущий или новый кадр, то его цветовая палитра приводится к 256 цветам.

Вы можете:
- поместить выбранный объект на передний или задний план среди всех других объектов с помощью кнопок  и . Если передвигать объект в Листе сценария с помощью кнопок (), то вы можете поместить выбранный объект на передний или задний план относительно соседних объектов.
- удалить выбранный объект из сценария, нажав на кнопку .

Замечания:

если удалить любой объект на активной вкладке Сценарий, то он будет удален из всех кадров сценария и из Списка образов (кадров) тоже.

если удалить любой объект, который уже был добавлен в текущий кадр, а вкладка Сценарий неактивна, то ваша анимация не изменится, но вы не сможете редактировать этот объект на вкладке Сценарий (но можете редактировать кадр сценария в Графическом редакторе на вкладке Правка).

3.5. Решение практических задач прямым редактированием образов на вкладке Правка.

В диалоге Файл / Настройки на вкладке GIF выберем вкладку Правка в качестве активной. Вы можете создавать и редактировать GIF, используя Графический редактор, который содержит Инструментальные средства и Цветовую палитру.

- Для выбора любого инструмента рисования нажмите на него левой кнопкой мыши. При этом внизу инструментальной панели появится блок, содержащий несколько вариантов этого инструмента (если таковые имеются для данного инструмента).
- Цветовая палитра редактируемого образа включает в себя: Индикатор цвета, показывающий активный цвет карандаша и цвет фона, и Полоску палитры. Если вы при рисовании используете левую кнопку мыши, то применяется цвет карандаша, если правую кнопку - цвет фона. Активный цвет задается из полоски мышкой с нажатой соответственно кнопкой. Двойное нажатие на цвет палитры в полоске вызывает диалог редактирования палитры.

3.5.1. Создание текстовой анимации.

Создать текстовую анимацию может любой человек, даже совсем не умеющий рисовать.

Количество идей изготовления анимации зависит только от вашей фантазии. Вот некоторые из них:

- меняющийся цвет (пульсирующий, бегущий, хаотично мерцающий);
- изменение размера (все слово, отдельные буквы);
- интервал (эффект гармошки или пружинки);

- вращение (всего слова, отдельных букв, не полное вращение);
- стиль письма (последовательное появление букв, хаос);
- бегущий текст;
- меняемся местами (слова, отдельные буквы);

- стирание (только буквы, буквы с фоном);
- специальные эффекты (рябь, маска, текстура, мрамор, сдвиг, частицы, переход);

- анимация фона.

Покажем, как создать анимации “пульсирующий цвет”, “бегущий цвет”, “хаотично мерцающий цвет”..

Подготовка кадров анимации.

Для создания новой анимации выберите пункт меню Файл / Новый или нажмите кнопку  на Панели инструментов.

Добавьте пустой первый образ в создаваемый GIF, нажав кнопку  на Панели инструментов. В диалоге Размер образа задайте его размер, например, 130х50. Теперь добавленный пустой образ (прямоугольник белого цвета) вы можете видеть в Списке образов.

Вам предлагается некоторая Цветовая палитра для редактирования этого образа, содержащая 256 цветов. Мы хотим создать пульсирующий цвет текста. Для этого нужно: выбрать цвет фона и цвет текста из одного спектра (например, для текста - тёмный, для фона - светлый) для первого образа, а затем в каждом последующем образе приближать цвет текста к цвету фона. Как создать нужную палитру? Если вы не находите желаемый цвет в предлагаемой палитре, то выберите любой цвет и замените его на необходимый. Для этого дважды кликните на нем левой кнопкой мыши. В открывшемся диалоге Редактирование локальной палитры квадрат с выбранным цветом выделится красной рамкой. Вы можете редактировать его цвет в виде R, G, B компонент, в HEX-форме, либо посредством стандартного диалога выбора цвета, который появляется после двойного щелчка мыши на выделенном цвете в таблице, а также после нажатия на кнопку .
- Зададим цвет фона. Можно заменить белый цвет на другой выше описанным методом, либо с помощью инструмента  Графического редактора. Переключимся на вкладку Компоновка, чтобы зафиксировать произведенные действия.
- Сделаем надпись START с помощью инструмента  Графического редактора. При этом внизу инструментальной панели появится блок, содержащий кнопки выбора шрифта, наклона и смещения текста. Выберем шрифт (например, Ben Krush), его начертание и размер. Зададим цвет текста. Щелкнем левой кнопкой мыши на образе, появится курсор текста. Введем текст. Переместим надпись с помощью кнопок со стрелками. Переключимся на вкладку Компоновка, чтобы зафиксировать произведенные действия.
- Подкорректируйте размер образа, если это необходимо. Обрезать образ справа и снизу можно в диалоге Размер образа, который появляется при нажатии на кнопку  на вкладке Образ на Панели Атрибутов. Для более точного обрезания, либо для обрезания образа со всех сторон воспользуйтесь диалогом Вырезать фрагмент образа, нажав кнопку  на Панели Инструментов. Если в этом диалоге Вы задали смещение фрагмента, то на вкладке Образ на Панели Атрибутов задайте нулевые значения в полях Смещение по оси X, Y.
Получим Образ 1:

Продублируем созданный образ 5 раз, нажимая кнопку  на Панели Инструментов.

В каждой копии поменяем цвет текста, приближаясь к цвету фона. Для этого нажмём кнопку Лок. палитра... на вкладке Образ на Панели Атрибутов. В открывшемся диалоге Редактирование локальной палитры найдём цвет текста и заменим его на другой выше описанным методом. Таким образом, получим:

Создадим Образ 7, продублировав Образ 5, и переместим его вниз, нажав кнопку  на Панели Инструментов. Также можно изменить позицию образа в списке путем перетаскивания его мышью с нажатой левой кнопкой. То же самое проделаем с Образами 4, 3, 2. Получим Образы 8, 9, 10.

Задание параметров анимации.

Нажмём кнопку  на Панели Инструментов. В диалоге Счетчик цикла установим флажок Бесконечный.

Нажмём кнопку  на Панели Инструментов. В диалоге Задержки в анимации установим задержку, равную 5 для всех образов. Затем для шестого образа установим задержку, равную 50.

Значение параметра Как удалять на вкладке Образ на Панели Атрибутов оставим заданным по умолчанию, а именно Браузер решает.

Для просмотра анимации нажмем кнопку  на Панели Инструментов. Анимация будет продолжаться до тех пор, пока ее не остановить или начать процесс редактирования. Для остановки анимации нажмите кнопку  на Панели инструментов.

Чтобы увидеть, как выглядит анимация на Веб-странице, используйте пункт меню Инструменты / Веб-страница.

Создание анимации "бегущий цвет".

- Нужно сделать пять копий Образа 1, нажимая кнопку  на Панели Инструментов.
- Частично оптимизировать GIF-файл: удалить комментарии, заголовки, неиспользуемые цвета, переместить цвета из локальной палитры в глобальную. Это можно сделать в диалоге Оптимизация GIF, нажав на кнопку  на Панели инструментов. Это нужно для того, чтобы не редактировать 5 локальных палитр, а только одну глобальную.
- При необходимости в диалоге Редактирование глобальной палитры замените любой неиспользуемый цвет на цвет, который будет "бегущим", как это было описано выше. Либо можно добавить к палитре новый индекс с помощью кнопки  этого диалога, выделить его красной рамкой (при нажатии) и задать нужный цвет.
- Воспользуйтесь графическим инструментом  и залейте в каждой копии нужным цветом (мы выбрали ярко-синий) только одну букву (по порядку, слева направо). Нажимая вкладку Компоновка, вы увидите, как будет выглядеть образ в Списке образов.
- Задайте параметры анимации: задержку, равную 15 для всех образов; цикл - бесконечный; как удалять - Браузер решает (так как мы не используем прозрачные цвета).

Если в GIF-файле "бегущий цвет" изменить местоположение образов в списке, например путем перетаскивания их мышью с нажатой левой кнопкой, можно получить "хаотично мерцающий цвет".

Оптимизация созданного GIF- файла.

Важно найти баланс между количеством кадров анимации и её качеством.

Используем диалог Оптимизация GIF. Выберем пункт меню Файл / Оптимизация или нажмём кнопку  на Панели инструментов. В диалоге Оптимизация GIF шесть переключателей определяют условия оптимизации. Вы можете использовать различные комбинации и видеть, как они влияют на размер оптимизированного файла. Особое внимание обратите на переключатель Удалить лишние пикселы. Иногда его включение приводит к увеличению размера GIF-файла.
Например, результат полной оптимизации GIF-файла "бегущий цвет":

Сохранение анимации.

Если вы предполагаете позднее что-либо изменить в анимации или использовать отдельные образы для создания новых изображений, то вам нужно сохранить оригинальный (неоптимизированный) GIF, как проект, в файле с расширением .agif. Для этого выберите пункт меню Файл / Сохранить или нажмите кнопку  на Панели инструментов.

Чтобы сохранить анимацию, как GIF-файл, выберите пункт меню Файл / Сохранить GIF или нажмите кнопку  на Панели инструментов.

3.5.2. Анимация картинки.

Прекрасно, если вы умеете хотя бы немного рисовать, тогда вам не составит труда создать интересную анимацию. А что делать остальным? Наверняка у каждого на компьютере найдутся изображения, которые можно использовать (фотографии, картинки, созданные в любом графическом редакторе, символьные шрифты, кроме того, есть платные и бесплатные Web-узлы с изображениями).

Итак, рассмотрим, что можно сделать, имея одну картинку и минимум способностей к рисованию. Прежде всего, для создания анимации надо продублировать изображение или его фрагмент (кнопка  на Панели инструментов) несколько раз и видоизменять каждый дубль с помощью различных инструментов программы.

Картинка с текстом.

Использовались инструменты Графического редактора  (надпись) и  (прямоугольник) с разным цветом заливки. Вы можете не писать текст (или сделать его неподвижным), а использовать хаотичное перемещение любых фигур.

Рисуем рамку.

Задаем способ появления (исчезновения) картинки на экране.

Мы вырезали прямоугольные фрагменты образа (кнопка  на Панели инструментов), но можно было использовать инструменты Графического редактора  ластик  или кисть  для удаления произвольных частей образа.

Кроме того, вы можете применить в диалоге Размер образа (кнопка  на Панели атрибутов) способ Обрезать для изменения размеров картинки.

Применяем эффекты к образу или его фрагментам.

Мы использовали два фрагмента: нижнюю и верхнюю части фотопленки и применили к ним эффект горизонтального сдвига (кнопка ).

Также можно было на весь образ или его фрагмент нанести частицы (пункт меню Образ / Операции / Частицы).

Изменение размера фрагмента и его цвета.

В нашем примере изменяется размер головы инопланетянина (кнопка  на Панели атрибутов) и цвет разных фрагментов (инструмент заливка  Графического редактора).

Перемещение фрагментов.

В каждом дубле выберите прямоугольный фрагмент образа (все время разный), используя инструмент Выделение  Графического редактора, и перемещайте копию выбранного фрагмента в другую часть образа, используя мышь с нажатой левой кнопкой и с нажатой кнопкой CTRL на клавиатуре.

Поворот фрагментов и операция переход.

Для того, чтобы применить операцию переход нужны два образа, поэтому мы добавили в GIF пустой образ с размерами равными размерам нашей картинки. После образования переходных кадров, если хотите, можете удалить этот пустой образ.

Ваша фантазия подскажет вам и другие оригинальные решения. Если же  у вас есть хотя бы парочка изображений, то можно создать уже более интересную анимацию. Например:

Исходные картинки: рамка и мотоциклист. Идея анимации – мотоциклист проезжает сквозь рамку. Расскажем, как создать такую анимацию.

Подготовка кадров анимации.

Наша анимация будет содержать шесть кадров: первый кадр - исходная картинка с рамкой, остальные – объединенные кадры двух исходных картинок, причем второй и третий – кадры движения мотоциклиста за рамкой, а оставшиеся – кадры движения мотоциклиста поверх рамки.

Для создания новой анимации выберите пункт меню Файл / Новый или нажмите кнопку  на Панели инструментов.

Добавим в наш GIF поочередно два образа (BMP, JPEG, GIF, ICO, WMF, EMF, PCX, PNG, TGA или PSD-файлы), нажав кнопку  на Панели инструментов. Теперь в Списке образов вы можете видеть два исходных кадра. Чтобы создать иллюзию движения мотоциклиста, необходимо изменять его местоположение относительно рамки и его размещения в предыдущем кадре.

Покажем, как создать кадры движения мотоциклиста за рамкой. В Списке образов переместим кадр с мотоциклистом выше кадра с рамкой, нажав кнопку  на Панели инструментов (чтобы мотоциклист находился за рамкой). Переключимся на вкладку Компоновка и зададим прозрачный цвет фона для рамки с помощью инструмента  на вкладке Образ на Панели атрибутов.  При этом вы увидите индекс выбранного прозрачного цвета и сам цвет на Панели атрибутов. Отметим флажками оба образа в списке и на вкладке Компоновка увидим взаимное расположение образов. Воспользуемся операцией Слияние, нажав кнопку  на Панели инструментов.

Если некоторые кадры внутри GIF имеют локальные палитры с различными значениями 256 цветов, то палитра объединённого кадра будет преобразовываться в некоторую новую 256- цветную палитру. В результате этой операции можно получить изменённые цвета в объединённом кадре. Чтобы этого не произошло попытайтесь перед слиянием удалить локальные палитры для исходных кадров, например используя диалог Оптимизация GIF (кнопка ) с включенными флажками Отсортировать цвета и удалить неиспользуемые и Переместить цвета из локальной палитры в глобальную.

Мы получили объединенный образ с прозрачным фоном. Снимем для него флажок прозрачности и зальем фон цветом, выбранным из строки Палитры,  с помощью инструмента  Графического редактора. Цвет фона объединенного образа должен быть таким же, как цвет фона рамки. Проверить это можно следующим образом: поместите курсор мыши сначала на непрозрачный цвет фона исходной картинки с рамкой и в Статусной панели вы увидите цвет текущей точки в RGB и HTML формах; затем проделайте то же самое с непрозрачным фоном объединенного образа. Если вы не нашли в палитре объединенного образа нужный цвет, то можно в диалоге Редактирование локальной палитры (кнопка Лок. палитра… на Панели атрибутов) заменить ненужный цвет на необходимый (поля R,G,B или HEX) или добавить новый индекс в палитру с помощью кнопки  этого диалога и тогда уже его заменить на другой. 

Есть иной путь. Продублируйте исходный кадр с рамкой (кнопка  на Панели инструментов), для дубля задайте прозрачный цвет фона. Затем расположите кадры в Списке образов в следующем порядке: сначала исходный кадр с рамкой, потом кадр с мотоциклистом и, наконец, дубль рамки с прозрачным цветом фона. Отметьте все эти кадры флажками в списке и объедините в один.

На вкладке Компоновка возможно перемещение образа, выделенного в списке, с помощью мыши. Поэтому для создания другого кадра, в котором мотоциклист также находится за рамкой, но уже в другом месте:

-  отметим флажками в Списке образов кадр с первым объединенным образом и кадр с мотоциклистом, чтобы на вкладке Компоновка посмотреть их взаимное расположение и передвинуть мышкой кадр с мотоциклистом.

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

Получим следующие кадры движения мотоциклиста за рамкой:

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

Покажем теперь, как создать кадры движения мотоциклиста поверх рамки.

Здесь все наоборот. Помещаем в Списке образов  кадр с рамкой выше кадра с мотоциклистом (кнопка ). Теперь у кадра с рамкой должен быть непрозрачный фон, а у кадра с мотоциклистом – прозрачный. Выбираем в списке кадр с мотоциклистом и на вкладке Компоновка зададим прозрачный цвет фона с помощью инструмента  на вкладке Образ. Дальнейшие действия аналогичны рассмотренным выше: на вкладке Компоновка определяете местоположение мотоциклиста относительно его положения в последнем объединенном кадре и при помощи операции Слияние объединяете исходные кадры и получаете новые кадры анимации.

В последнем кадре  мы хотим видеть спину уезжающего мотоциклиста. Если перемещать мотоциклиста за пределы картинки с рамкой при включенном флажке Экран  Авто на вкладке Глобальные на Панели атрибутов, то размер логического экрана будет перевычисляться и полученный объединенный образ придется обрезать в диалоге Размер образа (кнопка  на вкладке Образ на Панели атрибутов) или в диалоге Вырезать фрагмент образа (кнопка  на Панели инструментов). При отключении флажка Авто размер объединенного образа останется прежним.

Теперь осталось только удалить ненужный исходный образ мотоциклиста.

Задание параметров анимации.

Нажмём кнопку  на Панели Инструментов. В диалоге Счетчик цикла установим флажок Бесконечный.

Нажмём кнопку  на Панели Инструментов. В диалоге Задержки в анимации установим задержку, равную 15 для всех образов.

Значение параметра Как удалять на вкладке Образ на Панели Атрибутов оставим заданным по умолчанию, а именно Браузер решает, так как у нас нет кадров с прозрачным цветом.

Для просмотра анимации нажмем кнопку  на Панели Инструментов. Анимация будет продолжаться до тех пор, пока ее не остановить или начать процесс редактирования. Для остановки анимации нажмите кнопку  на Панели инструментов.

Чтобы увидеть, как выглядит анимация на Веб-странице, используйте пункт меню Инструменты / Веб-страница.

Оптимизация созданного GIF- файла.

Используем диалог Оптимизация GIF. Выберем пункт меню Файл / Оптимизация или нажмём кнопку  на Панели инструментов. В диалоге Оптимизация GIF шесть переключателей определяют условия оптимизации. Вы можете использовать различные комбинации и видеть, как они влияют на размер оптимизированного файла. Особое внимание обратите на переключатель Удалить лишние пикселы. Иногда его включение приводит к увеличению размера GIF-файла.
Например, результат полной оптимизации GIF-файла:

Сохранение анимации.

Если вы предполагаете позднее что-либо изменить в анимации или использовать отдельные образы для создания новых изображений, то вам нужно сохранить оригинальный (неоптимизированный) GIF, как проект, в файле с расширением .agif. Для этого выберите пункт меню Файл / Сохранить или нажмите кнопку  на Панели инструментов.

Чтобы сохранить анимацию, как GIF-файл, выберите пункт меню Файл / Сохранить GIF или нажмите кнопку  на Панели инструментов.

3.5.3. Создание кнопки.

Для создания 2D и 3D образов кнопок используйте пункт меню в главном окне программы Инструменты / Кнопка. При этом откроется диалог Создатель кнопок.

Выберите понравившийся шаблон (кнопка ) и редактируйте параметры:

- кнопки (форму кнопки, размер кнопки и элементов ее верхней плоскости, пять способов заливки кнопки);

- заголовка (текст заголовка, параметры шрифта, цвет текста, позицию теста и тень текста).

Заметим, что вы можете задать многострочный текст заголовка. Используйте символ | как разделитель. Например: Строка1|Строка2 .Чтобы использовать символ | внутри текста напишите его дважды. Например: Одна||Строка;

- источника света (позицию и интенсивность).

Заметим, что использование источника света видоизменяет образ кнопки. Появляются различные оттенки выбранных цветов;

- образа (тень кнопки, цвет фона и количество сегментов в криволинейной форме кнопки).

Для придания гладкости линиям, углам и сторонам в растровом образе используйте кнопки  и .

После изменения любых параметров образ кнопки будет построен через 10 секунд. Для немедленного построения образа нажмите кнопку .   

Для сохранения неподвижного изображения кнопки используйте диалог Экспорт образа кнопки, который появляется после нажатия на кнопку . В нём можно выбрать формат сохраняемого файла (GIF, JPEG, BMP), копировать образ кнопки в формате BMP в буфер обмена и в анимационный сценарий, изменить размер кнопки прямо перед выполнением операции экспорта с помощью движков или полей Ширина и Высота, а также сгладить неровности кнопки после изменения её размеров (кнопка ).

Замечания:

§         при сохранении в GIF-файл кнопка будет иметь прозрачный фон, если в диалоге экспорта не применялось сглаживание. Образ кнопки будет всегда прозрачным, если цвет фона - белый;

§         образ кнопки, созданный в незарегистрированной копии программы Active GIF Creator будет экспортироваться с двумя дополнительными синими линиями поверх образа.

Вы можете добавить образ кнопки, как новый фрейм, в текущий кадр GIF, нажав кнопку  диалога Создателя кнопок. Так, изменяя параметры в образе кнопки и добавляя каждый раз измененный образ в Список образов, можно создать несколько анимационных кадров. После задания анимационных параметров можно просматривать, редактировать и сохранять созданную анимированную кнопку.

Мы предлагаем некоторые идеи создания анимированной кнопки.

Изменение формы:

Изменение ширины ребра:

Изменение параметров текста и полосок на кнопке:

Изменение положения источника света:

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

3.5.4 Создание карты ссылок.

Карта ссылок - это изображение, разбитое на определенные зоны разной формы, каждую из которых можно связать с отдельной Web-страницей.

Сначала вам нужно выбрать само изображение и добавить его в Список образов. Затем запустите Редактор карты ссылок с помощью соответствующего пункта меню Инструменты. В открывшемся окне вы создаёте и редактируете карту ссылок для вашего GIF и копируете фрагменты HTML-кода в буфер обмена для использования его в редакторе HTML.

Окно имеет две вкладки: GIF и HTML.
Вкладка GIF содержит GIF-образ и позволяет просматривать и создавать области трёх типов: Прямоугольник, Круг и Многоугольник.
Вкладка HTML высвечивает часть созданного HTML-кода для выбранной карты.
Включенный флажок Анимировать позволяет увидеть анимированный GIF.
Имеется дерево в правой части окна, отделённое таскаемой разделительной линией. Узлы дерева первого уровня содержат имена карт, второго уровня - области.

Когда вы запускаете Редактор карты ссылок,  то видите, в качестве примера, некоторую  структуру, содержащую две карты с зонами трех типов:

- прямоугольная зона  (rect). В этом случае задаются координаты двух точек - левого верхнего угла, правого нижнего угла;

- многоугольник  (poly). Задаются координаты каждой точки многоугольника.

- круг  (circ).  Задаются координаты центра круга и его радиус.

Вы можете удалить одну или все карты (кнопка ), добавить новую карту (кнопка ), редактировать имя карты (кнопка ).

Нарисуйте прямо на образе нужные зоны, предварительно выбрав тип зоны на Панели инструментов Редактора карты ссылок:

- для прямоугольника: нажмите левой кнопкой мыши в одном из углов. Затем держите левую кнопку мыши и перемещайте курсор. Расширяемый прямоугольник с одной фиксированной точкой появится в рисуемой области. Отпустите кнопку для фиксации области;
- для круга: нажмите левой кнопкой мыши в центре нужного круга и перемещайте мышь с нажатой кнопкой. Расширяемый круг появляется на рисунке. Отпустите кнопку для фиксации области;
- для многоугольника: нажмите и отпустите левую кнопку мыши в нужных точках образа. Для фиксации области нажмите правую кнопку мыши или нажмите одну из трёх кнопок с формами области.

Мы нарисовали на нашем анимированном GIFе три прямоугольные области.

Чтобы редактировать координаты области и URL  нажмите кнопку .

Если хотите удалить область из карты, используйте кнопку  .

Копируем созданный программой HTML-код в буфер обмена с помощью кнопки  и вставляем его в HTML-страницу. Не забудьте вставить нужное изображение в дескриптор <IMG>.

Ниже приведен пример размещения созданной нами карты ссылок на стандартной HTML-странице.

<HTML>

<HEAD>

<TITLE>Моя карта</TITLE>

</HEAD>

<BODY>

<MAP NAME="SomeMap">

<AREA SHAPE="RECT" COORDS="33,103,68,181"

HREF="item1.htm" target="_blank" alt="Active">

<AREA SHAPE="RECT" COORDS="77,96,106,139"

HREF="item2.htm" target="_blank" alt="GIF">

<AREA SHAPE="RECT" COORDS="122,93,149,182"

HREF="item3.htm" target="_blank" alt="Creator">

</MAP>

<IMG SRC="ag5_1.gif" width="152" height="182" border="0" USEMAP="#SomeMap">

</BODY>

</HTML>

Дескриптор <AREA> определяет зоны изображения карты ссылок.

Атрибут SHAPE описывает форму зоны карты ссылок.

Атрибут COORDS назначает координаты конкретной зоны. Количество точек в этом атрибуте зависит от формы зон (прямоугольник, круг, многоугольник).

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

Атрибут HREF указывает страницу, на которую ведет данная зона карты ссылок.

3.6. Решение практических задач конструированием на вкладке Сценарий.

В диалоге Файл / Настройки на вкладке GIF выберем вкладку Сценарий в качестве активной.

3.6.1. Редактирование и сохранение фотоизображения.

Подредактировать имеющееся многоцветное изображение (без ограничения количества цветов) с помощью графических инструментов можно на вкладке Сценарий. Для этого нужно добавить в сценарий необходимое изображение, как объект, с помощью кнопки  Редактора сценария.

Так как вы не создаете анимацию, то абсолютно все равно в какой сценарий (ранее созданный или новый) добавлять изображение. При этом на вкладке Сценарий вы можете не увидеть полностью свою картинку, ее размер будет ограничен размерами фоновой картинки сценария.

Дважды щелкните мышкой на объект или на его обозначение в Листе сценария, откроется диалог редактирования Атрибутов объекта, в котором нажмите кнопку  для редактирования выбранного объекта с помощью графических инструментов.

Графический редактор объекта (диалог Правка) содержит набор инструментов подобно Графическому редактору (вкладка Правка главного окна программы).

Замечание: если объект содержит более 256 цветов, вы можете видеть не все цвета палитры этого объекта, а только 16-цветную палитру. Но вы можете установить любой цвет в любой из 16 цветных ячеек, дважды щёлкнув на ней мышью и выбрав желаемый цвет. Чтобы выбрать нужный цвет непосредственно на редактируемом образе используйте графический инструмент .

Вы можете вставить изображение из буфера обмена в редактируемое с помощью кнопки  диалога Правка.

Для сохранения изображения, как BMP, JPEG, GIF, PNG- файл, используйте кнопку  диалога Правка.

Мы использовали следующие инструменты: прямоугольник, распылитель и надпись. Итак, результат нашего редактирования:

3.6.2. Создание анимационного скрипта (проекта).

Нам понадобятся: большая фоновая картинка и два маленьких объекта (например, следы). Идея анимации состоит в перемещении следов по картинке.

Для создания новой анимации выберите пункт меню Файл / Новый или нажмите кнопку  на Панели инструментов.

Добавьте в свой GIF образ, который будет служить фоновой картинкой. Для этого выберите пункт меню Образ / Добавить или нажмите кнопку  на Панели инструментов. Заметим, что цветовая палитра добавленного образа приводится к 256 цветам. Теперь у вас один образ в Списке образов. Копия этого образа также будет добавлена в Лист сценария.

Продублируйте свой образ. Для этого выделите его мышкой в Списке образов и используйте пункт меню Образ / Операции / Дублирование, либо нажмите кнопку  на Панели инструментов. Новый образ будет иметь атрибуты, как у текущего. Анимационный сценарий основан на добавлении объектов к фоновой картинке. Поэтому, если мы хотим иметь первый образ без добавленных на него объектов, то нужен его дубль.

Дальнейшая работа связана непосредственно с конструированием на вкладке Сценарий.

Создадим сценарий из нашего GIF-файла, состоящего из двух образов, нажав кнопку  Редактора сценария. Теперь в Листе сценария вы видите два кадра GIF, являющиеся объектами нашего сценария, с иконками . Рядом указаны смещение и размер каждого объекта. Мы не будем редактировать атрибуты этих двух кадров в процессе доработки нашего сценария.

Выделим второй образ в Списке образов. При этом в Листе сценария его иконка станет активной (цветной). Добавим по очереди ко второму кадру маленькие объекты (два следа) из файла, нажимая кнопку  Редактора сценария. При этом каждый след появится мгновенно на всех вкладках, в Списке образов, а также в Листе сценария с иконкой . Эти иконки отличаются от двух предыдущих, хотя и те и другие являются объектами нашего сценария. Но мы собираемся редактировать атрибуты маленьких объектов и изменять их местоположение на фоновой картинке.
Все действия можно проводить только с активными объектами. Если нажать на объект, находящийся на образе, мышью или выбрать его из Листа сценария, то этот объект выделяется на образе прямоугольником с 8 маркерами по периметру.

Переместим по очереди каждый след мышью в исходное положение, соответствующее началу движения (у нас - левый нижний угол). При этом в Листе сценария напротив иконки соответствующего объекта вы увидите новые значения смещений, например (2,101).

Зададим прозрачный цвет фона для каждого следа в диалоге Атрибуты объекта, который появится после двойного нажатия на объекте, на его обозначении в Листе сценария, а также по нажатию кнопки  Редактора сценария.

Закончив работу по созданию второго кадра нашей анимации, поместим снимок его сценария в новый кадр, нажав кнопку . В Списке образов появится третий кадр, в котором переместим один из следов мышкой, либо, используя диалог Атрибуты объекта. Закончив работу по созданию третьего кадра нашей анимации, поместим снимок его сценария в новый кадр, аналогично вышеописанному. И в новом четвертом кадре зададим смещение для другого следа.

Так создадим 9 кадров в Списке образов, а в Листе сценария по-прежнему имеем только 4 объекта. При выборе, например второго кадра из Списка образов, в Листе сценария выделяются 3 объекта: фоновая картинка и два следа с заданными нами смещениями именно в этом кадре.

Если вы хотите, чтобы на картинке оставались все следы, то после добавления объекта к картинке и его перемещения в нужное место, Вы должны, в отличии от описанного выше, поместить снимок сценария сначала в текущий кадр, нажав кнопку , а затем - в новый кадр, нажав кнопку  и уже к этому кадру добавить новый объект. Заметим, что когда вы помещаете снимок сценария в текущий или новый кадр, то его цветовая палитра приводится к 256 цветам. В результате получим:

Зададим параметры анимации.

Пусть цикл анимации будет бесконечным. Это можно сделать на вкладке Глобальные Панели атрибутов, либо выберите пункт меню Анимация / Счетчик цикла или нажмите кнопку  на Панели инструментов.

Установим задержку для первого кадра = 150, а для всех остальных = 15. Это можно сделать на вкладке Образ Панели атрибутов, либо выберите пункт меню Анимация / Задержка или нажмите кнопку  на Панели инструментов.

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

Для просмотра анимации нажмем кнопку  на Панели Инструментов. Анимация будет продолжаться до тех пор, пока ее не остановить или начать процесс редактирования. Для остановки анимации нажмите кнопку  на Панели инструментов.

Чтобы увидеть, как выглядит анимация на Веб-странице, используйте пункт меню Инструменты / Веб-страница.

Оптимизация GIF-файла.

Важно найти баланс между количеством кадров анимации и её качеством.

Используйте диалог "Оптимизация GIF". Выберите пункт меню Файл / Оптимизация, или нажмите кнопку  на Панели инструментов.

Сохранение анимации.

Лучше сохранять ваши оригинальные (неоптимизированные) GIFы, как проекты в файлах с расширением .agif, для их будущего редактирования. Выберите пункт меню Файл / Сохранить или нажмите кнопку  на Панели инструментов. Мы сохранили нашу анимацию в папке projects под именем 1_2.agif, а анимацию с неисчезающими следами под именем 1_1.agif.

Для сохранения анимации, как GIF-файла, выберите пункт меню Файл / Сохранить GIF или нажмите кнопку  на Панели инструментов.

3.6.3. Редактирование анимационного скрипта (проекта).

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

Допустим, у нас уже есть какой-то проект, состоящий из фоновой картинки и объекта-печати Demo. Объект перемещается по картинке следующим образом:

Вы можете:

редактировать объект во всех кадрах анимации одновременно:

- заменить объект на другой в диалоге Атрибуты объекта путем вставки нового изображения из буфера обмена с помощью кнопки ;

- повернуть объект на 90 или 180 градусов;

- корректировать объект в Графическом редакторе объекта.

Замечание: аналогичным образом можно редактировать и фоновое изображение во всех кадрах анимации одновременно, причем при замене исходного фонового изображения на другое, его размеры должны соответствовать исходным.  

редактировать объект в отдельно взятом кадре анимации из Списка образов:

- перемещать объект мышкой или с помощью полей Слева и Сверху в диалоге Атрибуты объекта;

- делать объект видимым (невидимым);

- изменять размер объекта мышкой или с помощью группы Размер в диалоге Атрибуты объекта, а также задать метод изменения размеров объекта (флажки Растяжение и Центр);

- если включён флажок Прозрачность, то фон этого объекта - прозрачный (цвет нижнего левого пикселя является цветом прозрачности).

добавлять новые и удалять лишние объекты;

изменять анимационные параметры.

Мы изменили в предыдущем проекте фоновую картинку, редактировали объект-печать Demo в Графическом редакторе объекта, а также изменили траекторию движения объекта. И на  все это потребовалось минимум усилий и времени.

Как вы видите, Active GIF Creator является достаточно мощным инструментом для создания разнообразной Web-графики. Если вы больше ориентированы на создание GIF-анимаций с минимумом прикладываемых усилий, то возможно вас заинтересуют

другие наши программы, такие как Animate Me! и Easy Banner Creator. Они являются прекрасным дополнением к Active GIF Creator и в тоже время самодостаточными продуктами одновременно.

4. Создаем анимацию с помощью Animate Me!.

Animate Me! поможет вам легко и быстро создать анимированные GIF и AVI-файлы путем наложения на статичную картинку набора динамических эффектов (движущиеся объекты, частицы, бегущий текст, изменяющийся цвет, взрыв, волна, встряска, появление). Вы можете использовать наборы объектов, частиц и фоновых картинок, поставляемых вместе с программой или создать свои наборы и фоновые картинки, например при помощи программы  Active GIF Creator.

Свойства программы:

- загружает фоновые картинки для создаваемых анимаций из BMP, JPEG, PSD, PCX, PNG и GIF-файлов;
- управляет списком анимационных эффектов и вызывает диалоги редактирования параметров каждого отдельного эффекта;
- определяет параметры анимации: количество кадров и задержку;
- строит анимацию на основе списка анимационных эффектов;
- экспортирует анимацию в GIF и AVI-файлы;
- оптимизирует размер создаваемых GIF-файлов;
- сохраняет анимационные сценарии в AME-файлах;
- создает GIF и AVI-файлы из командной строки в пакетном режиме.

С помощью Animate Me!  любой, даже совсем не разбирающийся в графике человек, сможет получить огромное множество различных анимационных комбинаций. Для этого нужна только начальная картинка и немного времени на эксперименты.

4.1. Элементы главного окна Animate Me!

Компоненты главного окна программы:

- Меню содержит группы команд управления программой:

Файл – в этом меню находятся основные команды по созданию, открытию и сохранению файлов, а также команды настройки, определяющие рабочие параметры: цвет фона Панели образа, включение функции оптимизации GIF-файла, выбор базового формата для анимации в окне программы (GIF или AVI);

Эффекты – работа с эффектами: добавить, удалить, переименовать, редактировать, переместить, включить (выключить), а также команды для просмотра анимации и редактирования ее параметров.

Справка;

- Панель инструментов содержит быстрые кнопки для часто используемых команд;

- Панель образа содержит исходное графическое изображение и созданную анимацию с использованием некоторого набора эффектов. Ширину Панели образа можно изменить с помощью мыши. Для этого подводят указатель мыши к линии, разделяющей Список эффектов и Панель образа. Когда указатель примет вид двухсторонней стрелки, нажимают левую кнопку мыши и перемещают линию. Цвет фона Панели образа определяется в настройках (пункт меню Файл / Настройки);

- Список эффектов используется для создания вашей анимации;

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

- Строка состояния: ее левая часть содержит номер текущего анимационного кадра и общее число кадров анимации (например, 1/18), а правая часть - справочные сообщения.

4.2. С чего начать?

Чтобы понять, какую именно анимацию можно сделать с помощью Animate Me!, посмотрите демонстрационные примеры.

После инсталяции программы выберите пункт меню Файл / Открыть снова. Он содержит список файлов, состоящий из двух частей. В верхней части списка находятся анимационные сценарии (AME-файлы), в нижней части - графические файлы, которые используются в качестве фона. Вы можете отрыть любой сценарий нажатием левой кнопки мыши. Он содержит фоновую картинку, образы движущихся объектов, параметры примененных эффектов и параметры анимации.

В процессе работы с программой этот список постоянно обновляется, поэтому чтобы загрузить анимационный сценарий из AME-файла нажмите кнопку  на Панели инструментов (сочетаний клавиш - CTRL+O). Для запуска анимации используйте кнопку  (клавиша F9). Чтобы остановить показ анимации нажмите кнопку .

Например, в примере demo07.ame  использованы эффекты: волна, встряска горизонтальная и вертикальная, бегущий текст (стиль - линейный), появление, бегущий текст (стиль - случайный).

Вы получили общее представление о возможностях программы, теперь познакомьтесь с анимационными эффектами, которые предлагает данная версия программы (пункт меню Справка / Эффекты).

 Движущийся объект.
Эффект предназначен для перемещения объекта на фоновом рисунке. Выберите объект из BMP, JPG, ICO, PSD, PCX, PNG или GIF-файла (можно использовать анимированный GIF). Предусмотрено изменение размеров и задание стиля движения объекта:
- случайный стиль (задается начальная позиция объекта и радиус его смещения);
- линейный стиль (задается начальная позиция объекта, а также его вертикальное и горизонтальное смещение);
- траектория (задаются точки-вершины траектории).

 Движущиеся частицы.
Эффект предназначен для перемещения небольших частиц, выбранных из растровой полоски формата BMP, на фоновом рисунке. Вы можете задать количество частиц, радиус их появления и стиль движения (как для движущихся объектов).

 Бегущий текст.
Эффект предназначен для создания бегущей текстовой строки на фоновом рисунке. Задаётся текст, его параметры, угол наклона и стиль движения (как для движущихся объектов).

!!! Отметим, что все остальные эффекты применяются для фонового изображения, возможно преобразованного другими эффектами.

 Изменяющийся цвет.
Эффект предназначен для плавного изменения цвета образа. Параметры Красный, Зеленый, Синий задают шаг изменения цветов.

 Волна.
Эффект создает волны на поверхности образа. Вы можете задать стиль волны и ее параметры.

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

 Появление.
Эффект предназначен для плавного появления или исчезновения образа. Вы можете задать количество и размер фрагментов рисунка.

 Взрыв.

Эффект предназначен для взрыва образа. Вы можете задать скорость взрыва, смещение и размер фрагментов (квадратов или прямоугольников), на которые распадается рисунок.

4.3           Создание GIF-анимаций в Animate Me!

Прежде всего необходимо настроить рабочие параметры. Для этого выберите пункт меню Файл / Настройки (клавиша F6) и в открывшемся диалоге задайте базовый формат для анимации с помощью переключателя GIF.  Если вы планируете дальнейшее редактирование созданного GIFа в каком-нибудь GIF-аниматоре (например, в Active GIF Creator), то флажок Сильная оптимизация лучше снять. В результате сильной оптимизации некоторые кадры анимации могут выглядеть странно, так как при анимации их пиксели будут объединены с пикселями от предыдущих кадров.

§         Можно загрузить анимационный сценарий из AME-файла (кнопка  на Панели инструментов), чтобы использовать его для редактирования или в качестве шаблона для создания новой анимации. Вы можете заменить фоновый образ (кнопка ), редактировать параметры любого эффекта (кнопка ) и управлять Списком эффектов (добавлять новые и удалять либо выключать ненужные эффекты, перемещать эффекты в списке), а также редактировать анимационные параметры (количество кадров, задержку и количество циклов).

Чтобы создать новую анимацию с нуля нажмите кнопку  (сочетание клавиш - Ctrl+N). При этом Список эффектов очищается.

Затем загрузите фоновый образ, используя кнопку  (клавиша F5). Вы можете выбрать в качестве фона образ с размерами стандартного баннера из папки background или образ из ее подпапки demo, а также любое изображение (BMP, JPEG, PSD, PCX, PNG, TGA и GIF-файл) на вашем компьютере.

Замечание: если вы выбрали анимированный GIF, то только первый его кадр будет использоваться.

Теперь вы можете создать свой собственный набор эффектов:

- для добавления эффекта в Список эффектов нажмите кнопку  на Панели инструментов.

Эффекты: Движущийся объект, Движущиеся частицы, Бегущий текст -предназначены для перемещения объектов, частиц, текста на фоновом рисунке.
Эффекты: Изменяющийся цвет, Волна, Встряска, Появление, Взрыв -применяются для фонового изображения, возможно, преобразованного расположенными выше по списку эффектами.

Замечание: один тип эффекта может использоваться неоднократно;

- для редактирования эффекта нажмите кнопку  (можно также использовать двойное нажатие левой кнопки мыши на эффекте в списке либо клавишу Enter). Откроется диалог, содержащий параметры для редактирования и тестовый просмотр анимации. По окончании правки нажмите кнопку Тест для построения демонстрации вашей анимации. В процессе построения появляются песочные часы, на которые можно кликать для остановки построения. Вы можете видеть анимацию в натуральную величину или растянутую (ужатую) до размеров окна тестового просмотра. Для этого используйте флажок Растягивать. Добившись получения нужного результата, нажмите кнопку ОК;

- чтобы удалить выбранный эффект из списка используйте кнопку ;

- чтобы переименовать эффект используйте пункт меню Эффекты / Переименовать (сочетание клавиш Alt+ Enter);

- можно перемещать эффект по списку с помощью кнопок  (). Это приведет к изменению анимации;

- для каждого эффекта или его части можно задать расписание действия с помощью кнопки  (клавиша F7);

- можно делать эффект активным (неактивным) в создании анимации используя мышь для того, чтобы поставить (убрать) флажок около названия эффекта в списке.

Построение анимации и задание анимационных параметров:

- задать параметры анимации: количество кадров, задержку, одинаковую для всех кадров, и количество циклов - вы можете с помощью кнопки  на Панели инструментов (сочетание клавиш Ctrl+F9). Задержка определяется как целое число сотых долей секунды.

Замечание: исходный фоновый образ всегда будет первым кадром в вашей анимации, поэтому реальное количество кадров вашей анимации будет на единицу больше;

- в создании анимации участвуют только эффекты, отмеченные флажками. Чтобы построить анимацию на основе списка таких эффектов надо выбрать кнопку  (клавиша F9).

Замечание: после любых действий по управлению Списком эффектов или после редактирования параметров эффектов, чтобы увидеть измененный результат необходимо заново построить анимацию.

- чтобы включить (выключить) созданную анимацию нажмите кнопку  ( ) на Панели инструментов. При этом номер текущего кадра анимации и общее число кадров отображаются в Строке состояния.
Можно не запускать анимацию, а пошагово перемещать ползунок анимационного движка, который расположен над Строкой состояния, чтобы увидеть каждый кадр.

Сохранение GIF-анимации.

Вы можете сохранить анимационный сценарий для последующего редактирования в файле с расширением .ame. Для этого нажмите кнопку  на Панели инструментов (сочетание клавиш Ctrl+S). Сохранить анимационный сценарий там же с различными именами можно с помощью пункта меню Файл / Сохранить как.

Сохранить анимацию в виде GIF-файла (с сильной оптимизацией или без нее) или в виде AVI-файла можно с помощью кнопки .

Обратите внимание, что эта функция недоступна в демонстрационной версии программы Animate Me!.

Вывод.

Animate Me! позволяет легко создавать сложную и интересную анимацию: вам просто требуется определить последовательность и параметры отдельных эффектов. Но в отличие от  Active GIF Creator, в Animate Me! нельзя реализовать идеи анимации, кроме как на основе списка предлагаемых эффектов, рисовать и редактировать кадры, управлять списком анимационных кадров, задавать время задержки и способ отображения каждого отдельного кадра на экране, задавать прозрачный фон, полностью управлять процессом оптимизации GIF-файла, защищать анимацию от несанкционированного использования и т.д.

5. Создаем анимацию с помощью Easy Banner Creator.

Баннеры – рекламные заголовки, которые используются как афиши, для того чтобы продукт сильнее запомнился максимальному числу людей. Кроме того, они используются, чтобы дать возможность всем заинтересованным попасть на Web-узел рекламодателя.

Наиболее эффективны баннеры с элементами анимации.

Easy Banner Creator специализируется на создании неподвижных и анимированных баннеров любых размеров.

Свойства программы:

- три способа заливки фона баннера: Цвет, Градиент, Картинка (BMP, JPEG, GIF, ICO, PNG, PSD, PCX, TGA, WMF, EMF-файлы);

- добавляет, удаляет, меняет местами элементы баннера: тексты и изображения;

- строит анимацию на основе движения элементов и применения к ним эффектов;

- задаёт многострочный текст с параметрами: шрифт, цвет, тень, эффекты (изменение цвета, размера текста, появление текста, телетайп);

- добавляет изображения из BMP, JPEG, GIF(в том числе анимированный), ICO, PNG, PSD, PCX, TGA, WMF, EMF-файлов или Коллекций изображений, имеет графические инструменты для их редактирования, задаёт параметры картинок: размер, прозрачный цвет фона, эффекты (изменение размера и появление изображения);

- определяет анимационные параметры для каждого элемента: позицию, направление движения и временной интервал;

- задаёт анимационные параметры создаваемого баннера: количество кадров и задержку;

- оптимизирует размер GIF-файла;

- экспортирует созданный баннер в GIF-файл;

- сохраняет образы GIF-файла как набор JPEG или PNG-файлов;

- сохраняет анимационные скрипты в EBC-файлах.

Вы можете использовать картинки, поставляемые вместе с программой или создать свои собственные, например, при помощи программы  Active GIF Creator.

5.1. Элементы главного окна Easy Banner Creator.

Компоненты главного окна программы:

- Меню содержит группы команд управления программой:

Файл (File) – в этом меню находятся основные команды по созданию, открытию и сохранению файлов, а также команда принудительного обновления баннера после любых корректировок;

Справка (Help);

- Панель инструментов содержит быстрые кнопки для часто используемых команд;

- Панель атрибутов содержит параметры создаваемого баннера: Размер баннера (Size), Фон (Background), Элементы (Elements), Анимация (Animation);

- Панель образа предназначена для визуального отображения создаваемого баннера;

- Строка состояния: ее левая часть содержит размер оптимизированного баннера, а правая часть - справочные сообщения.

5.2. С чего начать?

Чтобы оценить возможности программы Easy Banner Creator, посмотрите демонстрационные примеры.

Пункт меню File содержит список недавно использовавшихся сценариев (до 9). Вы можете отрыть любой сценарий нажатием левой кнопки мыши. Он содержит фоновую картинку, движущиеся или неподвижные элементы, параметры примененных эффектов и параметры анимации.

В процессе работы с программой этот список постоянно обновляется, поэтому чтобы загрузить любой сценарий из EBC-файла нажмите кнопку  на Панели инструментов (сочетаний клавиш - Ctrl+O).
 Чтобы остановить показ анимации отключите флажок в группе Animation на Панели атрибутов.

Любой сценарий можно редактировать и использовать, как шаблон, для создания нового баннера. Кнопка  предназначена для принудительного обновления создаваемого баннера после редактирования его параметров.

5.3. Создание баннера в Easy Banner Creator.

Прежде всего, нужно решить какого размера должен быть ваш баннер и будет ли он неподвижным или анимированным. Если вы хотите создать анимированный баннер, то продумайте идею анимации.

Чтобы создать новый баннер “с нуля” используйте пункт меню File / New ( клавиши Ctrl+N).

Размер баннера задается в группе Size на Панели атрибутов.

Можно создать баннер со стандартными размерами (кнопка ) или с другими нужными вам размерами (поля Width и Height). Если в качестве фона вы хотите использовать картинку (группа Background стиль Picture), то размеры этой картинки могут стать размерами вашего баннера.

Способ заливки фона задается в группе Background на Панели атрибутов.

Вы можете выбрать один из предлагаемых стилей:

- Color (Цвет). Нажмите цветной квадрат и выберите нужный цвет из стандартного диалога, либо в поле # введите цвет в HEX-форме (шестнадцатеричные числа). Это может быть цвет вашей Web-страницы.

Замечание: чтобы увидеть результат редактирования цвета в HEX-форме нужно нажать клавишу Enter;

- Gradient (Градиент). Задайте начальный и конечный цвета градиента и направление заливки;

- Picture (Картинка). Если флажок Stretch (Растягивать) включен, то выбранное вами изображение будет растянуто до размеров вашего баннера. В противном случае ваша картинка (вся или ее часть) будет размещена в центре баннера, а оставшееся незаполненное картинкой место будет залито цветом (стиль Color в группе Background).

Элементы баннера задаются в группе Elements на Панели атрибутов.

Элементами баннера могут быть тексты и изображения. Вы сами определяете их количество, тип, положение в списке элементов (кнопка ) и делаете их неподвижными или анимированными.

Чтобы добавить или удалить элемент используйте кнопки  или  соответственно.

Замечание: каждый элемент добавляется в центр фоновой картинки. Если вы задаете для него позицию и направление движения, то он будет появляться и перемещаться согласно вашему выбору.

Общее количество элементов и номер текущего элемента вы можете видеть в поле Number. Кнопки  и  также позволяют выбрать нужный элемент для редактирования его параметров.

Вы можете редактировать параметры текста (шрифт, цвет, тень) и параметры изображения (размер и прозрачный фон). При необходимости значительной коррекции изображения используйте графический редактор,  открывающийся при нажатии кнопки Edit.

Замечание:

- чтобы написать текст в две строчки следует разделить его части вертикальным символом, например,  Line1 | Line2. Параметры текста одинаковы для обеих строк;

- для изменения размера изображения используйте кнопку  рядом с полем Width. Если файл с исходным изображением был удалён или перемещён, то берётся изображение, сохранённое в проекте, и каждое следующее действие по изменению размера изображения приведет к его ухудшению;

- прозрачный цвет – это цвет нижнего левого пикселя (за исключением GIF-изображений, которые имеют собственные правила прозрачности).

Создание анимированного баннера.

Для этого вам нужно сделать элементы подвижными.

Вы можете задать направление движения (выпадающий список Direction) и временной интервал (поля Start time % и Stop time %) - для обоих типов элементов, эффекты - для текста и изображения, выбрать анимированный GIF. Кроме того, можно задавать неподвижные и подвижные элементы одновременно.

Замечания:

элементы могут бежать одновременно либо с некоторой задержкой относительно друг друга;

когда вы уменьшаете анимационный интервал для элемента, то он будет появляться не во всех анимационных кадрах. Чем меньше интервал, тем большее количество кадров вы должны задать, чтобы увидеть этот бегущий элемент. То есть подбор временного интервала и количество кадров определяют стиль движения элемента: бег, прыжки, однократное появление;

вы можете задать направление движения и применить к тексту эффекты одновременно;

маленький анимационный интервал для текста не позволит полностью отработать примененным к нему эффектам.

Данная версия программы предлагает следующие текстовые эффекты:

Color Change (Изменение цвета текста) позволяет плавно изменять цвет текста от Color 1 до Color 2. Флажок Enable при этом должен быть включен;

Text Size (Изменение размера текста) изменяет размер шрифта от начального (поле Start) до конечного значения (поле End). Флажок Enable при этом должен быть включен;

Fade (Появление текста) создаёт эффект появления (переключатель Out) или исчезновения (переключатель In). В положении переключателя None эффект отключён;

При использовании эффекта Teletype (Телетайп) в каждом кадре анимации удаляется по одной букве текста справа налево (переключатель Right-Left) либо добавляется слева направо (переключатель Left-Right). В положении переключателя None эффект отключён.

Группа Test предназначена для просмотра одного или нескольких выбранных эффектов при различных значениях количества кадров анимации (поле Number of frames) и времени задержки (поле Delay). Включите анимацию флажком Animation. Пример показывает анимацию, созданную на основе набора текстовых эффектов, отмеченных в скриншоте.

Эффекты для изображений Fade и Size аналогичны текстовым, поэтому их описывать нет необходимости.

Ниже представлены кадры нескольких анимированных GIF-файлов, созданных в Easy Banner Creator.

В примере 1 использовался фон с градиентной заливкой, а для всех трех элементов (желтый, синий тексты  и анимированная картинка) не заданы направления движения; к текстам применены эффекты (для желтого – увеличение размеров и появление текста, а для синего – исчезновение текста). Вы можете видеть все элементы в каждом кадре баннера, кроме первого.

В примере 2 мы использовали в качестве фона изображение и четыре элемента: анимированную небольшую картинку, расположенную в центре баннера; а также бегущие один после другого в разных направлениях такие элементы, как тексты (оливковый и желтый) и изображение, идентичное фоновой картинке. То есть в примере 2 реализована анимация небольшой картинки, текста и фона.

В примере 3 мы использовали фон, залитый цветом, и две пары однотипных элементов: тексты и изображения. Первый и четвертый элементы – тексты, причем первый текст неподвижен, а для бегущего четвертого элемента задан более темный цвет и маленький анимационный интервал, необходимый лишь для его появления в последнем кадре. Изображения бегут навстречу друг другу с некоторой задержкой (перекрывающиеся анимационные интервалы).

Задание анимационных параметров (количество кадров и задержка) для создаваемого баннера производится с помощью группы Animation на Панели атрибутов. Включенный флажок определяет построение анимированного баннера. Строка состояния показывает размер оптимизированного баннера.

Замечания:

§         задержка определяется как целое число сотых долей секунды и одинакова для всех кадров;

§         в оптимизированном файле анимационные параметры могут быть изменены без изменения самой анимации.

Создание неподвижного баннера из анимированного.

Всё что вам для этого нужно – это отключить анимацию (флажок в группе Animation).

Сохранение баннера.

Прежде всего, нужно сохранить ваш баннер как проект (анимационный сценарий) для последующего редактирования в файле с расширением .ebc. Для этого нажмите кнопку  на Панели инструментов (сочетание клавиш Ctrl+S). Сохранить анимационный сценарий там же с различными именами можно с помощью пункта меню File / Save as...

Экспортировать созданный баннер в GIF-файл (с оптимизацией), либо сохранить образы GIF-файла как набор JPEG или PNG-файлов для их последующего редактирования можно с помощью кнопки  на Панели инструментов.

Обратите внимание, что функция экспорта баннера недоступна в демонстрационной версии программы.

Вывод.

Easy Banner Creator позволяет легко создавать баннеры: вам просто требуется задать фоновое изображение, а также определить последовательность и параметры отдельных элементов (текстов и картинок). Если сравнить Easy Banner Creator с Animate Me!, то можно отметить их сходства и отличия.

В Animate Me! все элементы (объекты, частицы и текст) могут перемещаться не только линейно, но и случайным образом и по заданной траектории. Эффект можно применить к целому образу или к его части, задать расписание его действия, а текст можно написать под наклоном. Кроме того, GIF-анимацию можно сохранить без оптимизации для последующего редактирования в каком-нибудь GIF-аниматоре. Всё это выгодно отличает Animate Me! от Easy Banner Creator.

В Easy Banner Creator  вы можете использовать многострочный текст с тенью и графические инструменты для редактирования изображений. Кроме того, эффекты применяются к  каждому отдельному элементу (тексту или изображению), фон и другие эффекты  остаются без изменений. Кстати для самого фона предлагаются три способа заливки. Это – несомненный плюс Easy Banner Creator.

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

Итак, мы познакомили вас с тремя программами для создания GIF-анимаций: Active GIF Creator, Animate Me!, Easy Banner Creator.

Кроме того, у нас есть и другие анимационные программы, ориентированные на более узкий круг пользователей:

MakeGIF - визуальный командный процессор: создание GIF-файлов из командной строки в пакетном режиме.

Easy 3D Objects - создание трехмерных иллюстраций, а также GIF-анимаций на основе движения объекта (группы объектов): стенка, плоскость, диск, ящик, пирамида, сфера, конус, цилиндр, труба, тор, стрелка, текст, зеркало.

Другие графические редакторы:

Easy Watermark Creator - добавление видимых водяных знаков на ваши картинки и фотографии.

Easy Frame Creator - поможет быстро и легко добавить рамки к изображениям или создать одни рамки. Также вы можете улучшить качество фотографий, создать уникальные коллажи и абстрактные картины, используя набор эффектов.

Easy Button Creator - создание 2D и 3D кнопок разнообразных форм для Web и презентаций.

Image Constructor (russian edition)  - создание иллюстраций, структурных схем, диаграмм, презентационных материалов в виде набора текстов и небольших пиктограмм на фоне большой картинки или фоне с градиентной заливкой.

В зависимости от поставленных задач можно подобрать подходящую программу (одну или несколько). Мы надеемся, что наши программы станут вашими помощниками в творческих исканиях. 