Методическая разработка занятия

«Создание Flash анимации в Macromedia Flash»

Объединение «Компьютерная графика и анимация»

Управляющее меню

Рабочая область

Панель временной диаграммы

Слои

рограммный продукт Macromedia Flash предназначен для создания мультимедийных компонентов Web -страниц. Он предлагает средства для реализации интерактивной работы с этими компонентами, дополняя Web -сайт потоковым звуком в формате MP 3.

С

Панель свойств

Плавающие панели

Панель инструментов

Его помощью также можно создавать анимированные изображения различного типа - от простейших "живых" кнопок до сложных мультипликаций. Так же, как и в ImageReady, анимация создается путем изменения содержания последовательности кадров. Поддерживаются многослойные изображения, можно задавать перемещение объекта, его вращение, изменение формы, размера, цвета, прозрачности, причем эти изменения могут выполняться как по отдельности, так и одновременно друг с другом. Занятия знакомства с компьютерной графикой я провожу на примере Macromedia Flash, в который легко импортировать фото и рисунки растровой графики.

На первом этапе занятия построены таким же образом, как и в простом графическом редакторе PAINT. Учащиеся изучают инструменты и выполняют примеры рисования, копирования и искажения, поворота и отражения, увеличения размеров и конструирования из простых графических компонентов более сложных фигур.

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

Последующий этап оживить персонажи на экране компьютера. Я написала для ребят урок-презентацию с подробной инструкцией - получилось здорово. Теперь в объединении все ребята умеют создавать мультики, даже те, которые и вовсе не умеют рисовать. К 7-му классу у ребят уже сформированы навыки работы в растровом редакторе (так как изучат информатику со 2-го класса). Это дает возможность и время овладеть учащимся не только навыками работы в векторном редакторе, предусмотренном программой, но и освоить простейшие, встроенные методы анимации.

Разработка данного занятия относится к закреплению навыков метода покадровой анимации Motion Tweening, движение по заданной траектории. Создание изображений несколькими слоями.

План – конспект занятия «Создание анимации по сказке «Зайчик»

Цель занятия : закрепить метод покадровой анимации Motion Tweening, движение по заданной траектории, создание изображений несколькими слоями, создать анимацию по сказке «Зайчик».

Развить любовь к отечественным мультфильмам, к отечественным героям.

Задачи :

а) образовательные: закрепить понятия покадровой анимации, трансформации объектов, направляющий слой, возможности компьютерных технологий при создании анимации.

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

в) воспитательные: воспитание эстетических взглядов.

Тип занятия : закрепление материала.

Форма проведения занятия : игра.

Возраст учащихся : 6-8 классы (дополнительное образование - объединение «Информатика»)

Методы: беседа-объяснение.

Оборудование: Компьютерный класс, файлы изображений, программа Macromedia Flash 8.

Ход занятия.

1 Организационный момент. Краткое повторение этапов создания анимации- 20 мин.

2 Разбор и обсуждение сценария сказки «Зайчик» – 5 мин.

3 Создание анимированной сказки в программе Macromedia Flash по заданному алгоритму- 20 мин.

4 Физкультминутка3 мин.

5 Подведение итогов урока - 10 мин.

6. Выставление оценок по результатам работы. – 2 мин

1 Организационный момент. Краткое повторение этапов создания анимации – 20 мин

Занятие начинается с демонстрации мультфильма «Зайчик ».

Тема нашего занятия , возможно, вы уже догадались: «Создание анимации по сказке «Зайчик» эта сказка всем вам знакома как считалочка.

Цель занятия : закрепить метод покадровой анимации, движение по заданной траектории, создание изображений несколькими слоями, создать анимацию по сказке «Зайчик».

Давайте еще раз рассмотрим возможности программы Macromedia Flash, вспомним основные моменты работы с ней.

Вопросы : Что такое покадровая анимация? Как в Macromedia Flash запустить ролик на исполнение?

Опишите суть анимации трансформации объектов?

Какие слои называются направляющими слоями?

Ответы : Покадровая анимация . Это анимация, созданная по традиционному варианту. Вручную создаётся серия изображений, которые сменяют друг друга, и за счёт этого создаётся эффект движения. Такая анимация используется часто, но имеет несколько недостатков. Кроме кропотливости работы, получаемые файлы зачастую имеют большой объём.

Для запуска ролика на демонстрацию используется клавиша Enter

Анимация трансформации объектов (tweening animation). Суть такой анимации в следующем: создаются лишь начальный и конечный кадры. Кроме того, указывается, какое действие должен совершить объект, чтобы из начального положения попасть в конечное. Возможны варианты:

Движение объекта (motion tweening). То есть объект перемещается из одной точки в другую. При этом он может менять размеры, поворачиваться и т.д. Возможно движение объекта по заданной траектории.

Трансформация формы (shape tweening). То есть форма объекта плавно переходит из одной стадии в другую.

На мои вопросы вы ответили верно, молодцы!

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

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

В нашей студии я буду выступать в роли продюсера и сценариста, а вы будете юными аниматорами.

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

Давайте назовём основные моменты сказки и тем самым мы разобьем мультфильм на отдельные сцены.

Учащиеся предполагают, отвечают

Педагог подводит итог

Сейчас каждому из вас достанется задание: «Создать анимацию определенной сцены действия наших героев сказки» На это у вас всего 20 минут. А на следующем занятии вы научитесь накладывать звук на анимацию и титры к сказке.

2 Давайте познакомимся со сценарием . - 5 мин . (Учащиеся знакомятся с полученными сценариями и закрепляют навыки создания анимации по алгоритму.)

3. Учащиеся начинают практически повторять этапы построения фильма .- 20 мин.

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

4. После 10 минут работ занятие прерывается на физкульпаузу - 3 мин.

В начале снова выполняем комплекс упражнений для глаз. Посмотреть на переносицу и задержать взор на счет 1-4. До усталости глаза не доводить. Затем открыть глаза, посмотреть вдаль на счет 1-6. Повторить 4-5 раз.

Упражнение для пальцев выполняем, используя гимнастику для рук из диска «В мире информатики», так как учащимся очень нравятся эти упражнения и считалки.

5 Подведение итогов и демонстрация работ. – 10 мин. Учащиеся комментируют демонстрируемый ролик, рассказывают, какие приемы и инструменты были использованы при создании анимационного фильма.

Итог урока: - Итак, мы с вами убедились, что MACROMEDIA FLASH – удобное и несложное средство для создания анимационных фильмов. В чем была основная сложность выполнения работы?

Ответ учащихся: В работе со слоями. Требуется кропотливая работа и концентрация внимания. Легко допустить ошибку. Надо постоянно помнить о блокировке неиспользуемых слоев.

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

6. Выставление оценок по результатам работы. – 2 мин.

Литература:

1. Стрелкова Л.М. Flash MX. Первые шаги. – М.: Интеллект –Центр, 2004, 80 с.
2. Macromedia Flash: Материалы к урокам/ В.А.Попов. – М.:ООО «Чистые пруды», 2005. – 32с.: ил. (Библиотечка «Первого сентября», серия «Информатика»
3. Ермолаева Т.В. Создание анимации в программе Flash 5/ - Фестиваль педагогических идей «Открытый урок» 2004-2005 учебного года

Сценарий алгоритма создания анимации «Зайчик»

Сцена

«Раз, два, три, четыре, пять

Вышел зайчик погулять,

Свежей травки пощипать»

Импортировать в библиотеку рисунки «Фон1» и «Зайчик».

Переименовать слой 1 в Фон1

Перетащить из библиотеки «Фон» на рабочую область.

Инфо

Создать слой «Зайчик».

Применить трансформацию объекта (Ctrl +T вкладка «Инфо

Применить команду по отдельности, щелчок правой кнопки мышипо объекту«Зайчик»

Удалить белый фон у объекта «Зайчик» с помощью инструмента «Волшебная палочка», выделенный фон удалить кнопкой Delete на клавиатуре.

В 1 кадре слоя «Зайчик»

Применить к объекту «Зайчик» Свободную трансформацию (Q )

Создать направляющий слой и нарисовать траекторию движения инструментом «Карандаш».

«Указателем» выделить объект, перетянуть его в первом кадре, слоя Зайчик на начало траектории движения.

Переместить объект Зайчик в слое Зайчик на конец траектории.

Просмотреть анимацию (Enter )

Сцена.

«Вдруг охотник выбегает

Прямо в зайчика стреляет»

Импортировать в библиотеку рисунки «Фон1», «Зайчик», «Охотник»

Переименовать слой 1 в «Фон1»

Перетащить из библиотеки «Фон1» на рабочую область.

Применить трансформацию объекта «Фон1» (Ctrl +T вкладка «Инфо ») и уменьшить до размеров рабочей области 550х400.

Создать слой «Зайчик».

Перетащить из библиотеки «Зайчик» на рабочую область.

Применить трансформацию объекта (Ctrl +T вкладка «Инфо ») и уменьшить Зайчика до нужного размера 120х120.

Применить команду по отдельности, щелчок правой кнопки мышипо объектуЗайчик

Удалить белый фон у объекта «Зайчик»с помощью инструмента «Волшебная палочка», выделенный фон удалить кнопкой Delete на клавиатуре.

Создать слой «Охотник».

Применить трансформацию объекта (Ctrl +T вкладка «Инфо

В 1 кадре слоя «Охотник» Создать промежуточное отображение , щелчок правой кнопки мыши по 1 кадру.

Применить к объекту «Охотник» Свободную трансформацию (Q ) и переместить центровой кружочек к ногам «Охотника».

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

«Охотник»

Сделать 60 кадр ключевым (F 6) в направляющем слое, в слое «Охотник», в слое «Зайчик», в слое «Фон1».

Переместить объект «Охотник» в слое «Охотник» на конец траектории.

Просмотреть анимацию (Enter )

Сцена

«Пиф-паф, ой-ёй-ёй,

Умирает зайчик мой»

Создать новую сцену меню Вставка – Сцена

Импортировать в библиотеку рисунки «Фон1», «Зайчик спящий», «Охотник»

Переименовать слой 1 в «Фон1»

Перетащить из библиотеки Фон1 на рабочую область.

Применить трансформацию объекта «Фон1» (Ctrl +T вкладка «Инфо ») и уменьшить до размеров рабочей области 550х400.

Создать слой «Зайчик спящий»

Перетащить из библиотеки «Зайчик спящий» на рабочую область.

Применить трансформацию объекта (Ctrl +T вкладка «Инфо ») и уменьшить Зайчика до нужного размера 120х120.

Применить команду по отдельности, щелчок правой кнопки мышипо объекту«Зайчик спящий»

Удалить белый фон у объекта «Зайчик спящий» с помощью инструмента Волшебная палочка, выделенный фон удалить кнопкой Delete на клавиатуре.

Применить к объекту «Зайчик спящий» Свободную трансформацию (Q ) и переместить центровой кружочек к ножкам Зайчика.

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

Создать направляющий слой у «Зайчик спящий» и нарисовать траекторию движения – падения вниз с пенька - инструментом «Карандаш».

«Указателем» выделить объект, перетянуть его в первом кадре, слоя «Зайчик спящий» на начало траектории движения.

Создать слой «Охотник».

Перетащить из библиотеки «Охотник» на рабочую область.

Применить трансформацию объекта «Охотник» (Ctrl +T вкладка «Инфо ») и изменить размер на 260х300.

Аналогично удалить белый фон у Охотника (См. п.9 и 10).

В 1 кадре слоя «Охотник» Создать промежуточное отображение , щелчок правой кнопки мыши по 1 кадру.

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

«Указателем» выделить объект, перетянуть его в первом кадре, слоя «Охотник» на начало траектории движения.

Сделать 60 кадр ключевым (F 6) в направляющем слое, в слое «Охотник», в слое «Зайчик спящий», в слое «Фон».

Переместить объект «Зайчик спящий» в слое «Зайчик спящий» на конец траектории.

Переместить объект «Охотник» в слое «Охотник» на конец траектории

Просмотреть анимацию (Enter )

Сцена

«Принесли его домой

Оказался он – живой!»

Создать новую сцену меню Вставка – Сцена.

Импортировать в библиотеку рисунки «Фон2», «Зайчик с шариком», «Девочка»

Переименовать слой 1 в «Фон2»

Перетащить из библиотеки «Фон2» на рабочую область.

Применить трансформацию объекта «Фон1» (Ctrl +T вкладка «Инфо ») и уменьшить до размеров рабочей области 550х400.

Создать слой «Девочка»

Перетащить из библиотеки «Девочка»на рабочую область.

Применить трансформацию объекта «Девочка» (Ctrl +T вкладка «Инфо ») и уменьшить до размеров рабочей области 350х400.

Применить команду по отдельности, щелчок правой кнопки мышипо объекту«Девочка»

Удалить белый фон у объекта «Девочка» с помощью инструмента «Волшебная палочка», выделенный фон удалить кнопкой Delete на клавиатуре и переместить объект «Девочка» в нижнюю часть сцены.

Создать слой «Зайчик с шариком»

Перетащить из библиотеки «Зайчик с шариком» на рабочую область.

Применить трансформацию объекта «Зайчик с шариком» (Ctrl +T вкладка «Инфо ») и уменьшить до размеров рабочей области 200х250.

Применить команду по отдельности, щелчок правой кнопки мышипо объекту«Зайчик с шариком»

Удалить белый фон у объекта «Зайчик с шариком» с помощью инструмента «Волшебная палочка», выделенный фон удалить кнопкой Delete на клавиатуре.

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

Применить к объекту «Зайчик с шариком» Свободную трансформацию (Q ) и переместить центровой кружочек к ножкам Зайчика.

Создать направляющий слой и нарисовать траекторию движения Зайчика инструментом «Карандаш».

«Указателем» выделить объект, перетянуть его в первом кадре, слоя «Зайчик с шариком» на начало траектории движения.

Сделать 60 кадр ключевым (F 6) в направляющем слое, в слое «Зайчик с шариком», в слое «Фон2», в слое «Девочка».

Переместить объект «Зайчик с шариком» в слое «Зайчик с шариком» на конец траектории.

Просмотреть анимацию (Enter )

Посмотреть всю сказку Файл – Открыть (открыть свою папку и найти файл «Сказка Зайчик»)

Зайчик с шариком

Спиридонов Александр, ученик 6 "А" класса МОУ СОШ №6, 2014 г.

Исследовательская работа по теме " Как создать мультфильм в программе Macromedia Flash Professional 8.0

Скачать:

Предварительный просмотр:

Комитет по образованию делам молодёжи, материнства и детства администрации ГО «Город Петровск-Забайкальский»

Муниципальное общеобразовательное учреждение средняя общеобразовательная школа №6

V научно-практическая конференция школьников

города Петровска-Забайкальского

В 2014 году

Секция информационно-компьютерные технологии

Тема доклада:

«Как создать мультфильм

в программе Macromedia Flash Professional 8.0».

МОУ СОШ №6, 6 А класс

Научный руководитель:

Спиридонова Елена Васильевна,

учитель информатики МОУ СОШ №6,

2014 г.

Проблемы:

1. Не хватает знаний о методах создания мультфильмов в программе Macromedia Flash Professional 8.0, знаний о форматах графических файлов.

2. Не хватает знаний о работе с инструментами данной программы, сохранении проектов.

Гипотеза: возможно научиться самостоятельно создавать мультфильмы в программе Macromedia Flash Professional 8.0.

Цели исследовательской работы:

1. Изучить источники информации о программе Macromedia Flash Professional 8.0, инструментах программы и методах работы с ними, о создании мультфильмов в программе Macromedia Flash Professional 8.0, о форматах графических файлов.

2. Используя найденную информацию научиться создавать мультфильмы самостоятельно в программе Macromedia Flash Professional 8.0 и сохранять их.

3. Сделать в программе Macromedia Flash Professional свои мультфильмы.

Описание проекта.

В результате поисковой работы мною была найдена информация, изложенная ниже, а также просмотрены видеоролики в Интернете по созданию мультфильмов в программе Macromedia Flash Professional 8.0 и сохранении их, работе с инструментами программы. Также изучена информация по работе с различными графическими форматами. Адреса сайтов мною указаны в разделе источники информации.

Форматы графических файлов

Все графические форматы делятся на два основных типа: векторные и растровые.

Растровые при увеличении размеров теряют качество.

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

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

Векторные изображения не могут быть созданы путем сканирования или считывания с лазерных дисков. Они создаются с помощью специальных программ: Corel Draw, FreeHand, Adobe Illustrator. В векторной графике изображения строятся с помощью математических описаний объектов (линии, дуги, окружности и т.п.). Файл изображения формируется из дискретных, не связанны между собой элементов изображения, размеры которых могут быть легко изменены вплоть "до бесконечности" без потери качества.

Ниже приведена сводная таблица основных форматов.

Формат	Основное применение	Комментарий
Графические растровые форматы
TIFF	Хранение исходников и другой информации, которая может быть использована для дальнейшей работы, последовательности изображений	Сжимает без потерь качества. Позволяет хранить большие файлы . Могут быть сохранены слои и альфа-каналы!!! (Выделение объекта).
JPEG	Графика для веб (типа фото), файлы предварительного просмотра, в частности, пересылаемые электронной почтой, хранение фотографий не высокой степени важности. Нельзя пересохранять jpg, поскольку при этом теряется качество. Перед сохранением в jpg сохранить исходник в.tiff, .psd или любом веторном формате, если это векторная графика	Потеря качества происходит при каждом сохранении изображения. Если просто 10 раз открыть и сохранить один и тот же файл потери качества будут значительными. Использует фрактальный алгоритм сжатия, следствием чего является «грязь» при сохранении в этом формате изображений с поверхностями, закрашенными одним цветом (для этих изображений использовать.gif или.png), а при сохранении фото потери качества мало заметны.
	Графика для веб (типа векторной), файлы предварительного просмотра, в частности, пересылаемые электронной почтой, если в них использовано ограниченное количество цветов (например, сосканированный текст), последовательности изображений. Нельзя сохранять фотографии в этот формат! Перед конвертацией надо сохранить исходник в.tiff!	Потеря качества происходит только при первом сохранении, когда часть цветов выкидывается (максимальное кол-во цветов 256). Позволяет делать один из цветов прозрачным, но нет полупрозрачных пикселей (если в исходном файле пиксель полупрозрачный, то в.gif к его цвету будет добавлен цвет mate color до достижения непрозрачности). Из-за этого края изображений, в которых используется прозрачность могут быть зубчатыми, а само изображение будет окружено ореолом mate color. При сохранении нужно обращать внимание на градиенты!
	Идеально для последующего использования в Flash и в работе с ыидео. Может использоваться для веб, но вес файла скорее всего будет больше аналогичного.jpg или.gif Желательно сохранение исходника в.tiff	Аналогичен.gif, но число цветов не ограничено, есть полупрозрачные пиксели.
PSD и PSB	Хранение файлов, с которыми предполагается работать в Adobe Photoshop.
	Часто используется для веб, но неэкономичен.
Файлы, используемые в дальнейшем для публикации в интернете, настоятельно рекомендуется называть латиницей
Графические векторные форматы
	Векторный формат CorelDraw. Подходит только для работы в этом редакторе. Не подходит для последующего импорта.	При сохранении файла для печати перевести шрифты в кривые, растровые изображения в RGB, если предполагается печатать цифровым способом и CMYK, если нецифровым.
	Векторный формат CorelDraw. Подходит только для работы в этом редакторе. Не подходит для последующего импорта куда-либо, кроме CorelDraw.
	Формат для последующего импорта файла во Flash
	Распространенный векторный формат, с которым корректно работает большинство программ.
	Файл с описанием страниц на языке PostScript, который может содержать двухмерные векторные изображения, растровые изображения и текст. EPS предназначен для передачи векторов и растра в издательские системы, создается почти всеми программами, работающими с графикой.	Не всегда корректно импортируется в CorelDraw.

Из истории создания.

Программа редактор для разработки видео, анимированных роликов, баннеров и прочих Flash-приложений. Macromedia Flash Professional 8.0 RUS - позволяет создавать веб-сайты с различными интерактивными элементами, материалы для презентации и др. Технологии flash позволяют создавать очень красивую и эффектную графику.
Macromedia Flash Professional 8.0 RUS Key - очень часто применяется дизайнерами, вебмастерами для разработки различных спецэффектов и даже целых сайтов только на технологии flash. В 8 версию были добавлены новые эффекты и средства для создания мультипликации. Также имеется возможность добавления мета-тегов - Description, Title и др. C выходом этой программы разработчики интерактивных приложений получили просто фантастические возможности. Теперь можно создавать проекты со встроенными фильтрами эффектов, такими, например, как тени, размытие, мерцание и др. Рендеринг нового поколения позволяет создавать исключительные по своей четкости шрифты.

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

Возможности видеоредактора:
- Новый и улучшенный метод рисования
- Коллекция новых градиентов
- Улучшенный, более понятный интерфейс
- Поддержка нового формата видео
- Новые фильтры для графики
- Улучшенная обработка изображений
Особенности программы:

Язык интерфейса: Англ. Русификатор в архиве
Размер программы: 110 Mb
Русификатор для Macromedia Flash Professional: Имеется
Ключ для Macromedia Flash Professional: В архиве
Операционная система: Windows® 2000, XP, 2003, Vista

Flash 8 обзор

Вышла новая версия Macromedia Flash professional (ver. 8) Её новые возможности:

• Улучшенные градиенты

• Новый метод рисования объектов (object drawing model)
• Ассистент по скриптам (script assist mode)
• Улучшенный интерфейс
• Редактор плавности движения
• Графические фильтры
• Режимы наложения клипов
• Новый видео формат (+On2 VP6 кодек)
• Область перерисовки

Для корректного отображения иллюстраций вам понадобится flash player v.8, его можно поставить отсюда...

Улучшенные градиенты

Панель Color mixer теперь выглядит так:

Что появилось? Во первых, в радиальных градиентах появилась возможность ставить смещение градиента

(здесь стрелка-уголок в центре задает смещение градиента)

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

чтобы было понятнее, приведу иллюстрированный пример:

в третьих, появился режим перехода цветов Linear RGB

Он позволяет сделать переход более чистым:

анимация наподобие этой делается просто смещением уголка радиального градиента:

и позволяет она рисовать объекты на одном слое не перекрывая и затирая друг друга. Каким образом? Просто при включенном квадратике Object drawing mode все нарисованные фигуры автоматически оказываются как бы сгруппированными, но в то же время их можно редактировать как обычные шейпы (менять кривизну линии и прочее).

Продвинутый анти-алиасинг для текста

Теперь есть не просто текст с антиалиасингом, без него и device font:

• Use device fonts (как и раньше)
• bitmap text(no anti-alias) - символы растеризуются исходя из указанного размера текста и используются полученные спрайты
• Аnti-alias for animation - анти-алиасинг заточенный под анимацию (не дрожит при движении)
• Anti-alias for readability - анти-алиасинг заточенный под читабельность (более четкие буквы при маленьком кегле)
• custom Anti-alias -на выбор - можно настроить свой анти-алиасинг, исходя из праметров Thickness (толщина) и Sharpness (резкость)

по скорости - быстрее всего работает device fonts, затем bitmap text, потом, Аnti-alias for animation и медленней всех Anti-alias for readability

Сравнить способы анти-алиасинга по читабельности можно так:

Script Assist (помощник по скриптам)

Помощник подозрительно напоминает режим normal в старых версиях флэша. Окно редактирования кода при включенном Script Assist"е выглядит так:

Расширяющаяся рабочая область

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

Улучшенный интерфейс

За счет более грамотной компоновки элементов интерфейса Macromedia сделала программу еще более удобной. К примеру, если открыто несколько документов, то библиотека не размножает свои серые окна на каждый документ, а позволяет выбрать из списка документ:

Или кнопочка Timeline позволяет отключить окно timeline в нужным момент. Кроме этого, новая компоновка кнопочки даже сэкономит вам несколько пикселей рабочего стола;)

было:

нажали:

В окне Document (Modify-> Document ...) теперь можно писать, что за мультик и зачем...

Undo (отмена) для каждого отдельного объекта

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

Редактор плавности движения

Редактируется только скорость движения и положение объекта строго между пунктом а и б. Итак, рядом с (параметром кейфрэйма) Ease появилась кнопочка, расширяющая

шкала X - последующие кадры возможности Ease: до следующего ключевого кадра, шкала Y - процент пути

для каждого параметра (Position, Rotation, Scale, Color, Filters) можно задавать свои кривые

Как примеру, изменив кривую

получается такой мультик (обратите внимание, в нем всего два (!) keyframe"а анимации - в пункте а и в пункте б - остальные повороты отрегулированы в редакторе Custom Ease In /

Графические фильтры

Появились графические фильтры (спецэффекты):

• Drop Shadow
• Blur
• Glow
• Bevel
• Gradient Glow
• Gradient Bevel
• Adjust Color

Прикрепляются они только на Movie clip"ы и Button"ы - на Graphic не включаются, но если Graphic содержит объект, на котором включен эффект, то он будет показан. Думаю всем, кто пользует программы наподобие Photoshop"а понятно по названиям, что в общем они делают. Примеры.

Параметры эффектов схожи между собой

Drop Shadow

Тень можно пускать по оси x, по y, по обоим измерениям сразу, регулировать интенсивность, качество (при меньшем эффект получается более грубым - это касается всех фильтров), угол и расстояние (дистанция) до объекта, задавать цвет (градиенты использовать нельзя). Также можно включить Knockout (вырезать контур объекта из эффекта), Inner shadow (эффект внутри объекта) и Hide object (только эффект, без объекта)

1. Ниже приведены примеры использования Drop Shadow

Blur

Блур можно делать по оси x, по y, по обоим измерениям сразу, регулировать качество (при меньшем эффект получается более грубым - это касается всех фильтров). Примеры:

Glow

Свечение можно пускать по оси x, по y, по обоим измерениям сразу, регулировать интенсивность, качество (при меньшем эффект получается более грубым - это касается всех фильтров), цвет

Также можно включить Knockout (вырезать контур объекта из эффекта), Inner glow (эффект внутри объекта). Примеры:

Bevel

Bevel можно пускать по оси x, по y, по обоим измерениям сразу, регулировать интенсивность, качество (при меньшем эффект получается более грубым - это касается всех фильтров), угол и расстояние (дистанция) до объекта, задавать цвет блика и тени

Gradient Glow

Градиентное свечение можно пускать по оси x, по y, по обоим измерениям сразу, регулировать интенсивность, качество (при меньшем эффект получается более грубым - это касается всех фильтров), угол и расстояние (дистанция) до объекта, задавать градиент свечения

Также можно включить Knockout (вырезать контур объекта из эффекта), Inner (эффект внутри объекта), Outer (эффект вне объекта), Full (эффект внутри и снаружи). Примеры:

Gradient Bevel

Gradient Bevel можно пускать по оси x, по y, по обоим измерениям сразу, регулировать интенсивность, качество (при меньшем эффект получается более грубым - это касается всех фильтров), угол и расстояние (дистанция) до объекта, задавать градиент bevel"а

Также можно включить Knockout (вырезать контур объекта из эффекта), Inner (эффект внутри объекта), Outer (эффект вне объекта), Full (эффект внутри и снаружи). Примеры:

Adjust color

Теперь можно настраивать яркость, контраст, насыщенность, смещение.

Режимы наложения клипов

Теперь Movie Clip"s и Button"s можно накладывать используя методы наложения (известные всем пользователям Photoshop):

• Normal
• Darken
• Multiply
• Lighten
• Screen
• Overlay
• Hard Light
• Substract
• Difference
• Invert
• + Alpha - выводить по маске объекта (фактически эффект слоя с Mask"ой, но с поддержкой градиента)
• + Erase - стирать по маске объекта (эффект, обратный Alpha)
• Layer (комбинация эффектов)

объяснять, что как накладывается, не буду - просто смотрите примеры. Отдельно рассмотрим наложения Alpha и Erase. Дело в том, что они применяются не как другие наложения (просто включил метод и все). Вам надо создать 1ый слой (нижний) - подложка, второй слой (верхний)- объект - маска и применить ему наложение Erase или Alpha, затем родительскому объекту назначить наложение Layer. Таким образом вы получаете возможность использовать маски с градиентами, маски по растрам.

Улучшенная обработка растровых объектов

При сильном увеличении\уменьшении растровые объекты выглядят лучше (так сказано в хелпе - я сильной разницы с предыдущим флэшем не заметил)

Поддержка альфа канала в видео

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

Область перерисовки

На 8 ом Flash-плеере, при нажатии правой кнопки мыши, появляется такое окно:

где пункт Show Redraw Regions включает показ, что в сцене перерисовалось в текущем кадре (может быть удобно для отладки) здесь перерисовался только шарик

сайт производителя: www.macromedia.com

Абсолютно новый видео-декодер, "VP6", он вошел в Macromedia Flash 8 и в свою очередь обеспечивает не только очень качественное сжатие видео, но к тому же и весьма необычные на данный момент возможности, например такие как наложений поверх ролика поддержку векторных, в частности - текста.

Внимание!!! Русификатор Macromedia Flash 8.0 находится в архиве вместе с программой, после установки программы необходимо установить русификатор.

Чтобы вставить звуковой файл, нужно выполнить следующее:

Выбираем вкладку File/Import/Impotr to Library выбираем нужный звуковой файл и нажимаем open. Затем выбираем кадр на на который хотим вставить звук. Выбираем свойства Properties или жмем Ctrl+F3. И в свойстве name выбираем загруженный нами в библиотеку звуковой файл.

Macromedia Flash 8 - работаем с программой

Делаем двойной клик по документу.fla. Запустится программа Flash, и в закладке Library мы видим выбранный слой и общее количество слоев в документе.fla.

На линейке времени (timeline) мы видим слои документа.fla. Можно перетягивать слои из палитры Library на линейку времени. Есть возможность отключать видимость слоев на timeline.

Запускаем программу Macromedia Flash 8. И выбираем: Create New > Flash Document.

Прямоугольник изменит свой размер, только на последнем кадре. Если нам надо сделать плавное изменение размеров прямоугольника, от 1 до 40 кадра, то нажимаем правую кнопку мыши на слое и выбираем из выпадающего списка, пункт: Create Motion Tween.

Создаем два объекта, при выделении объекта, инструментом свободного трансформирования (Q), мы видим посередине - белую точку. Это опорная точка вращения. При выделении еще одного объекта (клик мышью, удерживая клавишу Shift), точка переместится на новое место:

Для добавления эффектов к слою, нажимаем на нем правую кнопку мыши и выбираем пункт:

Задаем размер тени, ее цвет, % прозрачности, для обновления изображения нажимаем на кнопку Update Preview. Если все устраивает, нажимаем на кнопку ОК.

Выводы:

1. В результате моей исследовательской работы я нашёл и изучил информацию о программе по созданию анимации Macromedia Flash_Professional_8.0, о форматах графических файлов. Просмотрев и изучив различные источники, я научился работать с этой программой. На мой взгляд, это самая лучшая программа по созданию анимации. В результате я научился делать анимацию в программе Macromedia Flash_Professional_8.0 и узнал много интересного. Думаю, я ещё буду работать с данной программой и создавать мультфильмы. Появились новые вопросы по звуку, наверное, это будет следующей моей исследовательской работой.

Источники информация:

Тренажер “Иван-царевич и Василиса Прекрасная” предназначен для отработки навыков нахождения точки на координатной плоскости по заданным координатам. В нашем случае координаты явно не заданы. Их нужно найти, посчитав значение выражения. Таким образом, этот тренажер помогает так же развитию вычислительных навыков. Суть задания заключается в следующем: ученик, вычислив координаты точки, должен перетянуть в эту точку соответствующий “оберег”. В каждом задании необходимо разложить по своим местам семь “оберегов”, после чего нажать кнопку “Готово”. Если задание выполнено верно, то появится сообщение о том, что ловушка пройдена, если хотя бы один “оберег” лежит не на своем месте, то появится сообщение об ошибке: “Иван-царевич попал в ловушку”.

Этапы создания тренажера:

1) создаем на первом кадре статистическое текстовое поле (Statik Text) и записываем в нем текст задания (рис. 13). В нашем случае это сказка;

2) на первом кадре пишем код: stop();

3) добавляем кнопку перехода на следующий кадр. Для этого нужно:

• нарисовать кнопку любой формы (например стрелку);
• выделить её;
• щелкнуть по ней правой кнопкой мыши;
• в выпавшем окне выбрать команды: Convert to Symbol -> Button;
• выделить полученную кнопку и написать код:
• on (release) {nextFrame();} – при нажатии перейти на следующий кадр.

Код для любого символа в Macromedia Flash записывается в панели Action Frame (рис. 14):

4) оформление первого кадра выполняется по желанию. Если вы хотите вставить какой то рисунок, то это можно сделать с помощью обычных команд – “Копировать” - “Вставить” или выбрать команду File -> Import.

