Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Интерактивные средства

99

В среде SketchFlow IDE доступен упрощенный вариант интегрированного в Expression Blend редактора анимации, с помощью которого можно внедрить интерактивные средства в отдельный прототип, созданный в SketchFlow. Конечно для этой цели можно воспользоваться и полнофункциональным редактором анимации, но панель SketchFlow Animation настолько интегрирована в среду создания прототипов в SketchFlow, что пользоваться ею удобнее.

В качестве примера введите ряд интерактивных средств на экране Checkout. Для этого активизируйте монтажный стол экрана Checkout и добавьте форму Block Arrow Up - Sketch, которая обозначает хотя и в несколько преувеличенном виде, курсор мыши, наводимый пользователем:

Добавление формы, имитирующей курсор мыши

Перейдите к панели SketchFlow Animation, которая по умолчанию располагается в верхней части визуального конструктора:

SketchFlow Animation

Щелкните на кнопке со знаком +, чтобы создать новую раскадровку анимации в SketchFlow. После этого вы вольны переименовать эту раскадровку, присвоив ей более подходящее описательное имя (например, AnimateArrow — анимация стрелки), выбрав соответствующий вариант из раскрывающегося списка в нижней части панели SketchFlow Animation.

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

Поэтому для ввода новых ключевых кадров в анимационную последовательность выберите отдельный ключевой кадр на панели SketchFlow Animation и щелкните на кнопке со знаком + в правом верхнем углу всплывающей панели выбранного ключевого кадра. А для того чтобы удалить выбранный ключевой кадр, достаточно щелкнуть на кнопке со знаком минус (-).

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

В качестве примера на рисунке ниже показана анимационная последовательность после ввода трех ключевых кадров. В первом ключевом кадре фиксируется первоначальное состояние экрана со стрелкой, имитирующей курсор мыши в исходном положении. Во втором ключевом кадре стрелка, имитирующая курсор мыши, перемещается на кнопку Confirm (Подтвердить). А в третьем и последнем ключевом кадре изменяются цвета фона кнопки Confirm, указывая на то, что эта кнопка выбрана:

Анимация перемещения по экрану стрелки

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

Настроив различные эффектов анимации, еще раз запустите прототип своего приложения на выполнение. Если вы затем перейдете к экрану Checkout, то сможете воспроизвести анимацию на панели Navigate:

Воспроизведение анимации в прототипе

Если же хотите организовать запуск этой (или любой другой) анимации в зависимости от информации, вводимой пользователем, то воспользуйтесь объектом поведения типа PlaySketchFlowAnimationAction доступном в разделе SketchFlow --> Behaviors библиотеки ресурсов. Выберите этот объект и перетащите его на панель Objects and Timeline:

Ввод объекта поведения типа PlaySketchFlowAnimationAction

Выберитеэтот объект поведения, перейдите к панели Properties и настроите триггер на инициирование события Loaded, пускающего интересующую вас анимацию.

Вот, собственно, и все! На этом рассмотрение простого примера создания прототипа, демонстрирующего применение различных средств SketchFlow, завершается. И хотя этот пример демонстрирует намного более простую ситуацию, чем в реальном проекте приложения, он дает ясное представление об основных стадиях процесса создания про тотипов средствами SketchFlow, включая фиксацию комментариев клиентов, экспорт их комментариев в специальный документ формата Microsoft Word и составление блоксхемы прототипа на панели SketchFlow Map.

В качестве упражнения попробуйте сами ввести комментарии клиента в прототип своего приложения, как было показано при рассмотрении примера проекта PCGamingSketch. Попробуйте также сформировать документ формата Microsoft Word из прототипа своего приложения, руководствуясь пояснениями, приведенными выше.

Пройди тесты