The team blog of the Expression Blend and Design
One of the slew of new things that is being released at MIX today is the Deep Zoom Composer powertoy:
If you have followed the Silverlight 2 Beta 1 announcements, Silverlight 2 includes support for the Deep Zoom technology to allow you to quickly and smoothly zoom in on really large images. If you want to see an amazing implementation of the Deep Zoom technology, check out the Hard Rock Memorabilia site: http://memorabilia.hardrock.com/
What is the Deep Zoom Composer? Deep Zoom Composer allows you to quickly import your own images, arrange and position them to your liking, and export the final output as either a Deep Zoom Image or Collection that can be fed into Silverlight's MutliScaleImage control. This means that you too can use your own images and display them using our Deep Zoom technology.
Click the link below to download the free preview version:
Because we are currently at MIX, we haven't had a chance to write a detailed post outlining all of the cool things you can create. Rest assured, we'll be explaining more about this application in future blog posts, but until then, feel free to try this out and let us know what you think.
Cheers! Celso, Janete, Kirupa, and Lutz
FYI: In case you are curious, Deep Zoom is related to the SeaDragon technology that we have been demoing in our PhotoSynth application for a while.
To access the User Guide, make sure you have the latest version of Deep Zoom Composer installed and go to Help | User Guide or press F1:
If you reached this post via the User Guide link found in the Welcome Screen, rest assured that we will fix that bug in the near future. Clicking the User Guide link should open the user guide and not take you to a blog post :)
Up until now, all of the Deep Zoom samples we’ve shown in this blog were of single high-resolutions images. This is the case where you arrange all of your images on the artboard, and during export, flatten everything into a large image before breaking them up into the various tiles. This is actually the default behavior of the Deep Zoom Composer and is done transparently in the background while you export. Single high-resolution images are great, but if you wanted to do more with your images such as programmatically move individual images around or filter your images (similar to the Hard Rock Cafe Memorabilia site), the single high-resolution image is not ideal. That is where the Collections feature of Deep Zoom comes in.
With collections, instead of flattening your entire composition into one image before generating your image tree, you actually generate an image tree for each image in your project. This is almost like generating a single high-resolution image for each image you use. The details are not that important. What is important is that this allows you to control each image individually while still retaining the layered zooming and fading effects that Deep Zoom is really known for.
Instead of just describing collections using text, below you’ll find an example that showcases these features instead:
Your browser does not support inline frames or is currently configured not to display inline frames.
Click on the Randomize Images button to arrange your initial layout into a grid. Keep clicking on Randomize Images to continue randomly swapping your images while still staying within this grid.
If you are curious to see how the above example was created, below I’ve posted a sample project (make sure you have the Silverlight 2 Tools Beta 1 installed) that contains everything you will need:
As you can see, this is really cool, and best of all, you already have everything at your fingertips to create collections using the Deep Zoom Composer itself. In a Deep Zoom Composer project, from the Export workspace, check the “Create Collection” checkbox, and your output is properly adjusted for collections:
The source files provided earlier contain both the C# Silverlight 2 project as well as the Web Site project where your images are stored. Take a look at the Page.xaml file to see the extra Grid/Column info I added for our MultiScaleimage to ensure our Collections will display initially, and if you are curious to know how the rearranging animation was done, take a gander at the Page.xaml.cs as well.
In case I never explicitly mentioned it, feel free to reuse and modify any of the source files I’ve posted into your own (hopefully cooler!) examples.
- Kirupa (Expression Blend)
- Lutz Gerhard (Live Labs)
Hi everyone, One of the most frequent requests you all have made has been for samples that showcase taking the output from a Deep Zoom Composer project and integrating it with the MultiScaleImage control to have a cool example. We provided an example of that in the previous post. That example only included mouse wheel support but nothing else. In this post we not only incorporate mousewheel support for zooming but we also incorporate using the mouse to pan and clicking/Shift+clicking to zoom in or zoom out thanks to the nice work by Scott Hanselman.
The following example includes everything you need plus a sample Deep Zoom image containing some Vista wallpapers I arranged and exported via the Deep Zoom Composer:
The sample solution contains both a C# Silverlight project as well as a Web Site project:
In your Web Site project, inside your ClientBin folder, you will see a folder called vistaWallpapers. The vistaWallpapers folder contains the images, xml, and bin files Deep Zoom Composer (DZC) output.
To reuse this sample for your own projects, delete the vistaWallpapers folder and import your own folder containing the DZC output. Once you have done that, open Page.xaml in your Silverlight project and change the source of your MultiScaleImage control to point to your new folder and its info.bin file in your Web Site project:
Once you have replaced your images and changed the path to the images in Page.xaml, build your project and view your DeepZoomOutput.html page in your browser. Things should just work...if they don't, please feel free to comment below and I'll take a look!
Cheers! Kirupa =)
Over the past month, we released beta versions of Expression Blend 2 and Expression Design 2, a preview of Expression Blend 2.5, and a preview of Deep Zoom Composer. With four new releases, there is a steady supply of interesting topics for all of us to write about on this blog. To give you a preview of what future posts will contain, we’ll probably elaborate a bit more on the list of the new features Blend 2 has, describe more of the Deep Zoom Composer, and also shower you with information on Design 2!
This brings me to my request. While we try to write about things that interest you as well as us, do you have any particular topics that you would like us to write about more? Don’t be shy - let us know via the comments below, and we will try to work your request into our regularly scheduled programming :P
Hi everyone, I have posted a quick ZIP file containing a sample project that shows you how to use the output from the Deep Zoom Composer with Silverlight's MultiScaleImage control.
Beyond giving you a working example, this implementation also includes a C# approach to getting mousewheel support in IE, Firefox, and Safari (Mac). You can read more about my mouse wheel support on my blog here.
For another example using the keyboard, please read Mike Taulty's post on this topic.
Update: Scott Hanselman has posted a modified version of this code with panning, click-to-zoom, and more! Check it out here.
Thanks to all of you who attended the session Celso and I gave at MIX08. If you didn't get a chance to see us, you can view the session here. Besides describing how our Deep Zoom Composer was developed and styled, we spent the first half of the session working on a sample application called the FurnitureShowroom:
We've received numerous requests to provide the source files for FurnitureShowroom, so...here you go:
When you extract the above source files, there will be a folder called Database. Please move the Database folder to your C:\ drive so that the application knows where to get the data from. Make sure you also have the SQL Server 2005 support enabled. That is an installation option in Visual Studio, but you can also install the free SQL Server 2005 Express edition instead.
We had such a blast at MIX08! I hope you had a great time too. I had a session on Friday called XAML-Ready Design Agency with Expression Blend. I feel very happy for meeting all the folks that were able to join us during the session. I have published all the assets for my session including the DeepZoom “slide deck” we used during the session (We decided not to use PowerPoint anymore, just DeepZoom, thanks to Kirupa).
I’m also including my source Expression Design file to my slides and all the other assets by Celso, Sam Paye, Kim Sealls and Dan Cook. Now you can see for yourself how some of the assets used in the presentation such as the image you see below were created:
Feel free to re-use, just add a note mentioning the source :-) You can find more news about training related topics for designers @ ux.artu.tv.
Arturo | Designer Audience Product Manager
You've just downloaded the new release of Expression Design 2 and you're anxious to try the new slicing feature. This article will guide you through the process of creating slices which will then be exported to an HTML document. To follow along with the steps outlined below, please download the frog.zip file. Let's get started.
Expression Design uses absolute positioning in CSS to position objects in HTML documents. Where the objects are positioned in the artboard is where they will appear in a web browser after exporting the slices to an HTML document. (Remember that the artboard is the area within the Document Frame.) For example, if you want your design to be positioned beginning in the upper left corner of the browser window, position your objects starting in the upper left corner of the artboard. Once your layout is exported to an HTML document, you may alter the positioning in Expression Web.
Another important consideration is the order in which your slices appear in the Slice Layer, which is created after you create your first slice. Just like the stacking order of objects in Design, the order in which your objects appear in the Slice Layer determines whether the objects are above or below other objects in the HTML document; more on this in the next section.
There are two methods of creating slices in Expression Design. The first method is to choose the Slice tool in the Toolbox and drag around the area you want to define as a slice. Let's do that now. Choose the Slice tool, the 7th tool from the top in the Toolbox (shortcut letter k), and drag from the upper left corner of the frog image to the botton right corner past the drop shadow on the bottom and right sides of the image. When you release the mouse a light blue, transparent object appears over the image. This is the slice.
When you create the first slice you'll see that a new layer is created in the Layers panel, named Slice Layer. Expand this layer and you'll see an object named Slice1 followed by a file type extension. This is a good time to rename the slice because the slice name will be the name of the exported image and of the CSS class by which the image is referenced in the HTML document. To rename the slice, double click on the slice name in the Slice layer and then type the new name FrogImage and press the Enter key to accept the new name. There's no need to type the file extension as Design will add this for you.
The second method of creating a slice is to right click on a selected object and choose Create Slice from Selection from the context menu. You can right click on a selected object using the slice tool or any other tool in the Toolbox. Once you choose the Create Slice from Selection option from the context menu, that slice will appear at the top of the slice layer, above previously created slices.
Regardless of which method you choose to create your slice, it's important to know that the slice will include anything that is visible on top of the object you're creating the slice from. If we were to right click on the gradient filled object at the top of the artboard, the slice would not only include the gradient filled object but also the Green Team text object and the part of the frog image that overlaps the gradient filled object. To eliminate these items from the slice, we'll hide those objects before creating the slice. Let's create a slice using right click method next.
Expand the layer named Layout in the Layers panel. A new feature in Design 2 allows us to hide individual objects within a layer. Click on the eye icon to the right of the text object named Green Team to hide the Green Team text on the artboard. Locate and click the Eye icon next to the grouped objects named Frog Image to hide the image. Now click on the gradient filled object at the top of the artboard, and then right click on the selected object and choose Create Slice from Selection. Notice that a new slice is added to the slice layer, above the FrogImage.png object, named Slice2. Mouse over the newly created object and notice from the popup preview that the slice includes only the gradient filled object.
Now click on the eye icons to the right of the Frog Image group and the Green Team text objects to make those objects visible again, mouse over the newly created slice again and notice that these previously hidden objects still do not become part of the new slice.
Rename your new slice GradHeader.png. Your Layers panel should now look like this:
Before we move on the adjusting the slice properties we've made so far, go ahead and create slices for the remaining objects which include the Green Team text above the gradient header (remember to hide the gradient filled object first), the navigation bar (hide the buttons and frog image first) and the buttons on the navigation bar (hide the buttons first). Remember to rename the slices as you want them to appear in the final HTML export.
If you expand the Layout layer in the Layers panel you'll see that the buttons are grouped objects. There is no real advantage to grouping these objects because as long as the text on the buttons aren't hidden first, the text will be included when you create a slice of the button. I simply grouped the objects to make a more organized layout; either way, the results are the same.
Adjusting Slice Properties
Click on a slice in the Slice Layer and notice that the Appearance panel is replaced with an Edit Slice panel. Here you can make adjustments to the selected slice properties. A slice will default to a .png file extension but if your slice is a photo you would probably prefer to export the slice as a .jpg file. If this is the case, you would locate the Format value box and, using the arrow to the right you would select the .jpg format. Expand the drop down list now and see what options you have to choose from. When you change a file extension the slice in the Slice Layer will change to reflect the new chosen format file extension and the options in the Edit Slice panel change to the options available for your chosen format. The value box containing Slice contents allows you to see what is included in the slice so you can check or uncheck the objects you wish to include in the slice.
A large preview window also appears in the Edit Slice panel giving you a visual of the expected output of the slice. You can experiment with changing the values of the various value boxes and checking and unchecking other options to see the results of your adjustments.You also have the ability to change the dimensions of the slice in the Width and Height value boxes in the Edit Slice panel. For the GreenTeam.design file we can accept the default .png file format and the values set by default for our slices. Let's move on the exporting and viewing the compiled HTML file.
Exporting to HTML & Slices
Choose File > Export from the menu bar. In the resulting dialog box, choose Slices in the Items to Export section. You'll see each individual slice in the preview window. Clicking each slice will highlight the slice in the preview. When you're satisfied with the slices, choose HTML & Images in the value box to the right of the Container Name value box and type a name in the Container Name value box. Again, it's not necessary to add the .html file extension as Design will do this for you. Accept or change the Location where the HTML file will be saved and then click the Export All button to create the HTML document and image slices.
Navigate to the HTML file in Windows Explorer where you saved the document. Notice that the image slices were saved in a separate folder using the name you gave the document in the steps above followed by _files. This makes it easy to change the location of your images if you choose to do so at a later time. Double click on the HTML file to launch Internet Explorer and view your masterpiece. If all went well, you're done and ready to pass the files along to the web designer who will open the and work on the file in Expression Web.
Before wrapping it up, you might explore the different export container options. In additions to HTML & Images, you can export to XAML WPF Canvas, XAML Silverlight Canvas and XAML Resource Dictionary.
- Annie Ford