Search results matching tag 'Expression Blend'

Microsoft Expression Blend 4 Step by Step

Helen — Mon, 06 Sep 2010 12:05:00 GMT

Идея написать свою книгу в мыслях была давно. О дизайне интерфейсов, о продуктах Microsoft Expression … В этом году мне в некотором смысле удалось осуществить эту задумку. И сегодня я хочу сделать небольшой анонс своей первой книги - Microsoft® Expression Blend 4 Step by Step, которая, как я надеюсь, выйдет этот осенью.

Для кого эта книга?

Как вы догадались, серия “Step by Step” наилучшим образом подходит тем, кто еще не знаком с Expression Blend 4, либо желает расширить свои знания и познакомиться с возвожностями 4-ки. Также акцент сделан на начинающих RIA дизайнеров, на дизайнеров, работающих с продуктами Adobe, но еще не знакомых с Expression, и разработчиков, которые хотят для себя открыть проектирование интерфейсов в дизайнерской среде. С самого начала, шаг за шагом, Вы сможете освоить Microsoft® Expression Blend 4 по этой книге.

Что в книге?

Общее знакомство с интерфейсом продукта, основы XAML и представление о C#, прототипирование с помощью SketchFlow, скиннинг элементов управления, работа с данными, использование поведений и много других интересных моментов.

Авторы

Также мне хотелось бы представить вам моего соавтора и замечательного друга. Chris Leeds является Microsoft MVP: Expression Web и также известен как автор книг по Microsoft Expression Web.

Язык издания

Книга издается на английском языке

Предзаказать книгу Microsoft® Expression Blend 4 Step by Step можно на Amazon.com.

С уважением,
Алена Косинская
UX designer
Microsoft MVP: Expression Blend

Оригинал: Microsoft Expression Blend 4 Step by Step

Новый формат образцов данных

Helen — Tue, 22 Jun 2010 06:18:00 GMT

В Expression Blend 4 появился новый формат для строковых образцов данных – Colors. Если создать новое свойство и выбрать Type = String, то в поле Format для выбора доступна опция Colors.

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

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

Теперь сделаем так, что фон каждого значения будет случайно заполняться каким-то цветом.
Зайдем в режим редактирования шаблона элемента ItemTemplate и выберем StackPanel.

В свойствах StackPanel выбираем установку цвета для Background. Раскрыв Advanced options редактора, сделаем привязку данных.

Выбираем Color из доступного списка.

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

Оригинал: Новый формат образцов данных

Sketch effects in Expression Design

Helen — Wed, 02 Jun 2010 16:34:00 GMT

Есть несколько путей создания прототипов приложений с помощью SketchFlow. Одни рисуют на бумаге, затем сканируют/фотографируют, импортируют графику в Expression Design/Adobe Photoshop, обрабатывают ее, затем импортируют в Blend отдельные кусочки, создают анимацию и т.д. Способ красивый, креативный и с wow-эффектом, но долгий. Другие сразу в Blend делают прототип функциональности, используя стандартные скетчевые элементы управление и образцы данных, встроенные в Blend. Во втором случае прототип получается сделать гораздо быстрее, но используемые объекты-изображения в нем выходят совсем не “скетчи”.

Почему бы тогда не сделать как-то промежуточный вариант? У меня давно возникла идея вместо прорисовки на бумаге отдельных картинок – брать фотографии и иллюстрации и накладывать на них скетчевые эффекты в графическом редакторе. Такие эффекты можно заготовить один раз – и потом применять к набору тематических фотографий. Будь то авто, мебель или люди.

Для примера приведу ряд изображений, который я преобразовала в Expression Design для демо-прототипа на ReMIX10.

Было:

Стало:

В результате картинки в приложении-прототипе выглядят уже в стиле “скетчи”:

Понравившиеся эффекты можно скопировать на новое изображение с помощью инструмента Attribute Dropper :
– захватив свойства на одном объекте и перетащив их на другой.

Больше всего меня привлекли комбинации эффектов – Poster Edges + Note Paper и CrossHatch + Note Paper. Надеюсь вам они тоже пригодятся.
Прилагаю эффекты в файле Expression Design.

Оригинал: Sketch effects in Expression Design

Sketch Mockups

Helen — Mon, 17 May 2010 06:54:00 GMT

Иногда стоит заглянуть на закладку Samples. Где-где, а тут всегда полно замечательных примеров, на которых стоит поучиться. Вот и в Blend 4 RC добавили несколько интересных проектов, один из которых посвящен Sketch-заготовкам для ваших прототипов. Называется данный проект MockupDemonstration. И если вы еще не успели на него посмотреть – то искренне советую.

Проект использует библиотеку заготовок элементов управления. Тут есть:

Windows Explorer
Windows Desktop
Windows Application
Web browser
Media Player
Блок логина
Выпадающее меню
Диалоговые окна с одной, двумя и тремя кнопками
Различные иконки
Курсоры
и многое другое

Все эти элементы находятся в пределах этого проекта. Для того чтобы использовать их в своих прототипах проектов, необходимо:

Для Silverlight:

Из папки с примером
Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > Silverlight > Debug
скопировать библиотеку Microsoft.Expression.Prototyping.MockupsSL.dll и прилагающуюся папку Design

в папку
Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > Silverlight > 4.0 >

И для WPF:

Из папки
Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > .NETFramework > Debug
скопировать библиотеку Microsoft.Expression.Prototyping.MockupsSL.dll и прилагающуюся папку Design

в папку
Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > .NETFramework > 4.0 >

После перезагрузки Blend для новых проектов SketchFlow у вас в разделе Assets > SketchFlow появится раздел Mockups. Его элементы имеют зеленые скетчевые иконки.

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

