«TeachPro™ WEB-дизайн Мультимедиа Технологии и Дистанционное Обучение МОСКВА 2006 Мультимедийный самоучитель на CD-ROM: TeachPro™ WEB-дизайн/Под ред. Катхановой Ю.Ф., Гринберг Г.С., Антонова Г., Соловьева И., Суховерхова ...»

Теперь можно взять этот узел, нажав клавишу мыши, и перетащить в другое место. узлы находятся не только на концах, но и на изло МАХ линии, так что потянув за излом возможно изменить положение сразу двух сегментов контура. Если же повести указатель мыши к линии контура, но не к узлу, маркер примет вид дуги, теперь участок контура можно изменить, потянув его мышью, например, таким образом. Точно таким же способом можно модифицировать и заливки. Выберем, например, инструмент Кисть и сделаем мазок на полотне, снова активизируем инструмент Стрелка и подведем ее к краю заливки, теперь заливку можно изменять аналогичным образом, например, вот так. Но вернемся к нашим контурам. Чтобы склеить 2 контура, ухватитесь за узел одного и перетащите его к концу другого, курсор сам должен прыгнуть точно на конец другого контура, а точка привязки обозначится небольшой окружностью.

Отпустите кнопку мыши. Теперь два контура объединились и имеют общий узел. Необходимо помнить, что этот метод работает, если включен Режим объектной привязки Snap в разделе модификаторов — кнопка с изображением магнита. Этот модификатор имеет отдельную пиктограмму на основной панели и является переключателем, заставляющим перемещаемые объекты привязываться к определенным точкам других объектов. Если сделать двойной щелчок по контуру, то он выделится целиком, при одинарном щелчке будет выделен фрагмент от узла до узла.

Теперь имеется возможность контур разделить, перевести выделенный фрагмент на новое место. Отменим операцию. Если удерживая клавишу SHIFT щелкнуть еще на нескольких фрагментах контура, то можно выделить их одновременно. Снять выделение с какого-либо объекта можно не только щелчком на пустом месте, но и клавишей ESC или выполнив команду EDIT DESELECT ALL. Вы, наверное, заметили, что при выборе инструмента Arrow в разделе Options появляются еще два модификатора: Smooth Сглаживание и Straighten — Спрямление. Они имеют дополнительные кнопки на основной панели и становятся активными только при выделении какого-либо объекта.

давайте разберемся с принципами их работы.

Выделим наш контур целиком и для наглядности сделаем 2 копии, к которым будем применять модификаторы. Для этого удерживая клавишу CTRL выполним перетаскивание вниз. Выделим первую копию и применим к ней модификатор Smooth, просто щелкнув по нему несколько раз. Вы видите, что применение этой опции приводит к приданию кривым участкам контура более плавных очертаний. На отрезке прямых, если таковые имеются, модификатор никакого влияния не оказывает. Эта команда доступна также через меню Modify — Smooth.

Теперь выделим вторую копию исходного контура и применим к ней модификатор Straghten. Использование модификатора приводит к спрямлению кривых участков контура. Если применить его многократно, то все кривые участки превратятся в прямые отрезки. Команда меню Modify — Straighten выполняет те же действия. Замечу также, что рассмотренные модификаторы можно применять не только к контурам, но и к заливкам, в чем предлагаю вам убедиться самостоятельно.

Ну и на закуску еще одна небольшая деталь: так, если вы работаете с какимлибо другим инструментом, например, Карандашом, то для временного выбора инструмента Arrow достаточно нажать клавишу CTRL, как только клавиша будет отпущена, снова станет активным выбранный инструмент.

по инструменту Ластик, и нарисуем простую фигуру, например, прямоугольник без контура. Теперь выделим объект инструментом Стрелка и щелкнем мышью по кнопке FREE TRANSFORM или нажмем клавишу Q.

Фигура будет ограничена рамкой с маркерами. Теперь я подведу указатель к объекту, а вы посмотрите, как изменяется вид указателя в зависимости от того, к какой точке объекта я его подвожу. Каждый новый вид указателя говорит об определенной операции, которую можно производить в данный момент. Итак, разберемся по порядку: для перемещения объекта установите курсор поверх него,и когда рядом с указателем появится четырехнаправленная стрелка можно перемещать, только не перемещайте центральный круглый маркер — он предназначен для другой цели; для поворота объекта установите указатель за пределами любого углового маркера и потяните мышью.

Если при перетаскивании удерживать нажатой клавишу SHIFT, то поворот будет происходить с шагом 45 градусов, а при нажатой клавише ALT объект будет вращаться вокруг противоположного маркера; для масштабирования объекта в двух измерениях (ширине и высоте) наведите указатель на угловой маркер и перетащите по диагонали, если при этом удерживать клавишу SHIFT, то размеры будут изменяться пропорционально; для масштабирования только в одном направлении перетащите соответствующий маркер одной из сторон ограничивающей рамки; для наклона объекта поместите указатель на рамку между маркерами и потяните мышью.

Идем дальше. Для того, чтобы исказить форму объекта, наведите курсор на один из маркеров рамки и нажмите клавишу CTRL — вид указателя изменится, и теперь маркер можно перетаскивать в любом направлении, форма объекта будет при этом искажена. Если же навести указатель на угловой маркер и дополнительно нажать клавишу SHIFT (т.е. удерживать одновременно клавиши CTRL и SHIFT), то объект можно как бы сузить или расширить, поскольку смежные углы переместятся на равных расстояниях в противоположных направлениях. Обратите также внимание на круглый маркер в центре рамки, который правильнее назвать трансформирующей точкой, так как все преобразования производятся относительно нее. Эту точку легко перетащить мышью в любое место рабочей области.

Теперь попробуем повернуть объект.

Хорошо видно, что преобразования производятся относительно нового положения трансформирующей точки.Но и это еще не все возможности инструмента FREE TRANSFORM.

Посмотрите на раздел модификаторов панели инструментов. Здесь находятся назначение состоит в том, чтобы ограничить возможности инструмента конкретным видом преобразования. Например, если необходимо только отмасштабировать объект, то включите модификатор Scale — теперь мы сможем только изменять размеры объекта, возможности наклона, поворота или искажения формы будут отсутствовать. Тем самым мы предохраним себя от случайного ненужного преобразования. Включение кнопки Rotate and Scew обеспечит возможность поворота и наклона объекта, другие преобразования будут недоступны. При включенном модификаторе Distort можно будет только искажать форму объекта.

Ну и наконец модификатор Envelope (Огибающее) — он предоставляет совершенно новую уникальную возможность для преобразования формы объектов. При его активизации объект будет ограничен управляющими точками с касательными маркерами. Управляющие точки расположены по углам и в середине сторон рамки. Их допустимо перемещать совершенно произвольным образом. После этого форму огибающей можно изменить также с помощью, касательных маркеров, положение которых определяет направление изгиба и степень кривизны огибающей в данной точке. Короче говоря, модификатор Envelope дает практически абсолютную свободу редактирования выделенного объекта, которая может быть ограничена только вашей фантазией. Все операции подключения модификаторов продублированы в основном меню. Откроем меню. Modify, TRANSFORM.

Команда FREE TRANSFORM активизирует одноименный инструмент, следующие 4 команды включат соответствующие модификаторы этого инструмента. Команда Scale and Rotate имеет некоторую специфику. При ее выполнении появится диалоговое окно, в котором в цифрах можно задать степень масштабирования и угол поворота выделенного объекта, например, если нужно уменьшить объект в два раза и одновременно повернуть его на градусов по часовой стрелке, то введем в верхнее поле 50%, а в нижнее цифру 20. для поворота против часовой стрелки следует ввести отрицательное число.

Щелкнем по кнопке ОК и посмотрим результат. Вернемся к меню Modify и снова откроем подменю TRANSFORM. Здесь имеются также команды для поворота объекта на 90 градусов по часовой стрелке и против часовой стрелки.

Команды FLIP VERTICAL и FLIP GORIZONTAL создают соответственно вертикальное и горизонтальное зеркальные отображения объекта.

Весьма полезные команды для создания симметричных фигур. Ну и наконец команда REMOVE TRANSFORM отменяет последнее преобразование. Есть и другой, более быстрый, доступ к некоторым из перечисленных мною команд.

Для этого щелкните правой кнопкой мыши на объекте, но не на пустом месте, и в третьем сверху разделе контекстного меню вы найдете уже знакомые опции. В заключение хотел бы отметить, что инструмент FREE TRANSFORM и его модификаторы не исчерпывают всех возможностей редактора по преобразованию объекта. для этого могут также применяться вспомогательные панели INFO и TRANSFORM, о них я расскажу на отдельном уроке. Не знаю, как вы, но я слегка утомился перечислять бесчисленные возможности Flash по преобразованию объектов, поэтому объявляется перекур.

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

Для демонстрации его возможностей нарисуем что-нибудь или импортируем какой-либо рисунок из файла. Воспользуемся командой меню FILE, IMPORT и выберем файл доступного графического формата. Пусть это будет растровый рисунок формата.JPEG. После импорта изображение представляет собой единый объект, который можно лишь перемещать, вращать и масштабировать. Прежде чем работать инструментами выделения, его необходимо преобразовать в растровую заливку с помощью команды Modify — Break Apart (Разбить).

