Adam Kinney posts tagged with 'animation'

WPF Effects and Transitions Library Applied

Adam Kinney — Thu, 09 Oct 2008 22:35:00 GMT

WPF Effects Interview (8:46)
WPF Effects Interview - Essential (5:35)

WPF Effects Demo (5:35)
WPF Effects Demo - Just Effects (3:36)
WPF Effects Demo - Just Transitions (2:32)

Last week we posted the WPF Effects Library on Codeplex along with an David Teitlebaum interview and a demo video showing the library in action.

The library includes 23 Effects using the new PixelShader class ShaderEffect available in WPF 3.5 SP1. Effects range from BandedSwirl, ZoomBlur, InvertColor and my favorite to say, GrowablePoissonDisk.

I have a few Effects screenshots on Flickr, if you'd like to see them. Greg Schechter has a great blog post talking about Effects in WPF.

The library also includes 33 Transitions in addition to the Effects. Transitions range from familiar concepts like BandedSwirl, Pixelate and Slide to more exotic types like Crumble, MostBright and Water.

All of the Transitions are based on the abstract TransitionEffect class, which builds on the framework ShaderEffect class adding the concept of two inputs and a progress animation. This now allows you to use an Effect in a very applicable way. The Effect is not only applied to an element but you can use the Effect as a way to animate between two elements. And the animation itself is handled by a WPF Storyboard demonstrating the tight integration between the WPF Framework and Pixel Shaders. The more you dig into this architecture the more you find out how much work has been done by the WPF team to make using Shaders simple.

Using the WPF Effects Library

In order to start using the WPF Effects Library for your WPF Applications, there are a few simple steps involved listed below:

Ensure you have VS2008 and .NET Framework 3.5 SP1 installed
Install the Shader Effects BuildTask and Templates available on Codeplex. Grab the .ZIP file and follow the steps in the readme.txt
Download the WPF Effects Library and open the ShaderDemoApp.
You will see "custombuild" warnings when opening the projects. This is due to the Shader Effects Build Task being hooked up. No worries here, click Load Normally.
Now try to run the ShaderDemoApp and if it looks like it did in the demo video, you're all set.

Now that you're up and running you can start using the Effects. One thing about the ShaderDemoApp that comes with the library is that its great to demo with, but as a starter application it can be a little complex.

Let's walkthrough a very simple application called TransitioningImages that makes use of a TransitionEffect to navigate images in a folder.

This is a very simple application where all of the action happens within the Window1 class.

Choose a Folder - After the user selects a folder using the OpenFileDialog, the code retrieves all of the .jpg images from the folder and instantiates a new collection of BitmapSources for the custom PhotoSlideShow class. The initial image is then loaded into an Image element.
Navigating the Images - Hitting the Next or Previous buttons then cycle through the PhotoSlideShow image collection and cue a Transition to move from one image to the next.
Transition Applied - A new Transition Effect is instantiated (the default is a RadialWiggle (pictured above)) along with a DoubleAnimation that animates the Progress of the Transition until completion.

One of the very cool things to point out here is that we are Transitioning between images which is an obvious choice. But as the ShaderDemoApp shows the multiple inputs for the Transition are Brushes and in WPF we have an array of Brushes to choose from. One of those Brushes is the VisualBrush which allows you to take any Visual element including Buttons, MediaElements and the like allowing you to create some really interesting applications using these Effects.

Below is a link to the source code for the TransitioningImages application. The executable will run with WPF 3.5 SP1 installed, but in order to modify and build the application you'll need to follow the installation steps above.

If you use the Effects Library in your own application, let us know. We'd love to hear about how well they worked for you and see what kind of applications you've come up with.

Shidonni, interactive drawing fun for kids

Adam Kinney — Thu, 18 Sep 2008 08:20:00 GMT

I just recently found out about the Silverlight-based site Shidonni which describes itself as:

...a virtual universe, where kids and their parents can create their own imaginary world, play games, have fun and interact in a friendly, non-violent environment...

After checking out the site two things caught my eye, first you can draw your own animals. The tools are simple pencil and fill drawing tools but its all done in Silverlight which is very interesting. The paths created work out pretty well and I was even able to use my Pen on my Tablet to draw.

After drawing the animal, it then starts to bounce around your scene. From there you can add a background, food for the animal and eventually play games. Of course its not quite as complex as the other creature creation game I've been playing around with, but it is cool to see your creature "jump" and "eat".

