Степаненко О.В. Развитие творческих способностей гимназистов в процессе разработки цифровых образовательных ресурсов для интерактивной доски во Flash»

(фрагмент учебного пособия)

[email protected]

Творческая деятельность учащихся с использованием новых информационных технологий в развитой образовательной информационной среде приближает нас к реализации одной из основных целей и задач образования, перечисленных в национальной доктрине образования РФ: «Система образования призвана обеспечить подготовку высокообразованных людей и высококвалифицированных специалистов, способных к профессиональному росту и профессиональной мобильности в условиях информатизации общества и развития новых наукоемких технологий...».

Информатика, пожалуй, единственный учебный предмет, который немыслимо представить без использования цифровых образовательных ресурсов (ЦОР).

В практике преподавания информатики и ИКТ в МОУ «Борисоглебская гимназия № 1» широко применяются ЦОРы из Единой коллекции [1], где размещены учебно-методические материалы, которые ориентируют учителя на внедрение современных методов обучения, основанных на использовании информационно-коммуникационных технологий.

В МОУ «Борисоглебская гимназия № 1» накоплен также значительный опыт по разработке и использованию авторских цифровых образовательных ресурсов для интерактивной доски во Flash.

Создание педагогом авторских ЦОР для ИД способствует совершенствованию его профессионального мастерства, помогает в реализации индивидуального подхода к образовательной траектории каждого ученика, в акцентировании внимания именно на тех вопросах, которые менее усвоены данным классом и данными учениками.

В 2009-2010 учебном году на портале «Сеть творческих учителей» (it-n.ru) в сообществе «Интерактивная доска для начинающих и не только...» под моим руководством открылась новая творческая группа «Разработка цифровых образовательных ресурсов для интерактивной доски» [2]. В рамках данной творческой группы мною проводится на портале дистанционный мастер-класс для педагогов из разных уголков России по проблеме «Разработка цифровых образовательных ресурсов для интерактивной доски во Flash» [3].

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

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

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

В учебном процессе и в процессе тьюторской подготовки гимназистов используется написанное мной учебное пособие «Разработка цифровых образовательных ресурсов для интерактивной доски». Данное пособие (170 с.) предназначено для учащихся, начинающих осваивать программирование во Flash, увлекающихся разработкой собственных программ. Также оно может быть полезно учителям общеобразовательных школ, гимназий, лицеев, преподавателей колледжей, разрабатывающим авторские цифровые образовательные ресурсы для интерактивной доски. Пособие содержит подробные алгоритмы создания интерактивных учебных пособий во Flash. Печатный вариант пособия дополнен электронным приложением (24 Мб), содержащим реализованные во Flash интерактивные ресурсы: флеш-презентации, открытки, дидактические игры, тесты, тренажеры, интерактивные задания, ЦОРы с приложением исходных файлов в формате .fla

Фрагмент учебного пособия «Разработка цифровых образовательных ресурсов для интерактивной доски»

Урок 4. Технология создания кнопки

Задачи:

Образовательные: освоить технологию создания кнопки во Flash и использования языка ActionScript для работы с ней, добавления кнопки из библиотеки стандартных элементов, поставляемой вместе с Flash.

Воспитательные: воспитывать интерес к предмету, самостоятельность, активность.

Развивающие: развивать творческие способности учащихся; умение создавать интерактивные учебные пособия во Flash; деятельностные компетенции.

Кнопка важный элемент любого интерактивного ресурса. Разрабатывая ЦОР для ИД во Flash можно использовать кнопки из стандартной библиотеки компонентов Flash. Для этого нужно:

1. Выбрать в меню Window → Common Libraries → Buttons:

2. Открыть папку "Arcade buttons", и перетащить кнопку "arcade button - orange" на рабочее пространство вашего стола.

Большинство кнопок в стандартной библиотеке являются уже готовыми и рабочими. Всё что останется - это добавить действия для кнопки.

В кнопке четыре кадра, которые соответствуют четырём её состояниям:

Up - первоначальное (пассивное) состояние кнопки. Кнопка находится в этом состоянии, когда курсор мышки находится за её пределами.

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

Down - состояние кнопки, когда она нажата. В этом состоянии используются эффекты "вдавливания", более тёмной "подсветки и т.п.

Hit - это состояние используется для области кнопки, которая будет реагировать на курсор. Контур, нарисованный в этом состоянии, будет обозначать активную область кнопки. Например, в символе arcade button - orange, активной является область кнопки, и окружающего её ободка - тень не входит в активную область (хотя тоже присутствует в символе кнопки), поэтому при нажатии на неё ничего не происходит.

В эти четыре состояния можно помещать всё что угодно, включая другие символы (даже объекты MovieClip), тем самым создавая всевозможные кнопки.

Прием 2. Клип-кнопка

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

1. Открываем новый документ Flash.