5) на втором кадре располагается само задание. Чтобы создать второй (и все последующие) кадр нужно на временной шкале выделить соответствующий кадр, щелкнуть по нему правой кнопкой мыши и выбрать команду Insert Keyframe (рис. 15).

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

Итак, на втором кадре мы помещаем координатную плоскость, причем рисуем мы ее на втором слое (создание слоев описано в предыдущем параграфе).

Координатная плоскость, в нашем случае, нарисована с помощью инструмента “прямая” (LineTools) (рис 16), рисуем одну линию с зажатой клавишей Shift, копируем её (Ctrl+C) и вставляем (Ctrl+V) на нужном расстоянии. Затем можно скопировать уже две прямых и т.д. Получив необходимое количество прямых, копируем их все, вставляем и, выбрав команду “свободная трансформация” (Free Transform Tool) (рис. 16), поворачиваем наши прямые на 90 градусов. Таким образом, мы получаем сетку нужного нам размера (рис. 17).

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

6) координатные оси изображаем на слое 3;

7) координаты точек записываем с помощью уже знакомого текстового поля – Statik Text, “обереги” рисуем с помощью инструментов рисования. Все это выполняем на слое 1;

8) копируем изображение оберегов с первого слоя и помещаем на третий (рис. 18);

9) каждый оберег преобразуем в клип:

• выделить нужный оберег;
• щелкнуть по нему правой кнопкой мыши;
• в выпавшем окне выбрать команды: Convert to Symbol -> Movie Clip;
• каждому клипу дать имя: Оbereg1, Оbereg2,…, Оbereg7 (рис. 19).

10) для каждого клипа записываем следующий код:

on (press) { x0=this._x; y0=this._y;

this.startDrag(false);}

on (release) {this.stopDrag();

if (x0==this._x and y0==this._y){ this._rotation+=45; }}

11) на слое 1 в точках, соответствующих записанным координатам помещаем небольшие кружочки (по цвету совпадающие с цветом фона, чтобы ученик не видел, куда нужно передвинуть оберег);

12) каждый рисунок преобразуем в клип (рис. 20).

13) каждому клипу даем имя: Lov1, Lov2,…, Lov7 (от слова “ловушка”). Номер ловушки должен соответствовать номеру оберега, который учащийся с помощью мышки будет передвигать в точку с нужными координатами.

14) на любой из слоев добавляем текстовое поле Dynamik Text и задаем ему имя: text1 (рис. 21).

14) размещаем на форме кнопку “Готово” (рис. 22). Кнопку добавляем так же, как и в пункте 2;

15) для этой кнопки пишем следующий код:

if ((ober1.hitTest(lov1)) and (ober2.hitTest(lov2))

and (ober3.hitTest(lov3))and (ober4.hitTest(lov4))

and (ober5.hitTest(lov5))and (ober6.hitTest(lov6))

and (ober7.hitTest(lov7))) {

text1.text = "Иван Царевич попал в ловушку"; }}

