Рисуем и анимируем прыгающий мячик.

Рисуем и анимируем прыгающий мячик.

Шаг 1. Новый документ

Создаём новый флеш-файл, Action Script 2 – дня нас будет ОК, потому что мы не будем использовать Action Script

Шаг 2. Настройки документа

Найдите «свойства» у себя внизу страницы, и щёлкните на кнопку с указанием размеров. Задайте своему документу заголовок, и размер видимой после публикации области. Цвет фона я оставил белым, но задал количество кадров в секунду равным 21, это сделает анимацию быстрее и плавнее.

Шаг 3. Слой

Порядок и организация – ключевой момент при работе с флеш, так что перед тем как мы начнём рисовать наш мячик, назовём слой. Двойной клик на «Layer 1» и называем его «Мячик» (“Ball”).

Шаг 4. Мячик

Выберите «Oval Tool» - инструмент «Овал», задайте цвет заливки и обводки как показано на картинке, и нарисуйте ровный овал (удерживая «Shift»). Также, в инспекторе свойств задайте толщину обводки равной 3 пикселя.

Шаг 5. Создание символа

Используя символы во флеш, вы можете создавать множество копий одного объекта в пределах одного файла. Все символы доступны в библиотеке символов (Window > Library). Если вы вносите изменения внутри символа, они применяются ко всем его копиям в пределах вашего файла.

Сделаем символом нашу окружность, которая затем станет мячиком. Выделите всю окружность с обводкой, и нажмите F8. Назовите его “mc_ball” и выберите тип «Movie Clip», щёлкайте «ОК».

Шаг 6. Тень

Создайте новый слой, перетащите под слой с мячиком. Назовите его «Тень» ("Shadow").
Внутри первого кадра на этом слое нарисуйте овал, чтобы сформировать тень от мячика. Удалите обводку, и задайте цвет овала #E2E0E5. Сконвертируйте тень в символ, как делали только что с мячиком, и назовите её “mc_shadow”.

Шаг 7. Позиционирование (Выравнивание)

Поставьте символы по высоте грубо на глаз, так как будто положение мячика сейчас на земле. В окошке выравнивания (Window > Align) включите «To Stage» (относительно сцены) и выровняйте оба символа горизонтально.

Шаг 8. Добавление ключевых кадров

Мы создали наши символы в их основном виде, теперь давайте приступим к их анимации. Удерживая “Shift” щёлкните на 20 кадре на обоих слоях. Нажмите F6 (сконвертируйте 20-е кадры в ключевые). Ключевой кадр на временной шкале означает, что там что-то происходит. Эта точка будет у нас концом анимации. Другими словами на протяжении этих 20 кадров мячик будет подпрыгивать с земли, достигать наивысшей точки, и возвращаться на место. Аналогично, тень тоже будет изменяться – она будет светлеть, когда мячик будет над землёй, и снова возвращать насыщенность, когда мячик будет на земле.

Шаг 9. Наивысшая точка

Теперь давайте сделаем кадр, в котором мячик будет достигать своей наибольшей высоты. Выбираем 10 кадр с шифтом, и щёлкаем F6

Шаг 10. Двигаем!

Пока наш курсор в 10 кадре, двигаем символ мячика наверх, как нам нравится.
Выбираем инструмент «Free Transform Tool» и делаем символ с тенью шире.

В заключение, пока выбран символ с тенью, идём в «Color» на панели свойств, и делаем прозрачность символа 30%

Шаг 11. Tweening (Вствка промежуточных кадров)

Tweening – это когда флеш автоматически генерирует промежуточные кадры между несколькими символами или формами.
Мы собираемся сделать твин на первой половине анимации – между первым и 10 кадром.
Щёлкните на любом кадре между 1 и 10, и в панели свойств выберите Tween: Motion. Вы заметите изменения – область между кадрами стала пурпурной.

Шаг 12. Easy Tiger

Подвигайте слайдер назад и вперёд по временной шкале, и вы увидите, что мячик и тень приятно анимированы.
Скорость движения, однако, абсолютно равномерная. Мы хотим, чтобы мячик замедлялся по мере достижения наивысшей точки, и мы можем сделать это с лёгкостью (ease – в переводе легкость)

Снова – выберите любой кадр между 1 и 10 на обоих слоях (на области с твином), и обратитесь к панели свойств. Измените Tweening на Ease out с параметром 100. Это сделает замедление нашего поднимающегося мячика.

Шаг 13. Возвращение на землю

Мы успешно анимировали подъём мячика, теперь давайте повторим шаги твининга для кадров 11-20. На этот раз параметр ease установите in -100, чтобы наш мячик ускорялся при приближении к земле.

Шаг 14. Проверяем!

Нажмите Ctrl + Enter, и можете посмотреть на анимацию мячика, которую мы так долго делали. Это должно выглядеть так:

Шаг 15. Экстра прикосновение реализма

В случае, если наш мячик сделан из чего-то более гибкого, чем алмаз, форма мячика будет изменяться, при столкновении с землёй он будет сплющиваться. Давайте добавим последний кадр, он будет 21-м (F6). Находясь на этом кадре, используйте инструмент «Free Transform Tool», чтобы сплющить символ мячика с верхнего края. Удерживайте клавишу «Alt» чтобы зафиксировать нижнюю границу при трансформации.

Шаг 16. Внимание к деталям

Наша анимация прыгания готова. Теперь нам нужно добавить дополнительные детальки и движение нашему мячику. Щёлкните дважды на символе с мячиком в любом из ключевых кадров, чтобы попасть во временную шкалу этого символа. Вы увидите своё местоположение внизу временной шкалы (прим. – для 9 флеш, но в других версиях вы тоже увидите, может, в другом месте). Вложенность должна быть такой: "Scene 1, mc_ball."

