![\"\"](\"https:\/\/blog.mindworkshop.com\/image\/alpha005.gif\")
<\/p>\n<\/p>\n
While its sounds like a fragment of dialog from a 1980s science fiction flick shot on a budget in an unnamed eastern European country, alpha channels are actually a profoundly useful feature of graphics… as long as you know what they\u2019re really up to.<\/p>\n
<\/p>\n
Note that for the purpose of this posting, you\u2019ll need PNG MNG Construction Set<\/a> 2.0a patch 37 or better and the 3D Effects #1<\/a> animation plugin set patch 17 or better, the Buttons #2<\/a> animation plugin patch 2 or better, the Electronic Signs #2<\/a> animation plugin patch 4 or better or the Text Effects #4<\/a> animation plugin patch 5 or better to access alpha channels. The examples in this posting were created with the 3D Effects #1 plugins.<\/p>\n In a conventional graphic \u2013 such as a digital camera image \u2013 each pixel knows what color it is. While it\u2019s not absolutely necessary that you know how this works, a pixel actually stores three numbers, one each for the amount of red, green and blue light required to display the pixel in its correct color.<\/p>\n In an alpha-channel graphic, each pixel knows what color it is and how transparent it is, and the transparency of each pixel can be defined individually. A fully-transparent pixel will be invisible, and whatever the graphic it was part of is displayed over \u2013 such as a textured web page background \u2013 will show through such pixel. A fully-opaque pixel ill display in the color it defines, and obscure its background.<\/p>\n A partially-transparent pixel will appear to be translucent, its displayed color being a blend of its defined color and the color of the background it\u2019s displayed over. Alpha-channel graphics allow for 256 levels of transparency.<\/p>\n Alpha-channel transparency has several specific uses. It can make entire graphics appear to be translucent, an effect that grows tedious fairly quickly. More to the point, however, it can make the edges of objects in graphics with transparent areas appear natural and cleanly defined, no matter what said graphics are displayed over, and it can be used to render lighting effects \u2013 such as shadows \u2013 with lifelike realism.<\/p>\n The foregoing may require a more detailed explanation.<\/p>\n A computer graphic \u2013 such as the monitor you\u2019re looking at right now \u2013 is a matrix of tiny colored dots, properly called \u201cpixels\u201d for reasons no one still living can remember. You can think of these as being like squares on a sheet of graph paper which can be colored in, \u2018cept the squares are about 1\/75th of an inch across. <\/p>\n While a pixel 1\/75th of an inch across would seem to be a fairly diminutive object, these little trolls can be visible as individual objects under some circumstances. The most troublesome of said circumstances is when software attempts to draw things on your screen using lines that are something other than horizontal or vertical. In this case, the theoretical lines wind up going right through the middle of some pixels. Since pixels can\u2019t be subdivided, the result of drawing this way will be jagged lines, as shown in this example.<\/p>\n Sneaky software works around this problem by using \u201canti-aliased\u201d drawing. In an anti-aliased image, the pixels at the edges of objects are adjusted to be a blend of the color of the object and the color of its background. The result of doing so creates the illusion of non-jagged lines, as shown here.<\/p>\n The foregoing example works because it doesn\u2019t embody any transparency, and as such, the edges of the object therein can know what the object\u2019s pixels should be and what the background\u2019s pixels should be, and create convincing blends between them. This brilliant bit of technology leaps off a cliff and lands squarely on the roof of a parked minivan – activating its theft alarm at two in morning and waking everyone within a half-mile radius – if the background is transparent.<\/p>\n In a graphic with transparent areas, the anti-aliasing algorithm can\u2019t know what the background pixels are going to be – and as such what color to blend with the edge pixels of an object – and the whole works falls apart.<\/p>\n If the graphic in question supports alpha channels, anti-aliasing can pick itself up off the roof of the minivan that thoughtfully broke its fall, apologize to the neighbors and find someplace that stays open late and serves drinks with tacky paper umbrellas in them. The edge pixels can be made partially transparent to blend the colors used to draw the edges of a graphic\u2019s objects with whatever background pixels it finds itself displayed over.<\/p>\n This is an example of an animation over a textured background, with perfect edges.<\/p>\n As noted a moment ago, alpha channels also lend themselves to creating realistic lighting effects, with shadows being an obvious example. When a real-world object casts a shadow, the details of whatever the shadow is cast upon will be partially visible. An alpha channel graphic allows for partially-translucent shadows to create this effect. <\/p>\n Here’s an alpha-channel shadow at work:<\/p>\n Cool, isn’t it…<\/p>\n The above animation was created using a background generated by Graphic Workshop Professional<\/a>\u2019s Fractals and Textures function and an alpha-channel animation, brought together in Animation Workshop<\/a>. The whole effort required under two minutes.<\/p>\n In discussing graphics with alpha-channel transparency, it\u2019s often convenient to think of such a graphic as being comprised of two distinct objects \u2013 the image itself, which defines the colors of each of its pixels, and the \u201calpha mask,\u201d which defines the transparency for the image.<\/p>\n The current release of the Alchemy Mindworks 3D Effects #1 plugin set includes alpha channel support. If you enable the Alpha Transparency option in one of these plugins, the background of the animations it creates will be transparent and the edges of the animated objects will use alpha blending. <\/p>\n PNG MNG Construction Set\u2019s Shadow function has been updated to use alpha channels too. If you present it with a suitable alpha-channel animation, it will use the alpha mask rather than the graphic itself to generate a shadow, and the shadow will be drawn on the alpha mask rather than the actual image. This will result in an animation with a shadow that appears correctly over any background, like the simulated terrain, above.<\/p>\n PNG MNG Construction Set needs to cheat a bit to make the foregoing work. An animation with a shadow is of necessity larger than the same object sans shadow, and the Shadow function will adjust the dimensions of the animation being created accordingly. In displaying an alpha shadow, the shadow will be a blend of the pixels of the background over which the graphic is placed and the background of the graphic itself. The Shadow function, as such, needs to know the actual background color to use to fill the extra space it adds to allow for the shadow. To this end, it expects to see a suitable BACK chunk in an animation with alpha-channel transparency it\u2019s confronted with.<\/p>\n The current release of the 3D Effects #1 plugins set adds suitable BACK chunks to the animations it creates. If you build animation with alpha-channel transparency from source images and you plan to add shadows to them with PNG MNG Construction Set\u2019s Shadow function, be sure to manually install a BACK chunk with the correct background color for your graphics.<\/p>\n By default, the 3D Effects #1 plugins will draw alpha-channel animations with medium gray backgrounds. If you plan to use the Shadow function in PNG MNG Construction Set, you\u2019ll probably want to use a solid black background instead \u2013 or a solid background of another color, should you envision your animations casting shadows on planets with, for example, green skies. To do this, disable Alpha Background in the plugin in question and set the Background button to the background color you need.<\/p>\n Alpha-channel animations can\u2019t be applied directly to a web page. This is not to say that you can\u2019t use them in creating web animations.<\/p>\n The current web browsers support PNG still graphics with alpha-channel transparency… and these things can look pretty cool. They don\u2019t all support MNG animations, which means that alpha-channel animations won\u2019t be going live in cyberspace any time soon.<\/p>\n This having been said, they\u2019re a powerful element in creating web banners and other animations, as you can import them into our Animation Workshop<\/a> as animation objects, and they\u2019ll appear with full alpha-channel transparency therein. The two example animations that appeared earlier in this posting were created in Animation Workshop. As such, you can have perfect edges and lifelike shadows in your complex animations, which can then be exported to GIF or Flash™ objects for use on your web page.<\/p>\n <\/p>\n You can also import MNG animations with alpha-channel transparency into Alchemy Mindwork’s Presentation Wizard<\/a> and Screen Saver Construction Set<\/a> documents.<\/p>\n The current release of Alchemy Mindworks\u2019 Pagan Daybook<\/a> software includes alpha-channel animation support, which looks decidedly etherial.<\/p>\n It\u2019s probably worth noting that the GIF format \u2013 antiquated relic of a bygone era that it is \u2013 doesn\u2019t support alpha channel transparency, and as such, neither does the 3D Effects #1 plugin set if it finds itself plugged into GIF Construction Set Professional. The Alpha Transparency options of these plugins with be disabled in this environment. It will be with the most profound regret that we will be forced to dispatch a leather-winged demon of the night<\/a> to rip the still-beating heart from anyone who e-mails us suggesting that this is some manner of software bug or programming oversight.<\/p>\n It\u2019s probably also worth noting that the title animation at the beginning of this posting is in fact a GIF file. We accomplished it using PNG MNG Construction Set to render the text object and its shadow, its Reconstruct function to reduce it to a non-alpha-channel animation and then its Export to GIF feature to create a suitable GIF animation. In some cases, this can produce nicer looking animations than the corresponding functions of GIF Construction Set<\/a> \u2013 especially if the Shadow function is involved \u2013 as all the image manipulations take place in the 24-bit domain.<\/p>\n
Alpha Basics<\/strong><\/p>\n![\"\"](\"https:\/\/blog.mindworkshop.com\/image\/alpha001.png\")
<\/p>\n![\"\"](\"https:\/\/blog.mindworkshop.com\/image\/alpha002.png\")
<\/p>\n![\"\"](\"https:\/\/blog.mindworkshop.com\/image\/alpha003.gif\")
<\/p>\n![\"\"](\"https:\/\/blog.mindworkshop.com\/image\/alpha004.gif\")
<\/p>\n
Creating Alpha-Channel Animations<\/strong><\/p>\n
And Now for the Bad News\u2026<\/strong><\/p>\n