Feeds
Newsletter
Preloader com pseudo-máscara
Fala ae Pessoal!
Depois de publicada o artigo da semana passada, sobre preloader, muitas pessoas entraram em contato pedindo um preloader com barra.
Fiz um pouco melhor, poderia explanar o assunto como pedido, porém vocês verão um preloader onde a barra foi trocada por uma pseudo-máscara.
O interessante deste preloader é que podemos esconder um imagem e à medida que o filme for carregando, a imagem vai aparecendo.
Mãos a obra.
Crie um filme do tamanho que quiser com o palco na cor #9CAAB5.
Este filme deverá possuir duas ou mais cenas, neste exemplo usaremos duas cenas (Scene 1 e Scene 2).
scene 1:
Quatro camadas
scripts
pseudo-máscara
imagem
caixa de texto
scripts:
Dois key-frames. No primeiro insira as seguintes linhas:
porcarregado = int(getBytesLoaded()/getBytesTotal()*100);
mascara._yscale = 100-porcarregado;
xporcento = porcarregado+"%";
No segundo insira:
if (getBytesLoaded()<getBytesTotal())
{
gotoAndPlay("Scene 1", 1);
} else {
gotoAndPlay("Scene 2", 1);
}
pseudo-máscara:
Dois key-frames contínuos:
Insira um movieclip, neste está contido um retângulo na mesma cor do fundo (#9CAAB5) e do tamanho da imagem.
Certifique-se que que dentro deste movieclip, o retângulo deve ter o seu canto superior esquerdo localizado no centro do movieclip, ou seja, faça com que o canto superior esquerdo do quadrado esteja em cima do circulo com sinal de + (que é o ponto de referência que o Flash usa para localizar o movieclip). Veja a figura:
Instancie-o de "mascara" - sem áspas.
imagem:
Dois key-frames contínuos:
Insira a imagem que quer esconder, de modo que fique totalmente coberta pela camada superior - pseudo-máscara.
caixa de texto:
Insira uma caixa de texto dinâmica com a variável "xporcento" - sem áspas. Ao lado escreva: PERCENTUAL.
na Scene 2:
Insira o filme que você deseja carregar.
Pronto, aí está o seu preloader com pseudo-máscara!
Até a próxima coluna!
Etam nenê!
Interação
12 comentários
Clau Johnson
13/05/2004 18h06
nada presta
cara eu fique pasma com a falta de competencia por parte deste que se dizem desenvolvedores, tudo q está neste site nada funciona. Começa por aqueles codigos em actionscript engana trouxa. Gente competencia no trabalho de voz,,, a internet é um lixo mas vamos limitar esse lixo.
DJALMA DA SILVA SALARINDO
02/09/2004 20h23
Sinceramente, esse tutorial ta muito fraco! Além de muito mal escrito, falta especificações mais concretas! Principalmente na parte sobre as pseudo-mascaras. Eu não entendi se por acaso o retangulo já existe (se sim, n aparece nada), ou se tem que colocar. E quando é dito pra instanciar, não foi dito se é o retângulo ou o movie clip criado. Se for o movie clip, fica difícil, pq como o keyframe não preenche (fica preto) a opção de nomear a instancia não aparece. Assim dificulta muito, as coisas. Seria muito bom se o tutorial tivesse mais fotos ou se vcs pudessem disponibilizar o arquivo .fla, pra se ter uma comparação. Ta na hora de melhorar as coisas por aqui....
Santiago bardella
03/09/2004 10h08
Senão sabe não faz!!!
Olá pessoal da iMastrs!!!
Gostaria de parabeniza-los pelos seus trabalhos porque gosto muito deles.E eles funcionam sim, é só você saber fazer, porque eu consegui fazer.O segredo é você saber interpretar o que esta escrito, e ler com atenção!!!
Falo Dauton um abraço!!!
Paulo Ramone
01/10/2004 02h37
falta detalhes
concordo com as garotas !!! infelizmente a internet é assim mesmo de dez tutoriais que baixei sobre pre loader apenas um tinha uma explicação convincente.
os tutoriais devem ser feitos para quem não sabem. saber pra si é uma coisa, passar pro próximo nem todo mundo tem capacidade !!!
Juliano
01/10/2004 04h56
Tristeza
O que me deixa triste é que as pessoas não entendem que este tutorial foi publicado para acrescentar. E acredito que acrescentou a muitos. Felizmente recebemos críticas construtivas. E também acho que um pouco mais de estudo pode levar o artigo (que dispendeu tempo para faze-lo sem custo) ao seu entendimento. Sinto não suprir sua capacidade. Acho que poderia ser mais vantajoso, se souber, que a tecla F1 de seu Flash tem todas as suas dúvidas explicitamente e detalhadamente explicadas. Que tal aperta-la? Sinta-se a vontade.
Reginaldo Marinho
29/10/2004 16h48
Muito bom!
Grande Dalson... Acho suas explicações super claras, e as de todos os que colaboram com o site também.
Paulo Pires
20/09/2005 00h13
agradecimento
ola gostaria de agradecer pela materia sobre preloader pseudo-mascara
Marcio
04/10/2005 15h47
Meu Deus do Ceu....
hehehehe, não acredito no que acabo de ver...so Entrei Dalton por que fiquei indignado com essas pessoas fazendo esses absurdos de comentários....se voçe me der licença..Dalton ( VIVIANE e EDIZANIA VAO a PQP, ) não incomodem quem trabalha...parabens Dalton e companhia LTDA.
cristina
17/01/2006 17h28
Q droga
Eu tentei fazer tuo o que vc colocou aí, mas qunado eu vou testar a imagem não vai aparecendo e a porcentagem não é "ao vivo" aparece 7 depois para ai vai 100 pq???
Valew
JOSÉ APARECIDO
09/03/2006 11h23
Show
Legal este quadro, gostei muito deste artigo... bom autor.. valeu
rodney rosa di moraes
06/09/2006 12h35
preloader
cara, eu fiz tudo como você mandou, mas não funcionou. as duas cenas passam e o preloader não funciona mesmo. Gostaria de mais detalhes pois não funciona mesmo. Abraços.
Djalma da Silva Salarindo
11/11/2009 18h27
Olá Dauton Janota
Boa tarde pessoal, não sei nem o que dizer, sei que você é um ótimo profisional Dauton!
Comprei seu livro, o qual você participou com Ricardo e Rodrigo Piologo, aprendi muito sobre animações e peço dodas as desculpas possíveis, pois esse post não foi eu quem te enviei, e sim uma brincadeira de mau gosto, pois alguém deve ter invadido meu perfil aqui do Imasters, também peço desculpas ao Imasters, considero muito vocês todos, jamais faria esse tipo de comentário absurdo!
Aliás, em 02/09/2004 20h23, eu não tinha conta aqui no Imasters!
Novamente, peço sinceras desculpas!
Parceiros
iMasters
- Sobre o iMasters
- Política de privacidade
- Anuncie
- Feeds iMasters
- Fóruns iMasters
- Fale conosco
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.