Sunny Pixels

Comments (0)

Twitter test

Follow @zyngapoker

Comments (9)

Silverlight TV 49: Creating Rich Interactive Prototypes with SketchFlow – Part 2

Hi again!

The second video has been posted on Silverlight TV which was filmed with John Papa to talk about the SketchFlow features in Expression Blend 4.  Here’s a link to part 1 and part 2 of the series as well as a few links with more info/answers to questions I’ve received via Twitter, comments, and email

- Here’s a link to a blog post about how to add Mockup controls to your Expression Blend Library

- Here’s a zip of the Expression Blend 4 project solution for the WP7 Facebook App from the video

- Here’s a link to the running Silverlight application from the video

- Here’s the chrome image that I used for the background of each screen:

I’ll post a step-by-step tutorial next week for building the Windows Phone 7 Facebook Prototype App that I covered in part 1 and part 2 of this Silverlight TV video series.

Smiles,
Janete

Comments (0)

Silverlight TV 48: Creating Rich Interactive Prototypes with SketchFlow–Part 1

Hello!

I wanted to share a video on Silverlight TV where I joined John Papa to talk about the SketchFlow features in Expression Blend 4.  This video is Part 1 of 2 and covers an introduction to creating rich interactive prototypes with SketchFlow. Feel free to share and leave some feedback!

Check back next week for Part 2 of this SketchFlow introduction.

Happy viewing!
Janete

Comments (0)

What’s up with Expression Blend in 2010?!

Hi everyone!

It’s be a while since I’ve updated my blog- super busy year over here in the world of Expression

We launched Expression Studio 4 back in July (yay!) and more recently we also released a Service Pack and an update to Expression Blend 4 so that you can build Windows Phone 7 applications. It’s been a great year and I hope you’ve had a chance to check out the new products! Here’s are some links for downloads and more info:

- Download/Try the Expression Studio 4 Ultimate which includes Expression Blend 4

- Download the Expression Blend 4 SP1

- Download the Windows Phone Developer Tools

- Check out the Expression Blend Team Blog for more info and updates

Check back soon for more blog posts of tutorials and videos!

-Janete

Comments (5)

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 (11)

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 (24)

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