Интерактивные средства
99Expression Blend --- SketchFlow --- Интерактивные средства
В среде SketchFlow IDE доступен упрощенный вариант интегрированного в Expression Blend редактора анимации, с помощью которого можно внедрить интерактивные средства в отдельный прототип, созданный в SketchFlow. Конечно для этой цели можно воспользоваться и полнофункциональным редактором анимации, но панель SketchFlow Animation настолько интегрирована в среду создания прототипов в SketchFlow, что пользоваться ею удобнее.
В качестве примера введите ряд интерактивных средств на экране Checkout. Для этого активизируйте монтажный стол экрана Checkout и добавьте форму Block Arrow Up - Sketch, которая обозначает хотя и в несколько преувеличенном виде, курсор мыши, наводимый пользователем:
Перейдите к панели SketchFlow Animation, которая по умолчанию располагается в верхней части визуального конструктора:
Щелкните на кнопке со знаком +, чтобы создать новую раскадровку анимации в SketchFlow. После этого вы вольны переименовать эту раскадровку, присвоив ей более подходящее описательное имя (например, AnimateArrow — анимация стрелки), выбрав соответствующий вариант из раскрывающегося списка в нижней части панели SketchFlow Animation.
Так или иначе, анимация на панели SketchFlow Animation, как и в полнофункциональном редакторе анимации, организуется по принципу изменения свойств элементов пользовательского интерфейса в промежутках между ключевыми кадрами.
Поэтому для ввода новых ключевых кадров в анимационную последовательность выберите отдельный ключевой кадр на панели SketchFlow Animation и щелкните на кнопке со знаком + в правом верхнем углу всплывающей панели выбранного ключевого кадра. А для того чтобы удалить выбранный ключевой кадр, достаточно щелкнуть на кнопке со знаком минус (-).
Введите три ключевых кадра анимации в текущую раскадровку. Самое главное, что можно выбрать любой ключевой кадр на панели SketchFlow Animation и внести изменения в раскадровку по своему усмотрению. При внесении изменений на монтажном столе выбранного ключевого кадра данные анимации оудут регистрироваться автоматически, как и в полнофункциональном редакторе анимации.
В качестве примера на рисунке ниже показана анимационная последовательность после ввода трех ключевых кадров. В первом ключевом кадре фиксируется первоначальное состояние экрана со стрелкой, имитирующей курсор мыши в исходном положении. Во втором ключевом кадре стрелка, имитирующая курсор мыши, перемещается на кнопку Confirm (Подтвердить). А в третьем и последнем ключевом кадре изменяются цвета фона кнопки Confirm, указывая на то, что эта кнопка выбрана:
По желанию можете сделать еще более изящной анимацию в прототипе своего приложения, применив в отдельных ключевых кадрах эффекты инерционности движения (отскакивания, упругости и пр.). Для этого достаточно щелкнуть на кнопке с пиктограммой, обозначающей данную разновидность эффектов. А если хотите добавить эффект перехода (наплывом, волной и т.д.) в отдельный кадр, щелкните на кнопке fx.
Настроив различные эффектов анимации, еще раз запустите прототип своего приложения на выполнение. Если вы затем перейдете к экрану Checkout, то сможете воспроизвести анимацию на панели Navigate:
Если же хотите организовать запуск этой (или любой другой) анимации в зависимости от информации, вводимой пользователем, то воспользуйтесь объектом поведения типа PlaySketchFlowAnimationAction доступном в разделе SketchFlow --> Behaviors библиотеки ресурсов. Выберите этот объект и перетащите его на панель Objects and Timeline:
Выберитеэтот объект поведения, перейдите к панели Properties и настроите триггер на инициирование события Loaded, пускающего интересующую вас анимацию.
Вот, собственно, и все! На этом рассмотрение простого примера создания прототипа, демонстрирующего применение различных средств SketchFlow, завершается. И хотя этот пример демонстрирует намного более простую ситуацию, чем в реальном проекте приложения, он дает ясное представление об основных стадиях процесса создания про тотипов средствами SketchFlow, включая фиксацию комментариев клиентов, экспорт их комментариев в специальный документ формата Microsoft Word и составление блоксхемы прототипа на панели SketchFlow Map.
В качестве упражнения попробуйте сами ввести комментарии клиента в прототип своего приложения, как было показано при рассмотрении примера проекта PCGamingSketch. Попробуйте также сформировать документ формата Microsoft Word из прототипа своего приложения, руководствуясь пояснениями, приведенными выше.
