D]4 P]01Fig1 P]02Fig2 P]03Fig3 C] ---------------- C] ICONERY C] by R. G. Tambash C] ---------------- ]]71 (JUMPDISK NOTE: If you are reading this from the Article Menu, ]]71it's suggested you instead read it by double-clicking the ICONERY icon ]]71in the ICONERY drawer. This second method reveals the graphic characters ]]71that are meant to be seen within the text. To see the file as it was ]]71written, with special character coding evident, use a COPY of JUMPDISK, get ]]71an INFO screen for the ICONERY icon in the drawer, and change the default ]]71tool from: :util/lirepic to :util/ppmore ]]71. . . and save it, then double-click the icon to see the new version.) This tutorial could not have been presented in such a comprehensive fashion without the terrific utility LIREPIC by Charles Vassallo first published in the April 1990 issue of JUMPDISK. The simplest way to acknowledge his efforts is employ them, so Iconery may be considered as this author's thank-you. They wink, wave bye-bye, walk and jump. Many can grow or others may melt, and some will even explode before your very eyes. What is it that am I babbling about? Icons, of course! Animated icons on the Amiga are on the verge of becoming a bona fide art form. There are, within the Amiga community, many talented artists using their paint and drawing software to generate very sophisticated pictures. Many of the less complex of these have been converted into spectacular icons. However, it's quite possible to create interesting and effective animated icons yourself by using just the two icon editor programs, IconEd and IconMerge, from the Extras disk. So then, this tutorial is intended for the casual or new workbench users who would like to create their own custom icons without creating a major project. C] TWO SIMPLE RULES An animated icon is simply two different images that have been precisely merged together to form a single entity. Neither of these images has any particular restriction imposed upon its creation. Although their overall size must be the same, they may be of different colors or shapes; but their positions, relative to each other, must be exact. There then, is rule number one..... perfect alignment. The completed icon is only the start and stop positions of the action. The apparent motion is an illusion created in the viewer's mind. An excellent example of the concept can be ] ]P01 00 seen (Fig. 1) in the "read.me", or doc ] ]P01 01 file, icon used by Fred Fish in his ] ]P01 02 well known collection of public domain ] ]P01 03 disks. This icon consists simply of ] ]P01 04 a closed book (the start) and an open ] ]P01 05 book (the stop) with no intermediate ] ]P01 06 stages. The viewer's imagination ] ]P01 07 fills in the motion with the mind's ] ]P01 08 knowledge of the mechanics of opening ] ]P01 09 and closing books. The whole idea is to exercise without stretching the viewer's imagination. Rule number two..... Keep it believable! C] PRELIMINARY SET-UP While it isn't mandatory to dedicate a disk to icon making, it improves the "fun quotient" and it become a convenient place to store your completed masterpieces. So please indulge me, format a blank disk and name it "CustomIcons" or whatever else strikes your fancy. Next, you must copy ("dragging" is the easiest method) the programs "IconEd" and "IconMerge" from the Extras disk onto your new disk. Then from your Workbench disk or wherever you keep an empty drawer, make three copies of the "Empty" drawer. Name one of them "Masters", one "Icons" and the third "Spare". They also, should be "dragged" to the new disk. The next step is to gather some raw material to act as a starting place for your creations. We're going to need examples of each type of icon (tool, project and drawer) from the Extras disk. To accomplish this, with your Extras disk in DF1:, enter your SHELL or CLI and type the following: 6] COPY DF1:ReadMe.info RAM:P.info 6] COPY DF1:Tools/PerfMon.info RAM:T.info 6] COPY DF1:Tools.info RAM:D.info Now, with your original Workbench disk in DF1: type: 6] COPY DF1:System/FastMemFirst.info RAM:X.info Then replace your "CustomIcons" disk in DF1: and type: 6] COPY RAM: DF1:Masters ALL Exit the CLI and you now have an example of each icon type, plus an extra tool icon, to act as your foundation. I've deliberately skipped the Trashcan and Disk icons because they each have unique properties. It is impossible to delete a Trashcan icon without using the CLI and since most Amiga users have eliminated it from their disks it seems pointless to copy it, but do so if you wish. A copy of the Disk icon, while it can be modified in IconEd, is invisible in any context other than as an icon attached to a disk. A circumstance that is not impossible to deal with, but it is too difficult for our purposes here. C] ANIMATING AN ICON We now have some basic tools to work with so let's create an animated icon. What we're going to do here is take two existing icons and modify them to create an impressive, and professional looking, third icon. This may not be true creativity, but it does illustrate the quality of results that you can achieve...... and it's easy! First, open the "Masters" drawer and drag the "T" and "X" icons onto the "CustomIcons" window. Next, enter the IconEd program and click on the "OK" gadget. Now follow these step by step directions: 6] 1....Go to the menu labeled "DISK" and select "LOAD DATA". 6] 2....When the requester appears, type a "T" (after removing "name") and 6] select the "LOAD ICON IMAGE" gadget. The image will appear in 6] the editing field and in box number 1. 6] 3....Click in the number 2 box. The editing field will change images. 6] 4....Repeat steps 1 and 2, this time substituting a "X" in place of 6] the "T". This image will appear in the editing field and in box 6] number 2. 6] 5....Click in the number 4 box. 6] 6....Go to the menu labeled "COPY", move down the menu strip to "FROM 6] FRAME" and select "2". 6] 7....Go to the menu labeled "MOVE" and select "IN-FRAME". 6] 8....When the requester appears click three times on the "left arrow", 6] then select the "OK" gadget. Each time you click, the image in 6] the editing field will move one pixel to the left. 6] 9....Next go to the menu labeled "COLOR" and select "BLUE". 6] 10....In the editing field, color over the pixels that comprise the 6] diagonal and right vertical lines in the picture frame. 6] 11....Go to the menu labeled "MISC" and select "FLOOD FILL". 6] 12....In the editing field, click in the black area near the bottom of 6] the image. It will disappear! ]]61 13....Go to the menu labeled "COLOR" and ]P02 00 ]]61 select "RED". ]P02 01 ]]61 14....In the editing field, draw double ]P02 02 ]]61 vertical lines at the left and the ]P02 03 ]]61 right edges of the field. Next ]P02 04 ]]61 extend the bottom and the top ]P02 05 ]]61 horizontal lines in both directions ]P02 06 ]]61 to complete the rectangular picture ]P02 07 ]]61 frame. At this point, Fig. 2 and ]P02 08 ]]61 your editing field should look ]P02 09 ]]61 alike. ]P02 10 ]]61 15....Click in the number 1 box. ]P02 11 ]]61 16....Go to the menu labeled "MOVE" and ]P02 12 6] select "IN-FRAME". 6] 17....When the requester appears click on the "right arrow" 43 times. 6] Yes, 43! Next, click on the "down arrow" five times and then 6] select the "OK" gadget. 6] 18....Click in the number 5 box. 6] 19....Copy box number 4 to box 5 by repeating step number 6, except 6] select "4". 6] 20....Repeat step numbers 9 and 11. 6] 21....In the editing field, click on any portion of the figure of the 6] jumping rabbit. 6] 22....Repeat step numbers 11 and 21 until all elements of the rabbit 6] have been erased. 6] 23....Click in the number 6 box. 6] 24....As a precautionary measure, go to the menu labeled "COPY", move 6] down the menu strip to "FROM FRAME" and select "5". This will 6] protect your completed work ]]61 from disaster! ]P03 00 ]]61 25....Go to the menu labeled "COPY", ]P03 01 ]]61 move down the menu strip to ]P03 02 ]]61 "MERGE FRAME" and select "1" ]P03 03 ]]61 If all went as predicted, ]P03 04 ]]61 Fig. 3 should look like your ]P03 05 ]]61 work. ]P03 06 ]]61 26....Go to the menu labeled "DISK" ]P03 07 ]]61 and select "SAVE DATA". ]P03 08 ]]61 27....When the requester appears, ]P03 09 ]]61 change the name to "A1" and ]P03 10 ]]61 select the "FRAME AND SAVE" ]P03 11 ]]61 gadget. Place the cursor at ]P03 12 ]]61 the upper left corner of the ]P03 13 6] editing field and click the left mouse button. Move the cursor 6] to the lower right corner of the picture frame, a box will follow, 6] and click again. 6] 28....Click in the number 4 box. 6] 29....Repeat step numbers 26 and 27, except this time change the name to 6] "A2". Be very sure that you begin and end your frame in the same 6] locations as you did in step number 27. 6] 30....Exit the icon editor by way of the "close gadget". Now, let's see what you've accomplished so far. Close the "CustomIcons" window and then reopen it. This will allow the display to update itself. Somewhere near the "IconEd" icon you will find your two newly created icons. If you can't see them, don't worry, they've hidden under another icon. Search and you'll find them. The next step is to animate your creation. First let's move the "T" and "X" icons back into the "Masters" drawer. Neatness counts! To begin, enter the "Icon-Merge" program. When the window opens you will be presented with the two program options -- MERGE, the function we are employing, and SPLIT. Type an "M" and press the RETURN key to specify that option. Next, the program wants the three names: the start image, the stop image and a name for the finished icon, and in the correct sequence. That's very important. Respond to these prompts with the names in the viewing order and the third name must always be the finished product. Type A1 (and press Return) at the second prompt. Next type A2 . Finally, at the fourth and last prompt type: Tortoise.Hare . Close and then reopen the "CustomIcons" window. You've done it! You have created an animated icon. It will be located in the same space as "A1", sometimes under it and at other times on top of it, so you'll have to do some dragging to see it. Nonetheless, you have created a impressive piece of work and you did it in less time (perhaps) than it took to read this tutorial.