16) на следующем кадре создаем сообщение о прохождении ловушки (рис. 23). Можно добавить какой-нибудь рисунок.

Рис. 23 Рис. 24

18) для кнопки “Меню” - on(release) {loadMovie ("имя файла .swf", _level0);}

Если ученик нажимает кнопку “Далее”, то он переходит на следующий кадр (рис. 24). На этом кадре нужно переместить, в соответствии с новыми координатами, клипы: Lov1, Ljv2,…,Lov7. Если учащийся проходит все ловушки (в нашем случае их 7), то на экране появляется заключительный кадр (рис. 25).

19) для кнопки “Снова” записываем код: on (press) {gotoAndPlay(1);}

20) чтобы при запуске программы картинка открывалась во весь экран на первом кадре нужно написать код: fscommand("fullscreen",true);

21) компиляция программы – клавиши: Ctrl + Enter;

22) на любой кадр добавляем картинки по желанию – программа готова.

“Определение координат” - это тест на проверку умения находить координаты по точке координатной плоскости. По заданной на плоскости точке нужно определить ее координаты и записать их в соответствующие окошечки (рис. 26).

Этапы создания теста:

1) на первом слое, которому можно дать имя “сетка”, нарисуйте координатную сетку (можно скопировать сетку из предыдущего задания);

2) на втором слое “оси” нарисуйте оси координат, добавьте обозначения осей и точку, координаты которой нужно найти (в нашем случае это точка А). Обозначение точки будет меняться на каждом слое;

3) на втором слое добавьте два текстовых поля (Statik Text). В одном запишите “Абсцисса точки А”, в другом – “Ордината точки А”;

4) создайте слой 3 и назовите его “координаты”;

5) на этом слое создайте два текстовых поля (Input Text) и назовите их korx (координата х) и kory (координата y);

6) разместите эти поля напротив соответствующих полей “абсцисса” и “ордината”;

7) создайте динамическое текстовое поле (Dynamik Text), и назовите его “rez” (результат) (рис. 27);

8) создайте кнопку перехода на следующий кадр, запишите для нее код: on (release) {_root.nextFrame(); }

9) создайте кнопку “готово” или “проверить”. При нажатии этой кнопки программа проверяет правильность введенных учеником координат. Если координаты указаны верно, то программа выдает сообщение “Правильно”, если нет – “Неправильно”. Код для этой кнопки будет меняться в зависимости от расположения точки на координатной плоскости.

if ((krx.text == "5") and (kry.text == "4")) {sum++;

rez.text = "Правильно"; } else { rez.text = "Не правильно"; }}

10) для подведения итогов теста на первом кадре любого слоя надо записать следующий код:

var n = 10; // количество вопросов

var sum = 0; // количество правильных ответов

function tiktak() {time++;}

timer = setInterval(tiktak, 1000); // таймер

• расположение и обозначение точки на координатной плоскости;
• обозначение точки в поле “абсцисса точки_” и “ордината точки_”;
• в коде кнопки “готово” указать новые координаты точки.

12) повторяем все описанные шаги нужное количество раз (зависит от количества вопросов в тесте, в нашем случае – 10 раз);

13) после последнего вопроса необходимо создать ещё один ключевой кадр (кадр с результатами теста):

1. создайте на этом кадре текстовое поле (Statik Text) с надписью “Результаты:” или “Оценка:” (рис. 29);
2. создайте динамическое текстовое поле и назовите его text;
3. на итоговом кадре напишите следующий код:

clearInterval(timer);

{if (sum==10) { ozenka.text="Отлично";}

if ((sum==9) or (sum==8)) { ozenka.text="Хорошо";}

if ((sum==7) or (sum==6)) { ozenka.text="Тройка";}

if ((sum==5) or (sum==4) or (sum==3)

or (sum==2) or (sum==1) or (sum==0)) { ozenka.text="Двойка";}}

14) для того чтобы была возможность выполнить этот тест ещё раз (если вы хотите предоставить ученикам такую возможность), создайте кнопку “Снова”;

15) напишите для этой кнопки код: on (press) {gotoAndPlay(1);}

Алгоритм создания презентации “Построение фигур ”

Данная презентация предназначена для объяснения хода построения фигуры на координатной плоскости по заданным координатам ее ключевых точек. В ней рассматривается два способа построения фигуры по точкам:

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

Этапы создания:

• создайте два ключевых кадра;
• на каждом кадре разместите изображение координатной плоскости и текст задания;
• на первом кадре напишите код: stop(); fscommand("fullscreen",true);
• координатную плоскость преобразуйте в клип (пункт 3.1 шаг 6);
• в режиме редактирования клипа (для вызова дважды щелкните по клипу) создайте второй слой, на котором будут появляться точки;
• чтобы точки начали появляться не сразу при запуске клипа – первые 30 кадров оставьте без изменения (рис. 30):

• далее через каждые семь кадров создайте ключевой и добавьте на него по одной точке фигуры (рис. 31):
• после этого, так же через 7 кадров, начинаем добавлять соединительные линии (рис. 32):
• на последнем кадре напишите код: stop();
• перейдите в режим редактирования сцены (двойной щелчок мимо клипа) и на первом кадре создайте кнопку перехода на следующий кадр: on (release) {nextFrame();};
• на втором кадре, в режиме редактирования клипа, создаем второй и третий слои. На втором слое будут появляться точки, на третьем отрезки;
• создаем последовательность кадров (рис. 33):
• на последнем кадре пишем код: stop();
• возвращаемся в режим редактирования сцены и добавляем кнопку перехода на предыдущий кадр.

Желаю успехов в создании собственных работ!

Создание мультипликации в Macromedia Flash

Цель

Научиться создавать мультипликацию в Macromedia Flash, использовать и изучить основные принципы работы в приложении.

Задание

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

Ход работы

1. Создадим слой заднего фона ролика. При помощи основных элементов расположенных на панели Tools в первом кадре рисуем горы, деревья, дом, а также траву и кусты (рис. 1).

Рисунок 1 - Создание заднего фона

Так как нам в дальнейшем не потребуется изменение данного слоя, то используем автоматическую анимацию. Для этого в первом кадре при помощи команды правой клавиши мыши File-> Create Motion Twin устанавливаем Twin . Далее в нужном нам кадре используем команду Insert Fraim. Результатом будет длинная стрелка от первого до конечного кадра (рис.2).

Рисунок 2 - Создание автоматической анимации

2. Создадим анимацию бабочек на новом слое. Для этого рисуем отдельно каждую из трех в двух экземплярах, в одном бабочка будет с раскрытыми крыльями, в другом наоборот. Помещаем трех бабочек с раскрытыми крыльями в первый кадр (рис. 3).

Рисунок 3 - Создание бабочек с раскрытыми крыльями

На втором кадре вставляем бабочек со свернутыми крыльями, также меняем их местоположение на кадре относительно первого кадра, что в дальнейшем получить эффект полета (рис. 4).

Рисунок 4- Создание бабочек с нераскрытыми крыльями

Чередуя, таким образом, бабочек с раскрытыми и нераскрытыми крыльями, а также местоположение создаем анимацию полета бабочек. На последнем кадре нажимаем F9, заходим в редактор Action Script и прописываем «gotoAndPlay(«L3.1»)» , для того чтобы зациклить воспроизведение кадров (рис. 5) .

Рисунок 5 -Использование Action Script

мультипликация macromedia flash анимация

3. Для создания анимации вулкана используем похожую технику. Создаем новый слой, на первом кадре рисуем вулкан и несколько летящих из него камней (рис. 6).

Рисунок 5 -Рисование вулкана.

На следующих кадрах меняем положение вылетающих камней, добиваясь эффекта извержения (рис. 6, рис.7).

Рисунок 6 - Изменение положения камней, вылетающих из вулкана.

Рисунок 7 - Анимация извержения вулкана.

4. Создадим анимацию танцующего человека, для этого делаем новый слой и три рисунка человека, на каждом рисунке он представлен в разных позах (рис. 8, рис. 9, рис. 10).

Рисунок 8 - Первая поза человека

Рисунок 9 - Вторая поза человека

Рисунок 9 - Третья поза человека

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

5. Создадим анимацию солнца и двух воздушных шаров на новом слое, как и в случае с анимацией фона, используем Motion Twin. На первом кадре устанавливаем начальное положение шаров и солнца и используем команду Create Motion Twin. На кадре, который будет воспроизводиться последним, меняем положение шаров и солнца, для создания эффекта их движения. Применяем Insert Frame. Результатом этих действий будет планомерное движение шаров и солнца от месторасположения на первом кадре до месторасположения на последнем по прямой (рис.10, рис. 11).

Рисунок 10 - Положение воздушных шаров и солнца на первом кадре

Рисунок 11 - Положение воздушных шаров и солнца на последнем кадре

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

Рисунок 12 -Результат

Вывод

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

Список использованных источников

1. www.daflash.ru

2. http://www.compdoc.ru/internet/flash/

И. С. Сакович,

руководитель высшей квалификационной категории кружка «Информатика и вычислительная техника» Гомельской городской станции юных техников, Беларусь

СОЗДАНИЕ ТЕСТОВ В СРЕДЕ MACROMEDIA FLASH

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

Тестирование как форма контроля и объективной оценки знаний и умений обучаемых все более привлекает внимание преподавателей - практиков. Однако многих педагогов не устраивают «готовые» тесты: их оформление, содержание, уровень сложности, несоответствие программному материалу. Программа Macromedia Flash предоставляет уникальные возможности для создания «авторских» тестов – красочных, анимационных, интерактивных, рассчитанных на разновозрастные группы обучаемых.

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

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

Типовые правила подготовки материалов для тестового контроля :

основной текст задания содержит не более 8-10 слов;

каждый тест должен выражать одну идею, одну мысль;

задания должны быть краткими, четкими, легко читаемыми;

неправильные ответы должны конструироваться на основе типичных ошибок и быть правдоподобными;

правильные ответы должны располагаться среди всех предлагаемых ответов в случайном порядке;

формулировка заданий не должна содержать двусмысленности и «ловушек»;

следует располагать тесты по возрастанию трудности;

ответы на один вопрос не должны зависеть от ответов на другие вопросы.

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

Для построения тестовых заданий наиболее пригодными методиками являются:

а) выбор варианта (альтернативные);

б) подбор пары;

в) поле ввода;

г) исключение лишнего.

Тестирование становится гораздо интересней, когда вопросы представлены не в стандартной форме, например: голосовой ответ (подходит для изучения иностранных языков), Drag -and -drop (возможность построения или перемещения объектов на экране), область на рисунке (для выбора правильного ответа необходимо отметить область на представленном рисунке) и другие.

Вашему вниманию предлагаются различные варианты тестов, разработанные в среде Macromedia Flash , на занятиях компьютерного кружка. Возраст авторов тестов: 12 – 16 лет.

Тест типа «Правилка»

Размещаем в каждом кадре fla -документа текст задания «Исправьте ошибки в словах», текстовое поле типа Static с текстом вопроса, текстовое поле типа Input c именем otvet для ввода ответа, кнопку перехода к следующему вопросу.

Каждому кадру с вопросами необходимо присвоить имя (например, vopros1, vopros2,…) и поместить на него скрипт stop();

Возможны два варианта сценария при неправильном ответе на вопрос:

Ожидание верного ответа, т.е. переход на следующий вопрос осуществляется только при наличии правильного выполнения задания;

Переход к следующему вопросу с подсчётом правильных ответов.

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

on (release) {

if (otvet==” цыплёнок”)

{ gotoAndPlay(”vopros2”)}

else

{text =”вы не исправили ошибку”;}

}

Во втором случае на кнопку запишем следующий код:

on (release ) {

gotoAndPlay (” vopros 2”); // переход на новый кадр

if (otvet ==”цыплёнок”) // проверка ответа

{n =n +1};

}

Где n – переменная для подсчёта правильных ответов.

Примечание. На первый кадр следует записать следующий скрипт: n =0;

По окончании тестирования для второго варианта сценария необходимо вывести информацию: «Количество правильных ответов: … ». Для этого в текстовое поле типа Dynamic помещается значение переменной n .

Тест с вариантами ответов

Предлагается вопрос и 3-4 варианта ответа на него. Каждому варианту соответствует кнопка, при нажатии на которую осуществляется переход к следующему вопросу.

На каждый кадр с вопросами необходимо поместить скрипт stop();

На одну кнопку с правильным вариантом ответа записывается следующий код:

on (release) {

gotoAndPlay(“vopros2”);

n =n +1;

//n – количество правильных ответов

}

На остальные кнопки помещается код:

on (release ) {

gotoAndPlay (“vopros 2”);

}

В последнем кадре flash -ролика следует поместить статический текст «Количество правильных ответов: » и вывести в текстовое поле типа Dynamic значение переменной n .

Иногда для выбора варианта ответа удобней использовать не объекты-кнопки, а сами текстовые записи ответов преобразовывать в кнопки.

Примечание. Условный оператор в этом типе тестов не используется.

Тест с вводом номера правильного ответа

Предлагается вопрос и 3-4 варианта пронумерованных ответов. Создается поле типа Input c именем otvet для ввода номера правильного ответа.

Для перехода к следующему вопросу используется кнопка, на которую помещается следующий код:

on (release ) {

if (otvet ==”…”)

{n=n+1};

gotoAndPlay (“vopros 2”);

}

