Shine Draw

After working for one whole day, I have created another 4 image rotators. We have all together 6 image rotators now!

There are namely :

• Expand Rotator
• Explode Rotator
• Flip Rotator
• Random Moving Rotator
• Spin Rotator
• Transition Rotator

All image rotators are redesigned such that they can be reused easily using XAML. The XAML coding will look like something below:

<shinedraw:SpinRotator x:Name=”Rotator” NumberColumn=”5″ NumberRow=”5″ Width=”550″ Height=”400″ Pause=”4″  >
    <Image Source=”./images/image1.jpg”/>
    <Image Source=”./images/image2.jpg”/>
    <Image Source=”./images/image3.jpg”/>
</shinedraw:SpinRotator>

I will try to release the assembly in these few days. Be patient~

You may now view all the samples via my Silverlight Control Explorer. (Please note that you need Silverlight 3 beta plugin to run the Explorer.)

Hi Guys! I am back. Sorry for disappearing for more than a month. I am busy with one of my personal project Pencake Free Ecard. You may use the application I build using Flash to Create your own Ecard. Take a look, I believe you will be interested on that.

Anyway, today I will bring you a 3D Image Slideshow using the perspective 3d technology in both Flash and Silverlight. Implementing this effect in the past is not that easy. However, thanks for the advancement of the technology, you may now create it on the fly.

Images used inside the applications are all collected from Pencake Ecard Website.

Vote for this sample

Comparison

Flash implementation: 1 hour

Silverlight implementation: 40 minutes (Implemented First)

What’s the difference:

• DisplayObject.z vs PlaneProjection.LocalOffsetZ / GlobalOffsetZ

Source codes

•   SlideShowPerspective3D [Flash 10, AS3] (432.8 KiB, 605 hits)
•   SlideShowPerspective3D [Silverlight 3 Beta, C#] (401.2 KiB, 751 hits)

Silverlight

Flash: DisplayObject.z vs

In Flash, you may use the z property to modify the Z position of an object. However, setting the z property doesn’t mean that the objects will be sorted by the z value. The display order of the UI objects are still governed by the item added order. This is a big issue since you will have no idea which object should be on top after applying rotationX, rotationY or rotationZ.

You will find that I have done some simple hacking in my code to solve out the z-index problem.

Actually, I don’t fully understand the mechanism of perspective 3D in Flash. May be there are some solutions that could help us to solve out the sorting problem.

Silverlight: PlaneProjection.LocalOffsetZ / GlobalOffsetZ

Silverlight seems to have a more powerful perspective 3D capability. Firstly, items applied with perspective 3D will be sorted automatically. We don’t really have to do any calculations. Sorting is done perfectly even we have applied RotationX, RotationY or RotationZ properties.

Secondly, Silverlight provides two properties LocalOffsetZ and GlobalOffsetZ for us to set the z position of an object. This is very useful since it allows us to rotate an object with respect to another origin defined by the GlobalOffsetZ, GlobalOffsetX and GlobalOffsetY. Unlike Flash, it can only rotate with respect to a fixed origin. But of course, we could still solve this problem in Flash by some nested children method.

// C#
// create a new projection
PlaneProjection planeProjection = new PlaneProjection();

// create a new image
Image image = new Image();
image1.Source = new BitmapImage(new Uri("image_path.jpg", UriKind.Relative));
image1.Projection = planeProjection;

// rotate 90 degree with respect to the center of an image
planeProjection.RotationY = 90;

// rotate 90 degree with respect to the origin which has z value of 100 behind the image
planeProjection.RotationY = 90;
planeProjection.GlobalOffsetZ = -100;
planeProjection.LocalOffsetZ = 100;

Silverlight 3 Beta was officially launched in MIX09 last week. It has a lot of amazing features such as Perspective 3D, Deep Linking, Out of Browser, etc.. I am amazed how fast Silverlight can evolve within half year. Therefore, I will try to focus on discussing the Silverlight 3 features in the coming days.

Besides, I have installed Flash 10 in my computer. I believe I can continue to create a lot of good samples by using these latest RIA technology.

Nevertheless, the first comparison on Flash 10 and Silverlight 3 Beta is on the capabilities of 3D rendering. There are all together 4 comparisons:

1. Perspective 3D on an image with drop shadow effect.
2. Perspective 3D on various kind of controls.
3. Perspective 3D on video.
4. Perspective 3D stress test by rendering 100 images at the same time.
   (Beware, may be it will crash your browser.)

Please remind to upgrade your Silverlight plugin in order to view the sample below. Read this article Silverlight 3 Beta install experience for users if you have any difficulties.

Comparison

Source codes

•   Perspective 3D [Flash 10, AS3] (2.8 MiB, 1,118 hits)
•   Perspective 3D [Silverlight 3 Beta, C#] (2.7 MiB, 1,424 hits)

Silverlight

JavaFx has been released more than 3 months. Today, I gonna release a new comparison on JavaFx, Flash and Silverlight.

I picked up one of my previous sample Fps Meter and clone it using JavaFx. To reduce my effort, I started my implementation using the Carousel Sample provided in JavaFx Website.

The development isn’t that smooth. I have spent more than 2 hours in modifying the sample. Anyway, before any further discussion, let’s take a look at the demonstrations first.

Comparison

Source codes

•   Carousel [JavaFx 1.1] (399 KiB, 984 hits)
•   FPS Meter [Flash 9, AS3] (129.9 KiB, 2,012 hits)
•   FPS Meter [Silverlight 2, C#] (139.6 KiB, 2,140 hits)

Silverlight

My Feeling

To be frank, I don’t have a very good impression on JavaFx development. I think that’s probably due to the following reasons:

1. There isn’t any UI Editing tool. I always have to work with the script. That isn’t fun if I can only deal with coding. May be I have to check with their milestone when they will provide Visual Editing tool.
2. The application takes too much time to load. I didn’t know why, but when ever I reload the application using IE, it will take a while before displaying anything.
3. In order to run the application, you need not only the .jar file, but it also requires the .jnlp files.
4. I have no idea what properties can be associated for a given object. (May be there is code suggestion for properties, but I just don’t know how to get it open.)
5. Sometimes, the debugger is not able to identify the correct line number of a syntax error.
6. JavaFx Script is a brand new script and it really take a lot of time to learn.
7. It will leave out some “ghost images” when you scroll between the page.

Actually, there are some more bad feelings, but I think I don’t list them all here.

Someone may argue that JavaFx is a relatively new technology and it’s normal to have usability problem. I agree with that. Therefore, I think I will just wait for JavaFx to evolve before spending more time on it.

I still remember that Silverlight also isn’t attractive in version 1.  So, what next will be for JavaFx?

I believe you will always make use of the scaling tool insider Flash or Blend. However, have you ever thought of achieving image scaling by coding?

That’s not an easy technique. You have to take care of the mouse position, image position, scale factor, cursor look, etc..

But don’t worry, here you could find a very simple demo for manipulating the size of the image. My sample is not intended to give you a complete/portable solution for Image Scaling. Instead, it provides you a basic idea how this is working.

Vote for this sample

Comparison

Flash implementation: 50 minutes

Silverlight implementation: 70 minutes (Implemented First)

Source codes

•   Image Manipulation - Scale [Flash 9, AS3] (30.7 KiB, 435 hits)
•   Image Manipulation - Scale [Silverlight 2, C#] (20.7 KiB, 542 hits)

Silverlight

Silverlight: Create a custom property in XAML definition

If you open the Silverlight Source Code, you will find that the image is passed into the Image Manipulation Class directly in XAML. Here is part of the XAML code:

<custom:ImageManipulationScale VerticalAlignment=”Center” HorizontalAlignment=”Center“>
    <custom:ImageManipulationScale.Source>
        <Image Source=”shinedraw_logo.jpg” Width=”396” Height=”300“/>
   </custom:ImageManipulationScale.Source>
</custom:ImageManipulationScale>

It’s an important technique that everyone must know it. It definitely helps you to write a more professional control.

To start with, we have to define the property name and the property type. In the sample above, the property name is Source and the type is Image. Then, we are going to add some codings behind the Class ImageManipulationScale.

// C#
// create a custom property than can be exported to XAML
public static readonly DependencyProperty SourceProperty =
	DependencyProperty.Register(
	"Source", typeof(Image),
	typeof(ImageManipulationScale), null
	);

// define a public property with the name Source
public Image Source
{
	get { return (Image)GetValue(SourceProperty); }
	set
	{
		 SetValue(SourceProperty, value);
		// do whatever you want here
	}
}

That’s all! Pretty simple, right?