!0.......^.........^.........^.. !B \H11\H07\H10\H02\H13\H00 F L A S H M O V E S !2.......^.........^.........^.........^.........^.........^.... Flash, bang, wallop, what a picture! 20th Century Chris Somerville takes a look at loading screens and shows you how to turn them into moving pictures. !1.......^.........^.........^.........^........ A title page is a great way of adding that extra professional touch to your programs. Use SCREEN$ to save it and it'll load before the main program. That way you'll keep up flagging interest during those long LOADs and raise expectations for the program ahead. The big snag (I knew it - there's always a snag! Ed.) is that it adds considerably to the loading time - a standard loading screen takes up 6.75K of memory. Now, it's possible to design a much simplified title screen using only the 768 bytes of the Attribute File. You'll find this reduces the loading time from around forty-five seconds down to about five. And it's here that you get the added bonus - animation throughout the loading. You can flash words on the screen just like in Manic Miner - take a look at the demo program to see how it's done. Or you could extend the process to cover anything that moves. How about a ghost that appears and disappears, a see-saw rising and falling or Troubleshootin' Pete getting in'n'out of his comfy chair! !0.......^.........^.........^.. !B NAME DROPPING !2.......^.........^.........^.........^.........^.........^.... Our name in lights at last! Pretty flash, eh? These two piccies show you exactly what you'll get by typing in the listing below. When you're designing your own screens always think in terms of two different screens. Draw the first one on squared paper - graph paper's a good idea - showing all the colours. Remember these are Paper colours. !0.......^.........^.........^.. \H10\H01\H11\H01 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H02 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H10\H01\H11\H01 !2.......^.........^.........^.........^.........^.........^.... Next, design the screen for stage two, this time on squared tracing paper, making sure the squares match up with those on screen one. Then indicate each colour with its initial or code number - these are all Ink colours. Now, lay the tracing paper over the graph paper and you should see just what Paper and Ink you need at every character position when FLASH is set to 1. There are two ways you can now build up your piccy on screen. Either POKE the Attribute File with the appropriate numbers or you can PRINT spaces (CHR$ 32) in the right Paper and Ink colours. !0.......^.........^.........^.. \H10\H01\H11\H01 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H02 \H11\H07 \H11\H02 \H11\H02 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H02 \H11\H07 \H11\H02 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H11\H02 \H11\H07 \H10\H01\H11\H01 !2.......^.........^.........^.........^.........^.........^.... !B This demo program POKEs all the data into the Attribute area of memory. Every time you enter 191, for example, you're supplying info about one character square that has FLASH set to 1, PAPER white and INK white (128+56+7). As the Paper and Ink colours are the same there'll be no movement or colour change to these areas of the screen. !0.......^.........^.........^.. 10 REM DEMONSTRATION LOADING SCREEN 20 REM RUN THIS PROGRAM THEN SAVE THE RESULTING SCREEN BY: SAVE "ys"CODE 22528,768 !2.......^.........^.........^.........^.........^.........^.... Lines 10-20 REMark statements for your info. !0.......^.........^.........^.. 100 DATA 9,191,191,191,191,191, 151,191,191,191,191,191,151 110 DATA 191,191,151,151,191,19 1,151,191,191,151,191,151,151 120 DATA 151,191,191,191,191,19 1,191,186,186,186,191,186,186 130 DATA 151,191,186,186,151,19 1,186,146,191,186,146,186,151 140 DATA 186,186,151,191,146,19 1,186,151,186,191,191,191,186 150 DATA 186,191,191,191,186,19 1,186,151,186,151,191,186,191 160 DATA 151,191,191,146,191,15 1,186,191,146,191,146,191,186 170 DATA 151,186,186,191,186,18 6,191,186,191,191,186,186,191 180 DATA 191,146,186,191,186,19 1,151,191,191,146,191,151,186 190 DATA 186,151,191,146,151,14 6,191,186,191,186,191,186,191 200 DATA 191,186,191,186,191,19 1,191,146,191,191,186,191,151 210 DATA 191,191,146,191,151,18 6,191,146,191,146,191,186,151 220 DATA 186,191,191,191,186,18 6,186,186,191,186,191,191,191 230 DATA 146,186,191,191,186,14 6,191,191,146,191,151,186,191 240 DATA 146,191,146,186,186,15 1,186,191,191,191,186,191,191 250 DATA 191,191,191,191,191,19 1,151,191,191,191,191,191,151 260 DATA 151,191,191,191,151,15 1,191,191,151,191,191,151,191 270 DATA 191,191,191,191,9 !2.......^.........^.........^.........^.........^.........^.... Lines 100-270 The data statements with all the info to be POKEd into the Attribute area. !0.......^.........^.........^.. 1000 CLS : RESTORE 1010 READ a 1020 FOR i=22528 TO 22687: POKE i,a: NEXT i 1030 FOR i=22688 TO 22911: READ a: POKE i,a: NEXT i 1040 READ a: FOR i=22912 TO 2329 5: POKE i,a: NEXT i 1050 STOP !2.......^.........^.........^.........^.........^.........^.... Lines 1000-1050 This part of the program POKEs the data into the Attribute area. !0.......^.........^.........^.. 9999 PAUSE 300: INK 7: CLS : LIS T !2.......^.........^.........^.........^.........^.........^.... Line 9999 This line halts the program for a few seconds, then lists it. !0.......^.........^.........^.. !B NAILING THE FILES !1.......^.........^.........^.........^........ So, how's it done? First off, let's have a look at the two areas of the Spectrum's memory that cover screen pictures, the Display and Attribute files. The first covers shapes, such as lines, circles and so on, whilst the second's concerned with the quality of those shapes, their colour, brightness and whether or not they're flashing. If you're into the technical details, the Display File starts at address 16384 and ends at 22527, that's 6143 bytes; and the Attribute File runs from 22528 to 23295, or 768 bytes. Now, the reason that the Display File's so much longer is because a shape can be drawn to pixel definition but when you assign attributes you can only do it for blocks of eight by eight pixels. Say you were to design a picture that didn't use shapes, only squares of colour. Then you wouldn't need to save the Display File or any of its 6143 bytes at all. The Attribute File holds its info in a pretty straightforward way, as it follows the normal PRINT AT position of the screen. So, the file's address (22528) is equivalent to the first PRINT position on screen (Line 0, Column 0), the second address (22529) to the next PRINT posi- tion (Line 0, Column 1) and so on. You can POKE into the Attribute File with the Ink colour number plus eight times the Paper colour number. Then add 128 to this number if you want the square to flash or for a bright square add 64. To give it a go, try: !0.......^.........^.........^.. POKE 22592,186: REM (7*8)+2+128 !1.......^.........^.........^.........^........ That'll give exactly the same results as: !0.......^.........^.........^.. PRINT PAPER 7; INK 2; FLASH 1; AT 2,0; CHR$ 32 !1.......^.........^.........^.........^........ In both cases you'll get a red and white flash- ing square to the left of the screen three lines down. Of course, you can also use the ATTR function to discover the Attributes at any character position. You'll see that PRINT ATTR(2,0) gives the same result as PRINT PEEK 22592. You can save the screens you've created in this way, not by SCREEN$, but by: !0.......^.........^.........^.. SAVE "picture" CODE 22528,32*22 : REM 32 columns, 22 lines !1.......^.........^.........^.........^........ then load it back with: !0.......^.........^.........^.. LOAD ""CODE 22528 !1.......^.........^.........^.........^........ In just five seconds your title screen will have loaded. !0.......^.........^.........^.. !B ON THE MOVE !1.......^.........^.........^.........^........ From here, you can start adding animation. It's a doddle to do and the devil to describe. It all hangs on the way FLASH operates. When FLASH is on, each of the character squares alternates between the Paper colour and the Ink colour of that square. So, if you design using, say, red Paper with yellow Ink and keep the surrounding area set to yellow Paper with yellow Ink, then your picture alternately appears and disappears. That's because the effects of the FLASH become invisible as soon as you have the same Ink and Paper colours. It's not far from making a design appear and disappear to changing from one design to another. And that's the basis of all animation. Walt Disney eat your heart out! !0.......^.........^.........^.. !B MOVING PICTURE PAINTER !2.......^.........^.........^.........^.........^.........^.... Here's the easy way to create your animated loading screens - an on-screen editor that lets you create two independent attribute pictures before mixing them together. !0.......^.........^.........^.. 10 REM TWIN SCREEN PAINTPAD 20 CLS : PRINT "Build your fir st Screen by using the CURS OR KEYS (5 to 8). You can change COLOUR at any time by pressi ng C and entering a colour numbe r (0 to 7). Press F when F INISHED." !2.......^.........^.........^.........^.........^.........^.... Lines 10-20 Here are the (brief) instructions - practice'll show you just what you can and can't create. !0.......^.........^.........^.. 30 RESTORE : FOR i=USR "a" TO USR "a"+7: READ x: POKE i,x: NEX T i 40 DATA 170,85,170,85,170,85,1 70,85 50 PRINT '"Press a letter to s tart" 60 PAUSE 0 70 FOR j=1 TO 2 80 PAPER 7: INK 0: CLS 90 FOR k=0 TO 20 STEP 2: FOR l =0 TO 31 STEP 2: PRINT AT k,l; I NK 0;CHR$ 143;CHR$ 144;AT k+1,l; CHR$ 144;CHR$ 143: NEXT l: NEXT k 100 LET x=0: LET y=0: LET o=0: LET p=0 110 PRINT #1;"CURSOR COLOUR ="; p !2.......^.........^.........^.........^.........^.........^.... Lines 30-110 Set up the initial routines. Lines 30 and 40, for example, set up a UDG character for the checkerboard screen pattern that'll help when you're working from squared paper. !0.......^.........^.........^.. 120 PRINT FLASH 1; OVER o; INK p;AT y,x;CHR$ 143 130 LET i$=INKEY$: IF i$="" THE N GO TO 130 140 IF CODE i$<53 OR CODE i$>56 AND i$<>"c" AND i$<>"f" THEN G O TO 130 150 IF i$="c" THEN INPUT "Colo ur ? ";p$: IF CODE p$<48 OR CODE p$>56 OR LEN p$>1 THEN GO TO 1 50 160 IF i$="c" THEN LET p=VAL p $: PRINT #1;"CURSOR COLOUR = ";p 170 IF i$="5" THEN PRINT AT y, x; OVER o; INK p;CHR$ 143: LET x =x-1: IF x<=-1 THEN LET x=31: L ET y=y+(1 AND y<21)-(y AND y>=21 ) 180 IF i$="f" THEN PRINT AT y, x; FLASH 0; INK p;CHR$ 143: GO T O 240 190 IF i$="8" THEN PRINT AT y, x; OVER o; INK p;CHR$ 143: LET x =x+1: IF x>=32 THEN LET x=0: LE T y=y+(1 AND y<21)-(y AND y>=21) 200 IF i$="6" THEN PRINT AT y, x; OVER o; INK p;CHR$ 143: LET y =y+1 AND y<21 210 IF i$="7" THEN PRINT AT y, x; OVER o; INK 0+(p AND o=0)+((A TTR (y,x))-56 AND o=1);CHR$ 143: LET y=y-1 AND y>0 220 PRINT AT y,x; FLASH 1; OVER o; INK p;CHR$ 143 230 PAUSE 20: GO TO 130 !2.......^.........^.........^.........^.........^.........^.... Lines 120-230 This is the main loop of the program. !0.......^.........^.........^.. 240 IF j=2 THEN GO TO 310 250 INPUT "": PRINT #1;"PLEASE WAIT A MOMENT" 260 DIM a(704): FOR i=22528 TO 22528+703: LET x=PEEK i: LET x=( x-56)*8: LET a(i-22527)=x 270 NEXT i 280 CLS : PRINT AT 10,1;"PRESS ANY LETTER TO BUILD YOUR SECOND SCREEN" 290 PAUSE 0 !2.......^.........^.........^.........^.........^.........^.... Lines 240-290 This part of the program stores the first screen ready for you to start on the second. !0.......^.........^.........^.. 300 NEXT j 310 FOR i=1 TO 704: LET x=PEEK (i+22527): LET x=x-56: LET x=x+a (i): LET x=x+128: POKE (i+22527) ,x: NEXT i 320 INPUT "": PRINT #1;"Press S to SAVE your picture" 330 IF INKEY$<>"" THEN GO TO 3 30 340 LET i$=INKEY$: IF i$="" THE N GO TO 340 350 IF i$<>"s" THEN STOP 360 INPUT "ENTER PICTURE TITLE" ;p$ 370 SAVE p$CODE 22528,704 380 STOP !2.......^.........^.........^.........^.........^.........^.... Lines 300-380 The final part of the program mixes the two screens and then saves your creation to tape. !1.......^.........^.........^.........^........ !B -- from Your Spectrum #16 (Jul.1985) -- !$