The Google Desktop allows you to run Google Gadgets on your XP, Vista or Windows 7 desktop. Versions are also available for Linux and Mac. This means that a Google Gadget could have a far wider audience than a Vista / Win7 Gadget. This article explains how to make one using your Flash files.

Converting your .swf file to a gadget is surprisingly easy. You will nead a couple of things though:

1. A site to host your .swf file. (SWiSH Space can do this).
2. The Developer SDK. This is a free download from Google.

Step 1: Download and Install the SDK.

Download the SDK from the link shown above. At time of writing the SDK is distributed in a .zip file. Once the download is complete, extract the contents of the .zip file to a convenient location.

The application you need to run is:
api/tools/designer_en.exe (depending on the settings of your computer, the .exe extension may not be displayed)

Step 2: Write and upload your .swf file

In this example I used the analog_clock.swi from the samples | beginner section. I modified the final size and aspect ratio to make the movie square (450×450) and repositioned the clock and the resized background. Export and upload your .swf file to your server / webpage.

In the following example, I have used:
http://blog.swishspace.com/gadgets/analog_clock.swf

Step 3: Creating the Gadget template

Run api/tools/designer_en.exe by double clicking on the .exe file. You may see a warning like the one below. Click Run.

Then go File | New Gadget and enter a name for your gadget. I called my gadget “analog_clock“. The program will actually create an entire folder by that name and place some default files into that folder. After you have created your new gadget the Gadget Designer should look like this:

Now use File | Save All and close the application.

Step 4: Deleting unneeded files

Many of the default template files are not needed if we are using pure .swf files. Go to the newly created gadget folder and delete the following files:
main.js and the stock_images folder.

Deleting these files will reduce the size of your gadget.

Step 5: Edit the Gadget Settings and Description

Re-open the Gadget Designer. You should see the files to the right in the Gadget Explorer. Double click on the strings.xml file and it will open a .xml text editor. Change the values for <GADGET_NAME>, <GADGET_DESCRIPTION> and <GADGET_ABOUT_TEXT> to values that suit your gadget.

My modified text is below:

<strings>
 <GADGET_NAME>SWiSHzone.com Analog Clock</GADGET_NAME>
 <GADGET_DESCRIPTION>Based on the analog_clock.swi example</GADGET_DESCRIPTION>
 <GADGET_ABOUT_TEXT>SWiSHzone.com Analog Clock
© 2010 SWiSHzone.com Pty Ltd
Just your standard analog clock.
</GADGET_ABOUT_TEXT>
</strings>

Then in the Gadget explorer, click on the Gadget Settings item. The following dialog should open:

Update the Version, Author, email and website  information as appropriate. Change the Minimum Google Desktop Version to 5.8.0.0 as that is the first version that is able to display flash content.

The Name, Short Description and About Dialog text will be taken from the strings.xml file that was edited previously.

Press OK to close the dialog.

Step 6: Edit the main.xml file

Select by double clicking main.xml in the gadget Explorer panel.

Press the Source button. This will display some xml in the right hand pane. Delete that xml and copy paste the .xml code from below.

Edit the line

.....
"http://blog.swishspace.com/gadgets/analog_clock.swf"
....

So that it refers to your published .swf file.

Alter the size parameters (currently 280×280) as appropriate.

<view width="280" height="280">
 <object classid="progid:ShockwaveFlash.ShockwaveFlash"
 width="280" height="280">
 <param name="movie" value="http://blog.swishspace.com/gadgets/analog_clock.swf" />
 </object>
 </view>

Save all files then go Gadget | Build Package.

You should get a message saying Successfully created … analog_clock.gg

Simply double click on analog_clock.gg to add it to your toolbar.

Step 7: Icons

Now that you have a working gadget, capture some images of it and save those images to icon_large.png and incon_small.png. A Size of 110×110 worked well for the large image and 55×55 was good for the small image. Once you have saved your icons, remake the gadget using Gadget | Build Package.

The source and the final gadget can be found in this .zip file.

Notes:

The .gg gadget file is really a renamed .zip file of the files that make up the gadget. This means you could create a gadget without the SDK, although using the SDK does simplify things.

As with the Vista and Win7 gadgets, I was unable to configure my gadget to have a transparent background.

One sample section of code that I found used a <div element to set the background color.

<view width="280" height="280">
 <div enabled="true" background="#00FF00" width="100%" height="100%">
 <object classid="progid:ShockwaveFlash.ShockwaveFlash"
 width="280" height="280">
 <param name="movie" value="http://blog.swishspace.com/gadgets/analog_clock.swf" />
 </object>
 </div>
 </view>

Unfortunately, I could only manage to set the background color to black irrespective of what value I put into the background= value.

If anyone figures out how to do either of these things, please post a message.

Notes:

2010 04 09

It appears that mouse over position gets confused if the width / height of the .swf file specified in the .xml file is anything other than the native width / height of the .swf.

So if your .swf file is 120×80 then specify those items in your .xml file as follows:

<view width="120" height="80">
 <div enabled="true" background="#000000" width="100%" height="100%">
 <object classid="progid:ShockwaveFlash.ShockwaveFlash"
 width="120" height="80">
...

Note that

<view width="240" height="160">
 <div enabled="true" background="#000000" width="100%" height="100%">
 <object classid="progid:ShockwaveFlash.ShockwaveFlash"
 width="240" height="160">
...

Will give a correct looking appearance, but any buttons on your .swf will not work correctly.

Tags: gadget, google

This entry was posted on Monday, March 15th, 2010 at 12:28 pm and is filed under Max2, Max3, miniMax2, miniMax3. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.