The MossyBlog Times Archives 2007 - 2009 : Animation

Silverlight: VisualState Manager, Storyboards and why designers should care about them both.

scbarnes — Mon, 30 Jun 2008 09:50:18 GMT

I've seen a lot of talk around VisualState Manager online and it mostly covers button states and so on. What I want to do here in this post is illustrate why VisualState Manager is a handy tool for the average interactive designer out there and how it can kind of short-cut a lot of animation transition logic automatically for you.

You can make your own States.

In Silverlight via Expression Blend you will have the ability to make your own VisualStates. In my case I have a Menu that when a button is clicked it fly's down. Once clicked again, it fly's back up.

First things first, I setup a basic wire-frame UI (always prototype people!) in which I have an outer-chrome and underneath it, I have a Green rectangle which represents the "menu".

Closed:

Opened:

That's the intent anyway.

Inside Expression Blend, on the Far left you should see this:

This is the area where you can add your own VisualStates. In this case, if you click on the icon, you will get "Add State Group", which should automatically add a StateGroup for you.

New StateGroup added.

Now, notice the 0s next to the StateGroup Label (You can change the Label if you want by the way to suite a more appealing name). The 0s input is essentially the total duration of time it will take to go between each state housed within this group. It's currently at 0s which means that there will be no animated transition between states. To enable an animation between states, bump this up to more than 0, (0.5seconds will be great starting point, as anything lower and it's hard to visually gauge the transition).

At this point, go ahead and Add two States via the menu (+ meaning add, - meaning remove).

You should end up with the following:

Setting up the States.

At this point, go ahead and rename the State and State1 to PullDown and PullUp.

Click on PullDown's state.

If you are familiar with the way StoryBoards work inside Expression Blend, then you will notice that the timelines per state can exist (by default they aren't added until you add them via clicking on the icon). This is called "in-state animation".

This is quite a powerful, as basically we've provided you the ability to add your own amount of animation per state. In this case, I've made my Green Rectangle fly down from 0y to 130y within the PullDown in-state animation.

I've made the duration for the animation around 2seconds which in this case means that although my animation for that state is expected to run for 2 seconds it won't (well not quite like that)

Why won't it?

The 0.5s here will add to the overall actual animation. As the way VisualStateManager works is that it will take 0.5s to go from PullUp state to PullDown state. Once the transition has completed, it will then play the 2second animation.

In total, your entire transition will take 2.5 seconds. Important thing to note here, is that should you want it to take 2seconds you just make the actual StateGroup (NxsRibbonMenuState) 0s.

The reason I would opt for a 0s Duration is that this allows you to attach your own easing (in/out) sequence per state, whilst allowing you to have a multi-step animation (meaning the animation can play different effects per tick on the Timeline).

This could also be done simply using a basic Storyboarding approach, but you don't get the flexibility of accessing the VisualStateManager via code-behind and you also have to write your own reverse routines should the user wish to interrupt the sequence of animation.

Why use States for Animations then?

In my case I wanted to enable a Menu to come down and up when the user clicks on a button. I also want it to also allow the user to change their minds and reverse the animation should they click the button half way.

VisualState Manager's can provide a great way to achieve this, as in my Button's Click handler, I simply tell it which state to go to and the rest automatically takes care of itself.

What does that mean though? say you've clicked on PullDown and the animation of PullDown state is half-way through (meaning 1sec into the animation). If you then trigger the state change to PullUp, VisualStateManager will automatically figure out how to transition all properties adjusted whilst in PullDown State back to PullUp state, automatically.

Note: When I say automatically (it's half true) what really happens is that Blend will create some storyboards within the VisualState tags. This is done at design-time but at run-time it essentially is automated in terms of figuring out how to go from AS-IS to a TO-BE.

Pretty powerful yes?

Here's some code to illustrate how you switch between states.

   1:  public partial class NxsRibbon : UserControl

   2:  {

   3:      public NxsRibbon()

   4:      {

   5:          InitializeComponent();

   6:          CURRENT_STATE = "PullDown";

   7:          VisualStateManager.GoToState(this, CURRENT_STATE, true);

   8:          this.btnTest.Click += new RoutedEventHandler(onButtonTestClick);

   9:      }

10:

  11:      public string CURRENT_STATE;

  12:      void onButtonTestClick(object sender, RoutedEventArgs e) {

13:

  14:          switch (CURRENT_STATE)

  15:          {

  16:              case "PullDown":

  17:                  CURRENT_STATE = "PullUp";

  18:                  break;

19:

  20:              default:

  21:                  CURRENT_STATE = "PullDown";

  22:                  break;

  23:          }

  24:          VisualStateManager.GoToState(this, CURRENT_STATE, true);

  25:      }

  26:  }

VisualState Manager is quite a powerful feature within Silverlight and Expression Blend. You just have to treat it with care, and keep your eye on the durations as the StateGroup will always win the fight.

Silverlight Experiment: Create a PullDown Menu using Storyboards.

scbarnes — Sun, 29 Jun 2008 07:09:59 GMT

This is a basic example of how to create a "PullDown Menu" using Silverlight and Expression Blend.

The Objectives

The GUI will have a PullDown Menu (UserControl) under the main outer chrome. It's intended that when a user clicks on the "MainMenu" it will not only change state, but animate down or up (depending on the previous state it was resting in - default being Up).
The End User will need to have the ability to interrupt the animation should they decide to cancel the action, as a result the menu will react to the End User's intended action and reflect the direction change as well as state change.

The Expected Outcome.

The Blueprints.

1x OuterChrome Control
- 1x TopLeft Corner Bitmap (Static)
- 1x Top Bitmap (Stretch Horizontally)
- 1x Left Bitmap (Stretch Vertically)
1x PullDownMenu Container
- 1x InnerMenu Control (NxsRibbon)
- 1x LowerBar Bitmap (Static)
- 1x PullDown Tab Bitmap (Static)
- 1x PullUp Tab Bitmap (static)

The Process

Create the the WireFrames.

Create a UserControl in Blend, call it NxsApplication.xaml (this will be your base)
1. Change its Metrics to be 1000px, 760px.
2. Change the NxsApplication.LayoutRoot from Grid to Canvas (as you want things to freely float).
  
  NxsApplication.xaml
```
   1:  <UserControl x:Class="RCIA.Containers.NxsApplication"
```
```
   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
```
```
   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
```
```
   4:      Width="1000" Height="760">
```
```
   5:      <Canvas x:Name="LayoutRoot">
```
```
   6:          <Canvas.Background>
```
```
   7:              <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
```
```
   8:                  <GradientStop Color="#FF000000"/>
```
```
   9:                  <GradientStop Color="#FF131313" Offset="1"/>
```
```
  10:              </LinearGradientBrush>
```
```
  11:          </Canvas.Background>
```
```
  12:      </Canvas>
```
```
  13:  </UserControl>
```

Create a UserControl in Blend, call it NxsShell.xaml (this will be your Chrome)

Keep NxsShell.LayoutRoot type as Grid.

Inside NxShell, define the Grid Definition as having the below (you basically want to use the Grid to help you scale-9 the overall assets).

NxsShell.xaml

   1:  <UserControl x:Class="RCIA.Controls.NxsShell"

   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

   5:      <Grid x:Name="LayoutRoot">

   6:          <Grid.RowDefinitions>

   7:              <RowDefinition Height="30"/>

   8:              <RowDefinition Height="*"/>

   9:          </Grid.RowDefinitions>

  10:          <Grid.ColumnDefinitions>

  11:              <ColumnDefinition Width="30"/>

  12:              <ColumnDefinition Width="*"/>

  13:              <ColumnDefinition Width="30"/>

  14:          </Grid.ColumnDefinitions>

  15:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Fill="#FFFE0000"/>

  16:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Column="1" Fill="#FF213986" Grid.ColumnSpan="1"/>

  17:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Row="1" Fill="#FFA42020"/>

  18:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Column="2" Fill="#FF0943FF"/>

  19:      </Grid>

  20:  </UserControl>

Create a UserControl in Blend, call it NxsRibbon.xaml (this will be the container you place your ribbon into).

NxsRibbon.xaml

   1:  <UserControl x:Class="RCIA.Controls.NxsRibbon"

   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="1000" Height="180" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

   5:      <UserControl.Resources>

   6:          <Storyboard x:Name="PullDown">

   7:              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

   8:                  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="130">

   9:                      <SplineDoubleKeyFrame.KeySpline>

  10:                          <KeySpline ControlPoint1="0,0" ControlPoint2="0,1"/>

  11:                      </SplineDoubleKeyFrame.KeySpline>

  12:                  </SplineDoubleKeyFrame>

  13:              </DoubleAnimationUsingKeyFrames>

  14:          </Storyboard>

  15:          <Storyboard x:Name="PullUp">

  16:              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

  17:                  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0">

  18:                      <SplineDoubleKeyFrame.KeySpline>

  19:                          <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>

  20:                      </SplineDoubleKeyFrame.KeySpline>

  21:                  </SplineDoubleKeyFrame>

  22:              </DoubleAnimationUsingKeyFrames>

  23:          </Storyboard>

  24:      </UserControl.Resources>

25:

  26:      <Canvas x:Name="LayoutRoot" Background="#FF0D0D0D">

27:

  28:          <Rectangle Height="160" Width="962" Canvas.Left="30" Canvas.Top="-115" Fill="#FF35E50C" Stroke="#FF000000" x:Name="rectangle">

  29:              <Rectangle.RenderTransform>

  30:                  <TransformGroup>

  31:                      <ScaleTransform/>

  32:                      <SkewTransform/>

  33:                      <RotateTransform/>

  34:                      <TranslateTransform/>

  35:                  </TransformGroup>

  36:              </Rectangle.RenderTransform>

  37:          </Rectangle>

  38:          <Button Height="23" Width="81" Canvas.Left="911" Canvas.Top="149" Content="Open..." x:Name="btnTest"/>

  39:      </Canvas>

  40:  </UserControl>

Inside NxsRibbon.LayoutRoot, create a rectangle and a button.
Name the button "btnTest".

In NxsAplication instantiate the GUI assets.

In NxsApplication.xaml.cs instantiate NxsRibbonMenu UserControl. As this will ensure it has the lowest z index.

In NxsApplication.xaml.cs instantiate NxsShell UserControl. As this will ensure it has the highest z index.

NxsApplication.xaml.cs

   1:      public partial class NxsApplication : UserControl

   2:      {

   3:          public NxsShell NXS_SHELL;

   4:          public NxsRibbon NXS_RIBBON;

5:

   6:          public NxsApplication()

   7:          {

   8:              InitializeComponent();

9:

  10:              // Add the Nexus Ribbon

  11:              NXS_RIBBON = new NxsRibbon();

  12:              this.LayoutRoot.Children.Add(NXS_RIBBON);

13:

  14:              // Add in the Nexus Chrome.

  15:              NXS_SHELL = new NxsShell();

  16:              NXS_SHELL.Width = Width;

  17:              NXS_SHELL.Height = Height;

  18:              this.LayoutRoot.Children.Add(NXS_SHELL);

  19:          }

  20:      }

In NxsRibbon.xaml.cs register the btnTest to initiate the PullDown and PullUp Animations.

In NxsRibbon.xaml.cs register the Animation state to ensure that if the user wishes to interrupt either the PullDown/PullUp animations that they react in a way that halts the current storyboard, switches to the opposite storyboard and then continues to play.

NxsRibbon.xaml.cs

   1:     public partial class NxsRibbon : UserControl

   2:      {

   3:          Boolean CURRENT_PULLDOWN_STATE;

   4:          Boolean IN_MOTION;

5:

   6:          public NxsRibbon()

   7:          {

   8:              InitializeComponent();

   9:              this.btnTest.Click += new RoutedEventHandler(onButtonTestClick);

  10:              this.PullDown.Completed += new EventHandler(PullDown_Completed);

  11:              this.PullUp.Completed += new EventHandler(PullUp_Completed);

12:

  13:              CURRENT_PULLDOWN_STATE = false;

  14:              IN_MOTION = false;

  15:          }

16:

  17:          void PullUp_Completed(object sender, EventArgs e)

  18:          {

  19:              CURRENT_PULLDOWN_STATE = false;

  20:              IN_MOTION = false;

  21:          }

22:

23:

  24:          void PullDown_Completed(object sender, EventArgs e)

  25:          {

  26:              CURRENT_PULLDOWN_STATE = true;

  27:              IN_MOTION = false;

  28:          }

29:

30:

  31:          void onButtonTestClick(object sender, RoutedEventArgs e) {

32:

  33:              if (IN_MOTION)

  34:              {

  35:                  if (!CURRENT_PULLDOWN_STATE)

  36:                  {

  37:                      IN_MOTION = true;

  38:                      CURRENT_PULLDOWN_STATE = true;

  39:                      PullDown.Pause();

  40:                      PullUp.SeekAlignedToLastTick(PullDown.GetCurrentTime());

  41:                      PullUp.Begin();

  42:                  }

  43:                  else

  44:                  {

  45:                      IN_MOTION = true;

  46:                      CURRENT_PULLDOWN_STATE = false;

  47:                      PullUp.Pause();

  48:                      PullDown.SeekAlignedToLastTick(PullUp.GetCurrentTime());

  49:                      PullDown.Begin();

  50:                  }

  51:                  return;

  52:              }

53:

  54:              if (!CURRENT_PULLDOWN_STATE)

  55:              {

  56:                  IN_MOTION = true;

  57:                  PullDown.Begin();

  58:              }

  59:              else

  60:              {

  61:                  IN_MOTION = true;

  62:                  PullUp.Begin();

  63:              }

  64:          }

  65:      }

The Conclusion

I found that it was faster to create the initial StoryBoard for PullDown. Once I was happy with the way it animated in/out, I then Duplicated the StoryBoard (via this ). I renamed the PullDown_Copy to PullUp and under the same icon () I "Reversed" it. This basically figured out how to revert the various properties that are being changed to the appropriate state.
Keeping track of the IN_MOTION and CURRENT_PULLDOWN_STATE was relatively easy, and although I have a few ideas on how we can improve this concept going forward, it's pretty trivial to setup.
Adjusting the animation Easing via the KeySpline editor can attract various results on both Up/Down. It pays to think more about how this will affect the End User firstly, but also the fundamental question you will need to answer going forward "Is this going to annoy them?" if the answer is yes, look to shorten the animation duration or adjust the Easing.

The Outcome.

This took me less then 30mins to complete. You will also note that I used only basic elements found within XAML to setup the wire frames. I did this as this illustrates that an Interactive Persona can setup the various pieces required to ensure the animation and basic events are ready for the next step in the workflow.

This means that you could have someone sitting designing the textures and detailed composition of the artwork in their nominated Art Tool. At the same time you could have an Engineer writing the actual NxsRibbonMenu so that it mimics the Office Ribbon concept.

Once all three have completed their individual contribution to the GUI, they are then able to meet for a "Happy meeting" where they basically look at how they are going integrate the pieces into the GUI.

In this case, the Interactive Persona is able to swap out the rectangle placeholders and apply specific bitmap textures or whatever it is that is required to execute on the visual finish.

Once that's completed, the same persona is also then able to swap out the dummy NxsRibbonMenu place holder and implant the real Control, with it's own black boxed composition.

This could highlight that using Expression Blend, Visual Studio and Silverlight that three individual personas are quite able to build, design and animate independent of one another. It does however also indicate that there needs to be a Interactive Architect in the room to ensure all the various placeholders and external pieces fit into their respective places within the overall Application composition.

Special Notes

Nexus is a home grown Silverlight framework being written by a few friends / co-workers of mine (we decided to collaborate on an idea to test some best practices out). This framework isn't likely to be publicly available but should it do so, I'll let you folks know at that appropriate point in time.
All visual assets are copyright to me. Basically if I see you stealing my art, I'll hunt you down as don't be that guy/gal whom does that. Ask though should you wish to use it, as I'm pretty open.
This was fun and that's what this whole RIA conversation is about, having fun.

POC #1 - Project Harmony (pt1) (Silverlight & Flash)

scbarnes — Thu, 15 Nov 2007 11:18:00 GMT

I've been enjoying the overall experience of what Silverlight has to offer since I started with Microsoft back in January 07. That being said, I've often been an internal "goto" person at times for some Flash advice on behalf of Microsoft customers around the world.

In light of this, recently I also encountered a situation where a customer was looking to use both Silverlight and Flash together, something which I kind of gave a confused look at? (ie .. not because I wanted them to pick ours etc, but more to the point what was the root of the problem).

The problem was simply that they had deadline to meet, they wanted to retain the video in Windows Media format but were looking to use the GUI inside Flash as a base. Fair enough, this isn't a Zero Sum Game and we play well with others.

This isn't the first I've seen similar stories around this, but mostly its from Design shops around the world whom are keen to embrace Silverlight and Flash (fingers in both barrels) but are kind of skittish to start with (i.e. the assumption is really you have to pick a team, red vs blue).

Thus, I decided to put together this proof of concept, titled "Harmony". The project is quite extensive and I'll spend the next month dissecting it and talking about different cross-sections of how you as a designer & developer are able to produce compelling enriching experiences with Silverlight and that you can execute on your creative vision. The rest is simply semantics and bits/bolts.

In this first iteration of my Project "Harmony" I wanted to test to see how well the performance would be in the event one was to use 90% Silverlight and 10% flash. In that overlay Flash on top of Silverlight and see what happens.

The results speak for themselves, suffice to say that I really put in a lot of gratuitous animations in Silverlight to really try and break the performance overall.

You can view for yourself here:

http://www.demo.members.winisp.net/poc1/

(Note: Link Requires Silverlight 1.1 and Flash 9.x)

My Objectives for this first iteration was:

Objectives (v1.0)

Determine to see if Flash (Transparent windowless) degrades in performance in the event it sits on top of Silverlight.
Determine if PNG overlays impact the performance of the video whilst mixed with Flash.

Conclusion (v1.0)

I did see some performance degrading on both technologies, but that is mostly due to both making use of alpha transparency (I'm yet to meet a runtime of any brand that can withstand alpha transparency)
Working inside Flash & then crossing over to Visual Studio / Expression Blend is not for the feint hearted (I kept tripping up in C# vs AS3.0 scripting syntax hooks hehe - nothing against both technologies but its more of a mind map thing).

Highlights (v1.0)

Using PNG's a designer is capable of doing some interesting things to a graphical interface. In this case used a bullet that appears to not only be embedded into the TV Screen but also shatters it.

I also added the "bullets" in the top right corner as PNG overlay to also test how 2xOverlays inside the Video would perform.
Using Video Reflection within Silverlight, one is able to really bring home a gloss finish by giving it a "glass" effect (as we all know there isn't enough glass effects online
Using an infinite loop within Silverlight, I was able to create a "ambiance" feel to the UI by making two sets of images fade in/out underneath the Flash area and the Silverlight Video. This again, was to really see how the performance would go with a Silverlight animation underneath Flash.

Using Adobe Photoshop for the bitmap artwork, I stumbled upon a technique whereby if you take a photo, duplicate its layer and then apply "gussian blur" with 50% transparency it kind of gives this glow/ambiance effect commonly seen in most games today.

Silverlight (Video aside of course) handles its progressive loading of assets in a unique way, I'm yet to put my finger on it but I must look into this more as I expected the GUI to take much longer to load (as there aren't any preloaders in this design).
The Flash Slider (ie works like iTunes) was done reasonably quickly, and the code has already been ported to Silverlight suffice to say, it looks seamlessly integrated within the GUI and unless you don't have Silverlight or Flash installed, it would argueably be forgiven as being part of one technology not 2.

It's a small experiment at first, mainly to test the waters and see what holds together initially.

The walk away message here is simple, this isn't a Zero Sum Game firstly and I want to stress that the most. The other impact is that if you're keen to try Silverlight but aren't quite ready for that big leap, it's ok you can use both without penalties implied.

The last but most important of all, is prove your concepts initially. In that if you're looking to switch from using Flash (for whatever reason) and aren't bold enough to do the lock stock and barrel or aren't allowed to, that's ok. Establish some objectives initially, build a Proof of Concept (POC) and chip away at the idea, as you will no doubt learn both technologies limitations faster than any book can really teach you.

The secret of a truly successful RIA in my opinion is knowing the technologies limitations.

The next POC (pt2) I'll talk more about the JavaScript Bridge and how I was able to make the Thumbnail Slide load up the Video Playlist etc. I'm also putting together some Video Casts on not only how I made this but also will upload the code once I get it locked into Codeplex.com (open source). All code & design is hand-made by myself only.

(NOTE: This is a crude, raw POC and progress bars etc for both technologies aren't important for this initial purpose. They are coming, and I'll talk more about that later. Again, this is a POC so don't lock this down as some end to end final production grade solution).

(NOTE: I used Teamfortress 2 Artwork, because it's my favorite game at the moment, I have personal history with it and well, the Soldier video is by far the funniest game trailer I've seen in quite some time. Valve Software are legends in my book - My Steam ID is "[te] Skittlez")

Next: The "HOW" (Code Dump / VideoCast).

Related Post: Writing Proof of Concept RIA's

Silverlight: Keep it simple stupid.

scbarnes — Mon, 22 Oct 2007 16:00:02 GMT

A while back I posted about how I used our AJAX Control Toolkit to animate with Silverlight. I stated that the end reason for this approach was simply due to lack of animation capabilities within Silverlight 1.0.

Michael Scherotter being the brilliant Silverlight coder, decided to prove that theory wrong (heh - not so much, probably more to acid test my b.s factor). He came back with an approach that was simple and yet humiliating (for me) at the same time (I'm so embarrassed).

 1:  void Handle_MouseLeftButtonDown(object sender, System.Windows.Input.MouseEventArgs e)

 2:  {

 3:  switch (m_state)

 4:  {

 5:  case ShadeState.down:

 6:  m_state = ShadeState.goingUp;

 7:  UpHandleStart.Value = m_upHandleStart;

 8:  UpShadeStart.Value = m_upShadeStart;

 9:  Up.SpeedRatio = 1.0;

 10:  Up.Seek(new TimeSpan(0));

 11:  Up.Begin();

 12:  break;

13:

 14:  case ShadeState.goingDown:

 15:  m_state = ShadeState.goingUp;

 16:  Down.Pause();

 17:  UpHandleStart.Value = HandleTranslation.Y;

 18:  UpShadeStart.Value = Shade.Height;

 19:  Up.SpeedRatio = 2.0;

 20:  Up.Begin();

 21:  break;

22:

 23:  case ShadeState.goingUp:

 24:  m_state = ShadeState.goingDown;

 25:  Up.Pause();

 26:  DownHandleStart.Value = HandleTranslation.Y;

 27:  DownShadeStart.Value = Shade.Height;

 28:  Down.SpeedRatio = 2.0;

 29:  Down.Begin();

 30:  break;

31:

 32:  case ShadeState.up:

 33:  m_state = ShadeState.goingDown;

 34:  DownHandleStart.Value = m_downHandleStart;

 35:  DownShadeStart.Value = m_downShadeStart;

 36:  Down.Seek(new TimeSpan(0));

 37:  Down.SpeedRatio = 1.0;

 38:  Down.Begin();

 39:  break;

 40:  }

Essentially what he's done is wire up the animation(s) to mouse events (i.e. when the user clicks, make sure you fire this methods). He's then put together 4 states so to speak and based on where things in time are at, he adjusts and forces the animation to react accordingly.

Simple!

This problem reminds me of a game I once wrote in Flash. It was a XMAS game where Santa would kick presents into chimneys based on where the power bar was at (i.e. user needs to guess the right amount of power). I wrote the game in such a way that it used gravity, physics etc and took forever. It took a Flash Designer on my team to show me that all that was need was a few motion paths and when the power bar got within certain ranges, it would fire off the right animation path (ie 50-60% meant gotoAndPlay(3)).

Amazing how one can write 115 lines of code for "Hello World" when all you need is 2 lines.

How To: Using AjaxControlToolkit to animate Silverlight.

scbarnes — Wed, 03 Oct 2007 10:47:50 GMT

In my Silverlight travels, I was thinking on how one is able to animate a "PullDown" menu, in that it comes down and then goes back up upon triggered events.

Approach A.

I decided to approach this using simplistic rules, where I'd create two animations inside Expression Blend using the KeyFrame Recorder. I'd simply move the "Canvas" in question to where I want it to rest, and then within a 1 second interval, animate it upwards. I'd call this "PLMoveUp". I'd then take the exact concept and reverse it through a separate KeyFrame Resource (KeyFrame Resources are basically XAML code that await you to trigger their animation sequence via play/stop methods) called "PLMoveDown".

This works, don't get me wrong, but sadly this approach is flawed. As how do you know where the current phase in the Storyboard is at? there aren't any "onStoryBoardStep" style events to subscribe to, resulting in "assuming" the animations end naturally. This means that if a user were to click on a button repeatedly you'd kind of get this flicker look (bad experience).

Approach B.

Instead of having two Canvas.Resource Storyboards, you consolidate into one. Then using the Silverlight API, you would utilse the power of Storyboard.AutoReverse and Storyboard.Seek(amt).

This works, but again, you've got to do a lot of work to poll where the animation is at, and that requires an outside "timer". In that in order to poll the current point in time of an animation, you'd create a "timer" that would constantly ping/pong the Storyboard for an update. Yet you'd need to further assign an x:Name attribute to one of the SplineDoubleKeyFrames for this as well, as you'll want to extract the KeyTime.Seconds amount in order to determine what the latest value is currently sitting at.

Overall, bad.

Approach C.

Using the ASP.NET AjaxControlToolkit, I was able to leverage the existing animation libraries to do my bidding for me.

First I created a project using the ASP.NET AJAX Futures Web application (.NET Framework 3.5) template.

I then added a Project to this Solution, using the JavaScript Silverlight Project (I'm not going to use the managed code (C#) approach to Silverlight, instead I'm choosing to use JavaScript + Silverlight).

I setup my GUI assets, using Microsoft Expression Blend. Positioned them to where I want them, and began then saved the project.

Then inside Visual Studio 2008, I added a "Add Silverlight Link.." via the Solution Explorer. Connected the two together.

Now, I must confess it's at this point where I had to figure out how to bring in the AjaxControlToolkit. As I've never really had a need to use it up until today. I downloaded the 3.5 Framework version of it and installed it (Basically follow the Install Videos to the letter and you should be fine).

Now comes the code.

 1:  <!-- -----------------------------------------------------------------------------------

 2:  SILVERLIGHT CONTROL

 3:  ----------------------------------------------------------------------------------- -->

 4:  <div class="SilverlightHost">

 5:  <asp:Xaml XamlUrl="~/Page.xaml" runat="server" ID="SilverlightControl" Windowless="true"

 6:  Width="1000" Height="750" />

 7:  </div>

Using the Xaml tag, i created a pointer to my Page.xaml file (which has my assets housed within). Note the name "SilverlightControl" (important).

In my UI I have a PullDownMenu, which I want to now animate up and down.

Now comes the code:

 1:  <script type="text/javascript">

 2:  Sys.Application.add_init(appInitHandler);

 3:  function appInitHandler() {

 4:  }

5:

 6:  // Silverlight is Ready, now proceed...

 7:  function appOnLoad() {

 8:  //$create(Demo.Person,null,null,null,null);

 9:  var animator = new AjaxControlToolkit.Animation.FadeAnimation($get("Overlay"), 0.5, 20, "FadeOut");

 10:  var customanim = new AjaxControlToolkit.Animation.ScriptAction("overlay", 0.5, 40, null);

 11:  animator.play();

 12:  customanim.onStep = onCustomStep;

 13:  customanim.play();

 14:  }

15:

 16:  // Custom Animation Sequence

 17:  function onCustomStep(percentage) {

 18:  var o = $get("SilverlightControl").content.FindName("pulldown");

 19:  var amt = Math.round(456*percentage/100);

 20:  o.SetValue("Canvas.Top", amt + -456);

 21:  }

 22:  </script>

It's that Simple! I also had a <DIV> tag called "overlay" which represents a screenout overaly.

I need my hosting provider on http://www.beyondTheBrowser.NET to move me over to the .NET 3.5 hosting plan in order to show you, but essentially using the AjaxControlToolkit.Animation.ScriptAction library, I'm able to empower it to control the Silverlight Animation sequence.

If you're confused? don't worry, I'll be videocasting this later this month.

Adobe vs Microsoft, the comic.

scbarnes — Wed, 05 Sep 2007 15:29:34 GMT

I'm always amused online when I see the usual Adobe vs Microsoft rant, it always ends up in someone fighting with the author or rogue commenter's shooting shots from the side, echoing the same points.

There is hope though in this battle royale, as you see there is a company that I'll happily evangelize anytime they ask, and they are called Nectarine. Nectarine are famous in the Adobe circles, as these guys not only know their skills around some of the products, but they are hands down the most down to earth people I've met and what annoys me more, is they have talent in the area of animation.

Their latest work was done for WebOnThePiste.com (WOTP) a conference I attended couple of weeks ago in New Zealand, where they did the keynote introductions. You can watch them over on the WOTP site.

If I were to explain their cartoons, I'd say it's 1-part Geek, 1-Part Passion, 1-Part Fawlty towers, 2-Parts Monty Python and 3-Parts Madness (can't do the math on that, but suffice to say, funny).

I want these guys to do a comic strip / animation, to sit back and take the sting out of all the online politics and simply make us all laugh at how silly the brand wars can be. I proposed such idea to Minty@Nectarine and I think he's onboard.. but.. I want all readers of this blog to post support in such an idea.

Check out their work from years gone by as well.

http://animation.nectarine.com.au/

I salute Nectarine (not because their animations had me in it either).

Show your support to this idea by signing my comments to petition them to do it! :P