Shine Draw

This is an advanced image rotator effect. If you always use fade in/out effect only, you probably have to look into this one. It included both Flash and Silverlight version with complete source codes. This is just one of the rotator effects in my hand, I will continue to post more in the coming days.

The images used in the example below were taken in 2007 during my trip to Mongolia.

Comparison

Flash implementation: 45 minutes
Silverlight implementation: 1.5 hour
Blog writing: 20 minutes
Code variation in the source code:

• Image Cropping: copyPixels [AS3] vs Image.clip [C#]

Source codes

•   Explode Image Rotator [Flash 9, AS3] (263.8 KiB, 3,284 hits)
•   Explode Image Rotator [Silverlight 2, C#] (706.3 KiB, 3,133 hits)

Silverlight

Image Cropping: copyPixels [AS3] vs Image.clip [C#]

In the above example, the explosion effect is created by breaking the image source into many tiny bitmap objects. It’s not too difficult to achieve this. Once you got the idea, you can create many amazing animation effect after breaking the image apart. Let’s take a look how I implement this.

// AS3
// define the width and height of each tiny objects
var gridWidth:Number = IMAGE_WIDTH / NUM_COLUMN;
var gridHeight:Number = IMAGE_HEIGHT / NUM_ROW;

for (var i:int = 0; i < NUM_COLUMN; i++)
{
    for (var j:int = 0; j < NUM_ROW; j++)
    {
        var offsetX:Number = i * gridWidth;
        var offsetY:Number = j * gridHeight;

        var newBitmapData:BitmapData = new BitmapDatagridWidth, gridHeight);
        var rectangle : Rectangle = new Rectangle(offsetX, offsetY, gridWidth, gridHeight);
        newBitmapData.copyPixels(bitmapSourceData, rectangle, new Point(0, 0));

        var bitmap:Bitmap = new Bitmap(newBitmapData);
        bitmap.x = offsetX;
        bitmap.y = offsetY;
        addChild(bitmap);
    }
}

However, in the case of C#, it seems that it doesn’t have Bitmap library for Silverlight (If you know there is any, please let me know). Therefore, I used another approach. I didn’t break the image part, in stead, I created many image objects and use the clipping property to achieve the same goal. However, I think this method is quite resource consuming since each time a whole image is created again.

// C#
for (int i = 0; i < NUM_COLUMN; i++)
{
    for (int j = 0; j < NUM_ROW; j++)
    {
        double offsetX = (double) i * gridWidth;
        double offsetY = (double) j * gridHeight;

        Image image = new Image();
        image.Source = new BitmapImage(new Uri(url, UriKind.Relative));

        // clip the image
        RectangleGeometry r = new RectangleGeometry();
        r.Rect = new Rect(offsetX, offsetY, gridWidth, gridHeight);
        image.Clip = r;

        // please note that we don't have to set the position in this case
        // However, please be careful about the position perspective
        this.Children.Add(image);
    }
}

Shares and Enjoy~

Did you like this post?

Subscribe here: