3.3. Результат выполнения заданий flash-приложения «Анимация для школьников»
Разработанный программный продукт представляет собой набор анимированных правил, для школьников 3-4 класса, по предмету математика. Разбор каждой под темы можно разбить на 2-е части
Изложение теоретического материала;
Приведение примеров с подробным описанием.
Программный продукт сопровожден красивыми картинками, и различными персонажами, которые дают подсказки.
Анимация составлена с помощью взаимосвязью между собой различными монтажными кадрами (рис 3.12).
![](116188_html_c8556a1.png)
Рис.3.12. Фрагмент программы Adobe Flash Professional CS6
Во время запуска приложения ученик видит список анимированных уроков, из которых он бы мог выбрать то, которое хотел бы разобрать (рис.3.13):
Умножение в столбик.
Деление в столбик.
Разность в столбик.
Сложение в столбик.
Деление с остатком.
![](116188_html_m3fa994c5.png)
![](116188_html_aa9d116.png)
Рис.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).
![](116188_html_26461160.png)
Рис.3.14. Временная шкала анимации "Анимация для школьников"
Сама анимация состоит из множества кадров, которые следуют друг за другом, на протяжении которых используется различный код на ActionScript3.0, с его помощью осуществляется различное управление, например переход на нужный кадр, задержка воспроизведения конкретного кадра.
stop()
setTimeout(play,10000)
go to AndStop(1, "Монтажныйкадр 2");
3.4. Задания для самостоятельной работы
Практическое задание №1
«Применение инструментов Macromedia Flash для создания рисунков»
Цель: знакомство со структурой панели инструментов, со вспомогательными панелями Properties и Color; знакомство с инструментами рисования и их модификаторами; знакомство с цветовыми моделями, знакомство с возможностью группировки рисунков и работа с группами.
Задание 1 Нарисуйте букет. Результат работы сохраните во внутреннем формате (Букет.fla) и как изображение (Букет.jpg, Букет.gif).
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
![](116188_html_m1d33788a.png) ![](116188_html_39fa3d58.png)
|
Нарисуйте небольшой вертикально вытянутый овал
Выберите инструмент Selection и поднесите курсор к контуру овала так, чтобы около курсора появилась небольшая дуга. Немного потяните курсор, преобразовывая овал в лепесток
Используя клавишу Ctrl, скопируйте лепесток
|
![](116188_html_mb06f089.png) ![](116188_html_m391507d0.png)
|
Выберите инструмент FreeTransform, выделите копию лепестка и поверните ее на 100.
Используя инструмент Selection , перенесите повернутую копию и наложите ее на оригинал
Продолжите процедуру копирования до тех пор, пока количество лепестков у нашего цветка не станет достаточным. На каждом этапе можно слегка изменять форму лепестков.
|
![](116188_html_5aa315fb.png) ![](116188_html_m5cff0dab.png)
|
Выделите весь цветок. Откройте панель Color
На вкладке ColorMixer панели Color установите цвет контура![](116188_html_3a48325.png)
Для цвета заливки выберите тип Radial. Откроется монтажная линейка для установки перехода между цветами. Двойным щелчком по «банке с краской» откройте панель выбора цвета и выберите подходящий цвет. Вы можете создать цветовой переход между двумя и более цветами (до восьми). Для того чтобы убрать лишнюю «банку», достаточно щелкнуть по ней мышкой при нажатой клавише Ctrl или просто сдвинуть «банку» вниз
Нарисуем стебель и листья для нашего цветка. Листья делаются так же как и лепестки.
|
![](116188_html_7d76fba0.png)
|
Выделите весь цветок и использую клавишу Ctrl сделайте несколько копий.
Поработайте с каждой копией, чтобы придать ей индивидуальные черты. Измените пропорции копий. Поверните их на различные углы
Сдвиньте все копии поближе и получите красивый букет.
Сохраните файл
|
Задание 2. Нарисуйте и раскрасьте гриб.
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
![](116188_html_m1a35ae65.png)
|
Создайте новый Flash документ
Выберите инструмент карандаш .
Установите цвет линии – слабо-серый .
Установите опцию сглаживание.
|
![](116188_html_5151d40.png)
|
Нарисуйте шляпку.
Нарисуйте еще одну кромку шляпки гриба.
Нарисуйте ножку, стараясь построить замкнутую линию.
Удалите лишние части линий. Для этого выберите инструмент – выделение . Щелкайте по ненужной части линии и нажимайте клавишу Delete.
|
![](116188_html_4e748a1e.png)
|
Выберите инструмент ведро.![](116188_html_1aed6edf.png)
Перейдите к выбору цвета заливки шляпки. Установите опцию линейный градиент и цвет от светло-коричневого к коричневому (см. рисунок).
Проведите выбранным инструментом по шляпке гриба с прижатой левой клавишей.
Перейдите к выбору цвета заливки для нижней части гриба. Установите опцию линейный градиент и цвет от белого к серому.
|
![](116188_html_m7d97adbf.png)
|
Проведите выбранным инструментом ножке гриба с прижатой левой клавишей.
Выберите инструмент выделение и охватите прямоугольной рамкой весь гриб.
|
![](116188_html_2eca99e8.png)
|
Выполните команду группировки объекта в целое Modify/Group.
Выполните команду Edit/Copy, копирующую выделенный объект в буфер обмена, и Edit/PasteinCenter, вставляющую содержимое буфера обмена на слайд.
Измените размер и угол поворота, выбрав инструмент свободная трансформация и переместите на новое место инструментом выделение.
Сохраните рисунок в своей папке под именем Гриб.fla. Для этого выполните команду File/Save.
|
Практическое задание №2
«Пошаговая анимация в MacromediaFlash»
Цель: знакомство c пошаговым видом анимации. Использование ключевых и дублирующих кадров при создании анимированных роликов
Задание 1 Создайте анимированный ролик «Лягушка и муха».
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
![](116188_html_52d9a3e3.png)
|
Создайте новый документ MacromediaFlash
Нарисуйте контуры лягушки (то, что неподвижно)
Выделите первый кадр и нажмите клавишу F6 6 раз чтобы добавить 6 ключевых кадров (на каждом будет копия первого)
|
![](116188_html_2ae93e8d.png)
|
Вернитесь на первый кадр. Выберите инструмент кисть и нарисуйте глаза и муху.
Включите режим OnionSkin (луковая кожа) для того, что бы видеть то, что было на предыдущих кадрах.
Перейдите на следующий кадр и нарисуйте глаза и муху на новом кадре. И так пока не закончатся кадры
Выключить режим OnionSkin
Запустите файл на просмотр Ctrl + Enter
|
Задание 2.Создайте анимированный ролик, реализующий движение человека. Результат работы сохраните во внутреннем формате (Человечек.fla)
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
![](116188_html_m35616b75.png)
|
Создайте новый документ MacromediaFlash
Назовите первый слой Движение
На 1-ом кадре нарисуйте статические детали, т.е. рисунок, который не будет подвергнут изменению в других кадрах (туловище, голова)
|
![](116188_html_16286de.png)
|
Создадим еще семь таких же ключевых кадров. Для этого выделите мышкой символ первого кадра и нажмите клавишу <F6> семь раз
Вернитесь на первый кадр и дорисуйте ноги и руки человечку
|
![](116188_html_m67276b13.png)
|
Перейдите на второй кадр и включите режим OnionSkin (луковая кожа) Ноги и руки первого кадра будут видны чуть бледнее, нарисуйте новые для второго кадра
Перейдите на третий кадр и нарисуйте руки и ноги человечку для этого кадра. Проделайте эти действия со всеми оставшимися кадрами
|
![](116188_html_m30ff4b49.jpg)
|
Выделите и опустите человечка на 1 и 5 кадрах
Выделите и приподнимите человечка на 3 и 7 кадрах.
Создайте второй слой и расположите его ниже слоя Движение.
На втором слое нарисуйте пейзаж
Запустите файл на просмотр с помощью клавиш Ctrl+Enter
Сохраните файл
|
Практическое задание № 3
«Использование языка программирование ActionsScript при создании анимации»
Цель: знакомство с панелью Actions; с режимами записи сценариев, предлагаемых программой Flash; создание своих первых интерактивных фильмов; использование «события кнопки» для написания сценариев; создание анимации средствами программирования.
Задание 1.Создайте flash-ролик “Кнопка”.
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
![](116188_html_2d55bd1f.png)
|
Запустив MacromediaFlash, создаем новый flash документ
Откройте панель библиотеки кнопок: Window / CommonLibraries / Buttions
Выберите кнопку и перетащите ее на сцену
Откройте окно Window – DesignPanels – Info и установите нужные вам размеры кнопки
|
Выделите кнопку и откройте панель Actions-Button
Введите скрипт с указанием полного пути к файлу, который должен будет запуститься при нажатии кнопки:
![](116188_html_m22ebebcf.png)
Сохраните файл с расширение fla
При сохранении файла с расширением html(file – PublishSettings), чтобы фон кнопки был прозрачным необходимо выбрать вкладку HTML и в выпадающем меню Window mode выбрать Transparent Windowless.
|
Задание 2.Создайте flash-ролик “Переключатель”.
Алгоритм работы:
Сопровождающие иллюстрации
|
Шаги
|
![](116188_html_1090d34e.png)
|
Запустив MacromediaFlash, создаем новый flash документ
Нарисуйте небольшой круг красного цвета, внутри которого расположим текст “OFF”
Выделите круг и измените тип и толщину контура, выбрав пункты толщиной 3 на панели свойств
|
![](116188_html_70e6b8ed.png)
|
Преобразуйте текст и круг в символ MovieClip
Внутри символа создайте второй ключевой кадр в котором измените цвет круга на зеленый, тип контура на сплошной , а текст на “ON”
|
![](116188_html_2c818c95.png)
|
Поставьте на оба кадра скрипты остановки
|
![](116188_html_m77c8daf6.png)
|
Вернитесь на главную сцену и выберите символ. В окне свойств задайте имя символа indicator в окне InstanceName. Под этим именем символ будет виден в скриптах.
Откройте библиотеку кнопок Window / CommonLibraries / Buttons и скопируйте оттуда любую понравившуюся вам кнопку
|
Н а кнопку, взятую из библиотеки, «навесим» следующий скрипт:
Запустите ролик на просмотр и сохраните его.
|
|