Category: Silverlight

Posted on

Mix n Mash 2k7, Bill Gates, Web, Blend, and Silverlight

I had the honor of being 1 of the lucky 10 invited to attend the Mix n Mash 2007 event held by Microsoft. This is the 2nd one. It’s an event where they invite you to Microsoft’s HQ to see what they are working on, give feedback, and meet Bill Gates.

Here’s a picture of the Mix n Mash invited attendee’s getting their picture taken with Bill Gates (I somehow got in there, booya!)

From left to right:

Jonathan Snook, Julie Lerman, Kelly Goto, Rob Howard, Bill Gates, Molly Holzschlag, Kip Kniskern, Jesse Warden (me!), Keith Peters and Erik Natzke

Continue reading “Mix n Mash 2k7, Bill Gates, Web, Blend, and Silverlight”

Posted on

I have a hard time writing slow ActionScript 3

I have a problem going backwards. When I learned attachMovie in Flash 5, that function was the death knell for my Director career. “Create something from nothing!?!?” :: queue Quake sound :: “GODLIKE!!! (nsfw)“.

In Director, everything you wanted to be on a depth had to have had something there originally, put there on the “score” (Director’s timeline). If you didn’t do this at author-time, you couldn’t swap things out on that depth. The attachMovie function in Flash was great because this didn’t matter; I had thousands of depths to play with; the sky was the limit!

I later learned the sky on _root had a limit; it was called the Settings Panel. Lakitu wouldn’t even go near that elevation. It didn’t matter though; creating new MovieClip’s allowed millions of depths that designers & coders never used; it was wonderful.

To be fair, you could abstract this stuff in Director. The crew over at Director-Online had at least 2 sprite engines that emulated what Flash did, with extra features. Furthermore, I couldn’t really appreciate this stuff back then anyway; I couldn’t even return values from functions. I just had functions set global variables. Class? Que? n00b.

I tried going back after I learned some things, but I just couldn’t do it. Flash offered too much. It was soo fast. So much more effective. ActionScript just seemed more organized than Lingo.

After getting over my frustration at AS1, I learned that I could create re-usable stuff. While I loved to re-invent the wheel ALL THE FRIKIN’ TIME, it did get tiring after awhile, especially when my 4th generation Scrollbar still lacked track clicking and scroll buttons. Creating re-usable tools was hot.

After getting over my furious frustration with AS2, and learning enough design patterns to pretend like I knew what I was doing, I slowly developed a loathing for AS1. I then had a hatred for anything not AS1; aka, code puked on frames.

I remember seeing a lot of creative things done with prototype in ActionScript 1, however, and even some still in AS2. So, I tried to go back, and experiment. I always ended up getting bit in the arse in the end.

When AS3 came out, the early version, it actually wasn’t that different (for me) from AS2. AddChild vs. createNewMovieClip, aka the new DisplayList was pretty easy. Protected vs. private, and other namespace features made sense pretty quickly too. The only hard thing was learning the immensely large new API. It’s one thing to remember that a CheckBox emits both a click AND a change event in the Flex SDK, and you need to care about the latter… it’s another to remember that navigateToURL is in the flash.utils.* package. Even the built-in stuff is immensely large.

What is interesting, though, is that I never developed a hatred for AS2. Because of the complete and utter lack of communication between the 2 AVM’s, combined with Flex’ slow rise to power meant a lot of parallel AS2 and AS3 work. If you asked me if I wanted to do an AS2 or AS3 project, I’d probably respond AS3, unless your deadline was a week or less.

…and that’s my point. Writing AS3 is slow. It’s finally reached a maturity as a programming language; a real language, not a “scripting language” because it now officially compiles to machine code on 3 differentchip sets. As a real language, it has all the features (most, hehe… private constructor what, abstract classes who?) a traditional programmer would expect from a programming language.

My boss, a professional Java Developer who now does a lot of PHP (and I’m sure has a larger illustrious career I don’t know about yet), said that a strongly-typed language should be making me faster, not slower.

In shock and anger, I pulled my phone from my pocket, called up “Bullshit”, and requested he leap upon my bosses’ head.

There is a reason I click the “Flash” icon on my task bar, do File > New, hit F9, and test a new String parsing algorithm there in AS3 instead of going the ActionScript project route in Flex Builder… or even “new ActionScript File” and making it launching it as an Application. Flash is faster. Sure, once you get rolling, you can have some good test bed code combined with test cases even run by ANT in Flex. I’d still argue the instant gratification in Flash beats Flex.

…but it doesn’t stop there. I mean, after hearing about things such as “int promotion” and “compiler optimizations based on clear, strongly-typed variables”, AS3 can get out of control. Parsing a pipe (|) delimited string, properties separated by commas (,), with name value pairs separated by equal signs (=) has gone from 15 lines in pre AS1 to 40 in AS3 if you ensure every parsed variable is strongly typed. For an algorithm that’s only run one time very rarely, AS3 doesn’t really benefit here.