2. Называем слой именем «Фон» и устанавливаем цвет фона по желанию.

3. Введите в слое «Фон» статический текст Перемести в системный блок устройства, находящиеся внутри него.

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

5. Создаем новый слой с именем «Клипы» и размещаем на нем графические изображения.

6. Изображение системного блока преобразовываем в символ - тип клип и задаем имя инстанции sistemnic.

7. Изображения, входящие в состав системного блока преобразовываем в символ - тип клип. Двойным щелчком заходим внутрь клипа и вновь преобразовываем изображение в символ - тип кнопка и для каждой кнопки прописываем код свободного перемещения с исчезновением:

on (press) //когда кнопка мыши нажата

{

this.startDrag(true); //начинаем перемещать текущий объект, ключевое слово true в данном случае задает привязку центра объекта к курсору

}

on (release) //когда кнопка мыши отпущена

{

this.stopDrag(); //заканчиваем перемещать текущий объект

if (this._droptarget == "/sistemnic") //осуществляем проверку условия - если есть столкновение с объектом по имени sistemnic, то

{

this._visible = 0; //текущий объект становится невидимым

} // конец выполнения условного оператора

}

_______________________________________________________________

Комментарий к представленному выше скрипту

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

Свойство _droptarget, доступное только для чтения, возвращает абсолютный путь к мувиклипу (объекту sistemnic), на который был "брошен" (перетащен) любой мувиклип (this), в слэш-нотации. Свойство _droptarget всегда возвращает путь, начинающийся со слэша ( / ).

Операторы языка ActionScript

Оператор

Назначение

+

Сложение

-

Вычитание

<

Меньше

<=

Не больше

>

Больше

>=

Не меньше

==

Равно

!=

Не равно

=

Присваивание

Свойство _visible определяет видимость объекта.

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

В приведенном выше сценарии условный оператор if… (если) предполагает исполнение единственной последовательности действий, не имеющей альтернативы, при выполнении определенного условия: если есть столкновение объекта с системным блоком, то он исчезает.

А что же будет при перемещении объектов без столкновения с системным блоком? В этом случае при использовании конструкции if… не произойдет вообще ничего. Если вы хотите, чтобы при невыполнении заданного условия сценарий производил те или иные действия, следует добавить конструкцию else (иначе).

Как и во многих других объектно-ориентированных языках, в ActionScript для оформления операций, которые нужно выполнить при выполнении указанного условия, применяются фигурные скобки { }, а само условие записывается в круглые скобки ( ), например, if (this._droptarget == "/sistemnic")

Структура If...else - позволяет записать в сценарии необходимость выполнить одну из двух последовательностей операций. С данной конструкцией мы познакомимся более подробно в следующих занятиях мастер-класса.

______________________________________________________________

Продолжим…

Чтобы выйти из режима редактирования символа, нажимаем синюю стрелку:

8. Изображения, не входящие в состав системного блока преобразовываем в символ - тип клип. Двойным щелчком заходим внутрь клипа и вновь преобразовываем изображение в символ - тип кнопка и для каждой кнопки прописываем код свободного перемещения:

on (press) { //Кнопка мыши нажата

StartDrag (this); } //Начать перемещение

on (release) { //Кнопка мыши отпущена

StopDrag (); } //Закончить перемещение

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

9. В слое «Фон» прописываем код разворачивания клипа на весь экран и отключения меню.

fscommand("showmenu", "false"); //Отключить большую часть выпадающего меню, где есть и пункт «Проиграть сначала», которым ученик может запустить, например, заново тест.

fscommand("fullscreen","true");//Развернуть ролик на весь экран

10. В слое «Клипы» добавляем кнопку выхода со следующим кодом:

on (release) { //Кнопка мыши отпущена

fscommand("quit"); //Выход

}

11. В слое «Клипы» добавляем кнопку, при нажатии на которую будет появляться вопрос: Какой вывод можно сделать после выполнения данного задания? (состояние кнопки Down)

12. Добавим подсказку - название устройства, которое будет появляться при наведении на него курсора мыши. Для этого заходим внутрь каждого символа клип, затем внутрь символа кнопка и во втором кадре (положение кнопки Over) нажимаем F6 (копировать кадр) и добавляем соответствующую надпись.

13. Переходим на вкладку «Фильтры» и, нажав на плюс, добавляем фильтры: Тень (Drop Shadow) - цвет белый, Свечение (Glow) - цвет белый.

14. Аналогичным образом поступаем со всеми клипами (п. 12-13).

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

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

Практическая работа

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

Урок 6. Технология создания ресурсов для интерактивной доски «Свободное перемещение с проверкой»

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

Цели:

Образовательная: освоить технологию создания ресурса для интерактивной доски «Свободное перемещение с проверкой».

Воспитательная: воспитывать самостоятельность, прилежание, творческую активность.

