Сегодня продолжим разговор о программном продукте Macromedia Flash Professional v8.0, начатый в "КВ" №48'2005 года. Первая часть статьи была посвящена технологии Flash и общим принципам работы с приложением, в то время как сей скромный опус поведает вам о новых возможностях редактора векторной графики, появившихся в восьмой версии, и расскажет о некоторых хитрых приемах, значительно облегчающих жизнь flash-дизайнера. Итак, в путь!

Тема 1. Новые возможности Flash

После продолжительного общения с Flash 8 я понял, что инноваций здесь намного больше, чем могло показаться при беглом знакомстве. Для меня стало приятной неожиданностью появление фильтров для символов и редактора движения объекта между ключевыми кадрами. Я считаю, это большой шаг вперед. На самом деле отличий между Flash 8 и Flash MX 2004 больше, чем между Flash MX 2004 и Flash MX. Поскольку у нас нет времени рассматривать все новые возможности пакета, отметим лишь самые существенные и те, которыми мы сегодня непременно воспользуемся.

При взгляде на рабочее окно Flash Professional в глаза сразу бросаются изменения на панели Properties ("Свойства"). Теперь тут доступна опция Blend, которая позволяет выбрать метод наложения слоев, как в популярном графическом редакторе Photoshop. Названия методов до боли знакомы пользователям продукта фирмы Adobe - Normal, Darken, Multiply, Lighten, Screen, Overlay, Hard Light, Add, Substract, Difference и др.

По соседству с закладкой Properties расположилась закладка Filters ("Специальные эффекты"). Во Flash 8 каждый эффект имеет несколько настраиваемых параметров и применяется, в отличие от фильтров в Photoshop, не к статической, а к анимационной графике. Их описание приведено в таблице.

Спецэффекты и методы наложения доступны только для символов типа Button и Movie, о которых мы поговорим чуть позже. Чтобы применить фильтр, необходимо выделить объект на монтажном столе, перейти на закладку Filters (Ctrl+F3) и нажать на кнопку "+" для вызова списка эффектов.

В восьмой версии Flash также реализована поддержка альфа-каналов в видео, добавлен редактор плавности движения, с помощью которого можно настроить изменение скорости и положения объекта между ключевыми кадрами (кнопка Edit рядом с параметром Ease), во всех градиентах появился режим перехода цветов Linear RGB, а в радиальных теперь доступна настройка смещения и способа повторения градиента. Кроме того, в пакет Flash Professional 8 включена программа для конвертирования видеофайлов в формат Flash Video (FLV), улучшенная версия языка скриптов Lite ActionScript 1.1 для создания flash контента для мобильных телефонов, которые не могут работать с обычным Flash Player'ом, и др.

В результате грамотной компоновки элементов интерфейса, а также появления многих желаемых функций работать во Flash стало намного проще и увлекательнее. Исчерпывающую информацию о новых возможностях этого программного продукта можно найти на официальном сайте разработчика www.macromedia.com или на русскоязычной страничке www.rastyle.com/articles/index.php?id=24. А мы идем дальше.

Тема 2. Объекты, символы и их экземпляры

Каждый графический элемент во Flash называется объектом. Это может быть простейшая геометрическая фигура, нарисованная стандартными средствами, или целый flash-ролик, который был импортирован в документ для дальнейшей работы. Объекты, находящиеся в библиотеке (Window -> Library), называются символами (Symbol). Любой объект можно превратить в символ командой Modify -> Convert To Symbol. Если перетащить из библиотеки символов объект на монтажный стол, то он превратится в экземпляр символа (Instance). Любое изменение экземпляра не отражается на соответствующем символе, а редактирование символа скажется на всех его экземплярах. Типы символов во Flash приведены в таблице.

Тип "кнопка" имеет следующие состояния:

• Up - курсор мыши не находится над кнопкой;
• Over - кнопка выделена;
• Down - щелчок на кнопке;
• Hit - область, реагирующая на щелчок (для кнопок неправильных форм).

Я думаю, теории на сегодня достаточно. Теперь запустим Macromedia Flash Professional v8.0 и в стартовом окне программы выберем Create New Flash Document.

Тяжело в ученье - легко в бою!

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

Этап 1. Создание анимированной кнопки

С анимированными кнопками намного веселее, долой статику! Зачем нам скучное меню, как у всех? Тем более, Flash позволяет это сделать.

Итак, создадим новый символ - Insert -> New Symbol. В диалоговом окне я ввожу имя "Button Model" и указываю тип Movie, что нужно для того, чтобы потом воспользоваться эффектами. Будущая кнопка будет собираться из нескольких накладываемых друг на друга частей. Символ Button Model - самая первая (нижняя). В основе кнопки может лежать любая фигура. А любую геометрическую фигуру можно представить в виде нескольких простейших. Мы так и поступим: нарисуем два одинаковых круга и один прямоугольник, а потом воспользуемся командой Modify -> Shape -> Convert Lines To Fills, которая преобразует их в один монолитный блок. Затем его можно раскрасить при помощи градиента и наложить на него текст. Пусть будет "Menu".

Button Model

Теперь создадим новый символ с типом Movie, например, "Button With Bevel", и перетащим на чистое поле наш Button Model из библиотеки, окно которой вызывается по нажатию "Ctrl+L". Сделаем кнопку выпуклой при помощи фильтра Bevel. Именно для этого при создании Button Model я указал тип Movie. Когда кнопка приобрела необходимую форму, окно редактирования символа можно закрыть - во Flash ничего не теряется, а сохраняется в библиотеке символов.

Button With Bevel

Пусть по первой кнопке меню бегает световой луч. Создадим новый символ типа Movie под названием "Lighten Button", из библиотеки перетянем на чистый лист Button With Bevel и нарисуем прямоугольник, залив его градиентом "белый-желтый-белый". Эту фигуру сохраним как символ командой Modify -> Convert To Symbol под именем Light. Затем в первом ключевом кадре на временной шкале объекта Lighten Button на созданном слое поставим образ символа Light слева от кнопки, а в опциях смешивания Blend укажем режим Overlay ("Перекрытие"). Создадим второй ключевой кадр и перетащим символ вправо. Создадим анимацию при помощи Timeline -> Create Motion Tween.

Теперь подготовительные работы для заглавной кнопки меню завершены. Создаем новый символ, на этот раз типа Button. Назовем его "Super Button". Далее перетащим Lighten Button из библиотеки на рабочую область в первый кадр. Во втором кадре изменим цветовую гамму кнопки при помощи фильтра Adjust Color с параметром Hue, равным "-93" (остальные - по умолчанию). Все! Анимированная кнопка с бегающим туда-сюда лучом света готова.

Этап 2. Организация меню

Я думаю, вы представляете, как должно работать выпадающее меню. При нажатии на одну кнопку выскакивают еще несколько (опции меню), при повторном нажатии - исчезают. Этим мы сейчас и займемся.

В первом ключевом кадре нашего проекта разместим созданную на предыдущем этапе кнопку Super Button. Выделив кадр (но не экземпляр кнопки!), перейдем в редактор сценариев ActionScript (F9) и запишем "Stop();". Далее выделим саму кнопку в этом кадре, нажмем F9 и наберем следующий код: "on (release) {gotoAndPlay(2);}". Это означает: когда на кнопку нажали, нужно начать проигрывание ролика со второго кадра. Другими словами, здесь запрограммировано раскрытие меню по нажатию на кнопку-заглавие "Menu". В кадре №2 разместим другие кнопки и напишем аналогичные обработчики их нажатия. Список может разворачиваться и плавно. Для этого нужно второй ключевой кадр расположить, например, на 20-м месте, а пункты меню спрятать за его заглавием (кнопкой Super Button), после чего создать Motion Tween. Но я решил не перегружать временную шкалу, чтобы не мешать восприятию наших действий.

Проанализируем действия первой опции меню - кнопки Blur. Она иллюстрирует работу фильтра Blur, увеличиваясь в размере и перемещаясь в нижнюю точку рабочей области (это делается абсолютно тем же способом, что и для бегающего луча света). Потом она распадается на части, что достигается при помощи эффекта временной шкалы Explode. Чтобы не утомлять вас словесными описаниями проделанных операций, я приведу скриншоты временной шкалы и библиотеки символов на этом этапе. Подобные акробатические этюды опций главного меню могут предшествовать, например, загрузке страницы на вашем сайте или нового flash-документа. Остальные пункты меню создаются аналогично, только возни с ними больше, т.к. необходимо следить за тем, чтобы кнопки появлялись и исчезали строго по сценарию.

На иллюстрации видно, что между первым и вторым слоем на временной шкале расположился слой Mask. Это маскирующий слой (слой-маска), используемый тогда, когда необходимо скрыть какую-то область некоторого слоя. Вспомним, как мы создавали бегающий по кнопке Super Button луч света. Да, с помощью прямоугольника с градиентной заливкой. Конечно, можно подобрать такой фон для flash-ролика, чтобы не было видно границ этого объекта. Но грамотнее будет применить слой-маску. Итак, создадим новый слой над самым первым (Super Button) и щелчком правой кнопки мыши превратим его в маску. Далее нарисуем сплошную фигуру, которая имеет форму Super Button. Теперь через маскирующий слой мы видим только то, что расположено под нарисованной фигурой, а именно - Super Button. Вот теперь, кажется, все.:)

Итого

Поскольку современные газеты пока не умеют отображать видеоинформацию, я приглашаю вас заглянуть на сайт "КВ", где вместе с электронным вариантом данной статьи будет размещен финальный swf-ролик - результат наших сегодняшних трудов. Только установите предварительно Flash Player 8. Сам файл получился маленьким - всего 13 Kb, что даже меньше обычной статической картинки такого же качества в JPG или GIF. Вот что означает векторная графика!

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

(Продолжение следует)

Виталий КРАСИЛЬНИКОВ,
narthex@inbox.ru