Результат тестирования в виде количества правильных ответов оформляется в последнем кадре flash -ролика. Можно запоминать номера вопросов с верными вариантами ответа и дополнительно выводить информацию: «Правильные ответы были получены на вопросы со следующими номерами: …».

Тест «Установи соответствие»

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

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

on (release ) {

if (kk 1=="3" && kk 2=="5"&& kk 3=="2"

&& kk 4=="4" && kk5=="1" && kk6=="6")

{otvet =" Правильно"}

else {otvet ="Не правильно";}

}

Кроссворд

Рисуется сетка кроссворда. В каждую ячейку кроссворда помещается текстовое поле типа Input , которое получает имя. Для проверки решения кроссворда пишем код:

on (release )

{

if (s 1=="m " && s 2=="i " && s 3=="l "

&& s4=="k" && s5=="b" && s6=="

&& s7=="e" && s8=="a" && s9=="d"

&& s10=="c" && s11=="a" && s12=="r" && s13=="r" && s14=="o" && s15=="t"

&& s16=="t" && s17=="e" && s18=="a")

{otvet=" Всёверно"}

else

{otvet ="Не все слова отгаданы" }

}

Примечание. Задайте для всех текстовых полей выравнивание по центру.

Тест с перемещением объектов (метод Drag -and -Drop )

Для примера используется тест по английскому языку на тему «Произношение звуков»: расположенные на поле слова необходимо перенести в нужное место карусели в соответствии с их звуковым произношением.

Создаем текстовые поля, преобразуем их в кнопки, для перемещения на каждую кнопку пишем код:

on (press) {

startDrag("ka1",false);

}

on (release) {

stopDrag();

}

Гдеka1 – имякнопки.

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

on (release ) {

if (ka 6._x >-60 && ka 6._x <30 && ka 5._x >-60 && ka 5._x <30 && ka 4._x >-60 && ka 4._x <30 && ka 7._x >-160 && ka 7._x <-110 && ka 8._x >-160 && ka 8._x <-110 && ka 9._x >-160 && ka 9._x <-110 && ka 1._x >100 && ka 1._x <140 && ka 2._x >90 && ka 2._x <150 && ka 3._x >90 && ka 3._x <150 && ka 1._y <100 && ka 2._y <100 && ka 3._y <100 && ka 4._y <100 && ka 5._y <100 && ka 6._y <100 && ka 7._y <100 && ka 8._y <100 && ka 9._y <100 && ka 1._y >-10 && ka 2._y >-10 && ka 3._y >-10 && ka 4._y >-10 && ka 5._y >-10 && ka 6._y >-10 && ka 7._y >-10 && ka 8._y >-10 && ka 9._y >-10)

{otvet =" Правильно"}

Else

{otvet ="Не правильно, попробуйте ещё раз";}

}

Тест «Лабиринт»

Рисуется лабиринт, по которому нужно провести объект, например, шарик. В каждом переходе лабиринта появляется очередной вопрос теста.

Движение шарика задается автоматически с помощью Motion tweening . В нужных местах лабиринта создаются ключевые кадры, на которые помещается скрипт stop() . Объект останавливается и далее продвигается по лабиринту только при вводе в ячейку правильного ответа.

На кнопку проверки пишется следующий скрипт:

on (release ) {

if (ot ==11) // проверка ответа

{ gotoAndPlay (11);} // движение шарика

else

{ gotoAndPlay (4);} // откат шарика в начало

}

Примечание. Подробнее смотри в журнале «ИиО» № 10-2008.

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

Примером служит текст стихотворения с пропущенными буквами. На местах пропусков создаются текстовые поля для ввода (лучше не оставлять их пустыми, а поместить в них символ «.»).

Для наглядности меняем цвет шрифта в полях ввода.

Кнопке проверки соответствует следующий код:

on (release ) {

if(x1!=" и") {q1._alpha=0;}

if(x2!=" о") {q2._alpha=0;}

if(x3!=" ю") {q3._alpha=0;}

if(x4!=" о") {q4._alpha=0;}

if(x5!=" одуванчики") {q5._alpha=0;}

}

Где q 1, …,q 5 – имена клипов-шариков;

x 1, …,x 5 – имена текстовых полей ввода.

Примечание. Свойство alpha характеризует прозрачность объекта. Как альтернативу можно использовать свойство видимости, например, q 1._ visible = false ;

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

Тест «Возводим дом»

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

На первый кадр поместить код, делающий каждый их клипов невидимым:

имя клипа. _ visible = false ;

На кнопку

on (release) {

q1._visible=true; // дверь

gotoAndPlay(“vopros2”);

}

На кнопку c неверным ответом пишем код:

on (release) {

text1=’ двери’;

gotoAndPlay(“vopros2”);

}

При правильных ответах на вопросы теста поэтапно «возводится» дом (становятся видимыми его отдельные фрагменты). В противном случае, под строкой «В доме не хватает:» в подготовленные текстовые поля типа Dynamic последовательно выводятся названия недостающих частей дома.

Тест « Раскрасьрисунок»

Рисуется черно-белая картинка, каждый фрагмент которой оформляется как отдельный клип (например, разбитый на сектора мяч). Каждому клипу присваиваем имя. Если тестируемый правильно отвечает на вопросы, то рисунок постепенно закрашивается.

На кнопку c правильным ответом пишем код:

on (release ) {

gotoAndPlay ("vopros 2");

col=newColor(q1);

col.setRGB(0xFFcc33); // цветзаливки

}

Где q 1 – имя клипа-фрагмента рисунка.

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

Тест-шутка «Отгадайка-ка»

При наведении мышки на нужный объект, он становится видимым. Можно «спрятать» все объекты и искать их, водя мышкой по экрану. Необходимо использовать метод hitTest.

Пример демонстрирует карту Беларуси, на которой точками обозначены города. Когда мышка указывает на областной центр, появляется его название и точка меняет цвет на красный.

onClipEvent (enterFrame) {

if (this.hitTest

(_root._xmouse,_root._ymouse,true))

{_ root . dd 1._ visible = true ; //название города

col = new Color(_root.kr1);

col . setRGB (0 xFF 6600); //цвет красный

}

Тест с использованием компонентов CheckBox

Для оформления ответов на вопросы теста перетаскиваем в рабочий кадр главной сцены нужное количество компонентов CheckBox. В свойстве Label для каждого компонента вводим текст ответа на вопрос. Присваиваем компонентам имена.

Результаты тестирования оформляем в виде таблицы. Стрелка (клип с именем strelka ) указывает на текущий номер вопроса.

На кнопку проверки пишем следующий код:

on (release) {

gotoAndPlay(“vopros2”); //следующий вопрос

strelka ._ y +=17; //перемещение стрелки вниз

//проверка правильности ответа

if (k3.getValue() && !k1.getValue()

&& !k2.getValue())

{ o 2="+";} //занесение символа «+» в таблицу

else

{ o 2="-";} //занесение символа «-» в таблицу

}

Где k1, k 2, k 3 – имена компонентов CheckBox,

o1,…,o 5 – имена текстовых полей типа Dynaniс, расположенных во втором ряду таблицы,

getValue – свойство состояния флажка (true или false ).

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

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

Желаю всем удачи, вдохновения и полёта творческой мысли при разработке новых увлекательных тестов!