PNG/MNG Construction Set Quick Start

QUICK START

This document will show you how to use PNG/MNG Construction Set to:

- Create a transparent PNG file
- Create an animated MNG file
- Create an animated MNG file with transparency
- Create an interlaced PNG file

This is a very cursory tutorial which discusses the most commonly-used functions of PNG/MNG Construction Set. For complete information about all the features of PNG/MNG Construction Set most of which are not discussed here please see the PNG/MNG Construction Set Main Tutorial and Reference documents.

Create a Transparent PNG File

This section will discuss adding transparency to an existing single-image PNG file. A transparent PNG file is one in which one of the palette colours of the file is defined as transparent everywhere the transparent colour would normally appear, the background will appear instead. This discussion will deal with simple transparency only – true alpha-channel transparency is discussed in detail elsewhere in the documentation for PNG/MNG Construction Set.

1. Select Open from the File menu of PNG/MNG Construction Set.

2. Select the PNG file you with to make transparent.

3. If there is no Transparency tRNS chunk in your PNG file when you open it, you must add one:

   - Click on the green plus button in the tool bar.

   - Select Transparency (TRNS) from the menu which appears. Note that, depending on the type of image in your PNG file, you might be prompted for a number of initial transparent colours. Accept the default value, one, and click on OK

4. Double-click on the Transparency chunk to access its editor.

5. The nature of the Transparency editor will vary depending on the type of image you use. If you see a Transparency editor with a list window at the left side of the dialog, you have a palette-mapped image. In this case:

   - Select the eyedropper tool. A window will appear with your graphic in it. Click somewhere in the area you wish to make transparent. The eyedropper window will close. Note that the eyedropper tool might prompt you that the colour you have selected is not in the transparency list. Click on Yes to add it.

   - The degree of transparency, the "alpha" value, for the transparent colour you have selected, will be displayed in a field at the bottom of the dialog. Set this value to zero to make the colour in question transparent.

   If you see a Transparency editor with an eyedropper and a colour button, you have a true-colour image. In this case,

   - Select the eyedropper tool. A window will appear with your graphic in it. Click somewhere in the area you wish to make transparent. The eyedropper window will close.

6. You can use the Preview function to preview your graphic and make sure the transparent areas are as you expected them to be. Keep in mind, however, that if the transparent colour and the background colour happen to be the same, it may be less than apparent whether youve successfully applied transparency to the file youre editing.

7. Click on OK in the Transparency editor.

You can preview your PNG file to make sure the transparency is behaving as you wish by clicking on the View button. In some cases, it will be difficult to see transparent areas in a PNG file you've created if the background colour of your PNG file is white, for example, and the area you made transparent was also originally white, not much will appear to have changed. You can get around this as follows:

1. If there is no Background bKGD chunk in your PNG file when you open it, you must add one:

   - Click on the green plus button in the PNG/MNG Construction Set tool bar.

   - Select Background (BKGD).

2. Double-click on the Background chunk to edit it, and click on the colour button in its editor dialog to choose a background colour for your animation. The background colour will not appear when your PNG file is displayed on a web page – it's only used to help you see how your transparent graphic is working. You might want to choose a colour similar to that of the background of the web page your graphic is intended for.

3. Click on OK and click on View to preview your image. The background colour should show through the transparent areas.

NOTE: The Background colour in of a PNG file is ignored by web browsers, which use the background of your page as the image background. As such, you can leave the Background colour set to anything you like.

Create an Animated MNG File

This section will discuss the simplest way to create an animated MNG file with PNG/MNG Construction Set. There are others this approach assumes that all the cells of your animation exist as individual image files. If this is not the case or if your resulting MNG file doesn't look like you think it should you probably need to get more deeply into PNG/MNG Construction Set's features. See the PNG/MNG Construction Set Main Tutorial and Reference documents.

Having said this, most animated MNG files can be successfully created this way.

1. Select Animation Wizard from the File menu of PNG/MNG Construction Set.

2. Click on Next to accept each of the defaults until you reach the file selection screen.

3. Select the individual source image files which will comprise your animation. They can be stored as JPG, PCX, BMP, PNG or TGA files – note that you may have to set the Type of Files control in the Open dialog accordingly. You can select your source files one at a time, or all at once by holding down the Crtl key and clicking on each file name in sequence. Click on Open when you're done. Note that you must select at least two images to create an animation.

4. When you have finished selecting files, click on the Cancel button in the Open dialog, which will return you to the Animation Wizard window. Click on Next.

5. Click on Done. Animation Wizard will build your animation and open it in a PNG/MNG Construction Set document window when it's done.

6. You can preview your animation by clicking on the View button. Save your animation to a new MNG file by selecting Save As from the File menu of PNG/MNG Construction Set.

NOTE: This process discards any transparency information which might exist in your source image files. See the next section for a discussion of transparent animated MNG files.

Create an Animated MNG File with Transparency

NOTE: If you build an animation with Animation Wizard using source GIF or PNG files having transparency enabled, the transparent elements in your source images will be preserved – you won't have to enable transparency after Animation Wizard is completed. The following discussion pertains to building animations from non-transparent source files.

This procedure assumes that the area to be made transparent in each of the images in your MNG file is the same colour. This will usually be the case. If it's not so, you'll find a solid background colour flashing on and off as your MNG file animates. In this case, you will have to set the individual background colours by hand, editing each of the Image chunks of your MNG file individually. This is discussed in detail in the Main Tutorial and Reference documents installed with PNG/MNG Construction Set.

1. Begin by creating an animated MNG file, as discussed in the previous section of this document.

2. When your new MNG file has been opened in PNG/MNG Construction Set, click on the Tag All button to select all its chunks. Click on the Swiss army knife button, or select Manage from the Chunk menu.

3. Click on the Apply button in the Transparency group of the Manage dialog.

4. The nature of the Transparency editor will vary depending on the type of images in your MNG file. If you see a Transparency editor with a list window at the left side of the dialog, you have palette-mapped images. In this case:

   - Select the eyedropper tool. A window will appear with your first frame in it. Click somewhere in the area you wish to make transparent. The eyedropper window will close. Note that the eyedropper tool might prompt you that the colour you have selected is not in the transparency list. Click on Yes to add it.

   - The degree of transparency, the "alpha" value, for the transparent colour you have selected, will be displayed in a field at the bottom of the dialog. Set this value to zero to make the colour in question transparent.

   If you see a Transparency editor with an eyedropper and a colour button, you have true-colour images. In this case,

   - Select the eyedropper tool. A window will appear with your first frame in it. Click somewhere in the area you wish to make transparent. The eyedropper window will close.

5. Enable the Remove by Background, and click on the Apply button in the Delay and Background group.

6. Click on OK and save your MNG file.

Create an Interlaced PNG File

NOTE: None of the major browsers seem to be handling interlaced PNG files properly as of this writing. You probably won't want to use this feature for the moment.

An interlaced PNG file displays in coarse pixels in a web browser when it begins to download, and becomes more clearly defined as the download proceeds. Interlaced PNG files offer no performance improvements they're wholly cosmetic.

1. Select Open from the File menu of PNG/MNG Construction Set.

2. Select the PNG file you with to make interlaced.

3. When your file is open, double click on the Header chunk. A Header editor will appear.

4. Enable the Interlaced option.

5. Click on OK and save your PNG file.

Click on View to see your PNG file displayed in an interlaced pattern. Note that this differs visually from the way web browsers display interlaced images.

This document and all the other documentation included with PNG/MNG Construction Set is copyright © 1995 – 2009 Alchemy Mindworks. It may not be reproduced in whole or in part or transmitted in any form save as a component part of the PNG/MNG Construction Set software without the explicit written permission of the copyright holder. Unauthorized use of this document or any portion thereof may result in severe criminal and civil penalties. Alchemy Mindworks accepts no responsibility for any loss, damage or expense caused by your use of the information in this document, however it occurs. This product is marketed under license from Alchemy Mindworks Corporation.