The concept of creating vision videos to sell an idea has been around since there has been cameras and specially TVs. Just like today Microsoft publishes a Health future vision video, 50 years ago people were also pitching the “Hospital of the Future” or movies and documentaries were displaying how life would be like with future technology.

Portraying the future has always been a passion for humans. The “What comes next?” question drives many people of many backgrounds, from painters, designers, developers, engineers, politicians, stock brokers and of course gamblers. Video as a medium to communicate messages is very effective because it is so rich. Video offers moving images and sound that communicate ideas in a more tangible, digestible manner to people. Video does a better job in tricking people to think that what they are watching is “real” - “If I see it, hear it and makes sense then it should be real”… and if not real at least it is more “credible”.

So the question is why would only big corporations produce vision videos? The answer is NO!, everyone, all of us who are part of the IT industry, the Web… the UX and Design world… we should all see ourselves at the beginning of a new project for a client as a James Cameron or a George Lucas. Vision videos are for everyone. Vision videos do not have to be always thinking 50 years ahead… make vision videos 1 year head… 6 months ahead… 6 weeks ahead. Help your client visualize the future. There is  “magic” when someone (like you) are able to show your client where they will be in 6 months (after they hire YOU to design and develop their new website, business application, or mobile experience)… and yes, here comes the marketing pitch! Use SketchFlow! whoa! - did I just trick you into reading this whole blog post to finish with getting SketchFlow? if you are reading this, chances are I succeeded but no, seriously, there are many tools designers use to visualize the future… Adobe After Effects is a great tool to produce videos with effects and a lot of agencies use it. It is not a prototyping tool per se but people use it for visualization. I call it “the Photoshop of video”. Mastering AfterEffects is not easy though. Also lot of people use Powerpoint! yes, slides with animations to communicate how the final application or website will look like - the vision of the future… well, I think you will also find that Expression Blend and SketchFlow can help you create these future visions.  You can create animation easily and integrate images or graphics from Photoshop or Illustrator. You can integrate video and even simulate how your client’s experience will behave “in the future” by making this Silverlight-based vision interactive. Prototyping is about helping you visualize where you are going to and discover issues and opportunities before hand. The same principle of the power of video applies: the richer the medium is to communicate your message - like a future vision interactive prototype - the more engaging and charismatic your ideas will be for your client.

• Future vision videos and prototypes get people excited!
• You determine the timespan of your “vision” (e.g 50 years, 10 years, 1 year, 6 months or 6 weeks)
• Use different media to share your vision to your client. They will love it.

For example, check out this terrific vision of the future video that with INCREDIBLE detail described how life would be in the year 2000.

Thanks to everyone who filled out our Design Tools and Techniques Workshop for MIX10. Here are the results. I wanted to share with you as they show interesting trends on what people are interested in learning more related to Silverlight and Blend. The survey focused on the design/UX aspects of Silverlight. Note these numbers do not represent “coolness” levels per topic rather, they simply show what people are more interested in learning about. Here is an image of the full survey with the topics…

I hope this list helps book publishers, Silverlight community rockstars, training companies and us here in Microsoft to produce more content on the top rated topics. What do you think about this? Any other topics we could have included in the survey?

The Rating number shows the sum of points per topic. People rated topics with 1, 0, -1 (Like +, Like, Not Like). The Points number shows the positive sum of votes per topics 2, 1, 0 (Like +, Like, Not Like). Basically the first number, Rating dramatizes the different between love and hate per topic. 

In this small survey you will find the different topics that Archetype, Adam Kinney and I will be covering during the workshop. We have 3 areas we want to cover: 1) Design Concept 2) Interactive Design 3) UI Development.

Design Concept are activities you perform while capturing the needs of your customers and putting together that early concept that you can then sell to your client, get their approval and get started. This early concept needs to look great and communicate the UX vision you have for the client.

Interactive Design is about creating compelling, rich and engaging UIs. Learning more about Animation, Effects, Transitions and Controls in Expression Blend.

UI Development is about learning coding techniques to bring up your UIs to the next level in terms of interactivity and richness. From creating your own Behaviors, Controls, Layout panels to Pixels Shaders and exposing all these in a Expression Blend friendly manner for designers.

