13 лет назад 9 сентября 2005 в 4:37 84

При первой встрече интерфейс Macromedia Flash вызывает у человека состояние, близкое к панике. Еще бы: бесчисленные окна, огромное количество цифр и иконок. Но не все так ужасно – постоянно пользоваться придется только четырьмя-пятью окнами, некоторые будут нужны от случая к случаю, остальные не понадобятся никогда.

ЗНАКОМСТВО
Самое большое окно в центре – основная рабочая область. В ней мы будем создавать, компоновать и изменять изображения. Слева от рабочей области – панель инструментов (Tools). Иконки инструментов прекрасно объясняют их назначение, большинство из них знакомы каждому, кто хоть раз имел дело с любым графическим редактором. В самом низу располагается окно свойств (Properties).

В нем отображаются и могут изменяться все свойства выделенного объекта. Если ни один объект не выделен, это будут свойства рабочей области. В верхней части окна Macromedia Flash – окошко шкалы времени (Timeline) совмещенное с панелью слоев (Layers). Шкала времени служит для создания анимации, панель слоев, как нетрудно догадаться, для создания, удаления и перемещения слоев. Справа от рабочей области располагается целая группа окон, из которых часто используются только панель выбора цвета (Color Mixer), панель выравнивания (Align) и библиотека символов (Symbol Library).

Некоторые окна могут быть свернуты, некоторые вообще скрыты. Развернуть окно можно, кликнув по соответствующей кнопке в его заголовке, а скрыть/показать – через меню Window или нажав определенное сочетание клавиш. Кроме того, любое окно (кроме рабочей области) можно перетащить в произвольное место и сгруппировать с другими, либо оставить его “плавающим” поверх рабочей области.

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

РЕДАКТОР
Графический редактор в Macromedia Flash мало чем отличается от других редакторов подобного назначения. Но есть и особенности. Попробуем нарисовать, к примеру, вишенку, точно такую, как на скриншоте [1]. Для этого воспользуемся инструментом Oval (кружок на панели инструментов), выберем цвет заливки и контура (либо на панели инструментов, либо на панели свойств, либо на панели выбора цвета) и нарисуем в рабочей области более-менее ровный круг (можно нажать shift во время рисования, чтобы круг получился ровным).

Теперь нарисуем поверх круга блик. Для этого можно использовать или Brush (кисть), или Pencil (карандаш) c последующей заливкой при помощи Paint Bucket (ведерка с краской). Предположим, у нас все получилось. Теперь попробуем передвинуть блик внутри вишенки. Что за чудо? Блик передвинулся, но под ним осталась пустота, а не вишенка, как можно было ожидать от обычного векторного редактора. Это и есть первая особенность Macromedia Flash. Хотя рисунки и векторные, но Flash автоматически удаляет подобные наложения. Неудобно? Но ведь Flash – это интернет-технология, где каждый байт на счету, а такой подход позволяет сэкономить немалое их количество.

Вторая особенность Flash – это контуры. Попробуйте выделить вишенку, выбрав инструмент Selection (стрелка) и кликнув по ней мышью. Выделятся только красное поле, черный контур остается невыделенным. Если попробовать его переместить, контур и блик останутся на месте, причем на месте блика, как нетрудно догадаться, будет пустое место. Таким же образом выделяется и перемещается контур отдельно от объекта. Для того чтобы выделить объект вместе с контуром, нужно кликнуть по нему два раза. Иногда это удобно, иногда нет – дело привычки.

И, наконец, третья особенность векторного редактора Flash – это “мягкие контуры”. Выберите инструмент Section и, ничего не выделяя, подведите его к контуру объекта. Курсор изменится на стрелку с изогнутой линией. Попробуйте изменить контур, щелкнув по нему мышью и потянув в сторону. Форма объекта плавно изменится. Эта особенность редактора помогает рисовать сложные фигуры и делать покадровую анимацию. Теперь, зная особенности редактора, вы легко дорисуете вишенке черенок и листик.

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

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

Слоями можно управлять при помощи панели Layers (слои) – добавлять, удалять, организовывать в группы, блокировать (чтобы случайно не изменить содержимое). Кроме того, существуют специальные виды слоев: Mask (маска) и Motion Guide (путь).

Каждый слой имеет свое имя (по умолчанию это Layer N, где N – порядковый номер слоя). Многие дизайнеры пренебрегают этим свойством, оставляя имена по умолчанию. Это порочная практика: изменить имя – секундное дело, позволяющее сэкономить массу времени другим разработчикам (если вы работаете в команде) или самому дизайнеру (ели через полгода он вдруг захочет понять, что же он пытался изобразить).
О специальных слоях мы поговорим в другой раз, скажем лишь, что маска позволяет прятать фрагменты связанных с ней слоев, а пути – автоматизировать процесс анимации.

СИМВОЛЫ
Символы – краеугольный камень всей технологии Flash. Без них Flash никогда бы не стал столь мощным и в то же время простым инструментом. Символы во Flash бывают трех видов – Graphic, Movie Clip и Button. Graphic (рисунок) – это просто статическая картинка. Попробуем сделать символ-рисунок из нашей вишенки. Выделим всю вишенку, обведя ее квадратом при помощи инструмента Selection. Теперь выберем в меню Modify пункт Convert to a symbol или просто нажмем F8. В появившемся меню выберем пункт Graphic, имя Cherry и нажмем OK.

Теперь откроем Symbol Library (библиотеку символов), выбрав соответствующий пункт в меню Window или нажав Ctrl+L. Все верно: в библиотеке появился новый символ Cherry. Теперь “размножим” нашу вишенку, перетащив ее из библиотеки на рабочую область и повторив это действие четыре раза. Заметьте, рисунки больше не пересекаются, если их расположить один над другим, все вишенки похожи, как близнецы.

Выделим любую из вишенок и применим к ней инструмент Free Transform (произвольное изменение). При помощи него можно масштабировать, поворачивать и деформировать символы. Сделаем одну большую, одну маленькую, и одну слегка повернутую вишенку, и расставим их как на рисунке. Теперь поиграем свойствами. Выделим большую вишню и в окне Properties (свойства) изменим свойство Color на Alpha (прозрачность) и поставим значение 50%. Вишня стала полупрозрачной.

Теперь выделим символ слева и в том же окне Properties поменяем Color на Tint, выберем синий цвет и значение 50%. Заметьте, что остальные символы остаются неизменными и в библиотеке по-прежнему лишь один символ Cherry. Щелкнем два раза на значок символа или на его уменьшенное изображение. Ситуация в рабочем окне поменялась – теперь мы находимся в режиме редактирования символа. Дорисуем нашей многострадальной вишенке тень. Теперь нужно перейти обратно на основную сцену. Для этого служит меню наверху окна timeline (временной шкалы). Щелкнем на слово “Scene1”. Мы опять в основном окне. Заметьте, все изменения, произведенные вами для символа вишни, появились у всех его воплощений (Instances) на сцене.

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

По сути дела, Movie Clip – это то же, что и Graphic, но при этом он может содержать анимацию (о ней мы поговорим ниже). Еще один тип символов – Button (кнопка). Кнопки могут реагировать на действия пользователя, такие, например, как нажатие кнопки мыши, ее отпускание и даже просто проведение над ними курсором. Без кнопок Flash не имел бы той интерактивности, которая так привлекательна для дизайнеров при создании сайтов, игр и любых других приложений, рассчитанных на взаимодействие с пользователем.

Самое главное свойство символов в том, что их можно вкладывать друг в друга. Делается это просто. Выделим две вишни в центре. Сделаем из них новый символ, как описано выше, назвав его, например, “Two Cherries”. Теперь мы можем сделать целый вишневый сад, размножив этот символ в рабочем окне. Как правило, в сложном проекте таких цепочек множество. Даже в простеньком баннере символов может быть не один десяток. Справедливости ради надо заметить, что главная рабочая область – это тоже всего лишь символ типа Movie Clip, только самый первый и главный.

АНИМАЦИЯ
Анимация – это главное назначение Flash, без которого он оставался бы всего лишь еще одним векторным редактором. Для того чтобы казалось, что картинка ожила, достаточно немного изменять ее 16 раз в секунду – для человеческого глаза отдельные картинки (или как они еще называются – кадры) перестают быть заметны и сливаются в сплошное движение. Именно так, по кадрам, обычно рисуются мультипликационные фильмы. Это адский труд – даже если представить что кадров за одну секунду меняется 16 (а на самом деле их 25 и больше), то для того, чтобы изготовить минутный ролик, нужно нарисовать 960 разных картинок. Это не каждому под силу. К счастью в наше время все чаще применяется техника анимации по ключевым кадрам – именно о ней и пойдет речь.

Ключевые кадры (Keyframes) – кадры, в которых отмечены все перемещения и изменения свойств объекта. Вернемся к нашим вишенкам. Очистим сцену и поместим на нее символ Two Cherries из библиотеки. Посмотрим теперь на временную шкалу. Цифры наверху – это номера кадров. Красным выделен текущий кадр – тот, в котором мы производим изменения. Цифры внизу по порядку – номер текущего кадра, количество кадров в секунду (fps – frames per second) и время текущего кадра от начала клипа. Flash всегда ставит по умолчанию 12 кадров в секунду – этого явно недостаточно, анимация будет выглядеть разорванной. Минимально приемлемое значение – 16, и первое, что нужно сделать, создавая клип – сразу увеличить частоту кадров хотя бы до 25, а лучше – до 30. Щелкните два раза на значение fps, в появившемся окне для Frame rate установите значение 30.

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

Щелкните по кадру №15 на шкале времени. Нажмите правую кнопку мыши и выберите пункт Insert Keyframe. На шкале времени появился новый кружок. Это и есть ключевой кадр. Заметьте, что такой же кружок есть и в первом кадре, а пространство между ними стало серым. Проделайте то же в кадрах 30, 45 и 60. Снова выделите кадр 15. Немного поверните вишенки влево при помощи инструмента Free Transform. Теперь, если вы попробуете переключать кадры, вы увидите, что символ повернут, только если вы выбираете 15 кадр или любой следующий за ним вплоть до 30. Это и есть работа ключевых кадров – изменения, произведенные в одном из них, никак не отражаются на других. Выделим кадр 45. Повернем вишни немного вправо.

Попробуем посмотреть, что у нас получилось. Нажмем Ctrl+Enter, для того чтобы запустить проигрывание анимации. Если вы все сделали правильно, то увидите следующее: полсекунды вишни неподвижны, потом полсекунды повернуты влево, опять полсекунды по центру, потом повернуты вправо и, наконец, опять по центру. Это и есть первый шаг навстречу анимации. Сделаем процесс более плавным. Закройте окно предпросмотра. Выберите любой кадр между 1 и 15. Нажмите правую кнопку и выберите пункт Create Motion Tween (точного русского перевода еще никто не придумал, но это что-то вроде “создать подобие в движении”).

Вместо серой полосы на шкале времени появится сиреневая полоса со стрелкой, ведущей от одного ключевого кадра к другому. Теперь Flash автоматически рассчитывает положение нашего символа в каждом кадре промежутка между 1 и 15. Проделайте такие же действия и с остальными серыми промежутками между ключевыми кадрами и нажмите Ctrl+Enter. Если вы все сделали правильно, вишенки плавно качаются из стороны в сторону.

Движение есть, но оно выглядит каким-то неживым, механическим. Нам вполне по силам это исправить. Выберем первую сиреневую полосу на шкале времени. В окне свойств (Properties) найдем свойство Ease (свобода). Установим значение 100. Время и амплитуда останутся теми же (они задаются ключевыми кадрами), характер же движения изменится. Если раньше оно было равномерным, то теперь оно, в начале быстрое, к концу сильно замедлится.

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

Для полноты картины можно нарисовать ветку, на которой висят вишни. Теперь для нас это пустяк. Создадим новый слой, нажав иконку (на панели Layers, слева от шкалы времени), на которой изображен листочек со знаком “+”. Обратите внимание, что для нового слоя на шкале времени появился свой ключевой кадр. Выделите новый слой мышкой и нарисуйте в рабочей области ветку поверх черенка вишни, примерно как на рисунке. Выделите последний кадр (60) на шкале времени для нового слоя. Нажмите правую кнопку и выберите Insert Frame. Появится серая полоса с первого по 60 кадр напротив второго слоя, на котором находится ветка. Так как ветку анимировать мы не планируем, этого будет вполне достаточно.

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