Опубликован: 27.03.2013 | Доступ: свободный | Студентов: 1519 / 276 | Длительность: 08:07:00
Специальности: Программист
Лекция 15:

Создание заголовков

< Лекция 14 || Лекция 15 || Лекция 16 >
Аннотация: В лекции рассматриваются вопросы: форматирование текста; работа с "разбитым" текстом.
Ключевые слова: flash, графика, приложение

Создание заголовков

Материалы к лекции Вы можете скачать здесь.

Во Flash есть два разных состояния текста:

  • Текстовый блок (созданный посредством инструмента "Текст"), доступный для редактирования и форматирования. Форматирование текста происходит посредством панели Свойств (сродни панели Форматирование в текстовом редакторе), либо через режим меню "Текст":

    Рис. 14.1.

    Также как и в текстовом редакторе форматирование применимо к таким структурным текстовым единицам, как символу и к абзацу:

    -символу можно задать: шрифт, размер, цвет, трекинг (межсимвольное расстояние), символ можно перевести в надстрочные знаки, подстрочные знаки, установить рамку вокруг текстового блока. Проверьте на практике эти возможности.

    -к абзацу применимы "Выравнивание", "Отбивка" (задание величины красной строки), для абзаца устанавливают межстрочный интервал, поля текстового блока относительно границы выделенной области. Проверьте на практике эти возможности.

  • Текст, в котором мы имеем отношение не с самим текстом, а с его графическим представлением ("разбитый текст").

Практическая работа: "Разноцветные буквы"

  • Напишите текст, используя размер кегля более 50-ти черного цвета (используйте режим меню "Текст", на панели свойств в поле "Задать тип текста" оставить по умолчанию "Статический текст"). Выделим текст (инструмент "Стрелка").
  • Разобьем текст ("Модификация" – "Разделить"). Текст "разбит" на буквы, каждая буква теперь является самостоятельным текстовым блоком.
  • Зальем каждую букву своим цветом. Буквы также можно увеличить (уменьшить) в различных пропорциях, повернуть, применив к каждой различный угол наклона.
    Разноцветные буквы

    Рис. 14.2. Разноцветные буквы

Практическая работа: "Полый текст"

  • Напишите текст. Выделите его (инструмент "Стрелка")
  • Разобьем текст ("Модификация" – "Разделить"). Еще раз разобьем текст. Теперь мы имеем дело не с текстом, а с его графическим представлением.
  • Применим к нему эффект смягчения граней заливки ("Модификация" - "Фигура" - "Смягчить края заливки"). Зададим число шагов - 2, расстояние 10.
  • Снимем выделение с изображения. Выделим внутреннюю заливку букв, удалим ее. Останется только очертание букв. Выделим это очертание и окрасим в необходимый цвет.
    "Полый текст"

    Рис. 14.3. "Полый текст"
    Пример использования дизайнерского приема "Полый текст" в заголовке приложения

    Рис. 14.4. Пример использования дизайнерского приема "Полый текст" в заголовке приложения

Практическая работа: "Хромированный текст"

  • После того как Вы написали текст и разбили его (2 раза), возьмите "Карандаш" и нарисуйте волнистую линию вдоль текста.
  • Выделите верхнюю часть текста и закрасьте ее градиентной заливкой, при необходимости измените направление градиента на вертикальное.
  • Проделайте то самое с нижней частью текста.
  • Возьмите инструмент "Стрелка" и двойным кликом выделите нарисованную ранее линию.
  • Удалите ее. Перед Вами хромированный текст, полученный путем разбивания текста и эффекта сегментирования.
    Хромированный текст

    Рис. 14.5. Хромированный текст

Практическая работа: "Размытый текст"

  • Напишите текст, используя размер кегля более 50-ти черного цвета (используйте режим меню Текст). Выделим текст. Разобьем текст. Еще раз разобьем текст.
  • Применим к тексту эффект смягчения граней заливки.
  • Удалим внутреннюю заливку букв (или внутреннюю заливку букв путем смягчения граней заливки размыть внутрь):
     Размытый текст

    Рис. 14.6. Размытый текст
    Размытая тень текста (пример использования дизайнерского приема "Размытытй текст")

    Рис. 14.7. Размытая тень текста (пример использования дизайнерского приема "Размытытй текст")

