Shine Draw

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.

Comparison

Flash implementation: 50 minutes

Silverlight implementation: 70 minutes (Implemented First)

Source codes

•   Image Manipulation - Scale [Flash 9, AS3] (30.7 KiB, 804 hits)
•   Image Manipulation - Scale [Silverlight 2, C#] (20.7 KiB, 1,006 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?

I didn’t create any entry for Mix 09 Challenge, the main reason is that I was officially invited to be the judge of MIX 09 Challenge.

Acting as judge is not easily. There are all together 105 entries and most of them are creative and interesting. It’s really a headache for me to pick up the winner.

Anyway, today I have created a 3D spiral image rotation application for all of you to navigate the entries easily. For the Flash version, you may click on the image and you will be redirected to the Entry Detail Page. This is not working for Silverlight since I have no idea how to add mouse interaction on the Kit3D Object.

Enjoy it and vote your favorite entry now!

Comparison

Flash implementation: 1 hour (Implemented First)
Silverlight implementation: 2 hours
What’s the difference?

• Loading Image [AS3] vs [C#]

Source codes

•   3D Spiral Image Rotation [Flash 9, AS3] (183.2 KiB, 1,424 hits)
•   3D Spiral Image Rotation [Silverlight 2, C#] (66.6 KiB, 2,591 hits)

Silverlight

Loading Image [AS3] vs [C#]

Loading image in Flash is simple and easy. Below is an example.

// AS3

var request : URLRequest = new URLRequest( imageURL);
var imageLoader : Loader = new Loader();
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_complete);
imageLoader.load(request);

private function on_complete(e : Event):void{
	// File downloaded successfully
	var loader : LoaderInfo = e.target as LoaderInfo;

	// convert it to bitmap
	var bitmapData : BitmapData = new BitmapData(loader.content.width, loader.content.height);
	bitmapData.draw(loader.content);
}

For Silverlight, please note that your Image must be added to the stage to trigger the download progress. Let’s see how we can achieve this.

// C#

BitmapImage bitmapImage = new BitmapImage(new Uri(imagePath, UriKind.Absolute));
bitmapImage.DownloadProgress += new EventHandler(image_DownloadProgress);
Image image = new Image(){ Source = bitmapImage } ;

// don’t forget to add the Image Control to the stage
LayoutRoot.Children.Add(image);

void image_DownloadProgress(object sender, DownloadProgressEventArgs e)
{
	if (e.Progress == 100)
	{
		// File downloaded successfully
	}
}

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.

Comparison

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

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

Source codes

•   3D Image Cube [Flash 9, AS3] (908.3 KiB, 2,790 hits)
•   3D Image Cube [Silverlight 2, C#] (338 KiB, 2,982 hits)

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;
}

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.

Comparison

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

• Hand Cursor [AS3] vs [C#]

Source codes

•   Accordion Banner [Flash 9, AS3] (250.5 KiB, 1,921 hits)
•   Accordion Banner [Silverlight 2, C#] (135.4 KiB, 4,598 hits)

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;
}

As promised before, I will make a Flash version after implementing the 3D Image Rotator in Silverlight.

The Silverlight version is implemented using Kit3D while the Flash version is made by Papervision3D. Personally, I love the Silverlight sample more since it looks smoother. However, I think Papervision3D is much more easy to understand and utilize.

By the way, the images used in the Flash version are taken from my graduated school - The Hong Kong University of Science and Technology. Hope you will like it~

Demo

Source codes

•   3D Image Rotator [Flash 9, AS3] (638.2 KiB, 1,542 hits)
•   3D Image Rotator [Silverlight 2, C#] (133.2 KiB, 6,187 hits)

Silverlight