Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Прыгающий мячик


Рисуем и анимируем прыгающий мячик.
Шаг 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, чтобы убедиться что всё так, как вы хотели. Если вам нужны изменения – вы можете менять количество кадров, размеры мячика, сколько он будет поворачиваться вокруг своей оси и т.д.
Этот урок рассчитан на то, чтобы дать вам понимание:
* Временной шкалы во флеш
* Слоёв
* Поведения инструментов векторного рисования во флеш
* Иерархии флеш-символов и объектов
* Моушен-твина


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (1)

#1 написал: DeNRiX | 3 августа 2009 11:46
     

Хороший, эффективный урок)
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.