[Programação] Flash Preloader*

Consulte aqui os tutoriais escritos pela nossa comunidade ou participe e escreva novos tutoriais!

Moderadores: Administradores, Moderadores

[Programação] Flash Preloader*

Mensagempor gimbras » Sexta Nov 18, 2005 0:02

:)

Vou-me armar em esperto e tentar chegar aos calcanhares do Speed Dragon.

1. Criar uma nova Scene, e posicioná-la em primeiro lugar na lista de Scenes.

Imagem

Imagem

2. Nomear a layer 1 de "Mask". Na frame 1 - criar uma caixa STATIC TEXT, com o seguinte texto.
Código: Seleccionar todos
A carregar...


3. Criar uma nova layer 2 com o nome "Efeito" [posicioná-la por cima da Layer "Mask"].

Imagem

Na frame 1 - criar um rectângulo verde sem stroke e colocá-lo por cima do texto, anteriormente criado.

4. Layer 1 "Mask" na frame 20 fazer F6. Bloquear e tornar invisível.

Imagem

Layer 2 "EFEITO" na frame 1 ir ao painel COLOR MIXER e criar um gradiente RADIAL, com a primeira cor VERMELHO e a segunda cor BRANCO e Alpha a 0%.

Imagem

Com a ferramenta PAINT BUCKET pintar o rectângulo com o gradiente criado anteriormente.

5. Na Layer 2 "EFEITO" na frame 10, fazer F6; Frame 20, fazer F6.
Na frame 10, sem nada seleccionado, usar a FILL TRANSFORM TOOL (no Flash 8 já se chama Gradient Fill Tool) para alterar zona de impacto do gradiente.

Imagem

Basta arrastarem o centro do arco para os lados para a zona de impacto mudar.

6. Layer 2 "EFEITO", na frame 1 fazer um TWEEN SHAPE.
Na frame 10 novo TWEEN SHAPE.

Imagem

7. Aplicar Mask à layer "EFEITO". Bloquear as 2 layers.

Imagem

8. Criar uma nova layer "ACTIONS". Na frame 1 fazer F9. E colocar o seguinte código ActionScript:

Código: Seleccionar todos
if (_framesloaded == _totalframes) {
      gotoAndStop ("menu",1)
      }else{
      gotoAndplay (1)
      }


9. Criar uma nova layer "CONSOLA". Na frame 1, inserir caixa de texto do tipo DYNAMIC.
Para duplicar esta caixa de texto fazer ALT+CLICK+ARRASTAR. Com as duas caixas seleccionadas, ir ao menu MODIFY > CONVERT TO SYMBOL > MOVIE CLIP > dar-lhe o nome "consola".
Editar o novo movie clip (para entrar no modo de edição basta fazer duplo clique no movieclip criado, ou então abre-se a Library [CTRL+L] e duplo clique no movieclip consola).

[Modo de edição do movie clip "consola"]
* Na PROPERTIES da caixa 1 no campo VAR escrever "valor".

Imagem

Na PROPERTIES da caixa 2 no campo VAR escrever "percentagem".
* Nomear a Layer 1 de "caixas".
Criar uma nova Layer, nomeá-la como "ACTIONS". Na Frame 1 fazer F9. Inserir o seguinte código no painel das actions:
Código: Seleccionar todos
   valor2 = _root.getBytesLoaded () / _root.getBytesTotal ()
            valor3 = valor2 * 100
            valor = Math.round (valor3)

* Na Layer caixas, na frame 2 fazer F5.
Fazer CTRL+ENTER > VIEW SIMULATE DOWNLOAD, alterar a velocidade de download para uma mais baixa para conseguir perceber se está tudo a funcionar.

Imagem

* Frame 1 da actions, fazer F9 e acrescentar o seguinte código ActionScript:
Código: Seleccionar todos
percentagem = valor + " %"


* Apagar a primeira caixa com a VAR: "valor".
[/Modo de edição do movie clip "consola"]


10. Voltar à scene "preload".

Imagem

Criar nova layer "barra".
Na Frame 1, desenhar rectângulo com stroke. Seleccionar o limite (stroke), ir ao painel EDIT > CUT.
Criar nova layer "limite da barra". Ir ao painel EDIT > PASTE IN PLACE.

11. Na Layer "BARRA", seleccionar o FILL. Ir ao painel MODIFY > CONVERT TO SYMBOL > MOVIE CLIP, nomeá-lo como "barra". Escolher o 4º ponto de registo.

Imagem

Imagem


No STAGE escrever "barra" no campo INSTANCE NAME.

Imagem

12. Editar movieclip "consola" Na Layer "actions", Frame 1 fazer F9. Acrescentar o seguinte código ActionScript:


Código: Seleccionar todos
_root.barra._xscale = valor


Feito!

Glossário:
Noções de FILL e STROKE
Fill é interior de um objecto, ou melhor cor do seu interior. Por exemplo, um rectângulo amaralo com rebordo azul. O fill é amarelo e o STROKE (rebordo ou contorno) é azul.

The End. Tenho mais para quem quiser ajuda aqui no meu cantinho

Corrigi alguns erros e coloquei imagens
(Peço desculpa, pelo link que nelas aparecem, mas foram feitas para pôr noutro lado).

Tutorial Aprovado
Editado pela última vez por gimbras em Domingo Nov 20, 2005 0:22, num total de 4 vezes.
Avatar do Utilizador
gimbras
Membro Diamante
Membro Diamante
 
Mensagens: 1405
Registado: Quarta Fev 02, 2005 21:55

Mensagempor gimbras » Sexta Nov 18, 2005 19:24

Pronto adicionei umas imgs q n foram criadas para este site, por isso têm "direitos de autor".

Espero que curtam.
Avatar do Utilizador
gimbras
Membro Diamante
Membro Diamante
 
Mensagens: 1405
Registado: Quarta Fev 02, 2005 21:55

Mensagempor NePTeR » Sábado Nov 19, 2005 20:41

gimbras Escreveu:valor2 = _root.getBytesLoaded () / _root.getBytesTotal ()
valor3 = valo 2 * 100
valor = Math.round (valor3)


Isto está correcto?! é que deu-m erros no action script ao fazer isto :roll:
Imagem
NePTeR
Membro de Ouro
Membro de Ouro
 
Mensagens: 718
Registado: Sábado Jul 23, 2005 16:00
Localização: Planeta Terra

Mensagempor gimbras » Domingo Nov 20, 2005 0:26

Está completamente, fogo editei esse código 2 vezes :)

Código: Seleccionar todos
   valor2 = _root.getBytesLoaded () / _root.getBytesTotal ()
            valor3 = valor2 * 100
            valor = Math.round (valor3)


Assim é que está correcto a variável "valor3" é igual à variável "valor2" vezes 100, convém é colocar o nome das variáveis correctamente senão erro. sorry.

Vejam o resultado deste tutorial aqui

http://escape.do.sapo.pt/ <-- link corrigido. Realmente sem o TLD (top level domain, o ".pt") ninguém. Devia estar com sono.
Editado pela última vez por gimbras em Domingo Nov 20, 2005 15:51, num total de 1 vez.
Avatar do Utilizador
gimbras
Membro Diamante
Membro Diamante
 
Mensagens: 1405
Registado: Quarta Fev 02, 2005 21:55

Mensagempor TeC_TeRaByTe » Domingo Nov 20, 2005 1:32

hum..
o link nao ta correcto... o mozzila nao encontra nada
DQ6
Intel Core 2 Duo E6600
2 Gb Team Xtreme
320 GB Seagate
TeC_TeRaByTe
Membro de Ouro
Membro de Ouro
 
Mensagens: 514
Registado: Quinta Mai 06, 2004 18:24
Localização: leicester UK

Mensagempor Superavit » Domingo Nov 20, 2005 2:16

o link funciona se adicionares o sufixo .pt!
http://escape.do.sapo.pt
ora aqui está uma bela iniciativa, sim senhor! vou experimentar!
a.k.a. Molero

«I am Torgo. I take care of the place while the Master is away.»
in Manos, the Hands of Fate
Superavit
Membro de Ouro
Membro de Ouro
 
Mensagens: 528
Registado: Segunda Abr 18, 2005 15:03
Localização: Lisboa

Mensagempor G@rlink » Domingo Nov 20, 2005 4:03

Boas,

mais um optimo post, sim senhor... Parabéns!!!

[Sugestão]

Tão e se juntarem os vossos (tu e o Speed Dragon) conhecimentos (e tempo livre) para fazerem uma cena ainda mais à frente?? Tipo um "mega tutorial" de Flash, abordando diversos tópicos, técnicas, etc...

Talvez seje uma ideia estúpida mas lembrei-me assim de repente... :roll:

[/Sugestão]


Cumps
Imagem
Avatar do Utilizador
G@rlink
Membro Vitalício
Membro Vitalício
 
Mensagens: 1512
Registado: Sexta Jun 24, 2005 0:17
Localização: Coimbra

Mensagempor gimbras » Domingo Nov 20, 2005 15:56

:)
Eu até juntava os dois tutoriais e fazia uma cena mesmo de tutoriais, só que o Speed não quer, pq n tem mto tempo. Mas eu já ando a fazer a minha cena de tutoriais aqui, contudo sozinho e até agradecia ajuda. Senão demoro mais tempo.

PS: Sinceramente de flash não entendo mto. Só algumas cenas.
Avatar do Utilizador
gimbras
Membro Diamante
Membro Diamante
 
Mensagens: 1405
Registado: Quarta Fev 02, 2005 21:55


Voltar para Tutoriais

Quem está ligado:

Utilizador a ver este Fórum: Nenhum utilizador registado e 1 visitante

cron