Развивающая: продолжать развивать познавательный интерес учащихся; развивать умение создавать интерактивные учебные пособия во Flash, деятельностные компетенции.

Прием 1. Моментальная проверка правильности расположения перетаскивающихся объектов

Технология свободного перемещения объектов во Flash может быть усовершенствована, если использовать возможность моментальной проверки правильности расположения перетаскивающихся объектов. Это можно осуществить, если использовать проверку принадлежности клипа той или иной области.

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

1. Открываем новый документ Flash.

2. Называем слой именем «Фон» и устанавливаем цвет фона по желанию.

3. Устанавливаем размер рабочей области 800х600.

4. В 1-м кадре слоя «Фон» размещаем текст задания: Установи правильное соотношение. Перетащи надписи на соответствующие позиции.

5. Добавляем новый слой с именем «Картинки» и располагаем на нем изображения устройств.

6. Добавляем новый слой с именем «Ответы». И на данном слое в 1-м кадре создаем объекты для перемещения - названия устройств.

Код для свободного перемещения каждого объекта (клипа) нам уже знаком:

on (press) { //Кнопка мыши нажата

StartDrag (this); } //Начать перемещение

on (release) { //Кнопка мыши отпущена

StopDrag (); } //Закончить перемещение

7. Задаем каждому клипу имя инстанции k1, k2, k3, k4, k5, k6 соответственно:

8. Добавляем новый слой с именем «База» и располагаем на нем прямоугольные поля чуть большего размера, чем перемещаемые клипы, устанавливая их на задний план (щелкаем правой кнопкой мыши и в контекстном меню выбираем пункт Расположить(Arrange)→На задний план(Send to Back)→Ок.

9. Каждое прямоугольное поле (базу) преобразовываем в символ - тип клип и присваиваем соответствующее имя инстанции: base1, base2, base3, base4, base5, base6.

Обращаю Ваше внимание на то, что на клип base1 должен будет встать клип k1 и т.п.

10. Добавляем новый слой с именем «Код» и для 1 кадра (!) прописываем следующий код:

stop();

//Функция

function dropToBase(clip:MovieClip, initX, initY, base:MovieClip) {

clip._x = initX;

clip._y = initY;

clip.onPress = function() { // При нажатии на клип...

this.startDrag(); // Включаем перетаскивание

};

clip.onRelease = function() {// При отпускании кнопки мыши...

this.stopDrag(); // Прекращаем перетаскивание

if (eval(this._droptarget) == base) { //Если клип "сброшен" в требуемую область (клип base),он центрируется по этой области //

this._x = base._x;

this._y = base._y;

}

else { // Иначе (если клип "сброшен" мимо цели) возвращаем его в исходное положение

this._x = initX;

this._y = initY;

}

};

}

//Основная программа

var clipNum:Number = 6; //Количество клипов

for (i = 1; i <= clipNum; i++) {

dropToBase(this["k" + i], this["k" + i]._x, this["k" + i]._y, this["base" + i]);

}

_______________________________________________________________

Комментарий к представленному выше скрипту

Проанализируем сначала код функции.

function dropToBase(clip:MovieClip, initX, initY, base:MovieClip)

Строка описания функции, где dropToBase - имя функции, переменные clip и base, имеют тип MovieClip, переменные initX и initY определены для сохранения начального положения x и y текущего (this) экземпляра клипа:

clip._x = initX;

clip._y = initY;

Событию onPress экземпляра clip определена и присвоена функция. Она вызывается при каждом нажатии на клип (k1, k2, k3, k4, k5, k6) и включает перетаскивание:

clip.onPress = function() { // При нажатии на клип...

this.startDrag(); // Включаем перетаскивание

};

Событию onRelease экземпляра clip также определена и присвоена функция. Она вызывается при каждом отпускании клипа (k1, k2, k3, k4, k5, k6) и прекращает перетаскивание.

clip.onRelease = function() {// При отпускании кнопки мыши...

this.stopDrag(); // Прекращаем перетаскивание

При этом, если клип (k1, k2, k3, k4, k5, k6) "сброшен" в требуемую область (base1 и т.д.), он центрируется по этой области, иначе функция возвращает клип назад, в исходное положение. В данном случае используется структура условного оператора If (если) ...else (иначе), которая позволяет записать в сценарии необходимость выполнить одну из двух последовательностей операций:

if (eval(this._droptarget) == base) { //Если клип "сброшен" в требуемую область (клип base),он центрируется по этой области //

this._x = base._x;

this._y = base._y;

}

else { //Иначе (если клип "сброшен" мимо цели) возвращаем его в исходное положение

this._x = initX;

this._y = initY;

}

Оператор eval позволяет нам обратиться к текущему перемещаемому объекту-клипу (this) и проверить его принадлежность данной базе:

(eval(this._droptarget) == base)

Следующее на, что стоит обратить внимание, это то, что для описания действий над объектами, а также для указания подчиненности объекта в языке ActionScript обычно применяется так называемая «точечная нотация». Например, в нашем случае чтобы указать, что к клипу clip следует применить метод onPress() используется конструкция: clip.onPress = function()

Основная программа начинается с описания переменной:

var clipNum:Number = 6; //Количество клипов

Слово var сообщает интерпретатору, что мы объявляем переменную, а последующий текст clipNum становится именем новой переменной, затем через двоеточие указывается тип переменной Number (число) и через знак равенства задается значение переменной - количество клипов, равное 6. Понятие переменной (variable) во многих отношениях является одним из краеугольных камней программирования.

В следующей строке используется оператор цикла for - компактный и удобный способ программирования циклов, основанных на том, что значение некоторой переменной при каждой итерации увеличивается (как в нашем случае i++) или уменьшается на единицу. Удобен он тем, что инициализация переменной цикла, установление условия цикла, инкремент (или декремент) переменной - на все это требуется всего одна строка ActionScript:

for (i = 1; i <= clipNum; i++) {

В следующей строке основной программы по имени dropToBase вызывается функция для каждого клипа (k1, k2, k3, k4, k5, k6) и базы (base1, base2, base3, base4, base5, base6):

dropToBase(this["k" + i], this["k" + i]._x, this["k" + i]._y, this["base" + i]);

Итак скрипт рассмотрен полностью. Думаю, что теперь все понятно… Продолжим создавать ЦОР дальше.

__________________________________________________________

11. Для того, чтобы ответ размещался поверх базы меняем местами слои «Ответы» и «База» следующим образом:

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

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

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

Практическая работа

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

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

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

1. Открываем новый документ Flash.

2. Называем слой именем «Фон» и устанавливаем цвет фона по желанию. Устанавливаем размер рабочей области 800х700.

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

4. Добавляем новый слой с именем «Картинки» и располагаем на нем изображения.

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

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

7. Добавляем новый слой с именем «Клипы». На данном слое размещаем объекты, на которые нужно будет перемещать буквы. В нашем случае это прямоугольники (стиль штриха линии - точки). Внутрь большого прямоугольника добавляем по центру маленький, преобразовываем его в символ - тип клип и задаем каждому клипу (базе) имя инстанции соответственно: b1, b2, b3, b4, b5.

b2

b5

b1

b3

b4

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

9. Добавляем новый слой с именем «Буквы» и размещаем на нем буквы.

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

on (press) {

startDrag ("", false);

}

on (release) {

stopDrag ();

}

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

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

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

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

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

1. способ (простой)

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

16. Далее я предлагаю воспользоваться скриптом, предложенным в зачетной работе Корякиным Александром Геннадьевичем, немножко его упростив. Итак, в слой с кнопкой Буратино вставляем следующий скрипт:

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

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

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

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

}

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

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

20.Создаем новый слой «Результат» и в нем размещаем поле - тип текста динамический (Dunamic Text). Советую набрать предложение для вывода (К сожалению, вы не справились с заданием! или Поздравляю! Вы справились с заданием!) и выбрать подходящий размер шрифта и цвет. А потом аккуратно все удалить, в том числе и все пробелы. Будьте внимательнее, чтобы ничего в поле не осталось! Иначе ответ постоянно будет отрицательным.

21.Присваиваем переменной имя rez:

2 способ (более сложный )

15.Добавляем новый слой с именем «Кнопка» и размещаем на нем надпись «Спроси у Буратино все ли ты сделал верно» и кнопку (изображение Буратино) со следующим кодом:

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))

{

with (_root.rez) //Обращаемся к клипу rez

{

gotoAndStop(2); //Выдается сообщение «Поздравляю! Вы справились с заданием!» (2-й кадр клипа rez)

} // End of with

}

else

{

with (_root.rez) //Обращаемся к клипу rez

{

gotoAndStop(3); //Выдается сообщение «К сожалению, вы не справились с заданием! Вернуться и исправить ошибки (3-й кадр клипа rez)

} // End of with

} // end else if

}

_______________________________________________________________

Комментарий к представленному выше скрипту

В данном скрипте метод hitTest используется для того, чтобы определить перекрываются/пересекаются ли клипы b1 и o1 (и т.д.) или нет.

With выполняет некоторый код в конце указанного объекта, предоставляет сокращенный способ обращения к свойствам объекта. В конкретном скрипте осуществляется обращение к клипу rez.

Синтаксис:

with (object) {

statements;

}

, где object - экземпляр ActionScript объекта или мувиклипа.

statements - команда или группа команд, заключенных в фигурные скобки.

В скрипте вместо with можно воспользоваться глобальной функций tellTarget.

Синтаксис:

tellTarget(target) {

statements

}

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

statements - предложения, которые должны быть выполнены в области видимости target.

TellTarget позволяет обратиться к удаленному клипу, и в CS3 она работает (можете попробовать и заменить with на tellTarget)!

