Annie2x — это отличный плагин Adobe Flash, который легко интегрируется с AnnieJS.

С помощью Adobe Flash можно без проблем продолжить работу над проектами на as3, которые были начаты ранее.

AnnieJS — это 2D-движок анимации, ориентированный на расширение возможностей Flash в любых приложениях, где требуется взаимодействие. В настоящее время он поддерживает экспорт во Html5, WeChat Mini Programs и WeChat mini games.

AnnieJS полностью повторяет синтаксис и архитектуру as3. Анимационные эффекты плавные, а визуальные эффекты потрясающие, при этом процесс обучения прост, а установка удобна!

AnnieJS поддерживает две среды разработки: ts и js. Вы можете использовать язык, с которым вы знакомы, для разработки.

Самым большим преимуществом AnnieJS является его компактность. Весь основной код после сжатия составляет менее 70 КБ, но при этом все необходимые функции присутствуют.

Для того чтобы в полной мере использовать преимущества AnnieJS, необходимо использовать его в сочетании с инструментами Adobe и Annie2x.

В чём разница и преимущество AnnieJS по сравнению с CreateJs?

Нельзя не признать, что CreateJs — отличный инструмент, но изначально он был разработан без учёта приоритета мобильных устройств, и большая часть логики и суждений для мобильных устройств не имеет смысла.

CreateJs также вызывает головную боль из-за своей мышиной прозрачности. Верхние слои объектов не могут блокировать события, которые продолжают всплывать, что очень неприятно.

События мыши в CreateJs также вызывают головную боль. Если ваша кнопка имеет прозрачное или почти прозрачное место, то это место вообще не может получить событие мыши.

При создании нескольких проектов fla в CreateJs необходимо самостоятельно организовать компоновку, сжатие ресурсов и сборку. Кроме того, нам самим нужно построить проект.

Что касается интерактивных проектов, чем меньше основная библиотека, тем лучше. Очевидно, что основная библиотека CreateJs слишком велика.

После длительного использования CreateJs автор AnnieJS провёл большую оптимизацию и работу, чтобы создать текущий движок AnnieJS. Он переопределил рабочий процесс разработки Flash H5. Давайте посмотрим на конкретные преимущества ниже.

Подготовка к использованию

1. Установите Gulp — инструмент сборки.
2. Если вы используете TypeScript, вам необходимо установить node.js и среду выполнения TypeScript.
3. Настоятельно рекомендуется использовать WebStorm. Весь наш исходный код и проекты также создаются с использованием этого инструмента.
4. Установите Adobe Flash CC 2015 или более позднюю версию или Adobe Animate CC 2015 или более позднюю версию.
5. Мы настоятельно рекомендуем использовать браузер Google Chrome для отладки.
6. Загрузите плагин Annie2x с официального сайта.
7. Загрузите установщик плагинов ZXPInstaller и установите плагин Annie2x.

Пробная версия

1. После установки всех необходимых инструментов создайте новый файл Fla Annie2x — обратите внимание, что тип файла — Annie2x (Custom).
2. Откройте панель настроек с помощью Ctrl+Shift+F12 и выберите язык, который вы знаете, или язык, для которого не требуется настройка. Нажмите Ctrl+Enter, чтобы успешно опубликовать.
3. Проект после публикации находится в том же каталоге, что и файл fla. Откройте этот проект с помощью WebStorm. Это очень важно, потому что если вы дважды щёлкнете index.html после публикации, вы не увидите никакого эффекта.
4. Если это проект, опубликованный на языке TS, вам нужно запустить команду tsc в окне терминала под WebStorm, дождаться завершения компиляции, а затем выполнить шаг 6. Если это JS-проект, пропустите этот шаг.
5. Найдите index.html в открытом проекте WebStorm и нажмите зелёную треугольную кнопку «Выполнить» (Run) рядом с ним. Вы увидите результаты своей работы.

Использование нескольких файлов fla для создания крупных проектов

Обычно один человек не может завершить весь проект в одиночку, и один файл fla также не может быть завершён. Annie2x также поддерживает разделение и объединение нескольких файлов fla для одного проекта, что также очень удобно и просто.