Теперь объект доступен для редактирования и выделения редакторами Flash и в частности инструментом Лассо. Пользоваться этим инструментом достаточно просто. Щелкнем на полотне и удерживая кнопку мыши выделим часть рисунка. Закончим выделение отпусканием кнопки мыши. После этого выделенный участок может быть перемещен, масштабирован и т.д., т.е. его можно использовать самостоятельно. С помощью кнопки Отменить вернем рисунок в исходное состояние. Если необходимо выделить одновременно несколько областей, то перед началом выделения нажмите и удерживайте клавишу SHIFT, вот таким образом. Теперь обратите внимание на кнопки, которые появляются в разделе Options при выборе инструмента Лассо.

Модификатор Polygon Mode включает режим многоугольного выделения, при этом каждый щелчок мыши в рабочей области ролика порождает вершину будущего многоугольного выделения. Чтобы завершить выделение следует замкнуть многоугольник, выполнив двойной щелчок мышью. Если перед нами стоит конкретная задача аккуратно выделить нарисованный объект сложной формы, то использовать показанные выше методы весьма затруднительно.

Можно, конечно, попробовать выделить нарисованный болид вручную, но при этом придется изрядно потрудиться и затратить значительное время. К счастью, инструмент Лассо имеет еще один модификатор, который может существенно облегчить решение поставленной задачи — это кнопка Magic Wand (Волшебная палочка).

Этот режим обычно встречается в редакторах растровой графики и предназначен для выделения по цвету. Другими словами, Волшебная палочка выделяет области одинакового цвета на растровом изображении. Выберем модификатор и подведем указатель к рисунку. Вид указателя изменится. Если теперь щелкнуть внутри изображения, то произойдет выделение пикселлов нужного цвета. Поскольку наш объект находится на фоне однородного черного фона, то в данном случае целесообразно выделить именно фон, щелкнув по нему.

Все черные пикселлы фона будут выделены. Теперь преспокойненько нажмем клавишу DELETE и на экране останется наш объект, аккуратно отделенный от фона. Если вас устраивает качество выделения, то теперь объект желательно сгруппировать, предварительно выделив его инструментом Стрелка и применив команду Modify Group. Тем самым мы предохраним рисунок от случайного редактирования при наложении другой графики. О том, что объект сгруппирован, говорит голубой прямоугольник, который появится вокруг него при выделении.

Теперь можно создать новый фон и смело водрузить на него рисунок, не беспокоясь о нежелательном редактировании, например, вот так. Третья кнопка раздела модификаторов инструмента Лассо вызывает окно диалога Настройки параметров Волшебной палочки. Свойство Treshold (Порог) определяет ширину диапазона цветов, которые выделяются инструментом.

Значение параметра находится в пределах от 0 до 200, более высокое число включает более широкий диапазон цветов. Если вы введете 0, то будут выбраны пикселлы только одного цвета. В поле Smoothing выбирается степень сглаживания границы выделения.

Пункт Smooth (Гладкая) означает сильное сглаживание, NORMAL — обычное, Rough — грубое сглаживание, и, наконец, пункту Pixels соответствует полное отсутствие сглаживания, т.е. сохраняется исходный пиксельный рисунок цветовой границы. Давать вам практические рекомендации по установке указанных параметров дело неблагодарное, все зависит от конкретной цели и рисунка, с которым идет работа. имея общее представление о назначении перечисленных опций вы всегда добьетесь нужного результата.

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

А теперь очистим экран и займемся изучением инструментов PEN (Перо) и SUBSELECTION (частичное выделение). Эти инструменты появились в пятой версии Flash и предназначены, главным образом, для рисования и редактирования контуров сложной формы с помощью кривых Безье. Их можно также использовать для редактирования контуров и заливок, созданных другими инструментами.

Для пользователей, кто уже имеет опыт работы в программах векторной графики, таких, как MACROMEDIA FREEHAND, ADOBE ILLUSTRATOR, CORAL DROW, применение этих инструментов не вызовет затруднений.

Инструмент PEN используется для точного рисования сложных траекторий, состоящих из прямых линий и сглаженных кривых, а инструмент SUBSELECTION применяется только для редактирования формы уже нарисованных контуров и заливок. Посмотрим, как они работают. Выберем инструмент PEN. Курсор примет вид пера. Рисовать пером прямые линии очень просто. Для этого достаточно щелкнуть в первой точке, затем во второй и т.д. Для того, чтобы замкнуть многоугольник. Подведите указатель к начальной точке и когда рядом со значком пера появится петля щелкните, при этом замкнутая фигура автоматически закрасится установленным в разделе COLORS цветом заливки. Если вы хотите нарисовать незамкнутый контур, то дважды щелкните по последней точке или выберите другой инструмент, можно также нажать клавишу ESC. А сейчас попробуем изобразить более сложную фигуру с использованием кривых Безье. Прежде чем рисовать настоятельно рекомендую сделать одну полезную настройку. Откроем меню EDIT и выполним команду PREFERENS Предпочтение. Перейдем во вкладку Editing и установим флажок на пункте Show Pen Preview (Предварительный просмотр линии). Подтвердим выбор.

Для удобства рисования отобразим также вспомогательную сетку. Это можно сделать с помощью меню VIEW или же через контекстное меню, щелкнув правой кнопкой мыши и выполнив команду Grid, Show Grid (Показать сетку). Кстати говоря, параметры сетки можно настраивать по своему вкусу. О том, как это делается, будет рассказано на следующих уроках. Щелкнем мышью на полотне для обозначения первого узла контура и переместим указатель. Вы видите, что теперь за указателем тянется линия, хотя кнопка мыши еще не нажата. Это происходит благодаря сделанной установке. Щелкнем в другом месте и не отпуская клавишу мыши выполним перетаскивание, формируя вид кривой с помощью исходящей от узла касательной линии. На концах касательной находятся маркеры кривых Безье.

Их расположение относительно узла кривой определяет направление изгиба и радиус кривизны контура в данном узле. Отпустим клавишу мыши и проделаем ту же операцию с третьим узлом контура, четвертым и, наконец, замкнем кривую, щелкнув мышью на первом узле. Приведем еще один пример и нарисуем незамкнутую кривую, похожую на синусоиду. Щелкнем на полотне для получения первого узла, затем второго и сформируем в этом узле в помощью маркеров Безье одну из вершин синусоиды. Проделаем такие же операции с еще несколькими вершинами и закончим рисование двойным щелчком мыши. С помощью Пера можно также удалить существующий или добавить новый узел. Для удаления подведите указатель к узлу. При этом рядом с указателем появится маленький минус.

Теперь, если произвести щелчок, узел будет удален и вид контура изменится. Для добавления нового узла наведите инструмент на любое место кривой, но не на узел. Рядом с указателем появится знак "+". Это означает, что щелчком мыши в этом месте можно добавить новый узел. Правда, здесь есть ограничение: новый узел можно добавить только на участок сглаженной кривой, на отрезке прямой линии этого сделать нельзя. Теперь мы имеем возможность отредактировать нарисованную кривую с помощью других инструментов. Выберем инструмент SUBSELECTION и разберем его возможности для редактирования контуров. Щелкнув инструментом на любой кривой мы увидим ее узлы, обозначенные квадратиками.

Выделив любой узел, можно его перемещать. Для более точного перемещения выделенного узла желательно использовать клавиши со стрелками на клавиатуре. Имеется также возможность изменять радиус кривизны и направление изгиба кривой в данном узле, используя маркеры Безье, например, вот таким образом. При перемещении одного из маркеров автоматически корректируется и другой так, что их противоположная направленность сохраняется. Но если необходимо расположить маркеры под углом друг к другу, то во время этой операции удерживайте нажатой клавишу ALT. Это позволит расположить векторы искривления под произвольным углом. На контуре при этом образуется излом.

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

Как я уже отмечал, этим инструментом можно редактировать и заливки.

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

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

Но, с другой стороны, если вы посмотрите на Web-страницы, практически на каждой из них в том или ином виде будет присутствовать текст. Он незаменим в надписях меню, на кнопках, полях ввода, при использовании сппециальных эффектов и в ряде других случаев. Разумное применение текста во Flash-роликах позволяет создавать по настоящему интерактивные интернет-приложения.

Инструмент Текст используется совместно с панелью Properties, на которой после его выбора появляется множество опций для настройки текстовых полей. При щелчке в рабочей области при выбранном инструменте Текст будет создано текстовое поле, представляющее собой прямоугольную область. В редакторе существует 3 типа текстовых полей, определяемых на панели Properties во вкладке Text Tipe: статические, динамические и поля ввода. Статические поля предназначены для отображения текста, который не изменяется во время проигрывания ролика, динамические поля отображают текст, который может изменяться по ходу демонстрации ролика (например, при щелчке пользователя по кнопке, перехода фильма в определенный кадр или других действиях), третий тип текстовых полей предназначен не столько для отображения какой-либо информации, сколько для ввода ее пользователем. На этом уроке мы подробно рассмотрим свойства статических текстовых полей, которые применяются чаще всего.

Давайте введем в наше поле пару слов, например, MACROMEDIA FLASH.

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

Если потянуть манипулятор мышью, то поле приобретает фиксированную ширину, и манипулятор в углу становится квадратным. Когда текстовый блок не укладывается в этот размер, будет происходить автоматический перенос слов, поле при этом будет расширяться вниз. Чтобы поле фиксированной ширины снова сделать расширяемым нужно дважды щелкнуть на его манипуляторе. Завершим ввод щелчком на инструменте Стрелка. Текст при этом будет выделен голубой рамкой. Теперь для изменения его параметров необходимо обратиться к панели Properties. Список FONT позволяет изменить шрифт, выбрав любой из установленных на вашем компьютере, например, вот такой. Для изменения размеров шрифта введите нужное значение в поле FONT SIZE или сделайте это мышью, используя ползунок.

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

очень похоже на работу в текстовом редакторе. Кроме того, с помощью панели M допустимо изменять прозрачность отдельных символов или всего текстового блока в целом, устанавливая нужное значение в поле Alfa. Сделаем отмену последних операций. Идем дальше. Для демонстрации других опций создадим еще одно текстовое поле и введем туда две прописные буквы:

Т и А. Выберем инструмент Стрелка и для наглядности немного увеличим размер шрифта. Список Corrector position (Положение символов) кроме варианта Normal (обычный) содержит два эффекта: Superscript (Верхний индекс) и Subccript (Нижний индекс). Выберем снова инструмент Текст, выделим одну букву в текстовом блоке и применим опцию верхнего индекса.

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

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

Если выделить какой-либо текстовый блок и включить кнопку Select table (выделяемый), то это дает возможность пользователю выделять текст вашего ролика для последующего копирования. Убедимся в этом, для чего выполним команду C. Теперь мы можем выделить текст ролика и скопировать его в буфер обмена. Закроем тестовое окно. Обычно нет причин устанавливать опциюSelect table, однако, если вы включили в свой ролик, например, большой кусок программного кода, и хотите распространить его среди пользователей, то можете облегчить им жизнь, включив вышеупомянутую кнопку.

Для дополнительного уменьшения размера файла фильма установите флажок USE DEVICE FONTS (использовать шрифты пользователя). При этом Flash будет сохранять в ролике не начертание букв, а только характеристики и название шрифта. На практике это всего несколько байт.

При воспроизведении будет использован указанный шрифт, если он окажется установлен в системе пользователя, в противном случае Flash использует ближайший по характеристикам шрифт, т.е. в этом случае нет гарантии, что текст на другом компьютере будет выглядеть так же, как на вашем экране. По моему мнению, устанавливать упомянутый флажок необходимо только в крайнем случае, когда ролик содержит большое количество текста — не стоит приносить в жертву дизайн фильма ради уменьшения размера файла.

приобрела такую широкую популярность. Тема анимации весьма обширна. Трудно даже определить с чего начать.

Самое разумное, наверное, идти от простого к сложному. Поэтому этот урок мы посвятим самому простому методу анимации — так называемой покадровой анимации.

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

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

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

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

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

Теперь давайте создадим второй ключевой кадр и сделаем его пустым. Для этого выделим мышью вторую позицию шкалы. И выполним команду Insert — Blank Keyframe пустой ключевой кадр, то же самое можно сделать нажав клавишу F7.

Вы увидите, что рабочая область стала пустой, а маркер переместился во второй кадр. Передвинув маркер обратно, можно снова посмотреть на то, что было нарисовано в первом кадре. Итак, в первом кадре у нас имеется изображение круга, а второй пуст. Вообще-то сейчас мы создали анимацию, хотя и самую примитивную. Если сейчас опубликовать ролик, то мы увидим в нем круг мигающий с частотой 12 кадров в секунду. К сожалению, формат наших видеоуроков не позволяет просматривать плавную анимацию с большой частотой кадров, поэтому для наглядности я сделаю на панели Properties скорость воспроизведения ролика равной 3 кадрам в секунду.

Теперь давайте опубликуем ролик, создав файл с расширением *.swf. Для этого выполним команду Control — Test Movie. Или нажмем сочетание клавиш CTRL+Enter. Вот вам пожалуйста мигающий круг. Закроем тестовое окно и вернемся к основной сцене. Выделим пустой ключевой кадр во второй позиции и удалим его. Выполнив команду Insert — Remove Frames или нажмем сочетание Shift+F5. Снова выдели вторую позицию и проделаем несколько иную операцию. Выполним команду Insert-Keyframe вставить ключевой кадр или нажмем клавишу F6. Теперь во втором кадре мы имеем точную копию первого кадра. Поскольку изображения в ключевых кадрах не зависят друг от друга, мы можем изменить рисунок во втором кадре.

Например, передвинуть его.

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

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

Заключительный кадр в цепочке обычных кадров обозачается белым прямоугольником. Операцию по вставке обычных кадров полезно делать в тех слоях, где объекты не изменяются в течении анимации, например для фона.

Можно, конечно, копировать и ключевые кадры, не меняя содержание в них, но большое количество ключевых кадров в ролике заметно увеличивает его размер. Итак настоятельно рекомендую запомнить три клавиши, которыми вы будете очень часто пользоваться. Клавиша F7 вставляет в выделенную позицию пустой ключевой кадр. Клавиша F6 создает копию предыдущего ключевого кадра. А клавиша F5 заполняет шкалу обычными кадрами, в которых отображается содержание предшествующего ключевого кадра.

А теперь в целях закрепления пройденного материала, создадим простую покадровую анимацию, которая иллюстрирует растущую Луну. Удерживая клавишу Shift, выделим все кадры со второго по 10 и удалим их комбинацией Shift+F5. Перейдем в первый кадр. И удалим из него всю графику. На панели Properties установим синий цвет фона. Выделим вторую позицию шкалы и клавишей F7 вставим туда пустой ключевой кадр. Выберем инструмент Овал.

Определим светло-желтый цвет заливки. И нарисуем круг, котрый будет являться заготовкой нашей Луны. Нажмаем клавишу V, для быстрого выбора инструмента Стрелка. И выделим объект двойным щелчком.

На панели Properties или с помощью панели Info установим диаметр фигуры, равный 100 пикселам. Создадим еще 5 копий второго ключевого кадра. Выделим третью позицию на шкале и нажмем клавишу F6 — эта операция скопирует предыдущий ключевой кадр в выделенную позицию.

Аналогичным образом вставим ключевые кадры в позиции, начиная с 4-ой по 6-ую. Таким образом, мы получили один пустой и пять ключевых кадров с одинаковым изображением. Передвинем маркер во второй кадр и выделим только контур фигуры. Затем переместим контур на 20 пикселов вправо. Это удобно делать с помощью клавиатуры. Удерживая клавишу Shift, дважды нажмем на клавишу со стрелкой вправо. Каждое нажатие переместит выделенный объект на 10 пикселов в соответствующем направлении. Без клавиши Shift контур перемещался бы на один пиксел. Теперь снимем выделение. Вы уже знаете, что при этом контур разрежет нашу заливку на две части. Выделим весь контур и правую часть заливки, и удалим их.

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

Проделаем похожие операции в других ключевых кадрах. В третьем кадре выделим и переместим контур на 40 пикселов. После снятия выделения также удалим лишнюю часть графики. В четвертом кадре переместим контур на пикселов. И затем проделаем те же операции. В 5 кадре сместим контур на пикселов и повторим процедуру. Шестой кадр оставим практически без изменения. Удалим лишь контур фигуры. Теперь протестируем ролик, нажав CTRL+Enter. Как видите, мы получили покадровую анимацию лунных фаз.

Конечно, полученный ролик можно до бесконечности совершенствовать.

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

Вставлять этот пейзаж в каждый ключевой кадр, абсолютно неразумно. Это и трудоемко и заметно увеличит размер файла. Гораздо лучше воспользоваться другим слоем с обычными кадрами. Создадим новый слой, щелкнув по кнопке со знаком +. Программа автоматически создаст в нем кадров для выравнивания слоев по длительности. Первый кадр нового слоя — ключевой, а остальные простые, которые повторяют содержимое ключевого кадра. Перетащим новый слой мышью в нижнюю часть списка.

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

Выберем инструмент прямоугольник и нарисуем соответствующую фигуру.

Выделим и удалим его контур. Затем выберем инструмент Заливка и откроем панель Mixer. Установим линейный градиент и настроим переход цвета от светло-розового до темно-синего. Заполнм фигуру полученной заливкой. И повернем градиент таким образом, чтобы розовый цвет находился внизу. Эту операцию можно сделать и с помощью инструмента Fill Transform.

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

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

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

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

Скобки, ограничивающие шлейф, можно перемещать мышью. И таким образом настраивать область отображения.

При перемещении маркера, перемещаются и границы шлейфа, оставаясь на том же расстоянии от маркера. Щелчок по кнопке Onion Skin Outlines — необходимо модифицировать изображение сразу в нескольких соседних кадрах. Например, после создания ролика вы вдруг захотели изменить размер анимированной фигуры, в данном случае Луны. В обычном случае пришлось бы в каждом ключевом кадре производить масштабирование фигуры и при этом следить, чтобы коэффициент изменения масштаба был одинаков.

Упомянутая кнопка поможет избавиться от этой рутинной работы.

Включим режим Edit Multiple Framesи настроим границы шлейфа так, чтобы они охватывали все кадры анимации. Перетаскиванием инструмента Arrow, произведем выделение объекта. При этом проследим, чтобы черным цветом были отмечены все кадры, которые мы хотим одновременно редактировать. Затем выберем модификатор Scale.

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

Цвет и т.д. Протестируем ролик. Как видите, никаких недоразумений не произошло и синхронность анимации не нарушена. Закроем тестовое окно и выключим режим Edit Multiple Frames. Щелчок по самой правой кнопке данного ряда вызывает меню настроек шлейфа. Его нижняя секция позволяет устанавливать определенное расстояние от маркера до границы шлейфа. Так выбор пункта Onion 2. Определит расстояние в 2 кадра от маркера до границы шлейфа. А Onion All распространит шлейф на все созданные кадры. В этом меню имеется также установка, позволяющая показывать маркеры шлейфа всегда, даже когда режим отображения шлейфа отключен.

И установка закрепляющая границы шлейфа. И, наконец, самая левая кнопка этого ряда Center Frame — центрировать кадр, будет полезна только в том случае, если вы работает с анимацией содержащей большое количество кадров, которые не помещаются в окно шкалы времени. Ну, например, переместим слайдер шкалы и отметим 120 позицию. Клавишей F5 вставим туда обычный кадр. Снова переместим слайдер в исходное положение. Теперь для того, чтобы увидеть текущий кадр с маркером достаточно щелкнуть по вышеупомянутой кнопке. Тем самым вы даете команду редактору передвинуть слайдер так, чтобы текущий кадр находился в середине шкалы. На этом закончим урок и сделаем перерыв.

Рассмотрев основные принципы покадровой анимации, можно переходить к так называемой промежуточной анимации — или раскадровке. Смысл этого названия заключается в следующем: вместо того, чтобы последовательно рисовать все кадры подряд, пользователь рисует только первый и последний кадр анимации, а все промежуточные рассчитывает программа.

В редакторе Flash существуют два вида промежуточной анимации — это анимация формы и анимация движения. На этом уроке мы рассмотрим анимацию формы, или как принято ее называть морфинг, которая позволяет плавно изменять форму объектов. Кому совсем незнаком термин морфинг советую вспомнить или пересмотреть еще раз фильм Терминатор 2 Ссудный день, где многие спецэффекты построены на этом принципе. А теперь на простых примерах начнем разбираться как создается такой вид анимации. Для начала рассмотрим простейший пример, в котором круг плавно превращается в квадрат. Нарисуем в первом кадре круг. Выделим, например, 12 позицию на шкале времени и нажмем клавишу F7, вставив туда пустой ключевой кадр.

Теперь выберем инструмент прямоугольник. И изобразим в этом кадре квадрат. снова выделим первый ключевой кадр. И посмотрим на панель Properties. Сейчас нас здесь интересует раскрывающийся список Tween — тип анимации, в котором по умолчанию выбран пункт None — нет.

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

Морфинг в программе Flash называют анимацией формы. Поэтому выберем в отмеченном списке пункт Shape — форма. Если все сделано правильно, то на шкале времени вся цепочка обычных кадров окрасится в салатовый цвет и по ней пройдет сплошная стрелка, указывающая на следующий ключевой кадр.

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

Сгруппируем, например, фигуру в первом кадре, выделив ее и выполнив команду Modify-Group. Теперь можно убедиться, что анимация формы пропала. Если некорректный объект будет находиться в последнем кадре, то эффект будет тот же самый. Поэтому если у вас морфинг не получается проверьте прежде всего какие объекты находятся в ключевых кадрах анимации. Разгруппируем объект в первом кадре комбинацией CTRL+Shift+G и немного усложним анимацию. Выделим последний кадр. Передвинем прямоугольник. Изменим его масштаб. А также цвет заливки.

Протестируем ролик, нажав CTRL+Enter. Как видите, анимация идет нормально. Объект перемещается, плавно изменяя свою форму и цвет.

Закроем тестовое окно и посмотри какие настройки допускает анимация формы. Вернемся в первый кадр. И обратим внимание на еще два списка на панели Properties ниже параметра Tween. Раскрывающийся список Blend — перетекание, отвечает за гладкость промежуточных форм, получающихся при морфинге.

При выборе пункта Distributive — распределенная, формы получаются более сглаженными, а при выборе пункта Angular — более угловатые. Поле Easing управляет равномерностью анимации. Сюда можно ввести любое число от –100 до +100. При нулевом значении превращение одной фигуры в другую происходит равномерно. при отрицательных значениях анимация начинается как бы постепенно, разгоняясь к концу. Давайте введем максимальное отрицательное число -100 и опубликуем ролик. Заметно, что анимация идет с ускорением. Закроем тестовое окно и введем в это поле максимальное положительное число. Т.е. +100. И снова протестируем ролик. Теперь наблюдается противоположный эффект. Анимация к концу замедляется. С помощью этой настройки удобно создавать такие эффекты как движение с ускорением, торможение и т.д. А теперь поэкспериментируем немного с заливками. Выделим последний кадр.

Обратимся к панели Mixer и установим линейную градиентную заливку.

Настроим, например, красно-белый переход. Затем выполним команду Control-Test Movie и посмотрим, что получилось. Анимация идет корректно.

Сплошная заливка плавно перетекает в градиентную. Закроем тестовое окно.

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

Поэтому следите, чтобы в начальном и конечных кадрах был одинаковый тип градиентной заливки, либо линейная, либо радиальная. Используя свойства плавного перетекания градиентных заливок, можно получить ряд интересных эффектов. Создадим, например, иллюзию перемещения источника освещения объекта. Перейдем к первому кадру, выберем инструмент Заливка, на панели Mixer установим круговой градиент, и настроим переход от белого цвета к темно-синему.

Затем щелкнем по кругу так, чтобы центр градиента находился где-нибудь слева вверху. Скопируем объект в буфер, выделив его инструментом Arrow и кликнув по кнопке Copy. Теперь перейдем в последний кадр, удалим прямоугольник. И вставим из буфера скопированный объект командой Edit Paste in Place вставить на место. При этом вставка произойдет точно в те же координаты, откуда объект был скопирован. Выберем инструмент Paint Bucket и сместим центр круговой заливки в противоположную сторону.

Протестируем ролик и посмотрим результат. Центр градиента плавно смщается и создается впечатление перемещения источника освещения.

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

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

Создадим новый слой, используя кнопку со знаком +, затем перейдем в нижний слой и удалим его, щелкнув по значку Корзины. Выберем инструмент Текст, щелкнем на полотне и введем цифру 1. Убедимся, что мы работем со статическим текстом. Выберем инструмент Стрелка и на панели Proprties увеличим для наглядности размер шрифта примерно до трехсот пунктов.

Отметим на шкале 12 позицию и скопируем туда ключевой кадр, нажав клавищу F6. В новом ключевом кадре, с помощью инструмента Текст, заменим цифру 1 на цифру 2. Снова выберем инструмент Arrow и выполним команду Modify-Break Apart — Разбить или нажмем комбинацию CTRL+B.

Тем самым мы преобразовали текстовый символ в обычную графику. В противном случае анимация формы у нас работать не будет. Перейдем к первому кадру и проделаем ту же операцию с цифрой 1. На панели Properties назначим анимацию формы.

Вроде бы анимация готова. Нажмем CTRL+Enter и увидим, что анимация происходит, но фигура при этом будто выворачивается наизнанку, чуть ли не исчезая в некоторых кадрах. Как же получить более убедительное превращение? Для таких случаев в программе предусмотрен механизм меток морфинга. Покажем как он реализуется. Оставим сделанную анимацию без изменнений для того, чтобы иметь возможность сравнивать. Создадим новый слой, щелкнув по кнопке с + внизу списка слоев. Программа автоматически добавит в новом слое 12 пустых кадров для выравнивания слоев по длительности. Удерживая клавишу Shift, выделим все кадры нижнего слоя с анимацией, щелкнем правой кнопкой мыши и в появившемся контекстном меню выберем команду Copy Frames, скопировав кадры в буфер обмена.

Insert Remove Frames или нажмем комбинацию Shift+F5. Теперь мы получили две абсолютно одинаковые анимации, расположенные друг над другом в разных слоях. Чтобы посмотреть их отдельно, давайте сместим объекты верхнего слоя вправо. Выделим первый кадр и обратимся к панели Info. В поле, где отображаются координаты объекта на оси X, увелим значение, скажем, на 300 пикселов. Добавим тройку впереди текущих цифр и нажмем клавишу Enter. Затем выделим последний кадр и выполним такие же действия.

Теперь обе анимации можно увидеть одновременно. Выделим снова первый кадр верхнего слоя и выполним команду Modify-Shape-Add Shape Hint добавить метку формы. При этом где-то в середине фигуры появится красный кружок, помеченный маленькой буквой. Если у вас на экране ничего не появилось, то откройте меню View и установите флажок Show shape Hints — показывать метки формы. Переместим метку в какую-нибудь характерную точку рисунка, проследим, чтобы она легла на край заливки или на контур, иначе программа нас не поймет. Затем перейдем в заключительный кадр и установим аналогичную метку в точку, куда, по вашему мнению, должна перейти метка в первом кадре. Если все сделано корректно, то кружок станет зеленым, а в первом кадре — желтым. В данном случае одной метки морфинга недостаточно. Для удовлетворительного результата установим еще две метки.

Теперь это можно сделать следующим образом. Установим курсор на первой метке и щелкнем правой кнопкой мыши.

В контекстном меню выберем команду Add Hint — добавить метку.

Переместим вторую метку в другую характерную точку. Перейдем в заключительный кадр и выполним аналогичное действие. И, наконец, проделаем похожие операции по установке третьей метки морфинга. Для улучшения визуального восприятия введем небольшую задержку в заключительный кадр анимации. Для этого выделим 15 позицию на шкале и нажмем клавишу F5. То же самое проделаем в нижнем слое. Теперь посмотрим результат нашей работы, нажав клавиши CTRL+Enter. Вы видите, что анимация с использованием меток морфинга происходит более естественно.

В заключении этого урока хотел бы дать несколько общих рекомендаций, касающихся анимации формы. Если вам нужно одновременно показать морфинг нескольких объектов, то используйте для этого отдельные слои. В противном случае, программа вряд ли вас поймет и выдаст полную абракадабру. Метки морфинга ставьте последовательно, по принципу:

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

На предыдущем уроке мы освоили один из методов промежуточной анимации, а именно, анимацию формы или морфинг. Другим распространненым видом промежуточной анимации, применяемом во Flash, является анимация движения. В отличие от морфинга, котрый работает с обычной векторной графикой, в ключевых кадрах анимации движения должны находится так называемые символы, которые представляют собой особый самостоятельный вид Flash-объектов.

