Статьи / Веб-Дизайн / Flash – это просто

  2008-11-04 11:40

Помните, в 1992–1993 гг. было много шума вокруг так
называемых pen computers? Сейчас мы называем их КПК –
карманными персональными компьютерами. Широкое
распространение они получили лишь в последние два-три года.
А тогда, в 1994 г., идея заглохла, уж больно высокой была
цена этого удовольствия, доходившая до $4000.



Но поначалу казалось, что этот рынок ждет бурное развитие,
тем более что новые устройства активно продвигала такая
солидная корпорация, как AT&T. И вот в расчете на этот новый
рынок небольшая команда под руководством молодого
программиста Джонатана Гая задумала создать для этих
перспективных устройств хороший графический редактор. Была
учреждена компания под названием FutureWave, были найдены
небольшие инвестиции, работа закипела, и к концу 1993 г.
продукт под названием SmartSketch был готов. И надо же
такому случиться, что в январе 1994 г., как раз когда пошли
первые продажи программы, AT&T неожиданно объявила, что
прекращает поддерживать направление pen computers...



Для FutureWave это было равносильно катастрофе – компания
лишилась рынка, в надежде на который она работала целый год.
Других источников дохода не было. Единственное, что
оставалось делать, – это адаптировать созданное ПО для
работы на «макинтоше» и в Windows, но на этом рынке уже и
без того было тесно. Компания стала искать новую стратегию,
и к лету 1995 г. появилась идея адаптировать программу для
создания двухмерной анимации, ориентированной на Интернет,
который тогда еще только начинал свое движение в массы.



Первая версия нового продукта, получившего название
FutureSpalash Animator, была написана на Java, так как в то
время не было никакого иного способа встроить в браузер свое
программное обеспечение. Нетрудно себе представить, как
«быстро» все это работало. В октябре 1995 г. была
предпринята попытка продать разработку, но фирма Adobe, с
которой велись об этом переговоры, хотя и заинтересовалась
редактором, но была настолько разочарована скоростью работы,
что отказалась от сделки.



Однако уже осенью 1995 г. компания Netscape опубликовала
plug-in-интерфейс для своего браузера, и это позволило
значительно улучшить характеристики программы. В результате
к середине 1996 г. программа стала привлекать к себе
внимание. В августе неожиданно для самих создателей
корпорация Microsoft применила ее для работы над сайтом MSN.
Другим крупным клиентом стал Disney Online. Именно у Диснея
FutureSplash впервые столкнулся со своим прямым конкурентом
– Macromedia Shockwave.



Но вместо того, чтобы теснить конкурента, компания
Macromedia предложила сотрудничество. Это было как нельзя
кстати для небольшой фирмы с готовым продуктом,
четырехлетним опытом работы и 500 тыс. долларов
невозвращенных инвестиций. В результате в декабре 1996 г.
фирма FutureWave была продана Macromedia, а продукт
FutureSplash стал первой версией Macromedia Flash.



К середине 2000 г., когда появилась четвертая версия Flash,
редактором пользовались уже 500 тысяч разработчиков, а
plug-in был установлен у 250 миллионов пользователей,
уступая по распространенности только RealPlayer.



Растровая и векторная графика



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



При использовании растровой графики изображение разбивается
прямоугольной сеткой на очень маленькие элементы – пикселы.
Для каждого пиксела хранится его цвет, а вместе они образуют
цельную картину наподобие мозаики. Растровая графика
позволяет воспроизводить любые изображения с фотографическим
качеством. Но за все нужно платить! В данном случае мы
расплачиваемся объемами файлов (ведь нужно хранить
информацию о сотнях тысяч пикселов) и трудоемкостью
редактирования, поскольку для получения четких графических
элементов порой приходится каждый пиксел подправлять
вручную. Даже если при редактировании изображения
используются прямые линии, шрифты или другие графические
примитивы, результат все равно сводится к изменению цвета
затронутых инструментами пикселов. Изменение размеров
растрового изображения приводит к снижению его качества: при
уменьшении исчезают мелкие детали, а при увеличении картинка
может превратиться в мозаику из квадратиков – увеличенных
пикселов.



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



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



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



Веб существует достаточно давно. Вначале это были простые
текстовые странички, лишь слегка тронутые разметкой HTML и
гиперссылками, для их просмотра вполне хватало текстового
браузера. Но ничто не меняется так быстро, как Интернет.
Стали совершенствоваться и развиваться стандарты HTML,
появились новые форматы графических файлов, новые
технические возможности. Значительно увеличились пропускная
способность каналов связи и мощность пользовательских
компьютеров. Производители браузеров тоже не оставались в
стороне, совершенствуя свои детища и добавляя порой ни с чем
не совместимые новые возможности. Появились элементы
интерактивности, JavaScript, VBScript, Perl, Java, QuickTime,
RealAudio и RealVideo, MP3, MP4 и т. д., и т. п. Но до сих
пор создание качественного и красивого сайта было доступно
лишь немногочисленным магистрам cкриптов и вершителям CGI, а
от посетителей требовалось немало терпения, чтобы мириться
со значительными временными затратами на загрузку даже
самого простенького спецэффекта.



С появлением Flash, особенно последней, пятой версии,
создатели сайтов получили реальную возможность значительно
повысить качество дизайна и уровень интерактивности.
Конечно, содержание сайта имеет огромное значение, но не
будем забывать, что «встречают по одежке, а провожают по
уму». Как порой бывает досадно, когда такая красивая
страничка, на которую было потрачено столько часов, вдруг
расползается, приобретая совершенно непотребный вид в другом
браузере, JavaScript совершает непонятную ошибку, а слои
DHTML ведут себя совсем не так, как планировалось.
Веб-дизайнер, владеющий Flash, избавлен от подобной головной
боли. Все, что было им создано, посетители сайта увидят
одинаково, независимо от того, какие браузер и операционная
система работают на их компьютере. Главное, чтобы был
установлен plug-in для просмотра Flash, но даже если его
нет, загрузка и установка займут от силы минуту.



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



На самом деле Flash позволяет использовать оба типа графики
– и растровую, и векторную. Но векторную можно создавать и
редактировать непосредственно во встроенном редакторе, а
растровую приходится импортировать из внешних файлов (см.
статью «Импорт графики во Flash» на стр. 30). При этом
поддерживается возможность преобразования растровой графики
в векторную путем автоматического определения контуров
областей одинакового цвета — и наоборот. Статические и
анимированные Flash-изображения можно не только
воспроизвести на веб-странице, но и использовать в качестве
совершенно самостоятельных презентаций. Можно даже
преобразовать ролик в формат исполняемой программы (.exe), и
тогда для его воспроизведения не потребуется никаких
дополнительных программных средств.



Интерфейс



Все разработки компании Macromedia Inc. построены на основе
интуитивно понятного интерфейса. Редактор Flash не является
исключением. Достаточно взглянуть на окно запущенной
программы, как становится понятным назначение имеющихся
элементов. Если вы работали хотя бы в одной из графических
программ, то несомненно узнаете расположенную слева панель
инструментов. При выборе любого инструмента становятся
доступными дополнительные модификаторы, позволяющие
настраивать его работу. Например, выбрав инструмент заливки
(Fill), можно регулировать допустимую величину разрывов в
закрашиваемом контуре, что позволяет выполнять заливку фигур
с «разорванными» границами. Модификаторы стирательной
резинки (Eraser) кроме изменения размера стираемой области
позволяют устанавливать тип стирания – только фон, контур
или определенный цвет. В пятой версии Flash появился
замечательный инструмент – перо (Pen). Оно предоставляет в
ваше распоряжение очень удобные в использовании кривые
Безье. Инструменты редактирования Arrow и Subsellect
позволяют не только изменять положение и размеры
нарисованного объекта, но и редактировать его векторную
основу.



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



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



