Золотая рыбка анимация

Золотая рыбка". Отрисовка и анимация во флеш

Цитата сообщения Та_ещё_штучка_Я Прочитать целикомВ свой цитатник или сообщество!
"Золотая рыбка". Отрисовка и анимация во флеш.

Урок для Flash CS5.

В первой его части мы будем заниматься отрисовкой персонажа во флеш.Во второй части урока - его анимацией.

Урок не сложный, но кропотливый. Рисуем вот такенную золотую рыбку. )

Часть первая -"Отрисовка".

Итак, запускаем, открываем новый документ и, ничего не меняя в стандартных настройках программы, импортируем картинку непосредственно в рабочую область (на сцену)

Вот моя картинка. Она в формате JPG, что совершенно не принципиально. Вы можете импортировать свою рыбку и в формате PNG.

Создаём новый слой. Нижний с рыбкой блокируем (ставим замочек)

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

Отрисовку начнём с создания контуров для каждого фрагмента. Здесь участвуют два инструмента. Это карандаш и выделение (стрелочка)

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

На скрине вы видите подъинструмент карандаша в виде этакой линии-молнии. Называется он - выпрямление. То есть, как бы мы не "измывались" над прорисовкой, программа упрямо будет выпрямлять наши каракули. ) Так же можно воспользоваться подъинструментом Сглаживание. Здесь аналогичный случай - программа нам в помощь! )

Ещё один немаловажный момент. Отрисовка контура выполняется без отрыва карандаша от сцены, а так же контур закрывается в той точке, откуда вы начали отрисовку.

Слева от панели инструментов расположена панель свойств. Выбрав инструмент карандаш, откройте панель свойств и определитесь с толщиной линии. В последующем мы так же имеем возможность отредактировать толщину контура, или же удалить его вовсе.

Итак, взяли в руки карандаш и сделаем нечто подобное. )

Пусть вас не смущает такое начало. Продолжаем работать. Берём инструмент Выделение(V).

Наведите курсор на одну из линий и, удерживая левую клавишу мыши, оттяните линию правой клавишей мыши. Тем самым получаем нужный изгиб.

В случае если линия выделилась, картинка потянется за курсором целиком. Чтобы сбрость выдение обводки, кликните мышкой в свободное от обводки пространство.Если же вы всё сделаете правильно, линия изогнётся, как на скрине.

Таким способом, оттягивая линии, обводим контур тела рыбки.

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

Создав новый слой, выделим его и, кликнув в пусте место на сцене, правой клавишей мыши выбираем "вставить на место".

Затем, выделив слой со вторым плавничком и, заблокировав слой с первым плавничком,идём в шапку проги. Далее - Модификация" - "Преобразовать" - "Отразить слева на право".

В результате мы получаем следующую картинку, а также панель слоёв с контуром всех фрагментов рыбки.

Не удаляйте импортированную картинку до конца урока. Закрывайте, или же блокируйте её по необходимости. Теперь займёмся заливкой наших контуров. Откройте видимость первого слоя с импортированной рыбкой и методом подборки определитесь с основной цветовой гаммой.Или же подберите свой цвет заливки.В панели инструментов выбираем "заливку" (ведёрко с краской). Далее по скрину.

Выделяем слой с контуром - заливаем его на сцене. Предупреждение! Если ваш контур не закрыт, заливка будет невозможна. Чтобы избежать подобных нюансов, активно пользуйтесь инструментом "лупа", или же сочетанием клавиш "Ctrl +"Залив контур, идём в палитру инструментов. Здесь меняем инструмент "свободное преобразование" на "преобразование градиента". Ткнув курсором в залитый контур, аккуратно работаем выбранным инструментом.

Таким образом заливаем каждый контур.

Добавляем слои и дорисовываем фрагменты рыбки. А именно, глазик, жабры,чешую и прочие мелкие детали. Для удобства блокируйте и закрывайте соседние слои.

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

В панели инструментов выбираем карандаш и настраиваем цвет обводки. В панели свойств редактируем толщину обводки.

Теперь будем доводить до ума детали мелкие и не очень, а именно применять фильтр.Но! Эффект фильтров не применим к графическим объектам. Чего нельзя сказать за фрагменты ролика. Выделяем слои, где преобразование просто необходимо. На скрине показан пример с чешуйчатым слоем. Выделяем слой. Правой клавишей мыши выбираем "преобразовать в символ".

В выпавшем окошке выбираем "фрагмент ролика". По желанию даём ему имя.

Выделив ролик на сцене, идём в панель свойств и открываем папочку "фильтры".

