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?