Silverlight animation with Expression Blend (and no code)

Comments

Hamishwillee - Subedited for readability

Hi Igor

Subedited for readability, and made the size of your step by step images much larger so they can be used. Please check I haven't removed any of your meaning/intention.

Note that I removed the section on getting started and replaced it with a line in the introduction (since I don't think this adds anything to what you're trying to show).

The demo is great. Could this be uploaded to youtube? If so, would be much better to upload and then display using the wiki player (and have this in the introduction). Can you do this?

Is there any useful online documentation on this topic you could link to in a SeeAlso?

I'm looking forward to actually trying this - ran a bit short of time. Upshot is that I might end up with more feedback when I have done so.

Thanks for this, you always come up with interesting topics to cover.

Regards

Hamish

hamishwillee 08:22, 21 September 2012 (EEST)

Hamishwillee - Simpler title

Also moved to simpler title. I think we can assume everyone will know this is "Microsoft" expression blend. Also removed colon, as this implies "namespace" in wiki titles. Removed "full stop" at end of title as some tools can't tell if this is in URL or not.

Was tempted to remove (no code) from title too, but decided its one of your key points.

hamishwillee 08:25, 21 September 2012 (EEST)

Izinin - to Hamish

Hi Hamish

Many thanks for your editor's work -- now the article is much better structured and concise.

I do not have more materials i would like to share on this topic. I just noticed that amasing work from someone done on WP7 http://www.youtube.com/watch?feature=player_embedded&v=j9f6O-fWJbU-- I beleive the workflow listed in the article can help one to reach the same result but will require a lot of creativity though :).

Thanks again for your valuable comments

Igor

Hamishwillee - You're welcome

Thanks for adding the video example (and the one for game in your comment, that does look cool). I will move this up the top because I think its useful to show people what they will achieve at the beginning of a document. Looks great.

hamishwillee 08:46, 25 September 2012 (EEST)

Log in or Join to leave comments.

18 Nov
2012

This tutorial shows how to create powerful object animation using Microsoft Expression Blend. This is a complementary article to 2D games using Silverlight series.

Article Metadata

---

Code Example

Source file: Media:wp7 animation demo.zip

---

Tested with

SDK: WP 7.1 or higher

Devices(s): Lumia 610 and higher

---

Compatibility

Platform(s): Windows Phone 7.5, Windows 8

Device(s): none

Dependencies: none

---

Platform Security

Signing Required: not applicable

Capabilities: none

---

Article

Keywords: games SilverLight WindowsPhone Windows 8

Created: izinin (20 Sep 2012)

Last edited: hamishwillee (10 Apr 2013)

Introduction

Microsoft Expression Blend (included in the Windows Phone SDK) is a powerful visual design tool for making visible elements and effects in Silverlight applications. It can be used simultaneously with Visual Studio on the same opened project - modifications made in either tool become immediately available in other.

Using the tool to create basic (though still excellent!) application user interfaces is straightforward. However some of the more advanced features are less obvious: for example animating controls or adding artwork to a Windows Phone application project.

This article takes you past the basics and shows you how to create and import artwork into Expression Blend, and how to use it in animations. The article assumes you have created an application framework using the standard Windows Phone application template in Visual Studio.

Creating artwork and importing it to Expression Blend

Where possible you should use vector graphics: bitmap graphics are not recommended because the aren't scalable and can result in slower application performance. Expression Blend can import scalable formats output by (costly) tools like Adobe Illustrator and Adobe graphics suite, or the free open source editor Creature House Expression 2003.

Note: Creature House Expression 2003 is the best free tool we found for creating artwork for Windows Phone:

• Silverlight does not support SVG graphics (as this is considered a competitor to XAML).
• Inkscape (free tool) cannot at time be used to create artwork for Windows Phone. Images saved as XAML work on Internet Explorer on desktop, but they don't work on Windows Phone because they contain several unrecognised tags.

Here is the workflow:

• Create an art in Creature House Expression and export it into Adobe Illustrator document format

  

• Open your project in Microsoft Expression Blend
• Select MainPage.xaml in project explorer pane and open it. When a "xaml" document is opened, import menu is enabled and allows you to get an artwork into it. After the importing we can rearrange the graphic and make a UserControl from it. Having UserControl derived class will give us great freedom in its use, for example we can instantiate it dynamically, can have several instances, etc. Converting graphics to UserControl will be explained further in the document.
• Import your artwork

  

• Check Objects and timeline pane. In MainPage.xaml document object tree you should find imported graphics named after the graphic file. In my example it is “Apple”.
• Make a UserControl from it

  

• Open Apple.xaml document for further modification. We are going to use it as a subject for our animation demo

Composing a subject for animation

In the animation demo we are going to present the life-cycle of an apple: from a bud to blossom and finally a fruit. To make the animation we need two more graphic objects: bud and blossom. Create and export them in AppleControl.xaml document the same way as we did it for the apple. You do not need to make UserControls from them but group them using canvas.

Arrange the bud, blossom and fruit in the center of canvas and make the blossom and fruit invisible. That is initial state of our animation: user will see only the bud. Note that the grouping canvas is transparent by default. That allows us freely place our AppleControl on any other control. The screenshots below show each of the steps:

• 

  Step 1: Grouping graphics into Canvas XAML element

• 

  Step 2: arranging the items on the project canvas

• 

  Step 3: Grouping Path XAML elements that composes the button into Canvas XAML element

Create the subject animation and use it on the application main page

The following images show the steps for creating the animation (click on the images to see a larger version)

• 

  Step 1: This is the initial state

• 

  Step 2: Drop StoryboardAction

• 

  Step 3: Create storyboard in AppleControl. You are ready to record your animation

• 

  Step 4: Recording animation

• 

  Step 5: Stop recording. Complete animation creation.

• 

  Step 6: Bound controlStoryboardAction and storyboard. Make start animation trigger on document loading.

• Save your work :) .
• Close all opened documents. Go to project explorer pane and open MainPage.xaml
• Build your application. Go to Assests pane and find AppleControl in the control list. Add AppleControl to MainPage.xaml document.

  

• Try on device or emulator!

The project source code

File:Wp7 animation demo.zip