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)
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;
}
January 16th, 2009 at 6:05 am
The Silverlight Sample doesn’t work the same as the Flash sample for me. Is it purposeful? The Flash exampel slowly opens the panels (though it acts odd too), and the Silverlight example pops open the panels.
January 16th, 2009 at 8:04 pm
The hand cursor in Flash is not working on Safari+MacOSX
January 16th, 2009 at 11:35 pm
Flash doesn’t work on Firefox 3.0.5 + Vista64 as well.
January 19th, 2009 at 5:49 am
What does the InitializeComponent() function do and why do you need to call it?
January 19th, 2009 at 1:26 pm
itmek,
it’s a predefined method for mapping all the ui element in the xaml into local variables. You may not use it, but then you have to always use something like
Canvas canvas = this.FindName(”LayoutRoot”) as Canvas;
January 19th, 2009 at 2:44 pm
[...] working on for the MIX 10K challenge. This is fun… didn’t get very far, only 5, but it is clever. Silverlight vs Flash: Accordion Banner Terence Tsang has an accordion banner up this time, in response to a reader request. I’m going to [...]
January 27th, 2009 at 8:42 pm
As3 code should look like this
this.mouseChildren=false; {}
this.buttonMode = true;
this.useHandCursor=true;
January 29th, 2009 at 11:23 am
Is there any specific license attached to this project?
January 31st, 2009 at 8:49 am
That is very cool. Nice work.
February 3rd, 2009 at 8:50 am
太棒了！
February 16th, 2009 at 7:04 pm
one of the things that is noticably different is the picture quality difference between the two shows… I feel that the Silverlight APP has the edge…
February 16th, 2009 at 7:06 pm
maybe just to qualify that previous comment… you should look closely at the text around the fish for blurring on the flash image…
February 25th, 2009 at 8:13 pm
[...] from Shine Draw [...]
March 13th, 2009 at 2:19 pm
How about pulling image from a database….
I’ve got a neat little rotating banner with numerical hotspots below to allow for jumping to a particular image/promotion but I have’nt seen anything where the image loads from a database.
I’d like selected users to be able to upload images into the database so that they can create their own promo rotating banners.
March 18th, 2009 at 6:12 pm
The same thing i’m repeating it over and over again, most of the comparisons i have seen till now lacks to the unifying the frame rate, here flash has a default frame rate of (24 fps) but silverlight has a default of (60 fps), and that is not a way to make a comparison between them, you have to put them at the same level of frame rate to see how do they work…
if the silverlight renders better in its default frame rate, that doesn’t make it better !
April 29th, 2009 at 5:46 am
Another problem with this comparison besides the one Anas is talking about. ebsolut.com said there’s difference in image quality. That’s because the author of the Flash piece set his image compression set too high on the images. This takes about 2 seconds to set. Then, the image quality can be as high or low as you want it to be. They should be set to the same settings as SL is using to compare correctly.
July 8th, 2009 at 1:09 pm
Flash’s image is resized simultaneously as the accordion is moving into place. The Silverlight example’s image does not resize at all. Maybe this is why the image quality suffers compared to the silverlight example. Also, I don’t have the hand cursor on flash example. I’m sure silverlight can achieve the image resizing if done correctly. So it’s pretty much evened up for me.
October 8th, 2009 at 5:35 am
How can you add more images to this project, simply adding and ‘image4′ in al the code ( copy pasting and replacing the numbers with a 4 instead of a 3 does not work!
December 24th, 2009 at 7:48 am
this could work
//AS3
public function AccordionBanner():void
{
Mouse.cursor = MouseCursor.BUTTON;
}
April 11th, 2010 at 6:23 am
I love this.
very cute.