Shine Draw

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.

Vote for this sample

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, 667 hits)
•   Custom Splash Screen [Silverlight 2, C#] (4.2 MiB, 1,277 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!

Vote for this sample

Comparison

Flash implementation: 20 minutes

Silverlight implementation: 30 minutes (Implemented First)

Source codes

•   Double Click [Flash 9, AS3] (10.9 KiB, 355 hits)
•   Double Click [Silverlight 2, C#] (11.9 KiB, 653 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)

Vote for this sample

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, 637 hits)
•   Passing Query String [Silverlight, C#] (12.2 KiB, 620 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.

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

}

When talking about Silverlight and Flash, one should not miss out the browser integration part.

The sample below demonstrate three basic browser integration techniques: open popup, modify CSS and amend HTML content.

This is the first sample only. I will try to come up the 2th, 3th, 4th.. 10th samples later on.

Vote for this sample

Comparison

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

• Browser Integration: navigateToURL [AS3] vs HtmlPage [C#]

Source codes

•   JavaScript Sample 1 [Flash 9, AS3] (15 KiB, 790 hits)
•   JavaScript Sample 1 [Silverlight 2, C#] (10.5 KiB, 862 hits)

Silverlight

Browser Integration: navigateToURL [AS3] vs HtmlPage [C#]

I think you can do whatever you want in Flash. It’s because you can write JavasScript directly in AS3.

// AS3
// open popup
var js:String = "window.open('URL','_blank','height=300,width=300');";
var url : URLRequest = new URLRequest("javascript:" + js+ " void(0);");
navigateToURL(url, "_self");

// modify CSS
var js:String = "document.body.style.backgroundColor='#FF0000';"; 

// amend HTML content
var js:String = "document.getElementsByTagName('h1')[0].innerText = ‘Value’;”;

Silverlight provided a set of API to manage the HTML DOM. However, I am not sure if you can call your own JavaScript directly as in Flash.

// C#
// open Popup
HtmlPage.PopupWindow(new Uri("URL", UriKind.Absolute)
	, "_blank",
	new HtmlPopupWindowOptions() { Width = 300, Height = 300});

// modify CSS
HtmlDocument document = HtmlPage.Document;
document.Body.SetStyleAttribute("background", "#0080FF");

// amend HTML content
HtmlDocument document = HtmlPage.Document;
ScriptObjectCollection collections =  document.GetElementsByTagName("h1");
HtmlElement htmlElement = (HtmlElement) collections[0];
htmlElement.SetProperty(”innerHtml”, “This is Silverlight Title”);