Sunny Pixels

Comments (7)

Silverlight Firestarter Event- Today Sept 17th

• Be sure to check out the remainder of today’s Silverlight Firestarter event!
  • Live Telecast: www.msdnevents.com/firestarter/online
  • Twitter tag: #slfs: http://twitter.com/#search?q=%23slfs
  • Questions: please send them to mithund@microsoft.com
  • Online presentations: http://blogs.msdn.com/mithund/archive/2009/09/17/silverlight-3-firestarter-slides.aspx
  • Video recordings: All content will be made available within a week from today. Follow updates on Mithun’s blog: http://blogs.msdn.com/mithund/default.aspx

Here’s my slidedeck about Expression Blend 3- SketchFlow: (The video will be available in a week or so. I will post the demo shortly.)

Hope you enjoy the event!
Janete

Comments (12)

Blend 3 Survey: Enter to win a FREE ZUNE HD!!!

Hi everyone!

We just announced the Blend 3 Survey on our Expression Blend team blog where you can enter to win the newly released FREE Zune HD!!! We hope to use the survey results as part of our planning for the next release of Expression Blend. This is your opportunity to give us tons of feedback/suggestions AND get the chance to experience the awesomeness that is the new Zune HD :) Be sure to fill out the survey before the deadline of October 5th, 2009 @ 11:59pm and read the official rules to be eligible for the Zune drawing. The winner will be able to personalize their own 32GB Zune HD at the Zune Store: http://zunestore.net.

Smiles,  
Janete

Comments (15)

Importing Adobe Illustrator files in Expression Blend 3

I previously wrote a few blog posts about importing Adobe Photoshop files into Expression Blend 3. This post focuses on the ability to import an Adobe Illustrator .ai file and converting the content to Silverlight 3 or WPF objects. You can also use this import feature to bring in wireframes or comps created in Illustrator to use in a SketchFlow application.

The Illustrator import feature in Blend 3 has the equivalent functionality to the Illustrator import feature in Microsoft Expression Design 3. Let’s use the following file as an example and open it in Illustrator to explore its contents:

The Illustrator file above displays a complex illustration that is composed of an image, a text control, as well as a variety of vectors.

In order to be able to import .ai files into Blend you must ensure that the “Create PDF Compatible file” checkbox is checked when the file is saved otherwise the file will not import.

Once saved with the “Create a PDF Compatible file” setting enabled you can import the .ai file into  Blend by selecting the “Import Adobe Illustrator File…” entry in the File menu. You can then select an .ai file and see the following results on the artboard:

The Illustrator layers are converted into equivalent Silverlight 3 and WPF objects and displayed on the Objects and Timeline panel. Many features from Illustrator files are imported and others are not supported. You’ll notice some of the following behavior:

• Images: Images are imported as PNGs and automatically added to a <.ai file name>_images folder in the project.
• Text & Vectors: Text and vector artwork are all converted to editable paths on import.
• Visibility toggle & lock states: These properties are preserved for the imported objects.
• Gradients: Midpoint stops and gradient stops are imported and editable.
• Layer Structure & Groups: Only the top groups are preserved in the file structure.
• Layer Names: These are only persisted only for the top level groups in the file. Object names in  Blend can only contain alphanumeric character [A-Z][a-z][0-9] and underscores. Keep this in mind when naming objects in Illustrator :)

Similar to the Photoshop import results, you can add interactivity to all imported Illustrator content! This includes any prototyping features, animation, data-binding, and all of the Blend 3 functionality :)

Questions or future Illustrator import feature requests? Leave a comment!

Smiles,
Janete

Comments (4)

Expression Blend 3 + SketchFlow RC Overview

Last Friday we announced the public release of the Expression Blend 3 + SketchFlow Release Candidate and Silverlight 3 RTW. If you haven’t already installed it here’s your chance to get the latest build of Blend with all of the functionality including the first ever public release of SketchFlow!

• Download the Blend 3 + SketchFlow RC installer NOW!!! 
• Download Silverlight 3 =)
• Download the Deep Zoom Composer RC for building Silverlight 3 Deep Zoom content.
• Visit the Microsoft Expression Blend home page for product info.
• Check out the Expression Blend Community site.
• Post questions to the Expression Blend Forums
• Read more about Blend 3 + SketchFlow features on the Expression Blend team blog.