Каждая заготовка состоит из различных контент-блоков, и содержимое достаточно гибко модифицируется. На примере диалоговых окон мы видим, что существует блок настройки окна, где можно выбрать иконку для сообщения, скрыть или показать отдельных кнопки. А если развернуть Advanced properties, то можно найти дополнительные элементы и отобразить их.

Сразу хочу сказать что кнопки окна работающие – на них можно “навесить” поведения для обработки введенной информации, активизации состояний экрана и др.

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

Оригинал: Sketch Mockups

Особенности национальной… разработки дизайна Silverlight/WPF приложений в Adobe Photoshop

Helen — Thu, 22 Apr 2010 12:22:00 GMT

В перерывах конференции «Visual Studio 2010: создание приложений будущего» обсуждались различные темы из жизни разработчиков. Один из коллег поднял вопрос о проблеме разработки дизайна Silverlight/WPF приложений. Первый ответ в виде шутки напрашивался сам собой: “Кесарю – кесарево, а Design для дизайна”. Но следующий вопрос заключался в том, почему некоторые дизайнеры рисуют Silverlight/WPF дизайн в Expression Design, а некоторые продолжают это делать в Adobe Photoshop/Illustrator и что с этим делать ?!

На первый взгляд может показаться, что проблемы-то и нет, ведь в Expression Design/Blend есть замечательный инструмент импорта файлов Adobe Photoshop/Illustrator и каждый рисует в том, в чем ему удобно, а в Blend-е импортирует полученное. Я не очень люблю делать обзоры типа “A” vs “B”, тем более продуктов из разной весовой и ценовой категории. И считаю, что каждый человек сам волен выбирать продукты для разработки - на основе здравого смысла (!), поставленной задачи, анализа преимуществ/недостатков, привычек/заморочек, цены и т.д.

Так вот, давайте поставим определенную цель: разработка дизайна для Silverlight/WPF приложений (!). И исходя из этого, мы уже можем провести некоторый анализ и сравнение инструментов для данной задачи. Ведь всегда есть свои особенности:

Слаженность и скорость работы родственных продуктов
Мощность набора инструментов продукта
Качество XAML-кода
Векторизация и перенос свойств элементов интерфейса
Поддержка эффектов
Обновление изменений в деталях элементов интерфейса
Использование ресурсов

Что ж, давайте попробуем разобрать по полочкам все пункты про дизайн Silverlight/WPF приложений. Для примера создадим в обоих редакторах (были взяты Adobe Photoshop СS3 Trial и Expression Design 3 Trial) файл, с размером холста 800 на 600 пикселей и разрешение 96 пикселей на дюйм. Возьмем и добавим не сильно сложные по дизайну кнопки: скругленный фон с небольшой тенью, и белый текст на нем. Я постаралась чтоб они выглядели приблизительно идентично в обоих редакторах (хотя с тенью пришлось помучаться из-за разных типов параметров).

И приведу снимок панели Layers в обоих редакторах:

1. Слаженность и скорость работы родственных продуктов.

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

Поэтому связка Expression Design + Expression Blend эффективнее чем Adobe Photoshop + Expression Blend. Почему?

Буфер обмена и прямое копирование.

Допустим я еще не хочу экспортировать целый файл с дизайном. Я спокойно могу выделить элемент в Expression Design и скопировать его через буфер обмена в Expression Blend.

И это будет векторный элемент. Если я попытаюсь сделать это из Adobe Photoshop, в лучшем случае у меня вставится изображение в формате png, а в худшем – ничего.
Если объекту было дано имя, то при копировании из Expression Design – в Blend будет вставлен именованный объект. При копировании с Photoshop – объект без имени.
В Expression Design я всегда могу настроить копирование через буфер обмена и выбрать необходимые параметры для Silverlight/WPF:
Из Expression Design можно копировать через буфер обмена сгруппированный набор объектов. Из Photoshop я это делать не могу.

Занимаемые ресурсы.

Системные требования к редакторам вы можете посмотреть сами на сайтах производителей. А вот занимаемые ресурсы (примечание автора: специальная оптимизация продуктов не проводилась), а именно вкладка Memory в Task Manager-e после получаса синхронной работы по созданию идентичных кнопок выглядит так: Photoshop – 134 Mb, Design – 102 Mb. Соответственно файл с одной кнопкой в Photoshop-e весит 199 кб, в Design – 24 кб. Что будет далее – можете поэкспериментировать.

Работа через импорт-экспорт.

Теперь попробуем пойти другим путем – правильно импортируем Photoshop-файл в Blend, выбрав только группу с элементами кнопки, а из Expression Design – экспортируем в XAML тоже только кнопку, добавляем файл в проект, а потом копируем из него необходимую группу (хотя результат тот же что и через буфер обмена).

Настройки экспорта из Expression Design:

Настройки импорта Photoshop-файла в Blend 4 RC для проекта WPF-приложения:

Что получаем в Blend 4 RC:

после Adobe Photoshop: Canvas –> Canvas –> (Image (+Effect) +Textblock )
и Expression Design: Viewbox –> Canvas –> (Path (+Effect) + Textblock )

В общем уже на этом этапе виден результат.

Плюсы после Photoshop-a:

Текст как текстовый блок, правильного размера, шрифта, без трансформаций
Эффект тени в виде DropShadowEffect
Именованность объектов соблюдена для папки и для объектов (там где была задана)

Минусы:

Лишняя компоновка верхнего уровня - Canvas с размерами холста 800 на 600
После Photoshop-а фон кнопки стал в виде PNG-картинки в отдельной папке
Для текстового блока указаны лишние параметры, которые можно было бы опустить:
IsHyphenationEnabled="True" LineStackingStrategy="BlockLineHeight" LineHeight="14" TextAlignment="Left".

Плюсы после Design-a:

Компоновка верхнего уровня – Viewbox c размерами 85 на 45 (в общем-то вполне ожидаемый результат и более удобный)
Эффект тени в виде DropShadowEffect
Именованность объектов соблюдена для папки и для объектов (там где была задана)

Минусы:

Текст как текстовый блок, но применено преобразование с помощью MatrixTransform (зачем - для меня это до сих пор загадка) и размер не тот.

2. Мощность набора инструментов продукта

Оба редактора имеют обширный набор инструментов для прорисовки элементов интерфейса. Начиная от простых линий и обычных форм и заканчивая масками и контурами отсечения (Clipping Path).

Общие рекомендации могут быть одними:

чем проще элементы вы используете – тем легче вам потом будет
избегайте режимов наложения в обоих редакторах (Blend Mode) – они не поддерживаются в XAML
именуйте объекты
объединяйте объекты в группы по смыслу

3. Качество XAML-кода

в п. 1 мы визуально рассмотрели что получается после Photoshop-a и Design-a. Дело даже не в кол-ве кода, а в типе выходных элементов и в простоте их оптимизации и дополнительной настройке. А это необходимо делать в любом случае.

Давайте сделаем промежуточные заключения.

Выводы после Photoshop-a:

необходимо преобразовать Canvas в что-то более подходящее по типу компоновки и изменить его размеры
почистить “лишние” параметры текстового блока
Для масштабируемости кнопки необходимо что-то сделать с картинкой. Этот пункт самый проблемный.

Выводы после Design-a:

очищать трансформацию текста (делается в один клик на peg-e) и выставлять правильный размер шрифта для текста
Для растяжения кнопки только в горизонтальном направлении (в зависимости от контента) тоже придеться преобразовывать векторный контур в что-то более подходящее (Border, например). Так как прямоугольник с скругленными углами не преобразовывается автоматом в Border с скругленными углами.

4. Векторизация и перенос свойств элементов интерфейса

В плане векторизации (а это основная идея интерфейсов для Silverlight/WPF приложений) Expression Design выигрывает однозначно:

нарисованные контуры получаются векторными и масштабируемыми
Можно спокойно использовать Stroke в качестве мощного декоративного оформления. И это будет перенесено в XAML. В Photoshop это достаточно проблемно.

Применять в Expression Design можно, но осторожно и осознанно:

SuperScript и SubScript – на XAML-выходе к тексту просто будет применено преобразование с помощью MatrixTransform
Контуры отсечения (Clipping Path). Будет использован Canvas с выставленным свойством Clip, но увеличится кол-во вложенных элементов компоновки

А вот чего не стоит делать в Photoshop-e:

Не используйте Smart objects, они не будут векторизированы
Не накладывайте Layer Mask в Photoshop-е. Они не будут импортированы как вектор (а только как PNG-картинки). В Blend-e можно потом сделать действительно векторную маску прозрачности
Не делайте Clipping Mask на объекты. Это проигнорируется при импорте. Лучше потом воспользоваться в Blend-e контурами отсечения (Clipping Path)
Не используйте для текста SuperScript и SubScript – это не будет применено
Градиенты? Их ВЕКТОРНЫЙ экспорт-импорт для меня до сих пор остается загадкой. Если кто нашел способ – поделитесь для полноты картины.

Не стоит использовать для текста (если только он потом не будет растеризирован) ни в Photoshop, ни в Design:

Leading
Tracking
Horizontal scale
Baseline offset
Alignment

Использование форм.

Отдельным пунктом для Photoshop-a хочу выделить использование форм. А именно – почему же все эти стандартные прямоугольники, эллипсы импортируются в Blend в виде картинок, а не векторных контуров? Ответ кроется в панели под названием options bar. Например, когда мы выбираем Rounded Rectangle tool для рисования (или любую другую форму) - то в этой панели появляется набор свойств для данного элемента

И мы видим что есть три режима для создания формы:

Shape Layers
Paths
Fill Pixels

Так вот, внешне вам может показаться что результат один и тот же.

Но давайте теперь посмотрим на панель Layers:

Если выбран последний пункт Fill Pixels – то у вас будет нарисован растровый элемент, и в Blend-e в итоге вы получите PNG-картинку. Если же выбран первый пункт Shape Layers – то форма создается в виде векторной маски (думаю это не проблема – эффект тени как мы видим тоже к ней применяется).

И теперь откроем окошко импорта в Blend-e:

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

5. Поддержка эффектов

Я думаю многие дизайнеры любят применять к слоям эффекты в виде стилей. Это очень быстро, удобно и всегда можно отменить или подправить результат. Но есть пару замечаний как всегда:

Photoshop. Если ваш дизайнер в Photoshop применил ряд эффектов в виде стилей для слоя, то при импорте часть из них будет проигнорировано, а именно ВСЕ кроме тени (да-да, и Stroke тоже):

Выход есть всегда, но он понравится не всем. Нужно еще в Photoshop-e соединить в один два слоя: со стилем и пустой. Тогда хотя бы в виде картинки в Blend-e вы получите нужный результат.

Design. Практически та же ситуация. Можно указать в окошке экспорта для Live effects – пункт Convert to XAML effects. И DropShadow будет перенесен.

НО в рекомендациях по экспорту от Expression Design сказано, что ЛУЧШЕ выбирать опцию растеризации. А причины следующие:

WPF поддерживает эффекты Drop shadow, Gaussian blur, но часто использовать их не рекомендуется по причине снижения производительности.
В Silverlight также есть возможность использовать DropShadowEffect и BlurEffect, но злоупотреблять тоже не стоит.

В общем вывод в отношении эффектов в обоих редакторах такой: лучше не злоупотреблять.

6. Обновление изменений в деталях элементов интерфейса

Если так случилось, что вы уже работаете над рабочей версией интерфейса вашего приложения в Blend-e и в то-же время продолжаете вносить изменения в макет дизайна, то периодически вам придеться заниматься обновлением частей XAML-кода и изображений. В итоге заново импортировать части элементов из Photoshop-a или заниматься Copy-Paste из Design-a.

Плюс для макетов Photoshop:

импортер из Blend-a запоминает “видимость/невидимость” объектов. т.е. если вы в первый раз указали не импортировать какие-то объекты, то в следующий раз это состояние будет таким же.

Плюс для макетов Design:

есть замечательный инструмент Slice, с помощью которого можно настроить тип экспортируемого элемента и выделить “входящие” в него элементы. Приведу в качестве примера скриншот, на котором понятно что к чему:

7. Использование ресурсов

Ну и последний пункт, который больше идет в плюс Design-у, в связке Photoshop+Blend такой возможности нет. Это использование ресурсов для WPF-приложений.

История из жизни: необходимо было доработать набор иконок для одного симпатичного WPF-приложения. В Expression Design я разместила каждую иконку в отдельной группе с отдельным именем.

При экспорте есть возможность выбрать для всего документа формат - XAML WPF Resource Dictionary и сгруппировать по объектам - Group by Objects

В итоге у меня выходит красивый XAML-файл ресурсов с векторными иконками. При изменении деталей дизайна иконок я просто его заново экспортирую и перезаписываю в проекте без каких-либо дополнительных манипуляций в Blend-e. Имена групп остаются те же для ресурсов, а иконки автоматически обновляются там, где они используются.

Выводы

Что ж, мы прояснили кое-какие моменты дизайна приложений в разных редакторах, а также их плюсы и минусы. Что использовать – выбор за вами. Главное - сделать его правильно на основе анализа всех “ЗА” и “ПРОТИВ”. Надеюсь, что для убеждения дизайнеров вам теперь не пригодится инструмент для повышения эффективности решения проблем :)

Буду рада услышать аргументы, замечания и комментарии.

Оригинал: Особенности национальной… разработки дизайна Silverlight/WPF приложений в Adobe Photoshop

Expression Blend 4 Beta

Helen — Mon, 15 Mar 2010 21:08:00 GMT

Кол-во транслируемых новостей с MIX10 возрастает с каждой минутой. Мне хотелось бы поделиться с вами последними новостями в сфере Expression - наконец-то доступна бета-версия Expression Blend 4, Silverlight 4 RC, а также небольшая документация!

Скачать уже можно тут, а также ознакомиться со списком нововведений.

Коротко о возможностях:

Поддержка разработки приложений Silverlight 4 и WPF 4
Совместимость с VS2010
Сохранение возможностей открытия и разработки приложений Silverlight 3 и WPF 3.5 с Service Pack 1(SP1)
Еще меньше кода и еще больше новых поведений (behaviors) для всех типов приложений
Условные поведения!
Поддержка разработки приложений с использованием шаблона проектирования MVVM (в Blend? Не верится, да? :))
SketchStyles – стили по умолчанию для SketchFlow приложений
Создание Word-отчетов с включением отзывов
Улучшение в сфере стайлинга элементов управления
Сумасшедшая новинка PathListBox - позволяет размещать дочерные элементы совершенно свободным образом на основе прикрепляемого контура
Множество новых нестандартных элементов в виде дуг, разного вида полигонов, стрелочек, облачных форм (подумаем об Azure-стиле? :) )
9 новых эффектов на базе пиксельных шейдеров
Эффекты перехода (Transition effects)
Data Store – промежуточное хранилище данных для переменных, используемых различными частями приложения
Улучшения импорта из продуктов Adobe
Запуск проекта с помощью Ctrl+F5 (просьба не удивляться:))
Упрощение трансформаций с помощью CompositeTransform
Хотелось бы завершить список самой впечатляющей возможностью - разработкой приложений под Windows Phone. Необходим Expression Blend SDK Preview for Windows Phone и Expression Blend Add-in Preview for Windows Phone.

Вроде бы казалось что Blend 3 вышел летом, и что же можно придумать и реализовать за такой короткий срок? Но, поверьте, это еще не все нововведения. Так что всем тем, кто заинтригован – читаем документацию и устанавливаем новинки. Как уже написала, загрузить можно по адресам:

Expression Blend 4 Beta

Silverlight 4 RC

Оригинал: Expression Blend 4 Beta

Анимируем бабочек в Expression Blend

kichinsky — Thu, 04 Mar 2010 15:32:00 GMT

Накануне мартовского праздника (да и весна началась!) мы будем учиться анимировать бабочек.

Задача

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

Препарирование бабочки

Для работы нам понадобится изображение бабочки, желательно, натуралистичное (за готовыми изображениями направляю в интернеты ;), в png и с прозрачным фоном, например, такое:

Чтобы бабочка “махала” крыльями, это изображение необходимо разрезать не две части и сохранить как отдельные картинки:

User Control Butterfly

В проекте Silverlight в Expression Blend импортируем два изображения (можно напрямую перетащить на рабочее пространство):

Выделив оба фрагмента, из контекстного меню выбираем “Make Into UserControl” (или просто F8):

