Create An Animated Five-Day Weather Forecast With DeluxePaint IV

by Randy Finch

Some time ago, I worked with our local NBC affiliate to create weather graphics for its local newscast. They had an Amiga 2000 and were using DeluxePaint for graphics production. The main weather maps were downloaded from the AccuWeather service; my job was to create specialized graphics. I created a five-day forecast, a severe weather map, and several other custom graphic screens. One of the things I worked on was an animated five-day forecast. It was created entirely in DeluxePaint. In this article, I will show you how to create this animated forecast. In a future article, I will show you how to use HELM to ease the process of building a five-day animated forecast on a daily basis.

The Screen Layout

Typically, a five-day forecast consists of a title at the top of the screen, five graphic elements for each of the five days, the names of the days, and a high and low temperature for each day. I will follow this same convention. The major difference is that instead of static graphics or color-cycled graphics as is typical, I will be using animated graphics complete with blinking sun, moving clouds, flashing lightning, and falling rain.

To start things off, a screen resolution and size needs to be selected. Since the output will ultimately be used in a television broadcast, the screen needs to be interlaced and overscan. The resolution of TV is not that great (compared to computer output, this is); therefore, a 16-color low resolution screen should be sufficient. The lower resolution will also ensure that the animated screen will run smoothly with no jerkiness. A maximum overscan of 368x482 will be used to make sure there is no border around the screen.

Now the palette needs to be set. I used a blue background. There is a yellow for text and lightning, some greens for the grass, some blues for the sky, and so on. Figure 1 shows the palette I selected.

The Building Blocks

Once the selected screen resolution and palette are set, the graphic elements to be used in the animated forecast need to be created. There are many different types of days that can occur: sunny, partly cloudy, rainy, stormy, snowy, haily, floody, etc. For this article, I will discuss the first five.

First, a basic screen design needs to be produced. Figure 2 shows the template I created. From the top down, it has the title, a blank area for inserting the text indicating the days, five boxes for inserting the AnimBrushes that will be created, and color rectangles for inserting the high and low temperature for each day. It is rather plain, but it gets the job done. You can be as artistic as you like putting this template together.

Now it is time to build the static graphic elements that will be used to produce the forecast. Figures 3 and 4 show the ones I created. The top row of Figure 3 shows the core graphics that will be used in each AnimBrush. Each has a dithered green ground and a solid blue sky. The graphic on the left has a light blue sky and will be used for sunny days. The middle graphic has a medium blue sky that will be used for partly cloudy days. The graphic on the right has a dark blue sky that will be used for overcast days. Each of these graphics is sized to fit inside the hollow rectangular boxes in Figure 2. The graphics themselves are each 50x183 pixels in size. The middle row of Figure 3 shows five singular elements (cloud, lightning bolt, sun, raindrop, and snowflake). The bottom row shows groupings of four of the elements. These groupings will be used to create the AnimBrushes. The three graphics at the top, the sun, and the four element groupings at the bottom of the figure should each be saved as separate brushes.

Figure 4 shows seven different brushes, each containing the names of five days of the week. Each brush starts with a different day. These brushes were designed to fit inside the blank area above the five empty boxes in Figure 1. Thus, for any given day, the days of the week can be added by simply loading the appropriate brush and pasting it in the appropriate location on the template.

A Sunny Day

Now it is time to create the first AnimBrush. Clear the screen in DeluxePaint, load the brush containing the graphic with the light blue sky, and then choose Color/Palette/Use Brush Palette from the menu. This will set the screen palette to that of the brush. Now paste the brush in the middle of the screen. After some experimentation, I decided that a 10-frame animation running at 10 frames per second looked quite good. So, from the menu choose Anim/Frames/Set #, enter 10, and select OK. Also, from the menu, choose Anim/Control/Set Rate and enter 10. This will set the frame rate. At this point you will have a 10-frame animation with each frame containing the pasted brush in the middle of the screen.

Load the sun brush and paste it down on the first frame in the blank blue area away from the ground and sky graphic. Notice that the sun is not symmetric. By rotating the brush 90 degrees, a slightly different looking sun can be created for the next frame of the animation. Choose the menu item Brush/Rotate/90 degrees. This will create a short wide sun due to the odd aspect ratio of a 368x482 screen. To resize this alternate image of the sun to better match the original image, choose the menu item Brush/Size/Halve once and Brush/Size/Double Vert twice. Position the resized brush over top of the original sun in frame one, press the 2 key to jump to the second frame, and paste the altered sun brush to the screen. By alternately pressing the 1 (previous frame) and the 2 (next frame) keys, you can see how good the "blinking" sun looks. Redo these steps if necessary.

Now it is time to add the sun to the light blue sky. Go to frame one. Choose Anim/AnimBrush/Pick Up from the menu. Draw a box around the sun, and when asked how many cels, type in 2. This creates a two-frame AnimBrush of the sun. The frames are slightly different from each other so it gives a slight motion to the sun. To see how the blinking sun looks, hold down the 7 key. This will cycle the AnimBrush frames. Save the AnimBrush by selecting the Anim/AnimBrush/Save menu item. After saving, position the sun AnimBrush in the light blue sky of the graphic in the center of the screen on frame one. Paste the AnimBrush. Press the M key (must be capital) to bring up the Move requester. Make sure all of the settings are as shown in Figure 5 and press the Draw button. This will cause the two-frame AnimBrush to be pasted on each frame of the animation, alternating the two sun images for consecutive frames. The result is a ten-frame animation of a blinking sun in the light blue sky. To see how the animation looks, press the 4 key. Pressing the Esc key will stop the animation.

Make sure frame one is displayed and select the Anim/AnimBrush/Pick Up menu item. Draw a box around the ground and sky graphic and type in 10 when asked how many cels. Click on OK. A 10-frame AnimBrush containing the entire ground and sky graphic with a blinking sun will be created. It should be saved for later use.

