3.3. Результат выполнения заданий flash-приложения «Анимация для школьников»
Разработанный программный продукт представляет собой набор анимированных правил, для школьников 3-4 класса, по предмету математика. Разбор каждой под темы можно разбить на 2-е части
Изложение теоретического материала;
Приведение примеров с подробным описанием.
Программный продукт сопровожден красивыми картинками, и различными персонажами, которые дают подсказки.
Анимация составлена с помощью взаимосвязью между собой различными монтажными кадрами (рис 3.12).
Рис.3.12. Фрагмент программы Adobe Flash Professional CS6
Во время запуска приложения ученик видит список анимированных уроков, из которых он бы мог выбрать то, которое хотел бы разобрать (рис.3.13):
Умножение в столбик.
Деление в столбик.
Разность в столбик.
Сложение в столбик.
Деление с остатком.
Рис.3.13. Фрагмент анимации "Анимация для школьников"
Для перехода между сценами используется следующий код
stop()
but21.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage1);
but22.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage2);
but31.addEventListener(MouseEvent.CLICK,fl_ClickToGoToWebPage31);
В начале, кода вызван метод stop();,который останавливает воспроизведение на данном кадре. Для обработки кнопок им заданы универсальные имена и определена функция, которая будет вызвана при их использовании.
but22.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage2);
Так же описана сама функция
function fl_Click To Go To We Page2(event:MouseEvent):void
{
Go to And Play(1, "Монтажныйкадр 3");
}
При выборе правила, ученик наблюдает подвижную анимацию, с помощью которой идет объяснение выбранной темы. Для передвижения объектов применена классическая анимация передвижения(рис.3.14).
Рис.3.14. Временная шкала анимации "Анимация для школьников"
Сама анимация состоит из множества кадров, которые следуют друг за другом, на протяжении которых используется различный код на ActionScript3.0, с его помощью осуществляется различное управление, например переход на нужный кадр, задержка воспроизведения конкретного кадра.
stop()
setTimeout(play,10000)
go to AndStop(1, "Монтажныйкадр 2");
3.4. Задания для самостоятельной работы
Практическое задание №1
«Применение инструментов Macromedia Flash для создания рисунков»
Цель: знакомство со структурой панели инструментов, со вспомогательными панелями Properties и Color; знакомство с инструментами рисования и их модификаторами; знакомство с цветовыми моделями, знакомство с возможностью группировки рисунков и работа с группами.
Задание 1 Нарисуйте букет. Результат работы сохраните во внутреннем формате (Букет.fla) и как изображение (Букет.jpg, Букет.gif).
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
 
|
Нарисуйте небольшой вертикально вытянутый овал
Выберите инструмент Selection и поднесите курсор к контуру овала так, чтобы около курсора появилась небольшая дуга. Немного потяните курсор, преобразовывая овал в лепесток
Используя клавишу Ctrl, скопируйте лепесток
|
 
|
Выберите инструмент FreeTransform, выделите копию лепестка и поверните ее на 100.
Используя инструмент Selection , перенесите повернутую копию и наложите ее на оригинал
Продолжите процедуру копирования до тех пор, пока количество лепестков у нашего цветка не станет достаточным. На каждом этапе можно слегка изменять форму лепестков.
|
 
