Выбор условия начала анимации

Создание пошаговой анимации начинается с выбора Event — условия, когда начнет проигрываться анимация. Существует пять условий:

· Element on Screen — анимация начинается при появлении элемента на экране;

· Block on Screen — анимация начинается при появлении на экране всего текущего блока;

· On Scroll — анимация запускается и продолжается во время скролла;

· On Hover — анимация появляется при наведении на элемент;

· On Click — анимация начинается при клике на элемент.

Рисунок 4 – выбор условия

У начала анимации есть дополнительные опции Start Trigger, Loop и Trigger Offset.

• Start Trigger — это то, к чему будет привязана анимация или что будет являться ее триггером. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom);
• Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;
• Loop — это опция зацикливания анимации.

Рисунок 5 – выбор события

C помощью опции Test и кнопок Play Element / Play All можно проиграть анимацию этого элемента или всех элементов в блоке.

Добавление шагов анимации.

Первый шаг, задан по умолчанию — это Start. Далее нужно добавлять шаги и на каждом шаге менять свойства элемента. Так элемент будет меняться. Чтобы добавить шаг, нажмите на кнопку Add Step. Между шагами можно переключаться. При этом синяя обводка элемента означает стандартное состояние, зеленая — редактирование шага.

Замечание. Чтобы изменить начальное состояние объекта, например, чтобы объект в начале был невидим (значение Opacity равное нулю), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд.

У каждого шага есть набор свойств:

Duration — длина анимации в секундах;

Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;

Scale — процент увеличения или уменьшения элемента к концу этого шага;

Opacity — значение прозрачности элемента к концу шага;

Rotate — поворот элемента в градусах к концу шага;

Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;

Delay — задержка перед выполнением анимации.

Анимация — это добавление шагов и изменение свойств элемента на каждом шаге. Так создаётся какой-либо сюжет вашей анимации в Zero.

Например, добавляем на нашу область объект. Нажимаем на него, прокручиваем настройки до кнопки ADD и нажимаем на неё. Выбираем Event -> «Element on Screen» и добавляем новый шаг (Step). Двигаем наш объект, добавляем шаг и опять двигаем (если нужно) и т.д. Между шагами можно переключаться, поэтому нам не составит труда вернуться, к примеру, на третий шаг, сделать его невидимым. А на четвёртом можно сделать прозрачность на 100%.

Для удобства просмотра выполненной анимации, откройте две вкладки. В одной из них откройте редактор Zero, а в другой эта же страница, но в режиме предпросмотра. Когда в редакторе Zero анимация будет сделана и сохранена (Save), а значит изменения будут отображаться на странице предпросмотра.

  3.5. Задание и критерии оценивания лабораторного занятия

Создать аниматику по одной из предложенных тематик:

1. Монстры, приведения, НЛО;

2. Страны юго-восточной Азии;

3. Популярные исполнители(ь);

4. История Тюмени;

5. Премия Дарвина;

6. Спортсмены России;

7. Корги (или другие животные);

8. Географические объекты;

9. Тема на ваше усмотрение.

Критерии:

1 балл – создана аниматика с применением одного ресурса (технологии в zero block).

1 балл – создана аниматика с применением ещё одного ресурса (технологии в zero block).

1 балл – создана аниматика с применением ещё одного ресурса (технологии в zero block).

1 балл – есть WOW-эффект (или прослеживается общая связь между созданными аниматиками)

Контрольные вопросы

1. Что представляет из-за себя «Нулевой блок»?

2. Какая существует анимация в тильде?

3. Назовите базовую анимацию и её опции.

4. Чем отличается Fixing от Parallax?

5. При каких условиях бывает начальная анимация?

6. Как добиться непрерывной анимации?

7. Как добавить объект «Button» в Zero?

8. Как работает тригер анимации?

9. Как добавить Steps для объекта «Text»?

Лабораторная работа №4

ИГРОСТРОЕНИЕ

Цель работы: Ознакомиться с ресурсами для создания игр и выполнить практическое задание.

