Меню сайта
Категории раздела
Самосовершенствование [3]
упражнения, разминки, планирование
Рисуем и моделируем [9]
путь новичка
Инструменты [4]
Изучаем всё то, с чем работаем
Мои ссылки
  • Новый проект Ufo&MIR
  • Дизайн-магазин
  • Поиск
    Статистика


    Суббота, 19.08.2017, 12:06ГлавнаяМой профильРегистрацияВыходВход
    Добро пожаловать в мой MIR!
    Вы вошли как Гость | Группа "Гости"Приветствую Вас Гость | RSS
    Главная » Статьи » Развитие » Рисуем и моделируем

    Простая анимация во Flash
    Анимация во Flash
    Часть 2
    Привет! Поясню, почему это часть 2. Просто у меня есть информация, где описаны виды анимации во flash Рисование и анимация во Flash. Тут же обращаю внимание, что для анимации в этом уроке потребуется умение применять Классическую анимацию. Приступим!

    Ресурсы: Flash CS6

    Для работы нам потребуется персонаж, которого будем анимировать. Кошку я рисовала во Flash. Как рисовать в данной программе, можно посмотреть в уроке Учимся рисовать во Flash. Если нарисуете сами, то это будет хорошей практикой, повторить прошлые занятия.

    Краткое описание рисования персонажа
    Для анимации нам потребуется персонаж с отдельными частями рук, ног, лап и т.д. Герой не должен быть цельным, потому что нам надо движущие части тела анимировать. Но, соединив все части вместе, надо получить цельную картинку.

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

    Кошка по слоям

    Рисунок 1 - Кошка и слои частей тела

    А теперь покажу, как эта же кошка выглядит, если разделить части и разместить их на сцене.


    Запчасти кошки

    Рисунок 2 - Кошка по запчастям

    Итак, здесь я зря отделила шею от головы и туловища, в дальнейшем я ее объединю с головой. Учусь на ошибках :-)
    Если персонаж готов и его можно как конструктор собрать в единое целое, то приступим к дальнейшему моменту... А это - КОНВЕРТАЦИЯ.

    Да! Теперь выделю каждую часть и конвертирую в Graphics. Мувиклипы тяжеловеснее, поэтому сейчас они мне тут ни к чему.

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


    Конверт в Graphics во Flash
    Рисунок 3 - Окно создания из рисунка Graphics

    Кратко, как конвертировать. Выделяем нужный объект, затем Контекстное меню и выбираем Конвертировать в ... (нужное вписать).  Вот на рисунке видно, что на окне написано в symbols. Именно здесь мы и выбираем, что нам надо: clip (movie clip), graphics.

    Идем дальше.
    Вот, самая соль, из-за чего мы тут все и собрались. Время расставить #ТОЧКИ.
    Назовем Graphics контейнером, так вот, у каждого контейнера есть точка вращения. Если мы нажмем на контейнер, то увидим маленькую круглую точку внутри. Эту точку нам нужно расположить в зоне суставов, потому что именно они вращаются. Таскать точку можно с помощью инструмента Select (это стрелочка указатель, позволяющая производить трансформацию объектов и находится она на панели инструментов)
    А теперь посмотрим на картинке, как эти точки выглядят и куда я их поставила.


    Точки вращения в Graphics
    Рисунок 4 - Расположение точек вращения

    Так как шея вместе с головой, то ее точка вращения на плечах. Туловище перекрыло шею, поэтому ее точку не видно.

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

    Итак, возьмем хвост

    Анимация и вращение во Flash
    Рисунок 5 - Анимация и вращение

    Вот я повращала все запчасти. Обратите внимание на рамку вокруг хвоста, если поднести курсор к углу, то увидете, что курсор изменил вид и готов вращать объект.
    Кратко об анимации и вращении.
    1) Берем и ставим ключевой кадр на таймлайн (см. картинку 5) , к примере на 12 кадре
    2) На ходясь на этом кадре, повращаем объект и выберем для него новое положение, не сдвигая контейнер с места
    3) Между первым ключевым кадром и 12 кадром ставим классическую анимацию.
    ВСЁ, и так до конца, сколько душе угодно. Вращаем каждую конечность тела.

    Результат работы
    Удачи!
    Категория: Рисуем и моделируем | Добавил: halenka (09.02.2016)
    Просмотров: 170 | Теги: graphics, cat, точка вращения, вектор, анимация, flash | Рейтинг: 5.0/1
    Всего комментариев: 0

    Copyright MyCorp © 2017