Главная › Элективный курс "Web-технологии и Flash"

Урок 41, часть I. Технология drag & drop. Упражнение "Кислоты"

Пт, 02/04/2011 - 11:55 — pypath

В данном уроке формулируется определение технологии drag & drop, показывается ее роль в среде Windows; изучается реализация данной технологии на языке программирования Action Script (методы startDrag () и stopDrag ()); рассматривается применение технологии drag & drop при создании приложения.

Тип урока: урок изучения нового материала.

Продолжительность: сдвоенный (1,5 часа)

Цель урока: сформировать представление о технологии drag & drop как неотъемлемой части современных операционных систем, изучить реализацию данной технологии на языке ActionScript.

Задачи урока:

Образовательные

  • Формулирование сути механизма drag & drop;
  • Изучение нового материала о реализации данной технологии в среде Macromedia Flash;
  • Закрепление знаний.

Развивающие

  • Развитие логического мышления.

Воспитательные

  • Привитие исследовательского подхода в познании нового;
  • Формирование умения применять на практике полученные знания;
  • Формирование целостной картины мира.

Оборудование: компьютеры, школьная доска
Программное обеспечение: Macromedia Flash
Методическое обеспечение:

  • Раздаточный материал

Литература:

  1. П. Лапин. Flash MX. Самоучитель. Питер 2003 – 386с.: ил.
  2. Р. Рейнхард, Д. Лотт. Macromedia Flash MX ActionScript. Библия пользователя. – М: Диалектика, 2004 – 1280 с: ил..
  3. Д.Ю Титоров. Flash-программирование: элективный курс для школьников. Информатика и образование. № 11,12-2004; № 1-2005

План урока:
1. I часть – startDrag() и stopDrag()
a) Актуализация знаний и формулирование определения (10 мин);
b) Изучение нового материала (30 мин);
c) Контроль знаний (5 мин)
2. Перемена (10 мин)
3. II часть – упражнение "Кислоты"
a) Объяснение цели предстоящей работы (5 мин).
b) Практическая работа. Упражнение "Кислоты" (30 мин);
c) Подведение итогов (10 мин).

Предварительная подготовка к уроку:
Печатные копии инструкционных карт для второй части занятия.

Ход урока:

Часть I

Актуализация знаний и формулирование определения

1. Представим, что нам надо переместить значок (или ярлык) из одной области Рабочего стола в другую. Подробно опишем этапы реализации данной задачи:
I. Над значком зажать левую кнопку мыши;
II. не отпуская кнопки мыши переместить его на необходимое расстояние (перенести в место назначения);
III. отпустить кнопку мыши.

2. Все эти этапы являются составляющими так называемой технологии (или механизма) drag & drop. Переводится как «Перетащил и оставил». Данная технология является важной составляющей большинства современных операционных систем.

3. Сформулируем определение drag & drop.
Это механизм позволяющий перетаскивать объекты из одного места в другое с помощью мыши.

4. Продемонстрируйте реализацию данного механизма в пределах а) рабочего стола, б) рабочего стола и любой другой папки.

Новый материал

В языке ActionScript, чтобы начать перетаскивать объект используют метод startDrag().

Отключение режима перетаскивания символа реализуется методом stopDrag().

Одним из наиболее распространенных примеров применения методов startDrag() и stopDrag() служит обработка событий от мыши в кнопке:

on (press) {
    startDrag("");
}
on (release) {
    stopDrag();
}

Обратите внимание, что при нажатии на кнопку (press) будет реализовываться действие startDrag(), а при выпуске кнопки (release) – stopDrag().

Задание 1.
Откройте программу Macromedia Flash. Нарисуйте небольшой квадрат (например, с синей заливкой). Преобразуйте квадрат в символ-кнопку (для этого необходимо выделить квадрат и нажать клавишу F8, затем выбрать поведение Кнопка и нажать ОК). Напишите для данного символа вышеприведенный код.

Откройте фильм для просмотра. Что вы наблюдаете? Объект можно перетаскивать с помощью левой кнопки мыши, т.е. реализуется технология drag & drop.

Задание 2.
Нарисуйте второй квадрат (например, красного цвета). Преобразуйте его также в символ-кнопку. Запустите фильм. Что вы наблюдаете? При попытке переместить синий квадрат, красный перемещается вместе с ним, сохраняя изначальное расстояние.
Чтобы избежать подобной проблемы необходимо прописать в скобках первый параметр: имя целевого объекта (имя экземпляра символа фильма или кнопки, которые требуется перетаскивать). Строка startDrag(""); примет следующий вид startDrag("name_obj");

Задание 3.

Присвойте имена двум символам-кнопкам (например, butt_one и butt_two). Измените, код для первой кнопки, вписав параметр Имя целевого объекта. Напишите аналогичный код для второй кнопки, указав в качестве целевого объекта вторую кнопку. Обратите внимание, что имя цели пишется в кавычках.

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

Второй параметр метода startDrag() – это центрирование перетаскиваемого символа относительно указателя мыши (при значении true есть центрирование, false – нет).

Задание 4.

Увеличьте первый символ - кнопку. Запустите фильм и попробуйте перетаскивать символ за углы и центр символа. Получается ли перемещать символ, взяв за угол? Да. Поставьте (пропишите) второй параметр (блокировать мышь по центру) в значение true. Строка startDrag("butt_one"); примет вид startDrag("butt_one ", true);. Запустите фильм. Получается ли теперь перемещать символ за углы? Нет.

Наиболее уместно применять центрирование для объектов малых величин.

Третий - шестой параметры – это размеры области перетаскивания. Значения указываются в пикселях. Размеры границ задаются в полях: L (лево), R (право), T (верх), B (низ). Таким образом, можно ограничить возможные перемещения внутри определенной области.

Задание 5.

Укажите для второго символа область перемещения, ограниченную 50-ым пикселем сверху, 350-ым – снизу, 100-ым – слева и 450-ым – справа. Строка startDrag("butt_two ", true); примет вид startDrag("butt_two", false, 100, 50, 450, 350); Запустите фильм. Можно ли теперь переместить объект на край рабочей области? Нет.

Используя метод startDrag() можно создать собственный указатель мыши. Для этого символу-фильму необходимо присвоить, например такой код:

onClipEvent (load) {
    Mouse.hide();
    startDrag(this, true);
}

Здесь во второй строке производится скрытие собственного курсора мыши (объекту Mouse назначается метод hide() – скрыть). Однако надо иметь в виду, что этот способ не является единственным. Код можно прописать и в кадре. Тогда он примет такой вид:

mov_obj.startDrag(true);
Mouse.hide();

Здесь mov_obj – имя копии фильма.

Задание 6.

Создайте собственный указатель мыши. Для этого необходимо нарисовать будущий указатель, преобразовать его в символ-фильм и написать сценарий (любой из двух приведенный выше). Запустите фильм и опробуйте "работоспособность" вашего курсора.

Можно ли вы перемещать собственным курсором другие объекты? Нет.
Дело в том, что объекты можно перемещать лишь по очереди. Поэтому когда начинает реализовываться метод startDrag() назначенный кнопке, перестает действовать метод startDrag() назначенный «указателю»-фильму. Данную проблему можно решить иными способами. Однако на сегодняшнем занятии мы их рассматривать не будем.

Контроль знаний

  1. С помощью каких методов реализуется технология Drag & Drop на языке ActionScript?
  2. Приведите два примера наиболее распространенного применения данной технологии во Flash-приложениях.
  3. Имеют ли параметры методы startDrag() и stopDrag()?
  4. Перечислите параметры метода startDrag()? Есть ли среди них обязательные? Ответ обоснуйте.