The site just recently went into beta and you can follow along with them on Twitter. Looks like an interesting place for kids and a great technical example of creating a drawing tool in Silverlight 2.

Now I need to draw some food for my gorilla... I feel like Harold with the Purple Crayon :)

Animation Hands On lab for Silverlight 2

Adam Kinney — Fri, 11 Jul 2008 01:06:00 GMT

This Hands On lab was originally written for a training event we held last month. While I'm guessing we'll post in some official fashion in the future I thought why not share it in the meantime.

The Lab is made up of four sections:

Animation API overview - a general look at the concepts behind the Animation API including Storyboards, Keyframes and Object Animations.
Using Blend to Design Animations - I hold your hand through creating your first animation Blend including which button to push and when. Screenshots of the buttons are inline with the text. Tufte would be proud.
Reusing Storyboards - This section demonstrates how to use C# code to reuse Storyboards once they've run.
The Empty Storyboard pattern - I posted about the empty storyboard pattern before and this section walks you through the concept and the code.

I'm a lot happier with this one over the last Animations Lab from MIX08. That one was very "copy and past this here, now hit F5, and watch some thing move that you don't understand". Additionally the Animation API has improved quite a bit from Beta 1 to Beta 2.

If you're already into Animations in Silverlight this may be review, but if you're just getting started this should be a helpful primer.

Tweening Equations for Silverlight

Adam Kinney — Wed, 25 Jun 2008 09:21:00 GMT

I remember the days back on the were-here forums (now sadly defunct) when there was this guy who went by the alias rpenner and he schooled us all in math and showed us how to do very cool things in ActionScript. Robert Penner's equations have been perfected, published and translated to C#.

Lee Brimelow originally translated the equations to C# for use in WPF and the beauty of Silverlight being a subset of WPF is that the same equations work just as well. (The only small change needed was to remove the reference to an unused default library System.Windows.Navigation).

I've been focused quite a bit lately on how best to do dynamic animations in Silverlight and after seeing Corey Miller's tweening sample based on Penner's equations, I was energized to go find the library and apply it in Silverlight.

This first part was easy, since Lee (Thanks man!) had already done the translation. The second part was then applying the equations using the Empty Storyboard method for Silverlight. As a result, I've come up a few different code samples:

WPFPenner.cs - This is the original C# translation, minus the WPF only library reference. I've also added an enum of the easing types, which I use for reference in another sample.

TweeningTest - A very basic application that demonstrates the usage of an equation in code. Two methods of modifying the position of element are shown, both TranslateTransform and Canvas Left and Top. The TranslateTransform is nice because it works within the Grid as well as the Canvas.

OffToTheRaces - This is a simple application that can be used to preview the different easing types. Its a bit of an extreme sample since the easings are dynamic, but you can make the horses run and then randomize them to bring up new horses. You can also check out Robert Penner's original Equations Visualizer to get an idea of the equations.

Moving beyond the basic Linear equation for animation can greatly enhance the experience you create. The easier we can make it do this the better and I think the equations are a good start.

Procedural Animation in Silverlight 2

Adam Kinney — Wed, 18 Jun 2008 09:49:00 GMT

After some research, I'm recommending the use of Empty Storyboards for procedural animations.

What is an "Empty Storyboard"? It is a Storyboard with no animations or specific target that simulates a game loop or per frame callback by having a short duration and once its Completed it Begins itself again.

A simple example looks like this in C#:

   Storyboard timer = new Storyboard();      
timer.Duration = TimeSpan.FromMilliseconds(500);       
timer.Completed += new EventHandler(timer_Completed);       
timer.Begin();
    void timer_Completed(object sender, EventArgs e){      
    if (conditionToKeepGoing)       
        timer.Begin();       
}

The other two options include the DispatcherTimer, which is not suitable for this type of quick ticking, and Storyboards with defined Targets and Animations.

Modifying Animation values at run-time does work smoothly and as expected. But you are limiting your flexibility by tying every Target property that's animated to a matching Animation instance. With an Empty Storyboard you are free to modify any property based on your calculations.

A combination of the two Storyboard method will most likely end up becoming the most powerful pattern. During the game loop, within the empty Storyboard you can calculate your scene and when a different state is desired, you can call into an object's prepared routines or Storyboards with linked Animations.