Fine? Then why not NOT strongly type so much? Only strongly-type to ensure you don’t get any type casting exceptions, and move on with life?

…because… I … can’t. It’s hard to stop. I’ve been trained by the fear of the software engineer army to strongly-type everything. To ensure the compiler has a crystal clear understanding of everything, and that my code will run at moch-10. I can have faith that the old AVM will never even need gas, because the key in the ignition for it will never be turned. All the code I write now ensures everything is typed, and all namespaces are correct.

I’ve tried abandoning namespaces and using *, Object, and even just abandoning type-casting in general for quick tests or prototypes. It’s just as time goes on, I find the code I add to those things starts getting more AS3 like.

Bottom line, it’s really really hard to break the habit. Every time I go back to AS2 for some random project, I’m reminded how damn fast it is to create things in it. Half the exceptions I get in AS3 I really don’t care about, and don’t need to know about; they don’t impact the project from working if they are small in scope. A lot of my data is either primitives or simply arrays.

For smaller projects, AS2 is still the bomb. For smaller algorithms, less strong-typing just results in less, more readable code.

I can see why professional Ruby, JavaScript, and Python developers still exist. I don’t care what anyone says, loosely typed scripting languages still kick ass. While I wish their engines weren’t so damn slow for larger projects, lately, I’ve just been finding that for a lot of smaller scoped projects or areas, I’m glad I have the loosely typed option.

While I fully believe the majority of the industry will use C# for Silverlight 1.1 going forward, MAN was it refreshing to write it in JavaScript for 1.0. Taking a break from AS3’s strict ways was great. SmartFoxServer has an option similar to later builds of Red5. You can write in the standard Java for performance reasons OR in your scripting language of choice (JavaScript, Python, etc). For a lot of work, scripting languages are good enough, and since they are good enough, you can write less code, faster to get the same result. That last part is debatable, but not by me. After having a career in both, to me they both clearly have their place.

…what I can’t figure out is how to drop the “good habits” that AS3 teaches you to go back to fast and furious ways of scripting languages.

Posted on

Scale 9 in Silverlight

Silverlight Scale 9Samples at bottom.

In creating video players at work in Silverlight, we started getting designs that needed Scale 9. Silverlight, Blend, and/or Design don’t seem to have a Scale 9 option that I can find, so I built one in JavaScript for Silverlight 1.0. Porting to C# for all you Silverlight 1.1 peeps out there should be trivial since it’s not a lot of code.

What is Scale 9?

Scale 9 is the ability to have an image scale in a nice, visually appealing way by breaking up the image into 9 sections. It is used primarily with containers such as the windows you use on your OS. For example, if you scale the browser or RSS reader you are reading this in right now, you’ll notice that the top task bar can shrink it’s width, yet still look consistent and nice. If you shrink it vertically, you’ll notice that the sides shrink, yet still keep aligned, and looking nice as well.

Scale 9 was in my experience done a lot in Flash because as Flash got used more in the application development field, people started creating controls. Those controls were re-usable visual components, and a lot could redraw themselves via code. This code would allow visual layout changes very easily. So, a Button could be as big or as small as you wanted it to be just by calling the Button’s setSize function, and passing in a width and height. The Button would “handle” sizing itself to that size.

However, a lot of anything in Flash before ActionScript 3 had a lot of overhead in CPU and RAM. So, by implementing Scale 9 natively in the compilers & Flash Player, you reduced the image count from 9 to 1. For 30 buttons, that’s 270 visual objects being moved and sized to 30; 1 to 1. You can see how this is an awesome feature, especially when the runtime does the scaling for you taking the code out of the equation as well.

RectanglesObviously, for uniform rectangles, you don’t need scale 9. For rounded rectangles, or for anything that has non-uniform edges, if you start scaling it, it’ll stretch and look nasty.

Here’s a good article by Aral that shows how scale 9 works in Flex (scroll mid-way).

How does Scale 9 work?

Image GridScale 9 works by breaking the images into 9 sections. The 4 corners do not scale their width and height, but do reposition themselves to their respective corners. The top left always stays in the top left. The top right always stays in the top right. And so on.

The top and bottom can scale their width larger or smaller, but not their height. The left and right side can scale their height, but not their width. The center scales normally, and positions himself in the middle of everyone.

Combining this with custom sliced images, you have 9 pieces that form your image, and can scale to any size, though usually have a minimum width and height.

How does my implementation differ from Flash & Flex?

Flash 8 and Flash CS3 do vector only. Additionally, they only require 1 image whereas in this example, you need 9 bitmaps sliced up. Flex can do vector and bitmap, but has the same advantages of Flash; 1 image. Both use the compiler to define the drawing matrix where mine just re-positions things on the fly based on the passed in width and height. Mine’s written in JavaScript which isn’t compiled like C# or ActionScript 3 so runs slower.

The performance for me, however, is beyond acceptable; for a video player in a browser, it performs very well.

How do you make an interface capable of being scaled via scale 9?

A few steps.

  1. Get a designer to create an appropriate comp.
  2. Slice the image up into 9 pieces.
  3. Implement those 9 images into Blend.
  4. Put code to re-position & resize them in your JavaScript.
  5. Tweak.

Explain to the designer that the border & background, typically a video player, will be scaled to a variety of width’s and height. If you say, “Emulate how Windows XP with the silver theme has those nice, scaleable windows that look good at most any size”, that helps. Things to watch out for are drop-shadows, gradients that go the same direction you are scaling, and lots of textures on the non-corners. Those 3 make it really hard for the design to scale. If the designer can scale it in their image editing program as a bitmap (not vector) and it still looks good, that’s a good acid test for the design. “How would it look with a 4×3 video in it… say, 320×240? How about an HD 16×9 one that’s 420×270?”

Fireworks RedOnce you get the image, slice the mofo up into pieces. I use Firefox because it’s the shiz for doing quick production work. You could also use Design or Photoshop, for example… I’m just fast at “doing the work the designer doesn’t want to do” in Fireworks. You typically align 4 guides to make your 9 sections. You then make sure the tops can scale width wise, and the sides veritcally. Then you export the slices as PNG’s. You do PNG because it’s lossless comperssion (meaning no image quality loss from compression), and it supports transparency. Then…

Blend Red…import those bad boys into Blend. Make sure the width and height of the XAML Image tag matches your exported PNG’s so you don’t get any weird scaling. If you see transform matrix tags nested in your image tags for the background pieces, delete that mess; you are using code, not Blend, to position and size your background pieces.

Use the example scale 9 code below in your JavaScript to scale 9 your interface. Keep in mind CSS has a major impact on this actually working in browsers other than IE. Here’s some example code (at the bottom, 2nd to last thread) on how to get this to work in both browsers.

Tweak. You may not get it right the first time. Additionally, I swear Silverlight is either scaling my images a tad, or I’m just using Canvas.Left and Canvas.Top wrong. You’ll notice magic numbers in the redraw function; these change EVERY design. For some reason (maybe half-pixel values I’m not seeing) some designs either bleed into another by a pixel, or miss one. The “1”‘s in the redraw function are there to make it, like Goldielocks, just right. Test in both IE, Firefox, and Safari if you gotta Mac or are brave enough to install Safari on your PC.

Scale 9 JavaScript Code

Scale9 = function(tl, tc, tr, cl, c, cr, bl, bc, br){

	this.tl = tl;

	this.tc = tc;

	this.tr = tr;

	this.cl = cl;

	this.c  = c;

	this.cr = cr;

	this.bl = bl;

	this.bc = bc;

	this.br = br;

};
Scale9.prototype.redraw = function(sender, width, height, offsetX, offsetY){

	if(offsetX == null) offsetX = 0;

	if(offsetY == null) offsetY = 0;

	this.move(this.tl, offsetX, offsetY);

	this.move(this.tc, this.getX(this.tl) + this.tl.width, this.getY(this.tl));

	this.move(this.tr, width - this.tr.width, this.getY(this.tc));

	this.tc.width = width - this.getX(this.tc) - this.tr.width;

	this.move(this.cl, this.getX(this.tl), this.getY(this.tl) + this.tl.height);

	this.move(this.c, this.getX(this.cl) + this.cl.width, this.getY(this.cl));

	this.move(this.cr, width - this.cr.width, this.getY(this.cl));

	this.c.width = width - this.getX(this.c) - this.cr.width;

	this.move(this.bl, this.getX(this.cl), height - this.bl.height - 1);

	this.cl.height = height - this.getY(this.cl) - this.bl.height - 1;

	this.c.height = this.cl.height;

	this.cr.height = this.cl.height;

	this.move(this.br, width - this.br.width, height - this.br.height - 1);

	this.move(this.bc, this.getX(this.bl) + this.bl.width, this.getY(this.bl));

	this.bc.width = width - this.getX(this.bc) - this.br.width;

};
Scale9.prototype.move = function(obj, x, y){

	obj["Canvas.Left"] = x;

	obj["Canvas.Top"] = y;

};

Scale9.prototype.getX = function(obj)

{

	return obj["Canvas.Left"];

};

Scale9.prototype.getY = function(obj)

{

	return obj["Canvas.Top"];

};

Example Usage

function onLoaded(sender, args){

	var plugin = sender.getHost();

	plugin.content.onFullScreenChange = onFullScreenChanged;

	plugin.content.onResize = onResized;

}

function onResized(sender, eventArgs)
{
        var plugin = sender.getHost();
        setSize(sender, plugin.content.actualWidth, plugin.content.actualHeight);
}

function onFullScreenChanged(sender, eventArgs)

{

	var plugin = sender.getHost();

	setSize(sender, plugin.content.actualWidth, plugin.content.actualHeight);

}

function fullscreenThisMugUpInHere(sender, args)

{

	var plugin = sender.getHost();

	plugin.content.fullScreen = !plugin.content.fullScreen;

}
function setSize(sender, width, height)
{

	var scale9 = new Scale9(sender.findName("bg_tl"),

	sender.findName("bg_top"),

	sender.findName("bg_tr"),

	sender.findName("bg_cl"),

	sender.findName("bg_center"),

	sender.findName("bg_cr"),

	sender.findName("bg_bl"),

	sender.findName("bg_bottom"),

	sender.findName("bg_br"));

	scale9.redraw(sender, width, height);

}

Conclusions

While vector graphics can be redrawn to get around scale 9 problems with code, not all designs are that simple. Furthermore, as much as Microsoft wants the design community to use Design to create interfaces, they don’t; they use Illustrator, Photoshop, and other 3D and video compositing software NOT made by Microsoft. As such, you’re likely to get a bitmap file that you’re expected to implement into Silverlight instead of an easy, vector design with XAML behind it. Blend is pretty pimp in it’s handling of PNG’s, so if you gotta go raster instead of vector, go with the best.

Also, keep in mind scale 9 works the same for fullscreen; you just call the scale9.redraw function in the onFullScreen as well as the onResize and it’ll nicely scale to the size of your monitor.

Thanks for the Gray frame design on such short notice, Charlie!

Samples

Red Video Player – Example | Source ZIP

Gray Video Player – Example | Source ZIP

Released under a Creative Commons GNU General Public License.

Posted on

Silverlight First Impressions

I’m a Flash & Flex Developer, and these are my first impressions of Silverlight. Silverlight is a rich media web browser plug-in that was recently released by Microsoft.

This is long. If you’re in a hurry:

…otherwise, just read the whole thing over coffee, beer, or pick a section.

Contents

Introduction

I felt the need to post for four reasons.

First, there are a lot of negative attitudes out there that I think potentially blind people from the cool technical features Silverlight has. Second, all the developer oriented posts written by people in Flash / Flex sphere are not as technical as I would like and wreak of Microsoft PR machine bs, or uber-idealism with no technical supporting data; well not enough for my taste. Engineers can be some mean, critical mofo’s and I’ve yet to see an article really rip into Silverlight from a technical perspective. Third, there are also some inaccuracies in the blog-sphere on how powerful Silverlight 1.0 is and what you can actually do with it compared to Silverlight 1.1. Fourth, my 3 4 5 6 day old (What frikin’ day is it!?) is finally asleep, but I can’t sleep.

Overall, I wanted to report my 3rd endeavor to learn Microsoft’s story on how they see this all working, and get a feel for the technology. To give some context, I am an Adobe kid; I use their design & development products in my career and for fun. I develop using Flash & Flex as a client architect at my full time job working at Multicast Media, a video streaming & Internet TV company. The views below, however, are my own and are not associated in any way with Multicast Media. We use a lot of technologies where I work, both client side and server-side such as PHP , Java, Ruby, C++, .NET, Flash, Flex, AJAX, and tons of HTML & JavaScript. I use both Mac and PC, and have drifted away from using Microsoft Office products on both machines now that I’ve become comfortable using Google Docs. I love to code, and love working with designers.

I am not an expert on Microsoft technologies, and am still a Silverlight n00b. I apologize for any inaccuracies below (feel free to correct me in the comments). These are my impressions.

TOP

What is Silverlight? My Version

Beyond being a browser plug-in to play rich media, Silverlight in my mind is definitely positioned as an application development platform for the web. In reading the SDK on how Silverlight works from a technical perspective, if she performs well under stress (hundreds of classes, code running combined with animation running without hiccups, code actually working as the docs say it does on both platforms), then I fully believe Microsoft has something really special here.

Don’t take my word for it; the 2 blog entries I found that were (mostly) not Microsoft lackey posts are from Richard Leggett, a very talented Flash Designer & Developer of both Flash and Flash Lite. Good stuff in the comments too. Another is from Satori Canton which he recently wrote to give a breakdown of what Silverlight really is and is comprised of. A sorely lacking blog post in the community, especially in the Flash in Flex sphere. Unfortunately, like them all, he’s too nice which makes me suspicious and angry because I want to know what sucks about it, where is it lacking, and what’s Microsoft’s story on improving those areas? Either way, both are great reads.

TOP

Here’s what I know, and like.

Silverlight 1.0 is a web plug-in that works on both Windows and Mac, and it works in Internet Explorer, Firefox, and Safari. Google Analytics used on users of a variety of my company’s products makes me not care. The data clearly is there to only need to support IE and Firefox; Safari’s a nice to have… for me alone, apparently.


Update: I still haven’t got the DLR & CLR parts totally correct yet; for better commentary, see the 3rd, 4th, and 5th comments at the bottom of this entry.

Silverlight 1.0 uses the JavaScript engine of the browser it’s in.

