Отображение текстовой, графической информации в рабочих полях

Отображение текстовой, графической информации в рабочих полях

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

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

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

Рассмотрим на примере процесс создания "сложной" анимации методом "Матрешки" (чтобы убедиться в сложности этого процесса).

1. Создаем графическое изображение (открытку), выделяем и преобразуем в символ "Фрагмент ролика" ( рис. 18.1). Теперь символ недоступен для редактирования, о чем свидетельствует синяя рамка вокруг него. Даем символу имя (в поле ввода "Назначить имя экземпляру" на панели свойств).
   

   
   Рис. 18.1. Преобразование открытки в символ "Фрагмент ролика"
2. Двойным кликом "входим" в символ, рядом с названием Сцены появится название символа. Выделим часть графического объекта, который будем анимировать (только изображение принцессы), преобразуем в символ "Фрагмент ролика". Даем символу имя.
3. "Входим" в символ двойным кликом по синей рамке (рядом с названием Сцены и названием символа, внутри которого сейчас мы находимся, появится название вложенного символа).
4. Разные части тела принцессы будут анимированы отдельно друг от друга. Выделяем каждую, которую планируем анимировать (руки, голову), преобразовываем каждый в символ, даем каждому имя и переносим в отдельный слой каждый символ (см. рис. 18.2). Расположение слоев меняем в зависимости от расположения частей тела (видимая часть руки – в слое, выше слоя, в котором расположено тело; рука, частично скрытая за телом, располагается в слое ниже и т.д.).
   

   
   Рис. 18.2. Преобразование частей тела в символы "Фрагменты ролика"
5. Теперь необходимо внести некоторые дополнения в графическое изображение принцессы. "Закроем" видимость слоев (скроем слои), на которые мы перенесли символы (части тела); заблокируем слои - "повесим" на эти слои "замок", тем самым закрыв возможность редактирования объектов (изображение глаза и замка над слоями позволяют установить эти настройки – достаточно кликнуть по точке, расположенной на слое под изображением глаза и замка – см. рис. 18.3).

   А вот теперь видна только часть графического объекта с "рваными краями". Необходимо плавно "закруглить" места стыков рук с плечом (как на рис. 18.3). Иначе, когда руки (голова или др. части тела) будут анимированы, в какой-то момент движения рук можно будет увидеть "рваный край" плеча.

   

   
   Рис. 18.3. Заблокированные слои, скрытые слои. Сглаженный край плеча
6. Далее поочередно входим в руки и также плавно закругляем место стыка с плечом. Создаем классическую анимацию движения для руки – например, взмах руки вверх ( рис. 18.4). Для того, чтобы рука "не отрывалась" от плеча при взмахе необходимо перенести центр символа в точку, относительно которой будет происходить вращение руки.
   

   
   Рис. 18.4. анимация движения руки
7. Входим в символ-руку, выделяем фрагмент руки от локтя до кисти, преобразуем в символ ( рис. 18.5), даем имя.
   

   
   Рис. 18.5. Преобразование в символ части руки от локтя до кисти
8. Входим в символ, анимируем его – плавно сгибаем руку в локте ( рис. 18.6). Входим в символ, анимируем его – плавно сгибаем руку в локте ( рис. 18.6).
   

   
   Рис. 18.6. Анимация сгиба руки в локте
9. И так далее – аналогично анимируем кисть руки ( рис. 18.7, рис. 18.8).
   

   
   Рис. 18.7. Преобразование кисти в символ "Фрагмент ролика"
   

   
   Рис. 18.8. Анимация кисти

   Уровень вложения одного символа в другой можно проследить по цепочке имен символов, расположенных за названием Сцены. Для "выхода" из символа необходимо кликнуть по имени того символа, в которых необходимо попасть (либо двойной клик по свободному месту на сцене).

   При необходимости управлять символом программным путем (менять свойства символа или заставить символ выполнять какие-то действия), к символу обращаются по имени экземпляра символа. Имена бывают двух видов:

   -абсолютное имя - в имени перечисляются все имена "родительских" экземпляров, в которые вложен данный экземпляр, имена отделяются друг от друга точкой. Допустим, на сцене создан символ (имя экземпляра r), в него вложен символ с именем экземпляра rr, в свою очередь в него вложен символ с именем экземпляра rrr. Абсолютное имя экземпляра символа rrr будет r.rr.rrr или Object(root).r.rr.rrr (перечисление имен начинается с главной сцены root):

   

   
   Рис. 18.9. Иллюстрация вложения символа в символ (диалоговая окно "Вставить целевой путь"). Задание абсолютного имени.

   -относительное имя – в перечне имен экземпляров "родительских" символов учитывается, относительно какого символа задается имя (в примере имя экземпляра символа rrr задается относительно экземпляра r):

   

   
   Рис. 18.10. Иллюстрация вложения символа в символ (диалоговая окно "Вставить целевой путь"). Задание относительного имени.
10. Для анимации второй руки (головы и др.) необходимо проделать аналогичные действия.

Продолжим дальнейшую работу над созданием "сложной" анимации.

При работе в Adobe Flash CS6 есть возможность работы с инструментом "Кость", который упрощает анимацию "сочленных" друг с другом объектов (таких, как человеческая рука, например).

Рассмотрим алгоритм создания сложной анимации руки с использованием инструмента "Кость":

