Мастер-класс № 3

Уважаемые слушатели мастер-класса! Наша работа продолжается. В данном занятии мы освоим один из вариантов проверки свободно перемещаемых объектов во Flash – проверку перекрытия/пересечения клипов с использованием метода hitTest.

Представим ситуацию: ученик выполняет задание у интерактивной доски – перемещает объекты на отведенные для этого места. После того, как все объекты перемещены, он нажимает на кнопку проверки и сразу видит результат своей работы: верно или неверно он выполнил задание. Вот он «тот самый интерактив», не модное словечко, а действительный результат, отклик на выполненную работу, «ответ» интерактивной доски J! Прошу прощения, за отступление…

Проверка перекрытия/пересечения клипов. Метод hitTest

Алгоритм выполнения работы:

1.  Откройте новый документ Macromedia Flash 8.0 или более поздней версии. При этом, если это CS 4 выбираем Файл→Создать(Ctrl+N)→Файл Flash (ActionScript2.0).

2.  Называем слой именем «Фон» (для его щелкаем дважды по стандартному названию) и устанавливаем цвет фона по желанию на вкладке Свойства:

3.  Устанавливаем размер рабочей области 800х700 щелкнув по кнопке Редактировать:

4.  В 1-м кадре слоя «Фон» размещаем текст задания: Составь компьютерную азбуку, используя инструмент текст (T)

5.  Добавляем новый слой с именем «Картинки»:

6.  Располагаем на нем изображения, импортируя их на рабочее поле: Файл→Импорт→Импортировать на студию (Ctrl+R).\

7.  Преобразовываем каждое изображение в символ – тип кнопка. Для этого выберите инструмент Выделение (V) Selection Tool и выделите изображение. Дальше щелкаем по изображению правой кнопкой мыши и в выпадающем окне выбираем Преобразовать в символ - тип кнопка: Convert to Symbol…→Button→OK.

НЕ нашли? Не то? Что вы ищете?

8.  Заходим двойным щелчком внутрь символа кнопка.

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

10.  Аналогичным образом (п. 8-9) поступаем с остальными изображениями.

11.  Добавляем новый слой с именем «Клипы», перетаскиванием перемещаем его под слой Картинки:

12.  На данном слое размещаем объекты, на которые нужно будет перемещать буквы. В нашем случае это прямоугольники (стиль штриха линии – точки).

13.  Внутрь большого прямоугольника добавляем по центру маленький с зеленым контуром, преобразовываем его в символ – тип клип и задаем каждому клипу (базе) имя инстанции соответственно: b1, b2, b3, b4, b5.

b2
 

14.  Заходим внутрь каждого клипа и избавляемся от зеленого контура: выделяем его двойным щелчком и меняем цвет на белый.

15.  Добавляем новый слой с именем «Буквы» и размещаем на нем буквы, используя инструмент Т (текст).

16.  Каждую букву преобразовываем в символ – тип клип.

17.  Двойным щелчком заходим внутрь клипа и преобразовываем букву еще раз в символ – тип кнопка. Добавляем следующий код для кнопки:

Для этого выделяем кнопку инструментом Выделение (V) и нажимаем клавишу F9. В открывшееся окно вставляем следующий код:

on (press) {

startDrag ("", false);

}

on (release) {

stopDrag ();

}

1.  Двойным щелчком заходим внутрь кнопки и, выделив букву, нажимаем Ctrl+B, т. е. преобразовываем текст в графику. Затем делаем так, чтобы при наведении курсора мыши на букву она чуть-чуть сдвигалась в сторону и меняла свой цвет. Для этого копируем содержимое первого кадра с помощью кнопки F6 во второй, третий и четвертый кадры, а потом во втором кадре кнопки смещаем букву влево и вверх (по три раза нажимаем клавиши → и ↑), меняем ее цвет на другой:

18.  Выходим из символов кнопка и клип, дважды нажав синюю стрелку.

19.  Задаем созданному объекту для перемещения - клипу - имя инстанции соответственно: o1, o2, o3, o4, o5.

В другой версии это выглядит вот так на вкладке Свойства (Properties):

20.  Аналогичным образом (п. 16-20) поступаем с остальными объектами для перемещения - буквами.

А теперь уважаемые слушатели, чтобы проверить правильность перемещения объектов мы добавим кнопку проверки!

21.  Добавляем новый слой с именем «Кнопка».

22.  Размещаем на нем надпись «Спроси у Буратино все ли ты сделал верно» и кнопку (изображение Буратино). Инструкцию по разработке авторской кнопки можно посмотреть здесь: http://*****/node/36221

23.  Далее я предлагаю оживить наш ЭОР, добавив звук! Сделаем так, чтобы наш Буратино заговорил!

24.  Итак, в слой с кнопкой Буратино вставляем следующий скрипт:

var verno = new Sound(); //verno – переменная для звука правильного ответа

var neverno = new Sound(); //neverno – переменная для звука неправильного ответа

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

и нажать клавишу F9, затем в открывшееся окно добавить скрипт.

25.  А кнопке Буратино добавляем скрипт:

on (release)

{

if (_root. b1.hitTest(_root. o1) && _root. b2.hitTest(_root. o2) && _root. b3.hitTest(_root. o3) && _root. b4.hitTest(_root. o4) && _root. b5.hitTest(_root. o5))

{ verno. attachSound("verno"); //Связывание переменной со звуковым файлом

verno. start(); //Старт проигрывания звука verno. mp3

rez = "Поздравляю! Вы справились с заданием!"; //В поле с типом динамический текст выдается сообщение «Поздравляю! Вы справились с заданием!»

}

else

{ neverno. attachSound("neverno"); //Связывание переменной со звуковым файлом

neverno. start(); //Старт проигрывания звука neverno. mp3

rez = "К сожалению, вы не справились с заданием!"; //В поле с типом динамический текст выдается сообщение «К сожалению, вы не справились с заданием!

} // end else if

}

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

18.Звуки neverno и verno мы прописали, но их нужно добавить в библиотеку. Для этого выбираем: File (Файл) → Import (Импорт) → Import to Library… (Импорт в библиотеку…) → Имя файла → Открыть:

Если вдруг Flash откажется импортировать звуки нужно будет установить плеер QuickTime.

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

Чтобы открыть библиотеку нужно нажать сочетание клавиш Ctrl+L:

19.  Теперь нам нужно настроить звуки для экспорта в ActionScript. Для этого щелкаем правой кнопкой мыши по имени звукового файла в библиотеке и в открывшемся окне выбираем Свойства - Sound Properties (свойства звука).

20.  Далее выбираем одну из опций сжатия (Compression) - Default (по умолчанию), проставляем галочки в Linkage (Связывание) напротив пунктов: Export for ActionScript (экспортировать для ActionScript) и Export in frame 1 (экспортировать в первый кадр). В строке Identifier (Идентификатор) указываем имя звукового файла neverno для файла neverno. mp3 и verno для файла verno. mp3:

20.Создаем новый слой «Результат» и в нем размещаем поле - тип текста динамический (Dunamic Text).

Советую набрать предложение для вывода (К сожалению, вы не справились с заданием! или Поздравляю! Вы справились с заданием!) и выбрать подходящий размер шрифта и цвет.

А потом аккуратно все удалить, в том числе и все пробелы. Будьте внимательнее, чтобы ничего в поле не осталось! Иначе ответ постоянно будет отрицательным.

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

Также обратите внимание на то, чтобы не стояла галочка в поле Автокернинг:

21.Присваиваем для нашего поля с динамическим текстом имя переменной rez:

В другой версии может выглядеть так:

22. В кадр добавляем скрипт, разворачивающий клип на весь экран.

fscommand("showmenu", "false");

fscommand("fullscreen","true");

23. Добавляем кнопку выхода со скриптом:

on (release) {

fscommand("quit");

}

24. Нажимаем Ctrl+Enter - тестируем проект!

25. Публикуем в формате swf.

Источники:

Буратино http://www. *****/images/catalog/image_b. php? namephoto=s_6216.jpg