Антиплагиат Китаев (1233149), страница 4
Текст из файла (страница 4)
Для работы с программой желательно знание английского языка – менюToon Boom Harmony не переведено на русский язык. На сайте разработчика естьогромная база знаний, которая поможет освоить возможности приложения.Однако, она также на английском языке [19].21Плюсы программы Toon Boom Harmony:- программа считается эталоном в своем роде;- практически неограниченные возможности для реализации идей;- режим «True Pencil» - сканирование рисунков с кальки;- поддержка флеш-роликов.Минусы программы:- недемократичная стоимость;- высокая нагрузка на процессор и видеоадаптер.Toon Boom Harmony – один из лидеров анимационного софта, которыйподойдет как для создания простых мувиклипов, так и полноценныхмультфильмов.
«Симпсоны», «Русалочка 2», «Король-Лев 2» - все эти мультикибыли сделаны с помощью героя нашего обзора.Внешний вид интерфейса программы приведен на рисунке 1.7.Рисунок. 1.7 – Интерфейс программы Toon Boom HarmonyAdobe Animate CC – программа для создания интерактивной векторнойанимации в современных форматах. Приложение используется webразработчиками, телевизионными и рекламными студиями. Это приложение22«заточено» под создание интерактивной анимации, основанной на прямомвзаимодействии с конечным пользователем.
Программа позволяет производитьпроекты в разных форматах - HTML5, WebGL, ActionScript, AIR, принеобходимости адаптируя их под разные платформы. Adobe Animate CCсодержит большое количество инструментов для рисования в векторномформате, присутствуют элементы растровой графики. Доступен наборшаблонов, их можно использовать для знакомства с интерфейсом программы[19].Интересно, что Adobe Animate CC – это современная версия известнойпрограммы для создания профессиональных Flash-роликов Adobe FlashProfessional.Adobe Animate CC - наследник известной программы Flash Professional.
Еепредшественник изначально создавался для работы с анимацией во Flashформате. Современная версия приложения позволяет создавать различные потипу ролики: контент к web-сайтам, рисованные блоки для телепрограмм и дажекороткометражные мультфильмы. Готовые работы можно адаптировать подразличные платформы - Web, мобильные устройства, сторонний софт и другое.Приложение содержит большой набор векторных кистей, также присутствуютинструменты для работы с растровой графикой [19].Возможности программы Adobe Animate CC:- создание интерактивных роликов;- огромный набор инструментов для рисования;- редактирование имеющихся и создание новых кистей;- создание собственных персонажей;- экспорт работ в различные форматы [19].Для запуска приложения нужно создать учетную запись в фирменном облакеCreative Cloud и ввести данные аккаунта во вспомогательную консоль.
С еепомощью можно управлять всеми продуктами от Adobe - загружать новые изапускать имеющиеся приложения.Интерфейс студии подобен остальным продуктам от Adobe - в центре23находится основная область для редактирования, по бокам от нее расположеныразметка и панели с инструментами. Расположение элементов управлениязависит от типа выбранного проекта.Начать знакомство с функционалом рекомендуем с редактированияимеющихся шаблонов, выбрать которые можно в окне создания проекта.
Там женаходятся ссылки на справочные материалы, однако в момент тестирования онивели на несуществующую страницу на сайте разработчика [19].Стоимость подписки на Adobe Animate CC составляет около десяти долларовв месяц. Trial-период - неделя.Плюсами программы являются:- быстрый обмен заготовками с другими приложениями библиотеки CreativeCloud;- возможность доступа к проектам с различных устройств;- поддержка 4K-разрешения;- преобразование работ в HTML5;- меню на русском языке.Минусы:- нет поддержки 32-битных платформ;- на момент обзора недоступны справочные материалы;- на освоение интерфейса требуется немало времени.Специализация Adobe Animate CC - это интерактивная анимация.
Именнопоэтому приложение очень популярно среди web-разработчиков. Впрочем,функционал программы позволяет использовать ее для различных целей вплотьдо создания полноценных рисованных роликов [19].Внешний вид интерфейса программы приведен на рисунке 1.8.Выводы по разделу: На основании анализа возможностей представленныхпрограмм, выбор пал на Adobe Animate CC, так как данная программа отвечаетвсем функциональным характеристикам, которые необходимы для разработкиобучающей анимационной программы в «полной мере».24Рисунок. 1.8 – Интерфейс программы Adobe Animate CC2.
ОПИСАНИЕ ПРОЦЕССА СОЗДАНИЯ АНИМАЦИИ ВПРОГРАММЕ ADOBE ANIMATE CCПервым делом, как только загружается программа мы видим окно, в которомнам предлагается выбрать тип файла (формат), в котором будет созданаанимация.На рисунке 2.1 представлено окно выбора формата.Рисунок. 2.1 – Окно выбора формата файла в программе Adobe Animate CCВ этом окне мы выбираем «ActionScript 3.0».25ActionScript — объектно-ориентированный язык программирования, один издиалектов ECMAScript, который добавляет интерактивность, обработку данныхи многое другое в содержимое Flash-приложений. ActionScript исполняетсявиртуальной машиной ( 73 ActionScript Virtual Machine), которая являетсясоставной частью Flash Player.
23 ActionScript компилируется в 73 байт-код, которыйвключается в SWF-файл [18].Далее перед нами появляется прямоугольная область для рисования, сформатом 550×400 пикселей. Выставим формат 1280×720, более удобный дляиспользования, монтажа, редактирования и воспроизведения анимации.На рисунке 2.2 представлен размер области рисования.Рисунок. 2.2 – Размер области рисования.А также выставим скорость смены кадров в секунду 25 FPS.На рисунке 2.3 представлено окно изменения скорости смены кадров всекунду.Рисунок. 2.3 – Окно изменения скорости смены кадров в секунду.26Далее преступаем к созданию слоев, на которых будут размещены рисуноксхемы, коды ActionScript 3.0, а также кнопки управления анимацией.Как вы можете заметить на рисунке 2.4, вся наша сцена состоит всего изодного кадра.Рисунок 2.4 – временная шкала со слоями сценыЭто не столько особенность, сколько необходимость, т.к.
в кадре многокнопок и частей анимации, и времени на создание каждой вариации ушло быочень много. Язык программирования ActionScript позволяет сократитьколичество кадров всего до одного.Приступим к созданию самой электрической схемы, анимаций и логики.Шаг 1 – создание схемы по образцу представленному на рисунке 2.5.Рисунок 2.5 – электрическая схема главного выключателяШаг 2.1.
– создание графики для элементов анимации и управления.Используя инструмент “Прямоугольник” с параметрами рисунка 2.6 а(черный контур толщиной 2,5 пт., заливка цветом #6666666 (серый),Параметр скругления углов выставлен на 8) создаем нечто похожее на букву27«Т» как показано на рисунке 2.6 б.абРисунок 3.6. – Создание графики: а – параметры инструмента; б – будущий рычаг“Прямоугольник”После этого используя инструмент “Выделение” выбираем ненужные намчасти одного из прямоугольников, как показано на рисунке 3.7, и удаляем их спомощью клавиши “Delete”.28Рисунок 2.7 – Лишняя частьПосле этого выбираем инструмент “Свободное преобразование” (рис. 2.8)Рисунок 2.8 – Расположение кнопки инструмента “Свободное преобразование”.Выделяем нашу будущую кнопку и изменяем ее форму так как нам нужно(Рис.
2.9)Рисунок 2.9 – Сравнение «до и после»29Таким образом достигается эффект объема и улучшается общий вид сцены вобщем.Далее нужно сделать «основу» для наших рычагов, делается это оченьпросто, используя такие инструменты как “Прямоугольник”, “Выделение” и“Свободное преобразование” мы можем получить примерно то, что изображенона рисунке 2.10Рисунок 2.10 – Основа для рычаговПосле этого нужно преобразовать графику для наших рычагов в кнопки,делается это таким образом, выделяем с помощью уже известного наминструмента “Выделение” выделим нужную нам область, которую мы хотимпреобразовать в кнопку (Рис. 2.11).30Рисунок 2.11 – Область которую нужно преобразовать в кнопку.Далее жмем клавишу “F8” или, кликнув по выделенной области, нажимаемна пункт “Преобразовать в символ”, после этого откроется диалоговое окно какпоказано на рисунке 2.12.
в нем нас интересуют лишь два параметра – имя итип символа.31Рисунок 2.12 – диалоговое окно “Преобразовать в символ”.Далее нам следует ввести следующие параметры – имя символа (пожеланию (оно должно характеризовать то, что оно обозначает)) и его тип, этонаглядно показано на рисунке 2.13.Рисунок 2.13 – Нужные параметры кнопки.После этого мы должны разместить наши кнопки в сцене, делается это оченьпросто. Выделяем нажатием нашу кнопку и тянем, с зажатой левой кнопкоймыши, символ на его место в сцене как показано на рисунке 2.14.32Рисунок 2.14 – нужное расположение элементов.Далее нужно сделать графику состояний кнопки.
Чтобы сделать это нужнодважды кликнуть по нашей кнопке, рабочая область изменится (все что неотносится к символу будет недоступно и слегка засвечено), также изменится ивременная шкала (Рис. 2.14).Рисунок 2.14 – временная шкала символа типа “Кнопка”.Теперь нужно кликнуть в место слоя 1 кадра “Over” правой кнопкой мыши,откроется контекстное меню, там находим и выбираем пункт “Добавитьключевой кадр". Кадр “Over” активируется при наведении курсора на кнопку, азначит никаких значительных изменений быть не должно. В кадре “Over” мыизменим лишь цвет заливки на чуть более светлый (с #666666 на #797979), дляэтого мы должны выделить наш рычаг и обратить внимание на вкладку“Свойства”, там в пункте “Заливка и обводка” рядом с символом инструмента“Заливка” есть небольшой прямоугольник с используемым в данный моментцветом, кликаем по нему и как показано на рисунке 2.15 изменяем цвет.33Рисунок 2.15 – Меню изменения цвета заливки.Далее по схожей схеме создаем третий кадр “Down”, он активируется принажатии на кнопку.
В третьем кадре нужно будет изменить цвет заливки, формуи по желанию добавить что-либо обозначающее изменение положения кнопки.В результате у вас должно выйти примерно, как на рисунке 2.16.Рисунок 2.16 – Конечный вид нажатой кнопки.На нашей временной шкале остался кадр с названием “Hit”, он являетсявизуализацией той области где нажатие мыши на кнопку будет засчитано.Выглядеть он может как вам угодно, в моем случае это будет прямоугольник(Рис.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
