Web-разработка с Macromedia Studio MX



Создание текстовой страницы для JCT с помощью Flash


Как мы говорили в главе 7, шрифты Postscript — незаменимы для векторных приложений. Flash MX— векторное приложение, и использование векторных шрифтов здесь уместно и эффективно. Но когда речь идет о "тонких" эффектах, средства Flash оказываются недостаточными и примитивными. Кернинг, междустрочный и межсимвольный интервал не поддаются контролю в такой степени, как иногда хотелось бы. В чем сильно приложение Flash, так это в растеризации векторных кривых, которые на экране выглядят очень хорошо.
Некоторые могут подумать, что Flash MX годится для оформления текстовой страницы, но это было бы большой ошибкой. Средства управления шрифтами примитивны, и пытаться оформить с помощью Flash блок текста было бы пустой тратой времени 'и неверным использованием мощного приложения.



Рис. 12.22. Шрифт отформатирован во FreeHand, преобразован в кривые и экспортирован в Fireworks MX

Помните, что, когда речь заходит о работе с текстом во Flash, имеется в виду использование шрифтов Postscript. Поговорите с любым квалифицированным разработчиком Flash, и речь обязательно зайдет об эффективности и оптимизации. Разработчики Flash всегда имеют в виду пропускную способность линии связи. Во Flash для передачи шрифта Postscript используются кривые Безье. Однако они заметно увеличивают размер файла. Чем больше в файле таких кривых и чем сложнее их форма, тем больше становится страница. От типа шрифта зависит сложность кривых. Какой же шрифт выбрать для минимизации размера рисунка? Естественно, шрифт без засечек. Ведь каждая засечка — это дополнительный изгиб на кривой и, соответственно, больший размер передаваемого файла. Вот почему на многих страницах, использующих технологию Flash, в основном применяются шрифты семейства Sans Serif.
Есть еще один важный момент, о котором нельзя умолчать, если речь идет о создании текста во Flash. Иногда разработчик сталкивается с ситуацией, когда отсутствует специальная версия некоторого шрифта, например Bold или Ultra Bold. Решение в такой ситуации напрашивается само собой — выделить нужный текст полужирным начертанием. Однако это было бы большой ошибкой. Дело в том, что при этом шрифты искажаются, Кроме того, если уж вам все-таки придется выделять шрифты полужирным начертанием, то делать это нужно не во Flash, а в Fireworks или во FreeHand. Эти приложения просто сделают символы толще, a Flash добавит в файл описание простого шрифта, а потом создаст утолщенный контур. Все это приводит к значительному увеличению размера файла, а следовательно, и к увеличению времени передачи вашей страницы.
Обмен идеями
Работа с анимированным текстом предоставляет в этом смысле неограниченные возможности. Такие признанные художники Flash и авторы издательства New Riders, как Брендан Дайвис (Brendan Dawes), Хилман Куртис (Hillman Curtis) и другие, не раз обращались к работам Сола Басса (Saul Bass) в поисках творческих идей. Сол Басе известен своими работами по оформлению титров к фильмам Альфреда Хичкока, особенно к фильму "Psycho". Фактически Брендан Дайвис создал и ведет сайт, посвященный Солу Бассу, на котором можно найти несколько ссылок на Web-страницы, на которых ощущается влияние Сола (http://www.saulbass.net). Мы тоже советуем вам не пренебрегать такими источниками. Поройтесь в своей коллекции видеофильмов и клипов и обратите внимание на то, как оформление титров создает настроение и подготавливает зрителя к просмотру фильма. Присмотритесь к выбору шрифтов. Классический пример— фильм "Звездные войны". Много примеров оформления титров можно найти на сайте http://wxvw.apple.com/trailers.
Мы часто заглядываем на страницу Born Magazine. Этот авангардный сайт содержит множество удачных примеров использования технологии Flash, в частности примеры оформления текстов.
Кроме того, не пренебрегайте рекламными передачами на телевидении и печатной рекламной продукцией. Там можно найти очень удачные решения и новые идеи, которые помогут вам создать собственный шедевр.
Подготовка сцены
Начальная страница сайта JCT задумана так, чтобы привлечь внимание посетителя к просмотру всего сайта. По плану для каждого продукта должны появляться слова в рабочей области. Текст с описанием продукта должен постепенно проявляться, в то время как на полосе Tag Line внизу экрана должно двигаться световое пятно. После этого текст постепенно тускнеет, а логотип проявляется полностью и полоса Tag Line становится четко видимой.
Это оказывается не такой простой процедурой. Но при ее выполнении можно воспользоваться достоинствами Flash и разбить задачу на несколько более простых. Для этого нужно применить символы (symbols). Техника, применяемая для такого решения, может быть самой изощренной, но главная наша задача — добиться читаемости текста, легкости восприятия и в то же время обеспечить высокую скорость загрузки и качественную анимацию Flash.
Итак, чтобы создать анимированную текстовую страницу, выполните следующее.
1. Запустите Flash и создайте новый документ, выбрав в меню File=>New или нажав комбинацию клавиш <Ctrl+N>.
2. В открывшемся диалоговом окне New Movie выберите стандартный размер рабочей области: ширина — 550 пикселей, высота — 400 пикселей, частота обновления — 12 кадров в секунду. Цвет фона сделайте черным (000000). Все эти параметры можно также установить в окне свойств. Назовите этот первый слой Background.
3. Добавьте 11 новых слоев над слоем Background и назовите их следующим образом (сверху вниз):
Actions;
Logo;
Tag line;
ShoeFade;
Shoes;
PantsFade;
Pants;
ShirtsFade;
Shirts;
HatsFade;
Hats;
Background.
4. Выберите инструмент Rectangle, установите его свойство Stroke в None, цвет заливки — черный. Нарисуйте прямоугольник, покрывающий всю рабочую область в слое Background.
5. Выделив прямоугольник, установите его размеры так, чтобы они совпадали с размерами рабочей области. В окне свойств установите для координат X и Y значение О, 0. Таким образом, вы гарантируете, что прямоугольник идеально укладывается в рабочей области.
6. При выделенном объекте выберите Modify=>Convert to Symbol или нажмите клавишу <F8>. Назовите этот символ Background и его параметр Behavior установите в Graphic.

Совет
Возьмите себе за правило преобразовывать все, что присутствует у вас в рабочей области, в символы. 

Замечание
Какой, казалось бы, смысл покрывать рабочую область цветом, который и так уже был ей назначен? Но дело в том, что ваш клип будет воспроизводиться с помощью заранее неизвестного броузера, во всяком случае, с помощью языка HTML, и там может присутствовать тэг <Embed>. В результате фон вашей страницы может получиться не таким, как вы задумали, и это может нарушить весь ваш дизайнерский замысел. Создавая нужный вам символ, вы не только решаете эту проблему, но и создаете объект, которым сможете воспользоваться в дальнейшем при создании других клипов.

7. Нам предстоит работать в области, размеры которой на 10 пикселей меньше, чем размеры рабочей области. Кроме того, необходимо добиться точного расположения объектов в рабочей области. Для этого можно воспользоваться направляющими линиями. Выберите в меню View=>Show Rulers. Вытащите из линейки горизонтальную направляющую и расположите ее на 10 пикселей ниже верхнего края рабочей области. Вытащите еще одну направляющую и расположите ее на 10 пикселей выше нижнего края рабочей области. Аналогично создайте две вертикальные направляющие, расположив их тоже на расстоянии 10 пикселей от краев.
8. Создайте еще две направляющие, вертикальную и горизонтальную, разместив их точно в центре рабочей области. Для этого нужно совместить направляющие с перекрестьем в центре рабочей области. Заблокируйте слой Background.
9- Создайте новый графический символ и назовите его Logo. Импортируйте файл Logo.fh10 из папки Exercise, поместите его в новый символ и сохраните клип (рис. 12.23). Сохраните файл и не закрывайте его.

Замечание
При установке направляющих увеличьте масштаб отображения. При этом вам будет хорошо видно, где точно проходит направляющая, деления на линейке будут более разборчивыми, и, кроме того, при точном прохождении направляющей по делению линейки она становится белой. Полезно выработать у себя привычку при работе с направляющими блокировать их от случайных смещений. Для этого нужно выбрать в меню View=>Guides=>Lock Guides. После этого вы можете быть уверены, что ваши направляющие всегда останутся на месте, даже если вы случайно зацепите их мышкой.



Рис. 12.23. Рабочая область и слои созданы. Линейки видимы, и порядок слоев должен совпадать с приведенным на рисунке