Speaking in Chicago about Expression Blend for Developers – May 6

In conjunction with my trip to Chicago for the Expression Blend Workshop .toolbox event, I have the honor of presenting at the Chicago Silverlight User Group meeting.

On May 6th at 6:30pm, we will meet at the Illinois Technology Association and discuss the virtues and value of Expression Blend for Developers.

Surprise! Its not just a tool for designers, rather its a tool for design tasks, which developers can often find themselves doing.

We’ll talk about when it makes sense to switch between Blend and Visual Studio, time-saving and headache-preventing features in Blend and  how to keep your solution “Blendable” for more Blend-focused people on your team.

Register your spot today for the Chicago Silverlight User Group meeting.

…

What’s the yellow bus for? It’s a mildly clever shot from my last visit to Chicago in 2007.  I don’t remember if anyone got it back then, but I titled the shot “Chicago’s version of Top Banana”.  Which was kind of funny because back then the “Top Banana” video editor was all the rage as far as Silverlight demos went.

It was back in the day of Silverlight 1 and “Top Banana” was amazing.  We’ve come a long way since then.

Upgrade to Expression Studio v4 for free – now in writing!

Remember during the Day 1 Keynote at MIX10 when Scott Guthrie said (around 14 minutes and 14 seconds into the video):

 

..we’re going to make a free upgrade to Expression Blend 4…

 

Well, I’m happy to say, that deal is now in writing and Expression Studio 3 just happens to be available for 40% off. Purchasers and existing owners will get Expression Studio 4 when available.

Check out the Expression 3 to Expression 4 upgrade page for the fine print.

Yes, this is a bit of a commercial post, but I wanted to make sure everyone was reminded about the deal. And to confirm that it’s not just Expression Blend but Expression Studio as a whole.

Enjoy the free upgrade!

Avatar Mosaic -Experimenting with the Artefact Animator

After finding out about the Artefact Animator,  written by Jesse Graupmann, I knew I wanted to try it out.

The Artefact Animator library is based on the same concept as Tweener for Flash, which provides an easy way to do procedural animations in WPF and Silverlight.

I found some time last night to put together this little Xbox Live avatar mosaic and was very pleased with the results.

Test the Avatar Mosaic Prototype

Download the Source

If you take a look at the prototype, you can see there’s a few things you can do:

• Drag the grid splitter, resize the window or change the padding slider to cause the tiles to reposition.
• Type a new Xbox Live Gamertag in the textbox and TAB out to cause the tiles to fade out and fade back in with a new image
• Roll over a tile and it will scale down until you roll off of it

You can download the source to see the full code but I’ll just highlight the areas where the Artefact Animator is used below.

Download the Library

The first thing you need to do is download a copy of the library from the codeplex site. Jesse has also posted documentation which will help you understand how to use the library. Once you have the library downloaded make sure to add a reference to your project.

Position the Avatar Tiles

When the application loads, AvatarTile controls are dynamically added to the main Canvas called LayoutRoot. Once the SizeChanged event of the Canvas is fired the updateTileLayout method is called.  Calling the method at this point ensures the ActualWidth property of the Canvas is available and the tile layout will be repositioned if the browser window is resized or the grid splitter is moved.

Then we loop through the children of the Canvas and based on the index of the tile an easing function is added using the code below:

ArtefactAnimator.AddEase(element, AnimationTypes.X, curX, time, ease, delay);
ArtefactAnimator.AddEase(element, AnimationTypes.Y, curY, time, ease, delay);

The element parameter defines which AvatarTile to animate.

AnimationTypes is an enum tied to different properties you can choose to animate.

The curX and curY parameters define the new value of the animated property.

The time parameter defines how long the animation should take to get to the new value.

The delay parameter defines how long before the animation should begin.

The ease parameter is a PercentHandler class instance used to define the type of easing function.  The full list of Ease Functions is posted, along with how to create custom ease functions.

When determining the curX and curY values in the updateTileLayout method, padding is also taken into consideration.  The slider sets the padding based on its position.  After the slider is moved, the updateTileLayout method is called to reflect the change in padding.

Fade Out, New Image, Fade In

After a new value is entered into the textbox and the LostFocus event is fired, the AvatarTiles are faded out to reset the brush. This was a test of the available Events of the EaseObject.

//fade out each tile incrementally
for (int i = 0; i < tileCount; i++)
{
   easeObject = ArtefactAnimator.AddEase(element, AnimationTypes.AutoAlpha, 0,
                                            time, ease, delay); 
   delay += .05;
}

//capture completed event of last "fade out" easing
easeObject.Complete += new EaseObjectHandler(easeObject_Complete);

After looping through the children and animating the Opacity of each element, a reference to the return value of the AddEase method is stored. This way we can add an event handler to the Completed event of the EaseObject instance. The event handler will then reset the image brush and animate the tiles back into view using the code below:

//set brush to new image based on textbox
ImageBrush ib = Application.Current.Resources["xboxTileBrush"] as ImageBrush;
ib.ImageSource = new BitmapImage(new Uri(string.Format("http://avatar.xboxlive.com/avatar/{0}/avatarpic-l.png", gamerTagTextBox.Text)));

//fade in each tile incrementally
for (int i = 0; i < tileCount; i++)
{
    ArtefactAnimator.AddEase(element, AnimationTypes.AutoAlpha, 1,
                                time, ease, delay);
    delay += .05;
}

Mouse over action for the Tiles

And finally, taking advantage of some of the Shortcut functions built in, we’ll scale the AvatarTile based on the mouse over events.  In the AvatarTile class, the first step is to use the handy NormalizeTransformGroup method which ensures the needed Transform objects are in place.

Once the library is upgraded to Silverlight 4, this step could become obsolete by leveraging the new CompositeTransform class.

In the Loaded event:

LayoutRoot.NormalizeTransformGroup();
LayoutRoot.RenderTransformOrigin = new Point(.5, .5);

Then on Mouse Enter:

LayoutRoot.ScaleTo(.5, .5, .8, AnimationTransitions.ElasticEaseOut, 0);

And to remove the effect on Mouse Leave:

LayoutRoot.ScaleTo(1, 1, .8, AnimationTransitions.ElasticEaseIn, 0);

And that’s it! Everything is hooked up and ready to run.

Final Thoughts

I really like the direction Jesse is headed with the library by making procedural animations easier to write in Silverlight and WPF.  He’s mentioned the library is in its early stages and would love to see more people use it and provide feedback.

One of the things I found is that after changing the gamertag and fading out the tiles, the repositioning animations got very slow.  I’m not sure if that’s colliding easing objects or what, but there’s some performance work that could be done there.

The other issue is that due to the nature of procedural animations there is no design-time experience.  The best thing about Storyboards is that you can create them visually in Blend and preview them without having to run the application.  It’d be interesting to see if there was some way to tackle this problem. Not sure what to suggest yet.

Test the Avatar Mosaic Prototype

Download the Source

What do you think? Give the Artefact Animator a try and send your feedback to Jesse.

.toolbox events in May – Free Blend training in Chicago, New York, Boston and Austin

.toolbox is going on the road!

The .toolbox site is hosting 4 events in May. These interactive workshops are focused on improving your skills with Expression Blend and Silverlight. Topics covered include:

• the Blend workspace
• prototyping with SketchFlow
• drawing and animation
• importing artwork from other tools
• styling and skinning controls
• transitions and effects
• adding interactivity with behaviors
• and whatever else we can fit in based on time and interest of attendees

Who should attend?

• designers who want to build on their interaction skills
• developers who want to learn Silverlight
• developers who want to improve their Silverlight UI skills

When and Where will the events be held?

• May   7 – Wyndham Hotel, Chicago – register
• May 11 – Crowne Plaza Times Square, New York – register
• May 14 – NERD Center, Boston – register
• May 26 – Intercontinental Stephen F. Austin, Austin – register

Are these the same events as the Silverlight Design Days?

Yes. If you have already registered for a Silverlight Design Day you do not need to register again.  The good news is that along with the re-branding of the events we have also added seating at each event. When we started these workshops in February, the .toolbox site was not live yet, but now we’re ready to celebrate and shout out its name. 

Will these events be as entertaining as the Conan O’Brien show you just saw?

I can’t play guitar, but I hope to make the events engaging.  I will be there presenting along with some other local stars to be confirmed shortly.

I can’t make it to an event, but I still want to learn, where do I go?

The .toolbox site, of course!

Other sites with Expression Blend and Silverlight tutorials include:

• Expression Blend team blog
• Expression Forums
• Eyes of Blend tutorials
• Flash to Silverlight Guide
• Dynamic Prototyping
• Silverlight Switch
• Kirupa.com
• Videos from Victor Gaudioso
• Nibbles Tutorials
• Lynda.com

Hope to see you there! If you plan to attend, feel free to let me know here or @adkinn

Answering “What is SketchFlow?” in 90 seconds

This video of Jon Harris deftly explaining the power of Expression Blend and SketchFlow in 90 seconds was already shared by Christian Schormann, but I wanted to post it here too as an easy way to share and view the video.

Topics covered include: Navigation and Flow Map, Sketchy Styles, Client Player, Interactivity, Text and Ink Feedback, Viewing Feedback in context, Exporting to Word for Documentation

A few cool new features added in Expression Blend 4 RC

In accordance with the release of Silverlight 4 and Visual Studio 2010, Expression Blend 4 RC was released yesterday and is available for download.

With the release of Blend 4 Beta, just a month ago this isn’t a major release, but there a few cool new features I thought would be useful to point out.

Make Layout Path option

The new menu option allows for more convenient and intuitive PathListBox creation.

1. Draw a shape or Path
2. Right-click the shape or Path and select Path –> Make Layout Path option
3. Inspect the Object panel and you will find Blend has generated a new PathListBox and set the selected shape or Path as the Layout Path

Simpler PathListBoxItem binding

One of the first handy tricks you see with the PathListBox is that you can change properties of an item based on its location on a path. This is done by binding properties like Opacity and Scale of the item container to its own GlobalOffset property. In the beta this was only possible by entering the XAML by hand, but the team has added more support for Template Binding which exposes this functionality on a few clicks.

The easiest way to show this feature is to use design-time data so we’ll take advantage of Blend’s ability to create Sample data quickly for us. We’ll start by repeating the steps from above first.

1. Draw a shape or Path
2. Right-click the shape or Path and select Path –> Make Layout Path option
3. Inspect the Object panel and you will find Blend has generated a new PathListBox and set the selected shape or Path as the Layout Path
4. Now, in the Data panel, click “New Sample Data” and hit OK.
5. Select the “Collection” node in the data panel, click and drag it over to the PathListBox in the Objects panel. When you see a tooltip that reads “Data bind [PathListBox].ItemsSource to Collection” release the mouse.

   You should end up with a PathListBox like the image to the right. At this point you may want to arrange the Path to be behind the PathListBox, so the items are shown in front of the Path fill.

6. Right-click the PathListBox and from the context menu select: Edit Additional Templates    -> Edit Generated Item Container (ItemContainerStyle) –> Edit a Copy…, hit OK
7. Now in template editing mode, select [Grid] in the Objects panel and open the Properties panel.
8. Find the Opacity property and click the Advanced options square (the yellow highlighted square in the picture to the right).
9. From the Advanced options menu select     Template Binding –> GlobalOffset.
   If everything is setup properly, you should see the items closer to the start of the Layout Path have less Opacity, matching the value of their offset.

Exit template Editing mode and select the PathListBox. Try changing the Padding, Start and Span properties to get a feel for how the GlobalOffset property works.

PropertyChangedTrigger added

A new trigger has been added to the Expression Blend SDK called PropertyChangedTrigger.  As the name implies, an action can now be triggered when a property changes.  Simple in concept but a useful addition. The following steps provide a simple demonstration.

1. Draw a Rectangle
2. Add a Button
3. Create a Storyboard animating the Rectangle to a new noticeable position.
4. Add a ChangePropertyAction to the Button, keeping the Click event as the default trigger.
5. For the TargetObject of the ChangePropertyAction use the new element picker to select the Rectangle and in the dialog, select Effect.
6. Set the Value of the ChangePropertyAction to a New BlurEffect.
7. Now add a ControlStoryboardAction to the Rectangle.
8. For the Trigger, click New and from the dialog select a PropertyChangedTrigger.
9. Set the Binding property of the Trigger to the Rectangle using the element picker and select the Effect property.
10.   Set the Storyboard property of the ControlStoryboardAction to the name of the Storyboard you created (default is “Storyboard1”).

Now run the project and click the button.  On click of the button the ChangePropertyAction is triggered to add the BlurEffect to the Rectangle. On change of the Effect property, the ControlStoryboardAction is triggered and your storyboard should play animating the Rectangle.

This is a super simple example, but ideas should already be popping into your head where this new Trigger could be useful.

Documentation and Search links added for Behaviors

The last feature to point out is simple but elegant. When a behavior is selected, links are displayed at the bottom of the Properties panel that lead directly to documentation or an online search that opens in your browser. Easy access to learn how to use Behaviors form the Expression Blend team and the community.

Can’t wait for the final release!

Download Expression Blend 4 RC

More Expression Blend Tutorials

18,230 miles, 8 events, 1 vacation and 25 pictures later…

Starting with MIX10, I’ve been on a bit of an odyssey the last month. My itinerary looked something like this:

• MIX10 – Workshops, @Ch9Live shows, my Flash skills session and having a great time with attendees
• go home for the weekend
  
• London trip – presented MIX10 Recap  at Edge UG meeting, Silverlight Design Day London, Silverlight UK User Group, NxtGenUG Coventry
• Dublin trip – presented SketchFlow at IXDA Dublin and MIX10 Recap at MTUG Meeting
• go home for the weekend
  