Порядок выполнения работы:

1. Ознакомиться с онлайн конструктором текстовых игр Apero.

2. Ознакомиться с онлайн ресурсом для создания квестов и викторин Quest-book.

3. Ознакомиться с мультимедийным онлайн конструктором для создания игр и мультфильмов Scratch.

4. Выполнить практическое задание.

Apero.

Apero – это конструктор для создания текстовых игр, быстрый в освоении. Структура языка очень похожа на URQL. Синтаксис языка построен таким образом, что все символы базовых конструкций можно набирать, не меняя раскладки клавиатуры на русском языке. Это очень удобно, когда, что называется, нашло вдохновение, и нет времени спотыкаться об англоязычные операторы. Код для Аперо – это обычный текст, размеченный особым образом. Для работы необходимо зарегистрироваться и нажать кнопку создать игру. В появившихся окнах необходимо написать название и описание игры. Вся работа будет происходить в окне «Редактировать исходный код:», для компеляции кода и проверки игры, есть кнопка «Тестовый запуск игры».

Основы работы платформы Аперо: начиная с первой строчки она перебирает весь текст по очереди и выводит его на экран пользователю, чтобы остановить платформу и не показывать весь текст сразу, необходимо написать «\СТОП». Обратный слэш – это специальный символ для платформы, чтобы она понимала, что это команда, а не обычный текст.

Пример:

Рисунок 1 – пример кода для Apero

В тестовом запуске игрок увидит следующее:

Рисунок 2 – пример экрана Apero

Для перехода от одного куска кода к другому, необходимо разбить код на отдельные участки или по другому «Локации». Чтобы различать локации между собой, они должны иметь свои названия. Причем уникальные, то есть названия локаций не должны повторяться. Правильное имея локации задаётся только кириллическими или латинскими символами в нижнем регистре и знак «_» для разделения слов в имени переменной. Названия локаций не будет видно игроку, это служебная информация для автора. Пример:

Рисунок 3 – пример структуры игры для Apero

После запуска будет виден текст только первой локации, чтобы переходить на другие локации, необходимо использовать кнопки. Кнопка создаётся так:

Рисунок 4 – пример кода кнопки в Apero

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

Пример:

Рисунок 5 – пример кнопки в Apero

 

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

Пример:

Рисунок 6 – пример ошибки в коде для Apero

Что будет видно игроку:

Рисунок 7 – пример ошибки в Apero

 

Quest - book.

Quest-book – это ресурс для создания интерактивных историй, квестов или викторин. Для работы необходимо зарегистрироваться и нажать кнопку «+создать». В появившемся окне необходимо выбрать «Создать сторигейм», далее нужно заполнить поля: «Название», «Краткое описание», «Полное описание» и необязательное поле, чтобы загрузить картинку на обложку. Нажав кнопку редактировать можем приступить к работе.

Принцип создания игр похож на Apero, весь сюжет разделяется на локации, называемые здесь параграфами. Пример:

Рисунок 8 – рабочая зона в Quest-book

В отличии от Apero в Quest-book есть возможность добавления в параграфы Изображений, размерностью до 1 МБ.

Пример:

Рисунок 9 – рабочая зона для загрузки изображения в Quest-book

Переходы между параграфами осуществляются с помощью добавляемых кнопок «Действие и переходы для игрока». Для создания нового параграфа здесь присутствует кнопка «Перейти на указанный параграф». Пример:

Рисунок 10 – рабочая зона для действия в Quest-book

Для подсчёта баллов в викторине или создания вещей в игре на платформе присутствует блок «Ресуры».

Пример:

Рисунок 11 – рабочая зона подсчета баллов в Quest-book

Для изменения ресурсов или назначения условий на действия рядом с кнопкой «Перейти на указанный параграф» расположено меню «Расширенная настройка действия».

Пример:

Рисунок 12 – рабочая зона настройки в Quest-book

