Click here to Skip to main content
15,860,972 members
Articles / Desktop Programming / XAML

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

Rate me:
Please Sign up or sign in to vote.
4.89/5 (45 votes)
11 May 2010CPOL9 min read 78.1K   628   39   25
Simulating a random motion animation without code, using Spirographic Shapes, PathListBoxes, Storyboards & Behaviours

Introduction

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

Image 1

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

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.

Image 2

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

Image 3

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

Image 4

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

Image 5

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

Image 6

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

Image 7

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

Image 8

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

Image 9

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:

Image 10

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

Image 11

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

Image 12

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.

Image 13

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

Image 14

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

Image 15

(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:

Image 16

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

Image 17

(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:

Image 18

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

Image 19

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.

Image 20

Name this Storyboard to "BusyBeeMotion01" & click OK.

Image 21

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%.

Image 22

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:

Image 23

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

Image 24

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:

Image 25

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

Image 26

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

Image 27

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

Image 28

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".

Image 29

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.

Image 30

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.

Image 31

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:

Image 32

(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:

Image 33

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

Image 34

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

Image 35

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:

Image 36

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:

Image 37

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

Image 38

(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:

Image 39

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!!!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
User Interface Analyst
United Kingdom United Kingdom
I've been playing with computers since my first Acorn Electron, & after blowing up a few ZX Spectrums. I moved on to the C64 & Amiga, & eventually reluctantly on to the PC.

I have learnt a wide set of skills during my 38 years of existence, living in the UK, on the sunny south coast.

My main area of expertise is Graphic/Visual Design, Usability & UI Design. I am not a programmer, but am fairly technically minded due to studying Mechanical Engineering at Uni.

I have work both Freelance & for IBM as a Graphic Designer, & am skilled in the usual graphics packages like, PhotoShop, CorelDraw or Illustrator, Premier, Dreamweaver, Flash etc.
But I originally started with Lightwave & 3D animation.

Comments and Discussions

 
QuestionFiles are missing Pin
DesCBUDD1-Jan-12 8:05
DesCBUDD1-Jan-12 8:05 
QuestionI can't download Ken Johnson's Spirograph Pin
datcambridge22-Oct-11 14:33
datcambridge22-Oct-11 14:33 
GeneralMy vote of 5 Pin
Richard Waddell20-Nov-10 8:12
Richard Waddell20-Nov-10 8:12 
Generaloff topic Pin
K.Ostrouska17-May-10 21:04
K.Ostrouska17-May-10 21:04 
GeneralRe: off topic Pin
Alan Beasley17-May-10 22:35
Alan Beasley17-May-10 22:35 
GeneralRe: Hello Alan Pin
Alan Beasley14-May-10 23:14
Alan Beasley14-May-10 23:14 
GeneralRe: Hello Alan Pin
Sacha Barber15-May-10 0:00
Sacha Barber15-May-10 0:00 
GeneralVery cool.. Another GREAT article.. Pin
CastleSoft13-May-10 1:24
CastleSoft13-May-10 1:24 
GeneralRe: Very cool.. Another GREAT article.. Pin
Alan Beasley13-May-10 1:58
Alan Beasley13-May-10 1:58 
GeneralThank you for your work. Pin
BryanWilkins12-May-10 6:45
professionalBryanWilkins12-May-10 6:45 
GeneralRe: Thank you for your work. Pin
Alan Beasley12-May-10 7:27
Alan Beasley12-May-10 7:27 
JokeI wish I didn't know you so well Pin
Jason Young 175612-May-10 4:29
Jason Young 175612-May-10 4:29 
GeneralRe: I wish I didn't know you so well Pin
Alan Beasley12-May-10 4:39
Alan Beasley12-May-10 4:39 
GeneralExcellent Pin
Marcelo Ricardo de Oliveira11-May-10 16:47
mvaMarcelo Ricardo de Oliveira11-May-10 16:47 
GeneralRe: Excellent Pin
Alan Beasley12-May-10 1:26
Alan Beasley12-May-10 1:26 
GeneralRe: Excellent Pin
Marcelo Ricardo de Oliveira13-May-10 0:21
mvaMarcelo Ricardo de Oliveira13-May-10 0:21 
QuestionBut, How do I put code behind to this?? Pin
defwebserver11-May-10 4:09
defwebserver11-May-10 4:09 
AnswerRe: But, How do I put code behind to this?? Pin
Alan Beasley11-May-10 4:19
Alan Beasley11-May-10 4:19 
GeneralBee-utiful Pin
KenJohnson11-May-10 3:39
KenJohnson11-May-10 3:39 
GeneralRe: Bee-utiful Pin
Alan Beasley11-May-10 3:57
Alan Beasley11-May-10 3:57 
GeneralI think this would be so much better if the paths had bananas and used baboons, then and only then can I give this a 5. Pin
Sacha Barber11-May-10 1:21
Sacha Barber11-May-10 1:21 
GeneralRe: I think this would be so much better if the paths had bananas and used baboons, then and only then can I give this a 5. Pin
Alan Beasley11-May-10 1:31
Alan Beasley11-May-10 1:31 
GeneralYou are one busy bee Pin
linuxjr11-May-10 0:37
professionallinuxjr11-May-10 0:37 
GeneralRe: You are one busy bee Pin
Alan Beasley11-May-10 0:49
Alan Beasley11-May-10 0:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.