Кликнув на маленькую иконку внизу панели фильтров, выбираем один из. Вы можете самостоятельно поэксперементировать с каждым. Результат применения будет очевиден непосредственно на сцене. Для начала я выбрала фильтр "тень".Затем - "градиентное свечение". Настройки смотрите на скрине.

В завершении можно применить фильтр "градиентная маска".

Выделив слой с жабрами ( в одном числе)),преобразуем его в фрагмент ролика и также применим к нему фильтры.

На скрине мои настройки фильтра "фаска".

Проделайте подобные изменения с другими слоями. В результате мы имеем вот такую красотулину. )

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

На скрине вы видите рисунок на плавнике брюшка. Слой с рисунком расположен над слоем с самим плавничком. Встаём на этот слой. Кликаем курсором в пустое место на сцене и правой клавишей мыши выбираем "вставить на место".

Точно так же мы поступаем с другими слоями. В результате у нас должны остаться только 6 слоёв.

Выделите слой "тело". На сцене выделяться все детали слоя. Выделяем их и правой клавишей мыши выбираем "группировать".

Протестируйте каждый слой и при подобном раскладе поступите аналогично.

Удалите первый слой с импортированной картинкой. Она нам больше не понадобится.
Подготовка для анимации завершена. Сохраните отрисованную рыбку в формате fla.

Также вы можете экспортировать картинку в формате swf и в дальнейшем импортировать её в программу Sothink SWF Quicker. Отрисовку можно выполнять в любой флеш-проге, так же, как и дальнейшую анимацию.Разница лишь в интерфейсах программ и способах анимирования.

Спасибо за внимание и успехов вам в творчестве.

Оригинал урока отсюда + моя детализация. )

http://demiart.ru/forum/index.php?showtopic=182886

liveinternet.ru

"Золотая рыбка". Отрисовка и анимация во флеш.Часть 1

Урок для Flash CS5.

В первой его части мы будем заниматься отрисовкой персонажа во флеш.Во второй части урока - его анимацией.

Урок не сложный, но кропотливый. Рисуем вот такенную золотую рыбку. )

Часть первая -"Отрисовка".

Создаём новый слой. Нижний с рыбкой блокируем (ставим замочек)

Итак, взяли в руки карандаш и сделаем нечто подобное. )

Пусть вас не смущает такое начало. Продолжаем работать. Берём инструмент Выделение(V).

Таким способом, оттягивая линии, обводим контур тела рыбки.

В результате мы получаем следующую картинку, а также панель слоёв с контуром всех фрагментов рыбки.

Таким образом заливаем каждый контур.

В выпавшем окошке выбираем "фрагмент ролика". По желанию даём ему имя.

Выделив ролик на сцене, идём в панель свойств и открываем папочку "фильтры".

В завершении можно применить фильтр "градиентная маска".

Выделив слой с жабрами ( в одном числе)),преобразуем его в фрагмент ролика и также применим к нему фильтры.

На скрине мои настройки фильтра "фаска".

Проделайте подобные изменения с другими слоями. В результате мы имеем вот такую красотулину. )

Точно так же мы поступаем с другими слоями. В результате у нас должны остаться только 6 слоёв.

Протестируйте каждый слой и при подобном раскладе поступите аналогично.

Спасибо за внимание и успехов вам в творчестве.

Оригинал урока отсюда + моя детализация. )

http://demiart.ru/forum/index.php?showtopic=182886

liveinternet.ru

"Золотая рыбка".Анимация отрисованной рыбки. Часть 2

Цитата сообщения Та_ещё_штучка_Я Прочитать целикомВ свой цитатник или сообщество!
Урок "Анимация отрисованной рыбки". Часть 2.

Часть вторая - анимация рыбки.Открываем ранее сохранённую отрисовку.

Фрагменты рыбки у нас расположены на отдельных слоях. Первое, что мы сделаем - соберём фрагменты на один слой. Встаём на слой с плавником ( он у меня самый нижний).Выделяем его. Далее установив курсор на выделенном фрагменты, правой клавишей мыши выбираем "вырезать"(как вариант - "копировать").

Встаём на слой, где мы соберём все фрагменты. У меня это слой "тело". Выделяем его. Кликаем курсором в пустое от картинки место на сцене и правой клавишей выбираем "вставить на место".

Наш плавничок встал на первом плане, т. е. на фрагменте с телом. Переместим плавничок на задний план. Выделяем его, не касаясь фрагмента "тело" и, правой клавишей выбираем "упорядочить" - "поместить на задний план".

Таким образом перетаскиваем все фрагменты рыбки на слой "тело". Пустые слои удаляем - складываем в "корзину". Выделив оставшийся слой, вы увидите, что каждый фрагмент остался самостоятельным, т.е. не слитым с окружающими фрагментами.

