m2004321/Git

Проект в данном репозитории является работой по созданию образовательных материалов и их визуального сопровождения в качестве апробации метода, разработанного в ходе дипломной работы. Сам метод представляет собой алгоритм-инструкцию, объединяющую в себе последовательность алгоритмов на разных этапах процесса создания образовательных материалов, подробно объясняющий как создавать образовательные материалы и их визуальное сопровождение с помощью библиотеки Motion Canvas: 1. Анализ предметной области и целевой аудитории 1.1. Исследовать существующую информацию по предметной области для получения представления о текущем состоянии знаний

1.2. Проанализировать целевую аудиторию

    -    Определить возрастные группы, уровень знаний, психологические и поведенческие особенности

    -    Выявить на основе этих данных представления о потребностях и запросах целевой аудитории

 1.3. Сформулировать образовательные цели и желаемые результаты, которые выражаются в необходимых для усвоения в процессе обучения навыков и знаний.

2. Планирование

2.1. Определить ключевые темы для каждого модуля

2.2. Определить последовательность тем, с учетом сложности и взаимосвязи

2.3. Назначить временные рамки для изучения образовательного материала

3. Составление текстового содержания и планирование визуального

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

3.2. Определить ключевые моменты в тексте, которые требуют визуализации

3.3. Разработать план сцен для анимации и указать ключевые темы и переходы между ними

4. Создание анимационного сопровождения с помощью библиотеки Motion Canvas

4.1. Установить на персональный компьютер среду разработки, поддерживающую языки JavaScript или TypeScript.

4.2. Создать папку, где будет находиться весь проект.

4.3. Установить в папку проекта с помощью командной строки библиотеку Motion Canvas:

    -      Открыть в командной строке папку с проектом и с помощью команды «npm init @motion-canvas@latest» создать в ней Motion Canvas проект.

    -         Выбрать язык проекта и способ экспорта анимации.

    -      С помощью команды «npm install» установить необходимые зависимости.

    -      Для проверки правильности установки написать команду «npm run serve», которая запустит сервер с отображением анимации.

 4.4. Установить в папку проекта с помощью командной строки библиотеку Taiwind CSS для дальнейшего использования палитры цветов tailwind colors:

    -      Открыть в командной строке папку с проектом и с помощью команд «npm install -D tailwindcss» и «npx tailwindcss init» установить библиотеку.

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

 4.6. Открыть проект в среде разработки

4.7. Создать в нем папку src, папку с названием или номером урока, папку с номером темы урока и папку scenes для анимации темы по сценам.

4.8. Создать файл с по примеру имя_проекта.tsx, в котором будет хранится анимация сцены

4.9. Зайти в документацию библиотеки и скопировать оттуда код необходимого компонента или шаблона.

4.10. Настроить скопированный компонент для адаптации под свой материал

4.11. Создать файл project.ts по следующему пути src/project.ts

4.12. Импортировать в него созданную в предыдущем файле сцену и прописать, что она идет на экспорт представленным в листинге 2 образом:

Листинг 2:
import {makeProject} from '@motion-canvas/core';  
import file_name (название файла со сценой) from './scenes/file_name?scene';  
export default makeProject({  
scenes: [file_name],
})

4.13. Запустить проект в среде разработки

4.14. Перейти в открывшийся в браузере интерфейс редактора анимации

4.15. Запустить анимацию и проверить правильность ее работы.

4.16. Если необходимо добавить аудиодорожку по описанным ниже шагам, если необходимости нет, переходите к пункту 5.
    -      Создать в папке с проектом папку audio и загрузите в нее аудиофайл
    -      В файл с анимацией добавить вначале кода следующую строчку:
        import audio from '../audio/имя_файла.mp3';
    -      Добавить в файл project.ts аудио внутрь экспорта по примеру, приведенному в листинге 3.
     Листинг 3
     export default makeProject({
     scenes: [file_name],
     audio: audio,
     });
    -      Запустить проект в среде разработке и проверить, что в открывшимся интерфейсе появилась звуковая дорожка с вашим аудиофайлом.

5. Интеграция или экспорт полученного сопровождения в необходимый формат

5.1. Если необходимо сохранить результат в jpg формате, если необходимости нет, перейти к пункту 6
    -      Запустить свой проект в среде разработки
    -      В открывшимся в браузере интерфейсе для настройки и просмотра анимации нажать на иконку в виде видеокамеры
    -      В открывшихся настройках нажать кнопку RENDER

5.2. Если необходимо экспортировать результат в формате mp4, если необходимости нет, перейти к пункту 6

    -        Открыть в командной строке папку с проектом и с помощью команды «npm install --save @motion-canvas/ffmpeg» установить туда видео-экспортер
    -        В файле vite.config.ts проекта добавить строчки кода по примеру листинга 4
 Листинг 4
 import {defineConfig} from 'vite';
 import motionCanvas from '@motion-canvas/vite-plugin';
 import ffmpeg from '@motion-canvas/ffmpeg';
 export default defineConfig({
 plugins: [
 motionCanvas(),
 ffmpeg(),
 ],
 });
    -       Запустить свой проект в среде разработки
    -      В открывшимся в браузере интерфейсе для настройки и просмотра анимации нажать на иконку в виде видеокамеры
    -      В открывшихся настройках нажать кнопку RENDER и выбрать в списке экспортеров Видео

5.3. Если требуется интеграция на цифровые платформы, запушить код в удаленный репозиторий с проектом с помощью системы контроля версий и Gitflic или Github, если необходимости нет, перейти к пункту 6

6. Проверить полученное визуально сопровождение на предмет ошибок

7. Завершить работу над проектом

Описание

Конвейеры