Как сделать переворачивающиеся карточки в презентации
Обновлено: 05.07.2024
В Articulate Storyline по умолчанию встроено громадное количество функций, позволяющих разрабатывать оригинальный интересный учебный контент. К примеру, каждому объекту мы можем добавить анимацию движения по кругу, по прямой или даже по произвольной траектории. Кроме того, объекты могут поворачиваться, скрываться со слайда или, наоборот, влетать на него.
Но к сожалению, зачастую такой анимации не хватает. Некоторое время назад с коллегами мы обсуждали анимацию переворачивающейся карты. Действительно, этот эффект применяется довольно широко, в играх на память, при изучении иностранных языков, чтобы узнать правильный ответ, для изображения подсказок и так далее. Есть множество способов добиться такого эффекта сторонними средствами: создать gif-анимацию с помощью графических редакторов, написать мудрёный javascript, добавить web-object, в котором объединены все предыдущие способы. Однако я предлагаю создать анимацию переворота карты, воспользовавшись ТОЛЬКО штатными средствами Storyline.
В примере ниже нажмите на карту и увидите, какого эффекта мы с вами добъёмся. Для повторения нажмите кнопку в нижней правой части примера.
Чтобы создать такой же пример нам понадобится 5 минут.
Для начала скачайте изображение карты. Можете сохранить эти (я их для вас уже разрезал):
Вставьте изображения в Storyline. Над изображением карты создайте прямоугольник, по ширине такой же как карта. Он нам пригодится.
Создайте дополнительный слой (это опциональное действие на случай, если вы захотите сделать анимацию переворота не только в одну, но и в другую сторону).
На одном слое расположите изображение карты с рубашкой, на другом — с фигурой. Они должны располагаться ровно одно над другим иначе анимация получится так себе (на всякий случай проверьте их положение).
Normal — оставим то же изображение рубашки карты. Продублируем его, нажав Dublicate States.
Второе состояние — сузим изображение карты примерно наполовину. Зажмите клавишу Ctrl, чтобы равномерно сужать изображение карты таким образом, чтобы центр ее оставался на месте. Продублируем состояние, нажав Dublicate States.
Третье состояние — сузим изображение карты еще наполовину. Продублируем состояние, нажав Dublicate States.
Четвертое состояние — сузим изображение еще наполовину. Продублируем состояние, нажав Dublicate States.
Пятое состояние — нажимаем на изображение. Идём во вкладку Format и нажимаем Change Picture. Выбираем картинку карты с фигурой (у нас это дама). Она остается такой же сплющенной, как и картинка с рубашкой, нам это и нужно. Продублируем состояние, нажав Dublicate States.
Шестое состояние — расширим изображение примерно до размеров третьего состояния. Продублируем состояние, нажав Dublicate States.
Седьмое состояние — расширим изображение примерно до размеров второго состояния. Продублируем состояние, нажав Dublicate States.
Восьмое состояние — расширим изображение до размеров состояния Normal. Здесь нам поможет созданный на втором этапе прямоугольник. Выравняйте ширину по нему. Прямоугольник можно удалить.
Итак, у нас есть карта, которая может менять состояния. Теперь сделаем так, чтобы состояния менялись по клику.
Для достижения более реалистичного эффекта более узкие изображения сделайте чуть темнее (во вкладке Format сделайте brightness -10 для состояний 1 и 6; -20 — для состояний 2 и 5; -40 — для состояний 3 и 4).
1. Поставим слайд (слой) на паузу: Pause Timeline on This Slide When timeline starts.
2. При нажатии на изображение запустим время на слайде: Resume Timeline on This Slide When the user clicks
Похожие презентации
Презентация к уроку по математике (2 класс) по теме: Презентация к уроку математики во 2 классе по теме "Приёмы вычислений для случаев вида 36 + 2, 36 + 20"
1 Знаток математики Тренажер Таблица умножения 2 класс Школа 21 века ®м®м.
Результаты ЕГЭ по русскому языку: Школа – 68,03 Город – 65,21 Край – 62,98 2 место среди школ города Высший балл – 98.
1. Определить последовательность проезда перекрестка 1 1 2 3 4.
Таблица умножения на 8. Разработан: Бычкуновой О.В. г.Красноярск. 2010 год.
10 11 12 13 14 15 16 17 18 19 20.
Обществознание Выполняли работу 30 учащихся Порог успешности преодолели 23 учащихся. Не преодолели порог успешности 8 учащихся. Тревогу вызывают 2 учащихся,
1 Знаток математики Тренажер Таблица умножения 3 класс Школа России Масько Любовь Георгиевна Муниципальное общеобразовательное учреждение средняя общеобразовательная.
Качество знаний, успеваемость и СОУ за I полугодие 2013-2014 учебный год.
Деление с остатком 36 : 15 = 2 (ост. ? ) 53 : 12 = ? (ост. 5)
Деление с остатком Презентацию выполнила учитель начальных классов МОУ СОШ 9 г.Сафонова Смоленской области Коровина Ирина Николаевна 36 : 15 = 2 (ост.
Тем, кто учит математику, Тем, кто учит математике, Тем, кто любит математику, Тем, кто ещё не знает, Что может полюбить математику Посвящается…
Я тучи разведу руками. 8 · 7 32 80 8 0 72 48 16 64 24 40 56.
Карточка-перевертыш
При наведении – переход (переворачивание карточки) происходит, когда пользователь наводит указателем мыши на карточку.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
При клике – переход (переворачивание карточки) происходит, когда пользователь, кликает по карточке.
Случайный выбор – карточки сами переворачиваются в случайном порядке.
А теперь давайте разбираться.
Разметка
Как уже было сказано выше, разметка, в основном, состоит из родительского и двух дочерних элементов. Каждый дочерний элемент является лицевой, либо обратной стороной карточки. Вот разметка, которая будет использоваться для каждой карточки:
Как добиться того, чего мы хотим
Ось X: направлена от данной точки по горизонтали
Ось Y: направлена вверх от данной точки
Ось Z: направлена от данной точки на экран
Вращения элемента вокруг осей X или Y позволит нам достичь желаемого результата, но в данной статье мы рассмотрим только вращение вокруг оси Y.
Чтобы расположить карточки, нам понадобится применить абсолютное позиционирование. А чтобы они находились в рамках родительского элемента, нам нужно применить относительное позиционирование. С учетом этого нам нужно явно указать ширину и высоту для карточек или, по крайней мере, чтобы размеры одной карточки зависели от размеров некоторого медиа-контента (например, изображения). В случае если размеры карточки будут заданы использованным изображением, нужно будет задать абсолютное позиционирование только для одной из карточек.
Еще следует обратить внимание на то, что если при создании карточек мы используем свойство прозрачности (например, не сплошной фон, изображения с прозрачным фоном или полупрозрачные цвета), нам нужно будет скрыть обратную сторону карточек, чтобы другая сторона не была видна. Для этого мы будем использовать CSS свойство backface-visiblity в значении hidden. И, наконец, я буду использовать специальную технику применения свойства padding для родительского элемента, чтобы сделать карточки идеально квадратными.
Базовые CSS стили
Давайте рассмотрим базовые CSS стили, которые применимы для всех трех вариантов:
![[Valid RSS]](http://feedvalidator.org/images/valid-rss-rogers.jpg)
Как правило, в интерактивных играх объекты нужно перемещать с места на место. В PowerPoint такая возможность есть благодаря макросу DragandDrop.
Этот макрос для PowerPoint создал Ханс Вернер Хоффман и оптимизировал Комаровский Анатолий Николаевич.
Можно макрос внедрить в презентацию, но проще воспользоваться готовым шаблоном, в котором он уже внедрён.
Когда Вы откроете эту презентацию, у Вас, скорее всего, появится предупреждение от Центра безопасности – это нормально.
Такие же настройки нужно будет сделать на других компьютерах, на которых Вы планируете использовать эту игру.
Все вновь создаваемые игры сохраняйте в этой же папке.
Понятно, что у Вас на слайде будет несколько объектов. Чтобы для каждого отдельно не выполнять Запуск макроса, хоть это и не сложно, просто сделайте копию настроенного объекта и замените изображение.
Чтобы создать новую игру, с другими персонажами, просто удалите со слайда все объекты, вставьте нужные, и для каждого объекта запустите действие макроса: кликните по объекту – вставка – действие – запуск макроса DragandDrop
При сохранении выберите тип файла Демонстрация PowerPoint с поддержкой макросов.
Можете посмотреть видеоверсию этого урока ЗДЕСЬ
Возможно, вам пригодятся ДРУГИЕ разработки Комаровского А.Н.
Есть вопросы, или нужно рассказать о чём-нибудь ещё — пишите в комментариях!
Читайте также: