Учебный курс Flash 4

выпуск 8

основы рисования и анимации часть-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 выполнит автоматически.

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

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

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

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

Павел Г.Лапин
E-mail: murmik@mail.ru
Россия Мурманск