I've modified the original HelloBeta2 to use an Empty Storyboard and there is commented out code which adds a Storyboard to each Line as its drawn that moves its second point after initial placement. This simulates the "known routine" idea, and I could easily update the new location for the second point at run-time.

I've also added a StrokeWidth loop and DashArray, but that was just for my own entertainment.

Catching up with Silverlight 2

Adam Kinney — Mon, 10 Mar 2008 23:24:00 GMT

Starting last week on March 5th after Silverlight 2 Beta 1 was announced, a lot has been said about Silverlight 2. Presentations have been given, demos have been shown, bits have been released, tutorials have been posted and many conversations have been had. As an attempt to catalog some of the more interesting and useful content, I'm posting my list of highlights since SL2B1 day.

Overview

In the unlikely event you haven't found where yet, you can grab the runtime and tools for Silverlight 2 Beta 1 on Silverlight.net.

Other links to help you get started include:

Building Rich Internet Applications using Silverlight 2 - MIX session presented by Joe Stegmen and Mike Harsh, Part 1, Part 2
A Whirlwind Tour - Jesse Liberty's introduction to Silverlight 2
Fundamentals Lab - This lab explores the fundamental tools and features that underpin any Silverlight application.
Breaking Changes in Silverlight 2 - This topic discusses the changes made to the Silverlight runtime and Silverlight tools between the Microsoft Silverlight 1.1 Alpha September Refresh and the MIX 2008 release.
Packaging and Application Startup - Pete Brown explores the new application model, read Part 1 and Part 2
Dynamic Animation Lab - This is a simple lawn mowing simulation that exposes different techniques of leveraging the managed Animation API in Silverlight 2.

Demos

Hard Rock Memorabilia - One of the most talked about demos at MIX08, welcome Deep Zoom!
Pulse at SXSW - mashes up twitter, del.icio.us, Technorati and flickr in a very visual and useful way
AOL email client - a full email client written in Silverlight 2
NBC Olympics - can be seen in the first keynote at MIX08 around 1:17:00, an interview with Perkins Miller is also available
TextGlow - read Word 2007 documents online with Silverlight 2
Silverlight.net Community Gallery - controls demo, RSS reader, SOAP Weather Widget and more
Tunnel Trouble - a new Silverlight-based game from Terralever
WeatherBug - designed for Silverlight Mobile, you can test the app running on the web.

Controls