Хотя в справочнике Flash написано следующее: «Во Flash 3 и Flash 4 tellTarget() была главным средством связи между двумя клипами фильмов (т.е. управления одним клипом из другого). Она использовалась для вызова таких функций, как play(), stop(), и gotoAndStop() с удаленными клипами фильмов. Во Flash 4, где в ActionScript были добавлены переменные, с помощью tellTarget() можно было также получать и задавать значения переменных удаленных клипов. Во Flash 5 такие действия лучше осуществлять с помощью оператора точки, и оператора обращения к массиву []. Другой альтернативой функции tellTarget() является предложение with» [5].

Продолжим…

_________________________________________________________________

16. Создаем новый символ клип: Вставить→Новый символ (или нажимаем сочетание клавиш Ctrl + F8), тип - клип, имя - Результат. Выходим из символа, нажав синюю стрелку.

17. Добавляем новый слой с именем «Результат», переносим на него созданный клип «Результат», размещаем его по центру рабочего поля.

18. Задаем имя инстанции для нашего клипа rez.

19. Двойным щелчком по точке, заходим внутрь клипа:

16. В первых трех кадрах слоя «Стоп» прописываем соответствующее действие stop ();

17. Добавляем новый слой с именем «Сообщение». Во 2-м кадре размещаем прямоугольник и статический текст: «Поздравляю!

Вы справились с заданием!». В 3-м кадре данного слоя размещаем статический текст: «К сожалению, вы не справились с заданием! Вернуться и исправить ошибки».

16. Добавляем новый слой «Кнопки» и во 2-м кадре размещаем кнопку выхода (скрипт Вам уже знаком!), а в 3-м кадре кнопку возврата со следующим кодом:

on (release)

{

gotoAndStop(1);

}

23. В данном способе также предлагаю озвучить Буратино. Для этого импортируем в библиотеку звуки verno.mp3 и neverno.mp3.

24. Двойным щелчком по точке заходим внутрь клипа rez:

25.Во второй кадр клипа rez добавляем звук verno.mp3. Для этого сделаем активным кадр, в который будем вставлять звук, щелкнув по нему (2-й кадр слоя стоп). На вкладке Properties (Свойства) - Sound выбираем из библиотеки звук verno.mp3:

26. В третий кадр клипа rez добавляем звук neverno.mp3:

О том, что в кадр добавлен звук можно узнать по линии над кадром:

27. Чтобы озвучить кнопку, нужно зайти внутрь символа кнопка. Сделать активным кадр Down:

На вкладке Properties (Свойства) - Sound выбираем из библиотеки звук vixod.wav:

Звук добавлен

Это два способа проверки перемещаемых объектов.

Выбираем тот, который больше нравится. Далее:

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

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

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

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

Рассмотрите внимательно представленный ниже код. Сколько объектов для перемещения в нём предусмотрено? Имеются ли одинаковые?

if (_root.l1.hitTest(_root.b1) && _root.l2.hitTest(_root.b2) && _root.l3.hitTest(_root.b3) && _root.l4.hitTest(_root.b4) && _root.l5.hitTest(_root.b5) && _root.l6.hitTest(_root.b6) && _root.l7.hitTest(_root.b7) || _root.l1.hitTest(_root.b1) && _root.l2.hitTest(_root.b6) && _root.l3.hitTest(_root.b3) && _root.l4.hitTest(_root.b4) && _root.l5.hitTest(_root.b5) && _root.l6.hitTest(_root.b2) && _root.l7.hitTest(_root.b7))

Урок 7. Технология работы с текстовыми полями во Flash: статический текст (Static Text), динамический текст (Dynamic Text) и текст, вводимый пользователем (Input Text).

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

Существует несколько базовых понятий, которые необходимо знать для успешного использования текстовых полей в ваших ЦОРах. Flash поддерживает три вида текста: статический (static text), динамический (dynamic text) и вводимый (input text).

Из трех типов форматов текста статический текст (Static Text) используется чаще всего и с ним мы уже с Вами работали, создавая каждый ЦОР. На прошлом занятии мы использовали динамический текст (Dynamic Text), который может быть изменен Flash во время paбoты SWF-файла, например, вывод сообщения «Верно!» или «Неверно!» в зависимости от результата выполнения задания. В поле с динамическим текстом можно выводить количество набранных баллов и исходя из этого оценку за выполнение задания ЦОР. Ключевая разница между режимами Dynamic Text и Input Text состоит в том, что в текстовое поле пользователь может сам вводить текст. Именно работе с текстовым полем input text более подробно и будет посвящено наше занятие.

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

Цели:

Образовательная: освоить технологию работы с текстовыми полями во Flash: статический текст (Static Text), динамический текст (Dynamic Text) и текст, вводимый пользователем (Input Text).

