Here is another Image Rotator. It is much nicer than fade in transition effect and you can use it for you image sideshow.
Introduction Microsoft Silverlight 2
I attended a Silverlight Introduction Training and got the book "Introduction Microsoft Silverlight 2" (by Laurence Moroney). It is written based on Beta 2 with all fundamental knowledge like XAML, Controls, Blend, Browser Integration, Deep Zoom, etc..
However, I think the book is too fundamental. I just glance though it and properly I won’t read it again. (I don’t mean the book is bad but I just want some more advanced information.)
Comparison
Flash implementation: 45 minutes
Silverlight implementation: 1 hour
What’s the difference?
- Image [AS3] vs Rectangle + ImageBrush [C#]
Source codes
Grid Transition Rotator [Flash 9, AS3] (377.1 KiB, 3,429 hits) - Grid Transition Rotator [Silverlight 2, C#] (670.9 KiB, 7,919 hits)
Flash
Silverlight
Image [AS3] vs Rectangle + ImageBrush [C#]
Let us recall how do we break down an image into pieces in AS3.
// AS3
// Break down an images into a smaller pieces
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;
// create new bitmap by copy pixels
var bd:BitmapData = new BitmapData(_gridWidth, _gridHeight);
var rectangle : Rectangle = new Rectangle(offsetX, offsetY, _gridWidth, _gridHeight);
bd.copyPixels(bitmapData, rectangle, new Point(0, 0));
var gridImage : Bitmap = new Bitmap(bd);
gridImage.x = offsetX;
gridImage.y = offsetY;
addChild(gridImage);
}
}
Unlike the previous rotator, I didn’t use the Clipping method to simulate the images breaking as in AS3. Instead, I used the Rectangle and ImageBrush to create the pieces. I believe this method is much faster than the previous one. However, you need to set all the properties carefully.
// C#
private double _gridWidth = IMAGE_WIDTH / (double)NUM_COLUMN;
private double _gridHeight = IMAGE_HEIGHT / (double)NUM_ROW;
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;
// Create the Rectangle
Rectangle rectangle = new Rectangle();
rectangle.Width = _gridWidth;
rectangle.Height = _gridHeight;
rectangle.SetValue(Canvas.LeftProperty, offsetX);
rectangle.SetValue(Canvas.TopProperty, offsetY);
ImageBrush imageBrush = new ImageBrush();
// use rectage to display part of the image
// load the image from the xap library
imageBrush.ImageSource = new BitmapImage(new Uri(url, UriKind.Relative));
TranslateTransform t = new TranslateTransform();
t.X = -i;
t.Y = -j;
imageBrush.RelativeTransform = t;
imageBrush.AlignmentX = AlignmentX.Left;
imageBrush.AlignmentY = AlignmentY.Top;
imageBrush.Stretch = Stretch.None;
rectangle.Fill = imageBrush;
Children.Add(rectangle);
}
}
September 8th, 2008 at 1:42 am
C# file does not exist . . .
Nice series of articles.
September 8th, 2008 at 3:13 pm
Hi, steve, there are some problems on the server previously, you may download the file again. Thanks.
September 16th, 2008 at 6:35 am
[...] Flash vs Silverlight: Grid Transition Rotator [...]
November 19th, 2008 at 12:42 pm
[...] application has a nice transition effect that can be used with image slide shows….(read more) Posted in News | Leave a [...]
November 20th, 2008 at 4:29 am
[...] Grid Transition Rotator [...]
December 12th, 2008 at 6:12 pm
Re : Silverlight can support mobile flash r ?
January 3rd, 2009 at 3:20 pm
What do you need to compile the Flash version?
January 15th, 2009 at 3:32 am
[...] it with various kind of rotators. Those rotators will includes my previous implementation like Grid Transition Rotator, Exploded Image Rotator, [...]
May 22nd, 2009 at 1:09 am
Great transition effect!!! very smooth and aesthetically pleasing!!!! I really like your site and work, it’s very good!
June 20th, 2009 at 4:09 pm
[...] Transition Rotator [...]
June 21st, 2009 at 1:22 am
[...] Transition Rotator [...]
June 23rd, 2009 at 12:37 am
I tried to port this to VB, but I can’t figure out the last line, Children.Add(rectangle).
What am I adding children TO ?
Children.Add(rectangle)
just returns an error that Children is not defined.
Thanks,
Mark
July 22nd, 2009 at 5:47 pm
Hey nice work …. Seriousely It helps alot ….
November 13th, 2009 at 2:03 pm
Great work! How can you accomplish the same effect in WPF? It seems to only show the first top left portion of the image, when i run the same code in a wpf app. Then just switches images…
December 2nd, 2009 at 7:48 pm
I am trying to build and run the flash project. I am new to flash. I get this error at run time:
ReferenceError: Error #1065: Variable image1 is not defined.
at flash.system::ApplicationDomain/getDefinition()
at com.shinedraw.images::GridImageAnimator/showImage()[C:\Documents\src\com\shinedraw\images\GridImageAnimator.as:85]
at com.shinedraw.images::GridTransitionRotator()[C:\Documents\src\com\shinedraw\images\GridTransitionRotator.as:56]
I have included the GridTransitionRotator.fla in the project.
thanks for the help
December 3rd, 2009 at 1:22 pm
if someone goes thru the same issue. Since, I needed to add my own images, I just embedded the new resources in this way: (in the GridTransitionRotator class)
[Embed(source="../image1.png")]
private var image1:Class;
Instead of using currentDomain.getDefinition() in the GridImageAnimation class, I changed the parameter to get a BitMap and just use:
var bitmapData : BitmapData = image.bitmapData;
In the GridTransitionRotator class, I added this call to get the bitmap:
var ImageClass:Class = this[IMAGES[_counter]] as Class;
var image:Bitmap = new ImageClass();
and call showImage(image) instead.
Great sample.
August 11th, 2010 at 1:43 am
I feel far more men and women should be required to read this, very beneficial info.
March 4th, 2011 at 3:23 pm
hello, i would really appreciate if you could tell me how to reverse this effect
instead of the image disappearing and a new one appears, i need the image to be originally collapsed and then to be displayed using this effect
thx