Shine Draw

In Silverlight 3, there are a lot of fantastic new features. One of it is the use of Easing Function in your Storyboard Animations. Easing functions allow you to apply custom mathematical formulas to your animations. It helps you to create animations that is more realistic and much more easy to manage.

You may find an overview of Silverlight Animations Overview from here.

Silverlight has provided 11 preset Easing Functions. Each EasingFunctions have 3 EaseMode (EaseIn, EaseOut, EaseInAndOut). Below is a general overview how the easing functions look like.

Each functions has it own style and you can create a lot of effects if you use them wisely. Besides the built-in ease functions, you are able to create your own Easing Function as well. However, I think the built-in easing functions is able to handle most of the cases.

Well, I believe the graph above is not intuitive enough for you to project the actually animation effect that can be applied to your Silverlight controls. Don’t worry, check out the below Application and have a experience the power of the Storyboard Animationis.

Demo and Source Code

Source Code:

•   Storyboard Easing Preview [Silverlight 3, C#] (307.9 KiB, 2,333 hits)

Silverlight

I didn’t create any entry for Mix 09 Challenge, the main reason is that I was officially invited to be the judge of MIX 09 Challenge.

Acting as judge is not easily. There are all together 105 entries and most of them are creative and interesting. It’s really a headache for me to pick up the winner.

Anyway, today I have created a 3D spiral image rotation application for all of you to navigate the entries easily. For the Flash version, you may click on the image and you will be redirected to the Entry Detail Page. This is not working for Silverlight since I have no idea how to add mouse interaction on the Kit3D Object.

Enjoy it and vote your favorite entry now!

Comparison

Flash implementation: 1 hour (Implemented First)
Silverlight implementation: 2 hours
What’s the difference?

• Loading Image [AS3] vs [C#]

Source codes

•   3D Spiral Image Rotation [Flash 9, AS3] (183.2 KiB, 1,424 hits)
•   3D Spiral Image Rotation [Silverlight 2, C#] (66.6 KiB, 2,591 hits)

Silverlight

Loading Image [AS3] vs [C#]

Loading image in Flash is simple and easy. Below is an example.

// AS3

var request : URLRequest = new URLRequest( imageURL);
var imageLoader : Loader = new Loader();
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_complete);
imageLoader.load(request);

private function on_complete(e : Event):void{
	// File downloaded successfully
	var loader : LoaderInfo = e.target as LoaderInfo;

	// convert it to bitmap
	var bitmapData : BitmapData = new BitmapData(loader.content.width, loader.content.height);
	bitmapData.draw(loader.content);
}

For Silverlight, please note that your Image must be added to the stage to trigger the download progress. Let’s see how we can achieve this.

// C#

BitmapImage bitmapImage = new BitmapImage(new Uri(imagePath, UriKind.Absolute));
bitmapImage.DownloadProgress += new EventHandler(image_DownloadProgress);
Image image = new Image(){ Source = bitmapImage } ;

// don’t forget to add the Image Control to the stage
LayoutRoot.Children.Add(image);

void image_DownloadProgress(object sender, DownloadProgressEventArgs e)
{
	if (e.Progress == 100)
	{
		// File downloaded successfully
	}
}

I was very busy for preparing a magic performance last week. Finally, the show was good and I am back for contributing shinedraw again.

Last time, I have implemented a application namely “Color Fill Toy“. Since I am not so familiar with Expression Blend, the Silverlight version is far yet to be completed

However, one of my reader Rob from web-snippets has implemented the Silverlight version using his professional skills in Blend.

Silverlight

You may also find out how to build up this application in his step by step tutorial!

• Building the Color Fill Toy Part 1: Drawing the outlines
• Building the Color Fill Toy Part 2: Programming the logics

Source codes are provided inside his articles as well.

What do you think about Flash and Blend?

Since Rob is such a professional in Blend, I haven’t missed the chance of asking him to evaluate Flash and Blend. Below is his point of view:

In my opinion, for a .NET developer like myself the learning curve for Blend is lower than it is for Flash.

Blend is more limited, I think when it comes to animating and creating vectors. I do think Blend is more “open”. It’s easier to find animations, etc in Blend than it is in Flash.
For a designer or a Flash developer it would be a higher learning curve because they are used to tools that work different.

However, we’re only at version 2 with Blend where Flash is already at version 10.

It’s time for comparing 3D technology again! That’s the second application I implemented using Kit3D and PaperVision3D. 

The coding is very straight forward. It also includes a lot of useful references for modeling 3D objects like creating a texture mapped plane, transformation, rotation, alpha, double faced and camera moving.

Once again, I think Paper Vision 3D is better than Kit 3D. The main reason is that I think the coding in AS3 is much more easier to understand.

I am quite satisfied with the coding this time. It’s worth for you to keep a copy!!!

Images used in this sample are collected from Yuki Holland.

Comparison

Flash implementation: 45 minutes (Implemented First)
Silverlight implementation: 45 minutes
What’s the difference?

• Create Texture mapped plane [AS3] vs [C#]

Source codes

•   3D Image Cube [Flash 9, AS3] (908.3 KiB, 2,790 hits)
•   3D Image Cube [Silverlight 2, C#] (338 KiB, 2,982 hits)

Silverlight

Create Texture mapped plane [AS3] vs [C#]

Here I will show you how to create a textured mapped plane using PaperVision3D. You can also see how can I position the 3D object.

// AS3
// image is a exported image resources inside the fla
var bitmapData : BitmapData = new image(0, 0);
var bitmapMaterial : BitmapMaterial = new BitmapMaterial(bitmapData);
bitmapMaterial.doubleSided = true;
var plane : Plane = new Plane( bitmapMaterial, IMAGE_WIDTH, IMAGE_HEIGHT, SEGMENT, SEGMENT );

// position the plane
plane.rotationX = rotationX;
plane.rotationY = rotationY;
plane.rotationZ = rotationZ;
plane.x = newX;
plane.y = newY;
plane.z = newZ;

For Kit 3D, the coding is much more longer. Please let me know if you don’t understand what they are doing.

// C#

// create image brush resources
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri(imagePath, UriKind.Relative));

// create bitmap material
GeometryModel3D model = new GeometryModel3D();
model.Geometry = generatePlaneMesh();
model.Material = new DiffuseMaterial(new Kit3DBrush(imageBrush, (int)IMAGE_WIDTH, (int)IMAGE_HEIGHT));
model.SeamSmoothing = 1;
model.BackMaterial = model.Material;

// Create the transform
Transform3DGroup tg = new Transform3DGroup();
tg.Children.Add(new TranslateTransform3D(x, y, z));
tg.Children.Add(new RotateTransform3D(new AxisAngleRotation3D(new Vector3D(rotationX, rotationY, rotationZ), 90), new Point3D(x, y, z)));
}

// create the model based on the material and transform
ModelVisual3D modvis = new ModelVisual3D();
modvis.Transform = tg;
modvis.Content = model;

// a standard texture mapping mesh
private MeshGeometry3D generatePlaneMesh()
{
        MeshGeometry3D mesh = new MeshGeometry3D();
        mesh.Positions = new Point3DCollection
        {
            new Point3D(-1, 1, 0),
            new Point3D(1, 1, 0),
            new Point3D(-1, -1, 0),
            new Point3D(1, -1, 0)
        };

        mesh.TriangleIndices = new Int32Collection
        {
            0, 2, 1,
            1, 2, 3
        };

        mesh.TextureCoordinates = new Kit3D.Windows.Media.PointCollection
        {
            new Point(0, 0),
            new Point(1, 0),
            new Point(0, 1),
            new Point(1, 1)
        };

        return mesh;
}

This is a new request made by M. Rajesh. He is interested in making accordion style image banner with some mouse interaction. He has given me some samples in Microsoft Homepage and Microsoft Window Server for references.

His idea (or Microsoft idea) is interesting and I have quickly implemented a sample for him. You may view the original image either by clicking or waiting for one second after mouse over on the image.

The effect is not as simple as I thought. To reduce the implementation time, I haven’t pay much attention on the coding style. I believe there are a lot of space for improving the coding. Is there anyone willing to help me to do so?

The images used in the application are provided by my friend Yuki Holland.

Comparison

Flash implementation: 45 minutes
Silverlight implementation: 1 hour 10 minutes (Implemented First)
What’s the difference?

• Hand Cursor [AS3] vs [C#]

Source codes

•   Accordion Banner [Flash 9, AS3] (250.5 KiB, 1,921 hits)
•   Accordion Banner [Silverlight 2, C#] (135.4 KiB, 4,598 hits)

Silverlight

Hand Cursor [AS3] vs [C#]

You may noticed that there is a hand cursor on both of the sample. This feature can be easily achieved.

// AS3
public function AccordionBanner() {
	this.buttonMode = true;
}

And for Silverlight

// C#
public AccordionBanner()
{
	InitializeComponent();
	this.Cursor = Cursors.Hand;
}