TyZ - Thijs Broerse - Flash Developer

Vanochtend ben ik met een collega naar een workshop geweest over SilverLight bij MicroSoft. De workshop ging niet alleen over Silverlight, maar ook over Expressions en de Windows Presentation Foundation (WPF), maar voor ons was natuurlijk vooral Silverlight interessant. Hierbij een verslagje van wat we allemaal hebben gehoord.

WPF is ontstaan om verschillende media (Video, audio etc.) beter door elkaar te gebruiken. Microsoft heeft al allerlei software om “design” dingen mee te doen, maar de integratie er van kan beter. WPF belooft een betere integratie tussen video, audio en applicaties. WPF ondersteund tal van video formaten, 3D, hardware acceleration (active X) en nog veel meer.
Expressions is een pakket van verschillende tools om gebruik te maken van deze WPF. Microsoft Expression Studio bestaat uit:

• Expression Web: de opvolger van FrontPage. 
• Expression Blend: de “Flash” van Microsoft
• Expression Media: voor het encoderen van video e.d.
• Expression Design: de design tool van Microsoft

Silverlight is een subset van WPF die gebruikt kan worden op het web. Silverlight heeft geen 3D of hardware acceleration (active X), maar wel video. Silverlight heeft duidelijk zijn pijlen gericht op video, want dat is het enige waarin het (op dit moment) ‘beter’ is dan Flash, aangezien het veel meer video formaten ondersteunt, zoals VC-1, een HD coded die bijvoorbeeld ook gebruikt wordt voor Blu-ray DVD’s. Het is alleen de vraag hoelang ze deze “voorsprong” kunnen vast houden, aangezien de volgende Flash player H.264 ondersteund.

WPF, Silverlight en Expressions zou vooral de samenwerking tussen designers en developers moeten verbeteren, aangezien ze straks allemaal dezelfde taal spreken: XAML (Extensible Application Markup Language). Vanuit Expression Design wordt geëxporteerd naar XAML, die weer door Expression Blend wordt gebruikt om animatie en interactie toe te voegen. Dit zou het werkproces dus moeten versnellen.

Met Expression Design is het mogelijk om Photoshop (PSD) en Illustrator (AI) bestanden te  importeren en te exporteren naar XAML. Dit is waarschijnlijk ook de enige reden waarom je Expression Design zou gebruiken, want de design tools die er in zitten zijn karig.

Een verschil tussen Flash en Silverlight is de integratie met HTML. De HTML die om Silverlight zit krijgt standaard dezelfde events als wanneer het gewoon HTML was geweest (bijvoorbeeld muispositie en clicks), dit is niet het geval bij Flash. Verder kan je Flash en Silverlight prima met elkaar laten samenwerken, zoals te zien is in dit voorbeeld.

Silverlight is er nu in de 1.0 en de 1.1 alpha variant. De 1.0 variant werkt momenteel geheel met JavaScript en niet met .NET. De communicatie met de backend gebeurt met AJAX. De 1.1 variant werkt wel volledig in .NET en heeft dus als voordeel dat het gecompileerd is en dus veel sneller werkt. Dit is duidelijk te zien met het silverlight schaakspel waarbij je voor elke speler de keuze uit: Human, JScript en .NET. Hierbij is de .NET variant ongeveer een factor 1000 sneller dan JScript (.NET = ~1.000.000 Nodes/sec,  JScript < 1000 Nodes/sec). Er is alleen nog wel een groot nadeel: De 1.1 variant is er nu alleen nog maar in alpha en de verwachting is dat er nog heel erg veel gaat veranderen. Het werd ons afgeraden momenteel producties te maken met 1.1. Wanneer de 1.1 officieel gereleased wordt wilden ze nog niet veel over kwijt, het is in ieder geval volgend jaar.

Een leuke site waar je de performance verschillen tussen alle verschillende pakketen kan testen is bubblemark.com. Bubblemark is een animatie test die op meerdere platformen (o.a. DHTML, Flash, Silverlight, WPF en Java) is gemaakt en waarbij je de performance kan zien.

Verder hebben we gezien hoe je snel een custum video player in elkaar zet met Silverlight. Als je maar de juiste naamgeving hanteert heb je binnen een halfuur een videoplayer met je eigen controls (play-pause knop, stop en seekbar).

Silverlight kent ook een timeline die ze ‘Storyboard’ noemen, als je ze de juiste namen geeft (bijvoorbeeld “PlayPauseButton_mouseEnter”) wordt het meteen op de juiste manier afgehandeld. Uiteraard kan dit ook met script worden gedaan. Silverlight is niet frame gebaseerd (zoals Flash), maar tijd. Je geeft dus aan op welk tijdstip iets moet gebeuren. Je zet op de tijdlijn wat de properties van een object moet zijn, op welk tijdstip, dit is ongeacht zijn huidige toestand. Als een knop moet verkleuren naar geel, maakt het niet uit of hij nu rood of blauw is. Hierdoor kent Silverlight dus standaard “retro” gedrag. Een opvallend dingetje aan de tijdlijn is dat de opbouw van de layers precies andersom is dan in Flash: Elementen met een hogere z-index staan lager op de tijdlijn.
Daarnaast kent Silverlight “event bubbling” en “event tunneling”.

Silverlight kent een library van componenten, zoals een textbox of button, maar die is nu nog heel erg beperkt. Radiobuttons, pulldown en dergelijke zitten er nu nog niet in. Het is dus af te raden om formulieren te maken in Silverlight.

Nog wat leuke voorbeelden:

Tafiti, http://www.tafiti.com
Een Silverlight variant van een bestaande site, met een Halo skin.

De OTTO store.
Een ‘3D’ applicatie in WPF (geen Silverlight) die je kan installeren en waarbij je bijvoorbeeld verschillende kledingstukken kan combineren op een virtueel person. Te downloaden op: http://www.otto.de.

This entry was posted on Tuesday, October 23rd, 2007 at 17:22 and is filed under Silverlight. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.