Основы рисования и анимации часть-1 ~ Lesson flash

четверг, 7 февраля 2008 г.

Основы рисования и анимации часть-1

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


Работая во Flash следует помнить о некоторых особенностях, часть из них похожи на другие векторные редакторы, а есть присущие только Flash.


Из предыдущих выпусков вы узнали, что у Flash есть возможность рабо-тать с разными слоями (как работать со слоями и как использовать разные типы слоев Вы узнаете из следующих выпусков), но и работая только в одном слое мы имеем дело с несколькими уровнями. Хотя разделения нет, но необходимо отчетливо представлять, с каким уровнем мы имеем дело.


Так называемый рабочий уровень (stage-level): к нему относится все, что мы создаем в процессе работы, т.е. то, что создали с использованием инстру-ментов рисования. Все объекты этого уровня оказывают непосредственное влияние друг на друга (об этом чуть ниже).


И второй уровень (overlay-level) - наложенный: его отличие от предыдуще-го состоит в том, что ему принадлежат все самостоятельные объекты. Такие как; готовые символы библиотек - кнопки, анимационные клипы, импортиро-ванная графика, неразбитый текст и преобразованные в группы объекты рабо-чего уровня. Любой объект наложенного уровня располагается над объектом рабочего уровня, но в тоже время может быть на разных уровнях к объектам своего уровня. Кажется, я понял, что Вы поняли, что я понял, что Вы не поняли :-) Говоря проще, любой объект наложенного уровня можно расположить таким образом, чтобы он находился над другим объектом наложенного уровня, либо под ним. Достигается это следующим образом: выделяем объект наложенного уровня и удерживая клавишу Ctrl, нажимаем на клавиатуре стрелку вниз или вверх в зависимости от того где хотим расположить объект. Любые попытки проделать тоже самое с объектами рабочего уровня не приведут к успеху. Здесь мы встречаемся с основным отличием от других векторных программ.


Дело в том, что взаимодействие объектов рабочего уровня довольно спе-цифично. Вначале это может вызвать затруднение но, освоившись с принципа-ми работы во Flash, Вы сможете использовать это для своей пользы. Итак, рас-смотрим данные особенности. Объединение - любая фигура с однотонной за-ливкой и не имеющая границ, наложенная на другую фигуру с теми же харак-теристиками, после снятия выделения, образует единое целое. Используя дан-ный прием можно составить сложные фигуры из готовых объектов. Почему же происходит склеивание фигур? Ответ прост. Как я уже писал в одном из выпус-ков - все, что создано во Flash хранится в виде математических формул описы-вающих объект. Таким образом, налагая одну фигуру на другую с теми же ха-рактеристиками, в одном слое, мы производим сложение формул, в результате которого образуется новая формула описывающая получившуюся фигуру. Сег-ментирование - если на фигуру будет наложена другая фигура, но с отличными характеристиками, например другого цвета, то склеивания не произойдет. При-нимая во внимание математическую основу векторной графики во Flash ясно, что происходит вычитание различных характеристик. При попытке выделить составленный таким образом объект, простым щелчком мыши, мы выделим только одну из его частей. Разделение произойдет и в том случае если мы, на-ложив фигуры с одинаковыми характеристиками, не снимая выделения, пере-местим наложенную фигуру в сторону от места наложения. В результате из фи-гуры оставшейся неподвижной, будет вырезан кусок области, которая совпада-ла с перемещенной фигурой.


Теперь небольшое задание. Используя полученные знания, нарисуйте шес-теренку, пользуясь всего двумя окружностями разного диаметра. Надеюсь, у Вас это не вызвало затруднений? А, теперь попробуйте нарисовать тоже самое, но обычными средствами. Сколько времени у Вас займет подобное творчество и каким будет результат? Кстати, подобный прием во Flash дизайне называется cookie-cutter (форма для нарезки печенья).


Еще один вариант использования разделения. Нарисуем любую замкнутую фигуру с однотонной заливкой. Теперь, пересечем ее карандашом или прямой линией. В результате, части заливки разделенные чертой, стали самостоятель-ными фигурами, с которыми можно работать отдельно. После изменения само-стоятельных заливок, черту можно убрать и получить фигуру с новыми харак-теристиками закраски. Этот прием называется slicing (деление на части). И сно-ва задание. Нарисуйте трехцветный мячик, использую метод разделения чер-той. Причем, задание можно усложнить, нарисовав один мячик с параллельной закраской, а второй с разделением на сегменты.


