Untitled Document

Лабораторная работа 7
Создаём документ и задаём желаемые размеры. Количество кадров в секунду («Frame rate») я задаю равным 20, чтобы анимация была плавнее.
Начинаем рисовать. Я начинаю с фона – то есть в данном случае с неба.
Рисую прямоуголник, размером на всю мою флешку:
Далее, создаю новый слой, и рисую снежные холмики. Вначале рисую одним цветом, светло-серо-синим, затем конвертирую полученные холмы в символ (щёлкам правой кнопкой по нарисованному, и выбираем «Convert to Symbol…»). Дважды щёлкаем по полученному символу – заходим внутрь (при этом видим наш фон и прочее окружение). Внутри этого символа я создаю новый слой, и на этом новом слое рисую тени для объёма:
Тут нам пригождается градиент, уходящий в прозрачность.
Возвращаемся на главную временную шкалу (или туда, где у нас всё происходит – слои с небом и снегом, это всё тоже удобно делать внутри символа).
Теперь будем рисовать ёлочки. Создаём новый слой, и рисуем ёлочку где нам хочется. Делаем набросок, и конвертируем в символ. Затем, внутри символа работаем дальше – если нужно, создаём слои, рисуем тёмные и светлые области. Слои в таких символах я обычно не называю, там всё просто и запутаться невозможно. Но вот символам давать осмысленные имена очень советую!
Я поленилась, и нарисовала всего 2 разновидности ёлок.
Но я применила пару уловок, позволяющих мне прикрыть свою лень, и избавиться от ощущения того, что ёлки одинаковые и просто скопированы.
1. трансформируем их. Вытягиваем, наклоняем, расширяем, масштабируем – лишь бы только смотрелось естественно.
2. меняем оттенок. Это делается изменением свойства Color: Tint, на панели свойств символа:
Выбираем какой-нибудь цвет, и задаём небольшой процент применения этого тонирования (у меня тут стоит 20%). Для разных ёлок варьируем цвет и процент интенсивности, и получаем разные ёлки.
Ёлки, как видно на последнем скриншоте, я расставила на холме и за холмом. Каждую ёлку делаем на своём слое. Ёлки, которые «за» холмом находятся на слое ниже слоя со снегом, а ёлки на холме – выше.
Ёлки на заднем плане размыты, и также немного размыт холм. Размытие делается фильтром:
Можете менять степень размытости по осям X и Y. В нашем случае лучше, если размытие по обоим осям будет одинаково, но если нужно создать размытие как бы в движении, то можно указать значение размытия по одной оси, оси движения, а по второй оси выставить «0».
Далее мне показалось, что на заднем плане пустовато, и я на слое ниже всех ёлок дорисовала схематично тёмные силуэты ёлочек:
Много силуэтов мне опять же было рисовать лень, и я, сконвертировав все их в символ, скопировала этот символ, вставила на новый слой, и отразила его по горизонтали (в верхнем меню Modify -> Transform -> Flip Horizontal), измелила масштаб, подвигала, изменила прозрачность до 50% и выбрала режим смешивания Overlay:
Режим смешивания – очень интересный и полезный параметр, он позволяет добиться красивых результатов. На данном примере этого практически не видно, но далее, в этом проекте мы увидим другое наглядное и очень красивое ему применение.
Ёлки готовы, теперь для разнообразия на двух новых разных слоях я рисую берёзу и какое-то деревце:
Я рисую планшетом, кистью разной ширины. Можете попробовать то же самое делать мышкой, флеш сглаживает линии, так что в нём рисовать довольно-таки удобно, на мой вкус.
Добавим ещё один элемент, для придания глубины пейзажу – тёмно-синюю волну, рисуем её пером:
Наверное, нам наскучило рисовать, давайте займёмся пока анимацией.
Убеждаемся в том, что все вышеописанные элементы нарисованы на разных слоях и сконвертированы в символы.
Теперь делаем простыми движениями «сборку» нашего пейзажа
Фон остаётся неизменным.
Первым выезжает снег:
Перемещаемся по временной шкале до 22 кадра, и щёлкаем F6 (создаём новый ключевой кадр). На этом новом кадре финальное положение нашей земли. Идём теперь к 1 кадру, и там двигаем землю вниз (стрелочкой «вниз» на клавиатуре, либо тащим мышкой, или же можно в свойствах увеличить координату Y). Теперь ещё задаём прозрачность (Alpha, на панели свойств) символу земли равной «0». Выделаем участок временной шкалы от 1 до 22 кадра, и щёлкнув по промежуточному кадру, выбираем «Create Motion Tween».
Теперь земля у нас плавно выезжает.
Далее работаем по очереди со всеми элементами, добавляя в начало пустые кадры – варьируем время появления элемента на экране, и делаем его выезжание.
Пустые кадры можно добавить вперёд так: щелкаем на кадр, и перетаскиваем его вперёд, и впереди появляется белый прямоугольник с точечкой – пустой кадр. Клавиша F5 позволяет добавить кадры (не ключевые, как бы продлить один кадр).
Если мы хотим сделать как бы выскакивание объекта, нам поможет параметр твина Ease:
(чтобы увидеть эти свойства, надо щёлкнуть на временной шкале на любой промежуточный кадр твина).
Таким вот простым образом мы заставляем нашу открытку собираться по частям. Некоторые элементы просто появляются из прозрачности, например берёза и деревце, потому что выпрыгивание в их случае выглядело бы неуместно. Варьируйте в кадрах время появления разных элементов, на ваш вкус.
Итак, теперь у нас есть пейзаж, и он собирается по частям, но хоть он и выглядит симпатично, он скучноват. Новый год всё-таки)))
Добавим радости. Начнём хотя бы с луны.
Рисуем круг (инструментом Oval Tool, удерживая Shift). Задаём градиент для заливки, на этот раз тип градиента не «Linear», а «Radial». Цвета я выбрала светло-серо-голубые, ближе к зелёной области, чтобы луна была желтовата:
Луна у нас конечно на отдельном слое, и сконвертирована в символ. Делаем для неё размытие (фильтр «blur»).
Далее, чтобы сделать картинку веселей, я рисую непонятную спиральную фигню в небе 
Внутри она выглядит так:
Ещё одна интересная вещь – это тип линии. Я нарисовала спираль пером, и для обводки изменила свойства. Такой тип очень напоминает снег. Кнопочка «Custom» позволяет поиграться с настройками конкретного типа обводки.
На главной временной шкале я сделала анимацию появления этой спирали из прозрачности, изменила способ наложения («blend» на панели свойств) на «Screen», задала прозрачность. Затем сделала анимацию выезжания луны из центра этой спирали (начальное положение луны в центре спирали, уменьшенное и прозрачное). После появления луны спираль уходит в прозрачность.
Луна вышла, и озаряет светом наш пейзаж. Для этого на новом слое мы рисуем светлые области на снегу и на ёлках, и конвертируем их в символ:
Символ делаем слегка размытым.
Теперь анимируем наш свет – на временной шкале от начала выезжания луны, до того момента, как она занимает своё место, делаем появление этого света из прозрачности.
Чудеса начались. Теперь наша задумка в том, что по небу пролетает Санта, и ёлки украшаются игрушками, гирляндами, озаряются светом, и с неба сыпятся подарки.
Хоть нам и лень, но теперь придётся всё это отрисовать
На новом слое начинаем рисовать игрушку – рисуем к примеру один круглешок. И конвертируем его в символ. Называем его «игрушки». Теперь заходим внутрь, и опять конвертируем круглешок в символ – называем, к примеру, «красный шарик» - это будет символ отдельной игрушки. И уже внутри этого символа детализируем игрушку
Я делаю мазки разными цветами: темнее основного в той области, где тень, яркими и сочными близкими цветами – там где свет, + белым блик.
Нарисовав игрушку, возвращаемся в символ «игрушки», например, перейдя по ссылке:
В символе «игрушки» снова рисуем круглешок, уже другого цвета. Или игрушку любой другой формы. Конвертируем в символ, и внутри детализируем.
Вот здесь видно все мои игрушки, их несколько разных, и копии, развешенные на ёлках. На ёлках вдали игрушки должны быть меньше размером – просто масштабируйте их.
Ещё я поставила небольшой кистью разноцветные точки на ёлках, чтобы было больше цветных пятнышек.
Также, я нарисовала наконечники двух типов – звезду и такой вот, жёлтый.
Украсив наши ёлки игрушками и верхушками, приступим к гирлянде.
Возвращаемся на главную временную шкалу, и создаём новый слой.
Я выбрала инструмент карандаш, и снова на панели свойств сменила тип линии, на этот раз выбрав линию из точек. Затем нарисовала дуги на лапках ёлок таким точечным карандашом:
Теперь конвертируем все эти линии в символ, называем его «гирлянда». Затем уже этот символ конвертируем ещё раз в символ, и называем его «гирлянда, мигание» например. В этот символ заходим внутрь, и делаем там анимацию (motion tween):
На ключевых кадрах твина, кроме первого кадра, меняем свойство символа «Tint» - выбираем разные цвета, и интенсивность делаем 100%. Таких ключевых кадров делаете сколько захотите (у меня 5 разных), но в конечном ключевом кадре не делаем Tint, цвет должен быть точно такой же, как в первом кадре, чтобы не было скачка в анимации.
Ну вот, несколькими простыми движениями гирлянда мигает разноцветными лампочками.
Но мало нам этого, хотим ещё больше праздника
Делаем светсящиеся огоньки на ёлке.
Начнём с зелёных, потому, что я люблю этот цвет). На новом слое, на главной временной шкале, рисуем круг сверху зелёного шарика, с радиальным градиентом от ярко-зелёного насыщенного цвета, к прозрачному (цвет такой же лучше выбирать, а потом понижать его прозрачность до «0»).
Конвертируем его в символ, называем «зелёное свечение шарика», например. Затем его опять конвертируем в символ, называем «зелёное свечение шариков». Заходим внутрь, копируем это свечение, и расставляем по всем зелёным шарикам. И по зелёным точечкам, уменьшив размер свечения, и прозрачность. На дальних ёлках всё в уменьшенном масштабе.
Теперь тут же, в символе «зелёное свечение шариков», создаём новый слой, и перетаскиваем его в самый низ. На этом слое рисуем прямоугольник на всю область открытки, и заливаем зелёным. Уменьшаем прозрачность цвета до 10%.
Этот прямоугольник у нас сделает так, чтобы вся открытка как бы озарялась светом от шариков.
Возвращаемся на главную временную шкалу, берём символ «зелёное свечение шариков», и конвертируем его в символ «свечение шариков».
Заходим внутрь.
Создаём новый слой. Берём зелёное свечение с первого слоя (ctrl+C), щёлкаем на втором слое, и вставляем в те же координаты (ctrl+Shift+V).
Теперь, щёлкнув по копии правой кнопкой, выбираем «Duplicate Symbol». Вводим имя, например, «красное свечение шариков». Заходим туда внутрь, и меняем цвет большого прямоугольника на красный, тоже с прозрачностью 10%. Шарики со свечением на другом слое нам уже не нужны, но вначале возьмём один, и тоже сделаем duplicate. Назовём «красное свечение шарика», и удалим всё. Красное свечение шарика перетащим из библиотеки, положим сверху какого-нибудь красного шарика, и, чтобы сделать его-таки красным, а не зелёным, зайдём внутрь, и изменим цвета градиента.
Затем вернёмся назад, в символ «красное свечение шариков», и расставим там красные свечения на красные шарики.
Утомительно, не правда ли? Но красота требует жертв. В символе «свечение шариков» можете сделать столько слоёв с разными цветами, сколько захотите, впринципе, с двумя цветами уже разнообразно.
Затем делаем красоту и анимацию:
Вначале, для каждого свечения на каждом слое установите blebd = overlay. Тут этот режим смешивания проявит в большой степени свою красоту и полезность.
Затем, сделайте так, чтобы каждый цвет свечения появлялся и исчезал по очереди. (3 ключевых кадра, 1-прозрачный, 2-без прозрачности, и 3-прозрачный).
Временная шкала этого символа выглядит как-то так:
на разных слоях разные цвета.
Свечение готово. На этом мы покончили с ёлками.
Теперь нарисуем подарки, на сколько фантазии хватит. На разных слоях и в разных символах.
Всё, что мы нарисовали, нам нужно будет санимировать и расставть по времени на временной шкале, так, чтобы казалось, что всё это падает с неба и появляется, вслед за полётом Санты.
Ах да, мы кое-что забыли. Санту.
Вот как он выглядит на самом деле, но вы наверняка не сумели его рассмотреть, пока смотрели открытку, потому что лень – верный мой спутник на протяжении всей этой работы. Чтобы было незаметно, что олени не передвигают ноги – Санта летит очень быстро. Летит он по гайду:
А на третьем слое у меня на последнем кадре написано stop(); (в ActionScript, «F9»).
Итак, Санта летит. На главной временной шкале размещаем его так, чтобы он вылетал чуть позже, чем взошла луна и осветила наш пейзаж. Пока он летит, делаем анимацию для ёлочных игрушек, они все вместе летят сверху из прозрачности, параметр ease у этого motion tween’а я поставила -100 для плавности. Огоньки-свечения шариков и гирлянды выплывают просто из прозрачности. Подарки сыпятся сверху – внчале те, что лежат левее, затем более правые. Анимацию падения падарков я делала в отдельном символе для каждого подарка:
На первом слое анимация как подарок летит сверху вниз (начальное состояние просто вверху, без прозрачности, ease = -100). На втором слое снег вокруг падарка. Я брала цвет пипеткой с фона, который виднеется внутри символа – это засвеченный цвет фона. И рисовала снег, так, будто подарок погрузился немного в снег. Анимация тут, на втором слое, длится недолго, там снег появляется из прозрачности, этого не заметно на глаз, но это позволяет избежать появления снега рывком.
На третьем кадре as, написано stop();
Ещё в открытке есть салюты. Вообще у нас на форуме есть хорошие уроки по программным салютам, но мне не хотелось их копировать, не разобравшись, а разбираться тоже не хотелось, поэтому я решила сделать салют сама, средствами анимации. Это оказалось дольше, чем мне бы хотелось, и не так интересно выглядит, но я для полноты описания расскажу и про салюты из круглешков.
Рисуем кружок, и делаем его анимацию – на первом кадре твина кружок совсем маленький, на последнем больше раз в 5, подвинут вправо и прозрачный. Это получается одна частица салюта. Чтобы сделать разлетающиеся от центра таки частицы, берём одну, конвертируем в символ. На этом символе создаём новый слой, копируем в те же координаты 1-ю частицу, перекрашиваем её с помощью свойства «Tint», и поворачиваем, в меню Transform выставляем Rotate = 30 градусов. То есть считаем, что частиц у нас будет 12, делим 360/12 и получаем 30. И так на 12 слоях поворачиваем на 30, 60, 90 и т.д. градусов нашу частицу, попутно перекрашивая её в разные цвета.
Затем этот символ, с разлетающимися частицами, снова конвертируем в символ, и на разных слоях, с небольшой паузой, копируем его, чтобы частица разлетались из центра почаще. А этот уже символ готового салюта копируем и размещаем в разных местах на открытке.