{"id":277,"date":"2008-06-02T06:06:54","date_gmt":"2008-06-02T11:06:54","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/?p=277"},"modified":"2011-06-11T11:00:25","modified_gmt":"2011-06-11T16:00:25","slug":"change-pageflip-gradient-flash-tutorial","status":"publish","type":"page","link":"https:\/\/www.pixelwit.com\/blog\/page-flip\/change-pageflip-gradient-flash-tutorial\/","title":{"rendered":"Change PageFlip Gradient Flash Tutorial"},"content":{"rendered":"<p>A few people have asked how to modify the free PageFlip&#8217;s shadow gradients so I thought I&#8217;d write a Flash tutorial for anyone else who might like to do the same.  This tutorial will focus on Flash&#8217;s &#8220;beginGradientFill&#8221; function so keep reading along if you&#8217;d like to get acquainted with that function&#8217;s basic usage.<\/p>\n<p>To get started I recommend you<!--more--> download the most recent version of the <a title=\"PixelWit's Free Flash Page Flip File\" href=\"https:\/\/www.pixelwit.com\/blog\/wp-content\/uploads\/2007\/09\/pageflip_notypos.zip\">free Flash PageFlip<\/a> so you can follow along.<\/p>\n<ol>\n<li>Open the &#8220;PageFlip_NoTypos.fla&#8221; file in Adobe Flash.<\/li>\n<li>Open the Library panel (Menu\u00bbWindow\u00bbLibrary).<\/li>\n<li>Open the &#8220;Book&#8221; folder in the Library.<\/li>\n<li>Double-click the &#8220;Bound Pages&#8221; clip&#8217;s icon to begin editing that movieclip.<\/li>\n<li>Select the first frame of the &#8220;Actions&#8221; layer.<\/li>\n<li>Open the Actions panel (Menu\u00bbWindow\u00bbActions).<\/li>\n<li>Click the Magnifying Glass icon near the top left corner of the Actions panel to access the Search feature.<\/li>\n<li>Type the word &#8220;beginGradientFill&#8221; into the Find field and press enter.<\/li>\n<\/ol>\n<p>Following the above steps will take you to 1 of the 2 blocks of code which control how the PageFlip shadow gradient appears.<\/p>\n<div class=\"codecolorer-container actionscript default\" style=\"overflow:auto;white-space:nowrap;width:100%;\"><div class=\"actionscript codecolorer\"><span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"kw2\">function<\/span> makeShade<span class=\"br0\">&#40;<\/span>targ, xQuadrant<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw3\">with<\/span> <span class=\"br0\">&#40;<\/span>targ<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ Defines gradient used as shadow overlay<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw2\">var<\/span> colors = <span class=\"br0\">&#91;<\/span>0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000<span class=\"br0\">&#93;<\/span>;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw2\">var<\/span> alphas = <span class=\"br0\">&#91;<\/span><span class=\"nu0\">40<\/span>, <span class=\"nu0\">25<\/span>, <span class=\"nu0\">15<\/span>, <span class=\"nu0\">5<\/span>, <span class=\"nu0\">0<\/span>, <span class=\"nu0\">1<\/span>, <span class=\"nu0\">6<\/span><span class=\"br0\">&#93;<\/span>;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw2\">var<\/span> ratios = <span class=\"br0\">&#91;<\/span><span class=\"nu0\">0<\/span>, <span class=\"nu0\">1<\/span>, <span class=\"nu0\">17<\/span>, <span class=\"nu0\">51<\/span>, <span class=\"nu0\">89<\/span>, <span class=\"nu0\">132<\/span>, <span class=\"nu0\">255<\/span><span class=\"br0\">&#93;<\/span>;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw2\">var<\/span> matrix = <span class=\"br0\">&#123;<\/span>matrixType:<span class=\"st0\">&quot;box&quot;<\/span>, x:<span class=\"nu0\">0<\/span>, y:pageWi, w:xQuadrant<span class=\"sy0\">*<\/span>pageWi, h:pageHi, r:<span class=\"nu0\">0<\/span><span class=\"br0\">&#125;<\/span>;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw3\">beginGradientFill<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;linear&quot;<\/span>, colors, alphas, ratios, matrix<span class=\"br0\">&#41;<\/span>;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw3\">moveTo<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">0<\/span>, -pageWi<span class=\"br0\">&#41;<\/span>;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw3\">lineTo<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">0<\/span>, -pageWiHi<span class=\"br0\">&#41;<\/span>;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw3\">lineTo<\/span><span class=\"br0\">&#40;<\/span>xQuadrant<span class=\"sy0\">*<\/span>pageWi, -pageWiHi<span class=\"br0\">&#41;<\/span>;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw3\">lineTo<\/span><span class=\"br0\">&#40;<\/span>xQuadrant<span class=\"sy0\">*<\/span>pageWi, -pageWi<span class=\"br0\">&#41;<\/span>;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw3\">endFill<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>;<br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><\/div><\/div>\n<p>In this block of code there are 3 variables holding arrays.  You can tell which variables contain arrays by looking for the square angle brackets &#8220;[]&#8221;.  The information in these 3 arrays is used to describe our gradient and there&#8217;s a good reason why there are 3 arrays.<\/p>\n<p>If you&#8217;ve ever worked with the gradient tool in Flash&#8217;s Color Mixer panel you know that gradients are made up of a series of markers along a line.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.pixelwit.com\/blog\/wp-content\/uploads\/2008\/06\/flash-gradient-mixer.png\" alt=\"Flash Gradient Tool\" title=\"flash-gradient-mixer\" width=\"210\" height=\"170\" class=\"alignnone size-full wp-image-281\" \/><\/p>\n<p>Each marker has 3 distinct characteristics, its <strong>color<\/strong>, its <strong>alpha<\/strong>, and its <strong>position<\/strong> along the line.  Now here&#8217;s where it gets a little tricky.  Rather than storing the information for each marker inside an array that looks like this: &#8220;marker1 = [color, alpha, position]&#8221; Flash takes the more intelligent approach of storing all markers, no matter how many, in 3 arrays with each array representing a property such as Color, Alpha, or Position of the markers.<\/p>\n<p>Here&#8217;s some code to illustrate:<\/p>\n<div class=\"codecolorer-container actionscript default\" style=\"overflow:auto;white-space:nowrap;width:100%;\"><div class=\"actionscript codecolorer\"><span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/ Rather than store your gradient information in<\/span><br \/>\n<span class=\"co1\">\/\/ a bunch of arrays with one array for every marker...<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/ Properties: &nbsp; &nbsp; &nbsp;COLOR, &nbsp; &nbsp;ALPHA, &nbsp;POSITION<\/span><br \/>\n<span class=\"kw2\">var<\/span> firstMarker = &nbsp;<span class=\"br0\">&#91;<\/span>0xFF0000, &nbsp; <span class=\"nu0\">100<\/span>, &nbsp;<span class=\"nu0\">0<\/span><span class=\"br0\">&#93;<\/span>;<br \/>\n<span class=\"kw2\">var<\/span> secondMarker = <span class=\"br0\">&#91;<\/span>0x00FF00, &nbsp; &nbsp;<span class=\"nu0\">80<\/span>, &nbsp;<span class=\"nu0\">50<\/span><span class=\"br0\">&#93;<\/span>;<br \/>\n<span class=\"kw2\">var<\/span> thirdMarker = &nbsp;<span class=\"br0\">&#91;<\/span>0x0000FF, &nbsp; &nbsp;<span class=\"nu0\">60<\/span>, &nbsp;<span class=\"nu0\">100<\/span><span class=\"br0\">&#93;<\/span>;<br \/>\n<span class=\"kw2\">var<\/span> fourthMarker = <span class=\"br0\">&#91;<\/span>0xFFFF00, &nbsp; &nbsp;<span class=\"nu0\">40<\/span>, &nbsp;<span class=\"nu0\">150<\/span><span class=\"br0\">&#93;<\/span>;<br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/ Flash intelligently stores all gradient information in<\/span><br \/>\n<span class=\"co1\">\/\/ 3 arrays with one array for each property of a marker.<\/span><br \/>\n<span class=\"co1\">\/\/ The gradient we tried to describe above should actually look like this:<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/ Markers: &nbsp; &nbsp; &nbsp; &nbsp;FIRST, &nbsp; SECOND, &nbsp; &nbsp;THIRD, &nbsp; FOURTH<\/span><br \/>\n<span class=\"kw2\">var<\/span> colors = &nbsp; &nbsp;<span class=\"br0\">&#91;<\/span>0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00<span class=\"br0\">&#93;<\/span>;<br \/>\n<span class=\"kw2\">var<\/span> alphas = &nbsp; &nbsp;<span class=\"br0\">&#91;<\/span> &nbsp; &nbsp; <span class=\"nu0\">100<\/span>, &nbsp; &nbsp; &nbsp; <span class=\"nu0\">80<\/span>, &nbsp; &nbsp; &nbsp; <span class=\"nu0\">60<\/span>, &nbsp; &nbsp; &nbsp; <span class=\"nu0\">40<\/span><span class=\"br0\">&#93;<\/span>;<br \/>\n<span class=\"kw2\">var<\/span> positions = <span class=\"br0\">&#91;<\/span> &nbsp; &nbsp; &nbsp; <span class=\"nu0\">0<\/span>, &nbsp; &nbsp; &nbsp; <span class=\"nu0\">50<\/span>, &nbsp; &nbsp; &nbsp;<span class=\"nu0\">100<\/span>, &nbsp; &nbsp; &nbsp;<span class=\"nu0\">150<\/span><span class=\"br0\">&#93;<\/span>;<br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><\/div><\/div>\n<p>Now, returning back to our PageFlip code, we can see that the first array is a list of Colors which looks like this: &#8220;[0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000]&#8221;.  Obviously  there&#8217;s not a lot of variety in our list of colors since all 7 of them are black (0x000000 = Black).  This is because no matter how dark or light a shadow may be, it&#8217;s almost always a shade of black darker than the original color of the object.<\/p>\n<p>The second array is a list of Alphas which looks like this: &#8220;[40, 25, 15, 5, 0, 1, 6]&#8221;.  The list of Alphas contains 7 numbers between 0 and 100.  A value of 0 means the color will be completely transparent while a value of 100 will be completely opaque.  This is typical Alpha behavior.<\/p>\n<p>The third array is a list of Positions which looks like this: &#8220;[0, 1, 17, 51, 89, 132, 255]&#8221;.  The list of Positions contains 7 numbers between 0 and 255.  A value of 0 means the marker is at the far left end of the gradient and a value off 255 means the marker is at the far right end of the gradient.<\/p>\n<p>As noted above, all three arrays store 7 values.  This is because the gradient I&#8217;m describing has 7 markers on it.  Each array for Color, Alpha and Position MUST have the same number of elements.<\/p>\n<p>Now that you know where the 3 arrays are and what they do, you&#8217;ve got enough information to be dangerous.  \ud83d\ude09  Try playing around with the numbers to see the changes that take place.  Once you&#8217;re satisfied with the results you&#8217;ll need to copy your new Color, Alpha and Position arrays to the second block of code.  You can find the second block of code by searching for &#8220;beginGradientFill&#8221; again.<\/p>\n<p>So there ya have it.  You should be able to go about changing the PageFlip&#8217;s gradient to suit your own taste.  Enjoy.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A few people have asked how to modify the free PageFlip&#8217;s shadow gradients so I thought I&#8217;d write a Flash tutorial for anyone else who might like to do the same. This tutorial will focus on Flash&#8217;s &#8220;beginGradientFill&#8221; function so keep reading along if you&#8217;d like to get acquainted with that function&#8217;s basic usage. To [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":26,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-277","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/pages\/277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/comments?post=277"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/pages\/277\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/pages\/26"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}