Анимация

Анимация

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

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

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

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

Рис. 8.1. Исходные изображения для создания анимации

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

Откройте оба кадра в Photoshop. На одном из них выделите все изображение (Ctrl+A) и скопируйте его в буфер обмена (Ctrl+C). Затем перейдите ко второму изображению (например, щелкнув на нем кнопкой мыши) и вставьте изображение из буфера обмена (Ctrl+V). Новое изображение скроет под собой старое. Не волнуйтесь, это не навсегда.

Включите отображение палитры ANIMATION (Анимация) с помощью команды Window ? Animation (Окно ? Анимация). На ней будут располагаться кадры анимированного GIF-файла. Собственно, первый кадр уже есть – это то, что вы видите на экране. Щелкните на значке

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

Рис. 8.2. Два одинаковых кадра на палитре ANIMATION (Анимация)

Ничего, сейчас мы его изменим. Щелкните на втором кадре на палитре ANIMATION (Анимация) и приготовьтесь немного повозиться с палитрой LAYERS (Слои) (рис. 8.3).

Рис. 8.3. Палитра LAYERS (Слои) с двумя слоями

Как видите, на ней есть два слоя – по одному на кадр. Напротив каждого стоит значок глаза, который показывает, что соответствующий слой виден. Щелкните на глазе верхнего слоя. Он исчезнет, зато станет виден нижний. Новый кадр готов! Теперь он отличается от исходного (рис. 8.4).

Рис. 8.4. Палитра ANIMATION (Анимация) с разными кадрами

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

в нижней части палитры Animation (Анимация). Кадры начнут очень быстро мелькать. Остановите их нажатием кнопки

Необходимо задать задержку по времени для каждого кадра. Найдите на кадре надпись 0 sec. и щелкните на треугольничке справа от нее. Появится список, в котором можно выбрать задержку. Установите ее для обоих кадров, так будет удобнее любоваться «живой» картинкой.

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

Если результат вас устроил, сохраните его в формате GIF. Для этого воспользуйтесь командой Save for Web & Devices (Сохранить для веб и устройств) (см. главу 4).

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Анимация

Из книги Эффективное делопроизводство автора Пташинский Владимир Сергеевич

Анимация Анимация (оживление слайда) делает презентацию более привлекательной. Это – как спецэффекты в хорошем фильме жанра экшн.PowerPoint располагает огромным количеством вариантов анимации. Доступ к средствам анимации осуществляется на вкладке Анимация ленты. Здесь вы


Анимация слайдов

Из книги 3ds Max 2008 автора Верстак Владимир Антонович

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


Анимация частиц

Из книги 300 лучших программ на все случаи жизни автора Леонтьев Виталий Петрович

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


Графика и анимация

Из книги Реферат, курсовая, диплом на компьютере автора Баловсяк Надежда Васильевна

Графика и анимация


10.2. Анимация в презентации

Из книги Macromedia Flash Professional 8. Графика и анимация автора Дронов В. А.

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


Анимация и видео

Из книги Видеосамоучитель создания реферата, курсовой, диплома на компьютере автора Баловсяк Надежда Васильевна

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


Глава 12 Трансформационная анимация

Из книги 3ds Max 2008 на 100 % автора Верстак Владимир Антонович

Глава 12 Трансформационная анимация А теперь настала пора познакомиться с трансформационной анимацией. То есть с тем, в чем так силен Macromedia Flash.Подробно о трансформационной анимации рассказывалось в главе 1. Давайте вспомним, что это такое. Мы рисуем всего два ключевых


Многослойная анимация

Из книги Как заработать на фотографии в Интернете автора Зьомко Ольга

Многослойная анимация Ну что ж, начнем с самого простого — с многослойной анимации, т. е. анимации, состоящей из нескольких анимированных элементов, находящихся на разных


11.2. Анимация в презентации

Из книги Графика DirectX в Delphi автора Краснов Михаил

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


Глава 6 Анимация

Из книги Офисный компьютер для женщин автора Пастернак Евгения

Глава 6 Анимация ? Анимация с использованием ключевых кадров? Анимация частиц? Практическое задание. Повращаем шестеренками? Практическое задание. Наш ответ Голливуду – заставка в стиле кинокомпании UNIVERSAL? Практическое задание. Лейся, фонтан!Анимацию можно представить


6.2. Анимация частиц

Из книги Описание языка PascalABC.NET автора Коллектив РуБоард

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


Видео и анимация

Из книги автора

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


Вкладка Анимация

Из книги автора

Вкладка Анимация Переходим к следующей вкладке ленты – Анимация (рис. 3.76). Рис. 3.76. Вкладка Анимация Здесь вы сможете задать способы перехода от слайда к слайду и всяческое движение во время показа слайда. «Всяческое движение» – это когда из угла слайда выплывает


Графика и анимация

Из книги автора

Графика и анимация Анимация без мерцания Данная программа иллюстрирует применение процедур LockDrawing и Redraw для реализации анимации без мерцания:uses GraphABC;beginLockDrawing;for var i:=1 to 500 dobeginWindow.Clear;Brush.Color := clGreen;Ellipse(i,100,i+100,200);Redraw;Sleep(1);end;end.Основная идея состоит в следующем: отключим


Анимация без мерцания

Из книги автора

Анимация без мерцания Данная программа иллюстрирует применение процедур LockDrawing и Redraw для реализации анимации без мерцания:uses GraphABC;beginLockDrawing;for var i:=1 to 500 dobeginWindow.Clear;Brush.Color := clGreen;Ellipse(i,100,i+100,200);Redraw;Sleep(1);end;end.Основная идея состоит в следующем: отключим рисование на экране,