ОБУЧЕНИЕ СТУДЕНТОВ СРЕДНЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ СОЗДАНИЮ ВЕБ-АНИМАЦИИ

Раздел: Современные педагогические и информационные технологии в образовательном процессе

Журнал: Материалы XIX Международной научно-практической конференции «Технологическое обучение школьников и профессиональное образование в России и за рубежом»

27 февраля 2025 г.

Авторы: Читайло Кристина Сергеевна , Пеннер Эмилия Алексеевна

Информационно-коммуникационные технологии в педагогическом образовании, 2025. № 1 (94). infed.ru

_______________________________________________________________________

УДК 377.5

Э. А. Пеннер, К. С. Читайло

E. A. Penner, K. S. Chitailo

Пеннер Эмилия Алексеевна, студентка, КГПИ ФГБОУ ВО «КемГУ», г. Новокузнецк, Россия.

Читайло Кристина Сергеевна, ассистент, КГПИ ФГБОУ ВО «КемГУ», г. Новокузнецк, Россия.

Penner Emilia Alekseevna, student, Kuzbass Humanitarian Pedagogical Institute of Kemerovo State University, Novokuznetsk, Russia.

Chitailo Kristina Sergeevna, assistant, Kuzbass Humanitarian Pedagogical Institute of Kemerovo State University, Novokuznetsk, Russia.

ОБУЧЕНИЕ СТУДЕНТОВ СРЕДНЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ СОЗДАНИЮ ВЕБ-АНИМАЦИИ

TRAINING STUDENTS OF SECONDARY VOCATIONAL EDUCATION IN CREATING WEB ANIMATION

Аннотация. Статья посвящена методической разработке по созданию веб-анимации для студентов среднего профессионального образования. В статье раскрыты понятие «анимация», «веб-анимация». Рассмотрен опыт педагогов в данном направлении. Описана методика создания step-by-step анимации на платформе Tilda.

Annotation. The article is devoted to methodological development for students of secondary vocational education on creating web animation. The article reveals the concepts of «animation» and «web animation». The experience of teachers in this direction is considered. A technique for creating step-by-step animation on the Tilda platform is described.

Ключевые слова: веб-анимация, среднее профессиональное образование, веб-технологии, дизайн.

Keywords: web animation, secondary vocational education, web technologies, design.

Актуальность обучения студентов технологии создания веб-анимации заключается в том, что сейчас - во времена развития передовых технологий и прогресса цифрового общества, необходимы специалисты, имеющие высокий уровень компетентности в данном направлении. Цифровые технологии с каждым годом активнее проникают во все сферы жизни и помогают организовать деятельность человека. В следствии этого умение работать с ними становится все более приоритетнее на рынке труда, в том числе и на российском.

Подготовка студентов среднего профессионального образования (далее СПО) к работе с цифровыми технологиями приобретает особую значимость в условиях стремительного технологического прогресса.

Навык разработки веб-анимации можно отнести к так называемым hard skils, связанным с профессиональных знаниями и умениями. Для дополнительной мотивации студентов к развитию данных навыков, существуют различные конкурсы. Так, например, «Worldskills» – международная некоммерческая ассоциация, целью которой является проведение профессиональных соревнований различного уровня и направления для молодых людей. Одним из направлений чемпионатов является «DigitalSkills», связанное с разработками веб-технологий.

Обратившись к образовательным программам СПО по направлению подготовки 54.01.20 Графический дизайнер и 54.02.01 Дизайн (по отраслям), видим, что в вариативной части междисциплинарных курсов, встречаются дисциплины, направленные на получение навыков по созданию различных видов анимации.

Рассмотрим подходы к определению анимации, пониманию ее сущности.

В толковом словаре глагол «анимировать» означает «создавать анимацию, движущихся изображений неподвижных объектов (воображаемых или реальных)» [2].

В энциклопедии Кольера можно встретить следующее определение: «анимация – технология, позволяющая при помощи неодушевленных неподвижных объектов создавать иллюзию движения; наиболее популярная форма – мультипликация, представляющая собой серию рисованных изображений» [6].

Говоря о веб-анимации, можно обратиться к трактовке разработчиков онлайн-платформы для создания веб-публикаций Tilda: «веб-анимация – это трансформация элементов на веб-странице, меняющих свое положение, прозрачность, форму и размеры» [1].

Существуют различные классификации анимации. Рассмотрим лишь некоторые. По задачам выделяют функциональную анимацию – направленную на взаимодействие пользователя с интерфейсом, и эстетическую – ее роль заключается в привлечении внимания, оживления веб-страницы, придания ей динамичности. По способу создания выделяют следующие анимации: CSS, основанную на работе с каскадными таблицами стилей, SVG, связанную с тегами HTML, Java Script, использующая программный код, и WebGL, позволяющую встроить трехмерные объекты в веб-страницу [4].

Но, существует иной вид анимации, не требующий навыков кодирования. Это Step-by-step анимация – вид реализации компьютерной анимации, при которой создаются пошаговые кадры, показывающие основные изменения элементов макета, прототипа или веб-страницы на экране. Данный вид анимации широко реализован на платформах Figma – сервисе разработки прототипов и интерфейсов, и онлайн платформе для создания веб-сайтов Tilda.

