Программа Macromedia Flash и ее использование

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

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

Имея удобную среду разработки, Macromedia Flash 5 легко интегрируется в существующий процесс создания Web-узла, благодаря возможностям импорта из Macromedia FreeHand и Fireworks.

Macromedia Flash 5 также предоставляет широкий набор средств разработки насыщенных Web-приложений, включая тесную интеграцию с Macromedia Generator.

Новые возможности: Macromedia Common User Interface — привычный пользовательский интерфейс позволяет разработчикам свободно себя чувствовать в любом приложении для Web-дизайна от Macromedia.

Macromedia FreeHand® Import — импортируйте графику из Macromedia FreeHand для создания законченных публикаций.

Macromedia Generator™ Developer Edition Support — автоматизируйте процесс создания Flash-контента с помощью Macromedia Generator Developer Edition, решения для эффективного обновления Flash-сайтов.

Bezier Tools — привычные инструменты «Выделение» и «Перо», с поддержкой кривых Безье, предоставляют новые возможности создания иллюстраций.

Shared Symbol Libraries — библиотека используемых в проекте символов упрощает управление ими и минимизирует размер конечного файла.

Web-Native Printing — создавайте Web-приложения, с широкими возможностями высококачественной печати.

Movie Explorer — просматривайте и сортируйте иерархическую структуру документа для простоты анализа и редактирования больших проектов.

ActionScript Development Tools — эффективно создавайте насыщенные Web-приложения с помощью нового языка сценариев близкого к JavaScript, редактора ActionScript и Debugger, а также фукции Smart Clips — решения для разработки часто используемых элементов.

XML Transfer Support — поддержка XML позволяет создавать мощные приложения для электронной коммерции.

HTML Text Support — возможность включать форматированный HTML-текст и гиперссылки облегчает создание файлов насыщенных текстовой информацией.

Как вы думаете, реально ли уместить страничку, содержащую приличное количество анимации, звука и удивительных способов интерактивности в файл порядка 100kb? Сделать так, чтобы эта страница работала одинаково как в Netscape Navigator (NN), так и в Internet Explorer (IE)? Компания Macromedia решила большинство проблем совместимости и производительности, выпустив Flash, который к сегодняшнему дню весьма эволюционировал и является полноценной частью инструментов / техник web-дизайна.

