Использование программы Macromedia Flash для подготовки интерактивных пособий


Чтобы посмотреть этот PDF файл с форматированием и разметкой, скачайте файл и откройте на своем компьютере.
ИСПОЛЬЗОВАНИЕ ПРОГРАММЫ MACROMEDIA FLASH ДЛЯ ПОДГОТОВКИ ИНТЕРАКТИВНЫХ ПОСОБИЙ АВТОР: Егоров Борис Владимирович, учитель физики и ОБЖ МОУ СОШ с.Преображенка , 1 квалификационная категория, стаж работы 17 лет АДРЕС АВТОРА: 666625 Пер.Советский, 2, с.Преображенка, Катангский район, Иркутская область; электронная почта - tungusebv @ mail . ru АДРЕС ШКОЛЫ: 666625 МОУ СОШ с.Преображенка, Катангский район, Иркутская область ; электро нная почта - preobr _ school @ bk . ru 2010 2 СОДЕРЖАНИЕ Стр. ВВЕДЕНИЕ……………………………………………………………… . .. 3 1. Создание изображений…………………………………. ...4 2. Создание анимации движения……………………………………………………………..8 3. Создание покадровой анимации………………………………………… ..12 4. Создание траектории движения………………………………………………………….. 14 5. Анимация формы…………..……………………………………………………………….. 17 6. Работа с текстом………………………………………………………………...…………...18 7. Анимация текста…………………………………………………………………………….19 8 . Создание интерактивного пособия «Поляризация диэлектриков»…………………...21 9 . Использование кнопки для управления движущимся объектом………………….…..30 10 . Создание кнопки с подсказкой……………………………………………………………..34 11 . Орбитальное движение фигур…… ...36 12 . Создание пособия, содержащего вкладки……………………………………………...…39 13. Вставка звука в проект…………………………………………………….………………..45 14 . Перетаскивание объекта в заданную область……………………………………………48 15. Импорт видео во F lash .51 ЗАКЛЮЧЕНИЕ ...54 ЛИТЕРАТУРА……………………………………………………………………………… . 55 3 Использование программы Macromedia Flash для подготовки интерактивных пособий Программа Mac romedia Flash позволяет создавать наглядные динамичные пособия по различным учебным темам. Её главное отличие от программ, позволяющих наглядно представлять материал урока, состоит в том, что здесь можно создать динамическую модель практически любого проце сса или явления. Ясно, что увидев изучаемое явление «изнутри», учащийся разберётся в нём гораздо быстрее и глубже, чем после рассказа или показа учителем статического изображения этого же явления на экране. Основные элементы рабочего окна программы (рис.1) : Рис.1. Окно программы Macromedia Flash На панели инструментов расположены инструменты для создания графических объектов [1] . Она напоминает панель инструментов графических редакторов, поэтому учитель, активно использующий подобные редакторы, не будет испытывать затруднений при работе с данной панелью. Рабочая область служит для создания и размещения создаваемых объектов. Панель свойств объектов информирует о свойствах выделенного на рабочей области графического объекта. Временная шкала служит для со здания анимации объектов. Основные инструменты (рис.2): 1. «Указатель» - служит для выделения объектов; 2. «Свободная трансформация» - позволяет выполнять преобразования с выделенным фрагментом изображения: изменение размеров, масштаба, сдвиг и т.п.; 3. «Линия» - п озволяет вычерчивать прямые линии; 4. «Перо» - позволяет вычерчивать плавные произвольные линии; 5. «Овал» - позволяет вычерчивать овалы и окружности; 6. «Карандаш» - позволяет вычерчивать произвольные кривые; 7. «Чернила» - служит для изменения цвета контуров фигур; 8. «Пипетка» - позволяет скопировать цвет с выделенного фрагмента изображения; 4 9. «Подвыделение» - выделяет объекты, образуя узловые точки, передвигая которые можно получить произвольную фигуру; 10. «Трансформация градиентной заливки» - изменение параметров градиент ной заливки фигуры; 11. «Лассо» - выделение произвольной области фигур; 12. «Текст» - работа с текстом; 13. «Прямоугольник» - позволяет вычерчивать прямоугольники и квадраты; 14. Кисть - служит для создания «мягких» линий; 15. «Заливка» - служит для заливки фигур цветом; 16. «Л астик» - служит для удаления фрагментов изображения. Рис.2. Основные инструменты 1 . Создание изображений Нарисуем треугольник, используя инструмент «Линия». Выбираем на панели инструментов данный инструмент (рис.3, 1). Далее подберём цвет линии (рис. 3, 2), при нажатии на данную кнопку выпадает палитра цветов (рис.3,3). Пускай линия будет синего цвета. Теперь обратим внимание на панель свойств линии (рис.4): « Properties ». Здесь мы снова видим инструмент цвета линии, толщину линии (в данном случае - 1 ), вид линии ( Solid ). Толщину линии увеличим, например до 3. Для этого щёлкнем по галочке рядом с цифрой 1. Появляется ползунок, передвигая который можно настроить толщину линии. Аналогично можно поменять вид линии. Рис.3. Выбор линии Рис.4. Свойства линии 5 Рисуем треугольник (рис.5): Рис.5. Рисование треугольника Подкорректируем форму треугольника. Выберем инструмент «Свободная трансформация» (рис.2). Выделим треугольник, п ри этом вокруг него появляется рамка с узлами (рис.6). Приближая указатель мыши к угловым узлам, мы увидим, что указатель меняет форму : возможно изменение размера фигуры и её вращение. Используя центральные узлы, можно изменить поперечные размеры треугольн ика. Приближая указатель мыши к любой стенке выделения, он поменяет форму на две противоположно направленные стрелки: теперь можно поменять наклон фигуры. Выравниваем основание треугольника. Теперь, используя инструмент «Подвыделение», получим равнобедрен ный треугольник. После выделения фигуры с помощью этого инструмента, на треугольнике появляются узлы выделения (рис.7). Потянув за правый узел, выравниваем треугольник (рис.8). Рис.6. Свободная Рис.7. Подвыделе ние Рис.8. Выравнивание т рансформация треугольника Зальём треугольник цветом: для этого выбираем инструмент «Заливка» (рис.9, 1), з атем цвет заливки (рис.9, 2), из выпавшей палитры цветов подбираем цвет заливки (рис.9, 3). Например: заливка серая. Переносим указатель мыши внутрь фигуры (указатель принимает форму используемого инструмента) и щёлкаем один раз. Треугольник залит цветом (рис.10). Рис.9. Заливка фигуры цветом 6 Рис.10. Треугольник залит цветом Таким образом можно построить любые простые фигуры, однако чаще используются инструменты «Овал» и «Прямоугольник». Нарисуем овал и окружность ( рис.13, 14 ):  Выбираем инстру мент «Овал»;  Цвет линии границы фигуры голубой;  Цвет заливки овала синий (рис.11) . Рис.11. Инструмент «Овал» и его характеристики Обратим внимание на свойства овала (рис.12):  Цвета линии границы и зал ивки овала совпадают с выбранными на панели инструментов;  Толщина линии границы овала 2;  Вид линии Solid . Рис.12. Свойства овала Получившийся овал (рис.13): Рис.13. Овал  Чтобы получит ь окружность, необходимо во время рисования овала удерживать клавишу « Shift ( рис.14 ) : Рис.14. Окружность 7 Нари суем прямоугольник и квадрат (рис.16, 17):  Выбираем инструмент «Прямоугольник»;  Цвет линии границы фигуры чёрный;  Цвет заливки овала зелёный (рис.15). Рис.15. Инструмент «Прямоугольник» и его характеристики  Чтобы пол учить квадрат, необходимо во время рисования прямоугольника удерживать клавишу « Shift ( рис.17 ) : Рис.16. Прямоугольник Рис.17. Кв адрат Если не обходимо нарисовать фигуру, не имеющую границы, то при выборе цвета линии границы фигуры надо выбрать «без границы» (рис.18). Тогда фигура получается только с выбранной заливкой (рис.19). Рис.18. Рисование фигуры «без границы» Рис.19. Фигура без границы При конструировании сложных фигур возможно объединение одноцветных фигур и вырезание с помощью разноцветных фигур. Если мы наложим друг на друга две или более одноцветные фигуры, то они становятся одним целым (рис. 20) , т.е. после снятия выделения мы больше не сможем их разъединить. Рис.20. Получение фигуры с помощью объединения 8 Если же часть фигуры надо вырезать, то используем для этого фигу ру другого цвета. Например, в прямоугольнике надо получить вырез круглой формы (рис.21):  Рисуем круг другого цвета;  Накладываем круг на прямоугольник;  Снимаем выделение (щёлкаем по пустой части рабочей области);  Выделяем и убираем круг получаем вырез, т еперь круг при ненадобности можно удалить. Рис.21. Получение выреза 2. Создание анимации движения Рассмотрим простую анимацию по прямолинейной траектории. Пускай двигающимся тел ом будет круг. Последовательность действий:  Нарисуем круг (рис.22); Рис.22. Круг  Обратимся к временной шкале. По первому кадру щёлкнем правой кнопкой и в контекстном меню выберем строку Create Motion Tween (рис.23) . После нажатия на эту строку наш круг выделился синей рамкой с обозначением центра фигуры (рис.24). Рис.23. Create Motion Tween 9 Рис.24. Выделенный круг  Выберем, н апример, 30 - ый кадр. Щёлкаем по нему правой кнопкой и выберем «Вставить ключевой кадр» (рис.25). В кадре 30 появился значок созданного кадра. При этом 1 - ый и 30 - ый кадр соединяются стрелкой на сиреневом фоне, что означает движение круга (рис.26). Рис.25 . Вставка ключевого кадра Рис.26. Движение круга на временной шкале  Рассмотрим ползунок на временной шкале (рис.26) он в данном случае установлен на кадре 30. Кадр 30 чёрный, т.е. он выделен. Выделить любой кадр можно щелчком мыши, при этом ползу нок автоматически переходит на выбранный кадр. После выделения кадра 30 передвигаем круг в то положение, до которого он будет двигаться (рис.27). Рис.27. Крайнее положение круга 10 Если подвигать ползунок на временной ш кале, то можно увидеть движение круга.  Протестировать свой фильм можно, выбрав в меню «Управление» - Тест фильма (рис.28) Рис.28. Тест фильма  Сохраняется фильм с помощью меню «Файл» - Создать Экспортировать фильм (рис.29). Рис.29. Экспорт фильма Вводим имя файла (Движение круга) выбираем папку Сохранить (рис.30). Рис.30. Сохранение фильма 11 С параметрами вывода (рис.31) соглашаемся ОК. Рис.31. Параметры фильма Сохранённый файл имеет расш ирение SWF , выделяется буквой « f » (рис.32) и воспроизводится с помощью специализированного плеера Macromedia Flash Player (рис.33) , который устанавливается совместно с программой Macromedia Flash . При воспроизведении созданных фильмов на школьных компьюте рах можно установить только плеер. Рис. 32. Сохранённый файл Рис.33. Macromedia Flash Player 12 3 . Создание покадровой анимации Рассмотрим создание покадровой анимации. При покадровой анимации необходимо редактирование каждого кадра. Я разберу при мер создания фильма о прыгающем кубике. Нарисуем картину первого кадра (рис.34). Рис.34. Первый кадр Щёлкаем правой кнопкой по кадру 2, из контекстного меню выбираем «Вставить ключевой кадр» (рис.35). В кадре 2 мы видим значок созданного кадра (рис.36) . Рис.35. Вставка ключевого кадра Рис.36. Кад р 2 создан Теперь надо выделить кубик и передвинуть его в следующее положение (рис.37). Аналогично посту паем со следующими кадрами (рис.38 - 39 ). 13 Рис.37. Кадр 2 Рис.38. К адр 3 Рис.39. Кадр 11 Далее кубик вернётся на место, т.е. проделает обратный путь (рис.40). 14 Рис.40. Кадр 21 Рис.41. Проект и фильм Сохранение фильма описано выше. Проект при необходимости также можно сохранить. Сохранённый проект выделяется буквой « f », как и готовый фильм, но имеет для отличия фон красного цвета (рис.42). 4 . Создание траектории движения Создадим объект, который будет двигаться по заданной траектории (рис.42). Рис.42 . Объект создан Рис.43. Слой 1 До сих пор нам приходилось работать в одном слое, на это можно было обратить внимание по временной шкале ( Layer 1 Слой 1) (рис.43). Переименуем « Layer 1 » в «Объект». Для этого два раза щёлкнем по названию « Layer 1 , он выделяется синим цветом (рис.44), что 15 говорит о том, что теперь можно написать своё название данного слоя. Записываем «Объект» (рис.45). Рис.44. Выделение названия слоя Рис.4 5 . Переименование слоя С объектом проделаем те же операции, что и с кругом в п.1, заставив двигаться его по прямой линии (рис.46). Рис.46. Движение объекта по прямой Для задания траектории движения нам нужен специальный слой направляющая движения. Для создания слоя направляющей движения щёлкнем правой кнопкой по слою «Объект». В появившемся контекстном меню выберем «Добавить направляющую движения». Мы увидим, что появился новый слой направляющей движения (рис.47). Рис.47 . Слой направляющей движения Щёлкнув по вновь созданному слою, мы начинаем работу по созданию в этом слое направляющей движения. С помощью карандаша или пера рисуем направляющую, при этом объект автоматически перескакивает на созданную линию (рис. 48). Пе редвинем ползунок временной шкалы на первый кадр и перетащим наш объект на начало направляющей (рис.49). Теперь передвинем ползунок на последний кадр, перетаскиваем объект на конец направляющей (рис.50). Сохраняем фильм и при необходимости проект. При нео бходимости ориентировать объект по направляющей проделаем следующие действия:  Щёлкнем по первому кадру слоя «Объект»;  На панели свойств объекта выставим галочку «Ориентация по пути» (рис.51). В этом случае объект совершает движение с ориентацией по пути (р ис.52). 16 Рис.48. Направляющая создана Рис.49. Установка объекта на начало направляющей Рис.5 0. Установка объекта на конец направляющей Рис.51. Ориентация объекта по пути 17 Рис.52. Движение с ориентацией по пути 5 . Анимация формы Рассмотрим анимацию формы плавное превращение одной фигуры в другую. Нарисуем круг в первом кадре (рис.53). В 25 - м кадре круг удалим и нарисуем квадрат другого цвета (рис.54). Вернёмся на первый кадр и выделим его (рис.55). Рис.53. Круг Рис.54. Квадрат Рис.55. 1 - ый кадр На панели свойств объекта включим анимацию формы Shape ( рис.56 ) . Рис.56. « Shape Рис.57. Анимация формы 18 Появилась стрелка на светло - зелёном фоне, означающая анимацию формы. При передвижении ползунка на временной шкале мы увидим плавное преобразование од ной фигуры в другую (рис.57). Сохраняем фильм и при необходимости проект. 6. Работа с текстом Для создани я текстового блока служит инструмент Т екст» (рис.2). Выделив этот инструмент, растягиваем рамку для текста в рабочей области (рис.58). Рис.58. Рамка для текста. Напишем, например, «Работа с текстом» (рис.59). Выделив инструмент «Указатель», щёлкаем по текстовому блоку, теперь у него появилась голубая рамка. Далее мы можем переместить текстовый блок в любое место рабочей области. Для этого навод им указатель на текст, нажимаем левую кнопку мыши и, не отпуская её, перетаскиваем текстовый блок. Обратим внимание на свойства текста (рис.59). Здесь можно поменять шрифт, его размер, вид и цвет. Рис.59. Свойства текста Поменяем цвет шрифта:  Нажима ем кнопку выбора цвета (рис.60);  Выбираем цвет. Текст меняется (рис.61). Рис.60. Палитра выбора цвета шрифта 19 Рис.61. Смена цвета текста Для того, чтобы получить возможность заливки своим цветом каждой буквы, необходимо выделить текст (голубая рамка ), войти в меню «Изменение» и выбрать «Разбить на части» (рис.62). Текст разбивается на отдельные блоки (рис.63). Рис.62. Разбить на части Рис.63. Текст разбит Выделяя отдельные буквы, мы мож ем залить их разными цветами (рис.64). Рис.64. Заливка цветом отдельных букв 7. Анимация текста Напишем, например, «Анимация текста» (рис.65): Рис.65. Текст 20 Чтобы буквы появлялись в нашей работе друг за другом, надо разбить надпись на части (р ис.66): Рис.66. Текст разбит на части В нашем тексте 14 букв. Первый кадр должен остаться пустым, следовательно, всего кадров получаем 15. Нажимаем клавишу F 6 , на временной шкале появился кадр 2 (рис.67.1). Аналогично создаём 15 кадров (рис.67.2). 1 2 Рис.67. Ключевые кадры В кадре 15 должна быть вся надпись ( рис.68 ). В кадре 14 удаляем последнюю букву текста ( рис.69 ): выделяем её и нажимаем кнопку « Delete на клавиатуре. Рис.68 . Кадр 15 Рис.69 . Кадр 14 На кадре 13 удаляем две последние буквы (рис.70). На кадре 12 удаляем три последние буквы. Действуя аналогичным способом (будьте в нимательнее!), доходим до кадров 2 и 1 (рис.71). На кадре 1 текста нет. Передвигая ползунок по временной диаграмме, можно увидеть появление букв. Рис.70. Кадр 13 21 Рис.71. Кадры 2 и 1 Сохраняем ф ильм и при необходимости проект. 8. Создание интерактивного пособия «Поляризация диэлектриков» Рассмотрим создание интерактивного пособия по теме «Электростатика» для 10 класса «Поляризация диэлектриков». Создание пособия начнём с выбора фона рабочей об ласти. Для этого открываем программу, щёлкаем по рабочей области правой кнопкой, выбираем «Свойства документа» (рис.72). Открывается окно свойств (рис.73). Нажав на кнопку «Фон», выбираем цвет фона. Далее «ОК» (рис.74). Рис.72. Свойства документа Рис.73. Выбор цвета фона Рис.74. Цвет выбран 22 Подписываем рабочую область: «Поляризация диэлектриков» (рис.75). Рис.75. Названи е пособия Полученный слой переименовываем в «Фон» (рис.76). Рис.76. Слой «Фон» Нажав кнопку «Вставить слой», получаем слой 2, переименовываем его в «Пластины» (рис.77). Рис.77. Слой «Пластины» В слое «Пластины» нарисуем пластины конденсатора (рис.78). Рис.78. Пластины конденсатора Для более точной привязки линий и фигур можно включить сетку: щёлкаем по рабочей области правой кнопкой, выбираем «Сетка» - «Показать сетку» ( рис.79). Для снятия сетки надо выполнить точно такое же действие. Рис.79. Включение сетки на рабочей области 23 Добавим слой «Диполь 1» (рис.80). В этом слое нарисуем диполь (рис.81) . Для более аккуратного выполнения диполя масштаб увеличен до 400%. Рис.80. Слой «Диполь 1» Рис.81. Рисунок диполя Выделяем нарисованный диполь с помощью указателя и в меню «Изменение» находим строку «Преобразование в значок» (рис.82). Выходит таблица конвертирования в символ. Символ это элемент, который помещает ся в библиотеку проекта. Его можно вставить в любой слой неограниченное число раз. Вводим имя символа «Диполь», преобразуем его в графический объект, далее «ОК» (рис.83). Рис.82. Преобразование в значок Рис.83. Пр еобразование в графический объект 24 Символ « Диполь появился в библиотеке проекта (рис.84). Выделив диполь в рабочей области, можно заметить, что он выделяется полностью, т.е. как цельный объект (рис.85). Ри с.84. Символ в библиотеке Рис.85. Выделение символа в рабочей области Размещённый в слое «Диполь 1» графический объект помещаем в произвольную точку рабочей области (рис.86). Рис.86. Символ в слое «Диполь 1» Аналогично создаём слой «Диполь 2. Перетаскиванием из библиотеки помещаем на этот слой символ «Диполь» (рис.87). В каждом слое необходим свой диполь, т.к. все они будут двигаться независимо (рис.88). Рис.87. Перетаскивание символа 25 Рис.88. Символ «Диполь» в слое «Диполь 2» Создадим слой «Диполь 3» и поместим на него символ «Диполь». До включения электрического поля диполи (молекулы) должны совершать колебательное движение около своего по ложения равновесия. Выделим слой «Диполь 1» и создадим в нём 10 ключевых кадров (создание ключевого кадра F 6 ) (рис.89). Рис.89. Созданы ключевые кадры в слое «Диполь 1» Для создания эффекта колебания диполя надо в каждом кадре немного смещать его по ложение относительно предыдущего кадра (рис.90). Рис.90. Кадры 8 и 9 26 Те же действия проводим со слоями «Диполь 2» и «Диполь 3» (рис.91). Выделим слой «Пластины», в кадре 10 создадим ключевой кадр ( F 6 ), промежуточные кадры создались автоматически. Т у же операцию проводим для слоя «Фон» (рис.92). Рис.91. Ключевые кадры для диполей Рис.92. Ключевые кадры всех слоёв Создадим слой «Заряд» . В кадре 10 данного слоя вставим ключевой кадр и покажем, что пластины под током, т.е. нарисуем «+» и « » (рис.93). Рис.93. Слой «Заряд», кадр 10 Под действием электрического поля диполи начинают разворачиваться. Покажем это:  Выбираем слой «Пластины», вставляем ключевой кадр 60;  Выбираем слой «Фон», вставляем ключевой кадр 60;  Выбираем слой «Диполь 1» , вставляем ключевой кадр 11, вставляем ключевой кадр 60, правой кнопкой по кадру 11 - Create Motion Tween (рис.94 и рис.95), ставим бегунок на кадр 60 и поворачиваем диполь так, как он должен повернуться под дейст вием электрического поля (рис.96); Рис.94. Create Motion Tween Рис.95. Движение задано 27 Рис.96. Диполь развернулся по линии напряжённости  Выбираем слой «Диполь 2» и выполняем все действия для слоя «Диполь 1»;  Выбираем слой «Заряд», вставляем ключе вой кадр 60 (рис.97) ;  На все слои ставим «замок», теперь их нельзя редактировать, снять «замок» можно в любой момент. Рис.97. Диполи развёрнуты Добавим слой «Напряжённость». Создадим ключевой кадр 10. Нарисуем в этом кадре линию напряжённости электрич еского поля. При этом кадры данного слоя до 60 - го включительно создадутся автоматически. Напишем обозначение линии напряжённости «Е» (рис.98). 28 Рис.98. Линия напряжённости электрического поля Добавим слой «Силы». С помощью кнопки F 6 создадим ключевые ка дры с 10 - го по 60 - ый (рис.99). Рис.99. Слой «Силы» В 10 - ом кадре данного слоя нарисуем вектор силы, превратим его в графический символ (рис.82 и рис.83). С библиотеки символ «Сила» можно перенести в любой кадр данного слоя (рис.100). Рис.100. Д обавление символа «Сила» Во всех кадрах слоя «Силы» показываем пару сил, действующую на разворачивающийся диполь. Для удобства можно создать символы «Сила вправо» и «Сила влево» (рис.101). Эти символы значительно уменьшат время редактирования. Кадр 10 по казан на рисунке 102. Аналогичным образом поступаем со всеми кадрами слоя «Силы» с 11 - го по 60 - ый (рис.103 и рис.104). Сохраняем фильм и при необходимости проект. 29 Рис.101. Символы пары сил Рис.102. Кадр 10 Рис.103. Кадр 30 Рис.104. Кадр 60 30 9. Использование кнопки для управления движущимся объектом Рассмотрим применение кнопки для управления движущимся объектом, т.е. для его остановки и продолжения движения. Создадим объект, которым будем управлять. Рассмотрим импортирование готового объекта в библиотеку программы: Файл Импортировать Импортировать в библиотеку (рис.105). Рис.105. Импорт в библиотеку В открывшемся окне выбираем нео бходимый файл (рис.106) Открыть. Рис.106. Выбор файла Файл появляется в библиотеке (рис.107). Теперь этот рисунок надо приготовить для использования в программе. Перетаскиваем его на рабочий стол и задаём нужный размер (рис.108). Далее преобразуем в графический символ (рис.82), (рис.109). Символ появляется в 31 библиотеке (рис.110), а изображение в рабочей области берётся в голубую рамку, это означает, что теперь мы работаем с символом. Рис.107. Изображение в библиотеке Рис.108. Изменение размера изображения Рис.109. Преобразование в графический объект Рис.110. Символ в библиотеке Рис.111. Символ в рабочей област и Размещаем объект в начальной точке траектории (рис.112). Задаём его движение (рис.113): см. главу 2 стр.8. Рис.112. Начальный кадр Рис.113. Конечный кадр 32 Создаём новый слой «Кнопки» (рис.114). Вставить слой рис.77. Рис.114. Слой «Кнопки» Для вставки кнопок в рабочую область выбираем меню «Окно» - Общая библиотека Buttons ( Кнопки ) (рис.115). Рис.115. Buttons В появившемся окне выберем classic buttons ? В открывшемся списке найдем зелёную и красную кнопки (рис.116). Перетаскиваем их в рабочую область слоя «Кнопки» (рис.117). Рис.116. Кнопки Рис.117. Кнопки в рабочей области 33 Для работы кнопок их необходимо запрограммироват ь. По нажатию зелёной кнопки автомобиль будет двигаться, по нажатию красной останавливаться. Выберем зелёную кнопку в рабочей области ( рис.118 ) . Рис.118. Выбор зелёной кнопки Откроем панель Actions ( рис .119 ) . Global Functions Movie Clip Control o n release . Далее Timeline Control play (рис.120). Должна получиться программа: on (release) { play(); } Рис. 119. Панель Actions Рис.120. Программа для зелёной кнопки Для красной кнопки (рис.121): on (release) { stop (); } Сохраняем фильм и при необходимости проект. 34 Рис.121. Программа для красной кнопки 10. Создание кнопки с подсказкой В программе Macromedia Flash можно не только использовать кнопки, входящие в библиотеку, но и создавать произвольные кнопки самостоятельно. Рассмотрим, напри мер, создание кнопки с текстовой подсказкой. Нарисуем резистор (рис.122). Рис.122 . Резистор Преобразуем его в графический символ (рис.82), только на этот раз выберем «Кнопка» (рис.123). Рис.123. Преобразование в кнопку В библиотеке появился резистор, преобразованный в кнопку (рис.124). Рис.124. Кнопка в библиотеке 35 Дважды щёлкаем по изображению резистора в рабочей области и входим в режим редактирования кнопки (рис.125). Рис. 125. Режим редактирования кнопки Здесь: Up обычное состояние кнопки Over состояние кнопки по наведению курсора Down состояние кнопки по её нажатию. В данном случае нас интересует состояние кнопки по наведению курсора ( Over ). Вс тавляем ключевой кадр (рис.126). Рис.126. Over вставка ключевого кадра Теперь на этом кадре редактируем резистор таким образом, как он должен выглядеть по наведению на него курсора (рис.127) . Рис.127. Подсказка 36 Для перехода в рабочую область достаточно нажать Scene 1 ( рис.127). Сохраняем фильм и при необходимости проект. По данной схеме составлено, например, пособие «Светофор» (рис.128). В кнопки преобразованы три его сигнала, по наведению на плафон он загорается своим цветом и появляется поясняющая текстовая подсказка [1] . Рис.128. Светофор 11. Орбитальное движение фигур Орбитальное движение я рассмотрю на примере создания модели атома водорода. Как известно, водород имеет первый порядковый номер в таблице М енделеева, т.е. вокруг ядра вращается 1 электрон, в ядре (А=1, Z =1 ) 1 протон. Рисуем протон (слой 1), все неподвижные обозначения и надписи можно поместить на этот слой (рис.129). Рис.129. Протон 37 Во втором слое рисуем электрон и преобразуем его в гра фический символ (рис.130). Рис.130. Электрон в слое 2 Для электрона создадим направляющую движения (рис.47). Направляющая окружность, выравниваем её относительно протона (рис.131). Теперь инструментом «Ластик» (рис.2) делаем минимальный разрыв в направляющей движения (рис.132). Рис.131. Направляющая движения 38 Рис.132. Разрыв в направляющей Задаём движение для электрона (рис.23). При этом электрон автоматически перейдёт на направляющую движения. Нам надо точно выставить его на начало траектории (кадр 1) (рис.133). Рис.133. Электрон в начале траектории Вставляем ключевые кадры для всех слоёв. Помещаем электрон на конец траектории (рис.134). Рис.134. Электрон в конце траектории (кадр 40) Сохраняем фильм и при необходимости проект . Аналогично строятся модели атомов гелия и лития (рис.135). 39 Рис.135. Строение атома лития 1 2 . Создание пособия, содержащего вкладки Рассмотрим создание пособия, которое содержит вложенную информацию. Такое пособие удобно тем, что можно изучать как вс ю его информацию, так и то, что необходимо ученику. Тема пособия «Конденсаторы» (физика, 10 класс). Пособие будет содержать вкладки:  Определение;  Электроёмкость;  Энергия;  Соединение;  Типы;  Применение. Выбираем фон документа (рис.72 - 74). В слое 1 нарисуе м прямоугольник (рис.136). Рис.136. Слой 1 40 Создадим слой «Кнопки» (рис.137). Рис.137. Слой «Кнопки» Нарисуем в данном слое тре угольник (рис.138) и превратим его в кнопку (рис.123). Кнопка появляется в библиотеке (рис.139). Рис.138. Прямоугольник Рис.139. Кнопка Размещаем кнопки по числу вкладок в рабочей области (рис.140). Рис.140. Кнопки размещены Создадим слой «Вкладки». В нём создадим 7 ключевых кадров (6 кнопок + 1) (рис.141), вставим ключевые кадры №7 в слои «Кнопки» и «Слой 1» (рис.142). Рис.141. Ключевые кадры Рис.142. Ключевые кадры в слое «Вк ладки» во всех слоях 41 Все кадры слоя «Вкладки» подписываем: 1 - ый «Конденсаторы» (название пособия) (рис.143). 2 - ой «Определение», 3 - ий «Электроёмкость» и т.д. Рис.143. Кадр 1 слоя «Вкладки» Входим в реж им редактирования кнопки. Для этого щёлкаем два раза по любой из кнопок. Напомню:  Up обычное состояние кнопки  Over состояние кнопки по наведению курсора  Down состояние кнопки по её нажатию. Кадр Up не трогаем. Создаём ключевой кадр в состоянии Over и редактируем кнопку (рис.144). Редактируем состояние Down (рис.145). Рис.144. С остояние кнопки по наведению Рис.145. Состояние кнопки по курсора её нажатию Переходим в рабочую область - нажимаем Scene 1 (рис.145 ). Выбираем первый кадр слоя «Вкладки» . В панели Actions находим Stop , щёлкаем два раза у нас появилась программа для данного кадра (рис.146). 42 Рис.146. Программа для 1 - го кадра Рядом с кнопками напишем название вкладок (в слое 1) (рис.147). Рис.147. Название вкладок Выделяем кнопку «Определение» (рис.148) и открываем панель Actions . Набираем программу, которая позволит при нажатии данной к нопки перейти на кадр 2. Рис.148. Программа для кнопки «Определение» Аналогичным образом составляем программу для кнопки «Электроёмкость» (рис.149). Только теперь надо перейти на кадр 3. 43 Рис.149. Программа для кнопки «Электроёмкость» Те же действ ия проводим для всех остальных кнопок, следя за тем , ч тобы название кнопки совпадало с названием вкладки (рис.150). Рис.150. Программа для кнопки «Энергия» Протестировать работу кнопок можно, обратившись к меню «Управление» - Тест фильма (рис.151). Р ис.151. Тест фильма В слой «Кнопки» добавим ещё одну кнопку из библиотеки, а в «Слое 1» - нарисуем условное обозначение конденсатора (рис.152), эту кнопку привяжем к возвращению на кадр 1 («Конденсаторы») (рис.153) . 44 Рис.152. Кнопка возвращения на г лавную страницу Рис.153. Программа для кнопки возвращения Теперь на слои «Кнопки» и «Слой 1» можно поставить замок. Редактируем кадры слоя «Вкладки», т.е . заполняем их соответствующей информацией (рис.154). Рис.154. Кадр 2 слоя «Вкладки» 45 Сохраняем фильм и при необходимости проект. Пособие «Конденсаторы» будет полезным при объяснении одноимённой темы (рис.155). Рис.155. Пособие «Конденсаторы» 13. Вставка звука в проект Как «озвучить» создаваемое пособие, я покажу на примере «Забивание гвоздя» (рис.156). Рис.156. «Забивание гвоздя» 46 В проекте три слоя «Доска», «Молоток» и «Гвоздь». Доска статична. Молоток совершает удары по гвоздю. Начальное положение рисунок 156. До кадра 10 молоток опускается, до кадра 15 поднимается, до кадра 21 п однимается и т.д. Гвоздь после каждого удара немного входит в доску: кадры 11 - 13, 22 - 24, 35 - 37 и 49 - 51. Неубедительным при показе данного примера является отсутствие звука. Поэтому надо записать или найти на дисках звук удара (в формате WAV или mp 3 ) . Посл е этого импортировать звук в библиотеку. Для этого входим в меню «Файл» - Импортировать Импортировать в библиотеку (рис.105). Находим звуковой файл (рис.157) Открыть. Рис.157. Импорт звукового файла Файл появляется в библиотеке (рис.158). Рис.158. Звуковой файл в библиотеке Рис.159. Слой «Звук» Создаём ещё один слой «Звук» (рис.159). В кадре 10 молоток ударяет по гвоздю в слое «Звук» создаём ключевой кадр (рис.160). Теперь перетаскиваем звук в рабочую область (рис.161). Звук отобразится на временной шкале, начиная с выбранного кадра (рис. 162 ) . Аналогичные действия производим для всех ударов молотка (рис.163). 47 Рис.160. Ключевой кадр в слое «Звук» Ри с.161. Перетаскивание звука Рис.162. Звук на временной шкале Рис.163. Звук вставлен Сохраняем фильм и при необходимости проект. Т.к. все готовые пособия проигрываются бесконечно, в данном случае целесообразнее остановить проигрывание на последнем кадре. Для этого ползунок передвигаем на последний кадр (рис.163). Открываем панель Actions и выбираем Stop (рис.164) . Теперь фильм остановится на последнем кадре. Во время проигрывания возобновить показ можно, выбрав меню « Control - Play ( Ctrl + Enter на клавиатуре ) (рис.165). 48 Рис.164. Программа для последнего кадра Рис.165. Возобновление проигрывания 14 . Перетаскивание объекта в заданную область Программа Macromedia Flash позволяет реализовать такой тип заданий, как сравнение определённо й области с каким либо объектом. Например, нам необходимо проверить усвоение учениками букв физических величин. Создадим данное пособие. В слое «Фон» напишем задание, вставим прямоугольники и подпишем их (рис.166). В слое «Буквы» напишем буквы, обозначающ ие данные физические величины (рис.167). Выделяем букву t и преобразуем её в символ (рис.82). Только теперь надо выбрать «Клип» (рис.168). Это действие проделываем со всеми буквами. В библиотеке появляются все клипы (рис.169). Выбираем первую букву, открыв аем панель Actions и набираем программу для данного клипа (рис.170). Копируем программу, выделяем следующую букву и вставляем для неё ту же программу. Повторяем действие для всех клипов. Сохраняем фильм и при необходимости проект. Мы получили в своё распо ряжение интерактивный тест для проверки знания физических величин в 7 классе. 49 Рис.166. Слой «Фон» Рис.167. Буквы 50 Рис.168. Преобразование буквы в символ Рис.169. Клипы в библиотеке Рис.170. Программа для клипа t 51 15 . Импорт видео во Flash Видео для импорта в программу Macromedia Flash должно иметь формат avi , mpg [2] или flv (флэш - видео). Если устройство видеозаписи не поддерживает данные форматы, то надо воспользоваться видеоконвертером. Например Any Video Converter : про стой и функциональный конвертер, позволяющий перекодировать видео в любой из самых распространённых форматов (рис.171). Рис.171. Any Video Converter Рассмотрим добавление видео в формате flv «Почему человек выживает» . Меню «Файл» - Импортировать Им портировать видео (рис.172). Рис.172. Импорт видео 52 Находим нужный файл Открыть (рис.173). Рис.173. Выбор видеофайла Программа предлагает импортировать видео двумя способами:  С открытием на временной шкале;  С использованием встроенного видеоплеер а (рис.174). Рис.174. Импорт с видеоплеером Мы можем произвольно изменить размеры экрана так, как это делается с фигурами (рис.175). Сохраняем фильм и при необходимости проект. 53 Рис.175. Плеер с видео в рабочей области Если мы импортируем фильм с о ткрытием на временной шкале, то, при создании дополнительных слоёв, можно добавлять на рабочую область дополнительные рисунки, текст, анимировать их и т.п. (рис.176). Рис.176. Видео на временной шкале Сохраняем фильм и при необходимости проект. При сох ранении мы увидим окно Exporting Flash Movie ( рис.177 ) , которое информирует нас о ходе сохранения. 54 Рис .177. Окно Exporting Flash Movie Такое сохранение позволяет использовать получившийся файл самостоятельно . В данном случае исходное видео имело разме р 92,3МБ, а обработанное 6,49МБ. Сохранение же с плеером нуждается в дополнительных файлах (рис.178): Рис.178. Файлы для воспроизведения с плеером  Почему человек выживает pleer файл воспроизведения;  ArctikOverAll файл скинса плеера;  Почему челов ек выживает видео в формате flv . Вывод данное действие нецелесообразно при наличии на ПК плееров и кодеков для воспроизведения данного видео. Заключение Программа Macromedia Flash значительно расширяет возможности учителя по подготовке различных по собий для уроков и внеклассных мероприятий . В данной работе я обобщил свой опыт подготовки различных материалов для уроков с помощью Macromedia Flash . Рассмотрены базовые возможности, однако их, при учительской фантазии, хватит для создания самых разнообра зных пособий по любому предмету. Желаю всем коллегам творческих успехов и удачи! 55 Литература: 1. Горностаева А.М. Диалог с компьютером. М.: Глобус, 2008, - 120с. 2. Соловьёва Л.Ф. Компьютерные технологии для преподавателя / Л.Ф. Соловьёва. С анкт - Петербург: БХВ - Петербург, 2008. 453с.

Предварительный просмотр файла не поддерживается. Скачайте его и откройте на компьютере.

Приложенные файлы

  • pdf Macromedia Flash
    Использование программы Macromedia Flash для подготовки интерактивных пособий
    Размер файла: 3 MB Загрузок: 3
  • txt Macromedia Flash na lichnom saite
    Ссылка на материал на личном сайте
    Размер файла: 69 B Загрузок: 4