Анимация



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



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



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



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



Библиотеки объектов



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



Библиотечные объекты могут представлять собой не только
векторные графические рисунки, но также импортированные
растровые изображения, аудиофрагменты в форматах WAV или
MP3, самостоятельные



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



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



ActionScript



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




Даже те, кто до этого не программировал, смогут быстро
освоиться с написанием необходимых сценариев. Если вам
достаточно стандартного набора действий, таких, например,
как переход на определенный кадр фильма, открытие HTML-
страницы, загрузка и передача данных, реакция на нажатие
кнопок, то достаточно открыть группу основных действий –
Basic Actions, выбрать необходимую команду и ввести в поля
требуемые значения, причем в большинстве случаев их можно
выбрать из предложенного набора.



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



Инструменты сторонних производителей



Судя по скорости развития сайтов с Flash во всем мире, в
ближайшее время следует ожидать бурного распространения этой
технологии в Рунете (см. статью «Flash’а не видали?» на стр.
29). О растущей популярности Flash можно судить и по факту
появления программ, имеющих довольно узкую специализацию, но
предназначенных для создания элементов Flash-роликов или
преобразующих сделанные с их использованием работы во
Flash-фильмы.



Одной из первых программ такого рода была Swish,
предназначенная исключительно для работы с текстом, но
позволяющая создавать очень красивые эффекты буквально
нажатием нескольких кнопок. Результаты работы программа
сохраняет в формате .swf, который затем можно импортировать
в собственный Flash-проект. Сейчас эта программа «обросла»
дополнительными возможностями, делающими ее полноценной
средой для разработки небольших роликов (www.swishzone.com).




Тем авторам, которые создают красивые и эффектные фильмы,
без сомнения будет интересна программа Creator компании 3rd
Eye Solutions. Она позволяет создать скринсейвер на основе
Flash-ролика, сохраненного в формате .exe. Причем, в отличие
от других подобных программ, просто позволяющих
устанавливать выбранный Flash-ролик в качестве хранителя
экрана, вы получите инструмент, создающий программу
инсталляции скринсейвера на любой компьютер (www.flashjester.com/software/creator/index.htm).




Не так давно появилась программа Toon Boom Studio,
предназначенная для профессиональных аниматоров. Основное
отличие этой программы от редактора Flash – полное
отсутствие возможности программирования на ActionScript.
Зато, работая в Toon Boom Studio, ощущаешь себя аниматором в
студии Уолта Диснея: прекрасно продуманное рабочее место –
настоящий стол художника- мультипликатора, возможность
создавать индивидуальные палитры с именованными названиями
для каждого цвета, виртуальная камера, позволяющая следить
за объектом, в результате чего достигается эффект движения
зрителя и ощущение объемности сцены. И, наконец, возможность
синхронизации артикуляции героев со звуковым сопровождением.
Все это значительно облегчает работу над фильмом (www.toonboomstudio.com).




Не стану перечислять всевозможные конверторы из различных
форматов во Flash и наоборот. Достаточно сказать, что даже
для такого монстра трехмерной графики, как 3D Studio Max,
существует plug-in для трассировки 3D-графики в векторный
формат – пакет Swift 3D компании Electric Rain.



Flash – это не только Интернет...



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



Технология Flash возникла относительно недавно (первая
версия была выпущена в 1996 году), но широкое
распространение получила лишь в самые последние годы. У нее
еще сохраняется мощный потенциал роста. Хорошей иллюстрацией
тому служит интеграция Flash-технологии c технологией
передачи осязательных ощущений TouchSense (подробнее об этом
и о других новых применениях Flash см. в статье «Flash –
технология рекламы» на стр. 32). Между прочим, это добрый
знак и в деле обеспечения использования компьютеров и
Интернета людьми с ограниченными физическими возможностями.
Хочется надеяться, что и Flash будет доступен для этой
группы пользователей.

Автор: Павел Лапин