A Partly Cloudy Day

A partly cloudy day consists of a sun with some clouds. Since the blinking sun AnimBrush has just been created, it can be used as the base for this graphic. However, the sky needs to be a medium blue. Therefore, there are two approaches that can be used. First, the sky in all ten frames of the sunny day animation can be filled with the medium blue color. Second, the ground and medium blue sky graphic brush can be loaded and the steps to create the sunny day AnimBrush repeated. Either way is okay, but the first way is faster.

Once a 10-frame animation of the ground and medium blue sky with a blinking sun is in place, the moving clouds need to be added. Load the five-cloud grouping brush. Notice that there are two cloud layers in the grouping. The top layer has three clouds and the bottom has two. The clouds in each layer are purposefully offset from each other by 55 pixels. If the brush is moved horizontally the 50 pixel width of the ground and sky graphic over 10 frames (five pixels per frame), then frame one, which will come after frame 10 (the animation loops), will look identical to how frame 11 would have looked if it existed. This allows the cloud movement to be smooth as the animation loops.

So, let's do it. Paste the cloud grouping on the screen such that the lower right-most cloud is centered horizontally in the sky. Press M to bring up the Move requester. Select a value of 50 for the X Distance and make sure the value of Count is 10. Click on the Draw button. The clouds will be pasted to each frame of the animation with a five-pixel offset between frames. Pick up an AnimBrush consisting of the ground and sky graphic area and save it. Now clear all frames of the animation and paste the AnimBrush on frame 1. Use the Move requester to add it to each frame in the same way the sun was added earlier (X Distance set to zero). Play the animation. The clouds will move across the sky. As the clouds disappear off to the right, new clouds will appear from the left.

A Rainy Day

For the rainy day graphic, no sun will be shown. Go to frame one and clear all the frames by pressing the CLR button and then selecting All Frames from the requester. Load the ground and dark blue sky graphic and paste it on the first frame. Use the Move requester to copy it to all frames. Next, create the moving clouds just as was done for the partly cloudy day. Go to frame one and load the raindrop grouping brush. Paste it on the screen such that the upper left corner of the brush is in the upper left corner of the sky, but such that the top raindrop is no higher than the middle of the top cloud layer. Bring up the Move requester. Set the X Distance to about 10, the Y Distance to about -70 (remember Y increases upward in DeluxePaint), and Count to 10. Click on the Preview button. Look closely at how the raindrops appear as they fall towards the ground. Adjust the X and Y Distances until they appear the way you want. Finally, press the Draw button. Again, pick up the graphic as an AnimBrush and save it. To make the rainfall appear harder, repeat the steps for adding the raindrop grouping but begin the brush movement in frame five or six. The movement will loop around to frame one and continue until 10 frames have been drawn.

A Stormy Day

The stormy day will be just like the rainy day but with some lightning added. So, while on frame one of the rainy day animation, load the lightning bolt grouping brush. All that is needed is to add the lightning to various frames of the rainy day animation so that the lightning appears to be flashing on and off. I found that lightning bolts on frames 1, 2, 5, and 6 look quite good. It gives the appearance of two quick flashes and then a pause. Make sure the lightning bolts are in the same position in each frame to which they are added. This is best done by positioning the bolts at the appropriate location in the sky and pressing the Left Alt-Left Amiga key combination (same as pressing the left mouse button). Go to the next frame to which the bolts will be added by pressing the 2 key to advance frames. Paste the bolts with the same key combination. This method will prevent the slight movement that can occur when trying to hold the mouse steady.

A Snowy Day

This one is quite simple now that the other ones have been created. Simply create the moving clouds on a dark blue sky as for the rainy day animation. Now, instead of adding falling raindrops, simply add falling snowflakes using the snowflake grouping brush.

Other Days

What other type of days can you think of? Hail? How would you portray it in the AnimBrush? Perhaps the snowfall will be big. The ground could be changed to white for that one. There are many different types of days that can be created. Play around with it. Let your creative juices flow.

Putting It All Together

Now that the AnimBrushes for the various type of days have been created and saved (you did remember to save them all, didn't you?), it is time to bring everything together for an actual five-day forecast. Delete all the animation frames so there is only the one DeluxePaint work screen. This can be done by setting the number of frames to one. Load the five-day forecast template (Figure 2). Then load the appropriate brush containing the names of the five days to be forecast. Paste is under the title in the appropriate position above the five empty boxes.

Next, select the font and font size to use for the temperatures. Type the low and high temperatures for each day in the appropriate rectangles. Set the number of frames to 10; the filled in template will be copied to all frames.

Load the AnimBrush that represents the type of weather that will prevail on the first day of the forecast. Paste it inside the left-most box of frame one. Use the Move requester to paste it to each frame of the animation. Do the same for the second day, the third, and so on until all five days have AnimBrushes associated with them.

The animation is now complete. It can be saved as an Anim file for use in a presentation package. Figure 6 shows frame two of a sample I created. Figure 7 shows frame seven of the same sample. I wish I could put the animation in the magazine, but technology has not reached that point yet. You will just have to put one together yourself. Or, if you prefer, you can write me care of this magazine and I will send you a disk for a small fee.

Conclusions

I hope you have had fun working through this tutorial. Using DeluxePaint to build the final five-day forecast can be a bit cumbersome since you must manually load the brushes and paste them in the right location. Probably the most time consuming task is typing in the temperatures. In a follow up article, I will show you how to automate these tasks using HELM.

If you put together something like this for a TV station, I would like to know about it. See you next time.


Back to list of articles
Back to Randy Finch's Home Page
Last modified on April 1, 1996
Randy Finch at webmaster@rcfinch.com