Можно, правда, использовать и сгруппированные объекты, но в этом случае программа сама автоматически конвертирует их в символы. Символы и особенности их применения — это весьма большая и важная тема раскрывать, которую я начну постепенно на следующем уроке. А пока, для того, чтобы разобраться с анимацией движения, я покажу вам лишь один из способов создания символов. В символ можно конвертировать любой графический символ. Нарисуем, например, прямоугольник. Инструментом стрелка выделим его. И выполним команду Insert — Convert to Symbol или нажмем клавишу F8.

Появится диалоговое окно, в котором в поле Name предлагается задать Имя, под которым символ будет храниться в Библиотеке ролика.

горизонтали и снова выберем первый кадр анимации. На панели Properties в списке тип анимации выберем пункт Motion — Движение. При этом на шкале времени последовательность кадров окрасится в сиреневый цвет и сквозь нее пройдет сплошная линия со стрелкой.

Если вместо сплошной линии появится пунктирная, значит в ключевых кадрах присутствуют обычные формы, а не символ, и анимация движения будет невозможна. Нажав клавишу CTRL+Enter, посмотрим как объект постепенно перемещается по сцене. Закроем тестове окно. Выделим последний кадр и с помощью модификатора Scale отмасштабируем объект.

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

Если снять флажок Scale — Масштаб и протестировать ролик, то размер объекта не будет изменяться в процессе анимации, вплоть до последнего кадра, где прямоугольник внезапно увеличится. Закроем тестовое окно и снова включим опцию Scale. Параметр Ease выполняет ту же самую функцию, что и при морфинге, и служит для ускорения или замедления движения в процессе анимации. С его помощью удобно создавать такие эффекты, как движение под действием гравитации, торможения, движения в вязких средах и многое другое.

Раскрывающийся список Rotate предназначен для управления вращением объекта. По умолчанию, в нем выбран режим Auto — Автоматически. При этом объект вращается только в том случае, если мы вручную повернем его в одном из ключевых кадров. Направление поворота выбирается так, чтобы угол у поворота был минимальным. Если, например, развернуть объект на градусов по часовой стрелке, то фигура повернется в процессе анимации на градусов против часовой стрелки. Проверим это. Перейдем в заключительный кадр. Выделим объект. откроем панель Transform. И в поле Rotate введем значение 270 градусов. Теперь протестируем ролик. Вы видите, что в процессе анимации объект поворачивается не на 270 градусов по часовой стрелке, а на 90 градусов против часовой стрелки. Что и требовалось доказать.

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

Но это вовсе не значит, что в процессе анимации движения, объект нельзя заставить вращаться на угол больше чем 180 градусов. Перейдем в первый кадр и откроем список Rotate. Пункты Clockwise — по часовой стрелке или Counteck Clockwise — против часовой стрелки, как раз и предназначены для того, чтобы заставить объект принудительно вращаться в нужном направлении. При этом в поле справа необходимо указать количество полных оборотов.

Введем в это поле, например, цифру 1 и протестируем ролик. Вы видите, что объект в процессе движения делает дополнительный полный разворот против часовой стрелки. Закроем тест. Установка флажков Orient to Path и Snap имеет значение лишь в том случае, если мы создаем анимацию движения с помощью так называемого специального Guide-слоя, в котором нарисована траектория движения объекта. Флажок Synchronize позволяет синхронизировать анимацию символов уже содержащих в себе анимацию. Об этих параметрах мы поговорим подробнее на соответствующих уроках. Кроме того в процессе анимации движения можно заставить символ, а точнее его экземпляр изменять свой цвет и прозрачность. О том как это сделать, я расскажу на следующем уроке.

А сейчас рассмотри еще один пример и создадим анимацию, в которой объект движется по окружности. Создадим новый слой, а старый удалим. в первом ключевом кадре с помощью инструмента овал нарисуем небольшой кружок в верхней части полотна. Выделим его инструментом Arrow и преобразуем в символ нажав клавишу F8. Отметим тип Movie Clip или Graphic и щелкнем кнопку Ок. Выберем инструмент Free Transform и переместим мышью точку регистрации объекта примерно в середину рабочей сцены.

Теперь выделим заключительный кадр анимации и скопируем туда первый ключевой кадр с помощью клавиши F6.

Перейдем в первый ключевой кадр и на панели Properties в списке Tween назначим анимацию движения. В списке Rotate выберем пункт вращение по часовой стрелке и введем в поле справа цифру 1. Теперь наш круг должен в процессе анимации делать один оборот по часовой стрелке вокруг точки регистрации. Убедимся в этом, протестировав ролик. У этой анимации имеется небольшой недостаток. Объект немного задерживается в верхней точке, хотя при данной скорости воспроизведения нашего фильма отмеченный эффект почти не заметен. Задержка происходит потому что при зацикливании анимации после последнего кадра проигрывается первый, а в обоих этих кадрах находится одинаковое исходное изображение, что и приводит к небольшой визуальной остановке движения. Для устраненния этого эффекта достаточно в последний ключевой кадр вставить команду перехода в первый ключевой кадр. Поскольку нам все равно не обойтись без применения Flashкода, то давайте посмотрим как это сделать, не вдаваясь пока в подробности.

Выделим последний кадр.

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

Подчеркну еще раз, в этом случае последний кадр прорисовываться не будет и тем самым мы избавляемся от так называемого краевого эффекта.

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

Изобразим, например, прыгающий мяч. Создадим новый ролик, щелкнув по кнопке New. При необходимости отмасштабируем рабочее полотно командой Show Frame. В нижней части полотна нарисуем прямоугольник однородного цвета, который будет изображать какую-либо твердую поверхность. Анимация будет расчитана на 20 кадров, поэтому выделим двадцатую позицию на шкале и клавишей F5, вставим цепочку обычных кадров.

Теперь создадим еще один слой, в котором будем делать анимацию движения. Выберем инструмент овал, сбросим цвет контура, и в первом ключевом кадре нарисуем круг. Затем выберем инструмент Paint Bucket, в стандартном наборе отметим радиальную градиентноую заливку и заполним нашу фигуру для придания ей объемности. Выберем инструмент Стрелка, выделим объект, и нажмем клавишу F8. В поле Name введем имя Ball — мяч.

В списке Behavior отметим пункт Graphic, и щелкнем по кнопке ОК. Отметим восьмую позицию и нажмем клавишу F6. Опустим наш объект в этом ключевом кадре под срез поверхности. Эту операцию проделаем с помощью клавиатуры, чтобы случайно не завалить мяч куда-нибудь в сторону.

Теперь выделим 10 позицию и клавишей F6 скопируем туда восьмой ключевой кадр. Выберем модификатор Scale отмасштабируем объект по высоте и ширине так, как он должен выглядеть после удара о твердую поверхность. Затем снова опустим фигуру под срез прямоугольника. В кадре объект должен выглядеть также как и в 8, поэтому выделим 8 кадр, щелкнем правой кнопкой мыши, и в появившемся контекстном меню выберем команду Copy Frames — Копировать кадры. Теперь выделим 12 позицию, вызовем контекстное меню. Выберем пункт Paste Frames — вставить кадры.

Затем выделим 14 позицию и снова нажмем клавишу F6.

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

Итак, ключевые кадры анимации готовы, теперь нужно назначить им анимацию движения. Перейдем в первый кадр и установим на панели Properties пункт Motion. Проделаем ту же операцию с другими ключевыми кадрами анимации за исключением последнего. Кстати, это можно сделать быстрее, щелкнув правой кнопкой мыши на соответствующем кадре и выбрать в появившемся контекстном меню — create Motion Tween Создать анимацию движения. Проделаем эту операцию для всех кадров. Теперь протестируем ролик, нажав CTRL+Enter. Закроем окно и немного усложним анимацию. Для придания большей реалистичности движению объекта выполним еще ряд операций. Выделим первый кадр и в поле Ease установим отрицательное значение -80.

Тем самым, мы заставим двигаться мяч с ускорением, как будто на него воздействует сила тяжести. В предпоследнем ключевом кадре введем в это же поле положительное значение. Это приведет к тому, что по мере подъема, скорость движения мяча будет уменьшаться, как и должно быть в реальных условиях. Протестируем ролик и посмотрим результаты нашей работы. Если просмотреть этот фильм в реальном режиме Flash, скажем со скоростью кадров в секунду, то вы увидите вполне правдоподобную картинку. Закроем тестовое окно и на этом закончим текущий урок.

На этом уроке мы начнем подробно разбираться в том, что представляют собой символы в программе Flash и научимся изменять свойства экземпляров символов. Символы являются особыми типами Flash-объектов и ключевыми символами, которые позволяют на полную мощность использовать эффективность редактора. Применение символов дает в руки пользователей чрезвычайно гибкий инструмент для создания интерактивных роликов, также существенно сокращает размер файлов и экономит ресурсы программы.

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

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

При необходимости размещения на сцене нескольких, пусть даже двух похожих графических объектов, опытные пользователи поступают иным образом. А именно, конвертируют объекты в символы. Один из способов как это делается вы уже знаете — с помощью клавиши F8. Удалим все копии рисунка, выделим исходный объект и нажмем клавишу F8.

В диалоговом окне зададим имя символа Leaf — Лист и выберем один из трех типов символа, например, Graphic. Об особенностях каждого типа мы поговорим отдельно несколько позже. Щелкнем по кнопке ОК. Теперь описание или эталон нашего рисунка, который называется символом, будет помещен в Библиотеку ролика. На рабочем же столе остался не сам символ, а его, так называемый, экземпляр — Instance. Этот экземпляр при необходимости можно даже удалить из рабочей области, его описание потеряно не будет. Для отображения Библиотеки выполним команду Window-Library, библиотека или нажмем клавишу F11. В окне Библиотеки находится список всех имеющихся в файле проекта Flash-символов. В данном случае у нас есть только один графический символ с именем Leaf. При щелчке мышью на названии объекта, он отобразится в области предварительного просмотра в верхней части Библиотеки. Чтобы разместить новый экземпляр символа на сцене, достаточно просто перетащить его значок из окна Библиотеки в рабочую область.

Перетаскивание можно выполнить также из области предварительного просмотра. Давайте разместим на полотне 4 экземпляра нашего символа.

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

Образно выражаясь проигрыватель Flash в этом случае размышляет следующим образом: взять из Библиотеки содержимое с таким-то именем и показать его. А теперь представьте себе какую экономию ресурсов мы будем иметь при размещении в фильме десятка или более экземпляров одного символа. Не следует, однако, думать, что все экземпляры символа должны быть точной копией эталона. С помощью модификаторов Scale и Rotate можно изменять форму объекта, т.е. произвольным способом масштабировать, поворачивать и наклонять его в разных плоскостях и т.д. Размер файла при этом будет конечно возрастать, но очень ненамного.

Кроме того, к каждому экземпляру символа можно применить различные цветовые эффекты и сделать его практически уникальным. Для этого необходимо выделить како-нибудь экземпляр и обратиться к раскрывающемуся списку Color на панели Properties. В пятой версии Flash для этого использовалась отдельная вспомогательная панель Эффект. Для более наглядной демонстрации цветовых эффектов давайте установим на панели Properties другой цвет полотна. Например, светло-сиреневый.

Теперь выделим какой-либо экземпляр. Например, первый слева и обратимся к списку Color. По умолчанию здесь установлен пункт None — нет эффекта. Следующий пункт раскрывающегося списка Brightness — яркость, позволяет регулировать относительную яркость объекта. Положительные значения осветляют объект, вплоть до чисто белого цвета, а отрицательный значения затемняют его. Пункт Tint — оттенок, позволяет выбрать любой цвет экземпляра. Это можно сделать с помощью палитры, либо ввести значения цветовых составляющих Красный-Зеленый-Синий в полях, расположенных ниже. После установки цвета в самом правом поле можно задать процентное соотношение данного цвета в пределах от 0 до 100%.

Следующий пункт списка Alpha позволяет изменять прозрачность экземпляра. Значения варьируются от 0% — полностью прозрачный, до 100% — непрозрачный. При выборе поcледнего пункта Advanced — расширенный, появится дополнительная кнопка Settings, для настройки данного цветового эффекта. При щелчке по ней откроется панель, где можно произвольно регулировать и цвет и прозрачность объекта. Вы можете спросить зачем вообще нужен этот эффект, если есть отдельные регулировки яркости, оттенка и прозрачности.

Дело в том, что для экземпляра Flash-символа может быть использован только один из пунктов списка Color. Если, например, сначала настроить прозрачность, а затем выбрать для этого же экземпляра пункт Tint, то установки прозрачности будут сброшены. Пункт Advanced позволяет независимо и одновременно настраивать цветовые составляющие и коээфициент прозрачности экземпляра символа. Здесь имеются 8 полей, левые из которых используютс для регулировки параметров цвета и прозрачности по относительной шкале. А правые для корректировки абсолютных значений цветовых составляющих.

Если применять их одновременно, то это дает большие возможности, но поначалу может смутить своей сложностью. Поэтому я предлагаю некоторе время поэкспериментровать с данными настройками самостоятельно. Эти усилия будут вознаграждены красочностью ваших роликов. Хочу сразу отметить, что установки списка Color действуют также на все виды символов, которые вы будете создавать, включая растровые изображения, конвертированные в символы.

На этом уроке мы подробно рассмотрим применение графических символов и символов видеоклипов. Определим их основыне различия, а также научимся создавать символы видеоклипов из готовой анимации расположенной на основной сцене. Графические символы, которые мы и применяли на прошлых занятиях — это самый простой тип символов и сипользуется в соновном для хранения статической графики.

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

Создадим новый графический символ. До сих пор мы это делали, рисую чтолибо на рабочем полотне, а затем конвертирвали изображение в символ, с помощью команды Insert-Convert to Symbol или клавишей F8. Но можно сделать и по-другому. Выполним команду Insert-New Symbol. Новый символ или нажмем сочетание CTRL+F8. Появится знакомое диалоговое окно.

Выберем тип Graphic и дадим символу какое-нибудь коротенькое имя, например, Gr — сокращенное от Graphic и щелкнем по кнопке ОК. Появится пустая область редактирования символа с маленьким крестиком по середине.

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

Давайте создадим простенькую раскадровку формы на временной шкале нового символа. Выберем инструмент прямоугольник и нарисуем соответствующую фигуру. Отметим 10 позицию шкалы и вставим туда пустой ключевой кадр клавишей F7. Теперь с помощью инструмента овал, где-нибудь правее нарисуем круг. Перейдем к первому кадру и на панели Properties установим раскадровку формы. Подвигаем маркер вдоль шкалы времени, чтобы убедиться в работоспособности анимации. Теперь вернемся к основной сцене. Это можно сделать выполнив команду Edit-Edit Document. Однако проще и быстрее щелкнуть по пиктограмме с надписью Scena1. Перед нами снова чистое рабочее полотно. Куда же делся наш символ? Конечно, он находится в Библиотеке ролика. Для вызова окна Библиотеки, нажмем клавишу F11. Выделим наш символ в окне Библиотеки. Обратите внимание, что в окне просмотра появились дополнительные кнопки контроллера.

Поскольку символ содержит анимацию. Теперь ее можно посмотреть прямо в Библиотеке.

Перетащим мышью символ на рабочее полотно, тем самым создав его экземпляр. Здесь отобразится первый кадр анимации символа. Впрочем мы можем отобразить и любой другой кадр анимации. Для этого в списке опций на панели инстпектора свойств выберем пункт Single Frame — один кадр и определим его номер, например, пятый. Если теперь протестировать ролик, то кроме статичного пятого кадра, мы ничего не увидим. Закроем окно теста.

Это происходит потому что основная шкала времени содержит только один кадр. Т.е. анимация основного фильма остановлена. Следовательно анимация внутри графического символа, также не будет. Теперь на панели Properties вернемся к пункту Loop — Цикл и добавим к основному фильму несколько простых кадров. Выберем 10 позицию шкалы и нажмем клавишу F5.

половины графического символа. Я думаю теперь вам понятно, почему это происходит. Итак, вопроизведение анимации внутри графического Flashсимвола напрямую зависит от хода анимации основного фильма.

А теперь рассмотрим особенности символа типа Movie Clip и сравним их с графическими символами. Создадим точно такую же анимацию формы, но поместим ее внутри символа Movie Clip. Чтобы сделать это по-быстрее воспользуемся возможностью программы копировать кадры. Щелкнем дважды по значку символа в окне Библиотеки. Тем самым мы вошли в режим его редактирования. Удерживая клавишу Shift, выделим все кадры анимации.

Щелкнем правой кнопкой мыши и в контектсном меню вберем команду Copy Frames. Веренемся к основной сцене. Убедимся, что ничего не выделено и нажмем сочетание CTRL+F8. В диалоге введем имя Mc, а в разделе Behavior — Поведение определим тип Movie Clip. Подтвердим установки.

Выделим первый кадр шкалы Movie Clipа, вызовем контекстное меню и выполним команду Paste Frames — Вставить кадры. Теперь мы имеем здесь точно такую же анимацию, что и в графическом символе. Снова вернемся к основной сцене. Теперь в Библиотеке ролика у нас появился новый Flashсимвол Mc, типа Movie Clip. Обратите внимание, что он имеет другой значок.

Среди флэшеров этот тип символов часто называют мувиками, по созвучию с английским названием Movie Clip. Я тоже иногда буду использовать этот термин. На основной сцене оставим только один кадр, для чего выделим кадры со второго по пятый и удалим их командой Insert-Remove Frames.

Или нажмем комбинацию Shift+F5. Перетащим наш мувик в рабочую область и протестируем фильм. Вы видите, что анимация экземпляра графического символа не происходит, а анимация мувика идет как ни в чем не бывало. Закроем тест. Вывод следующий: Movie Clip, по сути представляет собой отдельный фильм, живущий своей жизнью и остановка проигрывания онсовной сцены никак не влияет на его воспроизведение.

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

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

заканчиваются, основное отличие между кнопками и видеоклипами заключается в том, что временная шкала кнопок всегда состоит только из четырех кадров, каждый из которых имеет свое название. Давайте сначала научимся создавать и редактировать кнопки. Кнопки как и другие типы символов можно создавать нажав сочетание CTRL+F8 или нрисовать что-нибудь на полотне, а затем конвертировать в символ кнопки с помощью клавиши F8. Итак, нажмем CTRL+F8, дадим имя символу Button 1, назначим также тип Button и щелкнем по кнопке ОК. Теперь мы вошли в режим редактирования кнопки.

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

Можно использовать любое изображение, текст, а также и анимированный экземпляр другого типа. Но чаще всего для кнопок используются прямоугольные или округлые формы. Выберем инструмент прямоугольник, сбросим цвет контура, щелкнем по модификатору и в появившемся окне установим радиус скругления углов равным 10. Теперь рисуем. Выберем инструмент Стрелка, выделим объект и с помощью панели Align при активном переключателе To Stage, отцентрируем его относительно начала координат.

