PiXELWiT

A few people have asked how to modify the free PageFlip’s shadow gradients so I thought I’d write a Flash tutorial for anyone else who might like to do the same. This tutorial will focus on Flash’s “beginGradientFill” function so keep reading along if you’d like to get acquainted with that function’s basic usage.

To get started I recommend you download the most recent version of the free Flash PageFlip so you can follow along.

1. Open the “PageFlip_NoTypos.fla” file in Adobe Flash.
2. Open the Library panel (Menu»Window»Library).
3. Open the “Book” folder in the Library.
4. Double-click the “Bound Pages” clip’s icon to begin editing that movieclip.
5. Select the first frame of the “Actions” layer.
6. Open the Actions panel (Menu»Window»Actions).
7. Click the Magnifying Glass icon near the top left corner of the Actions panel to access the Search feature.
8. Type the word “beginGradientFill” into the Find field and press enter.

Following the above steps will take you to 1 of the 2 blocks of code which control how the PageFlip shadow gradient appears.

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 “[]”. The information in these 3 arrays is used to describe our gradient and there’s a good reason why there are 3 arrays.

If you’ve ever worked with the gradient tool in Flash’s Color Mixer panel you know that gradients are made up of a series of markers along a line.

Each marker has 3 distinct characteristics, its color, its alpha, and its position along the line. Now here’s where it gets a little tricky. Rather than storing the information for each marker inside an array that looks like this: “marker1 = [color, alpha, position]” 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.

Here’s some code to illustrate:

Now, returning back to our PageFlip code, we can see that the first array is a list of Colors which looks like this: “[0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000]”. Obviously there’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’s almost always a shade of black darker than the original color of the object.

The second array is a list of Alphas which looks like this: “[40, 25, 15, 5, 0, 1, 6]”. 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.

The third array is a list of Positions which looks like this: “[0, 1, 17, 51, 89, 132, 255]”. 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.

As noted above, all three arrays store 7 values. This is because the gradient I’m describing has 7 markers on it. Each array for Color, Alpha and Position MUST have the same number of elements.

Now that you know where the 3 arrays are and what they do, you’ve got enough information to be dangerous. 😉 Try playing around with the numbers to see the changes that take place. Once you’re satisfied with the results you’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 “beginGradientFill” again.

So there ya have it. You should be able to go about changing the PageFlip’s gradient to suit your own taste. Enjoy.

Comments(4)