Для удобного просмотра сюжета имеется раздела «Схема», в котором отображаются все параграфы и куда ведут кнопки.

Пример:

Рисунок 13 – визуализированная схема игры в Quest-book

Scratch.

Scratch – это визуальный язык, программировать на котором очень просто. С его помощью можно создавать самые разные программы. Scratch отлично подходит для создания игр и анимации. Для него есть обширные наборы (библиотеки) картинок и звуков, с которыми можно работать.

Основными компонентами Скретч-программы являются объекты-спрайты. Спрайт состоит из графического представления — набора кадров-костюмов и сценария-скрипта. Для редактирования костюмов спрайтов в скретч встроен графический редактор. Действие Скретч-программы происходит на сцене размером 480×360 (условных) пикселей с центром координат в середине сцены.

Рисунок 13 – рабочая зона в Scratch

Для программирования сценариев в скретче используется drag-and-drop-подход: блоки из палитры блоков перетаскиваются в область скриптов.

По функциональному назначению блоки делятся на 8 групп, принадлежность блока к той или иной группе обозначается его цветом(таблица 1):

Таблица 1 – Цветовое обозначение функциональных блоков

Группа	Примечание
Движение	Управляют движением спрайта
Внешний вид	Управляют внешностью спрайта
Звук	Управляют звуком спрайта
События	Заголовки обработчиков событий
Управление	Управляющие конструкции
Сенсоры	Опрос устройств ввода
Операторы	Арифметико-логические операции
Переменные	Использование переменных

У многих блоков имеется редактируемое белое поле для вводимых скретч-программистом параметров.

Блоки бывают трёх видов: блоки стека, блоки заголовков и блоки ссылок.

Блоки стека сверху имеют выемку, а снизу — выступ, с их помощью они объединяются в группу блоков, называемую стеком. Стеки можно копировать и перемещать как единый блок. Особой разновидностью блоков стека являются управляющие конструкции, такие как циклы — они имеют С-образную форму, и могут охватывать собой вложенный стек скретч-блоков.

Блоки заголовков имеют выпуклый верхний край и выступ для объединения снизу — они образуют заголовки скретч-стеков. К блокам-заголовкам относятся блоки «когда …» из группы «События», позволяющие организовать обработчики сообщений: внешних — от клавиатуры и мыши, и внутренних — передаваемых между спрайтами и позволяющих объектно-ориентированное программирование в smalltalk-стиле.

Наконец, блоки ссылок предназначаются для заполнения внутренних полей других блоков.

Пример:

Рисунок 14 – пример кода в Scratch

4.4 Практическое задание.

В одном и ресурсов создать игру:

В Apero создать игру с продуманным сюжетом на 15-25 игровых действий и минимум 3 разными концовками.

В Quest-book создать викторину на 10 и более вопросов, с отображением количества правильных ответов.

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

Контрольные вопросы:

1. Какой командой необходимо обозначать конец локации в Apero?

2. Какие 2 параметра записываются в скобках при объявлении кнопки в Apero?

3. Как создаются новые параграфы в Quest-book?

4. Какой подход используется для программирования в Scratch?

5. Действие Scratch программы происходит на сцене размерностью?

6. Каких видов бывают блоки в Scratch?

Лабораторная работа № 5

РЕАЛИЗАЦИЯ ГРУППОВОГО ПРОЕКТА: ПЛАНИРОВАНИЕ ПРОЕКТА

Цель работы: Объединить полученные ранее знания визуализации данных при помощи цифровых инструментов и сформировать концепцию для их применения в рамках реализации исследовательского проекта.

Порядок выполнения работы:

1. Рассмотреть цели и задачи проекта согласно темы научного исследования, определить возможность использования цифровых форм представления данных для реализации проекта.

2. Сформировать идеи для использования цифровых инструментов в проекте и описать сценарии реализации.

3. Осуществить подбор мультимедийного контента для использования цифровых инструментов в проекте.

4. Осуществить подбор цветовых решений в соответствие с темой и концепцией проекта.