Воспитательная: воспитывать самостоятельность, прилежание, творческую активность.

Развивающая: продолжать развивать познавательный интерес учащихся; развивать умение создавать интерактивные учебные пособия во Flash, деятельностные компетенции.

Прием 1. Работа с текстовыми полями в одном кадре

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

1. Откройте новый документ Flash.

2. Разместите на сцене статический текст (static text) (слой с именем «Текст»), как показано на рисунке.

3. Во время выполнения предыдущих заданий поднимался вопрос о том, как сделать прозрачный фон у изображений. Одним из вариантов является предварительная обработка изображения в программе Adobe Photoshop. Однако и во Flash можно избавиться от фона, если импортированное растровое изображение преобразовать в векторное, т.е. выполнить векторизацию. Это технологию мы и освоим сейчас попутно. Для этого, прежде всего, импортируем растровое изображение светофора в рабочую область нового слоя «Картинки».

4. Выделяем наше растровое изображение и выбираем в меню следующий пункт: Modify(Модификация) → Bitmap (Растр) → Trace Bitmap (Просмотр растра).

5. В отрывшемся диалоговом окне Trace Bitmap мы должны в поле ввода Color Threshold (цветовой порог) задать числовое значение разницы между цветами, которые программа векторизации должна воспринимать как один и тот же цвет. Можно вводить числа в пределах от 1 до 500. Значение по умолчанию равно 100. В поле ввода Minimum Area (минимальная зона) указывается количество пикселей, которые должны быть учтены при усредненном определении цвета. Можно вводить число от 1 до 1000, значение по умолчанию равно 8. Следующие два списка Curve Fit (совпадение кривой) и Corner Threshold (угловой порог предлагают на выбор несколько степеней точности определения контуров, очерчивающих однотонные области, и углов.)

6. Я выбрала следующие параметры:

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

И нажимаем кнопку Delete на клавиатуре.

Затем выделяем все изображение и преобразовываем в символ - тип графика.

8. Удаляем исходное изображение из библиотеки. Теперь оно нам не нужно.

9. Вы можете поэкспериментировать и выбрать вариант векторизации подходящий именно Вам.

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

11. Теперь разместим на новом слое с именем «Ответы» поля для ввода текста (Input text). Для этого выбираем инструмент T(Text Tool) и на вкладке Свойства (Properties) выбираем тип текста Input text и располагаем поле для ввода текста на рабочей области там, где должен быть напечатан ответ:

12. Устанавливаем размер шрифта, а также цвет текста, например - черный. (Замечание: Для проверки ввода стоит напечатать текст в поле, а потом его убрать, при этом расположение текста должно быть по левому краю). При вводе также учитывайте, что пользователь может напечатать текст прописными буквами, значит места нужно чуть больше чем под текст, напечатанный строчными буквами.

13. Теперь для созданного текстового поля необходимо назначить переменную (var) с именем o1:

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

Поле для ввода ответа стало белым и ограниченным рамкой.

15. Аналогичным образом создаем остальные поля для ввода и назначаем для созданных текстовых полей переменную (var) с именами o2, o3, o4, o5 соответственно:

o1

o2

o3

o4

o5

16. В этом же слое размещаем поля с динамическим текстом (Dynamic Text). Если снять выделение с поля с динамическим текстом, то можно увидеть, что оно выделено пунктирной рамкой. В данные поля будет выводиться сообщение «Верно!» или «Неверно!». Назначаем им переменную (var) с именами r1, r2, r3, r4, r5 соответственно:

17. В этом же слое размещаем стрелки и преобразовываем их в символ - тип кнопка.

18. Прописываем для каждой кнопки скрипт проверки введенного в поле ответа:

Скрипт для первой кнопки:

on (release) {

if (o1=='зрительная' || o1=='Зрительная' || o1=='ЗРИТЕЛЬНАЯ') {

b1 = 1; //1 балл за верный ответ

r1 = "Верно!"; //Вывод сообщения в динамическое поле

} else {

b1 = 0; //0 баллов за неверный ответ

r1 = "Неверно!"; //Вывод сообщения в динамическое поле

}

}

_____________________________________________________________

Комментарий к представленному выше скрипту

Единственное, что для Вас нового в данном скрипте - это сложное логическое условие в операторе If. В ActionScript 2.0.:

&& - логическое И;

|| - логическое ИЛИ;

! - логическое НЕ;

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

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

Продолжим…

_____________________________________________________________

19. Теперь кнопку можно скопировать столько раз, сколько нужно и в скрипте поменять только имена переменных o2, r2 и b2 и т.д. соответственно.

20. Теперь добавим еще одну кнопку и поле с динамическим текстом (имя переменной rez) для выставления итоговой оценки за работу.

Скрипт для кнопки будет следующим:

on (release) {

i = b1+b2+b3+b4+b5; //Подсчет количества набранных баллов

if (i==5){ // Если набранных баллов 5

rez = "5"; //В динамическое поле выводится оценка 5

} else if (i==4){ // Если набранных баллов 4

rez = "4"; //В динамическое поле выводится оценка 4

} else if (i==3){ // Если набранных баллов 3

rez = "3"; //В динамическое поле выводится оценка 3

} else { // В остальных случаях

rez = "2"; //В динамическое поле выводится оценка 2

}

}

Считаю, что комментировать данный скрипт нет надобности, здесь все понятно.

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

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

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

Практическая работа

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

Прием 2. Технология создания авторской клавиатуры для ввода текста

Выполняя задания в ЦОРах с полями для ввода, появляется необходимость работы с клавиатурой. Использовать экранную клавиатуру не всегда удобно. Решением данной проблемы может быть собственная авторская клавиатура созданная под тот или иной ЦОР: нажатием на кнопку можно вводить числа, буквы, даже целые слова… Предлагаю пойти дальше и сделать ЦОР с собственной экранной клавиатурой. А уж какой ей быть - решать Вам! Фантазируйте!

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

1. Откройте новый документ Flash.

2. Разместите на сцене статический текст (static text), как показано на рисунке:

3. Ниже разместите поле для ввода текста с именем pole_field:

4. Ниже размещаем поле с динамическим текстом, указав имя переменной rez1:

5. Создаем кнопки нашей экранной клавиатуры:

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

on(press) {

pole_field.text+="Q" //Для кнопки Q

pole_field.onChanged(); //Вызов функции

}

7. Для кнопки очистки поля для ввода скрипт следующий:

on(press) {

pole_field.text="" //Для кнопки clear очистка поля

pole_field.onChanged(); //Вызов функции

}

8. Для кнопки удаления символа:

on(press) {

pole_field.text=pole_field.text.substr(0,pole_field.text.length-1) //Для кнопки backspace

pole_field.onChanged(); //Вызов функции

}

9. В кадре слоя «Кнопки» прописываем следующий скрипт:

b1 = 0; //Записываем в переменную 0 баллов

pole_field.onChanged=function () { //Выполнение функции

if (pole_field.text.length==7) { // Если введены все семь букв

if(pole_field.text=="INTEGER") {//Если в поле введен текст INTEGER

b1 = 1; //1 балл за верный ответ записывается в переменную b1

rez1="Верно!"; //Выводится сообщение «Верно!»

} else { // если не integer

b1 = 0; //0 баллов за неверный ответ записывается в переменную b1

rez1="Неверно!"; //Выводится сообщение «Неверно!»

}

}

}

stop();

10. Добавляем кнопку перехода на следующий кадр. Скрипт для кнопки:

on (press)

{

play(); //Перейти на следующий кадр

}

_____________________________________________________________

Комментарий к представленным выше скриптам

В наших скриптах за проверку введенного текста в ActionScript 2.0 отвечает функция onChanged();

В скрипте кнопки backspace при однократном нажатии удаляется один символ:

pole_field.text=pole_field.text.substr(0,pole_field.text.length-1)

Рассмотрим подробнее.

String.substr

Синтаксис

myString.substr(start, length);

Аргументы

start Целое число, которое указывает позицию первого символа в создаваемой подстроке. Если start отрицательное число, исходная позиция определяется с конца строки, где -1 - последний символ.

length Число символов в создаваемой подстроке. Если length не определен, подстрока включает все символы от начала до конца строки.

Описание

Метод возвращает символы в строке от индекса, указанного в параметре start, длинной указанной в аргументе length.

В нашем случае метод возвращает символы в строке от индекса 0, длинной до предпоследнего (т.е. минус 1): text.substr(0,pole_field.text.length-1), т.е. происходит удаление одного символа.

Все остальное нам уже известно.

Продолжим…

________________________________________________________

11. Ставим курсор во 2-й кадр и нажимаем клавишу копирования содержимого предыдущего кадра - F6. Вносим необходимые изменения в содержание вопроса, указываем правильный ответ, изменяем имена переменных - rez2 и b2 соответственно.

12. Аналогичным образом (п. 11) поступаем для 3 и 4 кадров.

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

14. В шестом кадре располагаем статический текст следующего содержания:

15. Размещаем поля с динамическим текстом и именами переменных соответственно:

prav

error

b1 b2 b3 b4 b5 b6 соответственно

oc

16. Добавляем для 6 кадра следующий скрипт:

stop(); // останавливаем воспроизведение

prav = b1+b2+b3+b4+b5+b6 // подсчитываем кол-во верных ответов

error = 6-prav; // считаем неправильные ответы

// Подсчёт оценки

if (prav>=5){ // если правильных ответов 5 и более

oc = "5"; // оценка 5

} else if (prav==4){ // если правильных ответов 4

oc = "4"; // оценка 4

} else if (prav==3){ // если правильных ответов 3

oc = "3"; // оценка 3

} else { // в остальных случаях

oc = "2"; // оценка 2!

}

17. Самостоятельно добавляем код, разворачивающий клип на весь экран, кнопку выхода и озвучиваем ЦОР.

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

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

Прием 3. Работа с текстовыми полями в нескольких кадрах. Игра «Редактор»

Данный прием позаимствован у В.В. Дуванова из игры «Правилка» (Роботландия). Рассмотрим возможность его реализации во Flash.

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

1. Откройте новый документ Flash.

2. Разместите на сцене «Фон» отрисованное изображение школьной доски. Заблокируйте данный слой, установив замочек.

3. Создайте новый слой с именем «Задания» и разместите на нем статический текст: «Работа над понятиями», «Исправьте допущенные в словах ошибки», «Задание 1».

4. В 1-м кадре слоя «Задания» разместите поле для ввода текста (Input Text) «Клавеотура» (здесь неправильный текст клавеотура необходимо напечатать в поле и не удалять), поле с динамическим текстом (Dynamic Text) под сообщение «Вы не исправили ошибку!» и нарисуйте кнопку перехода на следующий кадр в виде мелка.

5. Теперь для созданных текстовых полей необходимо назначить переменную (var). Поле для ввода - z1, поле с динамическим текстом - r1. Во 2-м и последующих кадрах соответственно будет z2, r2 и т.д.

6. Преобразовываем мелок в символ - тип кнопка и прописываем следующий код:

on (release) {

if (z1=='КЛАВИАТУРА' || z1=='клавиатура'|| z1==Клавиатура') { //Если набран текст в одном из трех вариантов

i1 = 1;

gotoAndPlay(2); //Переход на второй кадр

} else {

i1 = 0;

r1 = "Вы не исправили ошибку!"; //Выдается сообщение в динамическое поле

}

}

7. Прописываем в 1-кадре слоя «Фон» действие: stop();

8. Ставим курсор во 2-й кадр слоя «Задания» и нажимаем F6.

9. Вносим необходимые изменения в тексте, именах переменных и в коде кнопки.

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

11. На последнем кадре слоя «Задания» размещаем два поля с динамическим текстом: 1) для вывода количества набранных баллов (itog); 2) поле для вывода оценки за работу (oc).

oc itog

12. В последний кадр слоя «Задания» добавляем следующий код:

itog = i1+i2+i3+i4+i5+i6+i7

if (itog==7){ // если набранных баллов 7

oc = "5";

} else if (itog>=5){ // если набранных баллов от 5 до 6

oc = "4";

} else if (itog==4){ // если набранных баллов 4

oc = "3";

} else {// в остальных случаях

oc = "2";

}

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

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

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

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

Практическая работа

Создайте свой ресурс, содержащий 10 заданий на редактирование текста, внесите необходимые изменения в код подсчета оценки за работу.

Цифровые образовательные ресурсы для ИД, созданные гимназистами в рамках проектной и творческой работы, используются на уроках информатики и ИКТ как начальной, так и средней образовательной ступени. В результате реализации гимназического проекта «По волнам знаний на интерактивной доске» в рамках областного образовательного проекта «Школьные компьютерные бригады 2008-2009» учащимися были созданы цифровые образовательные ресурсы для интерактивной доски (ИД) в программе Adobe Flash по таким темам, как: «Локальные сети», «Логические основы компьютера» [4]. Итог - диплом 1 степени в рамках областного конкурса!

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

Как победитель конкурсного отбора для участия во Всеросийской научной школе, я смогла обменяться положительным опытом работы по медиаобразованию и развитию медиакомпетентности учащихся на "Всероссийской научной школе для молодежи "Медиаобразование и медиакомпетентность", прошедшей с 18 по 25 октября 2009 года в Таганроге (при финансовой поддержке Федеральной целевой программы «Научные и научно-педагогические кадры инновационной России на 2009-2013 годы», Мероприятие 2.1. «Организация и проведение всероссийских и международных молодежных научных конференций и школ», Федерального агентства по науке и инновациям Министерства образования и науки РФ) на базе Таганрогского государственного педагогического института (руководитель ВНШ «Медиаобразование и медиакомпетентность» - президент Ассоциации медиапедагогики России, доктор педагогических наук, профессор, главный редактор журнала «Медиаобразование» А.В.Федоров).

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

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

Интернет-источники:

1. Единая коллекция цифровых образовательных ресурсов school-collection.edu.ru

2. Творческая группа «Разработка цифровых образовательных ресурсов для интерактивной доски» it-n.ru/communities.aspx?cat_no=139369&tmpl=com

3. Степаненко О.В. Материалы мастер-класса «Разработка ЦОР для ИД во Flash» stepanenkoo.ucoz.ru/load/master_klass/23

4. «По волнам знаний на ИД» gumnaziya.narod.ru/brigada/id.html