Затем займемся кадром Over, которому соответствует состояние кнопки при наведении на нее курсора. Можно клавишей F7 вставит пустой ключевой кадр и нарисовать в нем любое изображение. но проще вставить ключевой кадр клавишей F6. И изменить в этом кадре форму или, скажем, цвет фигуры, нпример на зеленый. Теперь при наведении курсора кнопка должна выглядеть именно так. Аналогичным образом поступим с кадром Down, который отображается, когда пользователь нажимает в области кнопки левую кнопку мыши. Скопируем клавишей F6 предыдущий кадр и изменим цвет прямоугольника на красный.

Кадр Hit — Область наведения никогда не отображается, но часто он очень важен, поскольку именно этот кадр определяет область действия кнопки. Если оставить кадр Hit пустым, то по умолчанию его содержимое считается совпадающим с предыдущим непустым ключевым кадром. Пока не будем ничего рисоват в кадре Hit. В учебных целях изобразим также надписи на кнопке. Перейдем в первый кадр и выберем инструмент Текст. На пнели Properties установим черный цвет, полужирное начертание и выравнивание по центру. Щелкнем на полотне и напишем название кадра.

Закончим ввод выбором инструмента Стрелка. При необходимости подберем подходящий размер шрифта и отцентрируем текст относительно начала координат. Чтобы больше не заниматься выравниванием надписи в других кадрах, поступим следующим образом. Скопируем текст в буфер обмена, затем перейдем во второй кадр и выполним команду Edit Paste in Place — вставить на место. Теперь выберем снова инструмент Текст, щелкнем по надписи и заменим название кадра. Перейдем в третий кадр, вставим сюда скопированное текстовое поле и проделаем аналогичные манипуляции с заменой имени кадра. Все простейшая кнопка готова и можно вернуться к основной сцене. Клавишей F11 отобразим окно Библиотеки и претащим символ кнопки на рабочее полотно.

Теперь протестируем ролик. Когда курсор находится вне кнопки он имеет голубой цвет, т.е. отображается кадр Up. Наведем указатель на кнопку. Вы видите, что она стала зеленой, т.е. отобразился кадр Over. Обратите внимание, что курсор при наведении на кнопку, приобретает вид руки. Если теперь нажать клавишу мыши, то отобразится кадр Down и кнопка станет красной.

Закроем тестовое окно. Кстати, говоря, если в меню Control включить опцию Enable Simple Button, то можно посмотреть как работает кнопка прямо на рабочей сцене. Убедимся, что это так. Довольно удобно. Однако в этом случае объект нельзя выделить и следовательно премещать, масштабировать и вообще производить какие-либо модификации.

Кроме того, эта установка работает, если в кадрах кнопки, содержится только статическая графика. Теперь разберемся подробно с назначением кадра кнопки кадра Hit. Его особенно важно определять если мы используем кнопку сложной формы, например, в виде текста. Выберем инструмент Текст, щелкнем на полотне и введем буквы ОК. Выберем инструмент стрелка и на панели Properties увеличим размер кегля, нажмем клавишу F8, зададим имя, например такое, сокращенное от ButtonText и конвертируем текст в символ кнопки.

Дважды щелкнем по значку нового символа в Библиотеке, скопируем клавишей F6 в кадр Over, содержимое кадра Up и изменим цвет букв на зеленый. Определим также кадр Down и сделаем цвет красным. Кадр Hit также пока определять не будем. Перейдем к основной шкале и протестируем кнопку. В видите, что кнопка реагирует на указател мыши, только в том случае, когда последний находится точно на контуре символов. Центральная область буквы О, а также промежутки между буквами не являются активной областью. Согласитесь, что это не очень то удобно, поскольку при работе с такой кнопкой потребуется хирургическая точность наведения. Давайте исправим положение и создадим область Hit. Войдем в режим редактирования текстовой кнопки, клавишей F6 создадим ключевой кадр Hit.

Затем выберем инструмент прямоугольник, сбросим цвет контура и нарисуем фигуру, размером чуть больше текста. Цвет фигуры абсолютно никакой роли не играет. Важен лишь размер заливки, ее форма и расположение относительно объектов в других кадрах. Перейдем к основной сцене и протестируем кнопку. Теперь она работает как положено. Чтобы измежать показанных выше недоразумений считается хорошим тоном всегда определять область действия кнопки.

Как вы уже знаете из предыдущих уроков, при наложении графические объекты взаимно редактируют друг друга, чтобы этого не происходило объекты можно группировать или создавать Flash-символы. Еще один простой и удобный способ раположить в ролике множество независимых объектов — это использование слоев. Техника слоев применяется во многих популярных графических программах, например в Photoshop’e. Однако, в отличие от этой прогарммы увеличение слоев во Flash на влияет на размер опубликованного ролика. Поэтому вы можете создавать столько слоев сколько считаете необходимым. Фактически верхним пределом является 16000 слоев, н не думаю, чтобы вам может столько понадобиться. Традиционно слои принято сравнивать с листами прозрачно кальки, наложенных друг на друга. Рисунки расположенные в верхних слоях, закрывают собой графику в нижних. Там, где изображения нет будут просвечиваться рисунки нижних слоев.

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

Кроме того, в программе могут применяться специальные слои, которые мы начнем изучать на этом уроке. Выберем инструмент прямоугольник и нарисуем две фигуры в первом и пока единственном слое.

А теперь создадим новый слой, щелкнув по кнопке Insert Layer со значком +. Будет создан новый слой, который автоматически станет активным. О том, что слой является активным, говорит его выделение черным цветом и изображение карандаша. Выберем инструмент овал, изменим цвет заливки и нарисуем круг. Его изображение будет помещено в текущий активный слой.

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

Для редактирования какого-либо отдельного объекта нет необходимости сначала делать активным соответствующий слой. Это произойдет автоматически при выделении заданного объекта. Очень удобное свойство редактора Flash. Для облегчения работы слоям можно давать любые имена, в том числе и русские, для этого дважды щелкните на имени слоя и введите новое название. Всегда используйте при этом осмысленные имена. Теперь обратите внимание на три пиктограммы в верхней части списка слоев. Если щелкнуть в каком-либо слое на точке под изображением глаза, то графика этого слоя станет невидима, а вместо точки появится красный крестик.

Повторный щелчок по этому же месту сделает слой снова видимым. При щелчке непосредственно по пиктограмме глаза, невидимыми или снова видимыми станут все слои. Если же удерживать клавишу Alt и щелкнуть по соответствующей точке, то графика всех остальных слоев станет невидима, теперь можно спокойно работать с изображением только одного слоя. Сделаем снова видимыми все слои.

Второй столбец точек, расположенный под пиктограммой замка, позволяет защитить графику слоев от редактирования. Когда на слое висит замочек, то выделить и редактировать расположенные в нем объекты, становится невозможным. Щелчок по самой пиктограмме замка ставит или снимает запрет на редактирование всех имеющихся слоев. И, наконец, третий столбец, обозначенный квадратиком, предназначен для отображения содержимого слоев в виде контуров. Принцип использования этой опции такой же как и у двух предыдущих.

При щелчке на квадрате в соответствующем столбце, содержимое текущего слоя будет просматриваться в виде контуров одного цвета, в данном случае синего. Повторный щелчок вернет графике обычный вид. Контурная прорисовка объектов слоя бывает весьма полезна при работе со сложными изображениями и снижает нагрузку на процессор. Для каждого самостоятельного слоя можно выбрать свой цвет отображения контуров, но об этом чуть позже. Во Flash MX появилась новая возможность организовывать слои в папки. Перейдем в верхний слой и щелкним по кнопке Insert Layer Folder. Будет создана папка, которой также можно дать любое имя. Чтобы поместить наши слои в папку, необходимо мышью перетащить слой вверх и немного вправо. Пиктограмма слоя сместится вправо и теперь он находится в папке. Аналогичным образом разместим в папке два других слоя.

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

Папку легко свернуть щелкнув по треугольнику слева от ее пиктограммы, и тем самым экономя драгоценное экранное пространство. Повторный щелчок вновь откроет папку. Если применить к папке опцию блокировки или другие, то эти операции будут применены ко всем слоям, размещенным в папке.

В пaпку можно помещать другие папки и таким образом организовывать слои подобно дереву файлов на компьютере. Как то мне на глаза попался исходник, сделанный во Flash 5, который содержал более 30 слоев.

Разобраться, что и где было крайне сложно. Представляю как обрадовался его автор, узнав о новой возможности редактора MX создавать папки для слоев.

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

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

Выделим рисунок и, нажав клавишу F8 конвертируем в графический символ или мувиклип. Отметим на шкале 30 позицию и клавишей F6 вставим туда ключевой кадр. Вернемся в первый кадр и с помощью контекстного меню назначим анимацию движения. Теперь попробуем заставить двигаться наш объект по произвольному пути. Для этого необходимо создать спциальный слой и нарисоввать там нужную траекторию. Самы простой способ создания слоя траектории — это щелчок по кнопке Add Motion Guide.

Появится новый слой траектории с 30 пустыми кадрами. Одновременно нижний слой с объектом будет прикреплен к Guide-слою и изменит свой тип.

Убедимся в этом, открыв диалог Свойства слоя. Кстати говоря, это можно сделать еще одним способом. Достаточно дважды щелкнуть по пиктограмме слоя. Как видите, теперь слой имеет тип Guided — Ведомый или направляемый. Кроме того, о том что первый слой прикреплен к слою траектории, говорит пунктирная линия на границе между ними.

