Flash-сайт: быть или не быть?

Начало начал, или создаем заглавную страницу

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

Итак, начинаем работу. Создаем новый документ типа Flash File (ActionScript 2.0) и настраиваем его параметры на панели Document Properties («Свойства документа»): выбираем цвета фона, ширину и высоту клипа делаем равными 800 и 600 пикселам.

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

1. Замысел. Основное, конечно, это идея. Она должна быть ориги-нальной и выразительной. В точности отображать идеологию фирмы, которая представлена на сайте. Из этого вытекает второй этап.
2. Дизайн. Стилевое решение главной страницы должно соответствовать общему стилю сайта. Логотип и заголовок  являются важной составной частью, формирующей имидж компании.
3. Контент. Страница должна содержать ссылки на другие разделы и наглядно демонстрировать направленность сайта.

То есть первым делом нам необходимо проработать общее решение страницы — стиль, композицию текста и графики; а также создать кнопки — ссылки на основные страницы («О нас», «Новости», «Услуги» и проч.) как объекты типа Button («Кнопка»), что мы и проделали (рис. 1).

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

1. Переход на заданный кадр внутри клипа, содержащий символ Movie Clip («Фрагмент ролика») с необходимой информацией.
2. Загрузка внешнего SWF-файла в исходный клип.
3. Загрузка внешнего SWF-файла как самостоятельного клипа.
4. Вызов HTML-страницы, содержа-щей соответствующий SWF-файл.

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

Прыг-скок, или переходы на кадры клипа

Начнем с того, что на первом кадре клипа пропишем скрипт stop();, чтобы движение со сменой кадров у нас не пролетало за долю секунды. Этот слой будет присутствовать на всех кадрах клипа.

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

1. Нажимая клавишу , начиная со второго кадра вставим ряд ключевых кадров по количеству страниц сайта.
2. Каждому из вновь появившихся ключевых кадров панели Timeline («Монтажная линейка») лучше всего сразу присвоить метку кадра Frame Label («Метка кадра»).
3. Выделите ключевой кадр и на панели Properties («Свойства») впишите имя кадра в поле Frame («Кадр»). Так как у нас первой идет ссылка на страницу «О нас», то вписываем в данное поле слово about .Проследите за тем, чтобы Label Type («Тип метки») был Name («Имя»).
4. Повторите аналогичную операцию для оставшихся кадров, присваивая им такие имена: news, service, contact, links (рис. 2).
5. Теперь для каждой из кнопок пропишите следующий скрипт, изменяя название метки: on(release) 

{gotoAndStop(‘имя метки’);}.

Например, для кнопки «О нас» скрипт будет выглядеть так:

on(release{gotoAndStop(‘about’);}.

Следовательно, при нажатии на кнопку «О нас» мы перейдем к кадру, содержащему именно эту информацию.

Продлите слой с фоном (и слой с кнопками-ссылками), сделав общий дизайн для всех страниц сайта (см. рис. 2). Также необходим новый слой, содержащий кнопку со ссылкой на главную страницу, т. е. на первый кадр. Пропишите такой скрипт для кнопки:

on(release) {gotoAndStop(1);}

Начинаем погрузку, или Загружаем SWF-клипы

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

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

Конечно, гораздо проще не во-зиться с отдельными клипами, но подумайте, как вы будете вызывать «зашитые» в исходник страницы автономно из другого клипа. Ведь захоти вы расширить свой сайт, а это скорее всего так и будет, и перед вами встанет проблема повторного создания страниц с базовой информацией. А делать весь сайт в одном SWF-клипе — это, как говорят французы, mauvais ton (дурной тон).

Загружаем SWF-клипы в основной клип

Для загрузки клипов существует команда loadMovie();, ею мы и воспользуемся, чтобы поместить внешние клипы в базовый клип.

Нам не понадобятся кнопки, с которых уже указаны ссылки на определенные кадры, а нужны будут эти самые, пока еще «полуфабрикатные» кадры. Задача состоит в следующем. Необходимо создать несколько символов типа Movie Clip («Фрагмент ролика») и прикрепить к ним загружаемые файлы. Разберем все на примере первой страницы, «О нас». Избежать подводных камней при загрузке дополнительных клипов в базовый поможет следующая последовательность работы.

1. Щелкните по кадру с меткой about и создайте на данном кадре экземпляр символа Movie Clip l_ab.
2. Откройте его и пропишите следу-ющий скрипт на первом кадре:

this.loadMovie(”ta_about.swf”);

Так мы загружаем клип ta_about.swf внутрь экземпляра символа Movie Clip m_about.

Внимание. Точкой отсчета считается левый верхний угол как символа, сцены, так и внешнего ролика!

Чтобы работа занимала как можно меньше времени, для создания оставшихся экземпляров Movie Clip воспользуйтесь следующим алгоритмом.

1. Копируете готовый символ Movie Clip l_ab и вставляете его с помощью контекстного меню Paste in Place («Вставить на место») на все кадры, где должны находиться страницы сайта.
2. Открываете панель Library («Библиотека»), выделяете первый базовый символ l_ab и в контекстном меню выбираете пункт Duplicate («Дублировать»).
3. Изменяете название для дублика-та, например для страницы «Ново-сти» на l_ne, и входите в Movie Clip.
4. Обращаетесь к панели Actions («Действия») и меняете только имя подгружаемого SWF-файла.
5. Переходите к кадру, где должна размещаться соответствующая страница, выделяете вставленный ранее Movie Clip l_ab и на панели Properties нажимаете кнопку Swap («Замена»).
6. В появившемся диалоговом окне выбираете элемент l_ne, на который заменится l_ab.

Загружаем внешний SWF-файл как самостоятельный клип

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

on(release)

{_root.loadMovie(”sea.swf”);}

Мы загружаем ролик sea.swf на корневой элемент иерархии клипов.

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

Совет. Если вы хотите, чтобы клип подгружался в новое окно, то скрипт должен быть такого типа: on(release) {loadMovieNum(”sea.swf”, _root);}.

Страница за страницей, или Работаем над SWF-файлами — страницами сайта

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

1. Создайте несколько новых клипов и определите размеры «площади» исходного клипа, на которую мы хотим поместить новые клипы. В данном случае нас будет больше интересовать ширина.
2. Ширину и высоту каждого клипа установите равными 600×500 пикселам соответственно — именно такие размеры мне показались оптимальными для этого случая.
3. Используйте шрифты и цвета из того же набора, что и при подготовке главной страницы. Так мы по максимуму сохраним общий стиль и цельное восприятие проекта (рис. 3).

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

1. Создайте серию файлов для страниц сайта, на которые ведут кнопки-картинки.
2. Размеры они должны иметь точно такие же, как и базовый сайт — 800 на 600 пикселов.
3. По дизайну страницы сделайте схожими с главным клипом сайта.
4. Пропишите для кнопки «Главная» сценарий, который будет возвра-щать зрителей к главному клипу.

on(release) { _root.loadMovie(”main.swf”) }

1. Приготовьте два комплекта рисунков: маленькие, через которые будут вызываться обычные — большие фотографии.
2. Рисунки-ссылки импортируйте в клип и преобразуйте в кнопки.

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

Доставка веселых картинок, или Загружаем рисунки

В простейшем случае для загрузки растрового изображения на сцену клипа необходимо воспользоваться скриптом вида loadMovie(”имя файла.jpg”);

Например, чтобы загрузить рисунок в экземпляр символа типа Movie Clip my_clip, необходимо воспользоваться скриптом того вида, который прописывается для экземпляра кнопки.

on(release) {

my_clip.loadMovie(”my_mclip.swf”);

}

Как вы поняли, все загрузки происходят довольно-таки однотипно. Поэтому давайте рассмотрим более сложный случай, когда, находясь внутри символьной «матрешки», — например, кнопка располагается внутри символа типа Movie Clip, — нам необходимо достучаться до символа, расположенного на определенном кадре главной сцены, и загрузить в него рисунок (рис. 4). Задание понятно  — выполняем.

Перейдите на тот кадр главной сцены, куда хотите загрузить рисунок (мы его пометили как im) и вставьте пустой символ типа Movie Clip. Не забудьте также на панели Properties назвать и экземпляр данного символа, например, «my_image», ведь при подгрузке мы будем пользоваться именем экземпляра, а не всего символа.

С помощью инструмента Selection («Стрелка») переместите Movie Clip в верхний левый угол сцены. Вы ведь не забыли, что именно он будет определять ту начальную координату, где загрузится рисунок? Подготовительная работа на сцене закончена.

Теперь обратитесь к кнопке и пропишите для нее следующий код.

on(release)

{ _root.gotoAndStop(“im”) // переходим к кадру с меткой im

_root.my_image.loadMovie(“image.jpg”); // Производим загрузку рисунка image.jpg в базовый клип в my_image

}

Не вырубишь топором, или Загрузка текста

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

Теперь для клипов необходимо создать динамически подгружаемый текст из файла TXT или XML. Этим мы сразу убьем двух зайцев: позволим пользователям выделять и копировать текст, а администраторам сайта — менять информацию без обращения к FLA-исходникам и без перекомпиляции.

Сначала воспользуемся форматом TXT.

1. 1. Создайте символ типа Movie Clip на сцене клипа ta_service.
2. 2. На панели Properties назовите его m_ser.
3. 3. Войдите в символ и разместите в нем заготовку для динамического текста Dynamic Text. Для этого воспользуйтесь инструментом Text («Текст») и на панели Properties выберите из раскрывающегося списка тип Dynamic Text.
4. 4. Настройте параметры текста на панели Properties, обязательно указав в поле Var переменную service (рис. 5).
5. 5. Выйдите из символа и перейдите на первый кадр клипа. Для него на панели Actions («Действия») пропишите такой сценарий:
6. m_ser.loadVariables(”text.txt”); // Загружаем переменные из файла text.txt в клип m_ser

Проделайте аналогичную операцию для остальных файлов, только вместо переменной service нужно задавать уникальные, например about, news, links, contact.

Теперь необходимо подготовить текстовый файл-источник. Откройте программу Notepad и набросайте текстовую информацию.

service = Мы рады вам предложить...

&about=Фиолент — это все, что нужно самодеятельному туристу, который решил активно отдохнуть в Крыму…

&contact=Наш адрес:…

Сохраните документ под именем text.txt и в кодировке Unicode.

Теперь можно протестировать клипы и посмотреть, как текст загружается в соответствующие поля (рис. 6).

Разметка данных, или Формат XML

XML представляет собой стандарт языка разметки данных, с помощью которого мы можем описывать данные произвольной структуры. В технологии Flash для работы с XML-файлами используется объектная модель документа (DOM, Document Object Model). Основным элементом выступает понятие NODE. Каждый NODE представляет собой совокупность всех входящих в него XML-тегов и их атрибутов. Благодаря этому у нас есть возможность описать любые данные. Для работы с XML во Flash предусмотрен специальный класс, который содержит в себе все методы и свойства для взаимодействия с XML посредством DOM-технологии. Но давайте вернемся к работе.

Сейчас мы рассмотрим небольшой пример, иллюстрирующий совместную работу Flash и XML.

Первым делом необходимо подготовить сам XML-файл. Эта статья никоим образом не претендует на звание «XML-руководства», поэтому, не вдаваясь в тонкости XML-мастерства, наберите в программе Notepad следующий текст.

мыс Фиолент

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

Так выглядит простейший XML-файл.

Сохраните файл, выбрав Save as type («Сохранить как тип»), затем All types («Все форматы»), а в строке с названием укажите имя файла, например fiolent.xml.

Внимание. Помните о том, что если в исходном файле используется кириллица, то сохранять надо с кодировкой Unicode.

Теперь вставляем набранный выше текст в подготовленные заранее два блока Dynamic Text (а и b), а в самом Flash-документе на первом кадре пишем такой скрипт:

Код для загрузки XML-файла

_root.myXML = new XML();

_root.myXML.onLoad = function(valid)

{

if (valid) { myXMLload();}

};

myXMLload = function ()

{

for (i=0; i

{

if (myXML.childNodes[i].nodeName == ”NAME”)

{ a = myXML.childNodes[i].childNodes;}

if (myXML.childNodes[i].nodeName == ”DESCRIPT”)

{ b = myXML.childNodes[i].childNodes;}

}; };

_root.myXML.load(”myXMLfiolent.xml”) // myXML – папка, куда был помещен файл fiolent.xml.

Протестируйте клип и убедитесь в работоспособности созданного решения. Мы загрузили внешний текст разными способами — как текстовый документ и как XML-файл. Данные навыки вам понадобятся и при создании сайтов с динамически изменяемой информацией, например страницы новостей или прайс-листов.

Сдаем в печать, или Публикация клипа в браузере

Все готово? Нет не все. Еще надо добиться, чтобы клип проигрывался не в «родных» программах Flash типа Adobe Flash Player, а в интернет-браузере, например MS Internet Explorer или Mozilla. Чтобы иметь возможность показать миру SWF-клип, надо предварительно внедрить его в обычную HTML-страницу. Сделать это можно автоматически, если опубликовать клип, выбрав пункт Publish («Публиковать») из меню File («Файл») или нажав клавишу .

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

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

В программе Adobe Flash есть команда, которая выводит диалоговое окно настройки разнообразных параметров публикации в Сети. Вызывается оно с помощью комбинации клавиш ++ или выбором в меню File пункта Publish Settings («Параметры публикации»).

По умолчанию диалоговое окно Publish Settings содержит вкладки Formats («Форматы»), Flash и HTML. Вы можете изменить количество отображаемых вкладок, если поработаете с галочками на вкладке Formats.

Вкладка Flash позволяет настроить версию Flash Player, определить порядок загрузки, версию языка ActionScript, дает возможность сформировать отчет о размере, защитить от импорта, установить пароль, сжать ролик и многое другое. А вкладка HTML отвечает за настройки внедрения клипа на страницу. Вы можете выбрать шаблон документа HTML для Flash-клипа, установить параметры воспроизведения, регулировать размеры клипа, зациклить воспроизведение Flash-клипа, выровнять и масштабировать клип на HTML-странице (рис. 7).

* * *

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

А я на этом заканчиваю цикл статей, посвященных технологии Flash.

ОБ АВТОРЕ

Ксения Свиридова — аспирантка кафедры «Автоматизированные системы управления» НТУ «ХПИ», e-mail: ksenijas@yandex.ru.