Работа с текстом для Web-страницы

       

Во Flash MX изменился способ


Замечание

Во Flash MX изменился способ создания переменных и объектов. Имя объекта всегда ^.указывается в левой части окна свойств, переменная создается в поле Var в правой * части этого окна.
3. Щелкните правой кнопкой на текстовом поле и выберите в контекстном меню пункт Scrollable. Введите в поле несколько абзацев текста. Для того чтобы результат вашей работы был похож на тот, который приведен на Рисунок 12.1, возьмите текст в файле Lorem.txt на официальном сайте этой книги. Щелкните один раз на текстовом поле и вставьте туда скопированный текст. Окно свойств должно выглядеть так, как показано на Рисунок 12.1.

4. Если у вас на экране не отображается панель Components, выберите Window=>Components или нажмите клавиши <Ctrl+F7>. Щелкните на панели Components. Выберите Flash UI Components и перетащите компонент Scroll-Bar на текстовое поле, справа от введенного текста, и отпустите кнопку мыши (Рисунок 12.2). Следите за тем, где вы отпускаете кнопку мыши, — в зависимости от этого полоса прокрутки разместится у самого ближнего края поля. Если вы отпустите кнопку возле верхнего края поля, вы получите горизонтальную полосу прокрутки.


Замечание

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

Здесь есть еще один важный нюанс. В первом примере, когда мы создавали компонент ScrollBar, размер текстового поля определял размеры области компонента, в которой можно пользоваться скроллингом. В компоненте ScrollPane размеры текстового поля должны быть достаточно велики для того, чтобы весь вставленный текст мог там поместиться.


Замечание

Итак, вы превратили букву в рисунок, и теперь ее нельзя редактировать с помощью текстового редактора. Один из авторов этой книги обратил на это внимание и как настоящий разработчик заявил: "Я бы сделал не так!"

Он сказал, что можно было бы каждую букву превратить в символ (в symbol, а не в character; о создании символов и о работе с ними см. в главе 4) и создать логотип из этих символов. При этом сохранится возможность редактирования букв на тот случай, если заказчик изменит что-то в проекте.
13. Выберите инструмент Text и введите текст DMITRY KIRSANOV STUDIO (шрифт — Arial, размер — 10, цвет — черный).



14. Выделите текст и в окне свойств установите значение кернинга 31%. Переместите текст в нужное место.


Замечание

Как часто случается в наши дни, этот сайт Елмора Леонарда был существенно переделан. Страница, приведенная на Рисунок 12.10, была скопирована в 2001 году, а теперь она уже не существует, хотя сам сайт доступен по тому же адресу.
Шрифт, использованный для имени автора, требует некоторых пояснений. Это нестандартный шрифт, но на рисунке в книге это трудно заметить, а на экране компьютера, просмотрев эту Web-страницу, вы увидите, что буквы как бы процарапаны, краска, которыми они нарисованы, просвечивает, как будто маляр ее пожалел или плохо загрунтовал поверхность. Мода на этот эффект появилась около пяти лет назад и получила название Grunge Typography. Но кое-что ускользнуло от внимания Web-дизайнеров и теоретиков этого направления. Если вы посмотрите книги Елмора Леонарда, то заметите, что на обложках применен тот же самый прием.

Мы не станем возиться с таким изысканным шрифтом и сосредоточимся на буквах, набранных шрифтом Helvetica. Для того чтобы создать такую Web-страницу, как на Рисунок 12.10, выполните следующее.

1. Создайте новый документ Fireworks шириной 367 пикселей и высотой 310 и установите черный цвет фона. Добавьте новый слой и назовите его Logo.

2. Когда новый слой будет выделен, выберите инструмент Text и щелкните на холсте. Введите на одной строке Elmore, нажмите клавишу <Enter> и на другой строке введите Leonard.

3. При выделенном введенном тексте выберите шрифт Helvetica и щелкните на кнопке Ж. Еще лучше использовать шрифт Helvetica Black, тогда не нужно выделять его полужирным. Если у вас нет шрифтов семейства Helvetica, воспользуйтесь любым рубленым шрифтом, т.е. без засечек, например Arial.

4. В окне свойств установите размер шрифта — 60, выравнивание — по центру и цвет — #666666. Если вы используете шрифт Helvetica полужирного начертания, добавьте обрамление Basic Soft Line вокруг него. Не обращайте пока внимания на то, как это выглядит, — мы займемся внешним видом позже.

5. Выделите нижнюю строку и переместите ползунок Leading вниз до значения 75%. При этом слова в разных строках приблизятся одно к другому так, что верхний край нижней строки коснется верхней. Это интересная техника, но пользоваться ей нужно осмотрительно, так как наша главная цель — четкость и читаемость текста. Если строки, особенно набранные в верхнем регистре, слишком приблизить, текст станет неразборчивым.

6. Теперь займемся кернингом, опять-таки, чтобы улучшить читаемость. Сейчас некоторые буквы расположены одна под другой. Щелкните между буквами L и М и передвиньте ползунок управления кернингом до значения -7%. Выделите все слово LEONARD и перетащите ползунок кернинга до значения 7%. Вы увидите, как буквы в слове раздвигаются (Рисунок 12.11).


Замечание

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

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

9- Создайте новый графический символ и назовите его Logo. Импортируйте файл Logo.fh10 из папки Exercise, поместите его в новый символ и сохраните клип (Рисунок 12.23). Сохраните файл и не закрывайте его.


Замечание

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


Замечание

Взглянув на текст, вы заметите, что промежуток между буквами Р и А не мешало бы сделать поменьше. Для этого нужно настроить кернинг пары букв. Во Flash настройка кернинга — это скорее формальность, она задается в процентах и называется tracking, флажок Kern, который всегда должен быть установлен, отвечает за выполнение кернинга (во многом аналогично тому, как это сделано в Fireworks). Но имейте в виду, что этому кернингу нельзя доверять полностью. В данном случае вам нужно сжать или растянуть последовательность букв.
4. Выделите букву Р и перетащите ползунок Tracking Control вниз. Вы видите, как остальные буквы строки передвигаются по направлению к выделенной букве и даже могут наехать на нее, если вы потащите ползунок слишком сильно. Установите значение этого параметра, равное -4. Это очень небольшое значение, однако при настройке кернинга нужно проявлять умеренность.

Содержание раздела