Технология создания step-by-step анимации включает в себя последовательные шаги трансформаций элементов, а также возможность взаимодействия пользователя с ними. Аниматор выбирает событие начала анимации: клик, скролл, наведение на элемент или появление элемента, затем добавляет шаги анимации и изменяет свойства элементов: положение, размер, скорость движения, прозрачность и угол поворота. Именно данный вид анимации мы использовали в нашей работе. Но прежде был изучен опыт других педагогов по обучению студентов созданию анимации.

Так, А. В. Бирюкова создала курс для обучения студентов в сфере создания двухмерной анимации в программе Toon Boom Studio, в котором описан процесс анимирования в разных режимах, интерфейс и инструменты. Благодаря этому курсу студенты могут освоить программу для анимации и воспользоваться знаниями в профессиональной сфере [3].

А. Г. Окуловская поделилась своим опытом по созданию курса анимационной компьютерной графики, в рамках которой студенты знакомятся с анимацией и получают навыки работы с векторной и растровой графикой, а в дальнейшем создают свой собственный анимационный фильм. Данный курс направлен на получение навыков создания анимации в программах GIF Animator Pro, Movie Maker, Blender и др., приобретение полезного опыта в проетировании сценария, реализации монтажа и наложения звука [5].

Опишем опыт создания методической разработки по обучению студентов steb-by-step анимации.

Целью методической разработки является облегчение овладения студентами СПО программы профессионального модуля, включая базовые профессиональными компетенции в области веб-анимации.

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

Данная методическая разработка была создана для студентов 2-3 курса, обучающихся по программе среднего профессионального образования по направлению подготовки 54.01.20 Графический дизайн 54.02.01 Дизайн (по отраслям).

Идея данной работы заключается в создании реалистичной проекции стены и реализации механизма свечения на гирлянде с помощью технологии step-by-step анимации (рис. 1).

Рисунок 1. Пример реализации проекта по step-by-step анимации

При выполнении этой работы можно выделить несколько этапов.

Этап 1. Ознакомление с ходом выполнения работы. Здесь студентом необходимо приготовить свое рабочее пространство, рассмотреть данную разработку и скачать необходимые файлы.

Этап 2. Реализация проекта. На этом этапе студенты начинают новый проект. Проходит регистрация на платформе Tilda. Дальше создается сайт и новая страница, где и будет проходить пошаговое создание светящейся гирлянды. Вставки из методической разработки предоставлены ниже.

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

Рисунок 2. Отрывок из методической разработки
по созданию анимации розетки

На рисунке 3 показан этап анимации свечения гирлянды. Благодаря определенным настройкам, возможно сделать реалистичное мигание лампочек.

Рисунок 3. Отрывок из методической разработки
по созданию анимации гирлянды

3 этап. Творческий элемент. После повторения основных этапов в проекте студенты могут попробовать добавить изюминки и изменить различные настройки. Например, поменять цвет свечения, добавить или заменить различные фотографии, сделать другого цвета стену и т.д.

4 этап. Демонстрация. После реализации этих проектов студенты показывают свои работы и объясняют свои идеи.

Разработка была апробирована на студентах второго курса направления 44.03.04 Компьютерный дизайн. Студенты справились с выполнением предложенной анимации, а также смогли добавить свои креативные, самостоятельно разработанные анимационные элементы.

Хотим отметить сильные и слабые стороны методической разработки. К сильным сторонам отнесем: доступность, логичность структуры изложения материала, наличие творческой составляющей. Слабым местом можно считать недостаточную наглядность иллюстрации, заключающуюся в нехватке указателей для взаимодействия студентов с интерфейсом окна настройки анимации. Решение данной проблемы видится в создании более подробных иллюстраций.

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

Список литературы

Плющева, Я. Анимация в вебе / Яна Плющева. – URL : https://tilda.education/courses/webanimation/baseanimation/ (дата обращения : 13.11.2024). – Текст : электронный.
Анимировать. // Викисловарь : [сайт]. – Текст : электронный. – URL : https://ru.wiktionary.org/wiki анимировать (дата обращения : 04.12.2024).
Бирюкова, А. В. Изучение двухмерной анимации на базе программы Toon Boom Studio с целью получения профессиональных навыков / А. В. Бирюкова. – Текст : электронный // Вестник Марийского государственного университета, 2011. – № 7. – URL : https://cyberleninka.ru/article/n/izuchenie-dvuhmernoy-animatsii-na-baze-programmy-toon-boom-studio-s-tselyu-polucheniya-professionalnyh-navykov (дата обращения : 29.11.2024).
Гамов, А. Гайд по веб-анимации / Алексей Гамов. – Текст : электронный // WebValley Studio : [сайт]. – URL: https://web-valley.ru/articles/vidy-animacii (дата обращения : 04.12.2024).
Окуловская А. Г. Анимационная компьютерная графика как учебная дисциплина / А. Г. Окуловская – Текст : непосредственный. // Наука. Информатизация. Технологии. Образование : материалы XIV международной научно-практической конференции, г. Екатеринбург, 1-5 марта 2021 г. – Екатеринбург : Издательство РГППУ, 2021. – С. 364-368.
Анимация : Энциклопедия Кольера // Словари онлайн: [сайт]. – URL: https://entsiklopediya-kolera.slovaronline.com/695-АНИМАЦИЯ. (дата обращения: 08.11.2024). – Текст : электронный.

PDF