Jun 20

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

There are namely :

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.)

image

May 13

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

Flash is Better? (137 votes)
Silverlight is Better! (299 votes)

Comparison

Flash implementation: 1 hour

Silverlight implementation: 40 minutes (Implemented First)

What’s the difference:

  • DisplayObject.z vs PlaneProjection.LocalOffsetZ / GlobalOffsetZ

Source codes

 

Flash

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;
Jan 22

It’s time for comparing 3D technology again! That’s the second application I implemented using Kit3D and PaperVision3D

The coding is very straight forward. It also includes a lot of useful references for modeling 3D objects like creating a texture mapped plane, transformation, rotation, alpha, double faced and camera moving.

Once again, I think Paper Vision 3D is better than Kit 3D. The main reason is that I think the coding in AS3 is much more easier to understand.

I am quite satisfied with the coding this time. It’s worth for you to keep a copy!!!

Images used in this sample are collected from Yuki Holland.

Vote for this sample

Flash is Better! (896 votes)
Silverlight is Better? (620 votes)

Comparison

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

  • Create Texture mapped plane [AS3] vs [C#]

Source codes

Flash

Silverlight

Create Texture mapped plane [AS3] vs [C#]

Here I will show you how to create a textured mapped plane using PaperVision3D. You can also see how can I position the 3D object.

// AS3
// image is a exported image resources inside the fla
var bitmapData : BitmapData = new image(0, 0);
var bitmapMaterial : BitmapMaterial = new BitmapMaterial(bitmapData);
bitmapMaterial.doubleSided = true;
var plane : Plane = new Plane( bitmapMaterial, IMAGE_WIDTH, IMAGE_HEIGHT, SEGMENT, SEGMENT );

// position the plane
plane.rotationX = rotationX;
plane.rotationY = rotationY;
plane.rotationZ = rotationZ;
plane.x = newX;
plane.y = newY;
plane.z = newZ;

For Kit 3D, the coding is much more longer. Please let me know if you don’t understand what they are doing.

// C#

// create image brush resources
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri(imagePath, UriKind.Relative));

// create bitmap material
GeometryModel3D model = new GeometryModel3D();
model.Geometry = generatePlaneMesh();
model.Material = new DiffuseMaterial(new Kit3DBrush(imageBrush, (int)IMAGE_WIDTH, (int)IMAGE_HEIGHT));
model.SeamSmoothing = 1;
model.BackMaterial = model.Material;

// Create the transform
Transform3DGroup tg = new Transform3DGroup();
tg.Children.Add(new TranslateTransform3D(x, y, z));
tg.Children.Add(new RotateTransform3D(new AxisAngleRotation3D(new Vector3D(rotationX, rotationY, rotationZ), 90), new Point3D(x, y, z)));
}

// create the model based on the material and transform
ModelVisual3D modvis = new ModelVisual3D();
modvis.Transform = tg;
modvis.Content = model;

// a standard texture mapping mesh
private MeshGeometry3D generatePlaneMesh()
{
        MeshGeometry3D mesh = new MeshGeometry3D();
        mesh.Positions = new Point3DCollection
        {
            new Point3D(-1, 1, 0),
            new Point3D(1, 1, 0),
            new Point3D(-1, -1, 0),
            new Point3D(1, -1, 0)
        };

        mesh.TriangleIndices = new Int32Collection
        {
            0, 2, 1,
            1, 2, 3
        };

        mesh.TextureCoordinates = new Kit3D.Windows.Media.PointCollection
        {
            new Point(0, 0),
            new Point(1, 0),
            new Point(0, 1),
            new Point(1, 1)
        };

        return mesh;
}
Jan 16

This is a new request made by M. Rajesh. He is interested in making accordion style image banner with some mouse interaction. He has given me some samples in Microsoft Homepage and Microsoft Window Server for references.

His idea (or Microsoft idea) is interesting and I have quickly implemented a sample for him. You may view the original image either by clicking or waiting for one second after mouse over on the image.

The effect is not as simple as I thought. To reduce the implementation time, I haven’t pay much attention on the coding style. I believe there are a lot of space for improving the coding. Is there anyone willing to help me to do so?

The images used in the application are provided by my friend Yuki Holland.

Vote for this sample

Flash is Better? (586 votes)
Silverlight is Better! (662 votes)

Comparison

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

  • Hand Cursor [AS3] vs [C#]

Source codes

Flash

Silverlight

Hand Cursor [AS3] vs [C#]

You may noticed that there is a hand cursor on both of the sample. This feature can be easily achieved.

// AS3
public function AccordionBanner() {
	this.buttonMode = true;
}

And for Silverlight

// C#
public AccordionBanner()
{
	InitializeComponent();
	this.Cursor = Cursors.Hand;
}
Jan 15

image

What is this?

A competition event is being held before MIX 09 (the MIX conference is a gathering of designers and developers who are building the world’s most innovative web sites.)

In this competition, participants are required to create a Silverlight Application with source file size (solution files are not included) less than 10 kilobytes.

Grand Prize

The winner of this competition can get the following:

  • Champion:a pass to the MIX09 event, 3 nights at The Venetian Hotel and a $1500 Visa gift card
  • Community choice winner: $1500 visa gift card
  • Three runners-up: $500 Visa gift card

What’s my idea?

That’s a nice competition and I am going to join it. I have planned to create a Flickr Image Rotator Application. In this application, the user will be able to search images from Flickr and display it with various kind of rotators. Those rotators will includes my previous implementation like Grid Transition Rotator, Exploded Image Rotator, etc..

But of course, I am really not sure if I could finish all of the stuff by a file size of 10K!

If you are interested to join the competition with me, please visit MIX 09 - 10K Challenge for detail!