Уроки Flash. Создание простых сценариев. Применение метода «Перетащи и положи» к клипам

педагог дополнительного образования

УРОКИ FLASH.

СОЗДАНИЕ ПРОСТЫХ СЦЕНАРИЕВ.

ПРИМЕНЕНИЕ МЕТОДА «ПЕРЕТАЩИ И ПОЛОЖИ» К КЛИПАМ

(команды startDrag и stopDrag).

Москва

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

Команда «startDrag» задает автоматическое следование клипа за курсором. Этот способ применяется для того, чтобы использовать выбранный клип в качестве курсора.

Рассмотрим несколько простейших примеров применения этого метода.

Пример 1. Замена курсора.

1. Создаем первый слой и называем его «фон». Для этого, нанесем на рабочую зону прямоугольник с заливкой любого светлого цвета.

2. Создаем второй слой и называем его «курсор».

Далее создаем клип, который будем использовать в качестве курсора. Insert -> New Symbol.

На панели свойств задаем тип Movie Clip и даем имя “kyrsor”. Кнопка ОК.

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

3. Открываем библиотеку клипа. Перетаскиваем оттуда новый символ на сцену. Для того, чтобы назначить сценарий клипу, нужно дать ему имя. Выделяем символ и, перейдя на панель properties, даем имя экземпляру символа. В поле Instance name вводим имя символа, по которому в сценарии будем к нему обращаться: “kyr”.

4. Переходим на панель Action внизу окна Flash. В результате, появится панель Action. Так как мы заменяем курсор, следовательно, это событие

относится ко всему клипу. Поэтому, на панели команд Action из списка Global Function выбираем Movie Clip Control и, далее, выбираем событие OnClipEvent.

Действие по замене курсора на созданный клип должно происходить сразу после загрузки клипа, поэтому, из раскрывающегося контекстного меню выбираем load. Далее нужно скрыть действующий (стандартный) указатель (курсор). Из списка Action Script 2.0 Classes выбираем Movie, далее Mouse и в методах (Methods) выбираем команду hide.

Теперь нужно привязать клип к указателю мыши. Это делает команда startDrag, которую выбираем на панели команд Action: из списка Global Function выберем Movie Clip Control и далее выбираем событие startDrag. Выделяем эту команду в списке выполняемых действий и в области ввода параметров щелкаем в поле Target. Далее нужно задать путь к клипу (т. е., к чему мы привязываем курсор). Щелкаем на кнопке Insert a target path. Т. к., клип является единственным на сцене, то он находится на верхнем уровне, и мы можем задать к нему абсолютный путь. Далее нужно выбрать имя клипа и нажать кнопку OK. Тем самым мы вернулись к окну Action.

5. Устанавливаем флажки Expression (выражение) и Lock mouse to senter (привязать курсор к центру клипа). Если не установить флажок Lock mouse to senter, то за основу будет взято расстояние между курсором и центром клипа на момент выполнения команды startDrag.

В результате получается следующий код сценария:

onClipEvent (load) {

Mouse. hide();

startDrag (_root. kyr, true);

}

Задание к Примеру 1. Создать аналогичный клип, но в качестве указателя курсора использовать один из символов шрифтов Symbol, Webdings или Wingdings. Например, символ I(Sift+i) шрифта Wingdings.

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

Выполнение.

Для выполнения этого задания при создании символа используется инструмент Text. Вызываем панели Text options и Character. На панели Text options выбираем Static text, а на панели Character выбираем нужный шрифт, размер и цвет. После этого, выделяем созданный символ и выполняем команду Modify->Break Apart (Модифицировать - Разбить).

Полученный символ можно залить любым цветом. Все остальные действия полностью повторяют Пример 1.

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

Создание клипа с экземпляром кнопки внутри.

«Тряпка»

Для создания этого клипа понадобится клип с экземпляром символа Button. В сценарии данной кнопки размещаются операции, позволяющие нажать кнопку мыши в пределах кнопки, находящейся в клипе, и

перетаскивать этот клип по экрану. Перемещение прекращается, когда отпускается кнопка мыши.

1. Переименовываем первый слой в «экран».

2. Выполняем команду Insert -> New Symbol (Вставка -> Новый символ). На экране появится окно диалога Create new symbol (Создание нового символа), устанавливаем переключатель Movie Clip и вводим имя tr. Кнопка ОК.

3. Рисуем прямоугольник с неровными краями. Для достижения эффекта неровности выбираем вид и цвет обводки из раскрывающегося списка на панели Properties (свойства).

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

5. В появившемся окне диалога Convert to Symbol (Преобразование символа) устанавливаем переключатель Button и вводим имя but1. Кнопка ОК. (Мы по-прежнему работаем в режиме редактирования символов).

Выделяем вновь созданную кнопку и активизируем панель Action внизу окна. Выбираем команду startDrag из списка команд (смотри предыдущий пример) и дважды щелкаем по ней. Выделяем эту команду в списке выполняемых действий и в области ввода параметров щелкаем в поле Target.

Мы должны задать путь к нашему клипу (т. е. к чему мы привязываем курсор). Обращаем внимание, что событие мыши должно быть установлено press. Щелкаем на кнопке Insert a target path. задаем абсолютный путь. Далее нужно выбрать имя клипа и нажать кнопку OK. Тем самым мы вернулись к окну Action.

Там же (в списке Action) выберем команду stopDrag. Событие для мыши должно быть установлено release (отпустить).

Программный код будет иметь следующий вид:

on (press) {

startDrag(_root. tr, true);

}

on (release) {

stopDrag();

}

6. Щелкаем по кнопке Scen1, чтобы выйти из редактирования символов. Создаем новый слой и называем его «надпись». Помещаем на него текст.

7.Выделяем сделанную надпись и преобразовываем ее в символ (хотя это и не обязательно), чтобы зрители, у которых отсутствует данный шрифт, могли видеть эту надпись.

8. Перемещаем слой «надпись» ниже слоя «экран».

Задание. Создать клип «Семья». В комнате находятся родители и ребенок. Сделать так, чтобы можно было их перемещать по комнате.

Подсказка. Комната – слой «фон». Персонажи должны находиться каждый на своем слое и должны являться клипами, внутри которых находится кнопка (предыдущий пример).

Литература.

1. Т. Панкратова «Учебный курс Flash МХ», Питер, 2004 г.

2. Б. Сандерс «Учебный курс Flash ActionScript», БХВ, 2004 г.