Overview of Features

Are you curious about the top reasons for using Blend 3 + SketchFlow? Here’s a brief summary of a prototype I created using many of the new features and ZERO code! In a subsequent post I will go into more detail for the individual features I used for this project.

In the planning stages for Deep Zoom Composer, a tool for creating Silverlight 3 Deep Zoom content, we wanted to begin with a prototype to explore the functionality we wanted to ship in the release candidate. You can download the final version of the Deep Zoom RC here.  You can see the Silverlight version of my prototype here which I will reference throughout the post :)

There are many *AMAZING* features that we worked on for Blend 3. We really hope to improve workflow, increase productivity, and really facilitate the creative process from prototype to production. In subsequent posts hopefully I’ll be able to cover more features but I’d have to say that my top four Blend 3 features are:

****drum roll please! :)****

• Prototyping
• Importing Design Assets
• Design Time Data
• Behaviors

Now for a quick summary of these features….feel free to leave a comment with questions btw :)

1.  Prototyping

In Blend 3 you can take your ideas from vision to reality by using SketchFlow to quickly and efficiently compose interactive sketch style prototypes. You can create and deploy your prototypes to leverage the underlying platforms, Silverlight for cross browser, cross platform deployment and WPF for the ultimate Windows client experience.

In the SketchFlow Map panel you can add screens to create a navigational flow for your prototype. Below you will see that I stated with a splash screen which connected to my “Import” screen. The rest of the connections indicate where the user can navigate to from each screen and what bits of reusable components (in green) I created.

I was able to very quickly mock up the interface using the provided controls in the Assets panel under SketchStyles:

Below is a snapshot of the beginning stages of my Deep Zoom Composer prototype. 

Christian Schormann has some great blog posts that talk about SketchFlow in detail.

2. Importing Design Assets

With the new Adobe Photoshop and Adobe Illustrator import features I was able to take a .psd file that my designer created and bring it into my prototype in Blend 3. Below is the splash screen for Deep Zoom Composer created in Adobe Photoshop.

You can easily import the .psd file with the File->Import Adobe Photoshop File… command. The following dialog will appear allowing you to apply settings to this file:

Below is the splash screen imported into Blend’s artboard:

You can read more details on importing .psd files in my related Photoshop Import blog posts here.

3. Design Time Data

In Blend 3 you now have the flexibility of designing your user interface through the effective use of sample data. I was able to use sample data to create a listbox of images on my design surface that also worked at runtime. Sample data helps designers visualize what the UI would look like at design time and in the browser for their prototype before they have live data set up.

The Data panel allows you to create sample data that can be configured and then dragged/dropped onto the design surface. As you can see above you can set the types and properties of each item in a collection. I was even able to point the location to a set of images instead of using the default images provided by Blend 3. 

Above is a view of my design surface using the sample data I created. In the browser when the user selects an item in the listbox on the right the selected item’s data is displayed in my details view on the left. Sample data can also be seamlessly switched to a live data feed at any time.

For more details be sure to check out  Unni’s blog on Sample Data in Blend 3 here. You can also see a variety of other databinding related posts here.

4. Behaviors

The last feature that you’ll find incredibly useful is behaviors. This new feature allows you to bring a project to life by adding interactivity with powerful building blocks of functionality without writing any code. Well somebody has to write the code, but it doesn’t have to be you! :) The idea is that designers are able to find behaviors online via our Expression Gallery or a developer on their team can write a behavior for them and they can reuse these bits of functionality across projects. Blend 3 also ships with a set of behaviors which you can find in the Assets panel. As you can see we provide you with various types of navigation behaviors, state and property related behaviors, as well as animation behaviors.