Закроем окно свойств. Перейдем в Guide-слой и нарисуем здесь произвольную траекторию. Траектория должна быть незамкнутой и представлять собой контур или заливку. Рекомендуется использовать только контур, поскольку применение заливки, иногда приводит к неожиданным результатам. Выберем инструмент Карандаш, включим модификатор Smooth для получения более плавной кривой и рисуем. Толщина и цвет контура значения не имеют, так как сама траектория в опубликованном ролике просматриваться не будет. Заблокируем слой траектории и перейдем в слой объекта. Выберем инструмент Стрелка и привяжем фигуру к начальной точке траектории.

При этом должен быть включен режим Snap на основной панели. Привязку можно было бы сделать и несколько иначе. Сделаем отмену последней операции перемещения, выделим првый кадр анимации и включим опцию Snap на панели Properties. Объект самостоятельно привяжется к начальной точке траектории. Перейдем в заключительный кадр анимации и разместим объект на другом конце кривой. Строго говоря не обязательно привязывать объект именно к концам траектории, но нет смысла и рисовать контур так, чтобы исползовать его не полностью.

Нажмем кнопку Play и убедимся, что наш объект движется точно по нарисованному пути. Затем нажмем сочетание CTRL+Enter и еще раз посмотрим, что результат достигнут, а сама траектория в опубликованном ролике не видна. Закроем тестовое окно и снимем на панели Инспектора флажок Snap, чтобы программа не лишала нас самостоятельности при выборе точек привязки. Слои-траектории также как и опорные слои не экспортируются вместе с другим содержимым фильма и следовательно не влияют на размер окончательного файла в формате *.swf.

Поэтому можно использовать их без ограничения. Если вы хотите, чтобы траектория движения объекта была видна, то используйте обычный слой с копией маршрута. К одному слою траектории можно привязывать несколько ведомых слоев с объектами. Покажем это. Сделаем текущим нижний слой и щелкнем по кнопке Добавить обычный слой. Появится новый слой, который будет автоматически прикреплен к нашему Guide-слою. Нарисуем в новом слое какой-нибудь объект, например, прямоугольник. инструментом Стрелка выделим его и, используя клавишу F8, конвертируем в символ. перейдем в кадр и нажмем клавишу F6, создав там ключевой кадр. Выделим первый кадр и с помощью контекстного меню назначим анимацию движения.

Сделаем текущим Guide-слой, разблокируем его и с помощью Карандаша нарисуем в нем новую траекторию движения для прямоугольника. Выберем инструмент стрелка, выделим прямоугольник и привяжем его в первом кадре к начальной точке пути. Перейдем к заключительному кадру анимации и разместим объект в конечной точке траектории. Дополнительно, с помощью модификатора Scale изменим масштаб прямоугольника. Если мы хотим чтобы дополнительно объект при движении еще и вращался, то снова перейдем в первый кадр и на панели Инспектора Свойств установим в поле Rotate поворот по часовой или против часовой стрелки. А также введем полное количество оборотов объекта в процессе анимации.

Здесь же на панели можно при желании сделать установку, которая заставит двигаться объект с положительным или отрицательным ускорением. Тепь протестируем ролик. Мы видим, что обе фигуры движутся независимо и одновременно по разным траекториям. При этом прямоугольник в процессе движения вращается и изменяет свой размер. Закроем тестовое окно. А сейчас приведем еще один пример и покажем как можно управлять ориентацией объекта в процессе его движения по заданной траектории.

Создадим новый ролик, щелкнув по кнопке New. И как обычно отмасштабируем рабочее полотно. Нарисуем в единственном слое или вставим из буфера обмена готовое изображение самолета времен второй мировой войны, созданное в другой программе. Теперь попробуем заставить его лететь по произвольной кривой, но сначала создадим анимацию движения. Нажмем клавишу F8 и конвертируем рисунок в символ, выделим 30 позицию на шкале и нажмем клавишу F6. В контекстном меню первого кадра установим анимацию движения. Теперь создадим слой траектории щелкнув по соответствующей кнопке.

Выберем инструмент Карандаш и нарисуем траекторию полета самолета.

Рисовать начнем слева за пределами полотна, чтобы наш объект влетал слева в рабочую область ролика. Попробуем изобразить траекторию так, чтобы самолет при движении делал мертвую петлю. Инструментом стрелка выделим нарисованный путь и щелкнем несколько раз по модификатору Smoth, чтобы придать контуру более плавное очертание. При необходимости иснтрументом Стрелка можно подкорректировать форму кривой. Теперь заблокируем Guideслой, повесив на него замок. Выделяя объект поочередно в первом и последнем кадрах анимации, привяжем его к началу и к концу траектории соответственно. Чтобы сымитировать посадку самолета в конуе анимации, нарисуем земную поверхность.

Для этого создадим новый обычный слой и переместим его мышью в нижнюю часть списка. Передвинем маркер в заключительный кадр, чтобы видеть самолет в конце анимации. Выберем инструмент Прямоугольник, сбросим цвет контура, а цвет заливки установим серым. Нарисуем внизу полотна соответствующую фигуру, постараемся сделать так, чтобы нарисованная поверхность касалась шасси самолета. Для лучшего визуального восприятия будущего ролика, удерживая клавишу Shift, отметим 35 позицию каждого слоя и нажмем клавишу F5.

Теперь посмотрим анимацию, нажав CTRL+Enter. Все бы ничего, но наш самолет летит все время направив нос в одну сторону, что выглядит совершенно неестественно. А хотелось бы, чтобы он поворачивался в процессе движения паралельно траектории. Оказывается в программе Flash сделать это не трудно. Выделим первый кадр анимации и на панели Properties установим галочку в пункте Orient To Path ориентировать по траектории.

В поле Easing установим положительное значение около 90%. анимация в этом случае пойдет с замедлением и наш самолет будет постепенно останавливаться при посадке. Щелкнем на пустом месте и на панели Инспектора Свойств установим светло-голубой цвет имитирующий небо.

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

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

Переключимся на русскую раскладку клавиатуры, щелкнем на полотне и введем слово Свобода, используя при этом только прописные буквы.

Закончим ввод выбором инструмента Стрелка. Конвертируем текст в символ, для чего нажмем клавишу F8. Дадим имя символу text, выберем тип Graphic или Movie Clip и подтвердим установки. Теперь для управления движением клипа, нужно создать для него траекторию в соответствующем слое. Щелкнем по кнопке Добавить слой траектории. Выберем иснтумент Овал, сбросим цвет заливки и нарисуем на сцене незалитый эллипс. Высота фигуры должна быть несколько меньше ширины рабочего полотна, впрочем, это всегда можно подкорректировать модификатором Scale. Нажмем клавишу V, для быстрого выбора инструмента Стрелка, выделим эллипс и с помощью панели Align разместим его строго по центру сцены. Затем выберем инструмент Ластик, определим в разделе модификаторов его самый маленький размер и сделаем небольшой разрыв в центральной правой части нарисованной фигуры. Снова выберем инструмент Стрелка и заблокируем слой траектории.

Выделим экземпляр текстового символа перетащим его к эллипсу и привяжем к верхней точке разрыва. Клавишей f6 создадим ключевые кадры в 5, 10, 15 и 20 кадрах. Отметим также 20 позицию слоя траектории и клавишей F5 вставим цепочку простых кадров. Перейдем в 5 кадр нижнего слоя и привяжем объект к самой верхней части эллипса. В 10 кадре переместим символ в крайнюю левую точку траектории. В 15 кадре осуществим привязку к нижней точке эллипса.

И, наконец, в 20 кадре разместим объект справа, но уже в нижней точке разрыва. Итак ключевые кадры готовы и теперь нужно назначить для них раскадровку движения. Сделаем это с помощью контекстного меню, последовательно щелкая правой кнопкой мыши в каждом ключевом кадре и устанавливая опцию Create Motion Tween — Содать анимацию движения.

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

Закроем тестовое окно и приступим ко второй части создания ролика. А именно, в каждом ключевом кадре изменим параметры масштабирования и прозрачности, чтобы добиться визуального восприятия объемности. Перейдем в первый ключевой кадр, выделим объект. В списке цветовых эффектов на панели Properties выберем пункт Alpha и установим прозрачность клипа равно 50%. В пятом кадре выполним аналогичные действия, определим прозрачность 75%, а затем с помощью панели Transform, при установленном флажке Constrain, введем масштаб 300%. В 10 кадре прозрачность изменять не будем, а масштаб определим равным 600%.

В 15 кадре сделаем такие же установки, что и 5, т.е. установим прозрачность 75%, а масштаб 300%. И, наконец в последнем 20 кадре сделаем прозрачность равной 50%, а опции масштаба трогать не будем. Снова протестируем наш фильм и убедимся, что изменив параметры масштабирования и прозрачности, удалось добиться достаточно убедительного эффекта объемности. Вы можете также поэкспериментировать с цветом фона и получить более выразительный эффект. Закроем тестовое окно.

Кроме вспомогательных опорных слоев и слоев траекторий в редакторе Flash очень часто применяются так называемые слои-маски, с помощью которых можно создавать очень интересные эффекты. Применение масок подразумевает наличие как минимума двух слоев, а именно маскируемого слоя, в котором может находиться максируемый объект и слоя маски. Что же такое маска? Маска используется для сокрытия определенной части изображения, расположенного в нижележащем слое. Графика, находящаяся в слое маске не просматривается в опубликованном ролике, но она выполняет роль отверствия или окна, через которое видно то, что нарисовано в прикрепленных маскируемых слоях.