Busy Dizzy Bee-sley Spirographic Animation in Expression Blend & Silverlight

• Download source - 562.77 KB

Introduction

Welcome to my 8^th Beginners tutorial for Expression Blend & Silverlight. And this one is just for fun!!!

A live example thanks to Defwebserver can be found at http://silverlight.adefwebserver.com/alanbeasley/busybeesite/. (This Bee has been at the Cider!)

A clearer example of what is going on can be seen at http://silverlight.adefwebserver.com/alanbeasley/sillyshapes/SillyShapesSite/

This short tutorial will show how to use Ken Johnson's excellent Spirographic article to create seemingly random motion without a single line of code! We will also be introducing the PathListBox, UserControls, Behaviours & Storyboards for the first time in my tutorials.

Previous Tutorials

• Lesson 1 - "Building Better Buttons"
• Lesson 2 - "Arcade Button"
• Lesson 3 - "Picture Frame Control"
• Lesson 4 - "The Last Building Buttons"
• Lesson 5 - "ListBox Styling - ScrollBars"
• Lesson 6 - "ListBox Styling - Control Template"
• Lesson 7 - "ListBox Styling - Additional Templates"

Background

With the release of Blend 4 came the new PathListBox, which allows "Path to Motion". A feature already present in Flash, & up until now missing in Silverlight. Basically this allows one object to be set to follow the line/path of another object. Be this a square, a circle, or any other vector line/path...

While this is great, it does have its drawbacks, as most shapes easily drawn are fairly basic & not complex enough to simulate what appears to be random motion. That is until the brilliant Spirograph article by Ken Johnson! After seeing Ken's article, I asked if it was possible for Ken to create a Path Export feature for the created Spirographic shapes. And before I could blink, there it was! (Thanks again Ken - Please vote on Ken's Spirographic article if you haven't already!!!)

What Ken has effectively done, is create a whole new set of Primitives for Expression Blend & Silverlight. Which I believe could/should lead to all sorts of applications for these Path shapes. I am obviously just showing one such possibility, but I believe there are many many more...

I've been itching to do a tutorial involving the PathListBox, & this was far to good an opportunity to let slip by. So while this tutorial is just a bit of fun, I will be showing how use the basics of the PathListBox in creating a basic animation in Silverlight.

Let's Get Started

Firstly, we need to setup a new Silverlight project in Blend calling it "BusyBee".

Next, we need something to animate along the Path, so bring on the star "Busy Dizzy Bee-sley" (Me) or BusyBee for short.

Download the BusyBee UserControl from here, & add both files to your Project.

Next Rebuild your Project to make the BusyBee available as an Asset in Blend.

Select BusyBee from the Assets menu, as shown in the image below:

Now double click on the BusyBee UserControl to add it to the MainPage.

Next, we need to add some Spirographic shapes to our project, so click on this link to access Ken Johnson's Spirographic shapes.

Select Install, & as long as all goes well, you should be presented with the same screen as the image below:

Select Shape Explorer, which should bring up the screen as shown in the image below:

Now select an appropriate Spirographic shape for BusyBee to follow.

(I would suggest you keep it simple, & choose a shape without any sharp turns as the main Path for BusyBee to follow).

I have chosen a Rose with values of A=10, N=4 & D=3, as shown in the image below:

Now select the Export feature in the top left corner, & choose Export Path XAML as shown in the image below:

This will bring up a window showing all the Path information for this Spirographic shape.

Now the easiest way to input this into Blend, is to Copy just the Path information data inside the quotes "" to the Clipboard.

Then go back to Blend, insert a Rectangle onto the MainPage & convert it to a Path.

Now select the Path Data in the XAML, & Paste in the Spirographic Path Data.

In the Artboard, the Rectangle should now look like the Spirographic shape, as shown in the image below:

(For clarity, I have temporarily hidden BusyBee.)

In the Objects and Timeline, select the Path & rename it to "BusyBeeMotionPath".

Set the Width & Height to 240x240, & the Horizontal & Vertical Alignment to Centre.

This should place the Spirographic shape centrally in the Artboard, as shown in the image below:

Now insert a PathListBox into the Root, & place the BusyBee element inside of the PathListBox, as shown in the image below:

(This makes the BusyBee element a child of the PathListBox, & the PathListBox can have multiple children. The spacing between these children is controlled by the Padding, which by default is set to 10).

Now select the PathListBox & in the LayoutPaths, set the "BusyBeeMotionPath" as the LayoutPath for the child BusyBee to follow:

In the Artboard, BusyBee should now be placed in the centre (the start) of the BusyBeeMotionPath.

Now, place the mouse pointer in the Start section of the Layout Paths & drag to the right.

This should move BusyBee along the BusyBeeMotionPath, reaching the end of the Path at 100%.

Run the application & review the results! Nothing happens!!!

This is because we do not have a Storyboard for the animation process...

So still with the PathListBox selected, click on the + icon to add a Storyboard to the Project.

