Yesterday I got my hands wet with Silverlight from purely a development side of things. But today I am going to start playing around with Expression Blend. Blend, from what I can tell, is kind of like the design view in Flex. I think everything you create in Blend visually also generates XAML code. We haven’t done a lot of Flex work here so I am really interseted to see how our Desingers find working with Blend.
My goal today is going to be figuring out how to do some of the things I can do in Flash in Silverlight. Specifically animations. Hopefully I’ll be able to get frame based animations and time based animations working.
Ok once again I downloaded and installed the wrong version. You think I would have learned my lesson. If you want to use Blend with Silverlight you must install the Blend 2 Trial preview.Â I resist the urge to just dive head in head first and hit the tutorial page. Blend has done a better job at presenting you with Tutorials by putting them right on the start page of the application as well as sample projects. Also be sure to check out the user guide in the help section as well. It’s broken out well into different categories. When you want to create a animation you’ll need to switch to the animation view ( F7 ).Â This brings up a pretty familar timeline like you would be used to in Flash. Next I added some images to the project so can use them in my animation. One thing that bugs me about the Project Panel is you can’t drag and drop files into different folders, or add Folders to your project. To actually use the images you can access them in the asset library which is accessed by clicking on the 2 chevrons at the bottom of the toolbar on the left. When adding elements to the stage you usually drag out a region for the asset to draw in, but it’s hard to know what the actual size is, so if you just double click the item in the toolbar it will draw at 0,0 at 100% scale. When creating a frame based animations there are a few differences from Flash that you should keep in mind. Make sure you are in Record mode, there is a little button beside the timeline name to toggle. The biggest thing is to remember to move the playhead to the current keyframe. If you simply click on the keyframe and change the properties, but the playhead isn’t there it will take effect where the playhead is.10am
I finally got an animation set up properly. It plays back great in the Blend IDE but is painfully slow and appears to be skipping frames when tested in a web browser. I am not really sure why this is happening, going to investigate. Also if you find that the properties panel isn’t refreshing when making a new selection on the stage, toggle between the xaml and design view. That seem to reset things.
Took the same animation and created strictly through code using C#. It’s quite a bit different then creating animations with code in Flash. You have to create a Storyboard Object and then an Animation Object inside of that. In the animation object is where you set the target, properties, and duration. It actually runs a lot better then the frame based one from Blend.
HereÂ is the time based example
Time Based Demo
So I went to go and upload the frame based example that was not performing wellÂ andÂ ran it locally by justÂ running the html file that gets generated and it played back properly.Â As it turns out, when you test your project in Blend you are runningÂ in Debug mode and there are significantÂ performance losses when doing this.Â Â I haven’t figured out a way to test your project from the IDE without running in Debug mode yet so you’ll have to click the .html file that gets generated in your project folder.
1pm – I found out that you can add assets to the Stage in Blend by just double clicking them in the Project Panel. That saves a lot of time from going through the asset library.
Â At first pass Blend seemed ok. It’s not great by any means, but that may just be me just not being used to it and thinking that I could do everything in Flash about 100 times faster. It’s got potential to be good but for now I perfer to create animations in with Code in Visual Studio. The one thing is that if you aren’t using Expression Design you can import your graphics and line them up in Blend and then just copy and paste the xaml code for placement. We’ll see how the next few weeks go. I should be able to form a better opinion on all this then.
Continue reading »
· Rating: · Written on: 06-01-07 · 3 Comments »