PDA

Volledige versie bekijken : pageturn/flip script naar bepaalde pagina linken


npeters
%Europe/Berlin %656 %2005, 15:44
He allemaal,

Ik heb het script hieronder gevonden en nou zit ik al een tijdje te zoeken hoe ik precies een button kan toevoegen zodat hij naar een bepaalde pagina bladerd. Want de buttons die er nu in zitten doen alleen vorige/volgende..

De rest is al wel gelukt alleen dit gedeelte niet.. is er iemand die zin heeft om mij even te helpen?

Alvast bedankt!!


code:

//
// P i X E L W i T . C O M
//
stop();
//
//
//
//
//
//________________________C O M M E N T S
//
// Thought to self:
// Try naming functions according to the events which preclude them
//
//
// A page flip involves 3 pieces of paper
// 2 bottom static pages (which lay flat at all times)
// and 1 active flipping page (which has 2 sides)
// Four pages total, 2 static/stationary and 2 flipping
// The flipping page can be on the left or right side
// The top image on the flipping page doesn't actually move
//
//
//
//
//
//_________________________V A R I A B L E S
//
// Store a constant reference to this clip on the main timeline so
// clip can be referenced from any other timeline as _level0.pagesAbs
_level0.pagesAbs = this;
// Set page dimensions
var pageWi = 200;
var PageHi = 300;
var pageWiHi = pageWi+pageHi;
var pivotY = pageHi/2+pageWi;
var pageColor = 0xfffeff;
// "dir" equals either 1 or -1 and determines if you
// are flipping forward or backward through the book
var dir = 1;
// "flipPage" is the # "between" the two flipping page #'s
var flipPage = 1.5;
// "curPage" is the # between the two currently viewed page #'s
var curPage = .5;
// "maxPages" should be an even number
var maxPages = 10;
// "autoStep" percentage of page width determining step size when auto-closing
var autoStep = .05;
// "dragging" is true if you are dragging the page
var dragging = false
//
//
//
//
//
//________________________________R U N O N C E
//
// Place Left and Right page flip Buttons
this.attachMovie ("cornerButton", "RButton", 11);
with (RButton) {
_x = pageWi;
_y = -pageWi;
}
this.attachMovie ("cornerButton", "LButton", 12);
with (LButton) {
_x = -pageWi;
_y = -pageWi;
_xscale = -100;
}
//
//
// Build pages for first time
pageInit (flipPage, dir);
// Drop down to appear centered
_y+=pivotY;
//
//
//
//
//
// _____________________B U I L D F U N C T I O N S
//
// Create a left-aligned page-sized solid fill raised one pagewidth
function makePage (targ, xQuadrant) {
with (targ) {
beginFill(pageColor, 100);
moveto(0, -pageWi);
lineto(0, -pageWiHi);
lineTo(xQuadrant*pageWi, -pageWiHi);
lineTo(xQuadrant*pageWi, -pageWi);
endFill();
}
}
//
//
// Create a left-aligned page-sized shadow gradient raised one pagewidth
// Shade is used to add depth to stationary pages
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();
}
}
//
//
// create a bottom-left aligned shadow gradient
// for animated shadows
function makeShadow (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 maxLength = Math.sqrt((pageWi*pageWi)+(pageWIHi*pageWiHi));
var matrix = { matrixType:"box", x:0, y:-maxLength, w:xQuadrant*pageWi, h:maxLength-pageWi, r:0};
beginGradientFill( "linear", colors, alphas, ratios, matrix );
moveto(0, -pageWi);
lineto(0, -maxLength);
lineto(xQuadrant*pageWi, -maxLength);
lineTo(xQuadrant*pageWi, -pageWi);
endFill();
}
}
//
//
// Place Stationary Pages
function setStationary() {
// Place the "S"tationary "L"eft "P"age
createEmptyMovieClip("SLPage", 1);
if (flipPage!=1.5) {
makePage (SLPage, -1)
SLPage.attachMovie("print"+(flipPage-1.5), "Print", 1);
with (SLPage.Print) {
_x = -pageWi/2;
_y = -pivotY;
}
}
// Place the "S"tationary "R"ight "P"age
createEmptyMovieClip("SRPage", 2);
if (flipPage!=maxPages-.5){
makePage (SRPage, 1)
SRPage.attachMovie("print"+(flipPage+1.5), "Print", 1);
with (SRPage.Print) {
_x = pageWi/2;
_y = -pivotY;
}
}
// Place shade on page not being revealed
var targ = dir>0 ? SLPage : SRPage;
targ.createEmptyMovieClip("Shade", 2);
makeShade(targ.Shade, -dir);
}
//
//
// Place the Flipping Pages
function setFlipping() {
var targ;
// Place the "F"lipping "T"op "P"age
createEmptyMovieClip("FTPage", 3);
makePage (FTPage, dir)
with (FTPage) {
attachMovie("print"+(flipPage-dir*.5), "Print", 1);
with (Print) {
_x = dir*pageWi/2;
_y = -pivotY;
}
}
FTPage.createEmptyMovieClip("Shade", 2);
makeShade(FTPage.Shade, dir);
// Place the "F"lipping "B"ottom "P"age
createEmptyMovieClip("FBPage", 4);
makePage (FBPage, -dir)
FBPage.attachMovie("print"+(flipPage+dir*.5), "Print", 1);
with (FBPage.Print) {
_x = -dir*pageWi/2;
_y = -pivotY;
}
FBPage._rotation = dir*90;
}
//
//
// Creates Shadows which follow edge of transition
function setShadows() {
var targ;
// Place shadow on the "F"lipping page
this.createEmptyMovieClip("FShadow", 5);
makeShadow(FShadow, -dir);
FShadow._rotation = dir*45;
// Place shadow on the "S"tationary page
this.createEmptyMovieClip("SShadow", 6);
makeShadow(SShadow, dir);
SShadow._rotation = dir*45;
}
//
//
// Create Masks to hide everything
function makeMasks() {
// Create mask for Flipping Bottom Page Mask
this.createEmptyMovieClip("FBPageMask", 7);
with (FBPageMask) {
beginFill(0x005500, 100);
lineto(pageWiHi, -PageWiHi);
curveto(0, -2*PageWiHi, -pageWiHi, -pageWiHi);
endFill();
}
// Create mask for Flipping Top Page
FBPageMask.duplicateMovieClip("FTPageMask", 8);
// Create mask for Shadow on the Flipping Page
this.createEmptyMovieClip("FShadowMask", 9);
makePage (FShadowMask, -dir);
FShadowMask._rotation = dir*90;
// Create mask for Shadow on Stationary Page
this.createEmptyMovieClip("SShadowMask", 10);
makePage(SShadowMask, dir);
FBPage.setMask(FBPageMask);
FTPage.setMask(FTPageMask);
FShadow.setMask(FShadowMask);
SShadow.setMask(SShadowMask);
}
//
//
// Hide pages before page1 and after Last Page
function limitBook () {
if (flipPage==1.5) {
SLPage._visible = 0;
LButton._visible = 0;
SShadow._visible = 0;
if (dir==1) {
FTPage.Shade._alpha = 67;
SShadow._visible = 1;
}else {
FShadow._alpha = 67;
}
} else if (flipPage==maxPages-.5) {
SRPage._visible = 0;
RButton._visible = 0;
SShadow._visible = 0;
if (dir==-1) {
FTPage.Shade._alpha = 67;
SShadow._visible = 1;
} else {
FShadow._alpha = 67;
}
}
}
//
//
// How to position all pages needed for a page flip
// calls all functions listed above
function pageInit (cp, d) {
flipPage = cp;
dir = d;
//trace ("flip page = "+flipPage+" dir = "+dir);
setStationary();
setFlipping();
setShadows();
makeMasks();
limitBook ();
}
//
//
//
//
//
//__________________F L I P P I N G F U N C T I O N S
//
// How to adjust position of flipping page
// based on a value between 0 and 1
function flip(curVal) {
var rot = dir*45*curVal;
FBPageMask._rotation = FTPageMask._rotation = -rot;
FBPage._rotation = FShadowMask._rotation = (dir*90)-rot*2;
FShadow._rotation = SShadow._rotation=(dir*45)-rot;
}
//
//
// how to determine position of flipping page
// returns a value between 0 and 1
// zero being no-flip and one being full-flip
function getPageRatio () {
if (dragging) {
// if dragging page position is determined by mouse position
// the 20 helps advance the turning page when the button is pressed
pageRatio = -dir*(_xmouse-startX-dir*20)/(2*pageWi);
} else {
// if not dragging; auto increment page towards final position
pageRatio>2/3 ? pageRatio += autoStep : pageRatio -= autoStep;
}
// if out of bounds
if (pageRatio<=0) {
pageRatio = 0;
if (!dragging) {
flipDone();
}
} else if (pageRatio>=1) {
pageRatio = 1;
if (!dragging) {
flipDone();
}
}
return (pageRatio);
}
//
//
//
//
//
//_____________C O N T R O L I N G F U N C T I O N S
//
// What to do when you press a page flipping button
function startFlip (dir) {
pageInit (curPage+dir, dir);
startX = dir*pageWi;
dragging = true;
RButton._alpha=0;
Lbutton._alpha=0;
this.onEnterFrame = function () {
flip(getPageRatio());
}
}
//
//
// what to do when page is released
function flipRelease () {
dragging = false;
if (pageRatio>2/3) {
curPage+=2*dir;
}
}
//
//
// What to do when pages are done flipping
function flipDone () {
this.onEnterFrame = null;
RButton._alpha = 100;
LButton._alpha = 100;
if (curPage!=.5){
LButton._visible = 1;
}
if (curPage!=maxPages+.5){
RButton._visible = 1;
}
// Delete hidden pages to save resources
if (pageRatio==0) {
FShadow.removeMovieClip();
FShadowMask.removeMovieClip();
SShadow.removeMovieClip();
SShadowMask.removeMovieClip();
FBPage.removeMovieClip();
FBPageMask.removeMovieClip();
if (dir==1) {
SRPage.removeMovieClip();
} else {
SLPage.removeMovieClip();
}
} else {
FTPage.removeMovieClip();
if (dir==-1) {
SRPage.removeMovieClip();
} else {
SLPage.removeMovieClip();
}
}
FTPageMask.removeMovieClip();
}
//
//
// assign functions to button events
LButton.onPress = function() {
startFlip (-1);
}
LButton.onReleaseOutside = function () {
flipRelease();
}
LButton.onRelease = function () {
flipRelease();
}
RButton.onPress = function() {
startFlip (1);
}
RButton.onReleaseOutside = function () {
flipRelease();
}
RButton.onRelease = function () {
flipRelease();
}
//
//
//
//
//

