This is a very interesting sample suggested by Karthik. He asked if it is possible to reverse an animation created by Storyboard. He provided me a rotating cube created by Swift3D (In the latest version, it supports exporting 3D animation to XAML) and my task is to make it alive.
Besides, the animation speed can be controlled by the mouse movement as well. (Try to drag over the screen.)
Since Storyboard Animation and Timeline Animation are completely different, the approach on reversing the animations differs as well.
Vote for this sample
Comparison
Flash implementation: 40 minutes
Silverlight implementation: 180 minutes (Implemented First)
What’s the difference?
- Reverse Animation: gotoAndStop [AS3] vs Storyboard.Seek [C#]
Source codes
Rotating Cube [Flash 9, AS3] (54.7 KiB, 398 hits)
- Rotating Cube [Silverlight 2, C#] (42.3 KiB, 375 hits)
Flash
Silverlight
Reverse Animation: gotoAndStop [AS3] vs Storyboard.Seek [C#]
By using gotoAndStop and Timer Class together, it’s not difficult to reverse the animations. Let’s take a look on the sample below.
// AS3
// get the cube animation from the stage
var _cube:MovieClip = getChildByName("cube") as MovieClip;
// animation movement speed
var _speed = 25;
// moving direction: 1 = normal, -1 = reverse
var _sign = -1;
var _timer:Timer = new Timer(_speed);
_timer.addEventListener(TimerEvent.TIMER, on_timer);
_timer.start();
private function on_timer(e : TimerEvent):void{
// get the target frame
var _currentFrame:int = _cube.currentFrame + _sign;
if(_currentFrame > _cube.totalFrames){
_currentFrame = 0;
}else if(_currentFrame <= 0){
_currentFrame = _cube.totalFrames;
}
// animate the movieclip
_cube.gotoAndStop(_currentFrame);
}
// change the speed of the animation
_timer.delay = newValue;
However, I got a nightmare in C#. The Seek method simply doesn’t work if you set a position less than the previous value. After many attempts, I got the solution finally.
The code is a little bit strange, but it just work. If you have a better approach, please let me know.
// C#
// start the enter frame event
Dispatcher _timer = new DispatcherTimer();
_timer.Interval = new TimeSpan(0, 0, 0, 0, 40);
_timer.Tick += new EventHandler(_timer_Tick);
_timer.Start();
// Rotation is the Storyboard
Rotation.Begin();
Rotation.Pause();
// Speed
int _speed = 40; // or -40 to make it reverse
// Seek Position
TimeSpan _timeSpan = new TimeSpan();
// Animation length
TimeSpan _maxTimeSpan = new TimeSpan(0, 0, 10);
void _timer_Tick(object sender, EventArgs e)
{
if (_speed >= 0)
{
// Increase the seek position
_timeSpan += new TimeSpan(0, 0, 0, 0, _speed);
// if it reached to maximum, set it to 0
if(_timeSpan.Ticks > _maxTimeSpan.Ticks){
_timeSpan = new TimeSpan();
Rotation.Seek(_timeSpan);
}
else
{
// Decrease the seek position
_timeSpan -= new TimeSpan(0, 0, 0, 0, Math.Abs(_speed));
// if it reached to 0, set it to maximum time
if (_timeSpan.TotalMilliseconds < 0)
_timeSpan = new TimeSpan(_maxTimeSpan.Ticks);
// Hacking for reverse
Rotation.Stop();
Rotation.Begin();
Rotation.Seek(_timeSpan);
Rotation.Pause();
}
}
October 3rd, 2008 at 7:12 pm
look at the overall user experience:
Silverlight
1) ie: after silverlight plugin was installed, it worked
2) firefox: after plugin with warnings about running an executable was installed, it worked
3) safari: not supported
4) chrome: box showed but would not play.
Flash:
1) ie: worked
2) firefox:worked
3) safari: worked
4) chrome: worked
October 3rd, 2008 at 7:57 pm
Acording to
http://en.wikipedia.org/wiki/Silverlight#Compatibility
Safari and chrome are supported. I believe you have to get the latest dev version of chrome as the google folkes havnt pushed that into the mainstream version yet. Note that its opera and linux that are not supported yet (linux because moonlight is still in like alpha stages), and opera is not supportted officaly but still works.
Are you saying you were able to run flash without installing the plugin? If not then please dont confuse the issue in saying that one just worked and in the other you had to install the plugin.
The biger problem is that animation in silverlight only go one way,would be nice if they let you set any direction, but im glad you found a workaround.
October 3rd, 2008 at 10:05 pm
well, yes, to be fair, at some point when the browsers were first installed the flash plugin was added as well. After three attempts, and a reboot, I finally got silverlight to work on safari.
Which still speaks to my point to “consider the overall user experience” of visiting a page with flash, or visiting a page with silverlight.
The ubiquity of flash means that for the average user, it’s probably already installed, and the rotating cube immediately appears and works. Since the average user doesn’t have silverlight installed, and most likely doesn’t even know what it is, it becomes a barrier to the site.
Whether a box can spin both ways, seems pretty pointless if you can’t see it in the first place.
But if you only want to compare just the programming functionality then I’ll also agree with you that Flash apps win there too.
October 4th, 2008 at 1:13 am
Paul, thanks for providing your expereince in viewing the Silverlight Application. It’s truth that Silvelright still has many problems for browser compatibility. To be frank, I am not satisfy with this and hope Microsoft can solve all these problems (as well as all the bugs) in the next release.
October 4th, 2008 at 3:40 am
Considering that SL2.0 is still in beta and only the second version of SL. I’d say the install base is pretty good compared to Flash. Still has a long ways to go, but that just takes time.
There are a lot of devs looking at Silverlight pretty hard these days and we will start seeing some cool things pretty soon.
Flash, has been around for years and years, so of course the install issues are pretty small (but still exist). People who install flash are smart enough to install Silverlight so I dont’ see installing a plugin to be a barrier, just a choice.
Look at people using the Iphone, are they all super confused on how to add a new application? Probably not. It’s the same principle, you just have to use your brain and follow the instructions. “Click here to install Silverlight” easy for the average user to understand.
Your missing the point of these exercises, it’s not “pointless if you can spin a box both ways”, it is a simple example to show that SL is comparable to Flash in code and experiences.
The install experience is essentially the same between Flash and SL, the user no matter how experienced or not at some point has to be smart enough to click a button that says “Install such and such plugin”
October 4th, 2008 at 7:10 am
Not a meaningful comparison.
You are comparing something on version 9 with a beta (that means 0.xx).
Silverlight is going to be huge. The difference between a WPF application and a Silverlight application is quite small. There are some examples on the net that show how few tweaks you need to make to move the app from the desktop to the web - the fact you can do that with so few edits is phemonenal. Nothing else can do that so effectivelyl. And Silverlight will run on Windows, Linux and Mac OS X, so all bases covered - how many consumers run Solaris?
So long as Microsoft keep Linux and Mac OS X supported (which they will) Silverlight will do well. I don’t expect Flash to go away, it is the encumbent and also fulfills a different role. But for deploying the type of app I want to deploy, Silverlight is everything Java in the Browser promised to be (over ten years ago) and has never managed to be. But apart from toying with it, I won’t do anything serious until Silverlight is V1.0.
If you still think Silverlight is rubbish head on over to MSNBC and watch some video - the video player there is done using Silverlight. Its excellent. I’ve been watching the presidential debates on it (which if you are in the UK is pretty much the only way to view them) and it has been faultless. It was produced to showcase the Olympics. In some respects it actually better than BBC iPlayer and thats quite a compliment.
Stephen
October 6th, 2008 at 2:44 am
Stephen, I agree that Silvleright is going to be huge. Acutally, my intention is not only to show which one is better, but also demonstrating how to achieve the same effect in each technology.
Like what you said, if Silverlight is getting more important, then it’s also vital to provide more comparison samples for Flash Developers to study Silverlight.
October 8th, 2008 at 5:41 am
[...] Flash vs Silverlight: Rotating Cube [...]