As part of the CRE8 Conference last week in Miami, August de los Reyes and I presented a collection of the cool videos, websites and customer stories. Here is a great list for you with the best of best in Silverlight and UX.

Should I add any other cool website, video or customer story about Silverlight and Microsoft UX? Leave me a comment and I’ll be happy to add to the list.

August de los Reyes, Director of UX for Surface and I just came back from cold Miami… yes cold! I had to use a sweater all the time - It was sunny though and beautiful. My first time in Miami. I can’t believe the color of the ocean there - it’s all emerald. I’m looking forward to going back sometime in the future, in summer with more time to go to the beach.

One thing that wasn’t cold at all was the warm reception we got from our partners at AGI Training and GOA. We had a great time with everyone during the event. Thank you to all attendees who where there during the event.

Continue reading the full article with 25 Inspiring Silverlight Websites, Videos and Customer Stories here…

August and I had the opportunity to participate in the CRE8 Conference and deliver the keynote. I belive the keynote was recorded but I wanted to share with you all the links of demos we showed during the keynote. I think you will find this list handy as a guide of what is possible with Silverlight. Most of these real websites are built with Silverlight 3 and Expression Blend 3. Now that Silverlight 4 and Expression Studio 4 are getting closer the kinds of things you will be able to create are even cooler - remember that with Silverlight we now get Microphone and Webcam support, better and easier business application features among many other features. For Expression Blend 4 we are still not sharing some of the good and upcoming news but it will definitely be the most exciting release ever.

We’ll talk more about this at MIX in Las Vegas.

Partner Case Study - D’Strict UX Studio in Korea

A few weeks ago I had the opportunity to visit Europe as part of the Microsoft REMIX Tour 2009. REMIX is basically the little brother (or sister) event of the Microsoft MIX event – …

On the last stop of the tour – Lisbon – I met a very interesting group of folks who call themselves Mix and Blend (check out their cool Silverlight site and their portfolio). Mix and Blend is the name of their design shop and they help software development companies with the creation of the user interface and user experience of software applications and websites using Expression Blend. “We do the Blend work for development companies who do not have designers in their teams,” said Sérgio Ferreira, CTO.

Talking to Mix and Blend put me in a Beach Boys mood. All the guys in this team were wearing a cool black t-shirt that said We Blend for You.

continue reading the full post here…

I know I know - I deserve a tomato (or two) in my face for not posting since Kawasaki’s talk in SxSW early this year. Man, blame Twitter! that little thing got me to feel I didn’t need to blog anymore as kind of satisfied my need to reach out to you guys and to be in connection but not anymore, no longer will Twitter be my darling - I’ll go back to blogging. Anyway, just so that you forgive me here are 20 top resources I send out to Microsofties and customers whenever they ask me: How do I get started with Blend? - In Microsoft I focus on the Design audience (Design audience meaning Developers, Designers, UX architects etc) who care about the design capabilities of Silverlight.

Here are what I consider the top 20 resources for you. Ping me if you notice I’ve missed something REALLY important but keep in mind this list is for the “Design” side of Silverlight only… which in my mind is basically Expression Blend.

To Get Started: 

1.       Go through the Starter Kits

2.       Go through the Full Course

3.       User Online Resources to get additional info and more tutorials

ONLINE RESOURCES

Download the Expression Blend Trial

http://www.microsoft.com/expression/products/Blend_Overview.aspx

Get the Expression Blend for Free via the WebsiteSpark program!

http://www.microsoft.com/web/websitespark

Project Rosetta

http://visitmix.com/labs/rosetta

Silverlight Switch

http://www.silverlightswitch.com/

Nibbles Tutorials

http://www.nibblestutorials.net

Kirupa.com

http://www.kirupa.com/blend_silverlight

Expression Blend Team Blog

http://blogs.msdn.com/expression

Download Additional Behaviors – Community Gallery

http://is.gd/4NlY5

Dynamic Prototyping with SketchFlow in Expression Blend

http://www.dynamic-prototyping.com/sketchflow

Expression Community

http://expression.microsoft.com

Silverlight Community

http://www.silverlight.net

SilverZine

http://silverzine.com

Andy Beaulieu

http://www.andybeaulieu.com

Victor Gaudioso

http://victorgaudioso.wordpress.com/category/silverlight-video-tutorials

FULL COURSE

In this course you will learn all the basics to create Silverlight and Expression experiences. It is an end to end get started. It includes an almost 200 page mini book with exercises, reference material and explanations by American Graphics Institute instructors. It also includes a collection of assets that you will be using throughout the course. For more specialized training check out the Starter Kits below.

File 1 : Get Started with Silverlight - Full course > (100-200 level content)

http://download.microsoft.com/download/4/E/D/4ED9A068-7431-435A-8FD3-D7F6746998CF/Create_Silverlight_with_Expression_Blend_3_Course.zip

File 2: Service Pack 1 for the Get Started with Silverlight course – (you need this file in addition to the Full Course file)

http://download.microsoft.com/download/4/E/D/4ED9A068-7431-435A-8FD3-D7F6746998CF/Service_Pack01_Create_Silverlight_with_Expression_Blend_3_Course.zip

STARTER KITS

Silverlight

Introduction to Prototyping with Sketchflow in Expression Blend 3: Assets, Guide and Video Package

Discover Sketchflow, a new feature set in Expression Blend 3 that helps you define the concept for user experiences in early stages of the design process. From sketches to wireframes to protoypes of simple or high definition, Sketchflow provides you the right tools to communicate your ideas and gather feedback from others.

http://download.microsoft.com/download/A/4/9/A49AB02F-F035-402C-9B26-84860EEAF7DC/Prototyping_with_Sketchflow_StarterKit.zip

Creating a ColorSwatch Control in Expression Blend 3: Assets, Guide and Video Package

Victor Gaudioso and AGI Training take us on a tour to learn how to use a custom layout control like the Circular Panel to create fun and creative arrangements of objects in a List Box control. No longer Lists need to be linear and boring. You will learn how to customize this circular panel enabled Listbox to look like a Color Swatch control. This will help you reuse this control in your own projects easily.

http://download.microsoft.com/download/F/F/8/FF8B289E-7DC4-4FC5-BAB6-9464240923FA/Creating_a_ColorSwatch_with_ExpressionBlend3_StarterKit.zip

Venture into Gaming with Behaviors in Expression Blend 3: Assets, Guide and Video Package

Learn more about how to build a traditional “bricks” game using Expression Blend 3 Behaviors. Simply drag and drop Behaviors over objects in your artboard to easily add powerful and sophisticated functions like animation, physics, interactivity, data connection, effects and more. All without coding. The ever growing Behaviors Gallery at expression.microsoft.com is always avaialable for you to download new behaviors.

http://download.microsoft.com/download/1/1/C/11C8F2E2-711B-4581-A688-6B66DA4D1124/VentureIntoGaming_ExpressionBlend3_StarterKit.zip

Support for Silverlight in Expression Web 3: Assets, Guide, Video Package

Learn how to leverage the new and easy to use Silverlight support features in Expression Web 3. Using a template kindly provided by TemplateMonster.com, AGI Training will help you learn how to take your websites and publish them to an FTP location without having to leave Expression Web.

http://download.microsoft.com/download/B/9/8/B9874A4F-58F8-4D01-8E2F-E1DAC62ED4A3/SilverlightSupport_Web3_StarterKit.zip

For Integrators or UI Developers: Building a Product Website with Expression Blend 3: Assets and Guide

Christoph Schittko, Architect Evangelist for Microsoft has produced this amazing lab that will take you by the hand (metaphorically speaking J) and help you put together a Product website that leverages the new Perspective Transformation in Silverlight 3 to create a 3D based rotating Zune that you can customize choosing colours or tattoos.

http://download.microsoft.com/download/4/A/4/4A45D010-6152-4557-BAD9-62CC2040108F/BuildingZuneWebsite_ExpressionBlend3_StarterKit.zip

Expression Web

Discovering SuperPreview in Expression Web 3: Assets, Guide and Video Package