Определив используемый язык разработки, все должны использовать один и тот же язык. Если у вас есть глубокое понимание структуры Annie2x, вы также можете смешивать разработку. Разработка в основном делится на два случая.

A. Один человек объединяет и разрабатывает: 1. Поместите все готовые файлы fla в один каталог. 2. Откройте каждый файл fla с помощью Flash и настройте каталог публикации каждого файла fla на одно и то же имя каталога в панели инструментов Annie2x. 3. При публикации все файлы fla публикуются в указанном вами каталоге, но они не будут мешать друг другу или перекрываться. 4. В то же время вы можете разрабатывать соответствующие модули отдельно. 5. Используйте метод annie.loadScene для распределённой загрузки или одновременной загрузки всех модулей проекта. 6. Добавьте код загрузки и другие коды. 7. Если вам нужно изменить содержимое файла fla во время разработки, вы можете передать соответствующий файл fla аниматору для доработки, а затем заменить его после завершения. 8. Наконец, протестируйте и упакуйте его для выпуска.

B. Несколько человек разрабатывают, и один человек объединяет: 1. Разработчики каждого модуля fla публикуют свои проекты на своих компьютерах, но все разработчики должны публиковать их в одном и том же каталоге. 2. Когда разработка каждого модуля функции завершена, передайте файлы fla и каталоги src и resource (или каталоги tsSrc и resource, если это разработка на TS) разработчику, объединяющему проект. 3. Разработчик, объединяющий проект, помещает все файлы fla в один каталог и создаёт новый каталог публикации в каталоге fla. Имя каталога публикации должно быть определено всеми как единое целое. 4. Поместите каталоги src и resource в каталог публикации. 5. Откройте все файлы fla с помощью инструмента Flash2x и опубликуйте их снова. 6. Следующие шаги такие же, как и при объединении и разработке одним человеком.

Упаковка, сжатие и публикация окончательного издания

Инструмент для упаковки в настоящее время — Gulp.

Схема сборки и упаковки с помощью Gulp:

1. Настройте Glup.
2. В WebStorm откройте окно терминала и введите команду 'npm install'. Это установит соответствующие компоненты Node.js, и установка будет завершена.
3. После завершения установки введите команду gulp в терминале, чтобы начать упаковку.
4. Если во время процесса упаковки возникает ошибка, обычно это связано с тем, что каталог инструментов в текущем каталоге не имеет прав на выполнение. Измените права доступа к каталогу инструментов и снова запустите команду gulp.
5. После успешной упаковки окончательный контент будет создан в каталоге released текущего каталога.

Вы можете просматривать информацию об отладке в консоли vConsole в main.js или main.ts, установив значение annie.debug равным true.

Как обновить движок и инструменты?

Если на официальном сайте есть новая версия, просто загрузите её с помощью установщика и замените старую версию.

Список обновлений AnnieJS

Версия 3.2.5 добавляет поддержку iOS 16 для веб-приложений.

Версия 3.2.5:

• Метод annie.ajax теперь поддерживает мини-программы и мини-игры.
• Исправлена ошибка, из-за которой annieUI.Scroller иногда становился белым при прокрутке.
• Частичная оптимизация кода.

Версия 3.2.4:

• Объединяет ветки NodeJS, мини-программ и мини-игр движка AnnieJS в одну основную ветку для управления и компиляции.
• Исправляет ошибку, из-за которой метод annie.toDisplayDataURL не мог сделать снимок экрана с прозрачным фоном.
• Исправляет ошибки, связанные с неправильным отображением снимков экрана при наличии маскировки.
• Оптимизирует механизм обновления, делая частоту обновления более разумной и точной.

Версия 3.2.3:

• Исправляет проблему, из-за которой нельзя было стереть нарисованное содержимое, когда annieUI.DrawingBoard установлен на прозрачный фон.
• Исправляет проблемы с чёрным снимком экрана в формате jpeg.
• Переписывает механизм обновления и решает проблему зависания при переходе.