Flash Skills Applied to Silverlight session at MIX10

It’s official! I will be speaking at MIX10 presenting a session on applying your Flash Skills to Silverlight Design and Development.

The full session description:

If you know how to design and develop Flash applications, you are more than half the way there to creating Silverlight applications. Similar languages, graphic and animation features and skinnable controls, ease the training between the two technologies. Listen and learn how to add a new skill to your skillset and expand your opportunities.

I’m really looking forward to this talk as a continuation of the Flash to Silverlight Guide project I’ve been working on.

If you’ve done both Flash and Silverlight work before, let me know.  I’d like to hear your thoughts on how the platforms compare.

Also, if there’s something specific you’d like to hear about comment here and I’ll try and work that in to the talk.

Perspectives on Flash and Silverlight from Mike Downey on SilverlightTV

Congratulations to John Papa for recently launching a new show on Channel 9 called SilverlightTV.

The show covers the Silverlight platform from a variety of angles including architectural issues, real design and development issues problems solved, community members and the latest happenings with Silverlight.

John’s landed a great interview in Episode 2, Perspectives on Flash and Silverlight with Mike Downey.  A former Flash Evangelist for Adobe, provides his perspective on Silverlight and Flash as RIA technologies. Mike draws comparisons between the Flex and framework and the .NET Framework, Adobe AIR and Silverlight out-of-browser features and the different development tools.

For more comparisons between the two technologies, check out the Flash to Silverlight Guide.

Flash to Silverlight Guide – Graphics, Images and Display List

The second edition of the Flash to Silverlight Guide has been posted!

This edition includes new sections on Graphics and Images and Displaying Objects, as well as a bit of a facelift to the site.

Some of the previous feedback included:

“I wish I would have this when I first started on Silverlight”

– Perfect, we’re hoping to help people just getting started.

“There’s a lot of information on the pages, but its pretty dry.”

– Totally agreed.  So along with other graphics and code samples, I spent some time putting together scenes of the new “movieclip guy” acting out the different properties. Not only does this decrease the dryness and encyclopedia-ish nature of the guide, the icons can also act as quick visual hints.

One of my favorite parts about the artwork is that it comes from a group of assets for a new site that is in the works. Unfortunately I can’t share anything about the site just yet, but I did get the ok to preview the graphics. And the site is going to rock.

Anyways, enough about the graphics, enjoy the Guide.  Next on the list are the Animation, Code techniques and Out of Browser sections.

Image Blitting in Silverlight with WriteableBitmapEx

During a conversation with Jesse Freeman, AKA the Flash Bum, he directed me to one of his tutorials on image composition with Flash. The tutorial, called Create Random Torn Photos with Actionscript 3.0, demonstrates a very cool way to dynamically apply a torn weathered effect to a photo.

The question then came into play – can you do this in Silverlight?

The answer – yes, yes you can.

Let me explain how I was able to accomplish the same effect.

In Silverlight, the WriteableBitmap class is used to manipulate bitmap data. The current class is pretty low-level, providing access to the bits, but not many convenience features. Thankfully a few community members have started an open source library called WriteableBitmapEx. This library extends the functionality of the WritableBitmap class to include methods for drawing, blending and more.

This was a great start, but for this project two blend modes were missing – Mask and Multiply. I spent a little time implementing the new Blend modes and have since checked them back into the project.  (Thanks go to René Schulte for then optimizing and formatting the code)

With the right pieces in place now came the simple process of compositing. The first step was to randomly select one of the skins and load the separate parts of the skin along with the photo:

//randomly select a skin
Random r = new Random();
int skinNum = r.Next(1, 7);
string base_url = string.Concat("/TornPhotoDemo;component/images/skin", skinNum);

//load the different parts of the skin, using a helper method 
WriteableBitmap maskBmp = LoadBitmap(base_url + "/photo_mask.png");
WriteableBitmap textureBmp = LoadBitmap(base_url + "/photo_texture.jpg");
WriteableBitmap edges_maskBmp = LoadBitmap(base_url + "/photo_edges_mask.png");

