Мини-лекции 28. Анимация

Владимир Сысолятин
   АНИМАЦИЯ, от английского animation и латинского animatus «ЖИВОЙ», «ОДУШЕВЛЁННЫЙ». Остальное понимайте как знаете?! Мультики смотрели? Вот оно и есть. Собственно любое кино та же анимация, где-то в чём-то? Не обошла она и компьютерные технологии и в том числе WEB-дизайн. Хотя... По большому счёту это развлекаловка и не более. Но раз уж... Куды ж теперь деться?! Одним словом, всем этим грязным делом занимаются две программы! Одна крутая, а другая так себе... Крутая, это Macromedia Flash, а так себе Adobe ImageReady. Если честно, то Flash я никогда не занимался, даже в глаза не видел. А вот отмазаться от Image не получилось, как-никак это Adobe и вдобавок входит в комплект с Фотошопом. Правда есть недостаток (для меня) для Image нет русификатора?!

   Но основное не это, а то, что принцип создания и прочего в программах разный! Не даром же анимация от Macromedia это Flash-анимация. Image же создаёт анимацию на основе GIF-форматов, поддерживающих именно анимацию. Стало быть это GIF-анимация! На ней и остановимся. Итак Photoshop7 и стало быть ImageReader7. А так-как всё родило Adobe, то и интерфейс почти такой же как у Фотошопа! Вот на рисунке с левого края панели инструментов Фотошопа и рядом (укорочено) Имаге. Внизу панели маленькая картинка. Как только Вы наведёте на неё указатель мышки, так картинка оживёт и станет цветной. А щёлкнув по ней Вы перейдёте с программы на программу. С Photoshop на ImageReader и наоборот, c имаговской панели в Фотошоп. Всё барахло в окне Фотошопа окажется в окне имаге!

   Не откладывая в долгий ящик создадим свою анимацию. Ну скажем работающий светофор как на рисунке рядом с панелью Имаге. Нам зелёный свет (цвет). Что для этого нужно? Немного. Три одинаковых картинки. Для полной иллюзии две копии первой картинки. Но с пустыми окошками светофора. Затем залить их цветом: зелёным, жёлтым и красным. Всё это делается в Фотошопе. Далее, там же создаём слои. Я за основу брал светофор зелёный. Остальные мышкой перетягивал на него, сначала жёлтый, а потом красный. В палитре слоёв Вы и видите всю банду рис4! Сохраняете всё это в формате PSD (фотошоповском). Первый этап закончен. Переходим в ImageReader. Если сдуру файл PSD не окажется в окне, через File — Open поищите куды Вы его спрятали? И как только, так сразу Вы его светофор увидите, но только одного цвета! А, ниже так называемую палитру АНИМАЦИИ рис1. Там тоже будет один светофор. А, где же остальные? Чтобы их вытащить на свет божий нужно через пимпочку в верхнем правом углу вытащить меню рис3. И начиная с единички создайте Вашу анималку.

   Щёлкаем по Make Frames From Layers. Сразу же появятся остальные светофоры рис2. Перейдём на следующую опцию Select All Frames, все светофоры потемнеют, активируются. Далее нам предстоит сделать два выбора: выбрать длительность свечения фонаря каждого цвета и режим показа анимации. Для Выбора времени существует меню рис1а. Чтобы оно появилось, щёлкните по направлению указателя рис2. Меню предлагает варианты. No delay — нет никакой задержки, время равно 0 как на рис1. Стандартные варианты от 0,1 сек. и до 10 сек. Other... — другое время задержки. Щёлкнув по опции, Вы вызовите диалоговое окно с Вашим предложением времени задержки, скажем 0,08 сек. Так-как у нас чисто учебный вариант, то я назначил для всех светофоров одно и тоже время 2.0 сек. Для настоящего светофора конечно нужно время другое вообще и жёлтого в частности. Если Вы хотите задать для каждой картинки своё время, не нужно делать общее выделение, а без выделения назначить каждой картинке своё время задержки.

   Следующим шагом, выбор количество повторов просмотра анимации. Для этого вызовем меню щёлкнув по чёрному треугольничку как показывает указатель рис1. Вам три варианта. Once — один раз. Forever (For ever), — непрерывно. Последний — Other... — другое. Количество прокруток (показов). После того как Вы всё выбрали, выделяете всё [Select All Frames]. Следующее действие — оптимизация. Опция — Optimize Animation. После чего можно сохранить файл в формате GIF. File — Save Optimized As... Теперь можете открыть файл в программе смотрелке, в том числе и в стандартной от WINDOWS.

   Авторам ПРОЗЫ для размещения своего произведения на страницах нужно файлу поменять пол. Шутка! Нужно поменять расширение файла с gif на Jpg! Как? В файловом менеджере. Вопрос в каком? Их развелось... Нортон Коммандер, Волков Коммандер, Windows Commander, Total Commander, FAR Manager и др. К сожалению я про все возможности всех не знаю? Но Windows Commander и его переименованная версия Total Сommander могут! Долгое время менеджер существовал как WINDOWS Сommander, вдруг майкрософику стукнула в голову и он закатил истерику по поводу названия... Изобретатели менеджера не захотели судебных разбирательств и переименовали его в Total! Типа пусть подавится своими Windowsами! Total стал немного продвинутым, но думаю Вам это ни к чему? Навык по смене расширений Вам может пригодиться в будущем. Есть хонурики прячущие свои файлы, дают расширение типа Имя.avi.part, а программы не понимают и разводят руками?! Удаляете .part и всё поехало...

   Вместо светофоров можете любые фотографии вставить. Желательно, чтобы размер у всех был один и тот же. А при оптимизации вес (объём) не превышал 300 кб. Это для ПРОЗЫ! Если у Вас прорезался талант художника, то Вам можно заняться настоящей анимацией, скажем как на странице: http://proza.ru/2016/07/03/1127

   На рис5 Заяц? А на рис6, в ImageReader палитра анимации и последовательные картинки движения зайца. Всего картинок 13. На рис6 не вместились все... Это было уже готовое произведение, файл с расширением .gif изменённое в менеджере на .jpg