Шаг 17. Второй слой

Щёлкните на иконку «Добавить новый слой», и создайте второй слой поверх слоя с кружком. Скопируйте мячик с первого слоя (Ctrl + C) и вставьте в те же координаты (Ctrl + Shift + V) на новом слое. Теперь назовите нижний слой "Ball Spinning" («Вращение мячика»), а верхний слой "Shade” («Тень»). Закройте слой "Ball Spinning".

Шаг 18. Вырезание

Работаем на слое с тенью. Сделайте где-нибудь на рабочей области круг большого диаметра, отличного от мячика цвета.

Разместите большую окружность над мячиком, так, чтобы немного жёлтой области внизу осталось не закрыто большим кругом, и было похоже на тень.
Зафиксируйте все объекты (щёлкнув мышкой на пустое место например)

Теперь выберите большую окружность снова, и нажмите «Delete». Если вы кладёте друг на друга не сгруппированные и не сконвертированные в символ объекты, вы комбинируете их, объединяете, подобно тому, как это происходит с пикселями в растровых редакторах.
После того, как вы удалили большую окружность, остался только небольшой кусочек маленькой жёлтой окружности, который и будет тенью на окружности. Удалите обводку вокруг него, и покрасьте полумесяц в цвет #E2E0E5

Шаг 19. Матовость тени

Так как этот полумесяц у нас выполняет функцию тени, было бы хорошо сделать для него «Multiply Opacity» (режим смешивания с фоном – умножение). Чтобы это сделать, нам нужно конвертировать его в мувиклип (вы кажется это уже делали).

Нажимаем F8 и называем "mc_ball_shading" (имена становятся всё хитрее). Обратитесь к панели свойств, и поставьте «Blend» в «Multiply». Превосходно!

Шаг 20. Проверяем!

Нажимаем Ctrl + Enter, и наслаждаемся тем, как работает наша анимация, которую мы так долго делали. Должно быть так:

Шаг 21. Дополнительные действия с векторами

Покончив с тенью, мы можем закрыть слой «Shade» (можено также сделать его невидимым, чтобы облегчить работу), и отомкнуть слой "Ball Spinning". Мы собираемся добавить на мячик узор, чтобы придать ему вид пляжного мячика. Используя «Oval Tool» нарисуйте где-нибудь на рабочей области большой овал. Сделайте его с обводкой в 1 пиксель белого цвета (#FFFFFF) и без заливки.

Шаг 22. Удаляем излишки

Разместите эту обводку как показано на картинке, и зафиксируйте. Теперь выберите часть обводки, которая вне мячика, просто кликнув по ней. Как мы уже наблюдали на примере полумесяца-тени, объекты все пересеклись, и разрезались точками пересечения. Удалите внешнюю часть обводки (Delete)

Шаг 23. Повторение и раскрашивание

Нарисуйте ещё пару аналогичных овалов и поставьте их поверх круга-мячика, так, что они где-то пересекутся. Удаляйте внешние части овалов. Овалы не обязательно должны быть одинаковыми, просто постараётесь сделать что-то похожее, как на картинке ниже. То, что вы сделали, это сегменты, которые теперь можно раскрасить индивидуально.

Шаг 24. Проверяем!

Покрасьте образовавшиеся сегменты в цвет #EA512D и удалите все кусочки белой обводки с рисунка. Нажмите Ctrl + Enter, и наслаждайтесь результатом того, что мы так долго делали. Должно быть как-то так:

Шаг 25. Как мячики вращаются

Давайте добавим заключительную порцию движения в нашу анимацию, сделаем мячик медленно вращающимся во время прыжков. Чтобы это сделать, для начала нам нужно сконвертировать в символ мячик на слое “Ball Spinning” – назовём этот символ "mc_ball_base". Вы можете увидеть, что он добавился в библиотеку (Window > Library).

Шаг 26. Добавляем кадры

Выберите 32 кадр на слое "Spinning Ball", и нажмите F6, чтобы создать ключевой кадр. Затем на 32 кадре на верхнем слое с тенью нажмите F5. Это создаст новые кадры, но так как там ничего не изменяется, ключевые кадры на слое с тенью нам не нужны. Нам нужно только, чтобы когда слайдер будет проходить по всем кадрам, символ с тенью присутствовал везде.
Почему мы выбрали 32 кадр? Чтож, сделав так, мы хотим, чтобы наш мячик проворачивался 1 раз за 32 кадра. Наш мячик стукается о землю каждые 20 кадров, так что такая рассинхронизация анимаций будет смотреться неплохо, мячик будет стукаться о землю с разной картинкой на нём каждый раз. Если не понятно сейчас, вы поймёте позже.

Шаг 27. Твин с вращением

Выберите любой кадр на временной шкале на слое с мячиком, и обратитесь к панели свойств. Как мы уже делали с прыганьем мячика – устанавливаем Tween: Motion. На этот раз нам не нужен “Ease”, нам нужно чтобы мячик плавно и монотонно вращался.
Выберите «CW» (Clockwise - по часовой стрелке) из выпадающего спичка «Rotate», и оставьте значение «1» в поле «times» - это число означает, сколько раз повернётся объект.
Конечно слой "Shade" тут не при делах, тень будет оставаться на одном месте всё время.

Результат!

Ура, вы это сделали! Нажмите Ctrl + Enter, чтобы убедиться что всё так, как вы хотели. Если вам нужны изменения – вы можете менять количество кадров, размеры мячика, сколько он будет поворачиваться вокруг своей оси и т.д.

Этот урок рассчитан на то, чтобы дать вам понимание:
* Временной шкалы во флеш
* Слоёв
* Поведения инструментов векторного рисования во флеш
* Иерархии флеш-символов и объектов
* Моушен-твина

Дата добавления: 2015-09-29