Saturday, August 22, 2009

Expression Blend 3: Adobe PhotoShop and Adobe Illustrator Support

With the introduction of Expression Blend 3 comes the ability to import both Adobe Photoshop (.psd) files and Adobe Illustrator (.ai) files directly into your projects (layers, shapes, text elements and more)

Some useful links about these features:

Starter Kit: Venture into Gaming with Behaviors in Expression Blend 3 (first module)

Janete Perez

SilverZine

I have imported Photoshop file with some image layers, vector shapes and layer mask. Dialog with file settings and DJ imported into Blend’s artboard below.

Photoshop1 Photoshop2

Friday, August 21, 2009

Expression Blend 3: Behaviors

Blend 3 introduces a new concept called behaviors for both Silverlight and WPF. Behaviors are self-contained, re-usable snippets of interactivity that can be assigned interactively to art board content. For more information read this post.

Useful Links

Starter Kit: Venture into Gaming with Behaviors in Expression Blend 3

Expression Blend and Design Team

Christian Schormann

Kirupa Chinnathambi

Peter Blois

Shawn Wildermuth

Additional behaviors

My examples

I’ve built five examples with behaviors:

FirstUsage Behaviors1

TargetSource Behaviors2 Behaviors3 Behaviors4 Behaviors5

Custom Behaviors6 Behaviors7

Game Behaviors8 Behaviors9

BlendSamplesDemo Behaviors10 Behaviors11 Behaviors12 Behaviors13

Wednesday, August 19, 2009

Expression Blend 3: SketchFlow

SketchFlow is a flexible, informal, quick and powerful way to sketch and prototype rich, dynamic interactivity with Expression Blend.

Below are materials that I recommend for learning SketchFlow:

I have created my SketchFlow Application (a band website). I’ve used almost all SketchFlow features which are described in documentation and tutorials.

Screens & Connections (navigation & composition) SketchFlow1

SketchStyle Controls SketchFlow2

Navigation (buttons) [behaviors]SketchFlow3

States (screen) SketchFlow4

Activating State (button) [behavior] SketchFlow5

SketchFlow Animation SketchFlow6

Playing an Animation (button click and other events) [behaviors]SketchFlow7

Sample DataSketchFlow8

Feedback (SketchFlow Player: adding & exporting)SketchFlow9

Feedback (Expression Blend: importing)SketchFlow10

Exporting to Word SketchFlow11

SketchFlow12

I have used annotations, too.

You can also:

  • import a Microsoft PowerPoint presentation and use the slides as the beginning of a SketchFlow project
  • package your SketchFlow project (you get a separate version of your prototype that can then be sent to a client or team member)
  • convert a SketchFlow prototype into a production-ready project (by removing SketchFlow references)

Behaviors and Sample Data are Blend 3 features that help with prototyping. I’ll describe them in next posts.

Wednesday, August 12, 2009

Deep Zoom Composer: Collection support & Extensible templates

Kirupa Chinnathambi, a program manager in the Expression Blend team, has written excellent posts about collection support and extensible templates in Deep Zoom Composer. I have tested all these new features.

Collection Support

You no longer have to compose your images. You can just import your images and go straight to exporting using options: Silverlight Deep Zoom –> Export as a collection –> Tag Browser. To filter what images you see based on the tag, you should add tags in Compose view:

collections1-sh collections2-sh collections3 collections4 collections5

Extensible templates

Now you can export Silverlight Deep Zoom collection using predefined templates:

  • Blend 3 Behaviors + Source
  • Deep Zoom Classic + Source
  • Deep Zoom Navigation (Default)
  • Empty Project + Source
  • Tag Browser

The process of selecting a template from within DZC is extensible. You can easily add your own templates with or without Source Files/Project. You should copy your files to Export Templates folder (in DZC installation directory) and restart DZC.

templates1

I have set blue background in my test templates.

templates2

The latest release of Deep Zoom Composer has other interesting new features. Analytics tracking allows you to specify tracking URLs that will silently get called when you zoom in on an image or region. You can know which images of advertisement get the most attention. Another feature is support for Smooth Streaming.  Now you can export your images into a form that is optimized for servers with the technology enabled.

Monday, August 10, 2009

Deep Zoom Composer: Slideshow, Menu & Links

The Deep Zoom technology in Silverlight can be used to do a lot more than just allowing you to zoom in on high resolution images. Using Deep Zoom Composer you can now create slideshows, link images to other images or external links, and create a menu for navigating to images. For more details please read this post.

Janete Perez, a program manager in the Expression Blend product team, has written excellent posts about these cool features:

I’ve tested all these features, too. Look at my image compositions below.

Slideshow

slideshow1-sh slideshow2

Menu

menus1 menus2

Links

links2-sh links3-sh links4-sh links5