|
Выделите весь цветок. Откройте панель Color
На вкладке ColorMixer панели Color установите цвет контура
Для цвета заливки выберите тип Radial. Откроется монтажная линейка для установки перехода между цветами. Двойным щелчком по «банке с краской» откройте панель выбора цвета и выберите подходящий цвет. Вы можете создать цветовой переход между двумя и более цветами (до восьми). Для того чтобы убрать лишнюю «банку», достаточно щелкнуть по ней мышкой при нажатой клавише Ctrl или просто сдвинуть «банку» вниз
Нарисуем стебель и листья для нашего цветка. Листья делаются так же как и лепестки.
|
|
Выделите весь цветок и использую клавишу Ctrl сделайте несколько копий.
Поработайте с каждой копией, чтобы придать ей индивидуальные черты. Измените пропорции копий. Поверните их на различные углы
Сдвиньте все копии поближе и получите красивый букет.
Сохраните файл
|
Задание 2. Нарисуйте и раскрасьте гриб.
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
|
Создайте новый Flash документ
Выберите инструмент карандаш .
Установите цвет линии – слабо-серый  .
Установите опцию сглаживание.
|
|
Нарисуйте шляпку.
Нарисуйте еще одну кромку шляпки гриба.
Нарисуйте ножку, стараясь построить замкнутую линию.
Удалите лишние части линий. Для этого выберите инструмент – выделение  . Щелкайте по ненужной части линии и нажимайте клавишу Delete.
|
|
Выберите инструмент ведро.
Перейдите к выбору цвета заливки шляпки. Установите опцию линейный градиент и цвет от светло-коричневого к коричневому (см. рисунок).
Проведите выбранным инструментом по шляпке гриба с прижатой левой клавишей.
Перейдите к выбору цвета заливки для нижней части гриба. Установите опцию линейный градиент и цвет от белого к серому.
|
|
Проведите выбранным инструментом ножке гриба с прижатой левой клавишей.
Выберите инструмент выделение и охватите прямоугольной рамкой весь гриб.
|
|
Выполните команду группировки объекта в целое Modify/Group.
Выполните команду Edit/Copy, копирующую выделенный объект в буфер обмена, и Edit/PasteinCenter, вставляющую содержимое буфера обмена на слайд.
Измените размер и угол поворота, выбрав инструмент свободная трансформация  и переместите на новое место инструментом выделение.
Сохраните рисунок в своей папке под именем Гриб.fla. Для этого выполните команду File/Save.
|
Практическое задание №2
«Пошаговая анимация в MacromediaFlash»
Цель: знакомство c пошаговым видом анимации. Использование ключевых и дублирующих кадров при создании анимированных роликов
Задание 1 Создайте анимированный ролик «Лягушка и муха».
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
|
Создайте новый документ MacromediaFlash
Нарисуйте контуры лягушки (то, что неподвижно)
Выделите первый кадр и нажмите клавишу F6 6 раз чтобы добавить 6 ключевых кадров (на каждом будет копия первого)
|
|
Вернитесь на первый кадр. Выберите инструмент кисть и нарисуйте глаза и муху.
Включите режим OnionSkin (луковая кожа) для того, что бы видеть то, что было на предыдущих кадрах.
Перейдите на следующий кадр и нарисуйте глаза и муху на новом кадре. И так пока не закончатся кадры
Выключить режим OnionSkin
Запустите файл на просмотр Ctrl + Enter
|
Задание 2.Создайте анимированный ролик, реализующий движение человека. Результат работы сохраните во внутреннем формате (Человечек.fla)
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
|
Создайте новый документ MacromediaFlash
Назовите первый слой Движение
На 1-ом кадре нарисуйте статические детали, т.е. рисунок, который не будет подвергнут изменению в других кадрах (туловище, голова)
|
|
Создадим еще семь таких же ключевых кадров. Для этого выделите мышкой символ первого кадра и нажмите клавишу <F6> семь раз
Вернитесь на первый кадр и дорисуйте ноги и руки человечку
|
|
Перейдите на второй кадр и включите режим OnionSkin (луковая кожа) Ноги и руки первого кадра будут видны чуть бледнее, нарисуйте новые для второго кадра
Перейдите на третий кадр и нарисуйте руки и ноги человечку для этого кадра. Проделайте эти действия со всеми оставшимися кадрами
|
|
Выделите и опустите человечка на 1 и 5 кадрах
Выделите и приподнимите человечка на 3 и 7 кадрах.
Создайте второй слой и расположите его ниже слоя Движение.
На втором слое нарисуйте пейзаж
Запустите файл на просмотр с помощью клавиш Ctrl+Enter
Сохраните файл
|
Практическое задание № 3
«Использование языка программирование ActionsScript при создании анимации»
Цель: знакомство с панелью Actions; с режимами записи сценариев, предлагаемых программой Flash; создание своих первых интерактивных фильмов; использование «события кнопки» для написания сценариев; создание анимации средствами программирования.
Задание 1.Создайте flash-ролик “Кнопка”.
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
|
Запустив MacromediaFlash, создаем новый flash документ
Откройте панель библиотеки кнопок: Window / CommonLibraries / Buttions
Выберите кнопку и перетащите ее на сцену
Откройте окно Window – DesignPanels – Info и установите нужные вам размеры кнопки
|
Выделите кнопку и откройте панель Actions-Button
Введите скрипт с указанием полного пути к файлу, который должен будет запуститься при нажатии кнопки:
Сохраните файл с расширение fla
При сохранении файла с расширением html(file – PublishSettings), чтобы фон кнопки был прозрачным необходимо выбрать вкладку HTML и в выпадающем меню Window mode выбрать Transparent Windowless.
|
Задание 2.Создайте flash-ролик “Переключатель”.
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
|
Запустив MacromediaFlash, создаем новый flash документ
Нарисуйте небольшой круг красного цвета, внутри которого расположим текст “OFF”
Выделите круг и измените тип и толщину контура, выбрав пункты толщиной 3 на панели свойств
|
|
Преобразуйте текст и круг в символ MovieClip
Внутри символа создайте второй ключевой кадр в котором измените цвет круга на зеленый, тип контура на сплошной , а текст на “ON”
|
|
Поставьте на оба кадра скрипты остановки
|
|
Вернитесь на главную сцену и выберите символ. В окне свойств задайте имя символа indicator в окне InstanceName. Под этим именем символ будет виден в скриптах.
Откройте библиотеку кнопок Window / CommonLibraries / Buttons и скопируйте оттуда любую понравившуюся вам кнопку
|
Н а кнопку, взятую из библиотеки, «навесим» следующий скрипт:
Запустите ролик на просмотр и сохраните его.
|
|
