Tutorial: Falling Objects (Advanced)


You're free to use the codes for falling snow etc, but If you would like to have your very own falling objects, this tutorial is for you. You'll need a server to store the images and the javascript file.

NEW!!!Lucy King Alfie the Great has volunteered his server space to share with other Dogsters & Catsters! Who says dogs & cats don't get along? If you have an image (or images) you would like to use for this tutorial but don't have a server, send him a p-mail. His Dogster ID is 120130. He will then contact you about how to go about sending him your files or image url's for him to upload.

As far as I know, there are not any falling object generators in existance that work well for Catster unless you are looking for just one or two moving images. If you want a lot of falling objects (like snow), then you're going to have to do a bit of actual coding, so this is a rather advanced level tutorial. We will not cover uploading files to your server.

I searched for many different ways to have falling snow and this was my favorite code. The original code can be found at http://www.maxxblade.co.uk/fall/ Thank you so much Maxx Blade! We love using your scripts at Catster & Dogster!

You can download the zip file from the above link. I would suggest doing so. I've had some requests for a different approach that doesn't require unzipping and that is the approach used for the tutorial..

Step 1

Find the images you like.

Transparent gif images work best. Animated ones can be cute too. And be sure they are on the small side. Upload the images to your server. (Or use the url addresses of the images where you found them - if hotlinking is allowed)

Step 2

This is the javascript code.

As you can see, it's far too long to fit into a bio field! That's why you need to put it on a server and just link to it.

You need to get the above text into a text editor (such as notepad) so you can edit it and save it. Option 1: You can copy & paste it (you'll have to remove both <style> tags at the beginning and end. OR...

Option 2: I have the code at http://www.twilightmoon.net/catster/fall/fall.js. Save the file (right click on link, select 'save target as' in IE or 'save link as' in Firefox). Save it as fall.js Depending on your computer you will have different options in the save as type box. You may be able to save it as a javascript file, if not save it as type 'All Files'. Either way, name the file fall.js

If your computer will not allow you to save a javascript file, you can save it as a simple text file (.txt extension), and then rename the file from fall.txt to fall.js once you have it on your server.

Step 3

Open the javascript file using a text editor such as Notepad. Change the code to point to where your images are located, change their size (see example below) and save the file again. Then upload the file to your server.

Example: instead of this line:

Use something like:

and substitute the width and height of your image for 15 and 17.

You can have as many images as you want or even just one.

Step 4

Now simply enter the link to the javascript file in one of your Catster biofields.

<script language="JavaScript" src="http://www.yourserver.com/yourfile.js"></script>