Creating A Window!
Creating A Window!
Let's start in your image editor. There are three main tasks you'll need to accomplish there. First, you must design the look of your scheme's window; second, reduce the physical size of that design as much as you can without sacrificing the quality of your scheme design; third, reduce the colors down to a custom palette of 256.
For the sake of this example, I'm going to use Antique's document window. It's a fairly simple design and will allow us to cover most of the important aspects of creating a window.
You'll see that the design of this window includes a close box, a place for the title of the window, a zoom box, a collapse box and a resize box. There is also a place reserved in the middle for the window's content. These are the areas you'll need to be certain to include when designing your scheme.
When you prepare this design to be made into a scheme, you'll need to remove the resize box and make it a separate element. The same will have to happen with the pressed states for your close, zoom and collapse boxes. So, let's take this design and break it up into the individual pieces it needs to have and reduce the size of the design to it's minimal size. This will ensure that we have a small, fast scheme.
The first thing we need to do is determine how long the repeating areas of the window, those in between the title section and different boxes, need to be in order to not appear as if they are repeating to the user. Clear divisions would not look good in a scheme such as Antique. A good rule of thumb is to make the value of each section around 64 pixels. Also, make sure you don't have any element inside the repeat that will cause the user to notice that the pattern is starting over again.
Be aware of color and shading issues: if your repeating area starts out a light red and ends with a dark red, the person using your scheme will see an obvious repeat in your pattern. Also, as you're designing your windows (or any other element for that matter) make sure that the text you place on them, during the design process, is easily removable since it will become part of your widow if left there.
Following these guidelines, this is what my original design has become.
You'll see that the text has been removed and that I've left enough space between the window controls and inside the window title to create a repeating area that is not noticeable to the naked eye. We've also extracted the resize box as it is actually a separate item element of our scheme.
Now, using my image editor, I'll want to reduce the number of colors of my design down to 256. Note that if your image editor does not support this feature, Scheme Factory will attempt to do it for you which doesn't always look very good in this release of Scheme Factory.
Now that the image contains all the necessary parts for a basic window, I'm going to copy the image onto the clipboard. I'm going to select only the image itself, avoiding as much excess white space as possible outside the design's borders.
Now it's time to make this document window work!
I'll drag the Antique scheme onto the Scheme Factory icon.
Note: In this example I'm using a copy of Antique which I have deleted all of the cicn and wnd# resources from, but you can start a new scheme from scratch inside Scheme Factory using the "New..." command in the File menu.
Welcome to Scheme Factory! Here's where the fun begins!
In the "Antique's Parts" window you'll want to click on the disclosure triangle next to the "Windows" group. You'll be given a list of window related items you can edit. Double click on the "Document Window" item.
You will be asked if you want to use the picture on the clipboard as the icon for the part that you just tried to open because that part doesn't have an icon yet. Click "Yes" and you will be presented with a document window editing palette, and a view of the window graphic you just pasted into your scheme with Scheme Factory. If you've actually opened Antique in Scheme Factory, the list in the window editing palette will have entries in it (and you wouldn't have been asked if you wanted to use the picture on the clipboard as the window's icon). However, in a scheme of your own, that list will be completely empty and will require some filling in. Let's assume it's empty.
Before you can continue working on a scheme's window you'll have to define the Content area. This is where the content of your window will appear when it's working, and how Scheme Factory knows where to show you the sides of the windows.
Click the + button to add a part.
Drag and resize the content defining area (red rectangle with handles) appearing on your window design making sure you've filled all the white space inside your window.
Now lets make a close box region.
Click on the + button to add a second part. You'll notice that it defaults to a content area. You'll have to change this using the second popup menu in the window editing palette. Simply click on the Type popup and choose Close Box. Now move the close box defining area (green rectangle) over the close box in your design and resize it to fit properly. You'll notice that the numbers change to reflect the positions of your controls. Your close box should now look like this.
In your own scheme you'll want to finish up your window by continuing to add parts with the + button, defining what they are with the Type popup and moving them to the proper locations on your window image. It will look something like this.
Now that we have the different regions of our scheme defined properly, we must now enter some information so that the scheme displays properly. From the Edit popup, choose the Top of the Window option. Your screen will now look something like this.
Click on the + button to add two parts allowing us to begin the editing process. Two movable arrows appear on the top part of our image and a shaded area (currently red) indicates the part of our window we are changing. Try dragging the second arrow from side to side and watching the numbers change.
The two areas we have defined are listed as Ignored in the window editing palette. Obviously, this isn't quite what we want. If an area of the window is ignored, it will not be drawn on the screen when your scheme is in use.
The first Ignored part is correct. This is the part which defines how far from the side of your window image that your window actually starts drawing. In Antique's case, the window begins immediately. Thus, we choose a value of 0.
The second defined area is obviously supposed to be displayed as our window draws. So, from the Type popup menu, we will choose Static Element, an area that is always displayed on the screen and one which doesn't change.
The remainder of the Top of the Window is defined in the exact same manner as the first two parts. The following screen capture illustrates the completed top section of Antique's document window, with all its parts defined and labelled.
The only tricky part about finishing the Top of the Window is knowing which Types to assign to the different parts of your scheme and where, exactly, they should each begin and end.
Luckily, each of the Types is quite self-explanatory and after a short examination you should have no problem understanding what each does.
As an example, we'll go through the parts in the Antique image, above.
The Close Box Area which extends from pixel 14 to 32 must cover the whole of the close box, from left to right. This is so that Kaleidoscope recognizes that area as a close box when you click inside it.
The Repeat From Left section does just that: the chosen area will duplicate itself, adding another section over and over, when the window is resized by a user. This insures that no blank spaces occur. A second Repeat From Left section is added to the other side of the Top of the Window so that the title of the window will remain relatively centered.
Next, we'll define the title areas.
Each of the sides of the box surrounding our title must be drawn individually. This is so that the two sides will remain static, but the middle section, which contains the text, can stretch as wide as is needed. This is why we paid such careful attention when designing our scheme window: now, when the Title Repeating Area is duplicated, we won't have visible repeat marks.
Treat the zoom and collapse boxes in the same manner you did the close box. Create a defining area for each and set it to the proper type.
You'll notice that there are other options in the Type popup that are not used in the Top of the Window section of Antique's document window. You may wish to use them in your scheme. Here is a list of the options and a brief description of each:
Repeat From Left - An area defined with this Type will be repeated, over and over. When we say "From Left," we mean that it will start its display from the left side of your window and repeat towards the right. So, you'll always know that your pattern begins on the left.
Repeat From Right - Same as above, but starting on the right side.
Repeat Using Exact Length - This allows you to define a repeating section that only shows another repeat if there's enough space to show it in its entirety. If there isn't enough space, other repeating sections must be used to fill the remaining space. Otherwise, blank areas might occur on your widow sides. Scherzo uses this on the right and bottom sides of it's document window.
Exact Length Slack Fill From Left - This has the same repeating behavior as the standard repeating parts, but it only occupies the space that occurs when an exact length repeat needs some extra fill. In other words, it is used to fix the problem discussed above.
Exact Length Slack Fill From Right - Same as above, but starting on the right side.
Stretching Area - As the name implies, when you define an area as stretching, it will simply stretch the section throughout the space it needs to fill. This is useful for creating a gradient.
Static Element - This is an item that will not stretch or repeat. It also won't go away when drawing space is low, and takes priority over repeating sections when space is low.
Disappears In Low Space - This is the same as a Static Element, but when space is low in your window, this piece will disappear.
Close Box Area - This is a section that only appears if your window contains a close box. You only need to use this part to define where your close box is going to go (plus any shadows or extra shapes it might have) so that when there isn't a close box, you don't see it.
Zoom Box Area - Same as above, but with a zoom box.
Collapse Box Area - Same as above but with a collapse box.
No Close Box Area - This is a section that only appears if your window does not contain a close box. Normally if the window is drawn without this part, the normal close box will simply be omitted and the adjoining parts fused. But, if that's not a pleasing option, such as in Scherzo, this piece will take over for the normal close box.
No Zoom Box Area - Same as above, but with a zoom box.
No Collapse Box Area - Same as above but with a collapse box.
Title Repeating Area - Same as a repeating area, but it's designated to fill behind the title of a window. When a window doesn't have title text, this piece disappears.
Title End Cap - This behaves the same way a Static Element does, but when a window doesn't have title text, this piece disappears. This is useful in schemes like Antique that have end caps around their title text section.
Ignored - Any section that's defined as ignored will not be drawn when you use your window.
Once you have completed assigning sections of your Top of the Window, move on to the sides and bottom and do it all again!
You'll notice that the top section is defined as Ignored. In this case, this is not done to insure that section doesn't draw, but simply to indicate that we have already defined what that section does in the Top of the Window section. Defining it here would not cause errors, but would simply be redundant.
Similarly, the very bottom section of the sides, which you might expect to be defined as a Static Element, is left blank. These sections only need to be defined once, and both parts, from the Left Side and Right Side of the Window will be defined in the Bottom of the Window.
The bottom of Antique's document window is a good example of when the Ignored part which starts a section actually contains pixels. If this number were not set to 3, the edge of the document window should start three pixels from the edge of where the window actually occurs.
Now that all the Regions of Antique's document window are defined, and all four sides have been carefully labelled and set to their proper sizes, the entire process of creating a Kaleidoscope scheme window in Scheme Factory is complete. How's that for taking the mystery out of the whole thing?!
Next, simply repeat the process for each of the other windows in the "Windows" group that appears in your scheme's parts window. Design your graphics, optimize them for size and color, open your scheme in Scheme Factory, paste your graphics into your scheme, and define the parts using the various popup menus and multicolored defining areas. After that, your windows are finished!