Диплом (1233151), страница 3
Текст из файла (страница 3)
- поддержка 4K-разрешения;
- преобразование работ в HTML5;
- меню на русском языке.
Минусы:
- нет поддержки 32-битных платформ;
- на момент обзора недоступны справочные материалы;
- на освоение интерфейса требуется немало времени.
Специализация Adobe Animate CC - это интерактивная анимация. Именно поэтому приложение очень популярно среди web-разработчиков. Впрочем, функционал программы позволяет использовать ее для различных целей вплоть до создания полноценных рисованных роликов [19].
Внешний вид интерфейса программы приведен на рисунке 1.8.
Выводы по разделу: На основании анализа возможностей представленных программ, выбор пал на Adobe Animate CC, так как данная программа отвечает всем функциональным характеристикам, которые необходимы для разработки обучающей анимационной программы в «полной мере».
Рисунок 1.8 – Интерфейс программы Adobe Animate CC
2 ОПИСАНИЕ ПРОЦЕССА СОЗДАНИЯ АНИМАЦИИ В ПРОГРАММЕ ADOBE ANIMATE CC
Первым делом, как только загружается программа мы видим окно, в котором нам предлагается выбрать тип файла (формат), в котором будет создана анимация.
На рисунке 2.1 представлено окно выбора формата.
Рисунок 2.1 – Окно выбора формата файла в программе Adobe Animate CC
В этом окне мы выбираем «ActionScript 3.0».
ActionScript — объектно-ориентированный язык программирования, один из диалектов ECMAScript, который добавляет интерактивность, обработку данных и многое другое в содержимое Flash-приложений. ActionScript исполняется виртуальной машиной (ActionScript Virtual Machine), которая является составной частью Flash Player. ActionScript компилируется в байт-код, который включается в SWF-файл [18].
Далее перед нами появляется прямоугольная область для рисования, с форматом 550×400 пикселей. Выставим формат 1280×720, более удобный для использования, монтажа, редактирования и воспроизведения анимации.
На рисунке 2.2 представлен размер области рисования.
Рисунок 2.2 – Размер области рисования
А также выставим скорость смены кадров в секунду 25 FPS.
На рисунке 2.3 представлено окно изменения скорости смены кадров в секунду.
Рисунок 2.3 – Окно изменения скорости смены кадров в секунду
Далее преступаем к созданию слоев, на которых будут размещены рисунок схемы, коды ActionScript 3.0, а также кнопки управления анимацией.
Как вы можете заметить на рисунке 2.4, вся наша сцена состоит всего из одного кадра.
Рисунок 2.4 – временная шкала со слоями сцены
Это не столько особенность, сколько необходимость, т.к. в кадре много кнопок и частей анимации, и времени на создание каждой вариации ушло бы очень много. Язык программирования ActionScript позволяет сократить количество кадров всего до одного.
Приступим к созданию самой электрической схемы, анимаций и логики.
Шаг 1 – создание схемы по образцу представленному на рисунке 2.5.
Рисунок 2.5 – электрическая схема главного выключателя
Шаг 2.1. – создание графики для элементов анимации и управления.
Используя инструмент “Прямоугольник” с параметрами рисунка 2.6 а (черный контур толщиной 2,5 пт., заливка цветом #6666666 (серый),
Параметр скругления углов выставлен на 8,00 создаем нечто похожее на букву «Т» как показано на рисунке 2.6 б.
а б
Рисунок 3.6. – Создание графики: а – параметры инструмента; б – будущий рычаг “Прямоугольник”
После этого используя инструмент “Выделение” выбираем ненужные нам части одного из прямоугольников, как показано на рисунке 3.7, и удаляем их с помощью клавиши “Delete”.
Рисунок 2.7 – Лишняя часть
После этого выбираем инструмент “Свободное преобразование” представленное на рисунке 2.8.
Рисунок 2.8 – Расположение кнопки инструмента “Свободное преобразование”
Выделяем нашу будущую кнопку, и изменяем ее форму так как нам нужно, как показано на рисунке 2.9.
Рисунок 2.9 – Сравнение «до и после»
Таким образом достигается эффект объема и улучшается общий вид сцены в общем.
Далее нужно сделать «основу» для наших рычагов, делается это очень просто, используя такие инструменты как “Прямоугольник”, “Выделение” и “Свободное преобразование” мы можем получить примерно то, что изображено на рисунке 2.10.
Рисунок 2.10 – Основа для рычагов
После этого нужно преобразовать графику для наших рычагов в кнопки, делается это таким образом, выделяем с помощью уже известного нам инструмента “Выделение” выделим нужную нам область, которую мы хотим преобразовать в кнопку, как показано на рисунке 2.11.
Рисунок 2.11 – Область которую нужно преобразовать в кнопку
Далее жмем клавишу “F8” или, кликнув по выделенной области, нажимаем на пункт “Преобразовать в символ”, после этого откроется диалоговое окно как показано на рисунке 2.12 в нем нас интересуют лишь два параметра – имя и тип символа.
Рисунок 2.12 – диалоговое окно “Преобразовать в символ”
Далее нам следует ввести следующие параметры – имя символа (по желанию (оно должно характеризовать то, что оно обозначает)) и его тип, это наглядно показано на рисунке 2.13.
Рисунок 2.13 – Нужные параметры кнопки
После этого мы должны разместить наши кнопки в сцене, делается это очень просто. Выделяем нажатием нашу кнопку и тянем, с зажатой левой кнопкой мыши, символ на его место в сцене как показано на рисунке 2.14.
Рисунок 2.14 – нужное расположение элементов
Далее нужно сделать графику состояний кнопки. Чтобы сделать это нужно дважды кликнуть по нашей кнопке, рабочая область изменится (все что не относится к символу будет недоступно и слегка засвечено), также изменится и временная шкала, как показано на рисунке 2.15.
Рисунок 2.15 – временная шкала символа типа “Кнопка”
Теперь нужно кликнуть в место слоя 1 кадра “Over” правой кнопкой мыши, откроется контекстное меню, там находим и выбираем пункт “Добавить ключевой кадр". Кадр “Over” активируется при наведении курсора на кнопку, а значит никаких значительных изменений быть не должно. В кадре “Over” мы изменим лишь цвет заливки на чуть более светлый (с #666666 на #797979), для этого мы должны выделить наш рычаг и обратить внимание на вкладку “Свойства”, там в пункте “Заливка и обводка” рядом с символом инструмента “Заливка” есть небольшой прямоугольник с используемым в данный момент цветом, кликаем по нему и как показано на рисунке 2.16 изменяем цвет.
Рисунок 2.16 – Меню изменения цвета заливки
Далее по схожей схеме создаем третий кадр “Down”, он активируется при нажатии на кнопку. В третьем кадре нужно будет изменить цвет заливки, форму и по желанию добавить что-либо обозначающее изменение положения кнопки. В результате у вас должно выйти примерно, как на рисунке 2.17.
Рисунок 2.17 – Конечный вид нажатой кнопки
На нашей временной шкале остался кадр с названием “Hit”, он является визуализацией той области где нажатие мыши на кнопку будет засчитано. Выглядеть он может как вам угодно, в моем случае это будет прямоугольник, как показано на рисунке 2.18.
Рисунок 2.18 – Область в которой нажатие на кнопку будет засчитываться
Цвета в этом кадре не имеют никакого значения.
После того как мы создали нашу кнопку выходим из режима редактирования символа двойным нажатием, мимо всего, что относится к этому символу и задаем название экземпляру символа в меню свойства, как показано на рисунке 2.19, предварительно выбрав нашу кнопку.
Рисунок 2.19 – Измененное название экземпляра символа “switch”
Далее из меню “Библиотека” выбираем элемент “switch” и так же ставим его на место и так же даем имя, как показано на рисунке 2.20.
Рисунок 2.20 – все экземпляры по местам
Приступим к программированию. На рисунке 2.20 в самом начале запускается cамописная функция "Start" (останавливает проигрывание кадров, останавиливает все анимации, устанавливает все контакты в начальное положение), как показано на рисунке 2.21.
Рисунок 2.20 – Первая строка – запуск функции “start”
Рисунок 2.21 – Функция “Start”
В этой функции еспользуются такие комнады как “stop()”, “gotoAndStop(arg)”, “gotoAndPlay(arg)”.
Начнем по порядку, функция “stop()” останавливает проигрывание кадров в настоящей временной шкале, gotoAndStop(arg) переходит на определенный кадр (указывается как аргумент (arg)) и останавливает воспроизведение, gotoAndPlay(arg) переходит на определенный кадр (указывается как аргумент (arg)) и продолжает воспроизведение с этого кадра.
Переменные (такие как “kv43”, “kv21” и другие записанные перед функциями) обозначают объект к которому будет применяться функция (записанная после точки).
Посколько нам требуется создать три из четырех кнопок с фиксацией создана функция “btn” создана как раз для этого. Она Позволяет работать с визуальными состояниями кнопок, выводить данные о нажатии в виде переменной и, самое главное, эта функция делает из обычных кнопок кнопки с фиксацией. Сама функция изображена на рисунке 2.22.
Рисунок 2.22 – Тело функции “btn”
На рисунке 2.23, используя функцию “var” мы обявляем переменные. _SF22 = btn(SF22) – такая запись означает что в переменной “_SF22” будут хранится данные о кнопке в удобном виде, т.е. цель функции “btn” – упростить работу
с кнопками с фиксацией. Также мы обозначаем, что программа должна постоянно проверять кнопки на их нажатие.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
