Animation in Alpha Five
by Steve Workings
Originally published in Alpha Forum
Posted at www.workings.com December 22, 2000

People are expecting more and more animation and entertainment in their computing world. Proof of this is all around us with the internet being the best example. It's hard to find a professional web site without a touch of animation. And the new MMX chips touted by Intel are primarily aimed at providing the user with a better multimedia experience.

Let's compare that to a database application. Mention the word "database" to most people and they think "dull dull dull." So, why not take advantage of Alpha Five's capabilities and provide a bit of animation? It's really very simple.

My First Animation Form

First create a new form. You can attach it to any table or database you want. To keep the form workable, make it four inches square. Also, go to the form properties Window tab, and set the window width and height to "Use Form." And here's the magic part: You can set a timer interval on a form in Alpha Five. It's on the form properties Form tab. For animation, a good setting to use is 0.1 (see Figure 1). This means that the timer attached to that form will "click" every one-tenth of a second. (A timer interval set to a value of zero means the timer is turned off. This is value for all forms.) You can choose different values later, but start with this to make best use of the the default examples in this article. Save the form, and call it Animation Form.""My First Form."

Figure 1 - Setting the Timer

Growing Text

For the first animation, we'll make text that grows larger, then changes color when it reaches a certain size. So, you'll need to place a text object on your form. I suggest you make it just about as wide as the form, and about an inch high. For text, you can write anything you want. The text in my example is "Animate Me!" Go to the text object's properties, and set the font size to 4, and the horizontal and vertical alignment to "center." Figure 2 shows the form with the text object on it. Of course the font is so small you can't read it, but that's the point; we're going to make it grow with just three lines of Xbasic.

Figure 2 - Form with Text Object too Small to Read

Right click on the form, and select "Actions." Since we're going to be using a bit of Xbasic, I suggest you next choose Code / Convert to Xbasic from the menu. Now, in the code editor, all you need are these lines of Xbasic:

if Text1.font.size < 40 then
Text1.font.size = Text1.font.size + 1
end if

if Text1.font.size = 35 then
Text1.font.color = "Red"
end if

Because these if/then statements are attached to the form's OnTimer event, they will be evaluated every time the timer clicks which in our case is every one-tenth of a second. So remember that we first set the font size of the text object to 4 point? The first if / then statement will increase the font size by one point for each of the first 36 clicks. And when the font size reaches 35 points, the font color will be switched to red.

Go ahead and save your form, then view it before we move on to the next experiment.

Moving Along

Next, let's make an object travel from one location to another. Add another bitmap to your form. The one shown in Figure 3 is Arrow05, and it's close to the left side of the form because it's going to travel all the way to the right side of the form and disappear as if it exited stage right.

Figure 3 - Form with Arrow05 bitmap added near left side

To make it travel, simply add three more lines to the form's OnTimer event:

if Bitmap1.object.left < My_First_Animation_Form.width then
Bitmap1.object.left = Bitmap1.object.left + .1
end if

The name of the object is Bitmap1 because that's the default name Alpha supplies when you create it. In English, the Xbasic above says if the position of the bitmap's left side is less than the width of the form, then increase the position of the bitmap's left side one-tenth of an inch. Because this is attached to the form's OnTimer event, the position of the bitmap's left side will be increased one-tenth of an inch for every click of the timer until the bitmap is off the right side of the form.

After you've added these three lines to your OnTimer script, save the form and watch the arrow travel smoothly across the form and disappear off the right side. Having fun? Let's do one more that's a bit more complicated.

Crashing Cars, er Objects

This is irresistible: Let's make two bitmaps crash against each other.

Add three more bitmaps to your form as shown in Figure 4. The left one is Arrow05, the right one is Arrow06, and the center one is Bullet28. After you've put them on your form, go to each bitmap's properties, and give it a name other than the default names of Bitmap2, Bitmap3 and Bitmap4. Rename them Left_Arrow, Right_Arrow and Star to help keep track of what's what when writing the Xbasic. Also make sure that the objects are aligned (Arrange / Positions / Center Height). The star needs to be at the exact center point between the two arrows. You can easily arrange this by clicking first on the left arrow, then hold down the shift key and click on the star and then on the right arrow. Then pick Arrange / Spaces / Horizontal.

Figure 4 - Get Ready to Rrrruuuummmmbbblllllllee!
!

Here's the Xbasic to add to your OnTimer Event:

if left_arrow.object.left < right_arrow.object.left then
left_arrow.object.left = left_arrow.object.left + .1
right_arrow.object.left = right_arrow.object.left - .1
star.object.visible = .f.
end if

if left_arrow.object.left >= right_arrow.object.left then
star.object.visible = .t.
left_arrow.object.visible = .f.
right_arrow.object.visible = .f.
end if

The first if / then statement compares the position of the left sides of the two arrows. If they're not equal, then it moves the left arrow to the right by a tenth of an inch and the right arrow to the left by a tenth of an inch. It also dictates that until the arrows have collided, the star is invisible.

The second if / then statement simply changes the visible properties of the three objects when the left sides of the two arrows intersect. The effect is that the arrows disappear while the star appears. Instant collision!

Of course I could have looked around to supply you with two icons of cars and then suggested the Sign02 bitmap in place of the star, but I'll let you construct that if you want to. I'll also let you figure out how to add the sound of a crash if you want to.

The final and complete Xbasic script for this form's OnTimer event is at the end of this article.

You can see how easy a bit of animation is in Alpha Five. So while you take all that time to make your forms pretty (see my article in the June issue of Alphaforum on form design) and field rules just right, take another 10 minutes and add just one or two pieces of animation to make your application a little more lively. You don't have to do this just because it's neat, either. Use an animated arrow to bring the user's attention to something or even provide a bit of instruction. Just because you can't be at the user's side to point to something on the screen doesn't mean that you can't tell Alpha to do it for you.

Here's the complete Xbasic script used for the form's OnTimer event:

''XBasic

if Text1.font.size < 40 then
Text1.font.size = Text1.font.size + 1
end if

if Text1.font.size = 35 then
Text1.font.color = "Red"
end if

if Bitmap1.object.left < My_First_Animation_Form.width then
Bitmap1.object.left = Bitmap1.object.left + .1
end if

if left_arrow.object.left < right_arrow.object.left then
left_arrow.object.left = left_arrow.object.left + .1
right_arrow.object.left = right_arrow.object.left - .1
star.object.visible = .f.
end if

if left_arrow.object.left >= right_arrow.object.left then
star.object.visible = .t.
left_arrow.object.visible = .f.
right_arrow.object.visible = .f.
end if