Silverlight Experiment: movement

This took me longer to do partly because I don't know trigonometry and because silverlight/blend doesn't really have a concept of fps (frames per second) or enterframe like flash does. Flash movies are like merry go rounds, they just keep going around and around until you stop them. You use this fact to tell flash to do "stuff" every time a certain horse comes around again. "Stuff" usually involves moving, fading, scaling, etc. Say you wanted an object to move horizontally across the screen by 1 pixel every time your movie looped.

In flash it might look like this:

item.onEnterFrame = function(){
"bob" every time i see you, i want you to:
---> this._x += 1;
---> advance a step from the last place you were.
}

Blend doesn't really have an onEnterFrame ability built into it. Flash is timeline based at its very core (like a movie) but Blend is static (like a webpage). So you can either use javascript's setTimeout() function or you can employ a storyboard timer workaround, via Stegman & Andy. I did some brief tests and it seems that the storyboard timer is faster. I will post some examples of this in action when I get some time. Until then, here is the basic setup and javascript:

the xaml:

{Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="350" Height="150" x:Name="Page" Loaded="onLoaded">
{Canvas.Resources>
{Storyboard Completed="timerCompleted"
x:Name="timer" Duration="00:00:0.02" />
{/Canvas.Resources>
{/Canvas>

the Javascript:

function onLoaded(sLight)
{
 root= sLight.findName("Page"); 
 plugin = sLight.getHost();
 var timer = sLight.findName("timer");
 timer.begin();
}

function timerCompleted(sender, args)
{
///// DO STUFF HERE. Like take a step. 
var ball = sender.findName("ball");
ball["Canvas.Left"] = ball["Canvas.Left"] + 1;

// restart the timer
sender.begin();
}

You can use this approach for creating your casual game or just to move stuff around.

silverlight experiment: fading 2

I posted a partial solution to fading yesterday. Today, I think i have figured out how to efficiently fade almost anything. The big challenge for me was removing storyboards that I was no longer going to use. The solution was to use and event listener that would remove the storyboard after it had completed. I wasn't sure if the event listener would work (if mouseEnter storyboard fades target to end value, wouldn't that trigger a complete?). Surprisingly though, it actually works quite well.



XAML

<>Canvas xmlns="http://schemas.microsoft.com/client/2007"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="150"
 Background="#FF666666" x:Name="Page" Loaded="onLoaded" <>
 <>Path Width="63" Height="52" Fill="#FFFF8B00" Stretch="Fill" Canvas.Left="20.794" Canvas.Top="29.663" Data="M56.487645,98 L74.805883,83.663793 92.204852,97.5 89,97.5 89,113.2481 60.029416,113.2481 60.029416,98 z" x:Name="home" Cursor="Hand"
MouseLeave="fadeMeIn" MouseEnter="fadeMeOut"/<>
 <>Path Width="63" Height="52" Fill="#FFFF8B00" Stretch="Fill" Canvas.Left="112.794" Canvas.Top="29.663" Data="M56.487645,98 L74.805883,83.663793 92.204852,97.5 89,97.5 89,113.2481 60.029416,113.2481 60.029416,98 z" x:Name="home2" Cursor="Hand"
  MouseLeave="fadeMeIn" MouseEnter="fadeMeOut"/<>
<>/Canvas<>

Javascript

function onLoaded(s) 
{
 root=s.findName("Page"); 
 plugin = s.getHost();
}
function fadeMeOut(sender, mouseEventArgs)
{
 var sName = makeName(sender);
 var sTo = "0.3";
 var sFrom = "1.0";
 var sTarget = sender.Name;
 var fader = makeStoryBoard(sName, sFrom, sTo, sTarget);
 sender.findName('rCount').Text = 'Number of Storyboards: '+root.Resources.Count.toString();
 fader.begin();
 fader.AddEventListener("Completed", "removeStoryBoard")
}
function fadeMeIn(sender, mouseEventArgs)
{
 var sName = makeName(sender);
 var sTo = 1;
 var sFrom = sender.opacity;
 var sTarget = sender.Name;
 var fader = makeStoryBoard(sName, sFrom, sTo, sTarget);
 fader.begin();
 fader.AddEventListener("Completed", "removeStoryBoard")
}
function makeName(sender)
{
 var sBi= 1;
 do
 {
  var tempName = (sender.Name+'_sb_'+sBi);
  var sBtrue = sender.findName(tempName);
  sBi++;
 }
 while (sender.findName(tempName) != null)
 return tempName;
}
function removeStoryBoard(targetBoard)
{
 root.Resources.remove(targetBoard);
}

function makeStoryBoard(sName, sFrom, sTo, sTarget)
{
 var xamlFragment = '<>Storyboard xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="'+sName+'"<>' +
 '<>DoubleAnimation Storyboard.TargetName="'+sTarget+'" ' +
 'Storyboard.TargetProperty="(Opacity)" ' +
 'From="'+sFrom+'" To="'+sTo+'" Duration="0:00:00.3" AutoReverse="False" /<>' +
 '<>/Storyboard<>';
 
 var myStoryBoard = plugin.content.createFromXaml(xamlFragment);
    root.Resources.Add(myStoryBoard);
 
 return myStoryBoard;
}

Does anyone have a better way to achieve this result?

silverlight experiment: fading

I recently posted something about my attempts to fade an object in Microsoft Silverlight. I have succeeded, sort of. It's not quite complete yet because i have the storyboard names hard coded. Ideally, these would be unique each time, so that they don't conflict. That will have to wait for the next post though.


FYI, don't rollover/rolloff too quickly or you will receive an error and have to reload the page =(. This is one of the problems with hard coding the Storyboard name.

The xaml

<<>Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="#FF949494"
x:Name="Page" Loaded="onLoaded"
<>>
<<>Rectangle
Width="56"
Height="49"
Stroke="#FF9B9B9B"
Canvas.Left="71"
Canvas.Top="82"
x:Name="YellowSquare"
Cursor="Hand"
MouseLeave="fadeMeIn"
MouseEnter="fadeMeOut"
Fill="#FFE0D709"
StrokeThickness="6"/<>>

<<>/Canvas<>>
<<>/pre<>>


The Javascript
function onLoaded(s)
{
root=s.findName("Page");
plugin = s.getHost();
}
function fadeMeOut(sender, mouseEventArgs)
{
var sName = "fader4";
var sTo = "0.3";
var sFrom = "1.0";
var sTarget = sender.Name;
var fader = makeStoryBoard(sName, sFrom, sTo, sTarget);

fader.begin();
}
function fadeMeIn(sender, mouseEventArgs)
{
var storBor = sender.findName("fader4");
storBor.pause();

var sName = "fader3";
var sTo = 1;
var sFrom = sender.opacity;
var sTarget = sender.Name;
var fader = makeStoryBoard(sName, sFrom, sTo, sTarget);

removeStoryBoard(storBor)
fader.begin();
fader.AddEventListener("Completed", "removeStoryBoard")
}

function removeStoryBoard(targetBoard)
{
root.Resources.remove(targetBoard);
}

function makeStoryBoard(sName, sFrom, sTo, sTarget)
{
var xamlFragment = '<>storyboard x="http://schemas.microsoft.com/winfx/2006/xaml" name="'+sName+'"<>' +
'<>doubleanimation targetname="'+sTarget+'" targetproperty="(Opacity)" from="'+sFrom+'" to="'+sTo+'" duration="0:00:00.3" autoreverse="False"<>' +
'<>/doubleanimation<>';

var myStoryBoard = plugin.content.createFromXaml(xamlFragment);
 root.Resources.Add(myStoryBoard);

return myStoryBoard;
}

Smashup: Blend 2 vs Flash

I've been dutifully attempting to learn Microsoft Blend 2. I have a few gripes so far.

I am not a programmer. I often wish I was. While immersion techniques work well for learning things, it can be quite the learning curve. I really do think programmatic approaches are usually more flexible and can be easier to control, but c'mon Microsoft! give me a little break here!

Example you say! Ok, says I: Fading

flash
mc.onRollOver = function(){
--- mc.onEnterFrame = function (){
------- if(mc.alpha >= 20){
----------- mc.alpha -= 10;
------- }
--- }
}

blend 2
I am actually not sure how you go about this... I have found that you can't invoke a loop and use setTimeout or setInterval to achieve it (common and pre-existing methods to achieve this with javascript). It appears that you have to use a "storyboard". Storyboards are a method to animate things.

My understanding at this point is that there are three ways to go about this:

Non-programmatic. You can set up unique storyboards for each object you want to fade in blend itself. Imagine that you want to fade a button as you hover over it, each button will need it's own Storyboard (time line based transition). Not efficient use of my time or of the technology.

Semi-programmatic. Have several predefined duplicate storyboards that have the storyboard target dynamically modified with javascript. Why several of the same thing? Silverlight can only have one instance of a storyboard running at a time. So if you want multiple fading elements, you will have to have x number of storyboards that you switch back & forth between when they aren't in use. Kind of a hassle!

Programmatic. Dynamically create storyboards on demand and insert them into your xaml code structure. This approach is most flexible but I haven't gotten it to work yet. I find this method as annoying as the rest because, rather than just needing to manage my javascript fade code, I also need to create xaml, insert it into the document structure, and then remove it when I'm done. Way more complicated than what I did with flash.

I am left feeling like microsoft wants me to be a programmer. Or at least have one on speed dial. While I really enjoy learning programming, there is a point when it gets kind of ridiculous just to do something simple like an opacity fade.

Why so many hoops? Maybe someone can explain why their way is better?

first take: Microsoft Blend 2

A few observations about getting started with Blend 2.

Installation. A Little painful. First off, you need windows, so osx users unless your mac has windows on it, you are out of luck. Since I'm still running Win XP I needed to install the .NET 3.0 framework. This actually went pretty well. The Blend installation was smooth too. It took a long time to reboot, very long time, I actually rebooted 4-5 times because I thought the machine had locked up.


First Launch. I was impressed with the small minimal splash screen and smooth charcoal grey interface. Despite some minor areas where it seemed like they neglected to completely skin the os interface, this is definitely not something I expected to see with a Microsoft application. I also found the welcome screen to be attractive and smoothly interactive. I loaded and tested a few of the sample projects. The samples were fairly impressive, similar to lots of different flash apps that I've seen, but it was nice to see that comparable solutions were possible. I poked around in one or two of the sample files, just to see how it was done, and found myself quickly lost and confused. Having used Adobe & Macromedia applications for many years, I was probably expecting similarities to Flash, but from some basic exploration, Blend 2's method for building projects is closer to Dreamweaver than Flash.

Similar to Dreamweaver, you have "Design" & "Code" panes and you have a lot more external files that you need to manage than with flash. The code that you work is called "xaml" with is also more like html or xml than actionscript or javascript.

That's it for now, my next trick will be to attempt a little project of my own.