Идём в шапку проги.Далее: "Модификация" - "Группировать".

На сцене фрагменты нашей рыбки сгруппируются в единое целое.

Кликаем по рыбки дважды и оказываемся внутри "группы слоёв".

Встаём( выделяем) один из фрагментов ( у меня это хвост рыбки.). Правой клавишей мыши выбираем "преобразовать в символ".

В выпавшем окошке выбираем "фрагмент ролика". Можно дать имя слою, что не принципиально.

Кликаем по хвостику и попадаем внутрь ролика.

Снова преобразуем хвост в ролик.

Стоя на первом кадре слоя, идём в панель инструментов и выбираем "свободное трансформирование". Курсором перемещаем центр трансформации в основание хвоста.

Встаём на 50-й кадр слоя и образуем ключевой кадр с помощью комбинации клавиш Ctrl +F6. Выделяем весь слой и в шапке проги идём: "вставка" - "классическая анимация движения".

Встаём на 25-й кадр слоя. Жмём комбинацию клавиш Ctrl +F6 и немного поджимаем хвост по вертикали.

Отредактируем нашу анимацию. Встаём на первый кадр. Открываем панель свойств и начинаем колдовать. Развернули треугольничек с заголовком "Анимация".

Устанавливаем значение "замедление" на -100. Знак минус означает замедление анимации. Положительное число значит её ускорение.

Кликнем на карандашик справа и "отредактируем замедление".

У нас откроется окошко с кривой анимации.

Если снять галочку в окошке "Использовать один параметр для всх свойств", то можно создавать различные кривые ускорения для разных свойств (кадров).

Возвращаемся в группу. Тестируем анимацию хвоста.Переходим к следующему фрагменту. Анимируем верхний плавничок. Выделяем его и правой клавишей выбираем "преобразовать в символ". В выпавшем окошке выбираем "фрагмент ролика".

Дальнейшие действия с гребешком аналогичны действиям с анимацией хвоста.Таким образом анимируем остальные плавнички рыбки.После того, как вы проделали всю работу с плавничками возвращаемся на монтажный кадр, где рыбка выделена целиком.На нашем единственном слое кликаем по 80-му кадру. На клавиатуре кликаем F6.

Выделяем слой. Далее в шапке проги: "Вставка" - "Классическая анимация движения".

Ставим F6 на 18 кадре и в этом кадре немного приподнимаем рыбку с помощью стрелок на клавиатуре.

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

Так же самое редактируем 18-й кадр.

Тестируем анимацию и экспортируем готовый ролик.

Урок окончен. Успехов вам в творчестве!

liveinternet.ru

"Золотая рыбка". Отрисовка и анимация во флеш.

Урок для Flash CS5.

В первой его части мы будем заниматься отрисовкой персонажа во флеш.Во второй части урока - его анимацией.

Урок не сложный, но кропотливый. Рисуем вот такенную золотую рыбку. )

Часть первая -"Отрисовка".

Создаём новый слой. Нижний с рыбкой блокируем (ставим замочек)

Итак, взяли в руки карандаш и сделаем нечто подобное. )

Пусть вас не смущает такое начало. Продолжаем работать. Берём инструмент Выделение(V).

Таким способом, оттягивая линии, обводим контур тела рыбки.

В результате мы получаем следующую картинку, а также панель слоёв с контуром всех фрагментов рыбки.

Таким образом заливаем каждый контур.

В выпавшем окошке выбираем "фрагмент ролика". По желанию даём ему имя.

Выделив ролик на сцене, идём в панель свойств и открываем папочку "фильтры".

В завершении можно применить фильтр "градиентная маска".

Выделив слой с жабрами ( в одном числе)),преобразуем его в фрагмент ролика и также применим к нему фильтры.

На скрине мои настройки фильтра "фаска".

Проделайте подобные изменения с другими слоями. В результате мы имеем вот такую красотулину. )

Точно так же мы поступаем с другими слоями. В результате у нас должны остаться только 6 слоёв.

Протестируйте каждый слой и при подобном раскладе поступите аналогично.

Спасибо за внимание и успехов вам в творчестве.

Оригинал урока отсюда + моя детализация. )

http://demiart.ru/forum/index.php?showtopic=182886

liveinternet.ru

Золотая рыбка анимация

Золотая рыбка". Отрисовка и анимация во флеш

"Золотая рыбка". Отрисовка и анимация во флеш.Часть 1

"Золотая рыбка".Анимация отрисованной рыбки. Часть 2

"Золотая рыбка". Отрисовка и анимация во флеш.

Похожие статьи