Learn more about SuperPreview, a new visual diagnostics tool in Expression Web 3. In this Starter Kit using a template kindly provided by TemplateMonster.com, you will be provided with detailed guidance on how to leverage SuperPreview to diagnose issues across multiple browser, all with full rendering fidelity and detailed control.

http://download.microsoft.com/download/F/3/4/F343C86B-FEE4-4448-8715-CA768BB305FE/ExpressionWeb3_SuperPreview_StarterKit.zip

Creating Standards Based Websites with Expression Web 3: Assets, Guide and Video Package

Learn how to produce beautiful and fully standards compliant websites with Expression Web 3 with this Starter Kit. Based on a template kindly provided by TemplateMonster.com, AGI Training gives us a tour on how to follow better practices to achieve W3C compliant HTML code.

http://download.microsoft.com/download/5/4/B/54B5B8F5-9B00-4D86-A185-7E315ED26A93/Standards_Based_Websites_with_Expression_Web3_StarterKit.zip

Here is a summary of this keynote session at SxSW. SxSW is over and it was an amazing event. Really outstanding results from the PhizzPop design challenge yesterday night. Will blog more about this soon but now let’s switch gears to MIX09… the clock is ticking… what is going to be announced? Follow this blog and me via twitter to get updates and get more info about all the new and amazing features that are about to be announced for our platform and tools at MIX09. You can’t miss it!

#sxswi end of keynote. Amazing session, fun… And “almost free”…

#sxswi Guy Kawasaki now charging for questions here at the keynote! Hilarious. Monetizing the “free”.

#sxswi question “why does YouTube doesn’t charge for premium contetnt? I’d be willing to pay”.CA “u get premium content at hulu.com and free

#sxswi CA re: economical crisis “how does crisis change free?” people are not as “dis-empowered” this time…

#sxswi GK “people fear losing something they have or fear of not getting something they want?” CA “FREE doesn’t frustrate,no fear,no scary”

#sxswi GK “free is free. One penny is not free”… How come “1 penny” cost be perceived so different from totally free, 0 pennies.

#sxswi this business models apply to “online” digital services… How would this work with analogous business? Like Starbucks?”

#sxswi Kawasaki “why not give your book for free to ur Tweeter followers?”… Good idea to provide value to ur “fans”

#sxswi CA”writers/publish companies might have a similar relation and future to what is happening on the music industryrecord label/artist”

#sxswi CA re: what is harder, to achieve popularity or to monetize popularity “harder to monetize, tweeter facebook…help becoming popular”

#sxswi CA re: future for Wired “paper magazine still with long life. Online mag is instantaneous info. Both formats good”

#sxswi Chris Anderson (Wired) re: how can Tweeter make money? “free to consumers but charge companies who are making money out of Tweeter”

#sxswi is definitely not a “design” event but a ’start ups’ event. Lots of inspiring ideas to help u think out of the box

Studio Aiko, an amazing character design studio in Thailand kindly invited me to participate in her second Monster Party due on Christmas day 2008. You can go to the Monster Party and vote for your favorite character. The idea was to send a monster with christmas/winter theme. I decided to create Elwë the Lizzard. To get to it I got 3 sources of inspiration: 1) a sketch I had drawn a few months ago 2) a Lizzard (or some similar animal) and 3) Will Ferrell’s interpretation of an elf in his Elf movie. Very funny!

I created the entire character in Expression Design using the bezier pen, dynamic colors and effects. I also used a bit of Photoshop to create the furry feel in the coat and hat.

You can download the source Design file for Elwë the Lizzard here… I hope it helps you get some ideas on how to design characters or icons.

What do you get when you mix Will Ferrell’s Elf character with a lizard?

I had drawn this sketch a few months ago… I envisioned it as a little monster with little pointy teeth. I left it there in my sketchbook waiting for the right time to bring it to life.

When Aiko invited me to participate in the Monster Party No. 2 contest for Christmas I thought the original sketch would be great for a monster so scanned the sketch and then used Expression Design bezier pen to draw the outlines… Because this is a Christmas theme I had to dress up my monster with an elf looking suit. I got inspiration from Will Ferrell’s Elf character… he is so funny!

I then realized the eyes were cute but it didn’t really look like a monster or a lizzard so I change the eyes to be more lizzard looking. This kind of removed the cuteness of the character but I liked it more… I continued to add details using the bezier pen. You will also notice I added some surface curves around the head, body and legs which helped me keep track of perspective and angles much better…

Here I gave it the first color pass, just trying to determine the colors for different parts of the lizzard… it all felt too green! but lizzards are kind of green and Will’s suit is green so I decided to make it work somehow using only greens… the risk was for the result to end up looking all green making it hard to separate body from head and tail but the next stage (textures) helped a lot in achieving a good visual result even when it’s all green.

I started adding textures… I got a reptile skin image and applied it using the Screen Blending mode in Expression Design. This is a very subtle reptile skin texture which works well with this cartoon type of character. I loved the result. I played with Opacity to achieve the bumpiness of the reptile skin I wanted.

At the end I took my image into Photoshop and added the final details. I used the smear tool to create the furry look in the white collar and the hat. I then brough the image back into Expression Design and added the black outline to make the character stand out from the background. You can see Elwë the lizzard dancing in the Monster Party at: www.studioaiko.com/MonstersParty.html

Please visit Studio Aiko and vote for one of the many cool characters in the Monster Party.

You want to start authoring Silverlight applications? These are the programs you need to install to have a full toolset to get started creating Silverlight. If you do not have a license for the tools then you can always get the trials. Visual Studio Web Developer Expressi and DeepZoom Composer are free though!

Authoring Silverlight applications requires to layers: design and coding.

To design

• Make sure you install .NET 3.5 SP1 before anything else. By now, most Windows computers have this already so on most cases you don’t have to worry about it. What is .NET 3.5? It is the thing that the latest generation of Windows applications need to run (Expression needs this to run). If you want to learn more about it check this out… but trust me, you need it.

• Install Silverlight for PC and/or Mac - This is the Silverlight plugin. In life there is a Flash plugin, a Shockwave plugin, a QuickTime plugin… Silverlight is also a plugin.

• Install Microsoft Expression Blend 2 and then install Expression Blend 2 Service Pack 1 on top of it. - Expression Blend is the authoring tool to design user interfaces for Silverlight. It’s kind of like the Flash or Director of Silverlight. It’s the tool you use to integrate graphics (vectors + bitmaps), animation, audio, video, controls, layout, text and more.

• Install Expression Design 2 - This is a vector based illustration tool. It’s not a Photoshop like program, it’s more like Illustrator. I love it and I have been using it for 5 years. The color selection methods are WAY better than Illustrator and take much less to launch. It’s not a print tool like Illustrator and doesn’t have all the features that Illustrator does but it’s great for icons, controls and UI design. It can also import Illustrator artwork

• Install Expression Encoder 2 and then install Expression Encoder 2 Service Pack 1 on top of it - Encoder will compress or encode video or audio that you can then integrate into your Silverlight application. It’s not like a FinalCut or Premiere. This tools simply “encodes”. It’s very easy to use and makes encoding a piece of cake for people like me who are not video pros. It has some goodies like adding Markers or packaging your video in custom video skins.

• Install DeepZoom Composer- Super cool and easy to use. Free tool. If you want to see what is DeepZoom check out the HardRock Memorabilia - (Tip: drill into the post stamp in one of the envelopes of a Beatles letter in there…)

For development or coding

To create Silverlight you need two things 1) XAML  (XAML is kind of like an HTML language that helps you design your user interfaces) and 2) .NET Code.

You use the Expression tools to create XAML - so if you install the tools listed above you are covered here.

If you also want to add some code or programming to your user interfaces to create functional applications then you need to add some .NET code. .NET code is like Flash’s ActionScript or Director’s Lingo. We just happen to call it .NET. .NET supports different languages. The one I recommend you use if C# (C Sharp). It feels similar to ActionScript 1 and 2 but much more to ActionScript 3. In the Flash tool, you can design and code right within the same tool. You open the Actions panel and you type ActionScript. Now, in the world of Silverlight you *design* using the Expression tools, mainly Expression Blend and then you add the code (C#) using a separate tool. There are mainly 3 tools you can use to type in your C# code:

1) Notepad - The good ‘ol text editor. You can write C# here and have Expression Blend automatically launch it when you need to do so. I use it myself most of the time because I do not code too much and don’t need advanced functionalities from Visual Studio. This is as primitive as you can get though, Notepad.

2) Visual Studio Web Developer Express. This is what I should be using! This edition of Visual Studio is FREE! and it now supports Silverlight aid tools like Intellisense. You can get these Silverlight goodies (called Silverlight Tools for Visual Studio 2008 SP1)  and create C# code in super cool coding environement.

Install Visual Studio Web Developer Express 2008 SP1

3) Visual Studio Professional. This is for developers but designers can also use it. It’s really powerful. Great debugging, deployment and development features, tons of documentation, support etc. This one is not free but if you want power and a robust environment this is what you need. Besides creating Silverlight you will be able to add code to WPF applications, Mobile, Web, ASP.NET and more.

Install Silverlight Tools for Visual Studio 2008 SP1

I’ve received a couple emails from friends who attended the Paris and Brighton events asking about what we used for the presentation “slides” (in reality they are not slides anymore but one single huge image… like a mind map). The technology is called DeepZoom.  DeepZoom is a feature part of Silverlight 2. You can create DeepZoom experiences by coding OR you can use DeepZoom Composer to get you started. Composer is a small tool currently offered for free. The Expression team creates this tool. Kirupa is very involved with it and keeps the community updated. Many of you might know Kirupa from his Flash blog and posts which have helps many people learn tips and tricks in Flash. Kirupa joined Microsoft last year as a Program Manager for Expression Blend. In his latest post Kirupa announced a new photo stitching feature available inside of DeepZoom Composer… lovely!

The process I followed to create my DeepZoom presentation is:

Design your single one “slide”… a mind map… it can be an illustration, flow chart, abstract or photography based image…  anything you like. I use Expression Design but you can use any other graphic design tool you like.

Export the image at a really big size (I usually do 14,000 pixels wide or height, whatever is bigger… you could do even larger if you like). DeepZoom composer handles gigabyte(s) large images so no worries… it was born to deal with large images. You want to do the image really big because you want to zoom in really close to it and still see the image crisp and neat. Export at 96dpi because that is the resolution that Silverlight uses (compared to the traditional 72dpi we use everywhere else). Export your image as a PNG if using flat colors or JPG if using lot’s of photos.

Open DeepZoom Composer and follow the 3 Step creation process… Import Image(s), Compose and Export. The Compose step is interesting. It turns out that you can “DeepZoomize” not only one image but any number of images… so in reality you could have exported multiple images from Expression Design or Photoshop… and then compose the final layout in DeepZoom Composer. The reason you would want to do that is to make images of different sizes. With some code this can also let you dynamically show/hide images you want to see or not. Check out the HardRock DeepZoom Experience…

When exporting you will get different options. Try View in Browser. You need a mouse with wheel to zoom in/out. What DeepZoom creates for you is a Silverlight project. A Silverlight Project is a collection of a bunch of folders and files of all sorts. It looks a lot like an HTML website project. I mention this because if you are a Flash designer you are used to deal with one single file, SWF. In Silverlight you work with a Project, this collection of files. There is also a package method called XAP. XAP is kind of like the SWF file. A XAP file is nothing more than a ZIP file with a different extension. Anyway, I mention this because the first time or first few times you want to re-open the DeepZoom experience you just created (which like I mentioned above is just a Silverlight project) you might get lost  because there are so many folders… the file you need to look for is:

C:\Users\[Your user name]\Documents\Expression\Deep Zoom Composer Projects\[Name of your Project]\source images\OutputSdi\remix uk\DeepZoomProjectWeb\ClientBin\DeepZoomProjectTestPage.html

So just open this html file and that’s the thing that will launch your DeepZoom experience. I usually make a shortcut in my Desktop or copy the entire Name of your Project folder to another location…

A few tips for creating these presentations is to design the mind map in a way that doesn’t have you zoom in/out too much… Also when designing the map, try to think about “framing” shots of that map that you will be talking about throughout your presentation… this “framing” is pretty fun because it will never be the same… you will always pan throughout your map a little different so try doing a design that works well with this “on purpose imperfection”.

Hello! Thank you everyone for joining us at the CRE8 Conference last week at Orlando. It was an amazing experience being there with you. Thanks to everyone for being there at the keynote (early in the morning after a party! ).

After the keynote we also hosted some technical sessions. You can find the assets I used for those sessions here. The first session we had was focused on creating Silverlight using Expression Blend and Design. We went through the basics of using Design to create vector based graphics and then export those to Expression Blend. Then we learned more about Blend mainly discovering some of the differences with Flash. Like I said during the session, I like not to add adjectives before these comparisons as in “better” “worse” but simply using Flash as a point of reference given so many of us have that background. We learned a few tricks on how to do things you would normally do in Flash but now in Expression Blend. We also learned about other features, exclusive of Silverlight and Expression Blend like DeepZoom, Hand Off timelines, the ability to have any tumber of Storyboards per object (we call them Storyboards in Blend, where in Flash we call them Timelines) and to the question of “Where are my movieclips” well, we showed User Controls which is the way you do movieclip-like objects in Silverlight 2.

A surprise for you: New DeepZoom composer release!  Remember the DeepZoom Brian used for the keynote? or the one we used in the Silverlight Authoring session?… you can now create those DeepZoom experiences in a snap using the new DeepZoom composer release. Kirupa, an Expression Blend Program Manager announced a new version of DeepZoom Composer. This is the release I used when showing you how to create these experiences.

Also, during CRE8, Microsoft release the version 2 of our products. That makes you all attendees very special since you where there with us right we announced this publicaly. You can check out the new site at www.microsoft.com/expression and download trials of the tools. We also welcome you to visit http://expression.microsoft.com which is the community website. Lot’s of good content there.

Please drop me any question you might have. I’d love to hear your ideas for our products and the types of features you would like us to incorporate in there. The Expression team has opened a thread for you to post your ideas. Believe me, I know these guys, the read this with passion! so post anything you like. It’s all being heard in detail. You can truly influence the creation of the tools.

Interesting thread that explains how to successfully bring in assets from Adobe Illustrator into Expression Design. When creating Silverlight content, you can use Expression Design but you can also use Illustrator or Photoshop. If you use Illustrator then you can import your design elements to Expression Design and use the XAML Exporter in Design. Note that not everything will be imported from Illustrator into Design, for example effects or custom brushes might have to be rasterized or lost but for all the normal geometry with color fills, gradients etc, this import method will work great. 

Read thread from bottom to top.

From: Yin

Here’s a way to get correct 96 dpi when importing AI file (assuming the ai format is supported according to William’s comments).

• [Beta only step]  [If you are using Design V2 beta, there’s a bug about automatic DPI when opening ai files, workaround is to create a new blank document and set it to 72 DPI.  This should be solved in the final release of Design 2]
• Open your AI file in Design.
• File->Document size,  this popup a dialog.  Notice the DPI is 72.
• Remember your document width and height, in terms of pixels.
• Change DPI to 96.  (the pixel dimension might change with dpi change)
• Change width/height back to original pixels (the dpi should remain 96)

OK.

You should get an document with the closest visual appearance while preserving the pixel dimensions.
Then you can copy&paste them to another Design document, or export them to Blend.  Everything should be in 96 DPI.

– Yin

Hi Sarah,
Two important things
Make sure the AI file is written out in PDF compatible format, otherwise Design can’t read it.
For the dpi issue do an ‘open’ rather than an ‘import’. With open we automatically set the dpi to 72 in design to match up with AI. For import, the dpi depends on how you’ve set that up when you created the document. This latter assumes you’re using Version 2 of Design. I’m actually not sure if this auto setting made it for the Beta or not (I’m actually doubtful it did), in which case you can use import, just make sure you’ve specified 72 dpi when you create your Design doc.

William

Hi Sarah,

There is some information about importing from Illustrator to Design in Design’s online readme: 

http://www.microsoft.com/expression/products/readme.aspx?key=design

–Dawn

Hello all,

I was wondering if anyone has information or documentation they could point me to that details the process for importing AI files to Expression Design, including things such as setting up files in AI so that when they translate to Expression Design it is as close to the same as possible.

Specifically I am looking for information on:

• When exporting from AI to Expression, the dpi is different what’s the best way to approach this?
• There does not seem to be a setting in AI to use 96 dpi.

We are trying to record exact processes for getting artwork from different programs / formats and would appreciate any information.

Thanks
Sarah

Hello! We got an email letting us know about some video based case studies that show different agencies or customers in action using Silverlight and Expression. Folks like Library of Congress, WeatherBug, Terralever and EasyJet.com who talk in a documentary style their experiences with Silverlight. They are pretty fun. Personally I enjoyed the one from Terralever because they talk about games which I like.

I noticed a problem when using the Silverlight video player in the Case Studies site (they might have fixed by the time you read this). If you rollover the the Pause button in the video controls, you will notice that the cursor changes between Arrow and Hand kind of unexpectedly… just rollover this Pause icon slowly, move the cursor within the icon and you will see the cursor goes back to an arrow when you go in between the two little bars that make out the Pause icon.  This is a typical problem I see in Silverlight apps. What you need to do in these kind of icons is draw a rectangle that helps you define the “hit” area of the button. Flash has something called “hit” area. In Flash, when you create a button… you have Normal, Rollover, Rollout and Hit. In Silverlight you have to provide the Hit area yourself. I created a small chart below to explain the approach to Hit areas using Silverlight. Let me know if you have any questions.

This is the list of new updates on the new Expression Blend 2 August Preview… directly from the product team. (Thanks Unni!)

“We are pleased to present our next preview of Microsoft® Expression Blend™ 2. Please feel to download and try from here.”

What is new in this preview?

Silverlight support
Expression Blend 2 August Preview continues to further support for building Silverlight applications by moving the project system towards creating Silverlight 1.0 Release Candidate applications.

Visual Studio 2008 support
Expression Blend 2 August Preview can open and work with Microsoft® Visual Studio® 2008 (formerly known as Microsoft® Visual Studio® code name “Orcas”) Beta 2 projects and solutions. Windows Presentation Foundation (WPF) projects created in Expression Blend are now, by default, Visual Studio 2008 projects if Microsoft .NET Framework 3.5 is installed and such projects cannot be edited in Visual Studio 2005. Expression Blend 2 August Preview can still open the projects created using Expression Blend or Visual Studio 2005.

Make User Control
Expression Blend 2 August Preview contains an early look at new functionality that lets you re-factor existing content into a control that can be reused (instantiated). Currently, only selected elements—and their referenced resources—can be re-factored into the new control. Any referenced animations are currently lost, but the current plans for next release are to preserve these as well. You also need to build the project to be able to see and instantiate the new control.

XAML Editor Improvements
Expression Blend 2 August Preview allows you to specify font size, font family, word-wrap, etc. for the XAML editor (XAML tab). Stay tuned for future improvements!

Build options
When building inside Expression Blend 2 August Preview, the property $(BuildingInsideExpressionBlend) is set to true. This can be used in your project or .targets files to cause the build to behave differently. For more information on how Visual Studio supports this scenario, refer to this documentation.

Storyboard Picker
The Storyboard Picker replaces the old Storyboard combo box. The picker consists of a Storyboard label (with Rename command), a context menu (for fast New/Delete), a popup button (and resulting popup) and a Close button. The popup contains all Storyboards in scope in a multi-column layout. The Storyboard Picker can be resized, and its list filtered. The Storyboard Picker also contains a New button and contextual Delete and Close buttons. In addition to the improved usability, the Storyboard Picker label will in future serve as a selection affordance for Storyboards.

Object manipulation
Added ability to uniformly resize and scale multiple selected elements by using resizing handles on the artboard.

We look forward to your continuous support and feedback!

On behalf of the Expression Blend team,
-Unni