unicum
%Europe/Berlin %661 %2005, 15:52
Heb je deze als eens gezien?
http://www.iparigrafika.hu/pageflip/
(Als je deze jongens mailt met een vraag krijg je ook snel antwoord)

Deze is makkelijker met de buttons die direct naar pagina's doorflippen.
Gewoon:

on(release) {
_root.gotoPage(20,false);
}

Suc6

Rico

theFlashWizard
%Europe/Berlin %663 %2005, 15:55
begin nou eens met het lezen van de uitleg die bovenaan staat bij het posten.. want [ as ] tags om het stuk actionscript zou geen overbodige luxe zijn..
en eigenlijk vind ik dat je dit niet zo hoort te doen..
zo van kijk ik heb een script gevonden, fixen jullie het ff zo dat het doet wat ik wil..
maja das mijn mening.

npeters
%Europe/Berlin %667 %2005, 16:00
Bedankt voor de reacties..

@ unicum, ja die had ik al gezien.. alleen deze vind ik mooier en is handiger door de uitleg bij de actionscript..

@theFlashWizard, ik vroeg niet of jullie het wilden fixen voor me? ik vroeg of jullie me willen helpen... met wat hulp van jullie kant..(naar welke stukken ik moet kijken en dergelijke) moet ik er zelf uit kunnen komen..

Alvast bedankt!

npeters
%Europe/Berlin %684 %2005, 16:25
De grote vraag is eigenlijk of het wel mogelijk is met dit script, eventueel wil ik iemand er wel voor betalen om de oplossing te geven..

Zelf denk ik dat het hier wel mee te doen is:


// Place Stationary Pages
function setStationary() {
// Place the "S"tationary "L"eft "P"age
createEmptyMovieClip("SLPage", 1);
if (flipPage!=1.5) {
makePage (SLPage, -1)
SLPage.attachMovie("print"+(flipPage-1.5), "Print", 1);
with (SLPage.Print) {
_x = -pageWi/2;
_y = -pivotY;
}
}
// Place the "S"tationary "R"ight "P"age
createEmptyMovieClip("SRPage", 2);
if (flipPage!=maxPages-.5){
makePage (SRPage, 1)
SRPage.attachMovie("print"+(flipPage+1.5), "Print", 1);
with (SRPage.Print) {
_x = pageWi/2;
_y = -pivotY;
}
}

Maar weet het niet zeker..

npeters
%Europe/Berlin %717 %2005, 17:13
Om te laten zien dat ik hier zelf ook echt mee bezig ben doe ik dit even:

createEmptyMovieClip("SLPage", 1);
// daar maakt hij de nieuwe linker pagina op laag 1..

if (flipPage!=1.5) {
// hier kijkt hij of de waarde ongelijk is aan de waarde ingesteld in een variabele bovenaan.. volgens mij is dit de tussenstap tussen de pagina's..

dat zou betekenen dat ik door middel van een button de vast ingestelde waarde van: var flipPage moet kunnen wijzigen..ik heb alleen echt geen idee hoe ik dat moet doen..

npeters
%Europe/Berlin %440 %2005, 10:35
is er niemand die me wil helpen? kom er nu echt niet alleen uit.. :(

theFlashWizard
%Europe/Berlin %470 %2005, 11:16
instancenameofbutton.onRelease = function(){
flippage = 2
}

is niet ongeveer wat je zoekt?

npeters
%Europe/Berlin %723 %2005, 17:21
ik denk het.. ga het wel even proberen!

Bedankt:D

hm nee werkt niet, zou het toevallig ook hiermee te maken kunnen hebben?:

//
// assign functions to button events
LButton.onPress = function() {
startFlip (-1);
}
LButton.onReleaseOutside = function () {
flipRelease();
}
LButton.onRelease = function () {
flipRelease();
}
RButton.onPress = function() {
startFlip (1);
}
RButton.onReleaseOutside = function () {
flipRelease();
}
RButton.onRelease = function () {
flipRelease();
}

npeters
%Europe/Berlin %791 %2005, 18:59
Ik heb wat geprobeerd en wat functies gekopieerd en veranderd.. maar omdat het script kijkt naar de positie van de knop.. slaat hij de bladzijde alleen om als de knop aan de andere kant van de pagina zit.

Is op zich nog niet erg.. heb volgende en vorige pagina wel voor elkaar nu.. maar verwijzen naar een bepaalde pagina heb ik geen idee van hoe dit moet.. zoals jullie zien hoeven jullie nu niet alles voor te kauwen, maar zou iemand mij misschien kunnen helpen?

Alvast heel erg bedankt!

ferrygood
%Europe/Berlin %551 %2006, 13:14
rico,

Ik heb je reactie gelezen maar weet niet goed waar ik deze neer moet zetten omdat ik deze niet kan vinden in het script. Kan je mij helpen..