Efeito de paginas (page flip)

[MERCURIO 0]

Um desafio sobre efeito de paginas

 

Amigos da comunicade, e com apelo que chego a vcs a respeito deste script abaixo que esta a semanas me cansando a cabeça, o script em si simula como algums ja viram uma revista. Otimo efeito... mas so tem 8 paginas, e gostaria de acrescentar mais paginas o script em si e este:

e o endereco para baixar o fla e este:

 

http://www.pontoflash.com.br/sources/espec...ageFlipSean.zip

 

 

aguardo a ajuda de todos os especialistas em plantao, meu muito obrigado.

 

Ass.

Jean Marcos

 

 

//

// 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 = 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, 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();

}

//

//

//

//

//

[hinom 5]

aqui:

 

// "maxPages" should be an even number

var maxPages = 8;

linha 46

[MERCURIO 0]

isto eu ja tinha visto acrescente ele e veja o que acontece.. abre um monte de paginas que nao tem fim...

[MERCURIO 0]

Amigo você e um genio o que eu devia tava dando errado e colocando numeros impares... gostaria de saber agora como posso colocar figuras externas dentro do mc.. ja tentei fazer isto e o mesmo se intrepoe na frente da revista.

[Zenilto 0]

aqui:

 

// "maxPages" should be an even number

var maxPages = 8;

linha 46

:D É isso mesmo so alterar a quantidade de pagina a serem exibidas

[hinom 5]

desculpas MERCURIOeu estava com pressa e coloquei apenas a parte básica que você deveria ter vistopara você adicionar mais uma páginatem que ser valor par somente.quando você quiser criar uma página a maisvocê deverá criar um objeto e nomear a "instance name" e habilitar a opção "Export for ActionScript"note que outra caixinha será automaticamente marcada. Portanto, desmarque-ase você por acaso criar seu objeto e esquecer de marcar a opção "Export for ActionScript", então você poderá alterar/definir na library (CTRL+L)clique sobre o objeto com o botão direito do mouse e escolha "Linkage"você deverá colocar um nome, que servirá como identificador (identifier)bom.. isso tudo está descrito no comentário do Layer "Comment", logo na Cena 1é apenas isso. espero que tenha entendidoboa sorte

[hinom 5]

ah. mais um detalhe.cada página deve ter um frame e devem estar todas no layer "Print"se adicionar uma páginaentão pressione F5 nos outros layers para que acompanhem a Cenano layer "Print" pressione F6 logo depois do último keyframe dele. Nesse novo key frame você coloca o novo objeto que deverá ser o conteúdo da nova página.ehhtipoacho que agora você jé entendeu.é dahora meucom o tempo você vai alterando o códigopode-se até mesmo buscar dados extenamente de um banco de dados por exemplo.

[( ((phabyo)) ) 0]

AE hinom , show a explicação ...

 

Abraços

Fabio

[MERCURIO 0]

Amigao fiz tudo que você disse mas ainda e estou com 10 paginas e esta aparecendo a seguite frase na execucao:Erro: uma ação 'with' falhou porque o objeto especificado não existe.Sera que estou fazendo algo errado?como nosso amigo disse você e show na esplicação...

[MERCURIO 0]

Amigo eu consegui colocar na pagina 10 mas na 9 ta dando o mesmo erro o que pode estar acontecendo?

[MERCURIO 0]

AMIGOS CANCELA A ULTIMA EU ACABEI DE CONSEGUIR... //editado por ( ((phabyo)) )MERCURIO editei pois a pergunta você fez em um outro post

[hinom 5]

quando aparece a mensagem de erro:

 

"with num sei o que bla bl bla"

 

 

é porque você não configurou corretamente o ojeto ou usou um nomenclatura diferente da permitida.

 

o "Identifier" (Linkage) deve ter a seguinte nomenclatura:

 

"print" + núrmero

 

 

por exemplo, o objeto na página 3 deve ter o identifier chamado "print3"

o objeto na página 9 deve ter o identifier chamado "print9"

 

 

e mais uma coisa..

 

no "Instance Name" pode ser qualquer nome, não precisa ser igual ao nome setado no parâmetro "Identifier"

 

 

 

só isso.

o resto aí cada um pode se virar.

[MERCURIO 0]

To vendo que tem um pequeno defeito... eu to conseguindo ver o papel por traz das figuras que estao sendo carregadas externamente... você sabe do que eu to falando? quando vou na aba virar aparece a pagina bege do livro alguem sabe como pode ser evitado isto...

[( ((phabyo)) ) 0]

Ola MERCURIO , eu fiz usando a explicação do hinom, e funcionou certinho. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif coloquei 2 paginas a mais.

 

http://fabioongaratto.sites.uol.com.br/pagina/index.html

 

Agora ver paginas em baixo da outra, isso não percebi, deve estar dando algum pau seu Flash :huh: , não sei.

 

Abraços

Fabio

[MERCURIO 0]

pois e eu tambem consegui so esta dando o problema acima.. to usando imagens com 1000x1200 e ta aparecendo quando passo a pagina mostra o livro por traz da imagem...

[( ((phabyo)) ) 0]

opaa...então é o seguinte neh,

 

ou você adapta sua fotos, ou adpata o livro.

 

mude nesta parte da action e ve se resolve:

var pageWi = 200;

var PageHi = 300;

AAA e se quiser mudar a cor das paginas troca só aonde esta em negrito, você ta ligado ;) :

var pageColor = 0xFFFFE5;

Fala ai o que aconteceu :lol:

 

Abraços

Fabio

[hinom 5]

acho que eu sei do que o mercurio está falando.esse script tem problemas com dados dnâmicos.é possível consertar mas leva um tempo. agora eu preciso voltar ao trabalho. ehehehfalows

[MERCURIO 0]

acho que eu sei do que o mercurio está falando.esse script tem problemas com dados dnâmicos.é possível consertar mas leva um tempo. agora eu preciso voltar ao trabalho. ehehehfalows

hinom e phabyo o meu projeto esta ficando bonzinho graças a você, e quanto ao que hinom disse sobre o cod. ter problemas com carrego dinamico e bem provavel. ps. postei recentemente no forum como "Duplo click" e gostaria que você´s desse uma olhada talvez você´s possam ajudar. Um abraço.. ps: Hinom você disse que precisava trabalhar o você faz exatamente?

[hinom 5]

eu sou programador

[MERCURIO 0]

Legal... tem como você dar uma olhada nesta sessao do "duplo click"?