У нас появился новый контрол Butterfly.

Анимация бабочки

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

Предварительно в нашем контроле нужно сделать следующие изменения:

Дать названия каждому из крыльев, например, “Left” и “Right” — так будет проще ориентироваться.
Меняем положение центра. Для этого в панели “Transform” на вкладке “Translate” выбираем: центральную правую точку для левого крыла и центральную левую для правого:

(Аналогичное изменение модно сделать на вкладке “Center Point”: 1 и 0.5 для левого крыла, 0 и 0.5 — для правого. Числа эти относительные: {0, 0} — верхний левый угол объекта, {1, 1} — нижний правый.)
Уменьшить масштаб. Для этого в панели “Transform” открываем вкладку “Scale” и для каждого из крыльев выставляем значения 0.75 для X и Y:
Меняем положение центра проекции. Для этого в панели “Transform” в части “Projection” на вкладке “Center of Rotation” выставляем значения, аналогичные п.2: 1 и 0.5 для левого крыла, 0 и 0.5 — для правого

Предварительная настройка окончена.

Взлет и посадка

Анимации взлета и посадки будут довольно простыми: при взлете бабочка увеличивается в размере, поднимает и опускает крылья; при посадке — уменьшается, поднимает и опускает крылья.

Начнем со взлета. Переходим в панель “Objects and Timeline”, нажимаем на плюсик для создания новой анимации StoryBoard:

При этом рабочая область немного изменится — появится линейка времени для записи анимации:

(В принципе, можно переключить рабочее пространство в режим анимации — F6 или Windows → Workspaces → Animation).

Для взлета достаточно ~0.5 секунды. Выбираем первое крыло, ставим текущее время на 0.5:

На вкладке “Scale” панели “Transform” выставляем значения X и Y в 1:

Аналогичную операцию проделываем для второго крыла.

При этом на линейке времени вы увидите отметки, что в некоторые моменты времени происходят изменения (если раскрыть объекты, можно увидеть, какие именно свойства изменены):

Если проиграть анимацию, бабочка увеличивается в размере.

Давайте теперь добавим взмахи крыльями. Выделим момент времени ~0.25 секунды, “Transform” → “Projection” → “Rotation”, ставим Y=-70 для левого крыла и Y=70 для правого:

При этом бабочка должна немного “сжаться”:

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

Самый простой способ внести изменение — выбрать нулевой момент времени и для каждого из крыльев добавить KeyFrame (овал с плюсом):

(Для удобства внизу можно поменять масштаб временной линейки.)

Далее для RenderTransform каждого из крыльев перемещаем отметки на временной шкале в нужные моменты:

Теперь стало получше ;)

Продолжим посадкой. Все практически аналогично взлету, только наоборот. Для этого создадим новый StoryBoard “Down”.

Чтобы сильно не повторяться, сделаем дупликат (Duplicate) и переименуем в “Down”:

Далее нужно поправить изменение масштабов (RenderTransform для каждого из крыльев): начать с 1 и закончить 0.75:

Полет нормальный

Делаем еще один дупликат, называем “Fly”. Удаляем RenderTransform для каждого из крыльев:

Сжимаем по времени:

На этом анимации закрываем.

Обидеть бабочку каждый может

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

(Тут нужно было бы воскликнуть: “Открываем Visual Studio и лезем в код”. Но мы воспользуемся редактором Expression Blend, благо много кода писать не придется.)

Начнем с того, что нужно повесить событие, которое будет запускать анимацию по наведению курсора мыши на бабочку:

public Butterfly()

{

	// Required to initialize variables

	InitializeComponent();


	MouseEnter += ButterflyControl_MouseEnter;

}

		

void ButterflyControl_MouseEnter(object sender, MouseEventArgs e)

{

	Start();

}

Далее (раскрываю карты) нам мы будем запускать бабочку в полет в случайном направлении на случайную дистанцию и приземлять.

Важный момент: при этом нужно блокировать (!) повторный запуск анимации. В данном случае мы обойдемся простым булевским флагом:

bool isActive = false;

public bool IsActive

{

   get { return isActive; }

}


void ButterflyControl_MouseEnter(object sender, MouseEventArgs e)

{

   if (!isActive)

      Start();

}

Для управления полетом нужно будет добавить еще несколько параметров:

double angle = 0;

double direction = 0;

double x = 0;

double y = 0;

        

int counter;

static Random RND = new Random();

Обратите внимание на то, что RND сделан статическим, чтобы для разных бабочек не генерировать одни и те же последовательности.

counter — счетчик, сколько раз нужно проиграть анимацию “Fly". На каждом таком шаге бабочка будет немного поворачиваться и пролетать некоторое расстояние в этом направлении.

Start(); и запуск полета

public void Start()

{

   counter = Buttrefly.RND.Next(20) + 5;

   direction = 20 * Buttrefly.RND.NextDouble() - 10;

         

   Storyboard up = this.Resources["Up"] as Storyboard;

   up.Begin();

   Run();

   isActive = true;

}

direction — на время полета постоянная случайная составляющая поворота бабочки, чтобы бабочка куда-то устремлялась, а не совсем хаотически летала.

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

Run(); и приземление

Тут нам придется делать несколько важных вещей, поэтому рассмотрим по порядку.

Во-первых, нам нужно будет применить три трансформации: поворот, перемещение по X и перемещение по Y, для каждой из них своя анимация:

private void Run()

{

   if (counter > 0)

   {

       Storyboard sb = new Storyboard();


       DoubleAnimation rotateAnimation = new DoubleAnimation();

       DoubleAnimation moveXAnimation = new DoubleAnimation();

       DoubleAnimation moveYAnimation = new DoubleAnimation();

Во-вторых, нужно установить время анимации (у нас оно было 0.3c), цель, к которой применяются анимации, и соответствующие свойства цели:

      rotateAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.3));

      moveXAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.3));

      moveYAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.3));


      Storyboard.SetTarget(rotateAnimation, LayoutRoot);

      Storyboard.SetTarget(moveXAnimation, LayoutRoot);

      Storyboard.SetTarget(moveYAnimation, LayoutRoot);


      Storyboard.SetTargetProperty(rotateAnimation, new PropertyPath("(UIControl.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"));

      Storyboard.SetTargetProperty(moveXAnimation, new PropertyPath("(UIControl.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));

      Storyboard.SetTargetProperty(moveYAnimation, new PropertyPath("(UIControl.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"));

В PropertyPath указывается магический путь до нужного свойства ;)

В-третьих, нужно вспомнить немного геометрии и прописать соответствующие трансформации, имея в виду, что угол задается в градусах и по часовой стрелке:

      rotateAnimation.From = angle;

      angle = angle + direction + (80 * Buttrefly.RND.NextDouble() - 40);

      rotateAnimation.To = angle;

                

      moveXAnimation.From = x;

      x = x + (40 * Math.Sin((angle) / 180 * Math.PI));

      moveXAnimation.To = x;

                

      moveYAnimation.From = y;

      y = y - (40 * Math.Cos((angle) / 180 * Math.PI));

      moveYAnimation.To = y;

В-четвертых, объединяем анимации в одну StoryBoard, прописываем событие на завершение, запускаем анимацию трансформации и анимацию “Fly” махания крыльями и уменьшаем счетчик:

       sb.Children.Add(rotateAnimation);

       sb.Children.Add(moveXAnimation);

       sb.Children.Add(moveYAnimation);       


       sb.Completed += new EventHandler(sb_Completed);

       sb.Begin();


       (this.Resources["Fly"] as Storyboard).Begin();


       counter--;

   }            

}

В-пятых, приземляемся.

void sb_Completed(object sender, EventArgs e)

{

   if (counter > 0)

   {

       Run();

   }

   else

   {

       (this.Resources["Down"] as Storyboard).Begin();

       isActive = false;

   }

}

Готово.

Кстати, убедитесь, что у вас в XAML-коде заданы заглушки для трансформаций, иначе они динамически не найдутся:

<Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5,0.5">

   <Grid.RenderTransform>

      <TransformGroup>

          <ScaleTransform/>

          <SkewTransform/>

          <RotateTransform Angle="0"/>

          <TranslateTransform/>

      </TransformGroup>

   </Grid.RenderTransform>

Проверка

Разместите несколько Butterfly-контролов на главной странице и запускайте приложение. Теперь бабочки летают!

http://constantin.kichinsky.ru/projects/butterfly/

Продолжение следует! Исходники приложения в прикрепленном архиве.

Оригинал: Анимируем бабочек в Expression Blend

Типы проектов в Expression Blend 3 + SketchFlow

kichinsky — Thu, 04 Feb 2010 14:49:00 GMT

Продолжаем разбираться с Expression Blend и прототипированием с помощью SketchFlow. Сегодня мы немного поговорим о выборе типа проекта.

Тип проекта: Target Platform vs. Demo Platform

Expression Blend позволяет создавать два типа проектов для SketchFlow: Silverlight и WPF. В чем между ними принципиальная разница?

Разница зависит от точки зрения, с которой вы смотрите на SketchFlow, и задачи, которая перед вами стоит.

Targer Platform

Если вы смотрите с точки зрения целевой платформы (Target Platform), то этот выбор означает: “ага, делаем прототип для Silverlight” или “угу, делаем прототип для WPF”.

Тут все просто. В первом случае мы получаем прототип Silverlight-приложения для браузера, во втором — протоип WPF-приложения для Windows.

Кстати, с точки зрения возможностей между ними будет определенная разница, определяемая как раз тем, что Silverlight != WPF.

Demo Platform

Возможен и другой взгляд — с точки зрения демонстрационной платформы (Demo Platform). Что имеется в виду?

Silverlight SketchFlow Application — это прототип некоторого приложения, который можно посмотреть из браузера. Прототип, на который можно послать ссылку заказчику. Прототип, который можно пощелкать и повертеть в любой среде, где работает Silverlight — будь то MacOS X + Safari или Windows + IE|Firefox|…

WPF SketchFlow Application — это прототип некоторого приложения, который можно посмотреть в Windows. Прототип в виде исполняемого файла, упакованного экзешника.

Такой подход открывает очень большие возможности для прототипирования в SketchFlow. Например…

Вы можете быстро сделать прототип браузерного приложения, которое по тем или иным причинам удобнее показывать в виде исполняемого файла:

Или прототип виджета для какого-то специального сайта:

Или наоборот сделать прототип приложения для какой-нибудь ОС, который можно будет показывать в браузере:

Можно быстро нарисовать прототип приложения для мобильного устройства, послать заказчику ссылку на silverlight-прототип в интернете, получить от него отзывы:

В принципе, форм-фактор, платформа и пр. могут быть любыми. Неизменными остаются легкость и скорость создания первичного прототипа, отработки идей и концепций. Время будет на вашей стороне ;)

Оригинал: Типы проектов в Expression Blend 3 + SketchFlow

Как нарисовать картонную коробочку в Expression Design?

kichinsky — Wed, 23 Dec 2009 02:31:00 GMT

Близится Новый Год — и пора упаковывать подарки :) Сегодня мы будем упаковывать их в картонные коробочки. Например, вот такие:

Или такие:

Поехали!

Шаг 1

Создаем новый рисунок в Expression Design 3. Для удобства на первых этапах можно включить сетку (ctrl+’) и привязку к ней (ctrl+shift+’).

Шаг 2

Рисуем простой макет коробки с небольшими перспективными искажениями:

В идеале, конечно, нужно, чтобы “параллельные” линии сходились в одной точке:

Шаг 3

Добавляем “крышку” для коробки, для этого копируем боковые стенки и подымаем их верхнюю границу.

Опять-таки, в идеале линии нижних границ должны проходить через те же точки, что и выше.

Tips and Tricks: вместо того, чтобы “подымать” нижнюю границу, можно скопировать боковые стенки, провести линии уровня через точки схода параллельных линий и общую точку на ребре и далее сделать операцию Path → Divide над копиямики стенок и линиями уровня. Далее останется только удалить лишние части. Это требует несколько больше времени, зато результат точнее.

Шаг 4

Сделаем промежуточную закраску, чтобы было лучше видно:

Кстати, обратите внимание, что более светлая крышка визуально нежноко выступает (кажется больше) на фоне темного низа и общего белого фона.

Шаг 5

Вносим немножко нелинейности: добавляем на гранях дополнительные точки (на клавиатуре =) и немножко добавляем кривизны (Convert Anchor Point, Shift+C):

Аналогичные операции проделываем и для остальных граней:

(Точно-точно, любой подарок должен в пути немного помяться.)

Шаг 6

Самое время сделать заготовку для фона и текстуры. Создаем новый слой (можно назвать Box BackGround).

Выделяем все элементы коробки, копируем и вставляем в новый слой. Не снимая выделение, делаем над ними операцию Path → Unite:

Слой фона переносим вниз и его пока можно заблокировать или даже скрыть.

Шаг 7

Добавляем градиентную закраску: примерно с теми же цветами, которые у нас уже есть, но тут важно придать нелинейность освещению коробки:

Шаг 8

Делаем блик на коробке. Для этого рисуем полигон (J) — треугольник и меняем у него в свойствах Inner Depth на ненулевое значение, чтобы появились внутренние точки:

Далее конвертируем фигуру в Path (Ctrl+Shift+O) и растаскиваем точки по углам коробки:

Внутренние точки сводим достаточно близко в центральном углу:

Добавляем эффект Gaussian Blur с радиусом 0,3. Opacity ставим в 50%.

Шаг 9

Добавляем немного вмятин в уголках. Для этого с помощью пера (Pen, P) рисуем в уголках небольшие загогулины:

Добавляем к ним размытие через эффект Gaussian Blur с радиусом 1:

Шаг 10

Вспоминаем, что мы хотели разместить в коробке :)

Шаг 11

Вспомнив, позволяем этим мыслям немножко проявиться:

Далее масштабируем символы (или любые другие фигуры)

в соответствующих местах, не забывая про перспективное искажение (для более точного изменения лучше перевести в кривые):

Еще немного деталей:

Шаг 12

Добавляем светимости внутреннему содержимому: копируем наш символ, нижней версии добавляем размытие Gaussian Blur (radius = 1,5), а для верхней Opacity делаем 50%.

Шаг 13

Выделяем боковые грани крышки, копируем, объединяем (Path → Unite), размещаем под оригиналы:

Добавляем тень (Offset 1, Softness 2), направляем ее вниз (Angle = 270) и выставляем в цвете оттенок красного (Opacity 0,2):

Шаг 14

Добавляем текстуру. Для этого создадим отдельный слой (Texture) и скопируем в него заготовку из фона. Выставляем Opacity 10% и делаем заливку подходящей текстурой:

Шаг 15

Перемещаемся на слой фона. Заготовку делим на две части (можно провести линию и сделать Path → Divide):

Нижнюю часть делаем черной. Верхнюю красной. Обоим ставит размытие Gaussian Blur (raduis = 2):

Нижней части можно также немножко добавить тени.

Шаг 16

Добавляем еще несколько световых эффектов: копируем светящийся символ, немного увеличиваем в масштабе, увеличиваем прозрачность (Opacity 30%), увеличиваем размытие:

Повторяем эту процедуру еще несколько раз, смещая копии немного вверх:

Итоговый результат:

Исходные файлы и png-иконки всех трех картинок в приложении.

p.s. Спасибо Ambroise Coutand за описанный подход к рисованию таких коробочек.

Напоминаю, что Expression Design студентам, школьникам и аспирантам доступен бесплатно по программе DreamSpark.

Другие “рисовальные” посты

Оригинал: Как нарисовать картонную коробочку в Expression Design?

Прототипирование интерактивного баннера в Expression Blend 3 + SketchFlow

kichinsky — Tue, 15 Dec 2009 09:37:00 GMT

Прототипирование

Протопирирование — важный этап на пути создания готового продукта. Это именно то время, когда сырая и мутная идея начинает обретать признаки жизни, воплощается в реальность, кровь и плоть из битов и байтов, а также кнопочек и формочек :)

Прототип, в отличие от идеи, уже можно потыркать, пощелкать, повертеть и покрутить.

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

Ну и, конечно, борьба со временем, которого всегда не хватает — прототип должен делаться быстро. Не стоит вкладывать годы жизни в воспитание слона, только чтобы понять, что у него не вырастут крылья. Также нелепо вкладывать уйму усилий в то, что заведомо не сможет взлететь. (Впрочем, иногда встречаются страусы и пингвины. :)

Cегодня мы начнем развлекаться с прототипированием в Expression Blend 3 + SketchFlow.

Задача

Нужно быстро сделать прототип интерактивного баннера с четырьмя плашками (кнопками), по нажатию на которые открывается тот или иной экранчик.

Известны названия плашек и разделов: “Сообщество”, “Приложения”, “Рынок”, “Выбор”.

Плюс примерно понятны метафоры-контент, которые должны быть на каждом из экранов.

Заготовки

Не теряя много времени на прорисовку деталей и отточку всех графических элементов, делаем зарисовки основных экранов на бумаге или в любом графическом редакторе. (Paint из Windows 7 более чем подходит ;)

Просмотреть полный альбом

Теперь у нас пять экранов: загрузка + по экрану на каждый из разделов.

Рабочее пространство

Открываем Expression Blend 3 и создаем новый проект SketchFlow (я выбираю проект для Silverlight).

В дереве файлов проекта создаем новую папку для изображений (Sketch) и перетаскиваем в нее наши наброски:

В рабочей области по центру внизу должно быть открыто окно SketchFlow Map (если закрыто, открыть комбинацией клавиш Shift + F12 или через меню Window).

В остальном это обычное рабочее пространство для дизайна Silverlight-приложений.

SketchFlow Map наглядно показывает, какие есть экраны и компоненты и как они связаны друг с другом. Пока что у нас только один экран Screen 1.

Базовый прототип

Изменяем размер экранчика до размеров картинки, переносим картинку в рабочую область. Название экрана в SketchFlow Map также можно переименовать, например, в Loading.

Tips and Tricks: по умолчанию экраны создаются размером 640х480px. Если менять размер вручную неудобно, изменить эти параметры можно в меню Tools → Options → SketchFlow и далее дефолтные значения для экранов (Screen) или компонент экранов (Component screen).

Создаем еще один экран:

щелкам правой кнопкой в свободном месте Sketchflow Map → Create a Screen, ИЛИ
наводим мышку на иконку существующего экрана, тянем за левую выпадающую иконку и получаем новый связанный экран
, ИЛИ
нажимаем на кнопку Create a Screen в нижнем меню:

Обратите внимание, что во втором случае экран получается сразу связанным.

Если скомпилировать приложение сейчас (а это полноценное Silverlight-приложение), то в панели Navigate будет видно, что с текущего экрана Loading можно перейти на экран Screen 1.

Возвращаемся в Expression Blend. Аналогично добавляем еще три экрана, перемещаем на них изображения, переименовываем, связываем.

Чтобы добавить недостающие связи (напомню, что в нашем случае с любого экрана можно перейти на любой другой, кроме экрана загрузки), следует воспользоваться второй слева выпадающей иконкой:

Теперь все экраны связаны друг с другом:

Tips and Tricks: иконки экранов можно раскрашивать в разные цвета — из контекстного меню или щелчком по правой выпадающей иконке (Change visual tag).

Tips and Tricks: кстати, каждый тег имеет название, например, синий — Navigation, зеленый — Component. Названия и сам цвет можно менять через меню Project → SketchFlow Project Settings.

Компилируем приложение, смотрим, что получилось:

Здорово! Но не совсем. Плашки-то не кликаются!

Переходы, навигация

Чтобы добавить возможность переходить, щелкая по плашкам, нужно сделать совсем немного:

рисуем поверх плашки прямоугольник (можно и кнопку, тут это непринципиально),
убираем закраску,
из контекстного меню Navigate to → выбираем, на какой экран нужно перейти.

Проделываем аналогичную операцию для всех экранов и плашек.

Tips and Tricks: кстати, связи между экранами (стрелочки в SketchFlow Map), для которых назначены подобные переходы при этом добавляются автоматически (если их еще нет).

Компилируем. Теперь можно щелкать по плашкам! Ура!

Еще немножко эффектов

1. Добавим кнопки Learn more… Здесь не должно быть чего-то сложного.

Tips and Tricks: для прототипов (Sketch) есть специальные “рисованные” стили всех основных контролов и элементов (от прямоугольников и кнопок до списков и табов) — это позвляет убрать эффект восприятия прототипа как готового приложения.

2. До сих пор экранчики у нас сменялись по нажатию на плашку. Что делать, если хочется, чтобы они сменялись при наведении мыши?

Когда мы добавляли к прямоугольникам (плашкам) возможность перехода на экран, к каждому из них было привязано соответствующее поведение (Behavior). (О самих поведениях (Behaviors) и действиях (Actions) я расскажу в другой раз. Они, кстати, применимы не только в SketchFlow-проектах.)

Поведения, привязанные к объектам можно увидеть в дереве объектов (в данном случае это NavigateToScreenAction):

Если его выбрать, справа откроется меню свойств этого поведения:

Нас интересует событие, по которому срабатывает триггер (EventName) — сейчас это MouseLeftButtonDown. Меняем на MouseEnter:

Повторяем операцию для всех плашек на всех экранах.

Tips and Tricks: в рамках одного экрана (файла) эту процедуру можно немного автоматизировать, если переключиться в режим кода и сделать соответствующие замены (Ctrl+H): <i:EventTrigger EventName="MouseLeftButtonDown"> меняем на <i:EventTrigger EventName="MouseEnter">.

Компилируем. Теперь по экранам баннера можно перемещаться, наводя мышь на плашки. Ура! Теперь можно показывать прототип заказчику.

И заметьте: ни одной строчки кода!

Готовый проект можно найти в приложении к статье.

Напоминаю, что Expression Blend студентам, школьникам и аспирантам доступен бесплатно по программе DreamSpark.

Оригинал: Прототипирование интерактивного баннера в Expression Blend 3 + SketchFlow