Предлагаю коллегам

Обучающие занятия на примерах
по созданию учебных проектов в среде Macromedia Flash MX

И.А. Бутенина,
школа № 510, Москва

Продолжение. Начало в № 6/2007

Теоретическая часть

2.1. Создание и использование сцен в фильме.

Практическая часть

2.2. Создание выпадающего меню.

Сцены являются логически завершенными частями фильма. Они воспроизводятся последовательно без задержки времени. Сцены фильма создаются с помощью панели Scene (Сцена), которая открывается при вызове команды Window—Design Panels—Scene (Окно—Панели разработки—Сцена). Эта панель (см. рис. 2.1) позволяет просматривать список сцен, устанавливать порядок их воспроизведения в фильме, а также дублировать, добавлять, удалять и перемещать сцены.

Рис. 2.1

Переключаться между сценами фильма можно с помощью кнопки Edit Scene, которая располагается над шкалой времени (см. рис. 2.2, справа).

Рис. 2.2

Просматривать сцены фильма можно с помощью панели Movie Explorer (Обозреватель фильма), которая вызывается с помощью команды меню Window—Other Panels—Movie Explorer (Окно—Другие панели—Обозреватель фильма). Сцены на этой панели представлены как иерархические элементы высшего порядка. С помощью этой панели можно просматривать также содержимое всех сцен: клипы, кнопки, сценарии скриптов, кадры, слои (см. рис. 2.3). Для тестирования отдельной сцены необходимо отметить ее на панели Scene (Сцена) и нажать клавишу Enter или открыть меню Control (Управление) и выбрать команду Test Scene (Тестирование сцены).

Рис. 2.3

2.2. Создание выпадающего меню

Рассмотрим создание и использование сцен на примере учебного проекта “Художники”. Проект представляет собой выпадающее меню, в котором мы определим три пункта: “Рафаэль Санти”, “Клод Моне”, “Биография художников” (см. рис. 2.4). В дальнейшем мы расположим части фильма, соответствующие различным пунктам меню на отдельных сценах. На этом занятии мы займемся самим меню.

Рис. 2.4

На Сцене 1 (см. рис. 2.5) разместим кнопку, созданную на предыдущем занятии. Каждый отдельный элемент сцены: фон, текст, кнопка и меню — расположим на отдельном слое. Имена слоев соответствуют названиям элементов.

Рис. 2.5

Для работы со слоями используется панель слоев, расположенная в левой части временной линейки. Активный слой всегда выделен (см. рис. 2.6). Разноцветные квадраты фиксируют цвет контуров объектов в режиме Outlines (Внешние контуры). Слои могут быть невидимыми, для этого достаточно щелкнуть в слое по точке под значком , и заблокированными (надо щелкнуть по точке под значком ). Слои можно создавать, перемещать, копировать, переименовывать и удалять.

Рис. 2.6

Технологию создания выпадающего меню рассмотрим по шагам.

2.2.1. На слое фон нарисуем во весь экран прямоугольник без обводки с градиентной заливкой. Для этого возьмем инструмент Rectangle Tool (Прямоугольник) в секции Tools (Инструменты) панели инструментов, а в секции Colors (Цвета) щелкнем по кнопке Stroke Color (Цвет контура), а затем по кнопке No Color (Не задан). Это позволит убрать контур.

2.2.2. На втором слое текст напишем заголовок “Художники” с помощью инструмента Text Tool (Текст) панели инструментов.

2.2.3. На слой кнопка поместим сделанную уже ранее кнопку из библиотеки фильма knopka.fla. Щелкнем два раза по кнопке, попадем в режим ее редактирования и в кадрах ее состояния заменим сделанные надписи на надпись “О художниках”.

2.2.4. Сделаем всего по два кадра во всех слоях, вторые кадры всех слоев должны быть ключевыми.

2.2.5. Чтобы меню появлялось после нажатия основной кнопки, создадим его во втором ключевом кадре слоя меню. Для этого нарисуем под кнопкой прямоугольник без обводки (см. рис. 2.7). Конвертируем прямоугольник (предварительно необходимо его выделить) в графический символ командой меню Modify — Convert to Symbol (Изменить — Преобразовать в символ), назовем этот символ “рамка” (см. рис. 2.8).

Рис. 2.7

Рис. 2.8

2.2.6. В рамку поместим три текстовые надписи. Следует обратить внимание на то, чтобы в панели Properties (Свойства) тип текстового блока был статический (см. рис. 2.9).

Рис. 2.9

2.2.7. Удерживая клавишу Shift, выделим текстовые блоки и выровняем их по левому краю с помощью панели Align (Выравнивание).

2.2.8. Преобразуем текстовые блоки в кнопки и дадим кнопкам имена по названиям пунктов меню (рис. 2.10).

Рис. 2.10

2.2.9. Два раза щелкнем по первой кнопке меню, попадем в режим ее редактирования (меню в этом режиме становится блеклым), рис. 2.11.

Рис. 2.11

2.2.10. Копируем содержимое кадра Up в кадр Over, рис. 2.12.

Рис. 2.12

2.2.11. В кадре Over создадим прямоугольник по длине основной кнопки и наложим его на текст, при этом, если нужно, можно изменить цвет букв и стиль начертания текста, рис. 2.13.

Рис. 2.13

Проделаем эти операции с каждой кнопкой меню (повторим 3 раза шаги пунктов 2.2.9–2.2.11).

На следующем занятии мы познакомимся с использованием языка сценариев Action Script для управления командами меню.