Control Demo Page - see the controls in action
Source code and Unit Tests for controls - download the code
Creating Rich Dynamic User interfaces with Silverlight 2 - MIX session presented by Karen Corby
Controls Tutorial - Another Jesse Liberty tutorial
ListBox and ScrollViewer FAQs - all you ever wanted to know about them and more
File Upload Component - Wilco Bauwer builds a File upload and control and shares the source
User Controls Lab - Building Reusable Controls in Silverlight 2
Using the Silverlight 2 Canvas - a screencast by Jesse Liberty
Using Silverlight 2 Grids and Stack Panels - another great screencast by Jesse Liberty
Styling Controls - another tutorial by Jesse Liberty (he's been very busy)

Deep Zoom

Applications = Designers + Developers - MIX session presented by Celso Gomes and Kirupa Chinnathambi , Deep Zoom heatured in the second part
Hard Rock: Behind the Music with Deep Zoom - MIX Session presented by Scott Stanfield
First Attempt with MultiScaleImage - Mike Taulty shows how to implement control over Deep Zoom, followed by an update
Deep Zoom Demo - Mike Ormond shares Deep Zoom code and then adds mouse wheel support in part 2
Deep Zoom Composer Preview
Deep Zoom Composer Preview - User Guide

Mobile

Mobile Devices and Microsoft Silverlight - MIX session presented by Amit Chopra and David Kline
Using Microsoft Silverlight for Creating Rich Mobile User Experiences - MIX session presented by Giorgio Sardo
Brad Becker interview - about the recent announcement about Silverlight Mobile.
WeatherBug demo
MIXr demo
Silverlight for Mobile primer session at MIX08 - my notes from the first mobile session at MIX

Dynamic Language Runtime

Microsoft Silverlight and Dynamic Languages - MIX session presented by John Lam and Jimmy Schementi
Hello World! demo - demo from MIX session
Managed JScript and flickr -demo from MIX session
Integrating Silverlight and ASP.NET MVC - demo from MIX session
Iron Python - Jimmy Schementi's MSDN article
Iron Python and the DLR - Bill Chiles's MSDN Article
John Lam on Ruby, Ruby, Ruby - Open Space session at MIX08

Moonlight

Exploring Moonlight : Novell's Implementation of Silverlight on Linux - MIX session presented by Miguel de Icaza
Pre-Mix 08: Moonlight Updates
Channel9 works with Moonlight!

Physics

Farseer Physics Engine - an open source physics engine for Silverlight 2
Polygon Demo - Andy Beaulieu's recent demo using Farseer
Heads Will Roll demo - Chris Cavanagh updates his sample, click "move platforms" to make the wheels/heads go flying

Networking and Data

Networking and Data Lab - In this hands-on lab, you will look at using a variety of remote data sources and communication techniques to retrieve data for a Silverlight application.
Working with Data and Web Services in Microsoft Silverlight 2 - MIX Session presented by Eugene Osovetsky
Sockets Sample
Data Binding Tutorial - A Jesse Liberty tutorial

Browser Integration

Browser Integration Lab - In this hands-on lab, you will look at the places where DHTML and Silverlight meet.
Calling JavaScript functions - Tim Heuer tutorial

Tools

Silverlight Blueprint for Sharepoint - This is the answer to "how do you use Silverlight in Sharepoint?", Micheal Lehman has an interview live on Ch9
PhotoZoom - Want a Deep Zoom Album of your own? try this site. Look for the "processing" notification when attempting to view your albums, the site is rather busy right now
BlogEngine.NET Silverlight Extension - I would expect to see more of these start cropping up
Programmer Utilities - Jesse Liberty's suggested "other" tools
Telerik Controls - There are lot of cool examples under the Online demos section. Very cool to see the Animations framework in there.
ImageGear for Silverlight

Fountains of Information

Scott Guthrie - great tutorials and source of breaking news
Tim Sneath - next best place for breaking news and clarity of information
Jesse Liberty - The Silverlight Developers best friend
John Lam - Dynamic Language Runtime
Jose Fajardo - User Experience and Design
Andy Beaulieu - games and physics
Sparkling Client - a podcast about Silverlight and other RIA technologies.
Code Trip - driving around the west coast, check to see if they're coming to your neighborhood

Pumpkin Card - Silverlight demo with code

Adam Kinney — Wed, 31 Oct 2007 17:11:00 GMT

After enjoying the China Moon Festival Card, I wanted to try my hand at creating a holiday card with Silverlight. I've also been looking for the opportunity to dive into vertex animation which is a big part of this demo. I also wanted to add sound but the animation took a bit more time than I had planned for. Enjoy and have a great Halloween!

Launch Demo
Download Source

UPDATE: I've uploaded the app to Silverlight Streaming (post on the "how" to follow) and you can now add the card to your site using the following code:

<iframe src=http://silverlight.services.live.com/invoke/11557/PumpkinCard/iframe.html scrolling="no" frameborder="0" width="400" height="300"></iframe>

Silverlight guy jumps off the edge

Adam Kinney — Mon, 27 Aug 2007 20:19:00 GMT

Silverlight and many of its cousins appeared in a funny keynote animation during the Web on the Piste conference. The animation was created very skillfully by the Nectarine group out of Australia. Taking a look at their portfolio certainly is inspiring. Animation will definitely be a topic of my upcoming presentations.

Animated kitchen schematic in Silverlight

Adam Kinney — Thu, 09 Aug 2007 17:59:00 GMT

As I went to brew my morning coffee this morning I noticed something subtle but great. Some kind kitchen engineer had stopped by and switched the locations of the microwave and coffee supplies. The coffee supplies were next to the iCup, otherwise known as the coffee machine. It was a brilliant move and something I wanted to shout out loud. Not wishing to disturb my office mates though I thought perhaps an animation would work as well.

A bit gratuitous for a simple reorganization? Perhaps; but it was also a perfect chance to develop my Expression blend skills a bit more.

KitchenSwitch source is available here.

Jing Animation

Adam Kinney — Wed, 18 Jul 2007 01:22:00 GMT

After reading the post by Tim Heuer about Jing, I grabbed the fancy new screen/video capturing tool.

Behind the simple and fun interface, there is quite a bit of power. I figured a simple animation wouldn't be hard to do. And it wasn't.

Camtasia, as per the functionality of Jing, has been kind enough to host the animation here for your viewing pleasure.

UNIQLOCK

Adam Kinney — Fri, 15 Jun 2007 22:50:00 GMT

This is a fun way to sell polo shirts. The music is turned off so as not to startle you (this isn't MySpace), but it is worth listening to if you're not sitting in a meeting or a library. You can get your own customized UNIQLOCK here.

Too bad the small version is too wide to be a Sidebar gadget.

MIX07: WPF Comics with Identity Mine

Adam Kinney — Tue, 01 May 2007 00:14:00 GMT

I just came from a session given by Nathan Dunlap and Robbie Ingebretsen entitled “ZAP!, WHAM!, KAPOW!”: WPF and the Next Genertion of Online Comic Book Reading. And yes, it was as awesome as it sounds like as it should be. They presented an experimental WPF app designed to create a great on screen reading experience for comics.

I'm a fan of comics and enhancing reading experiences especially online, and this type of conceptually was similar to something Ernie Booth and I had dreamed up. Immediate improvements include a visual index of pages which you can use to navigate and preview, different display modes depending on the context of the display currently used and an authoring environment allow content creators to author a very rich path of navigation through the content. They did mention that the Sample should be available online soon once they have chance to clean it up for distribution.

A few technical items of note; each page that is presented can be a .jpg (they were using actual comic book pages from the 24 comic, 1000x2000 pixel images) or a xaml file. Once I heard that I thought "moving backgrounds!" (think DreamScene type movies). Which in due course, they demoed a cover page of their comic with a pulsating plasma-like image in the background. Nicely played Dunlap and Ingebretsen, nicely played. It was also interesting to see that they had chosen to use a Silverlight player within the WPF application to show their extra editor's clips.

Overall the two presented with excitement and obvious love for their science project. Both had previously worked at Microsoft building WPF and now they are both off apparently having a great time at Identity Mine. Towards the end they mentioned that their demo comic "Identity Men" had been actually printed (sure to be found on Flickr soon) and that they were releasing a collection of controls called Blendables, Nathan posted more here.

Great session guys, now I need to try and catch their next session Booyah! Designing and Developing Line-of-Business Applications That SIZZLE

Cruising at night with KEXP

Adam Kinney — Fri, 23 Mar 2007 08:47:00 GMT

There is something really nice about the combination of KEXP, Cruise Control and the late night.

I normally listen to music of my own, but when I'm ready for a surprise I listen to KEXP almost exclusively. They are a unique station with music you won't find on most stations. And regularly the music is good enough that I try to remember the name of the band or at least the time that I heard the song. The time works, because the have a real-time playlist on their site with streaming archives, and the name is obvious important to remember, but the key word in that previous sentence was "try". Unique music, brings unique names - "Arcade Fire", "The Trucks", "Apples in Stereo", "My Morning Jacket", "Silversun Pickups". It can take a little while to get familiar with those names and not mash all of them into some form of poetry that is 80% nouns.

So now good music is playing for the late night drive home. Flip on Cruise Control to 65, fast enough to make the curves enjoyable, slow enough to enjoy the ride.

This results in a smile, relaxation and mental images of art I want to create.

Minh came through on some art today. He added animation and music to the Niners interviewing each other. Good job, Minh.

HALO themed player for Scott Guthrie in Red vs. Blue

Adam Kinney — Tue, 06 Mar 2007 16:58:00 GMT

"Can you make a HALO themed player for the next Red vs. Blue video? It has Scott Guthrie in it and he talks about ASP.Net to the Red team."

"Scott Guthrie in Red vs. Blue? Nice. Sure, I don't have that much time but I can put something together."

/me grabs code from SleekVideoPlayer sample. Throws in new graphics, adds sliding intro panel and popup link at the end. Turns up volume of video.

/presents Red vs. Blue player on Channel 9

/Scott Guthrie blogs about it

A new Zune animation and details revealed

Adam Kinney — Thu, 14 Sep 2006 18:01:00 GMT

Actually I'm not sure when the new animation went live, but I really like this one. I saw few comments putting the first one (giant and little man sharing a bunny), but I think this one may get a better reception. You can't beat flaming, head-banging bird :) Both animaitons are displayed on comingzune.com.

Details on the Zune are revealed here.