Silverlight for Flash Developers: Demo with source code

With Silverlight being the talk of the town, especially amongst Flash developers, what is the best way to get your head around it? Right... Get your hands dirty. There ain't much to gain from talking about stuff you never tried :-)

The best way to get started was to go out and try some very basic stuff for game development. So I started out with basic character controlling.

Download the silverlight plug-in, if you don't allready have it, and check out the result:
http://www.seeingisbelieving.be/blog/silverlight/ladybug/fullscreen/default.html


I am on a Mac so I did not use any IDE for the creation of this demo.
Windows users can use Visual Studio or Expression.
I only used TextEdit (Notepad) for Windows users. So you could say that Silverlight is platform independent. This demo was created on a Mac. Maybe some IDE for Mac will arise in the open source community one day. You could use Eclipse for your javascript development for now. Documentation that comes with the SDK is pretty good, so you should have a 'Hello World' pretty quick.

What you need:
1. html file
2. a xaml file (pronounce as "zammel")
3. min. 2 javascript files
4. the Silverlight plug-in
5. TextEdit or Notepad

Download the SDK here.

Developing Silverlight vs Flash:
It's not all that difficult to get it working, but it can be pretty confusing if you are a Flash developer. Because I didn't use any IDE it was very hard to debug and I am not a javascript master so I had to 'cheat' sometimes.

1. Scripting and manipulating objects is done in separate files. You define your UI elements in the XAML file and you manipulate them in another file with javascript. Or at least most of the time. Not so for animations. Pretty confusing indeed...

2. I made quit a mess trying to get simultanious keyboard input, but it works. I got frustrated over booleans not working (no debugging tools) so I faked them with strings, sorry...

3. There is no 'onEnterFrame' boys and girls. There is however a work around. You create an animation with duration zero, you set a callback handler where you restart the animation and where you can put your code to be executed.

4. Prototyping is back. You will be seeing a lot of these things: myobject.prototype.mymethod = function doThis() . I've only got rid of this 2 years ago and I feel that it's not doing any good for the OO approach.

5. No support for creating custom events if your are not working with C# or Visual Basic.

6. No collision detection for images. There is a HitTest method but you can't use that on images. Only on the Stroke object.

7. Bitmap manipulation in Flash (the bitmap API) is much much more mature.

8. The switch from Actionscript to Javascript is not that hard.

9. Embedding in an html page is a complete drag. I tried to embed my application in this blog but it doesn't work at all. Microsoft provided a service called Silverlight streaming. Here you can upload your application as a zip file where you add a manifest.xml file from where it can be streamed. They provide you with some extra code and code to embed your app on an html page but I can't get it to work. It is pretty easy if you have full control over the server where you host your pages but embedding a Flash app is much more straightforward.

10. Working with animations is completely different in Silverlight than in Flash. It is done in the XAML file where you work with storyboards. An animation is an object, you can target and manipulate your animations in the according *.js file.

I feel Silverlight has a long way to go, but .NET developers should be able to get a grip of it fast. It is still in Beta so I guess stuff like bitmap manipulation, cleaner embedding, collision detection, event handling,... are allready on the table over at Microsoft. Or they should be...

Download the source code here:
http://www.seeingisbelieving.be/blog/silverlight/ladybug/silverlight_ladybug_source.zip

Word!
Technorati Profile