[advanced_iframe src="/media/animations/story_html5.html" width="500px" height="500px"]
Но к сожалению, зачастую такой анимации не хватает. Некоторое время назад с коллегами мы обсуждали анимацию переворачивающейся карты. Действительно, этот эффект применяется довольно широко, в играх на память, при изучении иностранных языков, чтобы узнать правильный ответ, для изображения подсказок и так далее. Есть множество способов добиться такого эффекта сторонними средствами: создать gif-анимацию с помощью графических редакторов, написать мудрёный javascript, добавить web-object, в котором объединены все предыдущие способы. Однако я предлагаю создать анимацию переворота карты, воспользовавшись ТОЛЬКО штатными средствами Storyline. В примере ниже нажмите на карту и увидите, какого эффекта мы с вами добъёмся. Для повторения нажмите кнопку в нижней правой части примера.[advanced_iframe src="/media/card/story_html5.html" width="320px" height="320px"]
Чтобы создать такой же пример нам понадобится 5 минут.Шаг 1.
Для начала скачайте изображение карты. Можете сохранить эти (я их для вас уже разрезал):
Шаг 2.
Вставьте изображения в Storyline. Над изображением карты создайте прямоугольник, по ширине такой же как карта. Он нам пригодится.Шаг 3.
Создайте дополнительный слой (это опциональное действие на случай, если вы захотите сделать анимацию переворота не только в одну, но и в другую сторону).Шаг 4.
На одном слое расположите изображение карты с рубашкой, на другом - с фигурой. Они должны располагаться ровно одно над другим иначе анимация получится так себе (на всякий случай проверьте их положение).Шаг 5.
Теперь создадим анимацию. Для этого воспользуемся состояниями объекта. Кликнем на изображении рубашки карты и откроем вкладку "States". 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).
