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.
Vote for this sample
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, 568 hits)
- Image Advance Carousel [Silverlight 2, C#] (298.5 KiB, 595 hits)
Flash
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();
September 20th, 2008 at 10:03 am
how about mouse moving support? you hold down mouse, move it left, the images will rotate from right to left, and vice versa.
and faster you move, faster the rotating speed goes.
September 21st, 2008 at 2:53 am
What file is the Storyboard storyboard = new Storyboard code located in? I don’t seem to see that block of code in the files.
September 21st, 2008 at 7:02 am
Hi Terence,
You have done a lot of very nice work - thank you for taking the time and effort to share these examples.
David Roh
September 22nd, 2008 at 12:45 am
I love how most of these examples have “Silverlight is better” as the winner, yet the Silverlight version is slower and sometimes doesnt even work in a browser other than IE. I’m in Chrome right now and it only updates if i scroll the page, but the Flash version works flawlessly!
September 22nd, 2008 at 1:42 am
unruledboy, it’s a good suggestion. I will try to see if I can implement later on.
Paul Gregoire, I think one of the main reason is that I made more promotion of this blog to silverlight network.
September 22nd, 2008 at 1:44 am
David Roh, thank you for support. I will contine to share to the community.
By the way, I have just viisted your website. Is it a new website? Cos I saw there is one page now. I really want to learn more about that.
September 23rd, 2008 at 4:45 pm
Image is blurry in flash version. Clearly silverlight is a winner here(according to me)
September 23rd, 2008 at 4:58 pm
@Paul, I am in Chrome right now and Silverlight example works ok, but you have to use Chrome developer build version, since Chrome team fixed some of the problems with Silverlight controls.
September 24th, 2008 at 12:27 am
Images are blurry in Flash Version where as they look normal in Sivlerlight.
September 24th, 2008 at 1:02 am
Venkat, the blur effect is mainly due to the fact that I have set the JPG quality to 80% when compiling swf.
September 25th, 2008 at 2:04 pm
[...] at CodeCamp 10 in Waltham MA, and has all his materials available… so what if you didn’t go?? Flash vs Silverlight: Image Advance Carousel Terence Tsang may have yet another demo up, but this is the one I captured this morning before a [...]
September 26th, 2008 at 10:11 pm
I laugh at the “it doesn’t work in Chrome” comments. In my opinion - Chrome doesn’t properly render code. Use a better broser, get a better experience. It seems everytime a browser developer “accidently” disables some microsoft functionality, Microsoft gets the blame, but the truth is, they have really pushed the envelope to make the web experience richer and more engaging. Mozilla took a long time to catch up - and now offers a great plugin architecture. Chrome is new and will need alot of work - unless their plan is to provide a browser that is faster, because it skips alot of functionality.
I develop in both Flash and Silverlight, and love both. Flash is more widely adopted, for now, but Silverlight offers a great approach for designers to rapidly create rich UIs. Flash takes more time to learn and is not the most intuitive development tool.
September 27th, 2008 at 2:27 am
RK. I love both of the technology too. Just to add a little bit more. Though Flash may be difficult for learning, but I think it provides a much better environment for making animations. That’s quite important for those deisgners who don’t know coding.
October 17th, 2008 at 6:57 pm
Brilliant example. I was trying to do something alike but continuously messed up in all my attempts. Thanks for sharing and keep up the good work.
October 18th, 2008 at 10:50 am
Thank you for valuable information.
November 16th, 2008 at 2:30 pm
..was just passing by.. good work