Shine Draw

Here is another 3D application without using any 3D Library. You may navigate the application via a mouse click or mouse wheel. A spring effect is also applied. Let’s see how brilliant it is!

It included both Flash and Silverlight version with complete source codes.

My Recent Updates

Today, I was asked to convert an application, written by me in Silverlight Beta 1,  to Silverlight Beta 2. I am so amazed that the project created in Beta 1 can’t be opened in Visual Studio (with the latest Silverlight Beta 2 Tool).

OK, that’s fine. I try to create a new project and copy and paste the files one by one. However, things didn’t go smoothly. Most of the Controls I created before can’t be reused again due to some syntax problem, double/int problem and some Initialization problems. Actually, I really want to say some swear words to Silverlight at that time. (Just imagine that you can’t open a Flash 8 FLA by Flash 9.)

But may be I can think in another way. Because Silverlight is such a lovely Software, it makes me the only one that can master it a little bit better than my colleague. HaHa.

If you have the same experience as me, please feel free to  share with me. (Or even tell me if is there any effective way to convert Beta 1 to Beta 2.)

Comparison

Flash implementation: 1 hour 30 minutes 
Silverlight implementation: 30 minutes 
What’s the difference?

• Mouse Wheel Event: MouseEvent.MOUSE_WHEEL[AS3] vs Native Method [C#]
• Image Rendering

Source codes

•   3D Image Navigation [Flash 9, AS3] (184.4 KiB, 3,241 hits)
•   3D Image Navigation [Silverlight 2, C#] (448.8 KiB, 3,561 hits)

Silverlight

Mouse Wheel Event: MouseEvent.MOUSE_WHEEL[AS3] vs Native Method [C#]

Actually, there is nothing special to attach a mouse wheel event in AS3.

// AS3
stage.addEventListener(MouseEvent.MOUSE_WHEEL, on_mouse_wheel);

However, you will be amazed that Silverlight doesn’t support Mouse Wheel Event. Well, we can bear in mind that Silverlight is keep improving. Anyway, after referring to the article http://silverlight.net/blogs/msnow/archive/2008/07/29/tip-of-the-day-23-how-to-capture-the-mouse-wheel-event.aspx. I found a work around in solving this problem.

It’s very simple (but not too beautiful), just too ask the browser to capture the mouse event and handle it in our code. Since different browsers may return different parameters, you have to check everything carefully. Well, don’t think too much, just copy and paste will be ok.

// C#
HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel);
HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel);
HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel);

private void OnMouseWheel(object sender, HtmlEventArgs args){
    double mouseDelta = 0;
    ScriptObject e = args.EventObject;
    // Mozilla and Safari
    if (e.GetProperty("detail") != null)
    {
        mouseDelta = ((double)e.GetProperty("detail"));
    }
    // IE and Opera
    else if (e.GetProperty("wheelDelta") != null)
        mouseDelta = ((double)e.GetProperty("wheelDelta"));   

    mouseDelta = Math.Sign(mouseDelta);
}

Image Rendering

The images used in the example below are resize 2 times to it’s original scale. It’s very clear that Silverlight performs better than Flash in resizing images.

In previous article, it was discussed that there is an "Allow Smoothing" in Flash 9 than can help to produce a better rendering. However, this function cannot be applied to dynamically loaded image, which is quite useless since most of the time we need to load images from Internet.

Note: Thanks for  Sasha Dzeletovic’s suggestion. Actually there is a "smoothing" property for bitmap image which can enhance the smoothness for the dynamically loaded image. (Original Post: Enable Smoothing on Images for scaling in Flex 2)

Shares and Enjoy~

Did you like this post?

Subscribe here: