Общая характеристика и интерфейс пакета

Пакет Macromedia Flash реализует специальную технологию Flash, которая позволяет объединить в одном формате текст, графику, звук, анимацию и интерактивные компоненты. Основу Flash-фильмов составляет специальная векторная анимация, отличающаяся высокой компактностью при удовлетворительном качестве. Сайт, разработанный на основе этой технологии, приобретает высокую динамичность и практически безграничную интерактивность. Публикация Flash-фильмов в сети производится путем встраивания их в HTML-документ. В качестве одного из HTML-редакторов, позволяющих корректно встраивать Flash-анимацию в HTML-документ, можно рекомендовать Macromedia DreamWeaver, рассмотренный в § 6.2. Достоинством редактора является его экономичность. В отличие от многих других WYSIWYG-редакторов он практически не добавляет никаких избыточных тегов, в том числе и при встраивании в HTML-документ Flash-анимации. Технология публикаций HTML-документов со встроенной Flash-анимацией позволяет не только легко модифицировать сайт, но также и обеспечить к нему доступ тех пользователей, которые не имеют проигрывателей Flash-анимации.

Macromedia Flash сохраняет созданные фильмы в формате SWF (ShockWave Flash). Это один из весьма распространенных форматов векторной анимации в сети. Его спецификация была опубликована фирмой Macromedia в 1998 г. В новом тысячелетии эта спецификация, по существу, стала стандартом де-факто. Свыше 200 миллионов человек загрузили с сайта Macromedia проигрыватель Flash-фильмов. Почти 90% лиц, имеющих доступ к сети Интернет, пользуются браузерами, пригодными для просмотра Flash-анимации. Проигрыватели Flash-фильмов поставляются с оболочкой Windows, начиная с версии 95 г., MacOSS, браузерами MS Internet Explorer, начиная с версии 5.0, и Netscape Navigator, начиная с версии 4.0. Некоторые производители программного обеспечения поддерживают формат SWF, включая в свои программные продукты модули, позволяющие экспортировать данные в этот формат (например, Flash Writer для Adobe Illustrator).

Созданную в пакете Flash анимацию в дальнейшем уже нельзя редактировать. Только для интерактивных фрагментов возможно динамическое обновление из внешних источников. Графические же материалы и звуковые фрагменты требуют предварительной специальной обработки перед их вставкой в опубликованный в сети Flash-фильм. Для этой цели используется специальная программа Macromedia Generator, распространяемая с сайта данной фирмы.

Программный пакет Flash мы будем рассматривать на основе его современной версии 5.0, интерфейс которой с заставкой представлен на рис. 6.31 . Сразу следует отметить, что объем его технического описания превышает 800 страниц, поэтому в рамках данного учебника мы остановимся лишь на некоторых узловых моментах технологии подготовки векторной анимации в данном программном пакете. В частности, просматривается определенное сходство интерфейса данного пакета и редактора векторной графики Adobe Illustrator.

Слева на рис. 6.31 видна «Палитра инструментов» (Tools). Более крупным планом она показана на рис. 6.32 . Представленные в составе этой палитры инструменты характерны для редакторов векторной графики. В частности, можно перечислить главные из них: стрелки для полного и частичного выделения графических объектов, инструменты «Линия» и «Лассо», «Перо» и «Шрифтовые элементы», «Овал» и «Прямоугольник», «Карандаш» и «Кисть», «Чернильница» и «Красящее ведро» (Paint Bucket), «Капельница» и «Ластик».

Под группой собственно инструментов (Tools) размещается панель «Вид» (View), куда входят инструменты: «Рука» - для перемещения изображения в пределах окна документа - и «Масштаб». Ниже расположен фрагмент «Цвета» (Colors), где, как и в других редакторах векторной графики, задается цвет контурных линий и цвет заливки замкнутых областей, которые соответствуют инструментам «Чернильница» и «Красящее ведро».

Еще ниже расположен фрагмент «Свойства» (Options). Этот фрагмент подобен адаптивной палитре инструментов в пакете PhotoShop. Здесь содержание изменяется в зависимости оттого, какой из рисующих инструментов палитры активен в данный момент.

На рис. 6.32 активным показан инструмент «Карандаш», поэтому в нижней части этой палитры, в адаптивном фрагменте «Свойства» (Options) можно задать вариант или способ рисования им. В «Свойствах» представлены три варианта рисования: «Спрямление отрезков» (Straighten), «Скругление резких переходов» (Smooth) и «Выравнивание толщины линий» (Ink). Так как активен первый из этих вариантов, любые линии, нарисованные карандашом, будут автоматически аппроксимироваться ломаной, состоящей из прямолинейных отрезков.

Из инструментов для выделения здесь представлены стрелки для полного (черная) и частичного (светлая) выделения объектов и лассо для выделения областей произвольной формы. Представлены два инструмента для рисования плоских фигур: овал и прямоугольник, а также ластик и пипетка для съема значения цветового тона.

Кратко остановимся на некоторых других палитрах пакета Flash. Вверху справа на рис. 6.31 показана палитра с четырьмя вкладками: «Инфо» (Info), «Трансформация» (Transform), «Выравнивание» (Stroke) и «Заполнение» (Fill). Первая вкладка активна. Она позволяет, как показано на рис. 6.33 , установить текущие координаты курсора, размеры графических объектов, а также их координаты в цветовом пространстве RGB.

Функции вкладок «Трансформация» и «Заполнение» рассматриваемого окна полностью соответствуют названиям, а вкладка «Линия» (Stroke) позволяет применять при оформлении различные линейки, ширина и цвет которых регулируются с помощью выпадающих списковых окон. Также в виде выпадающего (Pull-Down) списка представлены различные виды линеек, как это представлено на рис. 6.34 .

Из других палитр, представленных на рис. 6.31 , остановимся на цветовых. Так, линейная палитра цветов «Смеситель» (Mixer) показана на рис. 6.35 (на рисунке открыты обе вкладки). Если сравнивать ее с соответствующими палитрами в графических пакетах фирмы Adobe, то она подобна палитрам «Синтез». Данная палитра служит для выбора цветового оттенка. С помощью двух небольших окон в верхней левой части палитры отдельно выбирается цветовой оттенок для линий (на рис. 6.35 по умолчанию показан черный цвет) и для заполнения замкнутых контуров. Цвет выбирается мышью на цветовой линейке и его координаты показываются в RGB-представлении в правой части палитры. Здесь же снизу указана прозрачность сс-канала, т. е. специального корректирующего слоя, который маскирует изображение. Сего помощью можно создавать разнообразные цветовые эффекты.

С палитрой «Смеситель» интегрирована в виде вкладки палитра «Эталоны» (Swatches). В ней представлен, как показано на рис. 6.35 , набор цветовых образцов (иначе, это библиотека эталонов цвета). Помимо большого количества цветовых образцов, в нижней части палитры содержаться еще наборы линейных и радиальных градиентов. Палитра может пополняться новыми образцами. Из нее могут удалятся те тона или градиенты, которые не требуются пользователю. Т. е. каждый пользователь адаптирует содержимое данной палитры под свои запросы.

Еще ниже, на рис. 6.31 , находятся три палитры для работы с текстом, объединенные в общее окно со вкладками. На рис. 6.36 раскрыта одна из этих вкладок, а именно вкладка «Шрифт» (Caracter). Как видно из рисунка, с помощью палитры легко выбрать гарнитуру и кегль шрифта, а также его начертание и цвет. Предусмотрена также возможность регулировки трекинга (плотности размещения символов, обычно при малых кеглях расстояние между символами увеличивают для лучшей читаемости текста) с помощью списка, расположенного под списком для выбора кегля. Имеется также опция «Кернинг» (Kern), которая позволяет регулировать расстояние между символам и в пределах некоторых сочетаний их пар, например, прописной буквой «Г» и строчной «о».

Упомянем еще одну палитру - «Звук» (Sound), которая входит в группу из четырех палитр, с помощью которых выполняется редактирование событий и эффектов. Внешний вид этой палитры представлен на рис. 6.37 . В ее верхней части в раскрывающемся списочном окне представлен список звуков, который пополняется путем их импорта из различных пакетов и папок. Для этой цели в секции меню «Файл» имеется соответствующая команда. Мы импортировали звуковой файл Microsoft.wav из папки Media каталога MS Windows.

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

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

Основные понятия и элементы Flash-технологии

Рассмотрим далее, из каких элементов состоит Flash-анимация и как она подготавливается. Весь flash-фильм делится на отдельные достаточно независимые фрагменты или эпизоды, называемые сценами (Stage). Каждая из таких сцен следует сразу за предыдущей без какой-либо задержки, т. е. анимационный фильм представляет собой линейную последовательность таких сцен. Здесь просматривается прямая аналогия со съемками обычного фильма, при которых фильм делится на отдельные эпизоды, подготавливаемые и редактируемые отдельно. Естественно, что короткие фрагменты редактировать гораздо проще. Такой подход упрощает и редактирование фильма в целом: в готовом фильме отдельные сцены можно поменять местами. Можно также добавить новую сцену, включив ее в нужное место совокупной последовательности сцен. При этом нумерация кадров изменяется автоматически, т. е. разработчик Flash-анимации освобожден от кропотливой работы с отдельными кадрами. Каждая сцена характеризуется только двумя параметрами: имя сцены и ее расположение (или порядковый номер).

Для создания новой сцены используется команда Scene секции меню Insert (Вставка). Эта команда вставляет новую сцену сразу после текущей, присваивая ей по умолчанию соответствующий номер. Для удаления сцены используется команда Remove Scene из той же секции меню Insert. Кстати, эта команда не может быть отменена. Сказанное иллюстрируется рис. 6.38 .

Для переключения между сценами используются различные подкоманды команды Goto секции меню View. Все они показаны на рис. 6.39 . В частности, подкоманда First (альтернатива - клавиша Ноте) обеспечит переход к первой сцене, Previous (клавиша PgUp) и Next (клавиша PgDn) - к предыдущей или последующей сцене, Last (клавиша End) - к последней сцене. Можно пользоваться и списком сцен, приведенным в нижней части меню команды Goto.

Еще удобнее управлять сценами с помощью специального диалогового окна «Сцена», показанного на рис. 6.40 . В окне имеется список всех сцен фильма. Для выбора сцены достаточно щелкнуть по ее имени мышью. Двойной щелчок позволяет изменить имя сцены. Только в этом окне можно изменить порядок следования сцен. Для этого следует выбрать нужную сцену и с помощью мыши переместить ее в заданную позицию в списке, как это сделано на рис. 6.40 со сценой четыре. Расположенные в нижней строке окна кнопки Duplicate (дублировать), Add (добавить), Delete (удалить), позволяют дублировать, добавить и удалить сцены, а также переименовать любую из них. Кстати, пиктограммы для этих кнопок настолько выразительны, что назначение кнопок не требует пояснений.

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

Объект является одним из основных и фундаментальных понятий Flash-технологии. Главная задача разработчиков Flash-технологии состояла в том, чтобы создаваемые в пакете анимационные файлы были наименьшего размера. Именно для достижения этой цели был введен механизм эталонов и формируемых на их основе объектов. Вначале создается эталон, т. е. описание объекта. Эталон помещается в библиотеку. Затем соответствующий объект может любое число раз вставляться в анимационный файл (Flash-фильм) с помощью ссылок на эталон. Сам эталон вставляется во Flash-фильм при первой ссылке на объект. При повторном воспроизведении объекта плейер вставляет сохраненный эталон не обращаясь к изображению вновь. SWF-файл обеспечивает реализацию такой технологии.

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

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

Перечислим три основные разновидности объектов, используемых во Flash-фильмах:

· Графические (Graphic). Они могут содержать графику, звук, анимацию, но не могут иметь имени, вследствие чего не могут управляться посредством скриптов;

· Кнопки (Button). Могут включать в себя графику, звук и прочие элементы. Содержат толь ко четыре кадра. Имени кнопки также не имеют;

· Клип мультимедиа (Movie Clip). Содержит графику, звук, анимацию и т. д. По-существу, это полноценный короткий Flash-фильм. У него имеется имя, что позволяет программно управлять им и создавать различные динамические эффекты.

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

· Первый способ инициируется командой «Новый объект» (New Symbol) секции меню «Вставка» (Insert). В появившемся диалоговом окне (рис. 6.42 ) следует ввести имя эталона и выбрать в переключателе его тип из трех возможных вариантов. В верхней части окна появится надпись, содержащая номер сцены и имя нового эталона;

· Можно использовать пиктограмму создания нового объекта в нижней строке окна «Библиотека». В результате будет открыто уже упомянутое окно, показанное на рис. 6.42 , в котором нужно будет повторить действия предыдущего пункта данного списка;

· Можно выделить те графические элементы, которые требуется включить в новый объект, а затем выбрать команду «Преобразовать в объект» (Convert to Symbol) секции меню «Вставка». Затем, все в том же диалоговом окне «Новый объект» (рис. 6.42 ), выполнить операции, о которых говорилось в первом пункте списка.

Выше уже упоминалось, что эталоны всех объектов хранятся в библиотеке. Соответствующее диалоговое окно показано на рис. 6.43 . Оно открывается командой «Библиотека» (Library) секции меню «Окно» (Window). Если это окно редактируемого объекта библиотеки, то в верхней строке окна указывается имя объекта и сцены. В нашем случае указана «Сцена 1». В следующей полосе указано общее количество объектов в библиотеке и находится кнопка «Свойства» (Options), нажатие на которую вызывает появление меню окна «Библиотека». Меню также представлено на рис. 6.43 . Ниже следует окно предварительного просмотра объекта. Если эталон состоит более, чем из одного кадра (т. е. его можно проигрывать с помощью плейера), то в левом верхнем углу окна появляются две кнопки: для запуска анимации и ее останова. Еще ниже, в окне «Библиотека», размещается список всех эталонных объектов (на рис. 6.43 их представлено всего три).

Для каждого из эталонов библиотеки может быть вызвано контекстное меню, показанное на рис. 6.44 .

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

Следует также отметить, что в версии 5.0 рассматриваемого пакета в секции меню «Окно» наряду с командой «Библиотека» предусмотрена также команда «Стандартные библиотеки» (Common Linraries), которая вместе с соответствующими подкомандами показана на рис. 6.45э . В стандартных библиотеках содержатся эталоны определенного типа в каждой. В частности, можно указать кнопки, графические эталоны, интерактивные обучающие фрагменты, видео- и аудиоклипы.

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