Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    What Would You Like to See in the Next Versions of Blend and Design?

    • 115 Comments

    Even though we just shipped Expression Blend and Design 2, we are already busy planning what to do for future releases. To better help us with our planning, we'd like to hear from you.

    What are some things that you would like to see in Blend and Design? What are some of the things that you wish were done differently? Also, what are some of the things in our products that you like?

    Let us know by posting in the comments below! We take your feedback very seriously, and your input goes a long way in helping us improve our products.

    Cheers!
    Kirupa

    (On a related note, based on feedback from many of you, this blog has been restyled. A big thanks to Tim Sneath for the help.)

  • Expression Blend and Design

    Download the Preview of the Deep Zoom Composer

    • 70 Comments

    One of the slew of new things that is being released at MIX today is the Deep Zoom Composer powertoy:

    dzcSplash

    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:


    dzcicon Download the Deep Zoom Composer

    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.

  • Expression Blend and Design

    Deep Zoom Composer User Guide

    • 49 Comments

    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:

    help_userGuide

    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 :)

    Thanks,
    Kirupa

  • Expression Blend and Design

    Deep Zoom Composer – February 2009 Preview Released

    • 46 Comments

    Hi everyone,
    We have just released another update to Deep Zoom Composer, and you can download it from the following location:


    dzcicon Download Deep Zoom Composer

    The application itself contains only fixes to issues that you have reported (slightly better memory utilization, a fix for PNG transparency), but the DeepZoomTools.dll library has gone through some significant improvements. In a nutshell, if you had images that did not work properly in the earlier version of Deep Zoom Composer, you should find that most of those images should work now.

    I will blog about the improvements to the Deep Zoom Tools shortly.

    Thanks,
    Kirupa & Janete

  • Expression Blend and Design

    What’s new in Deep Zoom Composer!

    • 45 Comments

    Yesterday, we released another update to Deep Zoom Composer, and you can download it for free from the following location:


    dzcicon Download Deep Zoom Composer

    In case you are not familiar with this app, Deep Zoom Composer (DZC) allows you take images, arrange them on a design surface, and export them for use with the Deep Zoom technology found in Silverlight 2. You can see a really impressive demo at Hard Rock Cafe’s Memoribilia site where they use Deep Zoom to show you a lot of high-resolution imagery. You can create something similar using your own images with DZC.

    This update sports a lot of cool features besides just supporting the Silverlight 2 Beta 2 changes, so for the rest of this post, let’s take a look at these new features.

    XML Support
    One of the big changes we made was replacing the old BIN file formats with an XML-based file format instead (dzc_output.xml):

    image

    EDIT: Picture updated on June 9th to refer to correct XML file.

    This means that your MultiScaleImage control will no longer work when you set its Source property to a BIN file. It has to be the new XML-based file, but don’t worry, Deep Zoom Composer takes care of those details for you. The project template we export provides all of the hooks necessary for you to have a working Silverlight 2 Beta 2 application without you doing anything extra.

    Thanks to Avi Dunn, Lutz Gerhard, Dan Cory, and Radoslav Nickolov of the Live Labs team for making these changes to both the encoder as well as the MultiScaleImage control.

    Image Importing Changes, Quality Settings, Transparent PNG Support
    In previous versions, when you imported an image, we flattened everything down to a JPEG whose quality was 95. While that seems like a pretty good tradeoff, it does not help when you are importing a transparent PNG or a lossless format where quality really matters. In this version, we respect whatever file format your input image is in. If it is a JPEG or PNG, we encode it as a JPEG or PNG on the design surface. If it is some other lossless format, we pick the appropriate lossless format for you.

    When exporting, you can now pick between JPEG or PNG, and if you picked JPEG, you have the ability to adjust the image quality:

    imageFormatPNG

    We are not providing support for image formats beyond PNG and JPEG because we are only supporting the image types Silverlight 2 currently supports.

    Undo and Redo
    You now have the ability to Undo and Redo any action you perform on the artboard:

    undoRedo

    Use the Edit menu or the standard Ctrl + Z and Ctrl + Y key combinations for performing Undo and Redo respectively.

    Simplified Auto-Grid Arrangement
    To quickly help you arrange your images on the artboard, we introduced some cool snapping and guideline functionality in our previous version. Now, if you want to bypass manual arrangement altogether, you can arrange your images into a grid! Simply select multiple images, right click, and select Arrange into a Grid from the Arrange menu:

    arrangeIntoGrid

    This will allow you to constrain your arrangement by either rows or columns:

    arrangeIntoGridWindow

    All that said, the big takeaway is that you now have a very quick and easy way of arranging all of your images into a grid:

    allOfMyImages

    While the above example only shows same-sized images being arranged, you can work with images of varying sizes as well.

    Support for Tagging
    When working with collections, having a way to filter your images would be useful. Many of you were modifying your SparseImageSceneGraph XML file by adding extra nodes to represent metadata. To help with this, we are now providing tagging functionality within the UI itself:

    taggingSupport

    Select an image or a group of images, and set the tags you want on them. When you export, we now output an XML file called Metadata that contains your image details, its zorder, as well as any tags you set on it:

    metadataXML

    This file closely mimics your SparseImageSceneGraph, so you can use Silverlight 2’s support for LINQ to quickly parse the XML data and associate tags with the appropriate images. We will provide an example of how to do that in a future post.

    Final Remarks
    We hope you like these new changes, and if you have any cool features or ideas on what you would like to see in the next version of the app, let us know by commenting below.

    Cheers!
    Celso, Christian, Janete, Kirupa

  • Expression Blend and Design

    Hello DeepZoomTools.DLL : Deep Zoom Image Tile Generation Made Easy

    • 43 Comments

    In our most recent release of Deep Zoom Composer, one of the major changes we made was to change how we generated the image tiles both for designing as well as exporting your Deep Zoom Content. In the past, ever since our first release at MIX, our image encoding was done using a combination of SparseImageTool.exe and ImageTool.exe command line tools. Starting with this release, we have retired those tools and have shifted to a preview version of a .NET based DLL that provides image generation capabilities.

    If you look inside your Deep Zoom Composer installation folder, which is by default, [Program Files]\Microsoft Expression\Deep Zoom Composer, you will see a file called DeepZoomTools.dll:

     dztoolsPNG

    This DLL contains all of the functionality needed for you to generate image tiles for compositions and collections. The classes and methods that you can use are as follows:

    public enum ImageFormat { Jpg, Png, Wdp };

    public class Image
        public Image(string path)
        public double MaxViewportWidth
        public double MinViewportWidth
        public string Path
        public Point ViewportOrigin
        public double ViewportWidth

    public class ImageCreator
        public ImageCreator()
        public double ImageQuality
        public int TileSize
        public int TileOverlap
        public ImageFormat TileFormat
        public bool CopyMetadata
        public void Create(string source, string destination)

    public class CollectionCreator
        public CollectionCreator()
        public double ImageQuality
        public int TileSize
        public int MaxLevel
        public ImageFormat TileFormat
        public bool CopyMetadata
        public void Create(ICollection<Image> images, string destination)
        public void Create(ICollection<string> images, string destination)

    public class SparseImageCreator
        public double ImageQuality
        public int TileSize
        public int TileOverlap
        public ImageFormat TileFormat
        public Color BackgroundColor
        public bool CopyMetadata
        public void Create(ICollection<Image> images, string destination)

    The API should be pretty straightforward. A DeepZoomTools.Image is the internal notion of a Deep Zoom image, and it contains all of the information such as the viewport widths, path to source image, origin, etc. ImageCreator is used to define an image and write the image tiles to disk. CollectionCreator and SparseImageCreator take a list of image paths and write the image tiles to disk.

    When I was playing with this, the one thing that confused me was what CollectionCreator expected as its “image path”. It isn���t a string of paths to raw JPG, PNG, etc. files. It is actually a path to the Deep Zoom Image created via ImageCreator/SparseImageCreator. SparseImageCreator does take in a list of paths to the source image, so passing in a list of image files will work for generating sparse images (aka Compositions).

    Do note that this DLL is a pre-release version, and the Live Labs team will decide when and how to more formally release this in the future. Even though Deep Zoom Composer uses this same DLL, there may be future releases of this DLL that are independent of Deep Zoom Composer releases.

    Thanks,
    Kirupa

  • Expression Blend and Design

    Dynamic Layout and Transitions in Expression Blend 4

    • 42 Comments

    Click here to watch Kenny’s MIX 2010 session that covers a lot of the topics that you see in this post.

    - Kirupa

    In Expression Blend, we’ve been thinking for a loooong time about how to make it ever easier to create great animated visual effects quickly on top of the Silverlight and WPF runtimes. We’ve been looking at large-scale animation needs since Blend 2 SP1 and steadily building features to address those needs, and we think we’ve reached critical mass. With Blend 4, we have a compelling set of technologies that work very well together.

    This blog post is a companion to the “Dynamic Layout and Transitions” demo app that we’ve placed in the Expression Gallery at http://gallery.expression.microsoft.com/en-us/DynamicLayoutTrans. That app shows off the features whose motivations are described here.

     

    Prehistory (2007)

    Since its inception, Blend has offered keyframed editing of Silverlight and WPF properties via Storyboards. While I won’t go into specific details on that here, it forms the basis for all the features described below. Some of these features work directly from Storyboards you create and others create Storyboards behind the scenes on your behalf – and sometimes both.

     

    Ancient History (2008)

    Let’s start by turning the clock back two years. In Expression Blend 2 SP1, we introduced the States Panel, which edits VisualStates and VisualStateGroups for Silverlight 2 (and WPF 3.5 with the WPF Toolkit). This introduced the notion of a “state” as a means of communication between visuals and code, and made it dramatically easier to describe a set of visual changes. Based on input, the control code could decide when to enter what state, and the visuals would decide what changes were present in that state plus how long it took to transition between any pair of states (e.g. you might want most state changes to take 0.25s, but want Pressed state changes to be instantaneous).

    clip_image001

    This proved to be a very effective tool, but it had limitations. The core VisualStateManager runtime (which we’ll call “VSM” from now on) could only do linear interpolations of the values being set. This works great for opacity and transform offsets, but doesn’t work well for discrete properties or data that isn’t known until runtime. Also, not all animation scenarios are driven by state changes. So we put our thinking caps on about how we could get more scenarios to work in a way that designers could rapidly tool the effects.

     

    Recent History (2009)

    In V3, we added four primary enhancements in this area. The first was EasingFunctions, which are critical to making property animations have the right feel. We’ve got all the classics – quadratics, cubics, bounce, elastic, etc. Plus, you can write your own EasingFunction in C# or VB and apply it to any animation you wish. This is all supported in Silverlight 3 and WPF 4. EasingFunctions can be applied to an individual animation or keyframe, and you can apply a default EasingFunction to your entire state transition.

    clip_image002

    The second was a GoToStateBehavior on top of Blend’s Behaviors engine, which made it easy to program all your state change logic directly in the markup without code. Like all of Blend’s Behaviors, you can simply drag it from our Asset Panel onto any elements you choose.

    Those two enhancements just made the existing scenarios run better. We also wanted to address new classes of scenario. The first one we tackled was the issue of elements moving in a StackPanel or WrapPanel. Traditionally, these elements have snapped into place as an application changes elements or changes size, and we wanted a smooth transition that users could control. So we introduced the FluidMoveBehavior to make it easy for an element to watch the layout manager for when it moved to a new spot, and smooth out its progress with an animation controlled by one of those EasingFunctions we described earlier. So now it’s easy to have your elements animate into place at a speed you choose!

    clip_image003

    Here’s a picture of the feature in action. There’s no more room on the first line for the purple rectangle, so it’s moving to the beginning of the second row and the other elements are moving to make space. Technically, from a layout perspective, the elements in motion are actually at their destinations already – but by adding the appropriate transforms on top, we make the change look smooth from the visual perspective that users care about.

    clip_image005

    The fourth enhancement we made was the most challenging for us. We noticed that many times, customers wanted different states in their control to have different layouts entirely, but still respond to active layout changes in the application. For example, one layout might have a set of task panes visible outside the working area, and another might have one or more of these panes hidden. Customers wanted to describe these different layouts with states to get a good separation between their visuals and their business logic, but the properties that needed to change between these states weren’t properties that could be smoothly interpolated. For example, how do you interpolate between Visibility.Visible and Visibility.Collapsed?

    What we learned was that in cases like these, users weren’t satisfied with the direct property animations that our system provided – they just wanted it to “look right”, and making it “look right” required that we animate a morph of the change rather than the change itself. So we wrote an engine that would take a layout snapshot before the state change, take another layout snapshot after the state change, and create a smooth morph between the start and end positions, employing the duration and EasingFunction of the user’s choosing. We dubbed this “FluidLayout”, and you can turn it on here:

    clip_image006

    Just click that little button, and all your layout changes in that VisualStateGroup will be animated between states even when it seems impossible. We’ll even simulate a Visibility change by means of an opacity simulation. Note that you’ll have more success if you click this before you start making layout changes – otherwise, when you move an object, it’ll create translate/scale animations that don’t respect layout, because that’s the best that the standard VSM can do.

    It’s hard to do justice to this feature in a picture, but here’s my best attempt. In this example, the Timeline Pane is in the process of shrinking to the leftmost column, which I configured by changing the Pane’s Grid.ColumnSpan property in a state. Similarly, I changed the RowSpan of the pink rectangle, and it is in the process of growing taller as a result.

    clip_image008

     

    The Present (2010)

    In Blend 4, we’ve managed to take these themes even farther, and have three more toys for designers to play with. Let’s start with animating things in and out of lists. In V3, you could apply a FluidMoveBehavior to your ListBox, and the other items would dutifully make room for your new item or close up the space. But there wasn’t any easy way to effectively control the item that was itself being added or removed; if you were clever, you could rig up some events to make an element animate on entry, and you had to be really really clever (and pollute your data model in unfortunate ways) to make an element animate on exit. We worked closely with the Silverlight team to produce a solution here that you can tool effectively, and it’s called LayoutStates. To find them, first edit the ItemContainerStyle:

    image

    And then, note these three new VisualStates in the States Panel:

    clip_image011

    You can use these states to model what an element looks like just before it’s loaded, what it looks like after it’s been loaded, and what it looks like just before it’s unloaded. Silverlight will then animate the state changes for you at the appropriate times, as your items are added to or removed from the list. Remember to add a FluidMoveBehavior to the ItemsPanel template (note its presence in the Edit Additional Templates submenu, a couple of pictures above), and set AppliesTo = Children, to get the other elements to move out of the way. Note that if your ItemsPanel is a VirtualizingStackPanel, your ListBox should have VirtualizingStackPanel.VirtualizationMode set to Standard, or you should learn one of the other new tricks below.

    Here’s an example of this in action – the middle item is just entering the list.

    clip_image012

    The next feature we added is another in the vein of simulation. In V3, we added FluidLayout to VSM in order to get a smooth and realistic morph between two states, but it got us to thinking about the other sorts of morphs we could perform. Enter TransitionEffects. Whereas transition effects in video editing provide a pixel-based transition from one video clip to another, Blend’s TransitionEffects provide a pixel-based transition from one state to another. In Blend, a TransitionEffect is a PixelShader that has an animatable Progress property. We are shipping several of these in our SDK, and if you know HLSL you can write your own. Here’s how you set one up:

    clip_image013

    As configured here, all state changes in the LayoutStates group will perform a “Smooth Swirl Grid” pixel-based TransitionEffect, taking one second and with a cubic ease. You can of course set a different transition for any individual state change if desired. Some of the TransitionEffects have properties to further customize them; for example, Smooth Swirl Grid lets you control the level of subdivision and the intensity of the twisting effect, but those properties are under the combo dropdown in the picture. Here’s a screenshot of that TransitionEffect in action:

    clip_image015

    The final feature we added is something that we’ve been trying to wrap our minds around for five years. We’ve noticed that in a lot of applications, visuals will move from one part of the application to another even though the visuals are often generated from data. In a true MVVM design where the data model should know nothing about the visuals, it’s extremely challenging to get these kinds of effects.

    What we’ve done is train the visuals to learn more about the data model – specifically, to train FluidMoveBehavior to associate positions with data instead of with visuals. This needs a little bit of explanation, but is remarkably easy to use – you can create an animated list-detail example from scratch in about two minutes.

    Here’s a picture of such an app:

    clip_image016

    What we want is for the large chair in the details view to appear to grow out of the small chair in the master list. All we have to do is locate the Image element in the ItemTemplate for the ListBox, and give it a FluidMoveTagSetBehavior that will register it with the FluidMove system. That looks like this:

    clip_image017

    Note that the Tag property indicates that element will be tagged according to its DataContext, which is the model item behind the visuals. Next, there’s a FluidMoveBehavior on the detail Image, which looks like this:

    clip_image018

    The other half of the connection is made with the InitialTag field that is set to DataContext. This means that when the detail element appears, it will consider the registered position of its DataContext to be the place it will appear to come from. And that’s the whole thing! Here’s a screenshot of that app in action; note that in this case I set the FluidMoveBehavior on the entire Grid, so that the details would animate along with the image.

    image

    There’s an awful lot happening behind the scenes, but we’ve managed to boil this complex scenario to these two simple properties. This system can even be used to animate objects from one list to another list.

     

    The Future (201X)

    If I had included all of our future investigations in this area, this blog post would be twice as long as it is already. We’re working hard to address more and more scenarios in the simplest ways possible. Rest assured that you’ll be hearing about even more improvements someday in the not too distant future!

    If you have any opinions or feedback, please feel free to comment below.

    Thanks,

    Kenny Young
    Architect, Expression Blend

  • Expression Blend and Design

    An Update to Deep Zoom Composer

    • 38 Comments

    Ever since we released Deep Zoom Composer during MIX, there has been a ton of great feedback you have all sent us on what you liked and what you would like to see improved in future versions. To give you a sneak peek at where we are currently, we're releasing an updated version of Deep Zoom Composer for you all to play with:


    dzcicon Download the Deep Zoom Composer

    Before installing this version, please uninstall earlier versions of Deep Zoom Composer. All of your older projects should still work, so don't worry! Once you have it installed, besides a ton of changes under the hood to make creating your Deep Zoom content faster and more memory-efficient, some of the bigger features that you will immediately notice are the following:

    Improved Exporting

    The single biggest thing we heard consistently from all of you was to make exporting better. In the earlier version, all we did was just output the image tree. To figure out where you had to go from there, our Composer didn't help. Luckily, you had quality blog postings from individuals such as Scott Hanselman, Pete Blois, Wilfred Pinto, Jaime Rodriguez, and others who helped answer the question "Where to go from here?" In this version of Deep Zoom Composer, we try to make that easier for you by outputting a working Silverlight 2 project along with your image tiles:

    exportDZC

    Now, you no longer have to worry about what to do with these bizarre cutouts of images that you get as your output, and we even provide all of the mousewheel, pan, zoom, and keyboard functionality that you otherwise had to write yourself!

    Better Design Experience

    Arranging images can be a time-consuming task. To make it easier for you to do that, we've added snapping and guidelines that appear when you are dragging either a single or a group of images around:

    imageSnapping

    We also took care of the various filling/scaling issues you would have encountered when zooming in on images on the design surface. In case you didn't know, Deep Zoom Composer actually uses a variation of the tiling technology from Deep Zoom on the design surface itself, so we would be swapping images in an out at a frantic pace if you happened to be zooming and panning around while composing your images. We still do that....but it just feels more natural without the distortions you saw earlier.

    Updated Collections Export

    When exporting collections, Deep Zoom Composer would often misrepresent the position of your arrangements when you actually previewed in our browser. Thanks to the Live Labs team (Lutz, Dan, Avi, and Rado), they were able to pinpoint the problem and fix it for us in this release. You no longer have to worry about what you see in Deep Zoom Composer not being what you saw in the browser.

    Greater Access to Help

    There will be times when you would need more help than what the application provided. We've tried to call out both our support forum and this blog throughout the application so that you can quickly get unblocked on any issues you run into:

    gettinghelp

    In the past, all of these questions have been handled directly on the blog. For archival purposes, it would be great if you could post those questions on the forums instead. Scanning through several posts with 50+ blog comments for solutions probably isn't fun, and we don't want your question to get lost and go unanswered.

    Where Next?

    There are still a lot of great features that we will be adding in the future, so if you have any requests, complaints, wishes, etc., please feel free to let us know by posting a comment here or in our Deep Zoom forum on the Expression Forums.

    Cheers!
    Celso, Janete, Kirupa

  • Expression Blend and Design

    Deep Zoom Collections Example

    • 37 Comments

    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:

    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:


    slproject Download Sample

    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:

    createCollectionBox

    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.

    Cheers!

    - Kirupa (Expression Blend)

    - Lutz Gerhard (Live Labs)

  • Expression Blend and Design

    Download Expression Blend 2.5 June 2008 Preview and Deep Zoom Composer

    • 34 Comments

    Like we mentioned earlier this week, new preview versions of Expression Blend 2.5 and Deep Zoom Composer have been released today. You can download them from the following locations:


    blendicon Download Expression Blend 2.5 June 2008 Preview
    dzcicon Download Deep Zoom Composer

    Both versions coincide with the launch of Silverlight 2 Beta 2, and they both have some cool new features besides just allowing you to create content targeting the latest version of Silverlight 2.

    We’ll have follow-up posts shortly giving you an overview of what some of the new features are. In the meantime, please visit the following page for a summary of the changes and some training videos to help you get started.

    Cheers!
    Kirupa

    EDIT:
    The link for Deep Zoom Composer doesn’t seem to be working, so please use the
    Alternate Link if you are unable to download from the official link.

  • Expression Blend and Design

    What Would you Like to See in Future Releases of Deep Zoom Composer?

    • 33 Comments

    Hi everyone,
    After a bit of a break, we are currently getting the next preview of Deep Zoom Composer ready. While that is going through the final leg of the release process, I was wondering what you would like to see in future releases of Deep Zoom Composer?

    Based on the great feedback many of you have provided on my earlier question of a similar sort, I have no doubt that you all will be forthcoming with your opinions on what works, what doesn’t, and what you like to see in future releases.

    Thanks,
    Kirupa :)

  • Expression Blend and Design

    Deep Zoom Sample with MouseWheel / Pan / Click-Zoom

    • 32 Comments

    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:


    slproject Download Sample

    The sample solution contains both a C# Silverlight project as well as a Web Site project:

    projectInfo

    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:

    path

    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 =)

  • Expression Blend and Design

    Deep Zoom Composer - June 2009 Preview!

    • 28 Comments

    We know you’ve been waiting, and we know you just can’t wait any longer, so here it is:


    dzcicon Download Deep Zoom Composer

    As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.

    A few months ago, we asked you what you all wanted to see in Deep Zoom Composer, and a lot of you gave some really great ideas. The following sections highlight just a small list of the new features we’ve added and improved based on your ideas, and our subsequent blog posts will delve into these features in greater detail.

    Navigation Support
    A common request has been around doing more with your Deep Zoom images than just being able to zoom in and out on them. In this release, we have introduced some cool navigation features which allow you to navigate between images or areas of images in a web/hyperlink-like fashion. You can also link images to external URLs as well.

    Better Memory Usage
    Deep Zoom Composer now uses significantly less memory than it did before, so you should now be able to work with more images in your composition.

    First Draft of Updated Collection Exporting
    We have now added the ability for you to import images, tag them directly from your image list in the Compose view, pick from a set of pre-defined templates, and export. All of this was done without you having to first place your image on the design surface.

    This is an area we are going to significantly improve in our upcoming releases, so stay tuned for some further updates on what we have planned.

    Reporting
    If you are an advertiser, knowing which images get the most attention is pretty valuable. We have put in place some early functionality that allows you to do this.

    ...and More!
    There are numerous little improvements we have made, and we’ll try to mention them as we go along in future Deep Zoom Composer related posting.

    Where Next?
    A lot of the features we have introduced are a bit rough on the edges, and we are going to be investing heavily the UI/styling/usability of them for our upcoming releases. Please feel free to comment below on things you like or don’t like, and that will help us prioritize things for future releases.

    Deep Zoom Composer is a collaborative effort of various groups at Microsoft, and for this release, we would like to give a HUGE thanks to the team at Microsoft Innovation Labs in Israel who contributed to making all of the above features possible for this release.

    Enjoy!
    Janete & Kirupa

  • Expression Blend and Design

    .NET Framework 3.5 Service Pack 1 Beta and Expression Blend

    • 27 Comments

    Recently, a beta of .NET Framework 3.5 Service Pack 1 was released. There is currently an incompatibility with Expression Blend/SP1, Expression Blend 2, and Expression Blend 2.5 March 2008 (whose version number is 2.1.1111.0) where Blend will not work if you have .NET Framework 3.5 SP1 Beta installed.

    We currently have a version of Expression Blend 2.5 March 2008 Preview (referred to as Blend 2.5 Preview from now on) that fixes this incompatibility, but you will only be able to create and edit WPF and Silverlight 1 projects. While Blend 2.5 Preview will also allow you to create and edit Silverlight 2 projects, they are not supported by Visual Studio at this time.  If you are doing any Silverlight 2 development, please do not install .NET Framework 3.5 SP1 Beta until a future Silverlight Tools update is made available.

    Download Updated Blend 2.5 Preview
    If you downloaded and installed a version of Blend 2.5 Preview prior to May 9th, please uninstall your existing version of Blend 2.5 Preview and install the updated version of from the following link:


    blendicon Download Refresh of Expression Blend 2.5 March 2008 Preview

    Once you have the latest version of Blend 2.5 Preview installed, you can verify that you are running the latest version if your build number is 2.1.1113.0 by going to Help | About:

    clip_image002

    If you are running an earlier version of Expression Blend such as V1 or V2, please do not install the .NET Framework 3.5 SP1 Beta. Instead, please wait for the final release of .NET Framework 3.5 SP1 that will be compatible with all versions of Expression Blend.

    Sending us Feedback
    If you have any questions or encounter other issues while running Expression Blend 2.5 on .NET Framework 3.5 SP1 Beta, please let us know by posting on our forums.

    Thanks,
    Pete

    Update (13 May 2008)
    There’s been some confusion around the date of this blog post- the date that it’s picking up is when we originally discovered that we’d have to do an update to Blend coinciding with the 3.5 SP1 Beta and prepared the original draft of the blog post that we’d use to communicate the issue.

    The publish date was completely accidental- just a byproduct of trying to coordinate releases. Sorry about the confusion, we really weren’t trying to be sneaky at all!

  • Expression Blend and Design

    Deep Zoom Composer Released!

    • 26 Comments

    Hi everyone,
    To coincide with the official launch of Expression Studio 3, we have released the first final version of Deep Zoom Composer as well. You can download it from the below location:


    dzcicon Download Deep Zoom Composer

    As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.

    What’s New
    This release pulls together a lot of the ideas that we had been previewing to you in bits and pieces for the past releases – some for over a year! The following sections describe a few of them in some detail.

    Easily Create Interactive Deep Zoom Experiences
    The Deep Zoom technology in Silverlight can be used to do a lot more than just allowing you to zoom in on high resolution images. Deep Zoom Composer makes it possible for you to create, without writing a single line of code, interactive content involving slideshows, inline navigation, web links, tooltips, and more.

    slideshows

    In our latest release, we really tied a lot of the loose ends together to create something that makes it really easy for you import your images and quickly add some of the functionality described earlier. You can learn more about some of these features by reading Janete’s blog posts on these features: Slideshow Support, Creating Menus, and Adding Links.

    Analytics Tracking
    This release of Deep Zoom Composer enhances the support for analytics tracking we exposed in our earlier release. Specify tracking URLs that will silently get called when you zoom in on an image or region. Don’t worry, we made all of this fairly customizable:

    impressionProfie

    Expect to see us blog more about this feature really soon.

    Improved DeepZoomPix Player
    The enhanced player Deep Zoom Composer uses has been ported over to the online DeepZoomPix service. You can now upload your Deep Zoom creations and view/share them with others while maintaining any interactivity you may have added to your images.

    Below is a simple example of a Windows 7 wallpaper slideshow uploaded to DeepZoomPix directly from Deep Zoom Composer. Click on the image to see the example live on the DeepZoomPix site:

    dzc_images 

    Go Further (Easily) with your Exported Content
    With this release, we made it extremely easy for you to go from having a Deep Zoom composition to something you can edit in Expression Blend or Visual Studio. Based on a lot of your feedback, we expanded our default list of templates to include more templates that contain source files:

    export_templates

    The templates with source files range from ones that do everything for you such as our Behaviors and Classic templates, but one of our templates is nothing more than an empty project containing just a simple Silverlight Application + WebSite containing just your exported images.

    To learn a bit more about our new exporting features, check out Kirupa’s two blog posts on this topic: Extensible Templates in Deep Zoom Composer and Improved Collection Support in Deep Zoom Composer

    Revamped UI
    One of the first things you may notice by looking at Deep Zoom Composer is the more refined look:

    newUI

    We took quite a number of design cues from the work our excellent designer on Expression Blend, Billy Chow did. We hope these subtle UI changes make it easier (and possibly more fun!) for you to work with your content.

    Online Documentation
    To make it easier for us to provide you with direct access to more frequently updated content, we have decided to point users to our online documentation which can be found here. The documentation on our new features has not been published yet, but it will soon. In the interim, you have the links to blog posts we have written posted above.

    Support for Smooth Streaming
    Smooth Streaming is an extension available to IIS web servers where you can easily stream content using adaptive streaming. Deep Zoom Composer now allows you to export your images into a form that is optimized for use on servers enabled with the smooth streaming technology:

    smoothStreamingSupport 


    We will continue to blog more about some of these new features, so keep watching this blog for original content or links to content on either of our blogs.

    A Big Thanks to You All
    It wouldn’t be fair to conclude this post without saying how grateful we are to all of you who have provided us with feedback and requests on things you would like to see. You all rock.

    Of course, Deep Zoom Composer also wouldn’t be possible without the talented work of some brilliant colleagues spread out across Microsoft’s Israel Innovation Labs, Seadragon, and DeepZoomPix teams:

    aboutDialog

    See you all in our blog comments or on our forums.

    Cheers!
    Kirupa & Janete

  • Expression Blend and Design

    What Topics Would You Like to See Covered Here?

    • 24 Comments

    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

    Cheers!
    Kirupa

  • Expression Blend and Design

    Deep Zoom Composer Updated: Seadragon Ajax Support, New API, and more!

    • 24 Comments

    Today, we released another update to Deep Zoom Composer, and you can download it from the following location:


    dzcicon Download Deep Zoom Composer

    NOTE:
    Be sure to uninstall any earlier versions of Deep Zoom Composer before attempting to install our new version.

    Most of the work in this release has been under the hood to fix bugs and usability issues, but we did add a few features that you may find cool to use!

    Seadragon Ajax Support
    One of the biggest changes we made was to revamp our Export UI and provide you with the option of exporting your composition as a Seadragon Ajax project:

     image

    If you haven’t heard about Seadragon Ajax before, it is a JavaScript-based implementation of the Deep Zoom functionality found in Silverlight. You can read more about Seadragon Ajax and the difference between this and Deep Zoom at Lutz Gerhard’s blog.

    New and Improved API
    Something that we’ve mentioned in the past is that we want to make it easier for all of you to integrate Deep Zoom tiling functionality into your own applications. In the past, you only had access to the command-line tools SparseImageTool.exe and ImageTool.exe.

    In this release, we are moving away from the command-line tools and moving to a .NET/managed DLL that you can more easily integrate into your applications. I will be sharing more details on this DLL in a future posting, but all of Deep Zoom Composer now uses this DLL for its internal treatment of tiled images. One nice benefit of this is that you get better reliability and performance when importing and exporting images!

    Updated Project Templates
    In the past, we really haven’t given our project templates much attention. We are changing that with this release with more useable templates for both Silverlight and Seadragon Ajax:

    slTemplate

    The revised templates contain bug fixes and usability issues that many of you have given us feedback on.

    Numerous Bug Fixes
    We deviated a bit from what we said last time that future releases will focus more on under-the-hood changes. The changes you see today are things that many of you had asked us about, so even though we are continuing to invest in stability and performance, do feel free to send us more suggestions. Some oft-asked features may find their way into a future version.

    Thanks To..
    As always, each Deep Zoom Composer release is a collaborative effort from individual from across Microsoft. A large part of this release relied on the efforts of Dan Cory, Melinda Minch, Lutz Gerhard, Avi Dunn , and other colleagues in Live Labs!

    Cheers!
    Celso Gomes, Christian Schormann, Janete Perez, Kirupa Chinnathambi

  • Expression Blend and Design

    Expression Blend 2 SP1 Preview Released

    • 23 Comments

    Today, we have released a preview of Expression Blend 2 Service Pack 1 that allows you to create content for the release candidate of Silverlight 2. You can download the Service Pack from the following location:


    blendicon Download Expression Blend 2 SP1 Preview

    This Service Pack provides you with all of the functionality you had with our earlier Expression Blend 2.5 June 2008 Preview. Besides allowing you to create new projects for WPF, Silverlight 1, and Silverlight 2 RC, we are also exposing new platform functionality like Font Embedding / Subsetting for Silverlight 2 projects. More on this new functionality in future blog posts.

    One thing to note, which is different from how we handled releases in the past, is that Expression Blend 2 SP1 Preview will install on top of Expression Blend 2. This will not be a side-by-side installation. This service pack is also an evolution of Expression Blend 2.5, so there will be no future Expression Blend 2.5 releases.

    You can find more information on the FAQ page we have created for Expression Blend 2 / SP1.

    Cheers!
    Kirupa & the Expression Blend Team

  • Expression Blend and Design

    Download Expression Blend 3 Preview!

    • 22 Comments

    Hi everyone,
    To follow up on our announcements made today at MIX 09, we are excited to provide a preview of Expression Blend 3:


    blendicon_3 Download Expression Blend 3 Preview

    Expression Blend 3 Preview includes a lot of cool new features, and if you are attending MIX, the sessions we listed in our earlier post will give you a chance to see some of the new features in action. Once the sessions become available online, we will post them on this blog as well. Besides just the sessions, in the upcoming days, weeks, and months, this blog will also provide a detailed look at the various features Expression Blend 3 Preview contains from the various team members who were involved with their design and development.

    Send us your Feedback
    We would also love to hear from you on what you like about our preview and what you would like to see improved. Feel free to comment on the individual blog posts or post on the Expression Blend Forum!

    Cheers!
    Expression Blend Team

    Note: The SketchFlow feature demoed at the keynote is not available in this preview, but we do hope to get that feature into your hands in an upcoming release.

  • Expression Blend and Design

    How to add mockup controls to your Expression Blend library

    • 21 Comments

    In Expression Blend 4, one of the new samples we added is called MockupDemonstration. If you haven’t had a chance to use it yet, you can open MockupDemonstration from the Welcome screen, which is available when you first start Expression Blend or when you click Help and then click Welcome Screen. In the Welcome screen, click Samples, and then click MockupDemonstration:

    clip_image001[4]

    As you can tell quickly from exploring this sample, this sample contains a handful of controls designed to help you create prototypes easily. The catch is that these controls only exist within the confines of this particular sample. Since some of you have requested that it would be useful to have these controls available outside of the sample, this blog post will explain how to make these mockup controls available in other projects.

    To enable mockup controls for any SketchFlow project, copy the mockup controls run-time and design-time assemblies from the MockupDemonstration sample to the pre-configured Libraries folder by following the steps below:

    1. Copy both Microsoft.Expression.Prototyping.MockupsSL.dll and Design folder from:

    Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > Silverlight > Debug
     
    (for WPF projects, follow this step but copy files from > Libraries > .NETFramework > Debug)

    2. Add copied files to the following destination:

    Computer > OS (C:) > Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > Silverlight > 4.0 >
     
    (for WPF paste the copied files from the NETFramework folder in the previous step to … > Libraries >  .NETFramework > 4.0)

    clip_image007[4]

    3. Restart Blend. You can now start using mockup controls by clicking the Mockups category in the Assets panel (the appropriate assembly reference is automatically added to your project).

    If you have any questions or comments, please feel free to post below or on our forums.

    Thanks,

    Dante, Rick, Billy

  • Expression Blend and Design

    Blend 2 SP1 + WPF Toolkit = Visual State Manager for WPF

    • 20 Comments

    The Blend 2 Service Pack 1 contains a secret ingredient that can be activated by installing the WPF Toolkit and then setting a Registry value. In a nutshell, this ingredient is Visual State Manager support for Windows Presentation Foundation projects. As you know, Visual State Manager is built into Silverlight 2 but the WPF Toolkit gives you an early peek into the future of VSM-for-WPF.

    The WPF Toolkit is a collection of WPF features and components that are being made available outside of the normal .NET Framework ship cycle. The WPF Toolkit not only allows users to get new functionality more quickly, but allows an efficient means for giving feedback to the product team.

    Once you have the Blend 2 Service Pack 1 installed, here are the steps you need to follow to get to the VSM-for-WPF goodness:

    1. Install the WPF Toolkit from http://www.codeplex.com/wpf/Release/ProjectReleases.aspx?ReleaseId=15598
       
    2. Create the following registry value and make it non-zero. The value should be of type DWORD. Or run the appropriate .REG file attached to this post (or by clicking here).
       
      • 32 bit OS : HKLM/Software/Microsoft/Expression/Blend/EnableVSM
         
      • 64 bit OS : HKLM/Software/Wow6432Node/Microsoft/Expression/Blend/EnableVSM
         
    3. If Blend was running during the previous step then restart it.
       
    4. Create a new WPF project.
       
    5. Add %Program Files%\WPF\WPF Toolkit\...\WPFToolkit.dll to the References folder (Right-click the References node in Project, then click Add Reference…).
       
    6. Close and reopen Window1.xaml. The States pane will now appear for the project.

    Here are some VSM resources to get you going: http://blogs.msdn.com/expression/archive/2008/07/11/more-articles-on-visual-state-manager.aspx

    Even though the built-in WPF controls (such as Button and CheckBox) weren’t designed with VSM in mind, the toolkit works some event interception magic that means your Visual States are applied provided they’re given the standard names such as Normal, MouseOver, Pressed, Disabled, Unchecked, Checked and so on. You can also use VSM-for-WPF to add interactivity to new custom controls you author yourself, although be aware that Blend will not read any default VisualState information out of the default template. And of course you can also add VSM interactivity to UserControls.

    We hope you have fun!

    -Steve

  • Expression Blend and Design

    Download the New Deep Zoom Composer Preview!

    • 20 Comments

    A few hours ago, we released another update to Deep Zoom Composer. Click on the link below to download it:


    dzcicon Download Deep Zoom Composer

    Some of the major new features outside of the usual bug, performance, and stability changes include Panoramic Stitching and PhotoZoom Upload.

    NOTE:
    Our PhotoZoom Upload functionality inside Deep Zoom Composer is causing some uploads to not fully finish before timing out, and we hope to have a fix for this really soon.

    PhotoZoom Upload *
    To help make uploading and sharing your creations with others easy, Deep Zoom Composer nicely integrates with the Live Labs PhotoZoom service: http://photozoom.mslivelabs.com. When you choose to Export, the default selection will be PhotoZoom:

    clip_image002

    You can use your Live ID to sign-in. Once you have signed in, you can specify an album name, choose a cover image, and just upload:

    clip_image004

    Once you have uploaded your contents, you will see a dialog that allows you to browse your newly created album in your browser. For example, the following link shows you a sample project I uploaded directly to PhotoZoom: http://photozoom.mslivelabs.com/Album.aspx?alias=kirupa&album=15

    Panoramic Stitching
    Deep Zoom Composer now allows you to stitch similar images inside the application using some cool technology from Microsoft Research's Interactive Visual Group. Take a series of photos that share similar characteristics, right click on them, and select “Create panoramic photo”:

    clip_image006

    After a short while (the time depends on the number of images, how large the images are, and how much calculation is needed), you will see a dialog allowing you to specify the part of the image that you would like to save. After you have specified region of image to save, your stitched image will appear on your design surface just like any other image you can interact with:

    clip_image008


    We hope you like our latest release. This is still a beta/preview release, so if you run into any problems, please feel free to post on our forums.

    Cheers!
    The DZC Team (Celso Gomes, Christian Schormann, Janete Perez, and Kirupa Chinnathambi)

    * Edit:
    If you are receiving a 401 error when attempting to upload to PhotoZoom, please try again in a short while. There may be some temporary glitches as we deal with some issues related to this.

  • Expression Blend and Design

    Deep Zoom Composer Updated (Again!)

    • 20 Comments

    To address many of the issues you all had with the PhotoZoom functionality, we have released an updated preview version of Deep Zoom Composer. You can download the updated version from the following link:


    dzcicon Download Deep Zoom Composer

    Be sure to uninstall your current version of Deep Zoom Composer before attempting to install the latest version. The issues we fixed revolve around making the log-in screen more clear and ensuring uploads do not time out.

    More specifically, you need to create an account on PhotoZoom prior to being able to upload via Deep Zoom Composer. The PhotoZoom Export tab now makes that step explicitly clear:

    createPZaccount 

    The second set of changes revolved around the log-in and upload difficulties many of you pointed out. We significantly increased the timeout for uploads so that most large uploads on slow connections will still succeed:

    uploadingFile 

    Do you have the latest build?
    Because we released the updated version so quickly after we released the last one, do check to make sure you are running the latest version. You will know if you have the latest build by going to Help | About and seeing the build date, 3 August 2008:

    dzc_about

    Overall, this update is designed to make using PhotoZoom via Deep Zoom Composer usable. We think this is a great feature that makes Deep Zoom Composer more approachable by non-technical users, so please let us know if you continue having any difficulties, and we will be glad to take a look at.

    Cheers!
    Janete, Kirupa

  • Expression Blend and Design

    Deep Zoom Composer Updated for Silverlight 2 (And More!)

    • 18 Comments

    Yesterday was a busy day, for we released an updated version of Deep Zoom Composer as well! You can download the updated version from the following link:


    dzcicon Download Deep Zoom Composer

    This version of Deep Zoom Composer presents several under-the-hood changes to improve reliability. We are getting close to wrapping up work on version 1 of this powertoy, so we are focusing on improving our existing features in lieu of adding anything new. Expect to see some details on some of those under the hood changes in the upcoming months.

    With that said, that isn’t to say you won’t find anything new in this release. The biggest change is that our project templates now work with the released version of Silverlight 2. Previewing in the browser should just work, and our Deep Zoom upload/sharing service, PhotoZoom, has been updated as well.

    The next feature is something pretty minor but one we received a ton of requests from all of you on. That feature is…the ability for you to launch Deep Zoom Composer by double-clicking on the DZPRJ file itself:

    image

    As always, if you have any questions or suggestions on what you would like to see in future versions of Deep Zoom Composer, please let us know by commenting either here or on our forums.

    Cheers!
    Celso, Christian, Janete, Kirupa

  • Expression Blend and Design

    Creating your Own Vista "Chrome" Style Button

    • 18 Comments

    In this blog post I’d like to show a way to create your own “chrome” like button template that can be easily modified and used over and over again using Expression Design.  This post is targeted for the absolute beginner, so if you've never tried using Expression Design before, this post should help you become familiar with it. What you should get by the end of this exercise is a button that looks like this:

     

    Slice 6 

    So let’s begin:

    Lets start by creating a rectangle on the art board, setting its width to 150 pixels and its height to 50 pixels:

    Slice 1 

    While you could use the adorners, you can more precisely use the Action Bar to set the width and height instead:

    action

    If you look at the final button shown above, you will notice that it has rounded corners. That means we need to make our rectangle have rounded corners also. Select your rectangle and modify its corner radius on the Properties Panel to 10px:

    radius

    Once you have made your changes, your rectangle will now have curved corners:

    Slice 2

    Now we’ll add a gradient to our button.  For the sake of simplifying things, we will use the default gradient swatch and make this button a silver (grayscale) button:

    gradient

    When you apply your gradient, your button will now look as follows:

    Slice 8

    As you can see, we have quite a bit of work to do before we have it looking nice! First, we’ll remove the stroke from the button by clicking on the stroke tab and setting it to none:

    nostroke

    Setting the Stroke to none has the effect of removing the black outlines you see in your curved rectangle:

    Slice 3

    With the stroke gone, let's focus our attention on the fill. Notice that the gradient on the button pans from Left to Right.  We want to change this so it pans from Top to Bottom.  Using the gradient rotation angle tool, change the rotation angle to 270 degrees or -90 degrees as shown below:

    rotate

    Once you change the rotation angle for your gradient, your button will now look like what is shown in the following image:

    Slice 4

    Now that we have our smooth gradient, we’re ready to move on to the next step.  The shine! Or what some might call the light layer, or what I like to call it, the Bling!

    Copy your button object to the clipboard and use the PASTE IN FRONT feature from the EDIT MENU to place another copy on top. While on top we’ll make some adjustments to give it that look that we want.

    Select your new button object and do the following:

    1. Return to the ACTION BAR and change your new objects width and height to (146x25).  Your second button object becomes centered on top of the original. 
       
    2. Also change the corner radius of your new shape to eight (8) pixels to give your new object smaller corner roundness.
       
    3. Nudge your object upwards to the top of your underlying object until it’s about 4 pixels away from the top of your underlying object.  You might want to zoom in a bit to do this more precisely.
       
    4. Change the gradient rotation angle to 90 degrees.  It should have been set to -90 degrees from copying and pasting from your underlying object.
       
    5. Return to the properties panel.  Replace the black gradient stop with the color white so that you have white on both ends of the gradient.

    At this point, your button will look a lot different:

    Slice 5

    While still on the same gradient stop, change the Stop Alpha to 0%:

    stop alpha

    Boo-yah!  Your button is now complete and should look like this:

    Slice 6

    Here is the trick.  Click on the bottom object and try replacing the black gradient stop with any color you’d like and watch your button color Scheme change as you browse through the spectrum.  You can even go further and experiment with more than two gradient stops.

    Hint:  You can make your button darker by increasing the midpoint of the gradient.

    Here is the expression design file with some of the assets used in this tutorial: Download Chrome Style Button Design File

    Have fun!
    Sam Paye

Page 1 of 9 (217 items) 12345»