• Washington DC trip – actual vacation time acting as a chaperone on my son’s 6th grade class trip.

I’ve posted a few of my favorite photos on Flickr of London, Dublin, and Washington DC.

Thanks to all of those who acted as hosts for the events, attended the events and hung out in proper English or Irish pubs (and the occasional Vegas casino bar) afterwards. I had a great time discussing all of the great news about Windows Phone, Blend 4 and IE9 from MIX10.

And now to return this week with Visual Studio 2010 and Silverlight 4 releasing along with the announcement of the KIN, there is a ton of fun to be had and work to be done.

Now, back to work…

FXG Import for Expression Blend previewed at MIX10

This is an excerpt from the day 1 keynote at MIX10, of Jon Harris building a Windows Phone application in Expression Blend. Although the demo is slick, the main thing I wanted to point out here is the preview of the FXG Import, which is shown in the first minute. More then a few people noticed this feature and I wanted to provide an easy way to see it in action.

Import FXG file into Blend > Edit in Illustrator > file auto updates in Blend

Design/Development Workflow++

You won’t find the Import feature included in the current Blend 4 Beta bits yet. The feature is being built out as an extra add-in similiar to the add-in for Windows Phone development. This way the feature can be released and updated outside of the major Blend releases, allowing it to stay in synch with the latest versions of FXG.

Silverlight and Blend events tour this week in England and Ireland

I jokingly told many of my friends at MIX from the other side of the Atlantic that I would be chasing them home.  The truth is, I am heading to England and Ireland this week and will be participating in a few events along with a workshop of my own device.

Most of the events will be a local recap of the amazing MIX10 event with the exception of the IXDA Dublin event and the Silverlight Design Day workshop.  Being a “Silverlight and Expression Blend” guy myself, I hope to skew the MIX recap discussions towards RIA and Windows Phone as much as possible. Here is the agenda for the next two weeks:

Tuesday, March 23rd

     Mini-MIX at the Edge UG
     London, UK 
     18:30 – 20:30

 Wednesday, March 24th

     Silverlight Design Day – London
     Chertsey, UK
     8:30 – 17:00

     Silverlight UK User Group
     London, UK
     18:00 – 21:30

 Thu, March 25th

     MixGenUG – Coventry
     Coventry, UK
     19:00 – 21:00

 Mon, Mar 29th

     The Blend Experience – IXDA Dublin
     Dublin, Ireland
     18:15 – 21:00

 Tue, Mar 30th

     Best of MIX at MTUG
     Dublin, Ireland
     19:00 – 21:00

Happy to confirm that I will be heading over there to meet up with friends, I am glad to say the other joke about me riding back in one of their suitcases is not true. I get to ride in tiny seat watching MIX10 videos the whole way, like everyone else.

Install checklist for Silverlight 4 RC, Blend 4 Beta and Windows Phone Developer tools from MIX10

I’m upgrading my machines to the latest bits and I haven’t seen an aggregated list of all the Silverlight, Blend and Windows Phone tools yet, so I thought I’d post mine.  As an extra bonus I’ll add the extra links for training and documentation resources.

This list is for the full setup for Silverlight 4 RC and Windows Phone development.

1. Visual Studio 2010 RC
If you need help downloading and installing this bad boy, here’s a video from Channel 9 explaining the process.

• Download
• More Info
• Training Course

2. Silverlight 4 RC Tools

One setup file that installs the Developer Runtime, Tools for Visual Studio, SDK and WCF RIA Services.

• Download
• More Info
• Training Course
• Technical Overview whitepaper
• MIX10 Overview Session

3. Expression Blend 4 Beta 
One setup file that installs the  Blend SDK for Silverlight 4, Blend SDK for .NET 4

• Download
• More Info
• Training Course
• Technical Overview whitepaper
• MIX10 Overview Session

4. Windows Phone Developer Tools
Installs Visual Studio 2010 Express for Windows Phone CTP, Windows Phone Emulator CTP, Silverlight for Windows Phone CTP, XNA 4.0 Game Studio CTP

• Download
• More Info
• Training Course
• MIX10 Overview Session

5. Expression Blend Add-in Preview for Windows Phone 
Windows Phone development integration add in for Blend.

• Download
• More Info

6. Expression Blend SDK Preview for Windows Phone
Project templates for Windows Phone development in Blend.

• Download
• More Info

7. Silverlight 4 Toolkit (optional)
No new update yet, but the version released in November still works

• Download
• More Info

And with those files installed you are ready for Silverlight 4 RC and Windows Phone development.  Enjoy!