Shine Draw

This post is nothing about Flash and Silverlight, it’s about my own project Pencake Ecard.

(I have been rushing this more than 14 hours per day. That’s why I don’t have extra time on this blog recently. Sorry for that)

Renovation of Ecard service

Pencake provides a platform for user to create his/her own Ecard by a drawing tool. The recipient can also see how the e-card is drawn when they receive the Ecard. Users can comment on any Ecard, customize other user-created Ecard by their own creativity, and send to their friends.

How to access Pencake?

I believe you already have your own Facebook account. Simply visit the below link and try this innovation services

http://apps.facebook.com/pencake

What’s more?

Through you may not be interested in the Facebook Application, I still recommend you to have a look on the application.

You will find that there are 3 Flash Components inside the site that worth for your references.

I was pretty busy for the last week and that’s why I didn’t update here for several days.

In this application, there is an red ball bouncing between the Flash and Silverlight. The Flash is responsible to calculate the position of the ball. It will also pass the ball’s position the Silverlight application via JavaScript.

In the next sample, I will try to make the Silverlight as the master controller and demonstrate how to control Flash via JavaScript.

Vote for this sample

Comparison

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

• ExternalInterface[AS3] vs RegisterScriptableObject[C#]

Source codes

•   JavaScript Sample 2 [Flash 9, AS3] (9.8 KiB, 289 hits)
•   JavaScript Sample 2 [Silverlight, C#] (10.3 KiB, 223 hits)

Silverlight

ExternalInterface[AS3] vs RegisterScriptableObject[C#]

Firstly, we have to write a JavaScript to connect to the Silverlight and update it’s internal value. The JavaScript can be easily accessed by the Class ExternalInterface.

// JavaScript
function updateProperty( x, y ) {
	// JavaScriptSample2 is the Object Tag ID
	var silverlightObject = document.getElementById("JavaScriptSample2");
	if(silverlightObject.content != null)
		silverlightObject.content.JavaScriptSample2.UpdateProperty(x, y);
} 

// call the JavaScript inside AS3
ExternalInterface.call("updateProperty", ball.x, ball.y);

While in Silverlight, you have to register the class and method to the browser before they can be accessed outside the application. The registration is very simple.

// C#
// register the object to the client browser
HtmlPage.RegisterScriptableObject("JavaScriptSample2", this);

// make the method visible to the client browser
[ScriptableMember]
public void UpdateProperty(double x, double y)
{

}

This is the first audio sample. It demonstrates the basic workflow of loading an external audio. You can also see the differences in pausing, replaying and seeking the audio element.

It seems that Flash has some bugs when trying to play at a specific position. You may experience that the progress bar will drop to zero when you click on the second half of the bar. However, it works perfectly in my Flash IDE and I don’t have any idea how to solve it.

Vote for this sample

Comparison

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

• Sound [AS3] vs MediaElement [C#]

Source codes

•   Audio Player [Flash 9, AS3] (324.6 KiB, 205 hits)
•   Audio Player [Silverlight 2, C#] (25.3 KiB, 166 hits)

Silverlight

Sound [AS3] vs MediaElement [C#]

Here is a simple demonstration in manipulating an external audio.

// AS3
var _sound:Sound;
var _soundChannel:SoundChannel;
var _position:Number;

var request : URLRequest = new URLRequest(URL);
_sound = new Sound();
_sound.addEventListener(Event.COMPLETE, on_complete);
_sound.load(request);  

// finish loading, play the audio
private function on_complete(e : Event):void{
	_soundChannel = _sound.play();
}

// pause the audio
_position = _soundChannel.position;
_soundChannel.stop();

// replay the audio
_soundChannel = _sound.play_position;

In Silverlight, Video and Audio shared the same Class MediaElement. Don’t forget to add the object to the stage. Otherwise, you can never load the audio. Personally, I like the Audio Object in Silverlight since the API seems simpler to use.

// C#
MediaElement _mediaElement = new MediaElement();
_mediaElement.Source = new Uri(URL, UriKind.Absolute);
_mediaElement.MediaOpened += new RoutedEventHandler(_mediaElement_MediaOpened);
LayoutRoot.Children.Add(_mediaElement);

// finish loading, play the audio
void _mediaElement_MediaOpened(object sender, RoutedEventArgs e)
{
	_mediaElement.Play();
}

// pause the audio
_mediaElement.Pause();

// replay the audio
_mediaElement.Play();

The Gallery has been updated with all the 39 Samples in this blog.

Go to take a look now!

http://www.shinedraw.com/flash-vs-silverlight-gallery/

Another mathematical sample extracted form previous project. You can grab the icons on the application, move your mouse and then drop it. The object will move with various velocity according to your movement speed.

I used CompositionTarget.Rendering in Silverlight to compare with the ENTER_FRAME event in Flash. It seems that the Flash version is a little bit laggy.

Vote for this sample

Comparison

Flash implementation: 30 minutes

Silverlight implementation: 75 minutes (Implemented First)

Source codes

•   Throwing Object [Flash 9, AS3] (304.9 KiB, 173 hits)
•   Throwing Object [Silverlight 2, C#] (161.2 KiB, 261 hits)

Silverlight