Shine Draw

Originally, I just want to make a simple application to test over the out of browser feature. However, I came up something more interesting and useful.

It’s very funny that I always need to create Dependency Property and Storyboard, but I can seldom remember the exact coding. That’s mainly because the code syntax is a bit lengthy and not so intuitive. Therefore, I always have to open some old samples and do some kind of copy and paste.

I believe implementation can become a lot more easier if I can organize those commonly used coding into a single application. This is the reason why this Silverlight Helper exists! So far, it includes the following functionality:

1. Generating Dependency Property
2. Generating Attached Property
3. Create Storyboard using C#
4. ASCII Table

I will continue to add more useful stuff into this helper in the coming days.

Silverlight Helper Demo

You may also save this helper to your desktop!

Source Code:

•   Silverlight Helper [Silverlight 3, C#] (313.3 KiB, 639 hits)

Silverlight

Out of browser setting

If you want to make a fully personalized Silverlight or Flash application, then you shouldn’t miss out this post.

Splash Screen is a very user friendly way to notice how long you have to wait for the application to load. You may also add some graphics, advertisements or animations to entertain the users before the they get bored by waiting.

Flash and Silverlight have completely different mechanisms in adding the splash screen. Before we start, let’s take a look on the comparisons and demo first.

Comparison

Flash implementation: 30 minutes

Silverlight implementation: 50 minutes (Implemented First)

What’s the difference:

• Creating Loading Splash Screen

Source codes

•   Custom Splash Screen [Flash 9, AS3] (4.1 MiB, 1,956 hits)
•   Custom Splash Screen [Silverlight 2, C#] (4.2 MiB, 3,096 hits)

• Flash version: Custom Splash Screen
• Silverlight version: Custom Splash Screen

Creating Loading Splash Screen in Flash

Adding Splash Screen in Flash is not as easy as you can imagine. Unless you are loading an external swf, otherwise you have to do a lot of preparation in making the Splash Screen. Another alternative is that you may try to use Flex. It provides a much more convenient way to add splash screen.

Usually, the main problem is that the ActionScript will only execute once everything is downloaded. In such circumstance, you have no way to display loading details.

The main cause is that when you export Movie Clip, you will usually check the box “Export in First Frame”. It means that this movieclip will be downloaded before the swf will execute.

However, if you don’t check this item, some of your resources may not be included into the swf during compile time.

Therefore, to get rid of this, you should put your MovieClip onto the stage. This makes sure that the Flash will include this resource as well.

Well, it sounds difficult, right? Anyway, if you are still interested, download my sample source code and see how it works.

Creating Loading Splash Screen in Silverlight

Splash Screen in Silverlight is independent with the application. It means that you can apply different kind of splash screen without modifying the application. You may even share your splash screen design with others!

Anyway, let me show you the minimal steps in creating your own splash screen.

1. First of all, create a SplashScreen.xaml file and add the followings:

<Canvas
   xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
   xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
   Width=”550″ Height=”550″>
  <Grid>
    <TextBlock Text=”Loading: 0%” x:Name=”Label”/>
  </Grid>
</Canvas>
 

2. Open the html that hold your Silverlight Application. Add a new parameter to the embed syntax.

   <param name=”splashscreensource” value=”SplashScreen.xaml”/>
   <param name=”onSourceDownloadProgressChanged” value=”onSourceDownloadProgressChanged” />

   Please make sure that the SplashScreen.xaml is placed in the same folder with the html.

3. Add the below JavaScript function

function onSourceDownloadProgressChanged(sender, eventArgs)
{
    sender.findName(”Label”).Text =  “Loading: ” + Math.round((eventArgs.progress * 1000)) / 10 + “%”;
}
 


4. Lastly, make sure you application is big enough or you will never see your own splash screen.

For more information, please refer to: Define a Simple Silverlight Splash Screen

This is a new request by Benoit. He said he doesn’t know how to detect double click in Silverlight. Well, the answer is simple, Silverlight doesn’t have any support for double clicking yet.

Is it funny? Anyway, there still a lot of methods and work around to simulate double click. Today, I will show you one.

Not only double clicking, Silverlight doesn’t have native support for mouse scroll as well. However, I think the problems will be solved in Silverlight 3. Let’s look forward!

Comparison

Flash implementation: 20 minutes

Silverlight implementation: 30 minutes (Implemented First)

Source codes

•   Double Click [Flash 9, AS3] (10.9 KiB, 624 hits)
•   Double Click [Silverlight 2, C#] (11.9 KiB, 1,542 hits)

Silverlight

It’s very common that you have to pass some predefined parameters to Flash / Silverlight in different pages of the website. 

How can we achieve that? Here is a simple example.

(Please note that I have disabled the comment temporarily. It’s because there are many spam messages recently. I will fix that as soon as possible)

Comparison

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

• LoaderInfo.parameters [AS3] vs InitParams[C#]

Source codes

•   Passing Query String [Flash 9, AS3] (7.6 KiB, 1,138 hits)
•   Passing Query String [Silverlight, C#] (12.2 KiB, 1,277 hits)

Silverlight

LoaderInfo.parameters [AS3] vs InitParams[C#]

In AS3, you can get either pass the parameters using URL  or through JavaScript. Here is an example for URL method:

<object width=”550″ height=”400″ id=”PassingQueryString”>

<param name=”movie” value=”PassingQueryString.swf?param1=value&param2=value”/>

<embed src=”PassingQueryString.swf?param1=value&param2=value”/>

</object>

// AS3
// get all the parameters values
for (var key:String in loaderInfo.parameters){
	var value:String = loaderInfo.parameters[key];
}

For Silverlight, you have to specific a “InitParams” parameter inside the object tag of the HTML Source.  For example:

<object type=”application/x-silverlight-2″ width=”100%” height=”100%”>

<param name=”source” value=”PassingQueryString.xap”/>

<param name=”InitParams” value=”param1=value,param2=value2″/>

</object>

// C#
// get the params via the Application Class
private void Application_Startup(object sender, StartupEventArgs e)
{
	IDictionary parameters = e.InitParams;
	foreach (string key in parameters.Keys)
	{
		string value = parameters[key];
	}
        this.RootVisual = new Page();
}

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.

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, 1,034 hits)
•   JavaScript Sample 2 [Silverlight, C#] (10.3 KiB, 1,199 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)
{

}