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.
Silverlight Design Day Registration open for NY, Chicago, Austin
The registration links for the Silverlight Design Day events in Chicago, Austin and New York are now available.
- May 7 – Chicago, IL, US
register here - May 11 – New York, NY, US
register here - May 26 – Austin, TX, US
register here
“A Silverlight Design Day is opportunity to learn about Silverlight and Expression Blend from a design and interface developer perspective.”
For more information about the free training events check out the Silverlight Design Day information page.
I hope to see you there!
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.
Converting Hexadecimals to Colors in code for Silverlight
Coming from other platforms like HTML, CSS, JavaScript and Flash you will be used to defining colors with hexadecimal values. Silverlight does support the use of hexadecimal values in XAML, in fact it supports 4 different formats (rgb, argb, rrggbb and aarrggbb). These values are then converted using a special type converter during the parsing of the XAML file. A string value of #000 is converted into a Color structure that will render black as expected.
Unfortunately this type conversion is not readily accessible when working in code. In code there are two options built-in, the FromArgb method and system-defined colors.
ellipse.Fill = new SolidColorBrush (Color.FromArgb(255, 29, 177, 0));
//using a system-defined color
ellipse.Fill = new SolidColorBrush (Colors.Green);
As a fan of defining colors using hexadecimals, like myself, you may find switching to bytes in code bothersome. Happily we can do something about this.
The code sample below converts an unsigned integer, which can be written in hexadecimal format, into a Color structure. Not only are we avoiding string parsing by using the uint type and bitwise operators, we’re also taking advantage of extension methods in C#. This allows us to extend the uint type and reuse this method anywhere in code that has a reference to our ColorExtensions class.
public static class ColorExtensions
{
public static Color ToColor(this uint argb)
{
return Color.FromArgb((byte)((argb & -16777216) >> 0×18),
(byte)((argb & 0xff0000) >> 0×10),
(byte)((argb & 0xff00) >> 8),
(byte)(argb & 0xff));
}
}
//sample usage within a different class
ellipse.Fill = new SolidColorBrush (0xFF1DB100.ToColor());
And that’s it! You can now define color values using hexadecimal in your XAML and C# code.
(If you’re new to Silverlight and want to learn more about the SolidColorBrush class referenced and Brushes in general, check out the Brushes in Silverlight documentation.)
SilverlightShow Eco Contest – win a trip to MIX10
The SilverlightShow EcoContest is a cool opportunity for Silverlight designers and developers to show off their creativity and data visualization skills.
Here’s an excerpt from the site:
We are inviting you to create a web application using Microsoft® Silverlight™ technology that helps raise social awareness of environmental damage, and inspires individual or group actions that reduce the harmful impact on climate change.
To name a few examples, your application may:
- show an interesting animation illustrating current and potential damage to environment; may display in an original way slogans and appeals to save the environment
- help estimate the quantity of poisonous emissions (and money) a person saves by doing specific actions, like riding a bike rather than driving a car, adjusting your heating devices to a lower temperature, etc.
- educate how many years it takes to have a trashed material decompose completely
- explain what home, gardening, office activities may be undertaken to reduce contamination and carbon emissions
Not only will I be looking at the entries to see what people come up with, I also have the honor of being a judge for the contest. You have until Feb. 15th to enter your submission. So get creative and “wow” us with your work and we’ll award you a trip to MIX10!
Silverlight Design Days – Free Blend Training on Tour
- Jan 29 – Mountain View, CA, US
- event past
- Feb 9 – Irvine, CA, US
-
register heresold out!
-
- Mar 15 – break for MIX10
- Mar 24 – London, UK
- May 7 – Chicago, IL, US
- May 11 – New York, NY, US
- May 26 – Austin, TX, US
- More to come…
A Silverlight Design Day is opportunity to learn about Silverlight and Expression Blend from a design and interface developer perspective.
The first half of the day will start out with a short poll, asking these three questions:
- How many of you write code?
- What technologies do you use today?
- Is there anything specific you want to cover?
The tools and the platform will then be introduced by accomplishing designer tasks based on the earlier poll as much as possible.
The second half of the day will be your opportunity to get your hands on Blend and Silverlight. PCs will be available already configured to run through tutorials, made especially with designer and UI tasks in mind.
SWAG and giveaways will be saved till the end of the day, for those hardy souls that can make it all the way through.
Where and When:
The events will be held in training centers with pre-configured PCs available. Feel free to request during the second half of the day, help configuring your own laptop. Once the Event Schedule (shown above) is complete we should end up with an even number of US and non-US locations.
Cost:
This event is free of charge. However, attendees are responsible for booking and paying for their own travel and accommodation. Both breakfast and lunch will be provided.
Registration:
You register by click next to the location you wish to attend in the Event Schedule above. Registration is handled via the MSDN events site, so be sure to have your LiveID credentials ready.
Online Training:
Sounds like a great idea but you can’t wait? Here are a few online sources to get you started:
- Project Rosetta – Blend Tutorials and a Flash to Silverlight Guide
- Kirupa.com – Blend and Silverlight Tutorials
- Expression Blend blog – Blend Tutorials
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:
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.
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.
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.
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.
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.
Blend and design-focused MIX10 Open Call Entries
Voting on the open call sessions for MIX10 went live yesterday. You have until January 15th to submit a ballot with your top 5 choices. The most voted sessions will then be announced on Monday, January 18th.
There are only a few variables to select your top 5 picks. The Title is possibly the most important, as its used as the link text in the list to read more details. Speaker name could be influential, if recognized (or not recognized). Then the abstract, which is ideally to 2-3 sentences or 1 amazing sentence. Let’s hope the submitters spent some time on their entries.
Additionally, with more than 150 sessions to choose from the list can be a little daunting to wade through. As an added boost for the submitters’ chances, allow me to highlight those covering my favorite technologies: Expression Blend, SketchFlow and Silverlight.
Silverlight Design
- Creating Effective Info Viz in Silverlight – Matthias Shapiro
- Sketching Interactions with C# – Rick Barraza
- Design Essentials for Line of Business Applications - Matthias Shapiro
- Hollywood Draws First Blood: Media, Magic and Experience Design – Rick Barraza
- Guerrilla User Research – Carrying out missions behind enemy lines to get the insight you need – Jason Alderman
- Creating Effective and Engaging Game Based Training Experiences With Silverlight – Vance Souders
- The Neuroscience of Great Silverlight – Erik Mork
- ART & CODE – Erik Klimczak
- Syncing Audio, Video and Animations in Silverlight Applications – Dan Wahlin
- Resizing Silverlight Layouts – Erik Mork
Expression Blend
- Lighting up with Blend – Mason Brown
- Function versus Aesthetic (or ‘What happens when two opposing forces collide?’) - Jason Dorsey
- From Blend to Printed Page – Real World Printing with Silverlight - Joel Hammond-Turner
- WHAT YOU SEE IS NOT WHAT IS THERE. Users mind as a resource in Expression Blend – Claudio Guglieri and Richard Acosta
- Tips and Tricks for the WPF/Silverlight Developer: How to get the most out of developing in Blend and Visual Studio - Victor Gaudioso
- Will it Blend? – Shawn Wildermuth
- Creative Suite and Expression Suite: Sweet Harmony? – Matt Tamaru
- Mixing it Up With Blend – Andy Jacobs
SketchFlow
- Taking Wireframes to the Next Dimension with SketchFlow – Matt Tamaru
- SketchFlow for Real Software Development – David Wesst
- Reduce Your Risks with SketchFlow – Vicky Tamaru
- “Ah-gee-lay? Must be Italian”: Agile for Designers – Erik Klimczak
- PowerPoint? Psshhht! Win Some Love with Dynamic Prototypes - Erik Klimczak
NUI and Touch
- Developing Natural User Interfaces with Silverlight and WPF 4 Touch – Joshua Blake
- Building engaging touch-based experiences using Silverlight – John Stockton
- Real-world multi touch applications on Surface and Silverlight – Boris Rogge, Ph.D.
- Multi Dos and Don’t touches –Multi Touch Development from the trenches – David Kelley
Designer and Developer Collaboration
- A day in the life of a Silverlight/WPF Integrator – Laurent Bugnion
- Baking a great Silverlight UX: the recipe for successful designer-developer collaboration – Nick Harewood
- Breaking Down Walls – The Story of Getting designers and developers working together in an Agency Environment – David Kelley
Good luck to all who submitted! Now to pick my personal top 5…
Silverlight Christmas Cards for 2009
Continuing the tradition from last year here is a list of Silverlight-based Holiday cards I could find. The cards are definitely getting fancier as the technology advances.
Archetype Holiday Card Creator
Shape, Decorate, Bake and Share
Inside Xbox
Happy Holidays from around the world
Happy Holidays Art Generator
my own attempt at some holiday fun
Desktop Snow
Technically a WPF app, but its too cool not to include
Microsoft Partner Network Festive Game
Grab the pudding, dodge the elves and beat the reindeers!
Santa Present Kicker
Help Santa drop-kick presents into his sleigh
Christmas Tree Decorator
drag and drop ornaments on to the tree
RunAtServer Consulting
digging the music
If you feel like making your own cards, check out:
- Designing a Christmas card, print to Silverlight – from clear breeze design
- Falling Snow in Silverlight – kirupa.com tutorial
As a present to you from the team, check out the limited time 30% discount on Expression Studio 3 offer.
Happy holidays! Here’s to a rocking 2010!
Adam Kinney is a Technical Evangelist at Microsoft focusing on Expression Studio and Silverlight.
