Разработка Web-сайта компании "САМ"

 

 

 

 

 

3.3 Macromedia Flash

 

World Wide Web (Всемирная паутина)  развивается очень стремительно. Традиционные Web-сайты (Web-sites) со статическими  информационными страницами уже не привлекают как прежде внимание конечных пользователей.  Поэтому Web-дизайнеры и разработчики пытаются придать своим страницам неотразимый вид, вводя графику и файлы анимационного формата GIF. Несмотря на то, что применение графики в традиционных форматах сжатия изображений GIF, JPEG и PNG придает сайту некоторый эффект, тем не менее, загрузка таких страниц может отнять много времени из-за больших размеров графических файлов. Альтернативным инструментом создания анимации является программный продукт— Macromedia Flash, который поможет добиться поставленных при Web-разработке целей.

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

• Применение векторной (vector) графики, которая в действительности представляет собой ряд математических формул, описывающих размер, цвет и местоположение формы. Векторная графика состоит из линий и кривых, тогда как растровая (bitmapped) — из небольших точек растра, или пикселей (pixels). Применение математических формул является главным преимуществом отображения графики и сохранения небольшого размера файлов, что особенно важно для Web.
• Возможность сжатия анимации, графики и звука. Такое сжатие файла обусловливает свойство потоковой передачи (streaming), которое позволяет отображать сайт в Web-броузере до полной загрузки его содержимого. Это означает, что одна векторная графика сайта отображается, в то время как другая графика, звук и анимация все еще загружаются.

Интерактивность во Flash может  состоять из самых разных свойств. Помимо неограниченных возможностей применения простой графики, анимации или крупных  заголовков, в любой объект или  область сайта можно вводить  полноценные навигационные свойства: кнопки, меню или фрагменты анимации, с помощью которых конечный пользователь перемещается по сайту. А задавая  действия (actions), можно создавать  интерактивные фильмы. Для создания интерактивных элементов управления во Flash предоставляется язык создания сценариев - ActionScript.

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

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

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

 

3.3.1 Flash и его преимущества

 

• Flash-технология предоставляет cвободу развития

Flash-технология позволяет  достичь такой свободы развития, которую вы не найдете больше  нигде. Flash позволяет дизайнерам  помещать объекты там, где они  хотят, не беспокоясь об абсолютном  и относительном размещении, проблемами  с шаблонами, z-индексами, проблемах  таблицы-в-таблице, разрешениях экрана  и так далее. Используя Flash-технологию, вы просто помещаете объект  на канву там, где хотите, и  свободно перемещаете его. HTML / CSS никогда не смогут делать того, что доступно Flash - никогда.

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

 

• Flash-технология обеспечивет большую интерактивность

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

Flash-технология - это не  единственный способ включить  видео в web-страничку. Существуют  и другие инструменты, такие  как Windows Media Player, Real-Player и QuickTime. И  все же, Flash используют около 97% пользователей (по сравнению с Windows Media Player - 59%, Real-Player - 56% и QuickTime player - 41%). HTML/CSS такой опции не предоставляют.

 

• Flash-технология гарантирует большую гибкость 

Flash-технология оперирует  векторными объектами, и поэтому  она позволяет регулировать размеры  экрана, базирующиеся на размере  браузера, и таким образом ваши  рисунки и текст остаются четкими.  Это преимущество приобретает  все большее значение, так как  люди все чаще заходят в  сеть не со своих компьютеров,  а с альтернативных источников, таких как "карманный" компьютер  (PDA), мобильный телефон или наручные  часы.

 

• Улучшенная интеграция с помощью Flash-технологии

Flash-технология позволяет  интегрировать любой мультимедийный  формат. Например, во Flash можно вставить  растровые форматы рисунков (такие,  как GIF, JPEG, PNG, PCT, TIF), векторные форматы  (включая FreeHand, EPS, Illustrator) и, как  уже говорилось, звуковые форматы  (WAV, AIF, MP3).

 

• Flash-технология и шрифты 

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

 

• Моделирование фреймов 

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

 

• Без обновлений

Flash-технология дает возможность  выводить новые данные без  обновления страницы.

 

3.3.2 Flash и его недостатки

 

• Специальный модуль для Flash-технологии

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

 

• Худшее качество изображения 

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

 

• Проблема индексации Flash-технологии

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

 

• Проблемы при печати Flash

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

 

 

 

1. SWiSHmax

 

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

Создание сайта с использованием Flash требует наличия определенных знаний, в частности ActionScript, многочисленных настроек MacromediaFlash MX и т.д. Для многих начинающих пользователей это является серьезным препятствием, так как  у некоторых не хватает времени  на изучение сложных программ, а  у некоторых - терпения. Однако, в  последнее время появились и  альтернативные продукты для создания flash-анимации, которые являются более  простыми в освоении и при этом позволяют получить хорошие результаты. Об одной из таких программ - SwishMAX - и пойдет речь ниже.

 

Рисунок 1 – Логотип программы  SwishMAX

Программа SwishMAX - это относительно новая разработка австралийской  компании SWiSHzone. Она является расширенной  версией программы Swish2, которая уже  успела завоевать популярность среди  пользователей во всем мире (тем  более, что первая версия этой программы  распространялась бесплатно). Преимуществом  этой программы можно считать, прежде всего, простоту использования. Даже неподготовленный пользователь за короткое время сможет создать с ее помощью профессиональные флеш-ролики. SwishMAX имеет все лучшие качества Swish2 и при этом обладает большим количеством дополнительных опций - дополнительными инструментами для рисования (AutoShapes), возможностью создания скриптов и их отладки, огромных количеством новых настраиваемых эффектов (более 200), улучшенными опциями экспорта.

 

4.1.1 Элементы SwishMAX

 

Окно SwishMAX состоит из нескольких элементов. Рассмотрим их по порядку.

1. Панели инструментов (см. рис.2)

 

Рисунок 2 – Панели инструментов

 

По умолчанию отображены три панели инструментов:

• Standard Toolbar - панель с основными командами: вырезать, копировать, вставить, удалить, найти, создать новый проект, открыть, сохранить и пр.
• Insert Toolbar - панель с командами вставки основных объектов: текста, изображения, кнопки, новой сцены.
• Control Toolbar - панель управления анимацией.

Кроме этого, при необходимости  можно добавить еще две панели:

• Export Toolbar - панель с командами, позволяющими экспортировать сцену в один из поддерживаемых программой форматов Swf, Html, Exe и Avi. Кроме этого, на этой панели расположены кнопки, позволяющие сделать предпросмотр проекта в браузере или плеере.
• Grouping Toolbar - тут расположены команды группирования элементов и конвертирования одних видов объектов в другие.

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

 

 

2. Timeline (см. рис.3)

 

Рисунок 3 – Панель Timeline

 

Под панелями инструментов расположена панель Timeline. Она разделена  на две части: в левой мы можем добавлять и удалять эффекты, а также управлять их настройками, в правой представлены уже заданные эффекты сцены. Тут можно управлять временем их появления и изменять продолжительность.

 

3. Outline (см. рис.4)

Рисунок 4 – Панель Outline

 

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

 

4. Layout (см. рис.5)

 

Рисунок 5 – Окно Layout

 

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

 

5. Scene (см. рис.6)

 

Рисунок 6 – Окно Scene

 

Это окно содержит в себе настройки сцены и отдельных  объектов. Оно имеет несколько  закладок:

• Movie - тут указывается цвет фона, а также размеры файла и количество кадров в секунду. Чем больше это число, тем лучше качество и тем больше размер выходного файла.
• Shape (Text) - название этой вкладки изменяется в зависимости от типа выделенного объекта. На ней находятся настройки этого объекта.
• Transform - на этой вкладке указывается размер выделенного объекта, угол поворота, а также его положение относительно каждой из осей координат.
• Content - на этой вкладке можно увидеть внешние элементы, используемые в проекте - звуковые файлы, изображения и пр.
• Export - на той вкладке задаются опции экспорта сцены - выбирается формат и устанавливаются настройки для каждого из них. Среди них особенно хочется отметить возможность оптимизации конечного файла, что позволяет существенно уменьшить его размеры.
• Debug - на этой вкладке программа ведет статистику ошибок, которые вы сделали в процессе работы.
• Tint - на этой закладке можно выбрать цвет для выделенного объекта (параметр Color), а также установить для него степень прозрачности (параметр Alpha color)
• Align - настройки, расположенные на этой вкладке, позволяют выравнивать объекты относительно друг друга в заданном порядке.
• Guides - настройки этой вкладки позволяют задать необходимые параметры для рабочего пространства (окно Layout) - отрегулировать цвет, положение и размер сетки, задать отображение линейки и пр.