The Page Turn Effect in Flash MX
Subject:   buttons
Date:   2004-12-22 07:00:26
From:   Sham_B
Response to: buttons

Hi Marc.

I actually implemented automatic page turning when originally developing this, but took it out on reflection because it detracted from the essential theory of the effect.

Anyway, to point yourself in the right direction, the best way would be to see how it is done in principle via a basic example. That's perhaps also a better example for anyone just looking into this thread, because it shows how to automate a manual control in Flash generally (i.e. you just add an onEnterFrame that changes the values that manual interaction would otherwise change).

Here's a step by step route to modifying the basic code...

1. Open the file hack25_pageTurn01.fla (I am using the MX 2004 version). Change the frame rate to 25fps. This is because the automatic part will be frame rate dependent - its going to run via an onEnterFrame (you could also leave the frame rate at 12fps if you use inertia, I will consider this more at the end of the modification)

2. Add a button. When pressed, this will cause an automatic page turn, so give it an instance name of autoButton.

3. Change the code so it looks as follows (best bet is to just block copy this code and paste it into the actions panel, then do an autoformat).

function pageTurn():Void {
line.onMouseMove = function() {
line._x = _xmouse;
if (line._x>PAGE_EDGE) {
line._x = PAGE_EDGE;
} else if (line._x line._x = PAGE_SPINE;
line._rotation = 45*(line._x-PAGE_SPINE)/page._width;
function pageRelease():Void {
delete line.onMouseMove;
function autoPageTurn() {
// stop the manual page turing handlers
delete line.hotspot.onPress;
delete line.hotspot.onRelease;
delete line.hotspot.onReleaseOutside;
// define the auto page turning handler
line.onEnterFrame = function() {
this._x -= pageTurnSpeed;
line._rotation = 45*(line._x-PAGE_SPINE)/page._width;
if (this._x this._x = PAGE_EDGE;
this._rotation = lineAngle;
delete this.onEnterFrame;
line.hotspot.onPress = pageTurn;
line.hotspot.onRelease = pageRelease;
line.hotspot.onReleaseOutside = pageRelease;
var pageTurnSpeed = 6;
var PAGE_SPINE:Number = page._x;
var PAGE_EDGE:Number = page._x+page._width;
var lineAngle:Number = 45;
line.hotspot.onPress = pageTurn;
line.hotspot.onRelease = pageRelease;
line.hotspot.onReleaseOutside = pageRelease;
autoButton.onRelease = autoPageTurn;

Clicking autoButton calls function autoPageTurn. This works as follows...

1) It stops manual control of the line clip by deleting all the mouse control events
2) It starts an automatic control of the line clip via an onEnterFrame
3) When the line has reached the final position, the code returns line control to the mouse.

Notice that if you part turn the page and then click autoButton, the automatic pageturn code will complete the pageturn.

If you develop this new code in the remaining files in much the same way as the initial article, you should get a page turn effect that will handle both auto and manual page turning.

The simple auto-control presented here uses a linear speed, but you will get a smoother effect if you use inertia (I didnt add intertia from the get-go because again, I wanted to only show the basic effect, mainly because the code presented is a good general example of how to allow optional control of an animation, where the control can be either manual (mouse driven) or automatic (onEnterFrame driven).



1 to 1 of 1
  1. buttons
    2004-12-22 07:12:59  Sham_B [View]

1 to 1 of 1