Behaviors were key in bringing my prototype to life since I really wanted to have a live preview of Deep Zoom content on the artboard that the user could interact with to zoom in/out. The workflow was really straight forward: 1. Kirupa, my awesome officemate & fellow Blend PM, wrote a few DeepZoom related behaviors for another project that he let me use. 2. I added the .cs code files to my project. 3. The behaviors appeared in my Assets panel in the “Behaviors section. 4. I dragged and dropped the behavior I wanted to use to individual objects on the object tree and set the multiScaleImage control as the target. I built the project, ran it and it all worked!!! I was able to save myself he time of having to write tons and tons of code. The great thing is that I can reuse these behaviors in other projects and share them with others :) 



Above you can see that I had a multiScaleImage control for displaying Deep Zoom content and three buttons for zooming in/out/home. Each button has a DeepZoom Behavior which I dragged and dropped from the Assets panel. You can select the behaviors in the object tree and edit properties in the Properties panel.



For the Deep Zoom “Zoom In” behavior the only properties I had to set was the TargetName to be the multiScaleImage and the ZoomInValue. Now when the user clicks on the “Zoom In” button the images will, you guessed it, zoom in :)

Below is a simple version of the Deep Zoom Composer prototype that I created in Silverlight with the Blend 3 features described above. Again, I didn’t have to write a single line of code :) I am preparing a tutorial to take you step by step through the creation of this project. Stay tuned for more updates. If you’d like to see the prototype in a separate window click here.

Note: The SketchFlow Player is exported automatically to view and navigate through your prototype in the browser for Silverlight SketchFlow projects. It has three panels: The “Navigate” panel allows you to click on the links screens and zoom the view in/out. The “Map” panel shows you the navigation flow of the prototype. The “Feedback” panel allows you provide feedback and view the author’s annotations. Be sure to click the annotations toggle to view my comments in the SketchFlow player:

 

To the left is the toggle to see annotations. To the right is an example of what annotations look like. Click the yellow icon “JP2” for example to expand and read my notes :)

Many, many more features!

This is really just a small set of the new features in Expression Blend 3. Stay tuned for more in depth tutorials and posts :) Let me know if you have any questions or things you would like included in the tutorials.

Smiles,
Janete

Comments (2)

Expression Studio 3 Announced!

Today we announced Expression® Studio 3, a suite of professional design tools for creating Rich Internet Applications, along with Silverlight 3!!! This is super exciting for us on the Expression Web, Expression Design, Expression Blend, and Expression Encoder teams. The Expression Studio 3 is the first product to earn Windows 7 Compatibility Logo and will be shipping within the next 30 days. Below are various blog posts and links gathered from the Expression Studio 3 site, community site,  team blogs, and forums. Stay tuned for upcoming related blog posts!        Expression Studio 3 Overview Video      The Visual Kitchen Video

Expression Web 3 Microsoft Expression Web 3 gives you the tools you need – PHP, HTML/XHTML, CSS, JavaScript, ASP.NET, ASP.NET AJAX, visual diagnostics and sophisticated CSS design capability – to produce high-quality, standards-based Web sites. Includes SuperPreview. Blog links: Expression Web Blog Soma’s Expression Web 3 blog post Blog posts on the xWeb blog related to SuperPreview. Useful Links: Expression Web 3 Overview Video Expression Web 3 Product Information Expression Web Community Site Expression Web Forums

Expression Blend 3 + SketchFlow Microsoft Expression Blend 3 revolutionizes the speed and efficiency with which you can take your ideas from initial concept to completed project on the Silverlight and .NET platforms. Includes SketchFlow. Blog links: Expression Blend & Design Blog SketchFlow Concepts: An Overview by Christian Schormann Creating a Minimal Workspace for SketchFlow by Christian Schormann Expression Blend 3: Photoshop Import by Janete Perez Behavior Blog Posts by Various Overview of New Features in Expression Blend 3 + SketchFlow: Part 1 by Kirupa Introducing sample data in Blend 3 by Unni Useful Links: Expression Blend Product Information Expression Blend Community Site Expression Blend Forums

Expression Design 3 Microsoft Expression Design 3 is the perfect companion to Expression Blend or Expression Web. Create sophisticated assets with their fidelity maintained throughout the entire designer-developer workflow. Useful Links: Expression Design Product Information Expression Blend & Design Blog Expression Design Community Site Expression Design Forums

