Sunday, October 07, 2007

Silverlight

So over the past couple of weeks I have been messing around with making my first Silverlight application. I say application but really it is a just a simple hero banner which I had previously knocked up in Flash in a day. What happens is 4 images fade and scale between each other while a window expands center stage from the _yscale and text dynamically appears with a typewriter effect. There is also a button that appears on rollover with a URL programmed into it. So I got Parallels running on my mac (which incidentally is great) and had Expression Blend 2.0 (September Preview) installed which is what you need to create a Silverlight package. So Silverlight is actually the plug-in much the same way the Flash Player is a plug-in to your browser. It is Expression Blend that is the designer's tool to create the Silverlight application just as Flash 8 or CS3 would be used. I checked out the 'getting started' tutorials on Lynda.com which is well worth a look and then got started.

My overall impression of Blend is that it is similar to After Effects. The look and feel is that of dark panels with use of fixed or floating panels that can be minimized easily. It also makes use of sliders in the form of click and drag (left or down for minus amounts and right or up for plus amounts). To start building the Silverlight package you need to collect all your assets together which have to be added to the package in the same sort of way that you'd add say an image to your library in Flash. All well and good so far. So I managed to drag an image to the stage and with Expression Blend there is no need to create a movie clip and so I was ready to start animating. What you have to do first though is to create a 'timeline' which seems counter-intuitive coming to it from the Flash world. Oh and you have to watch out for whether the timeline is 'recording' or not as this will track any movement or changes. This became very tiresome very quickly. But I did manage to eventually get two images to scale and fade between each other. You have to set up key frames where you want the animation to be and off you go animating. Blend is a time based animation package which is ok but not very precise, I think I prefer animating over frames. What I did find weird was that there seems to be no way to resize an image to an exact pixel point. The only way I could manage to resize images was with the handles and then you had to resize to a 3 decimal point of a pixel which seems very odd.

Now I felt quite pleased with myself that after a day's work I had scaled and faded 4 images between each other and made the window pop open and closed at various points. By the way, Silverlight does not pixelate your images when scaling which is a problem flash has long had and is only overcome by using the BitmapData class. So my first major obstacle with Blend was how to preview the work. In Flash you would test the movie and it would appear in the stand-alone player or you could view an HTML page to see how it views in your browser. With Blend you supposedly press F5 and it tests your movie for you. But for me this did not work. It seemed frozen on the first frame. After an extensive internet search I found some xaml code (xaml is the new programming language for Blend and Silverlight and is very XML based) that would autoplay the animation on load. Now I thought that the onload command was supposed to be built in? Anyone coming at this from a non-code background is going to be very frustrated very quick. It took a bit of hacking but eventually I got the XAML to work and my animation started to play.

And so to frustration #2. When viewing the animation in Firefox the dimensions were wrong. I had set my document properties within Blend and the XAML seemed right too. So what was the problem? I decided to get my hands dirty and look at the javascript and this is where the problem lay. It seems that Blend did not create the browser page properly so by changing these width and height properties I was on my way. Although this does seem a very basic thing and one that will again frustrate many people (myself included). Leading me to think that perhaps this version is not ready for public release yet.

Frustration #3. Each time I previewed my work in Firefox it asked me whether I wanted to reload the project as it said it had been modified outside of Blend. Clearly it hadn't but I did reload it each time. This seemed weird and the major issue I had with this workflow was that it reset your page settings and layout to the default which is not cool because the animation layout is not the default setting. The Lynda tutorial recommended allowing the reload.

So my next task was to create the text. Now I wasn't going to try anything as complicated as coding a typewriter effect, I was simply going to get my text to fade in and out. So I set up my text box and typed the copy in and then I went to select my font. WHAT??? Only 9 fonts available. That can't be right. This is for a client and they need a specific font. Grrrrr. Back to the online forums. No help there. So I pulled in some resources from work and eventually got some tech support from a person who worked on the Silverlight program over in the States. He said that Silverlight only supports 9 fonts. Really? Well I suppose the same is true of Flash but you can still design with other fonts and Flash will embed them for you or you can do it yourself. Not so with Silverlight. The only solution was about 20 lines of javascript that the guy sent me. And to be honest it was way over my head. Blend creates 3 javascript files and I had no idea where to put this code. This seems crazy to me and really frustrating. So this is where my project died.

I'm off to Silverlight training for the next 3 days so I plan to ask a lot of questions then. I am required to learn this software package as the client is demanding Silverlight applications in the near future. But my advice to any fellow Flashers looking to learn another software package is hold off on this one. It is simply not ready. It is not designer friendly yet. There is potential for it being ok. But it is years behind what Flash can do and you will need to learn new code to get it to work. But then again this is Microsoft and they will be pouring a lot of resource into this project in the future so be sure it is set to challenge Adobe. But for now just sit back and wait.