Archive

Archive for the ‘Client Technologies’ Category

Expression Blend 4 for Windows Phone in 90 seconds

April 30, 2010 3 comments

 


A refreshed Windows Phone Developer Tools CTP has been released this week which provides compatibility with Visual Studio 2010.  Matching the new tools, we’ve also released a new version of the Expression Blend Add-In for Windows Phone.

What does the experience of developing Windows Phone apps in Expression Blend look like?

Take a look at this brief video introducing Expression Blend 4 for Windows Phone.

—–

A few notes on installing the tools…

If you have the Blend 4 Beta installed from MIX10:

  • Uninstall the Blend 4 Beta Phone Tools
  • Uninstall the Blend 4 Beta
  • Uninstall Windows Developer Tools CTP from MIX10
  • If you have the Blend 4 RC (4.0.20408.0) installed from Apr 15 Silverlight 4 RTM:

  • Uninstall the Blend 4 RC
  • If installed, uninstall Windows Developer Tools CTP from MIX10

Now with your system cleaned up:

For more information check out the Windows Phone 7 Developer Center.

Advertisements

Don’t Wanna Know Plugin for Seesmic Desktop Platform

April 29, 2010 7 comments

Ever since they announced the Seesmic Desktop Platform, I’ve been wanting to give it a try. The new SDK provides a way to develop client plugins using Silverlight 4 and MEF.

After seeing the request a couple times now and experiencing the same feelings myself, I found the purpose for my first plugin:

– Removing tweets from Foursquare and Gowalla.

I’m a fan of the two services and think the concept overall is pretty cool. But I’m not a fan of the “I’m at Starbucks” check-ins getting in the way of my “I just wrote an MMORPG in Silverlight” tweets.

After seeing my pals @rschu and @ingebretsen feeling the pain, it was time to act.

I give you the Don’t Wanna Know plugin for Seesmic Desktop 2.

—–

Seesmic Desktop 2, the Silverlight 4 Out of Browser client is pretty cool and the developer platform is very promising. Grab a build, SDK and find code samples on the Seesmic DevWiki.

WTF Step by Step guide to installing Silverlight Tools

April 28, 2010 6 comments

With Silverlight 4 shipping and Expression Blend 4 RC made available, now was a great time to update the Flash to Silverlight section on the Project Rosetta site.

My main goal was to update the Getting Started series to take advantage of new version 4 features.  I also took advantage of this update to greatly improve the Installation and Setup tutorial.

The content for the site is made for those with an interest in experimenting with Silverlight, who most likely do not have any .NET development experience or in some cases, even Windows.

As a first step, configuring your design and development environment for Silverlight can be a little daunting. Happily the installation process is now much simpler with the advent of the version 4 tools.

Nonetheless, as requested, I’ve put together a simple step by step walkthrough of the install process.

Working towards more Silverlight time and less “WTF?” time.

The new Setup tutorial takes full advantage of the Web Platform Installer (Web PI) which acts as a download and install tool for the needed Tools.  This makes writing the tutorial and installing much easier.

Along with the step by step guide, I’ve also updated the Getting Started series to reflect the new v4 tools and features, specifically CompositionTarget.Rendering (which is like ENTER_FRAME) and CompositeTransform (which makes transforms simpler than before).

Next month, we’ll be updating the Flash to Silverlight site with a new set of tutorials focused on Media (codecs, players, markers, etc) and how it compares to Flash media.

Now for some Taco Bell…

Speaking in Chicago about Expression Blend for Developers – May 6

April 23, 2010 Comments off
Chicago Silverlight Users Group
Chicago's version of Top Banana

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!

April 22, 2010 1 comment

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.

Buy Expression Studio 3 for 40% off

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

April 21, 2010 6 comments

Avatar Mosaic Screenshot

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;
}

Avatar Mosaic Screenshot

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

April 20, 2010 8 comments

.toolbox event

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

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