Click here to Skip to main content
Click here to Skip to main content

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

, 11 May 2010
Rate this:
Please Sign up or sign in to vote.
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!!!

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.

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

License

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

About the Author

Alan Beasley
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 PinmemberDesCBUDD1-Jan-12 8:05 
QuestionI can't download Ken Johnson's Spirograph Pinmemberdatcambridge22-Oct-11 14:33 
GeneralMy vote of 5 PinmemberRichard Waddell20-Nov-10 8:12 
Generaloff topic PinmemberK.Ostrouska17-May-10 21:04 
GeneralRe: off topic PinmemberAlan Beasley17-May-10 22:35 
GeneralRe: Hello Alan PinmemberAlan Beasley14-May-10 23:14 
hopefully done pal - Delete your eamil from your message mate! Unless you just love the spam!!! Big Grin | :-D
 
Sacha Barber wrote:
I'll look forward to hearing from you champ.

 
That's "Chump" to you pal!!! Laugh | :laugh:

If I could code, I'd be dangerous... My Blog[^]

GeneralRe: Hello Alan PinmvpSacha Barber15-May-10 0:00 
GeneralVery cool.. Another GREAT article.. PinmemberCastleSoft13-May-10 1:24 
GeneralRe: Very cool.. Another GREAT article.. PinmemberAlan Beasley13-May-10 1:58 
GeneralThank you for your work. PinmemberBryanWilkins12-May-10 6:45 
GeneralRe: Thank you for your work. PinmemberAlan Beasley12-May-10 7:27 
JokeI wish I didn't know you so well PinmemberJason Young 175612-May-10 4:29 
GeneralRe: I wish I didn't know you so well PinmemberAlan Beasley12-May-10 4:39 
GeneralExcellent PinmemberMarcelo Ricardo de Oliveira11-May-10 16:47 
GeneralRe: Excellent PinmemberAlan Beasley12-May-10 1:26 
GeneralRe: Excellent PinmemberMarcelo Ricardo de Oliveira13-May-10 0:21 
QuestionBut, How do I put code behind to this?? Pinmemberdefwebserver11-May-10 4:09 
AnswerRe: But, How do I put code behind to this?? PinmemberAlan Beasley11-May-10 4:19 
GeneralBee-utiful PinmemberKenJohnson11-May-10 3:39 
GeneralRe: Bee-utiful PinmemberAlan 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. PinmvpSacha 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. PinmemberAlan Beasley11-May-10 1:31 
GeneralYou are one busy bee Pinmemberlinuxjr11-May-10 0:37 
GeneralRe: You are one busy bee PinmemberAlan Beasley11-May-10 0:49 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 11 May 2010
Article Copyright 2010 by Alan Beasley
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid