I’ll be that guy – future directions and so on and so forth

Today during a call with Mr. Ingebretsen discussing a project, we had plotted who would be the dev lead, who would be the design lead and who would be the dev/design/wireframe/glue lead.  I said “I’ll be that guy”, the “glue” guy.

In the past, as a small startup style guy I’ve often played the role of the “every man”. Code, design, project planning, pm, mascot, evangelist, interface, media, graphics, lead, tech writer, trainer, booth babe, conference goer and other miscellaneous jobs.

Its been certainly an interesting, educational and entertaining time.

Since recently leaving Microsoft, I’ve been reevaluating my professional life.  This includes technology, project and work focus as well as usage of social media and my blog.  My last job at Microsoft as a Technical Evangelist had a strong influence on all of these aspects and now that I’ve moved on, I have the opportunity to start fresh.

Here’s my current thinking:

Technology – Part of the fun of becoming “independent” is you get to choose the best tool for the job.  At this point I want to be proficient in all of the major UI technologies in order to use the right tool for the project. I also feel this helps open my mind more when I can step in and out of different ways of thinking.

Projects – I’ve always been more of a “web guy” and that isn’t going away. Silverlight and Flash are great, and with the onset of HTML5 (and the tech surrounding it) I see that continuing to be a place of interest when focusing on projects that need “reach”. Otherwise, I’m enjoying native WPF or iOS applications for projects aiming for the richest experience, including mobile projects.

Work – I most enjoy working right in the middle of development and design. “Design whatever you want, and I’ll make it work.”  “Get the services and data in place, and I’ll send them to the user.”  Those are phrases I’d like to say on every project with abandon. I am planning to hone my skills more, though, on interface design and visual communication.

Recently after reading Clive Thompson’s on the Power of Visual Thinking, I was reminded of my  interest in “visual thinking” and the ideas spread by the likes of Dan Roam.  I love to draw and the power of an illustration, why am I not spending more time doing this?

Social Media and Blogging – my past behaviors in this area were very tailored by my previous position.  Am I posting or tweeting at the most effective time of the day?  Am I posting a tutorial that enough people will find helpful?

I still enjoy being helpful and learning from others, but I’m hoping to add a bit more personality, creative recklessness and randomness into what I do online.

I like the idea of not caring so much about numbers and “geek-fame”.

I like the idea of sharing ideas and ways of thinking and not just tutorials.

I like the idea of trying to do something different.

So to begin my plan, I opened up and wrote this post, which does not fit into previous recent posts.  I’ve also included a related sketch.  The sketch is not inked, left unfinished and barely touched up in Photoshop. But it is different, fun and its not being posted during the most effective time of the day.

Flash to Canvas Experiment: Bonsai Tree

Bonsai Tree canvas sample

In response to the HTML5/canvas hype, a challenge was recently issued to the public – recreate a wicked cool Flash button with an animated background in HTML5. The challenge was met within a few hours with decent results. Although proving not to be too difficult, the conversation around the challenge is interesting. How do the technologies surrounding HTML5 stand-up to plug-ins technologies? And more specifically in my interest, how reusable are existing skills and code in this new brave world of futuristic browsers?

One of the comments about the challenge offered the LiquidJourney site as a source of difficult experiments to recreate in canvas. After browsing a few of the examples, the bonsai tree or “Lines > 97” stood out as a great example to try. Not only did I like the aesthetics, but I also thought it would be a nice test of the canvas drawing API along with the browsers’ ability to handle the bloom effect of the tree.

I’m pretty pleased with the results and the conversion was pretty simple to accomplish.

A few notes on porting the code form AS2/Flash to JavaScript/Canvas:

  • Remove all of the type definitions next to  the variable declarations (var velocity:Number = 0.85; -> var velocity = 0.85;).
  • Move enterFrame logic into a draw function that is repeated using setInterval.
  • Hairline thickness for lineWidth in Flash is 0, for canvas I ended up at 0.2.
  • Change curveTo to quadraticCurveTo, nice that canvas also has a Cubic Bezier curve built in, but not needed in this case.
  • lineTo is not an implicit stroke, this just adds to a subpath and you must explicitly call the stroke function.
  • Unlike Flash the lineCap style does not default to round, so that is set explicitly.
  • Remember to call beginPath when constructing a new path, otherwise the path will continue to grow and be painted on fills and strokes.
  • And to get it to work in Chrome, I had to change the reserved variable name top to something else, otherwise I just kept getting a reference to the main document window.

The source code for the experiment is of course available via View Source.  And the experiment ran well within all of the latest browsers: IE9 beta, Firefox, Chrome and Safari.

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

movieclip guy in action

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");

photo loaded

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

photo masked

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

photo multiplied with texture 3 times

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

edges created

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

photo blended with edges

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!