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

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

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

Создание учебных проектов в среде Macromedia Flash MX 2004 (Flash MX 2004 Pro) не только знакомит с возможностями этой конкретной программы, но и развивает творческие способности учащихся, дает ребятам возможность почувствовать себя режиссерами, сценаристами и операторами при создании интерактивных фильмов.

В качестве примера создадим учебный проект-презентацию “Художники” (готовый проект вы можете найти на сайте “Информатики” в разделе “Download”). На него отводится 6 занятий. В процессе создания проекта рассмотрим некоторые важные аспекты работы в среде Macromedia Flash MX 2004: создание кнопок, создание выпадающего меню, работа со слоями-масками, со сценами, управление сценами и кнопками с помощью языка программирования Action Script 2.0, загрузка внешних файлов. Все занятия включают как теоретическую, так и практическую части.

Теоретическая часть
1.1. Функции кнопок в фильме
Практическая часть
1.2. Создание кнопки.
1.2.1. Состояние Up.
2.2.2. Состояние Over.
2.2.3. Состояние Down.
2.2.4. Состояние Hit.

1.1. Функции кнопок в фильме

Кнопки — это элементы управления фильмом. Они позволяют останавливать или запускать фильм, переключаться между сценами. Дизайн кнопок может быть разнообразным: прямоугольные, овальные, “кнопки-стрелки”, “кнопки-клавиши” и т.д. Flash предлагает пользователю несколько библиотек стандартных элементов, в том числе и кнопок.

Для открытия библиотеки следует выбрать команду Window—Other Panels—Common Libraries—Buttons (Окно—Другие панели—Общие библиотеки—Кнопки), см. рис. 1.

Рис. 1. Кнопка из библиотеки

При создании кнопки она попадает в библиотеку и хранится там как символ. Каждая кнопка во Flash-фильме имеет 4 кадра. Каждый кадр соответствует определенному состоянию кнопки.

· Up — на кнопку не оказывается никаких действий и указатель мыши находится за ее пределами;

· Over — указатель мыши находится над кнопкой;

· Down — состояние нажатия на кнопку;

· Hit — область реагирования кнопки при щелчке мышью.

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

1.2. Создание кнопки

1.2.1. Состояние Up

Создадим новый символ. Для этого войдем в меню Insert—New Symbol (Вставка—Новый символ). Откроется диалоговое окно Create New Symbol (Создание нового символа). Поставим переключатель Behavior “поведения” (фактически — типа символа) в положение Button (кнопка), а в поле Name (Имя) запишем “кнопка”. Сказанное иллюстрируют рис. 2, 3.

Рис. 2

Рис. 3

После выполнения описанных операций мы попадаем в режим редактирования кнопки. На временной шкале сейчас зафиксировано положение Up. Выберем инструмент Прямоугольник и нарисуем прямоугольник без обводки, любого цвета, например, светло-коричневого.

Выделим нарисованную фигуру инструментом , cкопируем по команде Edit-Copy (Правка—Копировать) и вставим в то же самое место по команде Edit—Paste in Place (Правка — Вставить в то же место), см. рис. 4.

Рис. 4

Не отменяя выделения, уменьшим область заливки на 10 px. Для этого выберем команду Modify—Shape—Expand Fill (Изменить—Форма—Расширить заливку). На экране появляется диалоговое окно Expand Fill (Расширить заливку). В поле Distance (Расстояние) введем 10 px, установим переключатель Inset (Внутрь), см. рис. 5.

Рис. 5

Изменим цвет сжатого прямоугольника, для этого, не отменяя выделения, выберем инструмент Fill Color (Цвет заливки) в секции Colors (Цвета) панели инструментов. Затем выберем, например, градиентную заливку, как показано на рис. 6. Результат наших усилий показан на рис. 7.

Рис. 6

Рис. 7

Теперь сделаем кнопку объемной. Для этого соединим отрезками прямых линий (инструмент Line Tool ) верхние правые углы и нижние левые углы внешнего и внутреннего прямоугольников. Перед этим необходимо установить черный цвет обводки в секции Colors (Цвета) инструмента Stroke Color. Первое приближение к объемному виду кнопки показано на рис. 8.

Рис. 8

Для усиления эффекта объема зальем коричневым цветом нижнюю часть кнопки. Для этого выберем инструмент Paint Bucket Tool (Заливка) в секции Tools (Инструменты) панели инструментов. Результат показан на рис. 9.

Рис. 9

Чтобы увидеть в процессе тестирования все состояния кнопки, сделаем на ней надписи. Для этого выберем инструмент Text Tool (Текст) панели инструментов и напишем слово “Up” — первое состояние кнопки, см. рис. 10.

Рис. 10

1.2.2. Состояние Over.

На временной шкале щелкнем по кадру Over. Вставим в него пустой ключевой кадр с помощью команды меню Insert—Blank Keyframe (Вставить — Пустой ключевой кадр), того же эффекта можно достичь нажатием клавиши . В указанное место будет вставлен пустой ключевой кадр и рабочая область очистится.

Дважды вставим из буфера обмена скопированное состояние кнопки командой Edit—Paste in Place.

Последний вставленный прямоугольник сожмем на 15 px (ранее мы уже проделывали аналогичную операцию). Затем придадим кнопке объем посредством тех же приемов, которые были рассмотрены выше.

Скопируем нашу кнопку целиком в буфер обмена (копия пригодится для состояния кадра Down), предварительно выделив ее с помощью команды меню Edit—Select All (Правка — Выделить все). После этого напишем на кнопке ее состояние Over, см. рис. 11.

Рис. 11

1.2.3. Состояние Down (нажатая кнопка).

Для изображения кнопки в нажатом состоянии проделаем все описанные выше операции (напомним, что мы специально скопировали кнопку в буфер обмена), но зальем коричневым цветом не нижнюю, а верхнюю часть рамки, см. рис. 12.

Рис. 12

1.2.4. Состояние Hit (область реагирования кнопки).

Кадр Hit предназначен для определения области реагирования кнопки (можно, например, сделать так, что чувствительной будет не вся кнопка, а лишь некоторая область на ней). Поскольку нам такого не требуется, создадим в кадре Hit пустой ключевой кадр клавишей и вставим в него изображение кнопки из буфера обмена.

Чтобы увидеть работу кнопки, надо включить режим доступа к кнопкам Control—Enable Simple Button (Управление—Доступ к кнопкам).

Не забудьте сохранить фильм (например, под именем knopka.fla), он понадобится нам в дальнейшем.

Следующее занятие будет посвящено использованию сцен и созданию выпадающего меню. Читайте его в следующем номере.