pagine che si sfogliano + indice

[acerus]

questo .fla permette di ricreare il movimento delle pagine che si sfogliano... ora pero' io vorrei aggiungere anche un indice...ma dovrei agire sul codice e mi trovo un po' in panne qualcuno è disposto ad aiutarmi?

[raffaeu]

lo dico pr te, se posti i fla sarà difficile che trovi qualcuno che ti aiuti, prova a postare l' AS e quello che vorresti fare tu, a quel punto vedrai che qualcuno ti aiuta, ma cosi' mi sa da mercato dell' Actionscript no trovi?

[acerus]

ok sorry appena torno a casa posto il codice scusate

[acerus]

allora ecco qui il codice...
è anche spiegato bene il funzionamento grazie ai commenti (in inglese). cio che vorrei è poter inserire dei pulsanti nella scena principale e linkarli alle varie pagine senza per forza usare il drag e senza perdere l'effetto della pagina che si muove....il problema sta nel fatto che non esistono delle reali pagine ma è fatto tutto tramite action....
nel peggiore dei casi posso fare un pulsante che abbia come comando"vai avanti di uno"? grazie per l'ascolto


//
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 = 0xFFFFE5;
// "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 = 8;
// "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, yageWi, w:xQuadrant*pageWi, hageHi, 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();
};
//
//
//
//
//

[raffaeu]

Non è difficile, in pratica lavori creando le pagine graficamente almomento, puoi settare tutto, dai colori al numero alle dimensioni. Le variabili da considerare sono due

curPage e Dir

La funzione che scateni quando 'dragghi' è questa:

getPageRatio() 

[b]ti dice quanto stai draggando da "0" (Min) a "1" (Max)

La funzione che scateni per la curvatura

flip (curvVal)

sempre da 0 a 1

Infine quale pagina:

flipRelease

flipDone

Io consiglio di crearti una funzione che scateni completamente queste sopra citate, chiaramente passandogli tu la pagina, a questo punto dovrebbe eseguire la 'voltata' completament, ma della pagina che vuoi tu.

Fai delle prove e posta che l' argomento è interessante.

:metallica

[mame01]

Originariamente inviato da raffaeu
Non è difficile, in pratica lavori creando le pagine graficamente almomento, puoi settare tutto, dai colori al numero alle dimensioni. Le variabili da considerare sono due

curPage e Dir

La funzione che scateni quando 'dragghi' è questa:

getPageRatio() 

[b]ti dice quanto stai draggando da "0" (Min) a "1" (Max)

La funzione che scateni per la curvatura

flip (curvVal)

sempre da 0 a 1

Infine quale pagina:

flipRelease

flipDone

Io consiglio di crearti una funzione che scateni completamente queste sopra citate, chiaramente passandogli tu la pagina, a questo punto dovrebbe eseguire la 'voltata' completament, ma della pagina che vuoi tu.

Fai delle prove e posta che l' argomento è interessante.

:metallica

ho provato anche io in passato senza successo alcuno scatenando quelle action si ottiene solo ciò che il filmato usa come check per sapere se la pagina è girata o meno


non essendo uno script mio alle vote fatico a comprendere il processo di costruzione.

comunque, non è detto che non possa funzionare, per quel che mi riguarda, visto che dovevo fare un lavoro assai veloce, ho eluso il tutto facendo una finta pagina che mi caricava in modo impercettibile, dei libri esterni.

[raffaeu]

Ho aperto il fla che hai postato, beh molto piu' semplice che vederlo solamente a codice...
Le pagine te le crei come vuoi tu, una per frame, nell' ultimo livello, quindi cosa c'e' di meglio di un bel nextFrame() o prevFrame()?? Inoltra all' interno puoi anche settare lo sfoglio della pagina ..

Sono andato sul sito dell' autore, mamma mia ma sono dei folli con l' As ...

:quipy:

[acerus]

mmm...ehh no non è poi cosi' facile....
raffaeu ma tu hai provato con dei pulsanti sulla che hanno i comandi nextFrame() o prevFrame() e ti funzionano?
no perchè io ci avevo già provato ma non mi caricavano per nulla le pagine... il mistero s'infittisce