Любые элементы рабочего уровня легко превратить в объекты наложенно-го уровня, достаточно их сгруппировать - выделить элементы инструментом Arrow, и сгруппировать Modify / Group [Ctrl+G]. Сгруппированные элементы, можно располагать так же, как и объекты наложенного уровня над, или под другими объектами. Следует учесть, что для изменения группы можно исполь-зовать только инструмент Arrow с его модификаторами (поворот, изменение размера и перемещение), другие инструменты не оказывают на группу никако-го влияния. Группу можно разгруппировать Modify / Ungroup [Ctrl+Shift+G]. При этом все элементы группы становятся объектами рабочего уровня и дос-тупными для изменения любыми инструментами.


Раз уж речь зашла об инструменте Arrow, с помощью которого можно из-менять размеры объектов, поговорим о другой возможности влиять на размер (Размер имеет значение… :-) ). Итак. Изменять размер фигуры можно двумя способами. Изменением масштаба и заданием точного размера. Изменения масштаба: Window / Inspectors / Transform, в появившемся окне в полях Scale вводим значение размера в процентах (меньше 100 - уменьшить, больше 100 - увеличить), в поле Rotate угол поворота. Галочка Uniform отвечает за измене-ния масштаба по обеим координатам, если ее снять, то можно задавать мас-штаб, как для ширины, так и для высоты объекта. У галочки Skew, те же функ-ции, но для поворота. Преобразовать объект после задания характеристик кнопка Apply, Copy - копирует редактируемый объект, а кнопка Reset - возвра-щает исходные значения установок. Точный размер: Window / Inspector / Object [Ctrl+Alt+I], открывает уже знакомое нам окно, но на закладке объекта. Вообще данный инспектор позволяет не только задать точный размер объекта, но и ука-зать его точное местоположение на сцене, что немаловажно при дизайне. В по-лях W и H мы задаем ширину и высоту объекта, а в полях X и Y его месторас-положение с верхнего левого угла. Галочка Use Center Point позволяет перемес-тить начало координат в центр. Следует отметить одну особенность. Когда мы работаем со сгруппированными объектами, то все изменения параметров ска-зываются индивидуально на каждом элементе группы, а не на объекте в целом. Однако если мы применяем изменения к символу, взятому из библиотеки или преобразованным (не путать с группировкой) в символ объектам, то мы работа-ем именно с этим символом, а не с его составляющими.


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


Нарисуем любой рисунок, использую приемы cookie-cutter и slicing. Щелк-нем на первом кадре Timeline, прямоугольник символизирующий кадр станет черного цвета с белым кружочком, а нарисованная фигура будет выделена. За-дадим начало анимации Insert / Create Motion Tween, штриховка символизи-рующая выделение нарисованных фигур будет снята, а вокруг объекта появится общая рамка выделения. Следует заменить, что нарисованный нами рисунок в этом слое автоматически будет преобразован в символ и помещен в библиотеку (о работе с библиотеками в следующих выпусках). Щелкнем на любом кадре Timeline (например на 30-ом), кадр станет синего цвета. Создадим ключевой кадр Insert / Keyframe [F6], выбранный кадр станет черного цвета с белым кру-жочком, т.е. он станет ключевым (кадром в котором задаются параметры изме-нения анимации), а между предыдущим и созданным кадром будет нарисована стрелочка на голубом фоне символизирующая анимацию. Оставаясь в послед-нем кадре, перенесем нарисованный объект, в другое место.


Все! Ваш первый фильм готов. Братья Люмьер будут кусать локти от за-висти :-) Посмотрим его Control / Test Movie [Ctrl+Enter].


А теперь, немного усложним анимацию.


Находясь в последнем кадре, измените размеры объекта, а при желании и его наклон. И больше от вас ничего не требуется, все преобразования между кадрами Flash выполнит автоматически.


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


И напоследок маленькое домашнее задание, результаты можно не присы-лать, пусть их оценят Ваши домашние.


Проиллюстрируем выражение - "Идти на все четыре стороны" :-)


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

Комментариев нет: