I think that one good way to put Frogans technology to use would be to put family and friend photos on the desktop, much like the way people often do in the “real” world. People usually apply this kind of idea by setting their desktop background as a picture of their husband, wife, kids, dog, Harley, etc. Although it personalizes the workspace to a certain degree, it often results in having one huge picture in front of you, or a huge picture inelegantly covered up by your windows. On a real-world desktop, people tend to put one or more small, framed photos on a corner of their desk where it can always be visible, yet not interfere with their workspace.

Let’s apply that idea to a frogans. If you publish a frogans with a picture (or a series of pictures) of your cat, for instance, you can call it up from the Internet and place it on your desktop at work, at home, wherever you’ve got a computer wired to the net. For that matter, you can share your cat frogans with anybody you like just by giving them the address (ex: frogans*freddys-cat). The idea might even catch on, and before you know it you’ve got a whole gallery of your friends’ cats’ frogans saved as favorites in your Frogans Player, many of which you choose to have in a corner of your desktop at all times, displayed at your chosen sizes.

Talk about cat frogans heaven. Let’s get cracking.

Let’s assume that you already have a frogans address and a hosting service. That is to say, you’ve registered a frogans address with STG Interactive at frogans.com, and in your account settings you’ve indicated the URL for your frogans root directory, which is where your frogans resource files will be found. (Frogans address registration will become available near the end of 2008.)

Now you want to get your resources together for making a frogans. Typically these will include 1) one or more image files (in JPG, GIF and/or PNG format) and 2) at least one Frogans Slide Description Language (FSDL) document file. A frogans can be made up of an unlimited number of pages, or as we say “slides”. Each slide is defined by its own FSDL document, so for a frogans consisting of five slides, you’ll have five FSDL documents.

To start off, let’s imagine a frogans consisting of just one slide. We can always add more later.

Keeping simplicity in mind, this frogans is going to have only one image resource, and it’s going to take up the entire frogans surface.

Take a photo of your cat and get it on your hard drive. If you don’t have a cat, borrow one, or just borrow a photo of one. The maximum computer screen display format for a frogans is 320 pixels wide by 240 pixels tall, so why not fill it entirely up with a “landscape” format photo of your cat? Make sure that it’s cropped to 320 by 240 pixels. (You can always use something larger, and either reduce, stretch or mask the image in FSDL, but in this case that would just mean needless extra file size.)

Save it as a JPG file and call it “cat.jpg”.

Now let’s do some FSDL.

Since FSDL 3.0 is not yet completed, this tutorial is based on FSDL 2.1. I’ll update it and get it into compliance with FSDL 3.0 as soon as it’s released (maybe even sooner).

To see the complete FSDL 2.1 specifications click here
(http://www.frogans.com/en/flp.php).

FSDL is based on XML, so anybody who has had experience with XML, or even HTML, will quickly catch on to the logic. Always keep in mind to respect the form. If there’s a parsing error in your FSDL document, the Frogans Player will not display any part of your frogans slide.

Start your FSDL document with the following declaration (FSDL is case-sensitive):

<?xml version=”1.0”?>

and then

<!DOCTYPE FROGANS PUBLIC
“-//STG Interactive//DTD Frogans FSDL 2.1//EN”>

In the XML content that follows, all tags (ex:”<MYTAG>”) must be paired with a closing tag (ex:”</MYTAG>”) if it’s going to have child tags. Otherwise, it can be closed with a “/” just before its closing bracket(“>”) . For instance, in the rest of the document that follows, everything is going to fall between the opening tag

<FROGANS VERSION="FSDL2.1"> (where “FROGANS” is the element, and “VERSION” is an attribute)

and its closing tag

</FROGANS>

signifying that everything that falls between these two tags are children of the “FROGANS” tag.

Now let’s write in the element that will identify “cat.jpg” as an image to be used in this frogans slide. Let’s assume that you’ve put in a folder in your frogans root directory called “images” such that it’s absolute path from your frogans root directory would be “/images/cat.jpg”.

The following tag will contain the SETIMAGE element, and the required RESID, ASPECT, and FILE attributes:

The RESID attribute will contain a name such as “CatPic1″ that will serve as an identifier throughout the rest of for the image used.

With the ASPECT attribute you’ll determine how the image is going to fit in the area that you’ll define when you place it using the SHAPE, CONTENT or MASK elements. For instance, you might want to keep its original size, or you might want to stretch it to fit a certain height and width, or you might want it to zoom in or out according to a certain height or width.

For now, let’s assume that we’ll want to keep it at its original size, so we’re going to set the ASPECT attribute to “BASE”.

With the FILE attribute you’re going to indicate the file name of the image in the frogans root directory, which in this case is “/images/cat.jpg”.

Your SETIMAGE element should look like this:

<SETIMAGE RESID="CatPic1" ASPECT="BASE" FILE="/images/cat.jpg"></SETIMAGE>

With the SETIMAGE element defined for your image, you’re telling the Frogans Player to load your image into the end-user’s system memory when it reads this FSDL document. This way, the image can be used on your frogans multiple times if you wish, but it only has to be loaded once.

Now let’s place the image using the CONTENT element and its required RESID, SIZE and POS attributes, and the optional ALIGN attribute.

Here the value of your RESID attribute will be the same as the RESID value you used in the SETIMAGE element, which is “CatPic1″.

With the SIZE attribute you’re going to indicate the dimensions of the image at which it’s going to be displayed. Although the maximum surface of a frogans is 320 x 240 pixels, the coordinates are defined by an 800 x 600 grid. Since for simplicity’s sake the image is going to take up the maximum surface allowed on a frogans (320 x 240 pixels) the value will be “800, 600″.

With the POS attribute you’re going to position your image on the frogans’ 800 x 600 grid. By default this is calculated starting at the horizontal and vertical center of the image, but we’re going to throw in the optional ALIGN attribute in order to have the image’s position be calculated from its upper left-hand corner. Like this, the POS attribute’s value will be “0, 0″, and the ALIGN attribute’s value will be “LEFT, TOP”.

Your CONTENT element should look like this:

<CONTENT RESID="CatPic1" SIZE="800, 600" POS="0, 0" ALIGN="LEFT, TOP">
</CONTENT>

Congratulations. You now have authored a basic frogans, albeit with only one slide, and without any text, or navigational buttons or rollovers, with neither FSDL transparencies, shadows, halos, color filters nor gradients. And we haven’t yet gotten into giving it a custom shape, or tried rotating or flipping visual elements. But the groundwork has already been laid.

Your FSDL document should now look like this:

<?xml version=”1.0”?>

<!DOCTYPE FROGANS PUBLIC
“-//STG Interactive//DTD Frogans FSDL 2.1//EN”>

<FROGANS VERSION="FSDL2.1">

<SETIMAGE RESID="CatPic1" ASPECT="BASE" FILE="/images/cat.jpg">
</SETIMAGE>

<CONTENT RESID="CatPic1" SIZE="800, 600" POS="0, 0" ALIGN="LEFT, TOP">
</CONTENT>

</FROGANS>

To see what you have, save your FSDL document using the name of your frogans home slide, as you indicated in your frogans address registration settings, and don’t forget to end it with the fsdl extension (ex: home.fsdl ). Upload it by FTP to your frogans root directory. Now go to your Frogans Player and type in your frogans address in the appropriate field (ex: frogans*freddys-cat) and bring your frogans up on screen.

For now it doesn’t navigate, and it has that boring round-cornered rectangular shape, but already you see that you can zoom it up and down, place it where you want, and at the size you want. You can even save the address in your Favorites menu, which not only allows you to get back to it quickly if you’ve closed it, but also brings it up at the same size and in the same position on your screen as when you last had it open.

For lesson 2 I’ll show you how to add some text and a button so that you can add more cat slides to your frogans.