Открытка "Год Дракона"
Часть 2.

Первая часть - ЗДЕСЬ.

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

У нас будет 4 вида анимации.
И анимация разная по времени движения и видимости кадров.
Смысл такой:
Весёлый дракоша вбегает и своим волшебным сверканием освещает
прилетевшие вместе с ним шары с цифрами нового года.
Затем, дракоша убегает, забирая с собой шарики.
При этом ветки постоянно блестят.


Отчего будем отталкиваться.
От анимации веток. Это анимация идёт непрерывно с одинаковым интервалом времени.
А это значит, что увеличивать интервал времени для других анимаций мы будем
путём добавления кадров без смены видимости слоёв.

Приступим.

1. Открываем панель анимации.
Метод - постоянно
Задержка времени - 0,1 сек.
С такой скоростью будет идти анимация веток.

Убираем видимость слоёв с драконом и с шарами.



2. На первом кадре у нас видимость без дракоши и шаров.
Это момент между появлением и уходом дракона.
Но у этого момента должен быть определённый отрезок времени.
Дракон не может появиться с одной стороны сразу после ухода с другой.
Если бы не было анимации веток, то мы для первого кадра сменили задержку времени ,
сделали больше, например 15сек. и всё.

Нам же эти 15 секунд нужно разложить на кадры.
Поэтому, не меняя видимость слоёв, мы дублируем первый кадр до тех пор
пока в панели анимации не будет 15 кадров.
Дублирование производится нажатием второй иконки справа внизу панели анимации.



3. Создаём 16 кадр тем же способом
(вторая иконка справа внизу панели анимации)

1)Открываем видимость слоя с драконом.



2) Выделяем слой с драконом и слои со сверканием глаза
(как выделять слои читайте ЗДЕСЬ)



3) Связываем выделенные слои
(меню - слои - связать слои)



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

4) Перемещаем связку слоёв так, чтобы осталась видимость небольшой части дракона.



4. Создаём 17 кадр.
Перемещаем связку ближе к середине, увеличивая видимость дракоши.



5. Создаём 18 кадр и перемещаем связку так,
чтобы дракоша оказался на середине документа.



1)Отменяем связку слоёв
(меню - слои - отменить связь слоёв)



2) Открываем видимость слоя "шары".



Наш дракоша встал на исходную позицию и готов показать своё мастерство сверкания глазом.

6. Блики и сверкание глаза.

Сейчас предельное внимание, чтобы не запутаться.

1) Открываем видимость первого слоя сверкания глаза
и первого слоя блика.



2) Создаём следующий кадр.
Открываем видимость второго слоя сверкания глаза.
Больше никаких изменений не делаем.



3) Создаём следующий кадр.
Закрываем видимость второго слоя со сверканием глаза.
Закрываем видимость первого слоя с бликом шаров.
Открываем видимость второго слоя с бликом шаров.



4)Создаём следующий кадр.
Закрываем видимость первого слоя со сверканием глаза.
Больше никаких изменений не делаем.



5)Создаём следующий кадр.
Открываем видимость первого слоя сверкания глаза
Закрываем видимость второго слоя блика шаров.
Открываем видимость третьего слоя блика шаров.



6)Создаём следующий кадр.
Открываем видимость второго слоя сверкания глаза.
Больше никаких изменений не делаем.



7)Создаём следующий кадр.
Закрываем видимость второго слоя со сверканием глаза.
Закрываем видимость третьего слоя с бликом шаров.
Открываем видимость четвёртого слоя с бликом шаров.



8)Создаём следующий кадр.
Создаём следующий кадр.
Закрываем видимость первого слоя со сверканием глаза.
Больше никаких изменений не делаем.



Цикл отображения всех бликов завершён.
Он у нас занял 8 кадров.
Но этот цикл нужно повторить ещё пару раз.

7. Повторения цикла анимации.

1) Находясь на последнем 25 кадре, зажимаем клавишу Shift
и делаем клик по 18 кадру - началу цикла.
Этим действием мы выделяем все кадры цикла анимации.



2) Открываем список опций в панели анимации
(стрелочка вниз в верхнем правом углу панели анимации)
Выбираем "скопировать кадры"



3) Ещё раз открываем список и выбираем "вставить кадры"



4) Откроется окошко, оставляем по умолчанию -
вклеить после выделенной области.



В панели анимации стало на 8 кадров больше.



5) Ещё раз вставляем кадры, т.е. повторяем 3 и 4 подпункты.
В итоге в панели анимации 41 кадр.



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



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

8. Уход дракона.

1) Создаём следующий кадр.
Закрываем видимость 4 слоя с бликом и слой "шары"
Переходим на слой с драконом и перемещаем его правее.



2) Создаём следующий кадр.
Ещё правее перемещаем дракона.



На этом создание кадров закончили.
42 кадра - много, но оно того стоит, как я думаю.

Нам осталось расставить видимость слоёв с блёстками веток по кадрам.

9. Блёстки веток.

1) Переходим на первый кадр в панели анимации.
Открываем видимость первых слоёв с блёстками нижних и верхних веток.



2) Переходим на следующий кадр.
Открываем видимость вторых слоёв с блёстками.



3)Переходим на следующий кадр.
Открываем видимость третьих слоёв с блёстками.



4) Начиная с 4 кадра видимость слоёв с блёстками веток повторяем.
4 кадр - первые слои
5 кадр - вторые слои
6 кадр - третьи слои
7 кадр - первые слои и т.д.
Так как у нас количество кадров не кратно 3,
то на 43 кадре открываем видимость вторых слоёв с блёстками.



Включаем просмотр и любуемся своим творением.
Если всё устраивает топаем сохранять свой шедевр.

10. Оптимизация и сохранение анимации.

Для версий CS3 и выше:
Меню - файл - сохранить для Web и устройств

Для версий CS2 и ниже переход в приложение Image Ready

Я работаю в CS5 и сохранять буду пользуясь окном оптимизации,
в которое попадаем после нажатие на
"сохранить для Web и устройств".

Такс, у меня стоят сильные настройки оптимизации
(на скрине обвела красным),
которые лучше всего сохраняют качество цвета, но вес - караул - больше 3,5мб.



Попробуем поменять настройки на
селективная, регулярный.
Вес уменьшился больше чем на 1мб.



Но какое качество у изображения?
Как оно будет выглядеть в интернете?

Мы сейчас посмотрим.
Для этого жмём на просмотр внизу окна оптимизации.



Изображение загружается и открывается в браузере.
Меня устраивает то, что я вижу, поэтому возвращаюсь в окно оптимизации
и сохраняю анимацию, нажав на "сохранить".



А можно сохранить и из браузера, сделав клик правой кнопкой мыши,
выбрать - сохранить изображение как...



Вот и всё.
Родные душат вас в объятиях, стол накрыт,
домашние животинки с гордостью смотрят на вас - хозяин(ка) ГЕНИЙ!!!
В общем, как всегда.

А я пошла принимать 300...нет, в отличии от Коровьева, я глотну 500 капель
эфирной валерьянки и сосну с чувством исполненного долга.

С наступающим годом Дракона, друзья!

С теплом, Ольга Бор.

УРОК ВЗЯТ ЗДЕСЬ