Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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();
}
//
//
//
//
//
isto eu ja tinha visto acrescente ele e veja o que acontece.. abre um monte de paginas que nao tem fim...
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.
>
aqui:
>
// "maxPages" should be an even number
var maxPages = 8;
linha 46
:D É isso mesmo so alterar a quantidade de pagina a serem exibidas
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
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.
AE hinom , show a explicação ...
Abraços
Fabio
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...
Amigo eu consegui colocar na pagina 10 mas na 9 ta dando o mesmo erro o que pode estar acontecendo?
AMIGOS CANCELA A ULTIMA EU ACABEI DE CONSEGUIR... //editado por ( ((phabyo)) )MERCURIO editei pois a pergunta você fez em um outro post
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.
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...
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
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...
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
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
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?
eu sou programador
Legal... tem como você dar uma olhada nesta sessao do "duplo click"?
Ops.. veja como ficou, pena que nao foi feita pra internet. por isso deixa pra la quadrinhamento ok?
Cara, ficou show de bola http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
//vou mover pra tutoriais.
Abraços
Fabio
AMIGOS ACHEI UM OUTRO PROBLEMA:ESTOU UTILIZANDO UM BOTAO PARA ACESSARUM SWF EXTERNO EM DIRETORIO DIFERENTE,OMESMO SE CARREGA MAS AS IMAGENS VINCULADAS NA REVISTA NAO.. ESTOU USANDO O LOADMOVIE E LOADMOVIENUM PARA CARREGAR O SWFMAS TA DANDO ESTE PROBLEMA..VEJA COMO FICOU O MENU QUE VAI CARREGARAS OUTRAS REVISTAS QUE VAO ESTAREM PASTAS SEPARADAS E LOGICO:WWW.JEAMOR2.VILA.BOL.COM.BR
( ((phabyo)) ) você tem o arquivo .fla desse tuturial gigante....
Ficou muito legal e eu gostaria de tentar fazer aqui e estudar mais esse possibilidades...Se você tiver o .fla, manda pra mim... everso@brturbo.com
Obrigadão :D mesmo! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
Ta no 1º post do topico
http://www.pontoflash.com.br/sources/espec...ageFlipSean.zip
é só ler com cuidado. ;)
Abraços
Fabio
Ta no 1º post do topicohttp://www.pontoflash.com.br/sources/espec...ageFlipSean.zipé só ler com cuidado. ;) AbraçosFabio
Parece que o arquivo não está la. Tentei pegar o mesmo e parece que não está mais hospedado la, fic dando apenas erro, por isso havia lhe pedido o .flaObrigado!!! :D Se tiver ai e puder me mandar .... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
aqui:
>
// "maxPages" should be an even number
var maxPages = 8;
linha 46