Shine Draw

Another new image rotator! The application used simple masking skill in creating the transition effects. You may further customize it or create new effects for your own need.

Images used in the application below are collected from Smashing Magazine - 60 Beautiful Christmas Photoshop Tutorials.

Comparison

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

• Creating Animated Mask [AS3] vs [C#]

Source codes

•   Image Rotator [Flash 9, AS3] (265.7 KiB, 1,909 hits)
•   Image Rotator [Silverlight 2, C#] (125.9 KiB, 1,968 hits)

Silverlight

Creating Animated Mask [AS3] vs [C#]

In Flash, creating mask or animated is fairly simple. You may just add a mask layer and use the Shape Tween Effect. Everything can be done in a minutes!!

However, it’s another story in Silverlight. Since you have to use the Geometry object to clip an object, animating the mask is no longer a simple stuff. Firstly, Blend has a very poor support for Geometry and it’s very hard to use. Besides, the StoryBoard model in Silvelight is comparatively hard to make animations comparing to using the Shape Tween.

It has been more than a month that I didn’t post a new image transition effect. That’s because it’s hard to figure out a nice idea.

Therefore, if you have any good suggestion on Image Transition, please let me know.

The images used in the applications are created by me via the Facebook Application Pencake Ecard.

Comparison

Flash implementation: 30 minutes (Implemented First)
Silverlight implementation: 30 minutes

Source codes

•   Image Transition Effect [Flash 9, AS3] (181.4 KiB, 4,570 hits)
•   Image Transition Effect [Silverlight 2, C#] (105.2 KiB, 4,577 hits)

Silverlight

If you are interested to implement game, it will a preliminary post that you shouldn’t miss of. In the sample below, I demonstrated how you can control a game character using the keyboards. The Mario Kart will position according to the keyboard direction as well.

I will try to implement Object Hit Test into the game later on.

Comparison

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

• Storing pressed keys [AS3] vs [C#]

Source codes

•   Simple Game System [Flash 9, AS3] (35.4 KiB, 998 hits)
•   Simple Game System [Silverlight 2, C#] (31.1 KiB, 1,060 hits)

Silverlight

Storing the pressed Keys [AS3] vs [C#]

Working with keyboard input in AS3 is not that simple. It’s because the key down status is hard to be tracked if you are pressing two keys together. A little bit hard to describe the details. You will understand it if you are game marker.

Beside that, The Key.isDown method (originally in AS2) is depreciated and you will need the following work around.

// AS3
private var _keysDown : Object = new Object();

addEventListener(KeyboardEvent.KEY_DOWN, on_key_down);
addEventListener(KeyboardEvent.KEY_UP, on_key_up);

// save up the pressed key
private function on_key_down(e:KeyboardEvent):void{
	_keysDown[e.keyCode] = true;
}

// release the pressed key
private function on_key_up(e:KeyboardEvent):void{
	if (e.keyCode in _keysDown)
		delete _keysDown[e.keyCode];
}

// check if specific key is pressed
private function isDown(keyCode:uint):Boolean {
	return Boolean(keyCode in _keysDown);
}

The method is pretty similar in Silverlight.

// C#
private Dictionary _pressedKeys = new Dictionary();

App.Current.RootVisual.KeyUp += new KeyEventHandler(RootVisual_KeyUp);
App.Current.RootVisual.LostFocus += new RoutedEventHandler(RootVisual_LostFocus);

// save up the pressed key
void RootVisual_KeyDown(object sender, KeyEventArgs e)
{
	_pressedKeys[(int)e.Key] = true;
}

// release the pressed key
void RootVisual_KeyUp(object sender, KeyEventArgs e)
{
	_pressedKeys[(int)e.Key] = false;
}

// check if specific arrow key is pressed
private bool isDown(Key key) {
	if (_pressedKeys.ContainsKey((int)key))
	{
		return _pressedKeys[(int) key];
	}
	return false;
}

This sample is requested by unruledboy couple weeks ago. He asked if I could implement a application similar to the Flickr mini image gallery. Although the logic is very simple, it provides a very nice and comfortable effect.

Comparison

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

• frame rate per second: frameRate [AS3] vs MaxFrameRate [C#]

Source codes

•   Flickr Image Gallery [Flash 9, AS3] (115.9 KiB, 2,383 hits)
•   Flickr Image Gallery [Silverlight 2, C#] (154.8 KiB, 3,462 hits)

Silverlight

frame rate per second: frameRate [AS3] vs MaxFrameRate [C#]

In a loosely compassion, Flash Animation is considered as Frame Based while Silverlight Animation is considered as Time Based. Nevertheless, it’s still possible to change the frame rate per second (fps) for both of the technology.

// AS3
// Change the Frame Rate
stage.frameRate = 24;

The default frame rate for Silverlight is 60. (I have no idea why the default value is so high.) Most of the time, you have to set it into a smaller value. Very often, I will set it to 24 fps.

// C#
// Change the Frame Rate
 App.Current.Host.Settings.MaxFrameRate = 24;

I have implemented 5 images rotators so far. I will reorganize all the code once there are 10 rotators.

If you have any rotator ideas, please let me know. It’s really a headache to generate a creative rotator effect.

Comparison

Flash implementation: 25 minutes(Implemented First)

Silverlight implementation: 20 minutes

Source codes

•   Plummet Rotator [Flash 9, AS3] (348.9 KiB, 1,947 hits)
•   Plummet Rotator [Silverlight 2, C#] (406.4 KiB, 2,551 hits)

Silverlight