Дроводинова Л.В. Урок "Анимация курсора мыши"

Дроводинова Людмила Владимировна
МОУ СОШ № 24 г. Сочи
Урок из практикума
по компьютерной графике и анимации
Тема: Анимация курсора мыши
Урок - исследовательское занятие
Познавательные задачи:
Создание анимированного курсора мыши в приложениях Macromedia Flash
Учащиеся должны знать:
- элементы и основы объектно-ориентированного программирования (ООП).
Уметь:
- создавать графические объекты в Macromedia Flash;
- создавать анимацию движения и формы в Macromedia Flash "ручным" способом (с
помощью Timeline).
Оборудование:
- персональные компьютеры с ОС Windows XP, ПО Macromedia Flash MX 2004;
- мультимедийный проектор с экраном, подключённый к компьютеру преподавателя.
Тип урока: урок – исследовательское занятие
Вид урока: проблемно-лабораторное занятие
Методы:
проблемно-поисковый,
совместного
проектирования,
взаимодействия, оценочно-дискуссионный, рефлексивный.
коллективного
Хронология урока:
1. Подготовительный этап – 5 мин.
2. Постановка проблемы, актуализация знаний учащихся – 10 мин.
3. Сообщение новых знаний – 10 мин.
4. Формирование умений и навыков – 10 мин.
5. Аналитический этап – 5 мин.
Подготовка к уроку:
Компьютерный класс имеет 15 рабочих мест. Состав группы не более 15 человек. Каждый
ученик имеет своё рабочее место за персональным компьютером. Учитель проводит вводный
инструктаж, просит занять учеников свои рабочие места, приготовить тетради и загрузить
программу Macromedia Flash. На экран с помощью мультимедиа-проектора учитель выводит
Рабочий стол своего компьютера. Экран должен быть виден всем ученикам.
Вводная часть
Учитель просит учеников вспомнить систему координат, применяемую в компьютерной
графике. Напоминает, что существует экранный курсор и курсор мыши, формулирует общую
задачу. Слова учителя:
- курсор экрана будет у нас каким-либо символом Macromedia Flash, например, стрелочка,
треугольник, бабочка или всё, что мы с вами придумаем.
Надо этому символу, который у нас будет выполнять роль экранного курсора, присвоить
координаты курсора мыши. Тогда, связав положение символа, который у нас теперь является
экранным курсором, с положением курсора мыши, мы получим нужный нам вид курсора. После
этого, так как у нас курсор является символом Macromedia Flash, мы сможем задать ему любое
поведение, т.е. анимировать или "оживить".
Ход урока
1.
Учитель задаёт вопрос, что такое символ в терминах Macromedia Flash, что такое Рабочий
стол и библиотека. Как с помощью инструментов, графических примитивов Flash создать
символ. Как импортировать рисунок из файла в символ.
Ученики отвечают.
Учитель на своём Рабочем столе, который проецируется на экран, создаёт символ в виде
красного круга с зелёным контуром. Ученики, повторяя за учителем, создают символы на своих
компьютерах (см.рис.1)
Рисунок 1
Учитель говорит:
– Нажмем Ctrl+F8.
– В появившемся окне введем имя или оставим то, что есть "Symbol 1". Behavior должен
быть "Movie Clip".
– Нажмем "ОК" и нарисуем что-то простое, например круг.
– Отобразим библиотеку Ctrl+L. Там должен появиться символ под названием, например
Symbol 1, а над Timeline надпись " Szene 1 Symbol 1".
– У вас должно получиться примерно так, как на моём Рабочем столе.
– Можно вполне использовать готовый рисунок. Для этого надо его сначала
импортировать в библиотеку, а затем конвертировать в Movie Clip.
Ученики выполняют указания учителя, а учитель контролирует правильность выполнения.
На данном этапе ученики могут самостоятельно изобразить любую примитивную картинку,
или вставить картинку из файла. Создание символа должно занять не более 2-3 минут.
Используются знания, умения
воспроизведение и закрепление.
и
навыки,
приобретённые
ранее,
происходит
их
2.
Учитель говорит:
- теперь нам необходимо воспользоваться средствами ООП. Flash имеет свой встроенный
язык Action Script, который очень похож на Visual Basic. В обозначениях Action Script символ
имеет координаты – они обозначаются "_x" и "_y". Курсор мыши (именно курсор, а не мышь)
имеет координаты "_xmouse" и "_ymouse", которые Flash всегда знает. С помощью знака "="
мы присвоим новые координаты нашему символу.
Учитель на своём Рабочем столе, который проецируется на экран, производит действия,
которые повторяют ученики, сопровождая словами:
– Теперь перейдем на основную сцену (щелкнем слово "Szene 1" над Timeline) и
перетащим наш символ на Рабочий стол.
– Свернем панель справа и Properties, чтобы не мешали. А панель Actions развернем.
– Щелкнем левой кнопкой мыши наш символ (выделим) и в поле "Actions – Movie Clip"
введем точь-в-точь, как магическое заклинание, следующий код:
onClipEvent (enterFrame) {
_x =_x+_xmouse;
_y =_y+_ymouse;
}
– Пока просто это запомним.
– onClipEvent (enterFrame) – это обработчик событий (event).
– enterFrame – означает, что в каждом кадре.
– То, что справа от знака "=" всегда главное, то, что делается. А то, что слева от знака "=",
то чем всё это заканчивается. То есть, это можно сказать так: "берем текущую
координату икс символа (_x) прибавляем к ней текущую координату икс курсора мыши
(_xmouse) и результат присваиваем координате икс символа". Теперь всё это
заключаем в фигурные скобки {…..}, то есть контейнер, и обрабатываем в каждом кадре
(onClipEvent (enterFrame)).
– Теперь нажмем клавиши Ctrl+Enter, то есть протестируем наш клип. Что видим – наш
символ как бы "прилип" к курсору мыши.
Ученики выполняют указания учителя, а учитель контролирует правильность выполнения.
На данном этапе ученики используются знания, умения и навыки, приобретённые ранее,
при изучении Visual Basic и основ ООП. По аналогии они пишут программный код, не вникая на
данном этапе в особенности синтаксиса. Общие принципы написания кода им должны быть
понятны. Новым понятием является обработчик событий Event.
Учитель спрашивает:
- А почему нельзя написать _x=_xmouse ? И что будет, если так сделать? А что будет, если
"x" и "y" поменять местами?
Ученики отвечают. Учитель просит их поэкспериментировать, посмотреть и проанализировать
результаты. Ученики делают собственные выводы и говорят о них.
Рисунок 2
Этот этап должен занять не более 10 минут.
3.
Учитель говорит:
- Что ж теперь изменим слегка наш программный код.
onClipEvent (enterFrame) {
_x =_x+_xmouse/10;
_y =_y+_ymouse/10;
}
- Что получилось?
Ученики анализируют, делают выводы, отвечают.
Учитель говорит:
- Да, символ теперь "бегает" за курсором мыши. Но попробуйте объяснить, что происходит
справа от знака равно в нашем коде?
Ученики анализируют, делают выводы, отвечают.
Учитель говорит:
- Осталось взять, и подправить наш символ. Например, сделать его мигающим. Что ж,
дважды щелкнем по нашему символу левой кнопкой мыши и добавим ему какой-нибудь
анимации… на Ваш вкус и цвет, на которых товарищей нет.
- Например, щелкнем правой кнопкой 20 кадр и выберем Insert Keyframe, то же – в 40
кадре. Теперь вернемся в 20 кадр и уменьшим наш кружок раз в пять, только центр надо
оставить на месте. Теперь на панели Properties там, где Tween надо выбрать Shape. Ну а
теперь щелкнем 39 кадр и тоже поставим Shape.
Если всё правильно сделали, то на зеленом фоне между 1 и 20, а также между 20 и 40
кадрами появятся стрелочки. Жмём Ctrl+Enter…
- Если вы не фантазировали, то за курсором мыши бегает кружочек меняющегося размера,
или продукт вашей фантазии.
- Надеюсь понятно, что за курсором мыши может бегать всё, что вы придумаете, и при этом
дергаться, как Вам вздумается. Только особо не увлекайтесь, а то компьютер может зависнуть.
Ученики выполняют указания учителя, а учитель контролирует правильность выполнения.
Учитель все действия выполняет на своём Рабочем столе, который проецируется на экран.
На данном этапе ученики учатся выдвигать предположения и проверять их. Используют
знания, умения и навыки, создания анимаций, приобретённые ранее. Углубляют свои
представления о символах Flash. Приобретают элементарные навыки использования языка
программирования Action Script.
Этот этап должен занять не более 10 минут.
4.
Учитель говорит:
- Попробуйте менять коэффициенты деления и посмотрите, что получится. Можно
добавить функцию Math.random() – случайное число от "0" до"1". Например, так:
onClipEvent (enterFrame) {
_x =_x+_xmouse/10+Math.random()*50-25;
_y =_y+_ymouse/10+Math.random()*50-25;
}
- То есть добавляется случайное число от "0" до"50" минус "25". А в чём измеряется? – в
пикселях! Все координаты – это пиксели.
Ученики анализируют, учатся экспериментировать, делать выводы.
Этот этап должен занять не более 5 минут.
Подведение итогов занятия.
Учитель говорит:
- Итак, что на сегодняшнем занятии вы узнали нового?
Ученики отвечают.
Учитель спрашивает:
- Как активировать панель Action Script?
- Что такое "событие" в терминах ООП?
- Как обозначаются координаты мыши в Action Script?
- Как обозначается обработчик событий в Action Script?
- Какой аргумент (параметр) мы использовали в обработчике событий в данном примере?
Ученики отвечают:
- Щёлкнуть мышкой внизу строчку Action – развернётся панель Action Script.
- В качестве события можно рассматривать щелчок кнопкой мыши на объекте, нажатие
определенной клавиши, открытие документа и т.д. В качестве реакции на события вызывается
определенная процедура, которая может изменять свойства объекта, вызвать его методы и
т.д.
- Курсор мыши (именно курсор, а не мышь) имеет координаты "_xmouse" и "_ymouse",
которые Flash всегда знает.
- onClipEvent ()
- enterFrame.
Учитель оценивает каждого ученика, комментируя свою оценку.
Домашнее задание:
- Повторить основы ООП на Visual Basic. Угринович Н.Д. Информатика и информационные
технологии 10-11, стр. 157-164.
- Функция случайного числа. Там же стр. 185-200.
На следующем занятии мы с вами заменим курсор мыши созданным нами символом.
Попробуйте самостоятельно подумать, как это можно сделать.