Expression Encoder 3 With Microsoft Expression Encoder, you can import and encode video files, produce live webcasts, enhance media with watermarks and advertising, and publish with Microsoft Silverlight. Blog links: Expression Encoder Blog What’s new in Expression Encoder 3 blog post by the Encoder Team Useful Links: What’s new in Expression Encoder 3 blog post Expression Encoder Product Information Expression Encoder Community Site Expression Encoder Forums

Feel free to leave a comment if you have any questions the Expression Studio 3 products.

Cheers!
Janete

Comments (1)

Navigation Features in Deep Zoom Composer

One of the side project that I work on at Microsoft is Deep Zoom Composer, an app that allows you to easily create Deep Zoom content for Silverlight. Recently we posted an updated release of Deep Zoom Composer on our Expression team blog. The three big new features are support for navigation, updated collection exporting, and reporting features for Deep Zoom ads. These new features hope to address the feedback you have all provided :) You can download the June 2009 version here:

Download Deep Zoom Composer

---

The previous release of Deep Zoom Composer provided a viewer for the browser with simple mouse gesture behaviors which allowed users to zoom in/out of the images in the browser. The purpose of the new navigation features in the June 2009 Preview is to provide users a simple way to add interactivity to their Deep Zoom content beyond zooming. Users can now create slideshows, link images to other images or external links, and create a menu for navigating to images. The following posts cover the new navigation features in the June 2009 Preview of Deep Zoom Composer in detail:

• Slideshow Support

• Creating Menus

• Adding Links

Stay tuned for more info on Deep Zoom Composer. If there is anything in particular you’d like to learn about feel free to leave a comment or email me :)

Smiles,
Janete

Comments (11)

Adding Links in Deep Zoom Composer (June 2009 Preview)

One of the new navigation features that we are supporting in the updated release of Deep Zoom Composer  is the ability to add links. This post is a follow up to my previous posts about the other navigation features: slideshow and menu support in the June 2009 Preview.

Navigation Using Links

With links support you will be able to add interactivity to your Deep Zoom content beyond zooming. When a user clicks on an image inside the browser that has a link created with Deep Zoom Composer the content will pan to another image or link to an external hyperlink. You can access the links features in the tabs to the left of the “Layers” tab. There are two tabs related to links:

• Internal links: this tab is used for creating links between images & areas within the Deep Zoom content in the browser.
• External links: this tab is used for creating connections between images & areas in the content to link to URLs.

All images that are added to the project can be viewed in the “Images” tab which is now located at the bottom of the artboard. When you drag/drop the images onto the artboard they are displayed in the “Layers” tab. Below is an example of images I have arranged on the artboard:

 The images above are all of my 1.5 year old golden retriever Texas :) 

Adding Links to Images & Areas

Along with the ability to add images to the artboard we have a new feature called “Areas” which can be used to mark or add a placeholder to a section in the Deep Zoom content. These areas can be used later to link with other images so that when the user clicks on an image the content pans to the area in the browser.

“Areas” can be added by clicking on the “Add Area” icon highlighted above in the “Images” tab.
This icon is located next to the “Add image” icon.

Above is an example of four separate areas that I added to mark the text sections in my background image that I would like to link to other images. When the user clicks the specific areas I would like the Deep Zoom content to pan to a specific set of images in my composition.

Internal Links

The internal links tab allows you to drag and drop images & areas directly from the “Layers” tab. For example, when you drag image “A” into the tab the following dialog displays which allows you to associate this image with another image to establish a direct link:

This list box displays all of the images that are being used in the artboard.

The same can be done for areas when you drag an area from the “Layers” tab into the “Internal Links” tab and pick images to establish a direct link. You can see below that I have two areas labeled “Area” and “Area 1” that are directly linked to two images on the artboard. When this is previewed in the browser the user can click the section where the areas is located and the Deep Zoom content will pan to the linked image.

External Links

Similar to the way you create internal links you can also create external links to URLs. You can drag/drop an image or area from the “Layers” tab into the “External Links” tab to associate with a URL. The following “Manage External Links” dialog will appear where you can create and enter URL information.

In this case when a user is viewing the content in a browser and clicks on the image displayed below a separate window will open linking to the URL specified above (a Flickr search of Lake Crescent images).