• Создаем изображение, состоящее из "связанных" друг с другом фрагментов (связанность фрагментов может быть логической – без видимых точек соприкосновения одного объекта с другим). Естественно, что сложное изображение должно быть разбито на фрагменты, которые предполагается анимировать – каждый фрагмент помещается в отдельный слой. Расположение слоев настраивается в зависимости от "видимости" того или иного фрагмента (например, левая рука скрыта за телом и должна располагаться в слое ниже, чем слой с телом).
• Для анимации правой руки преобразуем ее в символ - фрагмент ролика.
  

  
  Рис. 18.11.
• Двойным кликом входим в символ.
  

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

  
  Рис. 18.13.
• Обратите внимание, что работа переместилась в новый слой "Арматура". Для реализации движения руки достаточно предпринять одно действие: в контекстном меню 10-ого кадра слоя "Арматура" выбрать "Добавить позу". Теперь настроим необходимое положение руки, воспользовавшись "шарнирными" (суставными) точками – настройте необходимое их положение при выбранном инструменте "Стрелка".
  

  
  Рис. 18.14.
• Добавив следующий кадр на временной диаграмме, с "новой позой" и изменив ее мы постепенно добьемся необходимого нам движения руки.
• Проиграйте анимацию. Аналогичным образом настраивается движение остальных частей тела анимированного объекта (принцессы).

Теперь поговорим о выводе текстовой информации.

В лекции 14 уже шла речь о создании текста. Но создаваемый текст был статичным, не изменяемым в процессе работы с приложением. Есть три варианта создания текстового поля: "Статический текст", "Динамический текст", "Вводимый текст" ( рис. 18.15). Тип текста задается на панели свойств в поле "Задать тип текста" при выборе инструмента "Текст" для создания текстового блока на сцене.

Рис. 18.15. Типы текста

• Статический текст – не изменяемый в процессе работы с приложением.
• Вводимый текст - предназначен для ввода текста в процессе работы.
• Динамический текст - используется для вывода текста.

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

• На сцене создадим 6 текстовых полей (используя стандартные шрифты устройств – "Семейство: .sans" на панели свойств), размещенных в 2 колонки: в левой колонке три статических текстовых поля (с комментариями к текстовым полям, расположенным в правой колонке). Введем в эти поля названия типов текстов – "Статический текст", "Вводимый текст", "Динамический текст".
• В правой колонке создадим три пустых текстовых поля, соответствующих комментариям типов полей (статическое текстовое поле, вводимый текст, динамический текст) слева. На этапе разработки уже видно, что пустое поле статического текста создать невозможно.
• Для того, чтобы видеть, где располагаются поля типов "Вводимый текст" и "Динамический текст", заключим текстовые поля в рамку (на панели свойств кнопка "Показать рамку вокруг текста").
  

  
  Рис. 18.16. Пример расположения текстовых блоков в практической работе
• Протестируем ролик и убедимся, что оба поля отображаются на экране, в поле типа "Вводимый текст" можно вводить текст с клавиатуры, в поле типа "Динамический текст" - нельзя.

Практическая работа "Вывод текстовой информации в текстовом поле с прокруткой"

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

• Создадим динамическое текстовое поле, дадим ему имя (t), в режиме меню "Текст" выберем "Прокручиваемый". На панели свойств во вкладке "Абзац" установим "Поведение" - "Многострочный".
• Откроем панель "Компоненты" (режиме меню "Окно"), выберем компонент UIScrollBar (линейка прокрутки). Перетащим линейку на сцену, расположив справа от текстового блока.
• При выделенной линейке прокрутки на панели "Параметры компонента" установим значение свойства ScrollTargetName равным имени динамического текстового поля (t). Экспериментальным путем установите назначение остальных свойств.
• Выделим текстовый блок двойным кликом, при помощи маркера в правом нижнем углу текстового блока установим необходимые размеры блока (соответствующие панели, на которой планируется расположить текстовый блок).
• Проиграем ролик.

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

Вывод графической информации.

Для придания наибольшей реалистичности модели, анимационный ролик, моделирующий явление, создают:

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

Разные части объекта анимируются отдельно друг от друга. Каждый объект переносится в отдельный слой. Расположение слоев меняется в зависимости от расположения объектов друг относительно друга

Уровень вложения одного символа в другой можно проследить по цепочке имен символов, расположенных за названием Сцены. Для "выхода" из символа необходимо кликнуть по имени того символа, в которых необходимо попасть (либо двойной клик по свободному месту на сцене).

При необходимости управлять символом программным путем (менять свойства символа или заставить символ выполнять какие-то действия), к символу обращаются по имени экземпляра символа. Имена бывают двух видов:

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

Вывод текстовой информации.

Есть три варианта создания текстового поля:

• Статический текст – не изменяемый в процессе работы с приложением.
• Вводимый текст - предназначен для ввода текста в процессе работы.
• Динамический текст - используется для вывода текста.

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

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

• Инструмент "Кости"
• Абсолютное имя экземпляра символа
• Относительное имя экземпляра символа
• Статический текст
• Вводимый текст
• Динамический текст
• Линейка прокрутки

Вопросы

• Как понимать понятие "вложенная" анимация?
• Что дает редактирование центра привязки объекта при создании анимации?
• Чем руководствуются, выстраивая порядок расположения слоев, с размещенными на них элементами "разобранного" на части анимированного изображения?
• Каков принцип создания анимации при помощи "Кости"?
• Каким может быть имя экземпляра символа?
• Какие существуют типы текста? Назначение каждого из них?
• Назначение прокрутки при выводе текста в текстовое поле?

Упражнения

Дополните начатый ранее проект выводом сложной анимации в поле для вывода графики, динамического текста с прокруткой (для вывода текстовой информации).