//load the photo
WriteableBitmap bmp = LoadBitmap(base_url + "/photo.jpg");

Then using the extension method Blit and the new BlendMode, use “photo_mask.png” to mask the photo. Effectively replacing the alpha of each pixel in “photo.jpg” yet keeping the color data.

//mask the photo
bmp.Blit(cRect, maskBmp, cRect, WriteableBitmapExtensions.BlendMode.Mask);

Then using the same Blit method and the other new Blend Mode, multiply the color values of the photo and the “photo_texture.jpg”.  This darkens the colors and adds the crumpled effect.

//apply the multiply effect to the photo with the texture image (3 times)
bmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.Multiply);
bmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.Multiply);
bmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.Multiply);

For more wear and tear, a ripped edges bitmap is created using “photo_texture.jpg” as the base. A different mask image “photo_edges_mask.png” is used to then cut it down to a few edges.

//use the texture as the base for the torn edges
edgesBmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.None);
edgesBmp.Blit(cRect, edges_maskBmp, cRect, WriteableBitmapExtensions.BlendMode.Mask);

Now its time to use the AlphaBlend mode to then blit the edges bitmap and the crumpled photo bitmap together.  The photo mask is then run again to ensure the edges to run over the originally masked size.

//alpha blend the edges onto the mask
bmp.Blit(cRect, edgesBmp, cRect, WriteableBitmapExtensions.BlendMode.AlphaBlend);
//mask the photo again
bmp.Blit(cRect, maskBmp, cRect, WriteableBitmapExtensions.BlendMode.Mask);

And there you have it a randomly torn photo created dynamically in code. One of the things pointed out by Jesse is at the end of tutorial is the file sizes.  Saved off by itself the image above was 478k, individually the plain photo and the skin parts equal 104k. That’s 374k less memory and its dynamically generated. That’s kick-ass.

Thanks to Jesse for the concept and code and thanks to the WritableBitmapEx team for their work.

Download the TornPhotoDemo source

Run the live TornPhotoMaker lab

Flash to Silverlight Guide – MovieClip to UserControl

The first sections of the new Flash to Silverlight Guide are up!

The purpose of this guide is to familiarize developers and designers with Silverlight concepts by relating them to Flash concepts. Comparisons are drawn between each pair of concepts in effort to map knowledge from one platform to another.

This is the first edition of the guide covering the topics Fundamentals and Tools, MovieClip To UserControl and Flex Components to Silverlight Controls. The next edition will include comparisons of different features from both platforms including Graphics, Animation, Coding and Out Of Browser.

The guide works as a standalone reference, as well as the base of knowledge for upcoming tutorials covering specific topics. There is a ton of content to cover, so we’ll be posting different sections as we get them completed.

During the research process, I’ve built up a large list of ideas that I’m excited to write about. This will be my main focus for the foreseeable future.  I will be hitting the road next year with this content and will be posting event details on this blog.

One event I’ll be attending for certain is MIX10 (still hoping to get a “Flash to Silverlight” session). I’ve seen some of the behind the scenes planning for MIX10, and let me say – this is going to be the best MIX ever.  For real, it will be a heck of a 5th year birthday for the event. I hope you can make it.

An early look at the new Project Rosetta tutorial site

One of the projects I’m working on this year is the revitalization of the Project Rosetta site. The goal of the site is to provide tutorials for designers and UI developers demonstrating how to use existing skills with new technologies.

The first version of the site was published last year with a series on Flash to Silverlight. The content has since been outdated and originally limited as it was written against Silverlight 2. Version 3 of Silverlight provides more functionality for tutorials written on design, interactivity and experimentation.

Although the new Flash to Silverlight series is not available yet (planned for late October), I did want to share some of the progress made so far.

You will now find the Project Rosetta site at it’s new home as a Lab on MIX Online.