Silverlight 1.1 has will have a DLR, a Dynamic Language Runtime, that will run atop the CLR. This is similar to Flash Player’s ActionScript Virtual Machine, the AVM (AVM1, the one before Tamarin). As of today, you can write in JavaScript 1.0 style, from simple functions, to full blown classes via Object.prototype manipulation, similar to Flash Development circa Flash MX. This has some people excited because apparently enough of the DLR will be open sourced to allow other language implementations to compile to the DLR runtime, such as Ruby and Python. So, you can create animations and GUI’s in Silverlight and control them with code much like you did in the past in Flash using ActionScript 1.

TOP

The Silverlight DLR & CLR is not out yet; it is slated for the summer of 2008. This will be the release of Silverlight 1.1 which is currently in alpha. The CLR in .NET as I understand it is much like any runtime in taking bytecode or some other low level language and parsing/interpreting those instructions. Some are interpreted, some are compiled code. The way you get to that code is by compiling in Visual Studio 2008 (in beta currently called Orcas ). What is neat is that all the languages people currently use in .NET such as Visual Basic and C# can compile to compiled code, and thus the CLR. My guess is the speed increases one gets using the CLR vs. the DLR will be inline with what one gets using ActionScript 3 vs. ActionScript 2/1 in Flash Player. This is based on assumptions of seeing the online demo of TopBanana that Metaliq did, as well as my experience with reading about how you can only optimize dynamic, late bound languages so much compared to strongly-typed ones.

There are no native component sets for Silverlight 1.0. Building things in Silverlight currently is perceived by me as building things in Flash 4/Flash Lite. From scratch, each time, and small enough in scale because of your 1 week or less deadline. Hence, no need for a component framework. While I think this is just fine for a lot of design agencies looking to spruce up their usage of Windows Media as separate design elements on their branded portals, it’s frikin ‘ worthless to developers who want to start building something today. Building components frameworks are a lot of time & work.

TOP

Silverlight has a display tree much like Flash Player 9’s DisplayList. You can have display objects all attached to each other ( a Button control with a TextField attached to it). This is great because you can create GUI elements without them having to exist on the display tree, and thus drawn taking up CPU & RAM. This helps both Silverlight’s creators because they make sophisticated, efficient frameworks around this model, and it’s great for developers because they can not worry about the designs scaling if they have a bunch of screens.

Silverlight is built upon XAML. XAML looks and feels like XML, and is very low level. It’s low level because this is the XML that is parsed into machine instructions for WPF. XAML , however, is not software or hardware, it’s just an XML format, nothing more. You can edit it Notepad or any text editor, and easily create it in Design and Blend.

TOP

Comparing it to Flex’ MXML is really hard to do. MXML is very high level. The point of MXML is provide an easy way to build GUI’s with all the good things XML has to offer. It’s very high level, and abstracts a lot. This is good because the less code you have to write to get something done, the better in my opinion. Looking at the Silverlight / AIR / JavaFX Stopwatch example (HTML version here), you can definitely do custom controls, but they don’t seem to be built into the language as well as MXML is. The benefits of XAML , however, is you can pretty quickly (assuming you can find where the heck you’re going) change very low level properties on your XML document from the x position of an element to the 206th curve of a vector spline in a design.

It gets really interesting with animation. Unlike Adobe Flash which has a timeline, XAML has timelines, aka, plural. Each one is created for a property and/or object you can manipulate over time, and thus it’s a different type of timeline. So while Blend and Flash both have a timeline panel, Blend’s XAML is writing a specific type of timeline in XAML based on what you are actually animating. These can exist either as part of a set of objects, say a custom rectangle you built that immediately moves itself, or as a set of animations you can apply later. Flex has something similar with transitions which can be abstracted away from the GUI they are animating, much like XAML. So, to me, they got this part extremely right. The GUI’s responsible for creating and editing those timelines, however, suck. Blend’s animation timeline should just copy After Effects‘ and get it over with. I told Samuel Wan this over a year ago in Beta 1 of Blend, wtf. Either way, I still love time based, non-destructive timelines like After Effect’s has using key frames as more formal objects.

TOP

Most interesting of all is Sliverlight’s setup. In Flash & Flex, you make a SWF and shove it up to a web server with associated JavaScript to embed it in an HTML file. The tools usually generate these for you. In Silverlight, you don’t compile anything for using the DLR. You just upload your Silverlight.js file, a CreateSilverlight.js file, your own JavaScript, your XAML files, and your own HTML. All ASCII based. While this is irrelevant at development time because you can have an all ASCII based setup using Flex and Flash for source control, you cannot easily screw with SWF applications at runtime. Since SWF’s are binary files, you cannot simple open them in Notepad to see how they are made. My favorite new feature in Flex 2 allows you to easily publish your source code for all to see. In Silverlight using the DLR, this is native and allows tools like Greasemonkey to actually change the way Siverlight applications work at runtime, even ones that you didn’t create. You cannot do that easily using SWF’s mainly because of the strict cross-domain sandbox policies, and it’s next to impossible in ActionScript 3 SWF’s since you can’t hack the prototypes of the loaded classes.

Silverlight has an event model as well for all it’s display objects. Some of these events do event bubbling just like ActionScript 3 does. The JavaScript implementation is ok for writing an event handler, a function that receives the event. Your first parameter is the dude who sent the event, and the second is the arguments. ActionScript 3 has formalized this into 1 parameter only as a class that extends flash.events.Event. I agree with Silverlight 1.0’s implementation as it’s lighter weight, and you don’t need bloody classes when your trying to keep your applications’ file-size low. I despise the event registering, though. In Flex, you can opt-in to pass parameters to the event handler, effectively doing your own delegate like so:

TOP

This:

<mx:Button click=”click(event, ‘moo goo’)” />

Becomes this:

private function clickListener(event:Event):void

{

      click(event, 'some str');

}

Which at runtime will then call the function I defined when I click the Button:

public function click(event:Event, someStr:String):void

{

      throw new Error("someStr: " + someStr + ", event: " + event);

}

TOP

XAML is not compiled in the DLR, thus there is no code generation going on. I fail to see how Microsoft could do code-gen in the DLR, but they have no excuse to not have this ability in the CLR. Then again, there are 50 billion closet C# guys in the Flash world, so I’m sure they’ll be itchin’ to tell me how C# already has a better way, blah blah blah.

Bottom line, all you can do in XAML itself is someEvent=”someFunction”. Obviously you can do more in the code behind JavaScript. So, compared to MXML, XAML isn’t very flexible in this respect.

TOP

The mouse and keyboard events are pretty standard.

Fonts are neat, although, cumbersome. If you’re a Flex Developer, imagine not having a SWFLoader or Image component in the Flex SDK; that pretty much describes what the Downloader is used for in regards to font files. You have to manually download the font, whether a file or in a zip, and once downloaded you can then apply the font to text objects. It takes only 5 lines to download the font, and 1 to apply it, but still, this is all stuff developers are going to be writing; you might as well create a set of framework classes that simplifies these common needs for them. Either way, light years better than Remote Shared Libraries and font wars that last long into the night when using Flash/Flex. Assuming it works as advertised; haven’t used the feature.

It has full screen support, just like Flash Player 9.0.28.0.

It also has Ink support (aka stylus, pen input from tablet pc’s).

The last feature is that videos still support their embedded text tracks and time-codes. This allows messages to be played through the video at certain times, and JavaScript can handle these messages. It’s like cue points in Flash’s video players, or embedded NetStream events when you use Flash Media Server. The reason this is important is that those script tracks never worked well on the Mac. Thus, massive kludge code was written to poll the server if you were building synced slide web software for example. Nasty stuff. Now, Silverlight has this functionality working like it should on both platforms… so we’re told.

Linux has a version that seems to actually have Microsoft’s support called Moonlight.

TOP

Install Experience

When I tried the Beta 2 version of Silverlight on my Mac, I had pretty much the same experience as Sean Corfield. However, while I have seen 2 blog posts about Windows developers having issues installing the plug-in, I’ve been very impressed about the final release installation experience on both Mac and PC. It just works. That was one of the secrets to Flash Player’s early success, and was echoed by the swath of traditional developers who explained on their blogs why they chose Flex.

It needs to work for everyone, though, not just me.

TOP

Documentation

I installed the Silverlight 1.0 SDK, and read the entire .cfm file, stopping at the API. I glanced over the API to ensure it matched up with what I read, and it did for the most part. I found the documentation really good in explaining how Silverlight works. The fact Silverlight has changed so much from it’s early Alphas, Betas, and then final release made it have a few minor addendum’s that clearly spelled out corrections to earlier documentation. I did not read the earlier documentation (whatever was published at MIX 2007), so just took it at face value. These were usually in regards to performance bottlenecks and how to avoid them. While this is really cool to have that level of detail, and to ensure first apps built with Silverlight don’t get a bad rap for some developer who didn’t read the updated documentation, it wasn’t in depth enough. I want technical details like I can get from a variety of sources like Flash Player.

TOP

Business Decisions

The reason I even care about Silverlight is two fold. First, I wanted to learn something new.

Second, Windows Media doesn’t suck. Where I work, a huge portion of our customer base uses Windows Media streaming technologies, both live streaming and progressive using CDN’s. Yes real streaming, not fake streaming, hehe, nice on Ted. While the customer base is currently asking for Flash because it’s the latest greatest, there is no reason tomorrow they won’t start asking for Windows Media again, or even Quicktime when Apple fixes their severely broken Quicktime PR arm. Since we are in the business of video streaming and software solutions around them, it is in our best interest to know the ins and outs of all architectures… yes folks, even Real for the mere point of ripping it apart intelligently. Silverlight is not a video architecture like Windows Media Player; it’s an interactive runtime that allows you to create rich experiences with your Windows Media content. I’d argue Flash can do it better, not just from a technical angle, but from a community one. Keyword contraction “I’d”; I’m still learning, so while I doubt I’m wrong on the community angle since I don’t really hear much about people like Hillman Kurtis winning design awards for using Design/Blend/Silverlight together, it doesn’t mean I won’t be in the future. This is brand new software, barely out of the oven. I’m still learning Silverlight too, and Blend specifically; it took me years to get good at Flash & Flex, so I know it won’t happen overnight.

It also won’t happen without a project, either. While I’ll definitely do the responsible developer thing, and learn on my own personal projects at night, I do so knowing it’s not a waste of time. Clients will come a knockin’, I’m sure of it.

TOP

Further Validations

Silverlight has valid set of business needs. Previously, there was no easy way to brand Windows Media content easily online like you could with Flash. Now their is and to great effect. Designers can treat Windows Media content just like they can with Flash; as part of the page, not a “thing unto itself”. Granted, it’s still a plug-in, so things aren’t perfect, but plug-ins exist because browser evolution is too slow to do what businesses need to do today. One of those needs is to have a 100% branded image on some projects where millions were spent to ensure that customers are not confused about the brand image they are seeing. It’s really frustrating leading a design team to implement a new site, and customers mention in blogs “so and so brand used Microsoft video”. Dammit! No we didn’t, we used OUR video, for OUR brand! Silverlight remedies this. My video, my controls, all you need to do is design a video player around your brand, and you can then use Silverlight to show Windows Media as you want it to look and feel.

If you didn’t know, there was some hub-bub about a lot of online viewers petitioning the BBC to convert a lot of their online content to Flash solutions to better support audience needs. I use Flip4Mac WMV Player on my Mac, but it doesn’t work very well, so I definitely know what these audience members are talking about. Compare to CNN.com, and it’s pretty blatant.

TOP

The BBC’s retort was quite cool, actually. They said, no and explained why they couldn’t. Mainly, it was too expensive to remove all the massive investments they had made in Windows Media to just switch it over to Flash. They then put the ball in the communities court to help them figure out a way. I never really heard the resolution to this story, but I’ve heard derivatives before. For example, a company I work near has a box they send customers. This is an encoder box, and it streams Windows Media streams live, and later uploads them to be viewed progressively later. The amount of hardware & software development and testing, both client and server that went into that setup is immense. To just “start doing Flash” is unrealistic. One needs to consider the costs and the technological validity. These are 2 scenarios, one of which I can personally attest to, where Silverlight allows those who have invested serious capital into Windows Media to capitalize on it.

TOP

Silverlight 1.0 vs. 1.1 (aka, DLR vs. CLR)

While my exposure to the .NET blog-sphere is next to null, and those I’ve talked to in person and read about seem fine with either the DLR or the CLR. As long as Visual Studio 2008 supports the developer with code hinting, and other commonly accepted code tools, then a few don’t really seem to care if they are using JavaScript or C#. I don’t buy that in the long term, though. I think the .NET guys are just being patient. What I think will happen is the web geeks and the agencies will use the thenDLR, and all the .NET software shops will use managed code.

For the latter, I thought that the .NET guys would have the same problems that the traditional programmers who came to the Flex world would have with leveraging rich media. I was partially wrong. They all picked up Flex really quickly, were passionate, and are now producing a lot of great Flex work, both public, but mostly behind the firewall. I still get some emails requesting design talent for Flex specific projects which make me really happy to know that these software shops, once they see what’s possible, appreciate what good design can bring to the table. I’ve worked with some .NET’erz in my time at a large agency and at a mid-size software shop, and now at my new job. They all have appreciated good design. There is no reason these people, who have the tools, cannot do the same the non-.NET crowd did (Java/Ruby/ColdFusion, etc.) with Flash and Flex.

TOP

My concern stems from the fact that Design & Blend are 1.0. I’ve messed around only briefly with Design and it worked for me. My litmus test is if you support PNG, you get a passing grade right off the bat. However, supporting PNG and having industry standard design tools such as the Adobe & Autodesk suites are decades apart, both in software evolution and community evolution. Can a community really form around these design tools to push Silverlight in a direction it needs to go? Where does it need to go? Well, to me, it needs to go where Flash goes; pushing limits of designs, pushing web application envelopes.

I just feel like the .NET crowd is setup to fail with the design tools that Microsoft has provided. It does mean the tools are bad, nor that the .NET crowd is incapable of laying the visual funk. Rather, a DESIGNER has to learn those tools. The tools are new; they’re not like Photoshop which have gigantor communities and followings; atmospheres, attitudes, histories. That is a lot of ramp up time in an industry that already has Silverlight playing catch-up. Maybe more money will make it evolve faster?

TOP

What Sucks

If you view the tutorial videos on Siverlight.net, there is a WPF slant. The marketing Microsoft originally had made it sound like Sparkle (first of 2 Silverlight alpha/beta names) was this ground roots effort done in tandem with the WPF. However, after reading the docs, and using the tools, Silverlight seems extremely reactionary. Meaning, I believe that when you show me a video about using Blend about how I can create interfaces for Windows Vista programs, yet you place this video in the Silverlight tutorial section, this is misleading and contributes to the “reactionary” perception. Either you’re trying to leverage my Silverlight experience to create Windows Vista Destkop Applications for the same bizarre reason Adobe thinks we need to port well and good web apps to the desktop, or you’re low on content that shows how Blend can be used as an interface tool for creating web applications in Silverlight… because Blend is not a tool for creating web interfaces in Silverlight. Or both.

Heck, maybe it is. Maybe both Design & Blend are truly meant for building both desktop applications and web applications. You can do the same thing with Flex and Flash, so I can see the idea flying. Regardless, when Microsoft mention things in the SDK like “supporting most of XAML in Silverlight”, it only hammers home more of the idea that Silverlight was built atop WPF later rather than a tandem effort like the WPF/E original beta name tries to lead you in.

TOP

The lack of coding tools that work out of the gate, easily, is pretty bad. I never got Visual Studio 2008 (Orcas Beta 2) to actually work after downloading the 4 gigs twice in 1 weekend with the Silverlight JavaScript. I mean, if Aptana can do it in Eclipse, why can’t this greatest IDE on the planet I keep hearing about do it? I know it’s beta, so it’s all good, just curious. Just because I use a late bound language doesn’t mean I don’t like code hints. Besides, these things help me learn!

Blend’s timeline is bleh. It doesn’t mean it isn’t intrinsically good or powerful, but rather, my expectations from other tools such as After Effects, Flash, and Live Motion carry over to Blend. Maybe once I learn it, it’ll rock the mic. Once I found the bloody thing in Blend, I figured it out pretty quickly. The concept of an embedded animation vs. a resource was really hard to wrap my head around in the actual XAML syntax. The actual concept, though, makes perfect sense. MovieClip animation vs. a Flex transition tag; one is part of the object, the other can be borrowed. Got it. Uh… so… like, I don’t know, it seems to me that this should kind of be an important part of building RIA interfaces. Why not make this more a prominent part of the workflow? I don’t really know Silverlight workflow yet, so who knows. Flex Builder currently doesn’t have a very good one for transitions; states are good, but not animations. It seems both tools could improve on this front. Then again, Flex developers do just fine without them, so, maybe Microsoft thought it was acceptable since Adobe didn’t put it inFlex Builder . Glorious assumption, I know. Bottom line, I’d prefer Blend have their keyframe editing in place like After Effects does rather than having to use the global property inspector for everything. Relevant property inspectors on the timeline, not in a far away panel.

TOP

I know Blend isn’t really Silverlight, merely a tool in which you can create GUI’s for Silverlight. However, the end result is greatly affected by the tools used to create it. As such, improvements in Blend will have a direct impact in improvements in Silverlight content. For example, an under-utilized, yet powerful feature in Flex is transitions. If Flex Builder is improved in future versions, Flex content will be a lot better. The functionality is already there, it’s just tedious to create, not easy to undo, and thus hard to get “just right”. Same holds true for animating in Silverlight . Maybe if I did a full blown project, I’d change my mind. I just had high expectations from Beta 1 to Beta 2, and it doesn’t seem like much changed on that front.

There are no component frameworks that come with Silverlight. I’m sure some third party is nearly done based on the blogs I’ve read. For now, that doesn’t make Silverlight 1.0 valuable for large scale applications. Video players, however, that make Windows Media look good don’t need to be enterprise scale, so maybe that’s why. My guess is those types of things will be more polished in 1.1.

TOP

Conclusions

At the end of it all, Silverlight deserves more research. The biggest challenge for me is how to build a component framework around the createFromXaml method. In ActionScript 3, you can do:

var t = new TextField();addChild(t);

In Silverlight 1.0 JavaScript, it’s:

var xaml = "<textbock text='test'>";text = plugin.content.createFromXaml(xaml);

object.children.add(text);

Assuming you can create custom components this way, then I guess we’re off. If you read the SDK, the properties and methods are pretty easy to follow. I think Microsoft really has something here. Whether they do or not doesn’t really matter, though; there are tons of people who aren’t leaving Windows Media without spending mad bling, and Silverlight’s induction will help ease those frustrations. I think you’ll continue to see some losses in the Windows Media market as Flash continues it’s rise, but once Silverlight 1.1 gets out of beta, and more managed code applications come out of the woodwork, I’m sure the tide will change; or maybe not. I don’t care, I’m just glad Flash finally has some competition on the horizon.

In the interim, I know I’ll have Silverlight project soon, namely a customizable video player. There are tons of Flash jobs right now around building custom video players, and soon there will be more for Silverlight ones. A lot of video customers ask for Flash video by name. I have a feeling once the Microsoft marketing engine kicks into high gear, they’ll start to ask for Windows Media again, or even just “Silverlight”, not really knowing what it is, but they’ll have money proving they want it. Besides, there are a lot of people out there already who are deeply into Windows Media; it’s not going away, and Silverlight gives them all the opportunity to have better offerings. In short, that’s cool!

TOP