You can edit/remove external links by either right clicking on the entry in the “External Links” tab or opening the Tools->Manage External Links dialog. You can also add tooltips to images by selecting the image and entering text in the “Tooltip” section of the “Properties” panel:

In the browser, the user will be able to hover over this specific image and see the tooltip letting them know that they can click it and be redirected to another site.

Previewing Links in a Browser

In the “Export” workspace the user can edit the output settings to export to Silverlight, click the “Export” button, and then click the “Preview in Browser” option to view the Deep Zoom content in Silverlight.

Below is the player that is displayed in the browser in Silverlight. The default controls in the player that are include are: “Zoom in”, “Zoom out”, “Go to previous”, “Go to next”, “Home”, and “Toggle full screen mode”. In the Silverlight control below you will also notice that you can click on the areas that are located over the text which will link you to specific images. You can also click on the “Lake Crescent” image with the tooltip which will redirect you to the Flickr search URL. Use the controls or the mouse wheel/buttons to navigate the content below:

The items that are exported from Deep Zoom Composer can be viewed in the user specified folder under the “Location” label in the “Export” tab. For more info on how to integrate the exported Deep Zoom content into your website/blog check out my previous post on menu support in Deep Zoom Composer.

Stay tuned for more blog posts on Deep Zoom Composer!

Smiles,
Janete   

Comments (12)

Creating Menus in Deep Zoom Composer (June 2009 Preview)

This post is a follow up to my previous post about slideshow support in Deep Zoom Composer. In this post I will cover one of the other new navigation features: menu support. Recently we posted an updated release of Deep Zoom Composer on our Expression team blog. You can download the June 2009 Preview here.

Navigation Using Menus

Menu support is part of the navigation features added to Deep Zoom Composer to provide users a simple way to add interactivity to their Deep Zoom content beyond zooming. You can open and close the “Menu” tab by clicking on the vertical text.

Adding Images to the Menu

Users now have the option of displaying Silverlight Deep Zoom images in a menu to be viewed in a browser.  All images that are added to the project can be viewed in the “Images” tab just like in previous version of Deep Zoom Composer. When you drag/drop the images onto the artboard they are displayed in the “Layers” tab. Below is an example of images I have arranged on the artboard:

 The images above are all part of the Window 7 wallpaper themes. 

The “Menu” tabs allows users to drag and drop images directly from the “Layers” tab to be included in a menu in Silverlight.

In the “Menu” tab you can click the top left icon labeled “Refresh” to create a default menu ordering based on the images that have been already added to the artboard. Based on proximity and location Deep Zoom Composer creates a hierarchy of the images in the “Menu” tab to simulate the composition on the artboard. For example, based on the composition of the images displayed above the following tree structure is generated:

The labels are initially populated with the image name which can be named by right-clicking and selecting ‘Rename”. You can rearrange the order of the images in the “Menu” section by using the up/down and right/left arrows to create hierarchy and nesting.

Previewing the Menu in a Browser

In the “Export” workspace the user can edit the output settings to export to Silverlight, click the “Export” button, and then click the “Preview in Browser” option to view the Deep Zoom content in Silverlight.

Below is the menu player that is displayed in the browser in Silverlight. The default controls in the  player that are include are: “Zoom in”, “Zoom out”, “Go to previous”, “Go to next”, “Home”, and “Toggle full screen mode”. You will also notice the drop down menu controls on the far left that contains the hierarchy created in Deep Zoom Composer which navigate to the specified image. Use the controls or the mouse wheel/buttons to navigate the content below:

The items that are exported from Deep Zoom Composer can be viewed in the user specified folder under the “Location” label in the “Export” tab.

