A quick introduction by
D.A. Symes
Part One.
Using !Paint and other Apps
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You'll need a few Acorn supplied applications, plus a couple of third party apps.
!Paint
!Draw
!InterGif6 from Peter Hartley. ---[ http://www.ant.co.uk/~peter/software/intergif.htm ]---
And if you don't have a recent(ish) version of the new Browser... You'll also need ---[ !IGViewer ]--- from Peter's site.
I'm going to assume you know your way around !Paint and !Draw....Well at least a bit...
Okay there are two ways to do this...
The first can be used for very simple characters, and doesn't require a massive amount of work.
The second way is used to construct slightly more complex characters, it's more time consuming, but I think the end result maybe worth the extra effort.
Also, trying to construct the more complex characters using the first method is tedious with a capital T.
However... to get you going we'll start with the simple method.
1) Make sure the computer is in a 16 colour screen mode.
2) Run !Paint.
3) Create a Sprite 40 x 40 and 90 dpi for height and width with a mask. (If you don't require much detail you could use 45 dpi). Name it something short. eg: ts1 or 001.
4) Zoom to 12 times, or whatever is comfortable for you.
5) Fill the Sprite with mask.
6) Draw your first picture.
7) From the Sprite file window (Not the Sprite) make a copy of the first Sprite.
So do: Menu--Sprite'name'--> Copy-- ts2 or 002, for example.
Open the Sprite file window furthur to expose the new Sprite.
8) Double click the new Sprite (a copy of the first), and edit it.
9) Repeat steps 7 and 8 as many times a required. (My recent ones have Six or seven pictures).
10) Save the Sprite file.
1) Run Intergif6. Double click to open the control/setup window.
You can set InterGif6 to how you want it later, but for now set as follows...
Check that the Output radio button has GIF On, and the Options, Looping animation button is On, also check Transparency Auto is On if you require a transparent background to your animation.
2) Drop your Sprite file on to the Input box.
3) Save the GIF from the Output.... Drag it to a directory window.
If you now drop the resulting GIF file onto the new Browser it will animate.
Obviously if you're using !IGViewer you'll need to click the start button >
You now click the InterGif6, Output Sprite radio button On, and Save that file out.
When the Output file is double clicked it will open in !Paint (Assuming Paint has OS precedence on your system, not some other graphic app, in which case Drag and Drop the file on to !Paint).
You'll notice the Sprite names have changed to "000delay8", "001delay8" and on...
By altering the delay number you can change the speed at which the GIF runs.
Eg: "000delay20" will run somewhat slower than "000delay8"
Nb: the delay speed is in centiseconds.
Modifying the delay can improve the realism of the animation.
For example the Gif at the top of this document has a longer delay at the start and end pictures to make the laugh look better.
After tweaking, run through InterGif6 again, outputting as a Gif of course.
End Part one.
---[ Return to Contents ]---
Part Two
Using !Draw and other apps.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Introduction:
You'll need a few Acorn supplied applications, plus a couple of third party apps.
!Paint
!Draw
!ChangeFSI
!InterGif6 from Peter Hartley ---[ http://www.ant.co.uk/~peter/software/intergif.htm ]---
And if you don't have a recent(ish) version of the new Browser... You'll also need ---[ !IGViewer ]--- also on Peter's site.
I'm going to assume you know your way around !Paint and !Draw....Well at least a bit... enough to edit paths in !Draw.
As you saw in part one, creating a set of simple pictures using !Paint is quite easy and straight forward. But if the images are to be a bit more complex, then the number of pixels that require editing become rather large and a bit difficult to handle.
This is where creating your images in !Draw has its advantages, in that blocks of the image can be moved by editing paths, rather than individual pixels.
This also means areas of colour are auto refilled, without the user having to move ( as would be the case in !Paint), each pixel.
Unfortunately TANSTAAFL applies as per usual. So while manipulating the more complex image is easier in !Draw, some additional processing work is required to get the images into a usable state after the initial drawing work.
To help with a few pointers I've used a shouting mouth illustration I created recently.
I don't intend to get into describing the finer points of using !Draw, that's really outside the scope of this article, but if you have any particular difficulties, please Email for help. ---[ Email Dave ]---
Remember to have the computer in a 16 colour Mode.
Run !Draw.
Create your drawing, remembering that some things need to be created in pieces so that they can be moved.
DON'T use white as a colour in your drawing. (Later in the process whites will be turned into Mask if required).
You'll need to think about the different layers of the drawing and where they each need to be. also what elements of the picture can be joined together for ease of working.
My example has ended up with three layers (thought it started out as five), as some of the layers can be joined together.
L1 Comprises only the lips. (Front layer)
L2 Comprises only the teeth. (Middle layer)
L3 Comprised the joined layers, uvula, dark throat and mouth sides. (Back layer)
The lips and teeth are the only parts of the picture that will be moved substantially, though if you take the various drawings apart you'll see that the teeth needed tweaking to fit in the open mouth.
Make a copy of the first drawing, then editing the paths, make some small changes.
Now make a copy of this second drawing and re-edit the paths again in the new copy.
When you've completed the set, you'll need to prepare for the next stage.
For some animations the miss-registry jumping, caused when grabbing the images with !Paint, can enhance, but for most pictures it detracts from the final appearanc. To overcome this we need to create a registration grid.
This involves making a grid and positioning it so that the screen grabs are consistent in size and position, otherwise the final animated picture will jump all over the place.
Make a transparent square or rectangle, just a little larger than your largest drawing.
Find an item in the drawing to act as an anchor. In the case of my illustration it's the uvula.
Add two cross hairs, then make as many copies of the grid as you have drawings.
Place one grid on each drawing, with the cross hairs in the same place on each one.
After all the registration grids are positioned...
In turn, select all the cross hairs only... and delete them. You should be left with each drawing inside a clear box.
Run !Paint
From the icon bar menu select "Snapshot" (No delay).
Drag the grab rectangle around the inside of the box, then Save.
Do this to each of the pictures.
RENAME the internal name of each Sprite in its file, they'll all be called "Screen"
Using Paint Menu-Edit- check and adjust the image sizes of each image, so that they are all the same size.
This is important... otherwise Intergif will not process them.
Pixel edit any parts of the registration box that might have been picked up, to the background colour (White).
By-passing the !PaintSnapshot process:
It is possible to to make sprites out of the drawfile without going through !Paints Snapshot processing.
See Part 4: or ---[ Click this to go there now ]----
If you created your images in Draw at a comfortable size, they'll now need reducing.
For this process we'll use ChangeFSI.
Use CFSI, Menu-Scaling-Custom to 1:4 for both X and Y. Obviously if you've created your drawings larger or smaller you'll have to adjust the scaling accordingly.
Drop each Sprite on to CFSI
Save them out as Sprites.
You will again need to rename all the Sprites internal names, as CFSI will save them out, all with one internal name.
Name them something like 001, 002 etc.
Double click the first Sprite, and use its Sprite file to drop all the other sprites into, in the correct order.
When this is done you should have one Sprite file containing all the processed drawings.
Open each Sprite in turn and fill the background with Mask.
You'll need to do a Menu-Edit--> Mask on each Sprite, before Mask is added to the palette.
Save the Sprite file.
Process through InterGif6, as in Part One.
Adjust the timing to make it appear more natural, like this illustration:
End part 2
---[ Return to Contents ]---
Part 3
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
It is possible to batch process some of the above work using IG6.3 and ChangeFSI
(From an idea suggested by Richard Goodwin)
Set the InterGif6.3 configuration window as shown below.
Set all Options to Off.
Sprite On, and Split output On.
Drop your Spritefile, the collection of sprites in one file, onto the Input part of InterGif.
Drag the Save Sprite out of the IG Output into a filer window.
You'll end up with your original Spritefile saved out as separate images.
Now re-set some of the buttons in the IG configuration window, but first, click on the ChangeFSI button.
This will present the window below.
Click Preprocess On and change the scale options (1:1 1:1) to those you require.
1:2 1:2 or maybe 1:4 1:4. Then OK.
Nb: This way round makes images smaller, the other way around (2:1 2:1) makes them larger.
In the main IG6.3 window change the settings as illustrated below.
Join Input files and Sprite Output both On.
Drop only the first Sprite in the set, onto the IG Input window, drag the Save Sprite from Output to a Filer window.
All the separate Sprites should now be processed (smaller) and back together in one Spritefile.
Put the settings in the IG window back to their original configuration....So...
Click the ChangeFSI button and switch Off preprocessing--- OK
Looping animation in Options set ON
Output set to GIF.
Drop the newly processed Spritefile onto IG Input, then drag the resulting Gif to a filer window.
This should animate if dropped into a recent browser or Peter's !IgViewer.
End part 3
---[ Return to Contents ]---
Part 4
Processing Supplement 2:
Using Draw and InterGif6.3
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
By-passing the !Paint Snapshot process:
It is possible to by pass the !Paint Snapshot part of the proceedure, by processing the Drawfiles directly through InterGif6.3.
Create your Draw pictures, then process as detailed above with the registration grid.
After positioning is finished and the grid lines removed, put the outline box to the back (Ctrl + B), then select and Group all objects within each single outline box together.
So you end up with all the objects inside the box and the box frame itself as one object.
Do this for each drawing in turn.
Select and Save (Menu-Save- Selection or Shift +f3) each box and its contents in turn.
Run InterGif.
Drop the first DrawSelect file on to the InterGif Input section, save out as a Sprite.
Do this in turn with all the DrawSelect files.
You should end up with a number of Sprite files.
Open eack one in turn and rename. (That is the internal Sprite name and not the Spritefile name). as IG will have output all the Sprites as 000.
Obviously Save them back into the Spritefiles again.
Open the first Spritefile in the sequence, and drop all the others in order, on to it.
You should end up with one Spritefile, with a number of sprites inside it.
Process through InterGif to make the animated gif as detailed above.
End Part 4
---[ Return to Contents ]---
This document was created by Dongle's HTML department
Dongle can be reached through ---[ df.symes@argonet.co.uk ]---
(C) 1998 DAS