Практическая работа: "Выдавленный текст"

  • Напишите текст. Выделите его.
  • Разобьем текст. Еще раз разобьем текст.
  • Применим к нему эффект смягчения граней заливки (2 шага, расстояние 10).
  • Удалив внутреннюю заливку букв, оставшуюся обводку зальем градиентом.
    Выдавленный текст

    Рис. 14.8. Выдавленный текст

Практическая работа: "Изогнутый текст"

  • Напишите текст. Выделите его.
  • Разобьем текст. Еще раз разобьем текст.
  • К графическому объекту, которым сейчас является текст применим инструмент "Свободное преобразование" (на панели инструментов), затем опцию "Огибающая". Придадим объекту необходимую форму.
    Изменение формы разбитого текста

    Рис. 14.9. Изменение формы разбитого текста
    Пример приложения с заголовком, измененной формы, залитым градиентом

    Рис. 14.10. Пример приложения с заголовком, измененной формы, залитым градиентом

Созданный с использованием перечисленных приемов текст для дальнейшего использования преобразуют в символ ("Модификация" - "Преобразовать в символ") типа "Графика". Символ будет храниться в библиотеке и при необходимости вставлен в разрабатываемое приложение.

Если текст преобразуют в символ типа "Фрагмент ролика", то в дальнейшем текст можно анимировать (войдя двойным кликом в символ и создав анимацию).

Краткие итоги лекции:

Во Flash есть два разных состояния текста:

  • Текстовый блок, доступный для редактирования и форматирования посредством панели Свойств (сродни панели Форматирование в текстовом редакторе), либо через режим меню "Текст". Также как и в текстовом редакторе форматирование применимо к таким структурным текстовым единицам, как символу и к абзацу:

    -символу можно задать: шрифт, размер, цвет, трекинг (межсимвольное расстояние), символ можно перевести в надстрочные знаки, подстрочные знаки, установить рамку вокруг текстового блока

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

  • Текст, в котором мы имеем отношение не с самим текстом, а с его графическим представлением ("разбитый текст"). К "разбитому" тексту можно применять разнообразные виды заливки, смягчять края заливки (добиваясь эффекта размытости), применять инструмент "Свободное преобразование" (опцию "Огибающая") для придания объекту необходимой формы.

Ключевые термины

  • Текстовый блок
  • Форматирование текста
  • Символ, как структурная текстовая единица
  • Абзац, как структурная текстовая единица
  • Трекинг
  • Выравнивание
  • Отбивка
  • "Разбитый" текст

Набор для практики:

Вопросы

  • Перечислите возможности форматирования текстового блока. Какие параметры абзаца и шрифта можно настраивать?
  • Дайте объяснение понятию "Разбитый текст" (или "Графическое представление текста").
  • Путем каких преобразований добиваются различных эффектов с "разбитым" текстом?

Упражнения

Для выбранной темы разрабатываемого приложения (работа начата на предыдущей лекции):

  • Сформулируйте название.
  • Продумайте цветовую гамму окна, установите необходимый цвет фона документа. Вертикальными и горизонтальными линиями разделите рабочую область на зоны (заголовка, меню и др.).
  • Создайте новый слой "Заголовок", разработайте в нем заголовок приложения, используя приемы, рассмотренные в лекции. Разнообразить набор начертаний букв поможет использование английского алфавита – путем "подбора" английских букв, сходных по начертанию с русскими. "Лишние" детали букв, мешающих их восприятию, как букв русского алфавита, можно скорректировать после преобразования текста в графику. Этот прием проиллюстрирован ниже ( рис. 14.11).
    Пример использования английских букв в русском тексте

    Рис. 14.11. Пример использования английских букв в русском тексте
  • Выделите заголовок и преобразуйте его в символ "Графика". Заблокируйте слой "заголовок". Сохраните проект.
< Лекция 14 || Лекция 15 || Лекция 16 >
Яна Борисова
Яна Борисова

В тестах есть вопросы, детали которых в тестах не рассматриваются. Ест ли возможность рассмотреть материал в лекциях более подробно и в деталях?

Александра Замбровская
Александра Замбровская

Я прохожу бесплатное (самостоятельное) изучение курса Создание интерактивных приложений в Adobe Flash Могу ли я (имея высшее образование) заказать официальное удостоверение по программе повышения квалификации? Сколько это будет стоить и где можно заказать (если можно, то ссылку на страничку)?