Name this Storyboard to "BusyBeeMotion01" & click OK.

This will open a Timeline next to the Objects and Timeline. (Use the F6 key to change to Animation Layout in Blend).

Go to 12 seconds on the Timeline & in the Layout Paths, set the Start to 100%.

Play the Animation & in the Artboard, BusyBee should move along the BusyBeeMotionPath, reaching 100% at 12 seconds.

Now select the BusyBeeMotion01 Storyboard itself, as shown in the image below:

In the Properties tab, change the RepeatBehaviour for the BusyBeeMotion01 to "Forever", as shown in the image below:

Now Run the Application again to review the results, & still nothing happens!!!

This is because the BusyBeeMotion01 Storyboard is not being fired (started) when the application is Run (loaded).

So we need to set a Behaviour, to initiate the BusyBeeMotion01 Storyboard for when the Application is Loaded.

Firstly close the BusyBeeMotion01 Storyboard, using the X, as shown in the image below:

Then in the Assets tab, select Behaviours & find the ControlStoryboardAction Behaviour.

Click & drag the ControlStoryboardAction onto the PathListBox, as shown in the image below:

In the Properties tab, set the EventName to "Loaded" & the Storyboard to "BusyBeeMotion01", as shown in the image below:

Now Run the Application, & with a bit of luck, BusyBee should follow the BusyBeeMotionPath.

However, "Busy Dizzy Bee-sley" (BusyBee) is only facing left, & not looking where he is going. (Like me driving!!!)

To change this, & make BusyBee turn as he tracks along the BusyBeeMotionPath, we need to change the Orientation of the PathListBox to "OrientToPath".

Run the Application again to review the results.

BusyBee, or Busy Dizzy Bee-sley now runs backwards. (Exactly how I drive!)

So select BusyBee & in the Transform section, Flip BusyBee along the X axis.

Run the Application again & with a bit of luck, BusyBee will now be facing in the right direction when following the BusyBeeMotionPath.

Now to make BusyBee's motion a bit more random, & we can do this by making the BusyBeeMotionPath follow a Motion Path of its own.

Firstly select both the BusyBeeMotionPath & the PathListBox,  & choose Group Into > Grid.

Then go back to Ken Johnson's Spirographic shapes, to pick out another shape to use as a Motion Path.

I have chosen a Lissajous, with values as shown in the image below:

(Use the same process as we did before, by copying the Path Data into a Rectangle, that you have converted to a Path in Blend 4).

Rename this new Path to "ParentMotion", set the Width & Height both to 200 & the Horizontal & Vertical Alignment to Center.

Insert a new PathListBox, & rename it to "ParentPathListBox".

Select the Grid & place inside the ParentPathListBox, as shown in the image below:

Select the ParentPathListBox & in the Layout Paths section, set "ParentMotion" as the LayoutPaths.

In the Artboard, the BusyBeeMotionPath is now attached to the ParentMotion.

Select the ParentPathListBox, & create a new Storyboard called "BusyBeeParentMotion".

Go to 4.5 seconds on the Timeline, & in the Layout Paths change the Start to 100%. (Close the Storyboard once finished)

Next select the BusyBeeParentMotion & set the RepeatBehaviour to Forever.

Then drag a ControlStoryboardAction Behaviour onto the ParentPathListBox.

Set the EventName to "Loaded", & the Storyboard to "BusyBeeParentMotion".

Run the Application & review your results.

Now this may not look very realistic, as the Motion Paths are a distraction from BusyBee's motion.

So select both the BusyBeeMotionPath & the ParentMotion Path, removing the Fill & Stroke for both.

Run the Application again to see the results.

This is better, & improvements can obviously be made by playing with different shapes, adjusting the Storyboard animations, & maybe using a further parent Path.

Fly Busy Dizzy Bee-sley, Fly!

For me there is one last thing to do, & that is to make Busy Dizzy Bee-sley's (BusyBee) wings flap.

So in the Project tab, double click BusyBee, to open this UserControl in the Artboard.

Create a new Storyboard, call it "BusyBeeWingsFlap" & hit OK.

Expand the Tree to reveal all the element, & select TopWing1, TopWing2, BottomWing1 & BottomWing2, as shown in the image below:

Now set a Keyframe at time 0.0 seconds, move the timeline to 0.4 seconds & set another Keyframe.

Move the Timeline to 0.2 seconds & select the "TopWing1" element, as shown in the image below:

In the Artboard, drag the top of the Wing down, so it looks like the image below:

(This edit will automatically generate a Keyframe for the element, at 0.2 seconds.)

Repeat the process on the remaining 3 Wings, as shown in the image below:

Select the BusyBeeWingsFlap Storyboard itself, & set the RepeatBehaviour to "Forever".

Close the Storyboard, & drag a ControlStoryboardAction onto the Layout Root.

Now set the EventName to "Loaded", & the Storyboard to "BusyBeeWingsFlap".

Run the Application & review the results. - Job Done!!!

If you have enjoyed this bit of fun, then please VOTE!!!