Коротко и ясно о том, что это такое. Существуют plug-ins (примочки), которые встраиваются в браузер (web browser), и служат для просмотра Flash страниц. Называются они Flash Player. Причем в последних версиях IE и NN эти примочки уже встроены (если нет, то их можно бесплатно скачать с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются.

В пользу Flash приведу его основные достоинства и статистку Macromedia.

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

· Устранение проблем совместимости между браузерами. В отличие от HTML, Flash одинаково работает как в IE, так и в NN. Имеется даже специальный вариант примочки-проигрывателя для браузеров, поддерживающих Java (Flash Java Player).

· Мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, при помощи которого можно создавать «интеллект» для своей страницы. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash 5 (несмотря на название «ActionScript») — это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать.

· Красота. Да, да, именно! Flash имеет автоматическую поддержку anti-aliasing (антиалайсинг, сглаживание контуров с помощью смешения соседних цветов). В результате даже простая линия или кружочек, нарисованные во Flash, выглядят приятно для глаз. Что же тут говорить о рисунках, нарисованных профессионалами.

· Удобство. Создавать страницы во Flash под силу даже ребенку, и, признаюсь, это весьма приятное занятие. А если обладать элементарными навыками дизайна и рисования, открывается весь простор для Вашей фантазии, предоставляемый Flash.

· Распространенность. Flash потихоньку становится стандартом де-факто (см. статистику ниже). В случаях, где необходима широкая интерактивность, графика, звук, и маленький размер, Flash незаменим.

На сегодняшний день Flash Player используют 222 миллиона человек, и каждый день его скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователей Сети просматривать страницы с Flash содержимым.

Примочки распространяются бесплатно, в то время как за программу создания Flash файлов приходится платить. Последняя, 5-я версия продукта стоит $ 399. Пользователям старых версий это удовольствие достанется за $ 149.

К написанию этой статьи меня привело желание осветить для достаточно широкого круга людей пятый Flash (Flash 5). Дело в том, что большинство ресурсов по Flash — на английском языке. В русскоязычной части сети эта ценная информация отсутствует. Я даже знаю пару российских сайтов, сделанных нашими же ребятами, но на английском языке. (Причем это — самое стоящее из того, что есть). Понятно, что люди делают сайты на английском, т.к. использование русского языка сильно сужает аудиторию: Тем не менее, я считаю, что есть смысл в создании ресурсов, доступных широкой публике, на русском.

Эта (первая) часть статьи — обзорная. О том, стоит ли писать продолжение, я буду судить по Вашим откликам. Я буду очень рад поделиться своим опытом со всеми читателями и посвятить новичков в захватывающее действо творчества с помощью Flash. К сожалению, у меня нет времени заниматься созданием полноценного ресурса (сайта по Flash, скажем). Но написание иллюстрированных обучающих статей (tutorials) в моей власти. И если интерес к этой теме будет высок, я с удовольствием продолжу цикл, раскрывая возможности Flash 5. О том, насколько Вас это заинтересовало, яростно пишите на rubo@rubo.com.

В последнее время программа Flash стала модной. Многие полагают, что Flash — это новый продукт, однако это не так. Еще в 1995 году появилась небольшая программа Future Splash Animator для векторной анимации Web-графики, а два года спустя, в 1997 году, компания Macromedia приобрела ее и начала развивать продукт под новым названием Flash.

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

Итак, приступим.

Будем считать, что у вас уже есть Flash 5. Программа работает под Windows 95/98/NT/2000. Установить ее очень легко — с этим справится любой, кто установил хотя бы парочку программ в Windows. После установки можете смело заходить в нее, и вот, приблизительно, то, что вы увидите:

Интерфейс Flash 5 очень похож на интерфейс программ Adobe. Он весьма удобен и легок. После некоторого времени работы с программой понимаешь, как хорошо все продуманно и сколько труда разработчики Macromedia вложили в свое детище.

Слева находятся панели инструментов. С помощью них можно выбирать инструменты, а также управлять рабочей областью, модифицировать объекты и выбирать простые цвета. Справа находятся диалоги настройки инструментов, цвета, текста, свойства кадров и объектов. Посередине — рабочая область, где мы будем творить, а над ней шкала времени (Timeline).

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

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

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

Давайте попробуем нарисовать первый простой мультик. Нам понадобятся инструменты — «овал» и «выделение». Выполните следующую последовательность действий:

1. Выберите инструмент «овал» и нарисуйте с помощью него овал или круг в левой части сцены.

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

3. Теперь войдите в меню Insert и выберите Convert to symbol (или нажмите F8). В появившемся диалоге выберите селектор Graphic и нажмите ОК:

Теперь выберите на шкале времени вверху 25-й кадр (просто щелкните по нему мышкой), и выберите меню Insert -> Keyframe (или нажмите F6). Этим вы создадите так называемый «ключевой кадр» на 25-м кадре вашей шкалы времени. У вас должно получиться нечто похожее:

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

5. Вернитесь на шкале времени в 1-й кадр. (В доказательство Вы должны увидеть свою фигуру опять в левой части экрана). Из меню Insert (или из контекстного меню при нажатии правой клавиши мыши на первом кадре) выберите Create motion tween.

Поздравляю! Вы только что сделали очень простой, но уже мультик, во Flash. Выберите Control > Play (или просто нажмите Enter) чтобы просмотреть результат.

6. Давайте добавим кое-что в наш мультик. Выберите опять 25-й кадр и выделите вашу фигуру. Войдите в диалог Effect. Если сложно отыскать нужную закладку в диалогах справа, выберите Window > Panels > Effect. В выпадающем списке в этом диалоге выберите Alpha (прозрачность), а появившийся параметр опустите до 0%.

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

7. Последний шаг. Нам нужно оттранслировать наше творчество в. swf файл и сгенерировать HTML файл, который загружал бы мультик в браузер. Это можно сделать, выбрав File > Publish (или нажав Shift-F12).

Теперь можно открыть созданный вами HTML файл в браузере. Это можно сделать даже из Flash, выбрав File > Publish Preview > HTML (или нажав F12). При этом Flash воспользуется браузером, установленным по умолчанию.

Вот, вкратце, цикл создания простой сценки во Flash.

Содержание (и вообще, написание) будущих статей на тему Flash зависит от ваших откликов. Я искренне надеюсь на, что в ближайшем будущем в Рунете (если называть так российскую часть Интернета) появятся достойные ресурсы по Flash и буду рад поделится своим опытом.

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

Для рисования на рабочем столе предназначены инструменты рисования (см. панель инструментов на рис. 1). Именно о них мы и поговорим прежде всего.

Создание любой анимации начинается с отрисовки статических изображений. Быстрая смена одного изображения другим, в результате которой создается впечатление движения изображения, и есть анимация. Для контроля длительности показа изображений (управления анимацией) служит временная шкала, или монтажная линейка (Timeline).

На рис. 1 представлены также плавающие панели (floating, dockable panels) — панели, предназначенные для настройки рабочей среды Flash. Итак, рассмотрим основные инструменты рисования во Flash

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

Во Flash применяются два типа звуков: событийный и потоковый. Событийный звук должен быть загружен полностью, прежде чем он начнет воспроизводиться и будет играть, пока его не выключат. Потоковый звук начинает играть как только скачается достаточно данных для первых нескольких кадров. Синхронизируется с линией времени (Timeline).

Добавление звука к клипу подразумевает создание отдельного слоя (Layer) для звука, добавление звука, и настройку звука в закладке Sound в свойствах кадра (Frame Properties).

Интенсивность звукового потока (sampling rate) и степень его сжатия (compression ratio) значительно влияют на качество и размер файла клипа. Контролируйте качество и размер отдельных звуковых фрагментов с помощью диалогового окна Sound Properties, или изменяйте устновки для всех звуков в клипе в диалоговом окне Publish Settings.

Для просмотра интерактивного ролика по использованию звуков во Flash, выберите Help > Lessons > 07 Sound.

Технология Macromedia Flash становится все более популярной среди Web-специалистов. Вначале Flash-технологии использовались преимущественно для создания различных анимированных баннеров и заставок, затем большую популярность приобрели Flash-игры и короткие анимационные Flash-ролики. Параллельно с этим активно развивались онлайновые интерактивные бизнес-приложения: руководства пользователя, рекламные презентации, средства обучения и т. п. Все чаще технология Flash стала применяться для создания сложных интерактивных сайтов и, по сути, в последние годы превратилась в промышленный стандарт для работы с интерактивным контентом. Одно из главных удобств Flash, принесшее этому продукту широкую популярность, — обеспечение принципа «Build once, deliver anywhere» («Разработал единожды, распространяй везде»). Приложения, созданные на базе Flash, работают на разных платформах Windows, Macintosh, UNIX, PDA и даже в мобильных телефонах. Продукт Macromedia Flash Player фактически стал стандартом и сегодня установлен на компьютерах 97,6% пользователей Интернета (рис. 1).

Рис. 1. Распространенность приложений на ПК, подключенных к Интернету на июнь 2005 г., % (источник: NPD)

По мере того как к сайтам предъявлялись все более высокие требования в плане мультимедийности и интерактивности, требовались и новые средства разработки для обеспечения новых возможностей и более полного контроля над дизайн-процессом. Программа Flash быстро развивалась. Большой интерес вызвал недавний релиз очередной — восьмой — версии Macromedia Flash. Последняя версия программы выпущена в двух версиях: базовой (Flash Basic 8) и профессиональной (Flash Professional 8). Профессиональная версия предлагает все функции, доступные в базовой, а также имеет ряд дополнительных. В данной статье мы остановимся на возможностях версии Flash Professional 8, с помощью которой пользователи смогут разрабатывать интерактивный контент, содержащий видео высокого качества, графику и анимацию.

Flash Professional 8 содержит много совершенно новых особенностей, включая новые графические эффекты, интегрированный независимый видеокодек, поддержку альфа-каналов, высококачественный рендеринг текста с улучшенным контролем сглаживания, усовершенствованные инструменты для работы с текстом, новый видео plug-in для экспорта файлов Flash Video (FLV) из профессиональных видеопродуктов и т. д.

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