How to generate Character Animation with VisualStateManager in Windows Phone 7

One of the best ways to bring in life to some of the common cell devices screensavers and wallpapers can be achieved by generating window phone animations. Amongst the majority of the things that Windows phone possesses, we will learn in this article as to how to create animation. There are lot of approaches that can be used to come with different sort of animations. The animation plays the amazingly important role in the line of business application like creating page transitions, and button, checkbox or other control states.

It is very vital to include the animation in Mobile devices. This will help in keeping the end users busy or coming up with a classic application.

Make sure that when you are deploying animations to the business applications, it should inform the user on the application transition from one state to another, example includes when the application goes from the “NotLoggedIn” state to the “LoggedIn” state. Different States in Silverlight are taken care by the VisualStateManager. The VisualStateManager is probably well known under Silverlight developers; it’s used to go from state to state in controls.

The things that the developers are mostly not aware are that the VisualStateManager can also be used in other situations apart from custom control development or templating controls. For example, you can use the VisualStateManager to manually add states to a UserControl, let Blend record the user interface in the different states and use the “VisualStateManager.GoToState()” method to let your UserControl switch states.

The ways in which one can create animation are: Storyboard or Visual States.

The below figure represents different sort of animations and the character of the cartoons with different mood and postures. This can be done with the help of VisualStateManager in Windows Phone 7.

Figure 1: Normal

Figure 2: Happy

Figure 3: Unsure

Figure 4: Sick

Figure 5: Vomit

It is very simple to create animations with the help of Visual States or Storyboard and Microsoft Expression Blend.

• The very first step that you need to do is to select an asset that should be vector graphics. This allows you to manipulate the graphics in a very simple manner and in a way that Visual States are possible as can be seen in above graphics.
• The next step after being ready with the asset in the Blend is to have 1) States tab clicked and you would be required to 2) add state group, 3) incorporate various states and then 4) click on the state for which the animation needs to be created. The below figure represents the entire lifecycle to create Visual States.

Figure 6: Representing the lifecycle to create Visual States

You might have noticed that at the time when you click a state that you want to create animation for, the red borders can be seen around the graphics.

The recorded mode will be very helpful and will let the developer know as to how to control, creating the images and animate the graphics. And now if one needs to call up the visual state again and it will make you easy to play back the changes you made over the phase of time you precise; longer the set timer longer the changes will take place.

The above figure will help you to visually see the transition happening in Blend and you must turn transition which is off by default.

Observe that when you click between the visual states you will observe that with respect to the time you set the state will change to other states gracefully making the animation very smooth. This is the power of Blend as tool hides all the complexity otherwise that has to go into making this animation work smoothly.

Now it is the time to make call to the visual states that could be done as shown below:

public void Happy()
{
  VisualStateManager.GoToState(_hamster, “Happy”, true);
}

From the example presented in this article, it can be noticed that when you touch any of the hamster body parts, Mouse Left Button Down event is fired that will make calls to Hamster View Model. This will in turn initiate the timer and will reset the hamster expression to Normal state as can be seen from the below code.

private void gridLeftArm_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
  _timer.Stop(); 
  _hamsterViewModel.Happy();
  _timer.Start();
}

Testing On Windows Phone

The following can be seen in the emulator when the above created project is executed in the emulator.

Figure 7: Representing the output of the code in the emulator

The Hamster will react with animation when you touch any of the Hamster body parts.

The Use of the Visual States in Line of Business Application will briefly discuss in the next section.

Deploying Visual States in Line of Business Application

There are different ways of line of business visual states and are presented as follows:

1. Control states that includes checkboxes, buttons, or other controls.
2. There are two specific control events like Hide and Unhide controls. Say you have dropdown and based on the item that has been selected; you need to hide and unhide certain controls. Normally you would need this in code but issue appears at the time when you have many controls to hide and unhide and making the unnecessarily long. You can use Visual States to create multiple states for hiding and un-hiding. It would be one line of statement of invoking VisualStateManager vs. many lines of hiding and un-hiding controls.
3. Loading panel: You can create your own company with the help of branded loading screen. It has been observed company exhibiting bits of advertising in the loading panel.
4. Page transition: Why page navigation is boring? Instead use nice transition even simple as setting opacity to gradually hide page can be appealing to eyes.

Conclusion

The aim of the article was to make the developers working on Windows Phone 7 development aware on how the animated characters from the simple of the postures to the complex one can be incorporated in the device.