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: Happy Halloween

Quick little Halloween greeting done using Microsoft Expression Blend 2 (September preview) and the opacity fade method I covered last post. It actually wasn't that quick, I had to redraw this several times (always ctl + save! alot). The problem seems to come from complex polygons & bezier curves. At least, that is when it would crash on me!



Anyway, happy halloween.

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?

Silverlight and Blend

You may have heard about this new product from Microsoft called Silverlight. Silverlight is a cross platform (or soon to be cross platform) media plug-in. Similar to adobe Flash player, this technology can be used to deliver HD video, rich user experiences, and all around good ol' slick sex appeal right in your audiences very own browser. Microsoft Expression Blend is an application that allows you to build content for Silverlight.

Ok, great. Why do I care?

Resume Gold. If a designer seriously plans on looking for a job with anything to do with software or the web, they should consider getting their hands dirty with stuff ASAP. It won't necessarily get you the job, but it will really make you stand out. Not many people have much experience with it but lots of companies are looking for people who do. Need more reasons?

It's not flash. The more technical folks will appreciate the fact that complete experiences can be created with Javascript. That's right, Javascript! The same cool language that you use for your neat css, dhtml widgets can be used with this. Now you don't need to have another language with its own unique syntax and issues floating around in your head.

Competition is good for us; the designers, consumers, computer users. Hopefully, this will drive both companies to continue to innovate in the area of rich interaction tools marketed toward the design crowd. Innovation is good!

Efficiency is the key to a profitable business. Blend is an application that tries to shorten the development time involved in creating the awesome user experiences we strive for. Design the actual interface & elements, hand this very same file off to the developer to add the mechanical bits. Viola, you no longer need countless emails to the dev team that they didn't recreate your design exactly to spec.

If you want to experience this product yourself, you can download a free demo here.