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

[450x460]

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

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

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


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

Приступим.

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

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

[364x492]

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

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

[550x75]

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

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

[550x498]

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

[185x372]

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

[280x584]

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

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

[550x418]

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

[550x531]

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

[550x536]

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

[255x600]

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

[550x540]

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

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

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

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

[550x520]

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

[550x503]

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

[550x517]

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

[550x524]

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

[550x522]

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

[550x512]

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

[550x538]

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

[550x492]

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

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

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

[600x101]

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

[492x262]

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

[340x240]

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

[417x176]

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

[550x114]

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

[550x105]

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

[550x120]

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

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

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

[550x383]

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

[550x515]

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

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

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

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

[550x545]

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

[550x534]

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

[550x534]

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

[550x530]

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

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

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

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

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

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

[550x554]

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

[550x568]

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

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

[550x422]

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

[511x382]

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

[550x514]

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

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

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

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

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