Использование Flashдля создания интерактивного образовательного ресурса
Цель работы: Освоение технологии отрисовки картинки и технологии свободного перемещения объектов во Flash.
Теоретические сведения
Часто при разработке интерактивных учебных пособий для интерактивной доски во Flash возникает необходимость использования разнообразных изображений. Конечно же, картинки можно скачать из Интернета, но подобрать изображения в одном стиле бывает очень трудно. Тем, кто хочет, чтобы изображения в разрабатываемом интерактивном пособии были в одном стиле, советуем воспользоваться технологией отрисовки картинки во Flash. Это занятие предлагаем начать именно с освоения данной технологии.
Следующий шаг при разработке интерактивного образовательного ресурса, это написание скрипта и превращение статичного изображения в объект для свободного перемещения.
Большие возможности имеет использование объектов для перемещения на интерактивной доске. Именно тогда полностью реализуется сенсорный принцип работы интерактивной доски. Перемещать можно как графические изображения, так и отдельные слова, и даже целые предложения.
При этом интерактивные задания для интерактивной доски могут быть на:
· установление соответствия (например, изображение и подпись к нему);
· упорядочивание, классификацию, группировку, сортировку объектов по определенным признакам;
· соединение объектов в одно целое (например, конструирование из геометрических фигур);
|
|
|
· заполнение пропусков (вставка пропущенных букв, слов, изображений) и др.
Практическая часть
Задание 1. Технология отрисовки картинки во Flash
1. Откройте новый документ Macromedia Flash 8.0 или более поздней версии.
2. Импортируйте картинку, которую будем отрисовывать: Файл→Импорт→Импортировать на студию (Ctrl+R).
3. Заблокируйте слой с картинкой, установив замочек, и создайте еще один новый, где и будем работать.
4. Выберите инструмент 
Линия (N) Line Tool и начните обрисовывать картинку по контуру прямыми линиями яркого цвета, отличающегося от цвета фона и рисунка – для удобства обрисовки. У вас должен получиться следующий контур (рис. 14.1.).
Рис. 14.1. Обрисованный контур
Замечание: Обратите внимание, чтобы при отрисовке инструмент Чертеж объекта (J) не был нажат:
Рис. 14.2.Инструмент Чертеж объекта
5. Теперь линии нужно закруглить, для этого выберите инструмент 
Выделение (V) Selection Tool. Подведите курсор к линии и, не выделяя ее, потяните в нужном направлении (рис. 14.3).
Рис. 14.3. Скругление линий
6. Повторите эту операцию для каждой линии.
7. Для того, чтобы подкорректировать некоторые линии можно воспользоваться инструментом 
Подвыделение (А) Subselection Tools.
|
|
|
Рис. 14.4. Корректировка линий
8. Повторите шаги 4-5 с остальными (внутренними) линиями изображения. Должен получиться следующий результат (рис.14.5).
Рис. 14.5. Откорректированный обрисованный контур
9. Выберите инструмент Выделение (V) Selection Tool и двойным щелчком выделите все линии. Измените их цвет на черный (рис. 14.6.).
10. Залейте части картинки заливкой (инструмент массовой заливки (K) 
) и добавьте надпись Epson.
| Настройка цвета градиентной заливки |
Рис. 14.6. Настройка цвета градиентной заливки
11. Сравним исходное и получившееся изображение (рис. 14.7.).
Рис. 14.7. Исходное и обработанное изображение
12. Выберите инструмент Выделение (V) Selection Tool и выделите изображение. Теперь преобразуйте в символ – тип графика: ConverttoSymbol…→Graphic→OK.
13. Удалите исходное изображение из библиотеки для того, чтобы разрабатываемое пособие имело меньший объем.
Задание 2. Технология свободного перемещения объектов
1. Изображение у нас есть, теперь его необходимо преобразовать в символ – тип клип. Для этого при помощи инструмента 
Выделение (V) Selection Tool выделяем все изображение. Находясь курсором на выделенном изображении, щелкаем правой кнопкой мыши, в открывшемся меню выбираем Преобразовать в символ, тип – клип. (ConverttoSymbol…→Movie Clip→OK).
|
|
|
Рис. 14.8. Преобразование в символ
2. Открываем закладку «Действия» (F9) и пишем код свободного перемещения для объекта (рис. 14.9.):
on (press) { //Кнопка мыши нажата
StartDrag (this); } //Начать перемещение
on (release) { //Кнопка мыши отпущена
StopDrag (); } //Закончить перемещение
Рис. 14.9. Написание кода свободного перемещения
Замечание:StartDrag и StopDrag находятся в разделе MovieClipControl.
Данные операции повторяем для каждого подвижного объекта, который размещаем на отдельном слое. Для удобства можно блокировать каждый созданный кадр, тогда будет легче работать. Не забывайте, что каждый из них должен представлять из себя клип. Одинаковые объекты можно просто копировать и размещать на одном слое.
3. В 1-м кадре слоя прописываем код разворачивания клипа на весь экран:
fscommand("showmenu", "false");
fscommand("fullscreen","true");
4. Добавляем кнопку выхода из полноэкранного режима со следующим кодом:
on (release) {
fscommand("quit");
}
5. Нажимаем Ctrl+Enter– тестируем проект! Обратите внимание, что кнопка Выход будет работать только тогда, когда вы запустите ролик с расширением .swf или .exe и разворачивание окна во весь экран тоже будет происходить только при демонстрации ролика .swf или .exe.
|
|
|
6. Сохраните ролик (Файл→Сохранить как→……).
7. Опубликуйте ролик в формате swf: Файл→Публикация (Shift+F12)
Лабораторная работа №22
Технология создания кнопок
Дата добавления: 2018-04-15; просмотров: 268; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!