Using a number of 'frames', animation is achieved by sequentially
swapping these frames into a target TImage using a timer, giving the
illusion of cell-based animation.
When you combine this with timer based movement across the form,
the 'wobble-bot' appears to walk along.
This technique has many advantages over the 'LOADFROMFILE' method
used in previous projects including smoother/faster refresh rates.
You also no longer need to store the frames in the same directory
as your project as they are are actually compiled INTO the .exe
This project relies on an ordered naming convention for the individual
frames, and uses a STRING to store the frame order
The Components:
BEFORE YOU START
You must 'harvest' the graphics (windows .bmp files) needed for this
project, to do this, follow each of the following links, saving them
AS IS into your working directory...
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 BackGround, change
it's AUTOSCROLL property to False
- From the ADDITIONAL VCL, place an IMAGE on the form, change it's
NAME to a, shrink it a bit, double-l-click on it and
load a.bmp into it.
- Do the same thing for images b to j. Note: their position
on the form and their size is largely irrelevant, I suggest you
order them and place them out of the way.
- Place one final Image on the form, change it's NAME to
Robot, STRETCH property to True and load a.bmp
into it (just so you don't misplace it later). This image is the
one that will appear to 'walk' later.
- From the SYSTEM VCL, place a TIMER, change it's NAME to
AnimTimer, change the INTERVAL to 10
- From the SYSTEM VCL, place another TIMER, change it's NAME
to WalkTimer, change the INTERVAL to 50
- From the STANDARD VCL, place a BUTTON, change it's NAME
to Quit and position it conveniently on the form.
- From the STANDARD VCL, place a SCROLLBAR, change it's NAME
to walkSpeed, it's MAX to 1000, it's MIN
to 10 - this component will eventually control how quickly
the image is moved across the form
- From the STANDARD VCL, place a SCROLLBAR, change it's NAME
to refreshRate, it's MAX to 1000, it's MIN
to 10 - this component will enventually control the frame
rate
Other Objects
For this project, I have chosen a TYPED CONSTANT (although this is
essentially the same as a VAR and corresponding assignment statement,
it is more compact). We also need a 'counter' variable that can be
used as the string index (allowing us to access each letter of the
string in turn). Notice the string characters correspond to the NAME
and ORDER of frames placed on the form earlier.
implementation
{$R *.DFM}
const place: string = 'abcdefghij';
var counter : byte;
The Event Handlers
There are a number of simple event handlers that are necessary for
the successful operation of this project.
| Control Name |
Event |
Event Handler Code |
| Quit |
onClick |
close
|
| BackGround |
onCreate |
counter := 1
|
| AnimTimer |
onTimer |
var loop : byte;
begin
for loop := 0 to componentCount-1 do
begin
if components[loop] is TImage
then if (components[loop] as TImage).name =place[counter]
then robot.picture := (components[loop] as TImage).picture;
end;
counter := counter + 1;
if counter > 10
then counter := 1
end;
|
| WalkTimer |
onTimer |
robot.left := robot.left + 5 {pixels};
if robot.left > clientWidth {then the robot has left the screen}
then robot.left := -robot.width {so send it back to the start again}
|
| walkSpeed |
onChange |
walktimer.interval := walkSpeed.position
|
| refreshRate |
onChange |
animtimer.interval := refreshRate.position
|
Each 'tick' of the AnimTimer causes the handler to scan all components
on the form, looking for the image that has a name the same as the
next letter in the string. When it finds it, it simply copies that
image.picture into robot.picture
Final Touches
COMPILE the program to check for errors of 'SYNTAX',
fix any that show, then RUN it to check it works correctly.
You can then change the VISIBLE property of each of the stored
frames to FALSE, or move them to some unused section of the
form (remember NOT to delete them though)
You will find that the animation is more convincing if the BACKGROUND
is set to match the colour of the sprite background (ie. clBlack).
This technique is suited to WMF's also, with the advantages of transparent
background and (in some cases) display performance enhancement.
A completed Screensaver version
of the Wobblebot is available for downloading from wOnKoSOFT.
The
Wobble-Bot