A folder is created with the “Name” string and the contents includes an HTML file, a .xap file, and a “GeneratedImages” folder containing the Deep Zoom images. These items can be integrated into an existing website or HTML file. For example, I embedded the above Silverlight control by uploading the .xap file and folder with the image to my web server. Then I copied the code below from the Test.html file exported from Deep Zoom Composer into my blog post and replaced line 5 with the relative location to the .xap I uploaded :)

   1:  <object data="data:application/x-silverlight-2,"

   2:          type="application/x-silverlight-2" width="100%" height="100%">

   3:              <param name="minRuntimeVersion" value="2.0.31005.0" />

   4:              <param name="autoUpgrade" value="false" />

   5:              <param name="source" value="Default.xap"/>

   6:              <param name="onerror" value="onSilverlightError" />

   7:              <param name="background" value="white" />

   8:              <param name="initParams" value="adFile=GeneratedImages" />

   9:              <a href="http://go.microsoft.com/fwlink/?LinkID=124807" 

  10:                style="text-decoration: none;">

  11:                  <img src="http://go.microsoft.com/fwlink/?LinkId=108181"

  12:                       alt="Get Microsoft Silverlight" style="border-style: none"/>

  13:              </a>

  14:  </object>

The menu navigation features provides users with the ability to define a hierarchical way of navigating images while still providing the same free form mouse wheel support for zooming.

Happy Deep Zooming!

Janete    

Comments (10)

Slideshow Support in Deep Zoom Composer (June 2009 Preview)

Recently we posted an updated release of Deep Zoom Composer on our Expression team blog. You can download the June 2009 Preview here. In this post I will cover one of the new navigation features: slideshow support. In subsequent posts I will cover more Deep Zoom Composer features :)

Navigation Using Slideshows

Slideshow support is part of the navigation features added to Deep Zoom Composer to provide users a simple way to add interactivity to their Deep Zoom content beyond zooming. The sections of the UI that is of particular interest for the slideshow feature is one of the tabs located to the left of the “Layers” tab. You can open and close the “Slideshow” tab by clicking on the vertical text.

Adding Images to the Slideshow

Users now have the option of displaying Deep Zoom images in a slideshow running inside of a browser.  All images that are added to a Deep Zoom Composer project can be viewed in the “Images” tab just like in previous version of Deep Zoom Composer. Once the user drags/drops the images onto the artboard they are displayed in the “Layers” tab. Below is an example of images a user has arranged on the artboard.

The “Slideshow” tab allows users to drag and drop images directly from the “Layers” tab to be included in a slideshow.

The images are displayed in the slideshow with the top image first. Users can rearrange the order of the images in the “Slideshow” section by using the up/down arrows.

Previewing the Slideshow in a Browser

In the “Export” workspace the user can edit the output settings, click the “Export” button, and then click the “Preview in Browser” option to view the Deep Zoom content in Silverlight.

Below is the slideshow player that is displayed in the browser in Silverlight. When the “Start” button is clicked the slideshow will begin and continue in a loop as the images are zoomed into view in order. The slideshow can also be viewed in full screen mode. The controls in the slideshow player that are include are: “Zoom in”, “Zoom out”, “Go to previous”, “Go to next”, “Home”, “Start/Stop”, and “Toggle full screen mode”. Use the controls or the mouse wheel/buttons to navigate the content below:

The items that are exported from Deep Zoom Composer can be viewed in the user specified folder in the “Export” tab. As displayed below the HTML and .xap file are exported along with the “GeneratedImages” folder containing the Deep Zoom images. These items can be integrated into an existing website or HTML file (see the bottom of this post for details on doing this).

The slideshow navigation features provides users with the ability to define a way to navigate the Deep Zoom content in a specific order while still providing the same free form mouse wheel support for zooming.

Cheers!
Janete    

Comments (0)

Photoshop Import in Expression Blend 3

I wrote a few blog posts on one of the new Expression Blend 3 features I’ve worked on in this release: Importing Adobe Photoshop Files. Check out the following posts for more details :)

• Blend 3: Introduction to Importing Photoshop Files
  This post provides an overview of the feature including the basics of the import dialog.
   
• Blend 3: Photoshop Import- Supported Features 
  Many of the supported Photoshop features in the Blend 3 Preview are covered in this post as well as a preview of upcoming feature support.
   
• Blend 3: Photoshop Import – Merging Layers 
  This post discusses the workflow for merging layers to rasterize and import Photoshop features such as blend modes and adjustment layers.

I would love to hear any feedback or comments on these topics :) Feel free to leave a comment.

Happy Blending! =)

Janete