Shine Draw

By just adding a little more on the Carousel, you can create a brand new Crousel effect. Today, I am presenting you the advanced Carousel Effect which support various layers with additional Drill Down and Drill Up effects.

You can also experience how did I simulate the frame based animation by StoryBoard. A pretty good reference for you to learn Silverlight.

Comparison

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

• Tween [AS3] vs Storyboard [C#]

Source codes

•   Image Advance Carousel [Flash 9, AS3] (235.5 KiB, 3,380 hits)
•   Image Advance Carousel [Silverlight 2, C#] (298.5 KiB, 6,256 hits)

Silverlight

Tween [AS3] vs Storyboard [C#]

In AS3, the Class fl.transitions.Tween is very similar to StoryBoard in C#. Below is a simple demonstration which fade out an object in 3 seconds.

// AS3
import fl.transitions.*;
import fl.transitions.easing.*;

var storyBoard:Tween = new Tween(displayObject,  "alpha", None.easeOut, 1, 0, 3, true);
storyBoard.addEventListener(TweenEvent.MOTION_FINISH, on_motion_finish);

function on_motion_finish(e:TweenEvent):void{
	trace("finish");
}

What about in C#? let’s see how can we create Storyboard purely by code. Please be careful when using Storyboard.SetTargetProperty, you have to use “(LayoutRoot.Opactiy)” as the argument, don’t miss out the blankets!

There has been many chances on the Storyboard since Silverlight 1. You will find a lot of “wrong” information from the Internet which can not work properly in beta 2.

// C#
Storyboard storyboard = new Storyboard();
DoubleAnimation doubleAnimatoin = new DoubleAnimation();
doubleAnimatoin.From = 1;
doubleAnimatoin.To = 0;
doubleAnimatoin.Duration = new Duration(new TimeSpan(0, 0, 3));
Storyboard.SetTarget(doubleAnimatoin, displayObject);
Storyboard.SetTargetProperty(doubleAnimatoin, new PropertyPath("(LayoutRoot.Opacity)"));

storyboard.Children.Add(doubleAnimatoin);
storyboard.Begin();

Carousel is a very hot effect among Flash and Silverlight. Although there are many readily available Carousel Class on the web, you may still want to explore the Mathematics behind. That is! Here is an example for your reference.

I will add a drill down effect to extend the functionality of the Carousel.

Comparison

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

• Development IDE: FDT - Flash Development Tools [AS3] vs Visual Studio 2008  [C#]

Source codes

•   Image Carousel [Flash 9, AS3] (187 KiB, 7,476 hits)
•   Image Carousel [Silverlight 2, C#] (241.4 KiB, 8,230 hits)

Silverlight

Development IDE: FDT - Flash Development Tools [AS3] vs Visual Studio 2008  [C#]

Today, I am going to talk about my working environment.

If you are Flash Developer, I think you will understand that it’s completely impossible to use Flash 9 as your coding tool. You will just like working as if using Notepad. Anyway, I am currently using a Eclipse plug-in FDT as my primary Development Tool. The reason I choose this one is because it has a very good library management and also the code completion feature.

Of course, Flex also provide the same features. However, Flex is an extensive tool which always takes up a lot of computer resources. Hence, the speed is much slower.

For Silverlight, I think you don’t have much choice other than using Visual Studio 2008. But you may not know that I did not use Blend for creating any of the samples in this Blog. The reason is very simple. I still haven’t installed the Blend.

This is a very simple rotator with flip effect. You may further customize it by modifying the scaleY and rotation as well.

Personally, I really like making image rotator since I always got many ideas on the transition effect. I hope I can implement as many as possible.

Comparison

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

• Remove Children: removeChildAt [AS3] vs Children.RemoveAt[C#]

Source codes

•   Flip Rotator [Flash 9, AS3] (347.5 KiB, 3,657 hits)
•   Flip Rotator [Silverlight 2, C#] (398.3 KiB, 4,275 hits)

Silverlight

Remove Children: removeChildAt [AS3] vs Children.RemoveAt[C#]

In AS3, you have to be very carefully about null object, especially adding/removing object to the child. Otherwise, you may got into error troubles.

// AS3
// Create a triangle mask
var sprite:Sprite = new Sprite();
// ok
addChild(sprite);	

// also ok, the sprite will be added to the end of the display list
addChild(sprite); 

// will throw an error
addChild(null);	

// ok
removeChild(sprite);

// will throw an error
removeChild(sprite);	

// the best practise
if(sprite && contains(sprite){
	removeChild(spirte);
}

// remove all child
while(numChildren > 0){
	removeChildAt(0);
}

In C#, it will only throw exception for Add operation. On the other hand, the Remove function will only return a flag indicating whether the action is successful.

// C#
Rectangle rectangle = new Rectangle();

Children.Add(rectangle);

// throw an ArgumentNullException
Children.Add(rectangle);

// throw an ArgumentNullException
Children.Add(null);

// return true
Children.Remove(rectangle);

// return false
Children.Remove(null);

// remove all child
while(Children.Count > 0){
	Children.RemoveAt(0);
}

Kaleidoscope is an attractive toy for me when I was young. You can use any image you like and it will produce many amazing effects via mirror reflection.

You won’t be able to figure out the original image if you don’t download the source now~

Comparison

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

• Triangle Mask: mask [AS3] vs PathGeometry [C#]

Source codes

•   Kaleidoscope [Flash 9, AS3] (146.2 KiB, 2,865 hits)
•   Kaleidoscope [Silverlight 2, C#] (175.1 KiB, 2,433 hits)

Silverlight

Triangle Mask: mask [AS3] vs PathGeometry [C#]

The Kaleidoscope is created by masking an image with a triangle and duplicating the masked images.

// AS3
// Create a triangle mask
var mask : Shape = new Shape();
mask.graphics.beginFill(0x000000);
mask.graphics.moveTo(0, 0);

// add the triangle points
mask.graphics.lineTo(100, 100);
mask.graphics.lineTo(0, 100);
mask.graphics.lineTo(0, 0);
mask.graphics.endFill();

// mask the current object
this.mask = mask;

// remember to add the mask to the stage
addChild(mask);

In my previous article Water Effect, we have discussed how to clip the object easily using Ellipse or Rectangle. However, if you want to clip the object using irregular shape, some more work has to be done. Below is a demonstration.

// C#
// Create a path geometry
PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();
pathFigure.IsClosed = true;
pathFigure.StartPoint = new Point(0, 0);

// add the triangle points
PolyLineSegment polyLineSegment = new PolyLineSegment();
polyLineSegment.Points.Add(new Point(100, 100));
polyLineSegment.Points.Add(new Point(0, 100));
polyLineSegment.Points.Add(new Point(0, 0));

pathFigure.Segments.Add(polyLineSegment);
pathGeometry.Figures.Add(pathFigure);

// clip the current object
this.Clip = pathGeometry;

I have organized all my previous samples and grouped into the Gallery.

You may now access the Gallery via the Tab above or though the link below:

Flash vs Silverlight Gallery

Enjoy it~