The basis of 2-dimensional animation is merely a 'trick of the eye'. If we draw a sequence of pictures, each slightly different from each other, our eyes tell us that the picture is 'moving'.

This project places a simple component on a form, and 'flys' it across the form. We then generalise and place a spaceship graphic and let it 'boldly go where no graphic has gone before :)'.

PART 1 - There was movement at the station...

The Components:

What follows is a list of components needed for this application, along with some properties that need to be set for those components. Be systematic and TIDY placing your components.

• Change the NAME of the form to read 'SPACE', and the caption to read 'THE FINAL FRONTIER'
• Place a BUTTON on your form, change both it's name and caption to be ship
• Place a TIMER (you will find it in the SYSTEM section of the visual component library) somewhere on the form (this is a non-visual component - that is, you cannot see it when your program is running). Change it's name to be 'CLOCK1' and it's INTERVAL to be 100 (meaning the clock will tick approximately 100 times a second)

Some Background Information

Lazarus 'knows' a lot about the objects it manages. It knows at any time, for example, the width and height of your form, the width and height of your button, and the relative placement of both on the screen. This is useful here.

Lazarus Maintains a number of system variables that store some of the above information, namely:

ClientHeight = how wide (in pixels) the form is
ClientWidth = how high (in pixels) the form is

In addition to these, your ship button has a number of useful properties, namely:

ship.top = the number of pixels down from the top of the form the top+left corner is
ship.left = the number of pixels from the left margin the top+left corner is
ship.width = the number of pixels wide the button is
ship.height = the number of pixels high the button is

The Event Handlers

There are a number of simple event handlers that are necessary for the successful operation of this project.

{stop or start the ship}
clock1.enabled := NOT(clock1.enabled)

{move the ship 2 pixels to the right}
ship.left := ship.left + 2

Final Touches

COMPILE the program to check for errors of 'SYNTAX', fix any that show, then RUN it to check it works correctly. Test the start/stop click on your ship.

To 'speed up' your ship button, either reduce the timer interval or increase the number of pixels the button jumps.

You will notice that your 'ship' is able to leave your form (never to be seen again) - clearly, this is less than ideal. A simple solution is to test where it is, and move it back to the right margin if it gets too close to the left margin. To do this, CHANGE the code in the clock1 ONTIMER event handler to read as follows:

	if ship.left > ClientWidth
		then ship.left := 1
		else ship.left := ship.left + 2;

A more sophisticated approach might be:

	ship.left := (ship.left + 2) mod clientWidth

Try to alter the direction of the 'ship' so that it travels DOWN the form (from top to bottom) rather than across it.

Try to REVERSE the direction of the ship (remember the maximum ship.left that is still visible is ClientWidth. to place the ship just off the form on the left edge, it's ship.left could be set to -ship.width

Part 2 - Huston, we have a problem....

Now for the 'fun' part

Above is a link to rocket.bmp - follow it and save the graphic in your working directory

• Place on your form an IMAGE (found on the 'additional' section of the visual component library). Change the name of the image to rocket, click in the picture property, follow the ... 'builder' button and LOAD rocket.bmp and press OK. Next, change the stretch property to true, and resize using the 'selection handles' until it is fairly small and un-squashed.

• Place a TIMER on your form, name it clock2, change it's interval to be 10.

• This graphic (called rocket - this came from the "Rocket Shop" site on the Internet) has properties similar to the BUTTON in the previous example - get it to fly across the form by adding lines of code to clock2's ONTIMER event.

As a finishing touch, change the color property of the form to clBlack to improve the illusion of movement.