{"id":257,"date":"2009-06-26T08:15:36","date_gmt":"2009-06-26T13:15:36","guid":{"rendered":"http:\/\/www.mindworkshop.info\/?p=257"},"modified":"2009-06-26T08:34:30","modified_gmt":"2009-06-26T13:34:30","slug":"building-an-alpha-shadow-animation","status":"publish","type":"post","link":"https:\/\/blog.mindworkshop.com\/?p=257","title":{"rendered":"Building an Alpha-Shadow Animation"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.mindworkshop.com\/image\/alpha007.gif\" width=\"127\" height=\"127\" align=\"right\" border=\"0\" alt=\"\" \/><\/p>\n<p><a href=\"http:\/\/www.mindworkshop.com\/alchemy\/pngpro.html\" target=\"_blank\">PNG\/MNG Construction Set<\/a> and the newly-updated animation plugins with alpha-channel support \u2013 the <a href=\"http:\/\/www.mindworkshop.com\/alchemy\/animplugins-3d1.html\" target=\"_blank\">3D Effects #1<\/a> plugin set, as of this writing \u2013 allow the creation of animations with sophisticated translucent shadows. Place such an animation over a textured surface or a photograph and its shadow will darken the details of its background, but not obscure them.<\/p>\n<p><!--more--><\/p>\n<p>You\u2019ll need PNG\/MNG Construction Set 2.0a patch 77 or better to create these animations, and the 3D Effects #1 plugin set patch 17 or better.<\/p>\n<p>Here\u2019s how to create one:<\/p>\n<ol>\n<li>Open one of the 3D Effects #1 plugins from PNG\/MNG Construction Set.<\/li>\n<li>Enable Alpha Transparency.<\/li>\n<li>Disable Alpha Background so you can choose the background color.<\/li>\n<li>Click on the Background button and set the background color to black. The background color will become the color of your shadow.<\/li>\n<li>Set up the other controls in the plugin to your liking and click on OK to build an animation.<\/li>\n<li>When the animation is complete and open in a PNG\/MNG Construction Set document window, select Shadow from the Chunk menu.<\/li>\n<li>Configure the controls in the Shadow window to your liking. The Shadow Opacity control will adjust the density of your shadow \u2013 higher values will result in deeper shadows. Click on OK to complete the animation.<\/li>\n<\/ol>\n<p>Your completed animation will show as having a black background in its PNG\/MNG Construction Set document window, but it will display with a correct shadow if you click on View. By default, it will display against the current background color as defined by the Default Background Color button in PNG\/MNG Construction Set\u2019s Setup dialog. You can see it against another color by changing this, or by adding a BACK chunk to your animation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"center\" src=\"https:\/\/blog.mindworkshop.com\/image\/alpha004.gif\" width=\"320\" height=\"162\" alt=\"\" \/><\/p>\n<p>At such time as you place this animation in a document \u2013 importing it into <a href=\"http:\/\/www.mindworkshop.com\/alchemy\/animwork.html\" target=\"_blank\">Animation Workshop<\/a> or <a href=\"http:\/\/www.mindworkshop.com\/alchemy\/prspro.html\" target=\"_blank\">Presentation Wizard<\/a>, for example \u2013 the background will become whatever it\u2019s placed over. Note that not many non-Alchemy Mindworks applications support MNG animations with alpha-channel transparency.<\/p>\n<p>If you\u2019d like to create an animation like this for use on a web page \u2013 as we did for the example animations in this posting \u2013 you\u2019ll need to reduce the true-color animation you\u2019ve just built to a GIF file. This will remove its transparency \u2013 you won\u2019t be able to place it over any background you like and have its shadow display flawlessly \u2013 but as long as you built it with a background to match that of your web page, it will look excellent.<\/p>\n<p>Here\u2019s how to reduce an alpha-shadow animation to a GIF file in PNG\/MNG Construction Set.<\/p>\n<ol>\n<li>Add a BACK chunk to your alpha-shadow animation and set its color to the background you want for your animation. In the case of the animations for this page, it was set to white.<\/li>\n<li>Select Reconstruct from the Chunk menu of PNG\/MNG Construction Set to render your alpha-shadow animation to a 24-bit animation with a solid background.<\/li>\n<li>Select Export to GIF from the File menu of PNG\/MNG Construction Set to create a GIF animation.<\/li>\n<\/ol>\n<p><!--wpads#blog--><\/p>\n<p>Because the shadows in an alpha-shadow animation are generated as 32-bit objects, they look more convincing than the same shadows generated by the Shadow function in GIF Construction Set Professional.<\/p>\n<p>You might want to see the general overview of <a href=\"http:\/\/blog.mindworkshop.com\/animation\/an-introduction-to-alpha-channel-animations\/\">alpha-channel animations<\/a> at this blog as well.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PNG\/MNG Construction Set and the newly-updated animation plugins with alpha-channel support \u2013 the 3D Effects #1 plugin set, as of this writing \u2013 allow the creation of animations with sophisticated translucent shadows. Place such an animation over a textured surface or a photograph and its shadow will darken the details of its background, but not [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-257","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/posts\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=257"}],"version-history":[{"count":0,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/posts\/257\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}