And, we’ve published an set of tutorials called Through the Eyes of Blend:

This series of tutorials provides an overview of the Silverlight platform through the eyes of Expression Blend.

This allows the reader to learn about the features of Silverlight by simply drawing, resizing, dragging and dropping elements on the design surface of Blend. No code or prior Silverlight knowledge needed.

Try the new tutorials and let me know what you think. The next set of tutorials will be using a similiar visual style. Then once the Flash to Silverlight series has been completed we will be moving on to the experimental image effects space.

If you’d like to be involved in contributing, please send me an email with details on the type of content you’d like to write about.

Speaking on Designer/Developer workflow tools with Ryan Stewart on Oct 21

Since its inception, the Seattle Interact group’s goal has been to talk about designer and developer integration topics without a specific technology bias. The experiment has been interesting, but this October we are putting the idea to a true test. Ryan Stewart, a Platform Evangelist from Adobe and myself, a Silverlight and Expression Evangelist from Microsoft, will be discussing the tools available to improve the D2D Workflow.

Here’s the abstract from the site:

Designer and Developer Workflow
Is it a myth? Marketing lingo? Or could it be real with the help of powerful tools?

Listen in as Ryan Stewart from Adobe and Adam Kinney from Microsoft discuss the workflow concept from their respective point of views. Ryan will demonstrate how Flash Catalyst works within the Flash Platform development cycle. Adam will show how Expression Blend fits into the Silverlight development workflow.

I’m looking forward to the event and expect it to be an interesting session. We’ve both agreed to play nice and not have a “feature show-off” competition, but I wouldn’t be surprised to hear a few jabs here and there. 🙂

Project Rosetta turns into a MIX09 workshop

I’m excited to say that the spirit of the Project “Rosetta Stone” Tutorials, which is “using what you know” has become a MIX09 workshop.

The workshop is entitled “Shio o Totte: Using What You Know” and the description is as follows:

Have you just started working on your first Silverlight project and wondering how it compares to Flash? Are you trying to figure out how to take your assets from Photoshop or Illustrator and turn them into XAML? And what’s really the difference between ActionScript and C#? This workshop is going to cover all of those topics and more. The goal is for you as an experienced web developer or designer to learn how to use your skills and toolset in the world of XAML, Silverlight and WPF.

A MIX Workshop is a half day session given before the conference.  That means I have three and a half hours to fill with content!  I’m not anticipating it being a problem, though, since there are many cool tools and useful things you can do with them to build Silverlight and WPF apps.

Look for new content on the Project Rosetta as a build up towards the Workshop, we may even have a few guest authors show up there again.

I want to give a quick shout out to my other “Advanced Tools and Processes Workshop” Track brothers, Robby Ingebretsen and Jaime Rodriguez, who will be giving the “Hiking Mt. Avalon” session.

Hope to see you at MIX09!

Project Rosetta, From Flash to Silverlight

Project Rosetta (13:33)
Project Rosetta – Essential Edition (2:46)

One of the most requested resources we’re asked for, is tutorials showing how to use Flash skills when creating Silverlight projects.  Friday we launched Project Rosetta, which is a new site dedicated to helping designers and developers take advantage of their existing skills.

In the first article, Rick Barraza has written 9 tutorials that include familiar topics like Inertia, Trigonometry and Image Sequencing.  Overall his goal is to promote having fun with Silverlight.  Be creative, even exercise "creative recklessness" as he puts it.

New articles are in the works for the site and will continue to focus on helping designers and developers learn Silverlight and WPF.  If you have new ideas for articles that you would like to see written, please add your suggestion to the discussion thread.

We’ve already received a fair amount of posts and comments about the project (Gilbert’s take on the designer/developer workflow, Shawn Wildermuth has interesting discussion going on in his comments) but my favorite so far is from Florin:

Excellent stuff! Keep up the good work! Never thought I could do so many things in Silverlight.

To track Project Rosetta you can subscribe to the RSS feed or follow the project on Twitter.