Создание нового файла HTML5 Canvas в Adobe Animate CC

С этого урока Adobe Animate CC мы начинаем работать непосредственно в программе.

Поскольку наша цель — разработка конкретного анимационного проекта, поэтому начнем с создания нового файла HTML5 Canvas для него.

Экран Приветствия (Welcome Screen)

Перед нами, так называемый, Экран Приветствия Adobe Animate (Welcome Screen), который появляется сразу после запуска программы.

Adobe Animate Экран Приветствия

Экран делится на 3 колонки.

В левой — список файлов, которые открывались последними. Если кликнуть на одном из них, то он откроется и мы можем продолжить работу над этим файлом.

В правой колонке — ссылки на обучающие ресурсы: как начать работать с Adobe Animate CC, новые возможности программы и т.п.

Чтобы Экран Приветствия больше не появлялся после запуска программы кликните на чек-боксе Don't show again (Больше не показывать).

Кнопка Больше не показывать Экран Приветствия

Если Вы захотите восстановить его по каким-то причинам, то в Главном меню выберите:
Edit → Preferences → General → Reset All Warning Dialogs (Редактирование → Свойства → Главные → Восстановить все предупреждения).

Кнопка Восстановить все предупреждения

Создание нового файла HTML5 Canvas

Чтобы создать новый файл — выбираем в центральной колонке Экрана Приветствия самую верхнюю опцию: HTML5 Canvas.

Создание нового файла HTML5 Canvas в Adobe Animate CC

Вы, уже наверняка, знаете, что canvas — это html-тег, который можно использовать для создания растровой графики с помощью языка программирования JavaScript.

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

Движок последнего использует язык программирования ActionScript, созданный компанией Adobe. Flash Player является проектом с закрытым кодом, поэтому сторонние разработчики не могут вносить в него изменения или писать для него расширения.

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

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

  • createjs.js (используется в Adobe Animate)
  • dynamics.js
  • cta.js
  • bounce.js
  • velocity.js и др.

Буквально два слова о других типах файлов, которые мы можем создавать в Adobe Animate.

WebGl — использует тег canvas для создания трехмерной графики и ее просмотра в веб-браузерах.

ActionScript 3.0, AIR for Desktop и все, что ниже в центральной колонке — это типы файлов, которые воспроизводятся Flash Player'ом, либо в среде Adobe AIR. В рамках этого курса мы их рассматривать не будем.

Итак, нажимаем на кнопку HTML5 Canvas. Программа создает новый файл. Перед нами рабочее пространство Adobe Animate CC.

Рабочее пространство Adobe Animate CC

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