Change PageFlip Gradient Flash Tutorial

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.

//
//
function makeShade(targ, xQuadrant) {
    with (targ) {
        // Defines gradient used as shadow overlay
        var colors = [0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000];
        var alphas = [40, 25, 15, 5, 0, 1, 6];
        var ratios = [0, 1, 17, 51, 89, 132, 255];
        var matrix = {matrixType:"box", x:0, y:pageWi, w:xQuadrant*pageWi, h:pageHi, r:0};
        beginGradientFill("linear", colors, alphas, ratios, matrix);
        moveTo(0, -pageWi);
        lineTo(0, -pageWiHi);
        lineTo(xQuadrant*pageWi, -pageWiHi);
        lineTo(xQuadrant*pageWi, -pageWi);
        endFill();
    }
}
//
//

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.

Flash Gradient Tool

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:

//
//
// Rather than store your gradient information in
// a bunch of arrays with one array for every marker...
//
// Properties:      COLOR,    ALPHA,  POSITION
var firstMarker =  [0xFF0000,   100,  0];
var secondMarker = [0x00FF00,    80,  50];
var thirdMarker =  [0x0000FF,    60,  100];
var fourthMarker = [0xFFFF00,    40,  150];
//
//
// Flash intelligently stores all gradient information in
// 3 arrays with one array for each property of a marker.
// The gradient we tried to describe above should actually look like this:
//
// Markers:        FIRST,   SECOND,    THIRD,   FOURTH
var colors =    [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00];
var alphas =    [     100,       80,       60,       40];
var positions = [       0,       50,      100,      150];
//
//
//

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.

4 Responses to “Change PageFlip Gradient Flash Tutorial”

  1. gazzi says:

    Hi, would highly appreciate, if you could help somehow: I would like to make page turning authomatic, and loop. Unfortunately, I am no programmer…

  2. Tom says:

    I really like the page flip and would like to use it in Captivate 4. I just inserted it as an animation it the swf didn’t do well. The swf did a lot of flickering. I am not a Flash programmer but I can modify code.

    Hope you can help or point me in the right direction.

    Thank you for you help.

    Tom

  3. Hannah says:

    Is there a way to make the gradient completely disappear on certain pages after the page turns (on a full page spread)?

    Or even just getting rid of the center (spine) line on these pages would be enough.

    I have the paid for version if that makes a difference.

    Thanks.

  4. Eddy says:

    first!!

    thanks this is a lot better!!! 🙂

Leave a Reply

PixelWit.com's Comment Guidelines


Warning: Undefined variable $user_ID in /home2/pixelwit/public_html/blog/wp-content/themes/fvariant2/comments.php on line 57

You must be logged in to post a comment.

© Sean O'Shell 2007-2024