• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

gimbras

Flash Preloader e tutoriais do Grettir na EXAME Infor.

33 mensagens neste tópico

Tutorial: Preloader para Flash (fonte: http://forum.redcodestudio.com/tutoriais-e-howto's/tutorial-flash-preloader/)

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

open_scene.png

create_scene.png

2. Nomear a layer 1 de "Mask". Na frame 1 - criar uma caixa STATIC TEXT, com o seguinte texto.

A carregar...

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

add_layer.png

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.

block_invisible.png

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%.

color_mixer_radial.png

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.

gradient_transform.png

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.

tween_shape.png

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

mask.png

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

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".

var.png

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:

   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.

download_settings.png

* Frame 1 da actions, fazer F9 e acrescentar o seguinte código ActionScript:

 percentagem = valor + " %"

* Apagar a primeira caixa com a VAR: "valor".

[/Modo de edição do movie clip "consola"]

10. Voltar à scene "preload".

leave_mc_edition.png

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.

convert_symbol.png

mc_registration.png

No STAGE escrever "barra" no campo INSTANCE NAME.

instance_name.png

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

_root.barra._xscale = valor

Feito! Vejam o resultado em http://escape.do.sapo.pt

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.

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
nice job...sim senhor...

embora não perceba nada disso. :D

Já somos dois.... :D No entanto, a vontade de aprender predomina e todos fazemos um esforço para conseguirmos tirar o máximo proveito possível do trabalho de entendidos na matéria como este.

Mais uma vez, parabens pelo tutorial gimbras...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Já somos dois.... :D No entanto a vontade de aprender predomina e todos fazemos um esforço para conseguirmos tirar o máximo proveito possível do trabalho de entendidos na matéria como este.

Nada disso, sou tão entendido quanto vocês. Comparado com o xôr Grettir sou um agricultor (sem menosprezo pela agricultura).

Aprendi numa escola de formação.

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Já somos dois.... :D No entanto, a vontade de aprender predomina e todos fazemos um esforço para conseguirmos tirar o máximo proveito possível do trabalho de entendidos na matéria como este.

Nada disso, sou tão entendido quanto vocês. Comparado com o xôr Grettir sou um agricultor (sem menosprezo pela agricultura).

Aprendi numa escola de formação.

Cumps.

eh eh eh, vi o artigo do grettir no suplemento soluções da exame infor do mês passado....

até fiquei parvo.... :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
eh eh eh, vi o artigo do grettir no suplemento soluções da exame infor do mês passado....

até fiquei parvo.... :D

Então imagina conhecê-lo ao vivo e ser aluno dele. Aquilo a pensar em Flash é uma máquina e a programar eu até ficado enjoado com a velocidade de racicínio.

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Heyas pessoal,

lá está o gimbras a fazer das suas...

O tutorial está bom, os meus parabéns gimbras.

O artigo do mês passado da "Soluções" da "Exame Informatica"...qual era o tema ?

O Preloader ? A parte de código é tal e qual o que o gimbras apresentou aqui...

Quem tiver oportunidade de ver a edição de Dezembro, que saiu no dia 18 de Novembro...esse tem um actionscript mais interessante.

Entretanto acabei ontem de escrever o artigo para sair na edição de Janeiro (sairá dia 18 de Dezembro) e esse quase que não tem código... É o primeiro de uma série de artigos que abordarão a mesma temática - Colocar vídeo no Flash.

Começo com video "Embeded" disposto numa forma Não-Standard (sempre que não tenha um aspecto quadrangular), depois partirei para:

- video "Progressive Download" com Alpha Channel (para se colocar sobre qualquer imagem de fundo)

- Componentes "FLV Playback" e "FLV Playback Costum UI"

- Flash8 Video Encoder

e infelizmente não deverei de falar no Streaming do Flash Media Server, porque deve de ser complicado de um utilizador normal ter acesso a uma cena dessas para testar.

De qualquer modo, já dá para brincar a valer com o vídeo dentro do Flash.

Err...isto já não tem nada a ver com o tópico da conversa...sorry.

Bom trabalho gimbras.

Fiquem bem

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

"o actionscript é igual a este" pode ser igual ao teu Grettir mas não foi daí que o tirei. :D Foi o formador Paulo Antunes que me ensinou.

PS: Raios mas agora escreves todos os meses? Ainda nunca comprei nenhuma das revistas. Já agora compila e lança o livrito. Eu compro.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Heyas,

sim escrevo todos os meses.

Nao quis dizer que o tinhas copiado...queria mencionar que a logica do actionscript para os preloaders é sempre a mesma.

Peço desculpa se causei alguma confusao.

Compilar um bookzito com os artigos...nao era mal pensado :D mas ainda so teriam 30 folhitas :D

Vamos aguardar que a coisa aumente, e quando tiver o site no ar, coloco-os lá...

[[ ]]

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O artigo do mês passado da "Soluções" da "Exame Informatica"...qual era o tema ?

lol, queria dizer deste mês (novembro), mas como já recebi a de dezembro confudi... :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Nao quis dizer que o tinhas copiado...queria mencionar que a logica do actionscript para os preloaders é sempre a mesma.

Népias nao pensei nisso. Claro tem que ser igual senão não worka, pelo menos este preloader com barra de progresso e percentagem.

Compilar um bookzito com os artigos...nao era mal pensado :D mas ainda so teriam 30 folhitas :D

Vamos aguardar que a coisa aumente, e quando tiver o site no ar, coloco-os lá...

[[ ]]

Qual site? O do jogo? Está bonito, mas é um site para o jogo não pra livros i think.

O teu livro de flash n arranjaste um contacto com aquele colega designer cujo o pai tinha uma editora (o moço do flash gaming)

Bom isto nada mto off-topic. Ficou mais uma entrevista o Grettir, mas pronto serve o mesmo para dizer que mais tutoriais virão em breve e muitos estão todos os meses na Exame Informática. Que vou comprar já amanhã, e ver se arranjo os números anteriores.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eheheh...sim, ja andamos um pouco off-topic, mas sem stress.

O meu site por enquanto so tem o splash-screen do jogo, mas em breve esse splash-screen ira para um subdominio e terei o meu site no ar...

Esta quase quase...falta um bocadinho assim...tipo danoninho sabem :D

O artigo deste mês mete codigo AS2.0, porque a ideia foi construir um Componente UI totalmente configuravel sem que se tenha de alterar o "code".

Estou um pouco limitado na revista, alem de nao ter muito espaço nao posso criar tutoriais muito avançados (a pedido da redaçao)

Se quiserem, podem enviar um mail para lá a pedir para eu abordar este ou aquele tema...e pode ser que tenham sorte :D e o vosso nome vem la no meio do texto :D

Fiquem bem

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

:-D Bom este tópico passa a ser sobre tutoriais e não só do meu.

Comprei a revista hoje e vem lá o tutorial da scrollbar, por acaso queria as outras edições onde escreveste para ver os outros tutoriais.

Vou lá pedir isso de mais desenvolvimento e cenas avançadas, heeh.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Nao precebo grande coisa de flash mas tive a opurtunidade de estar presente no workshop da exame informartica sobre flash dado pelo Grettir e realmente ele domina :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Heyas,

tiveste la fcosta ?

Epa, e nao me disseste que fazias parte do "nosso" forum ?

Mau...muito mau pah :D

Espero que tenhas gostado...foi uma grande tirada...em 6horas explicar a construçao de um site...foi dureza.

Para teres uma noçao, todas as noçoes que falei no workshop da Edimpresa, sao dadas durante 35horas nos cursos que ministro (um bocadito mais hein?)

Fiquem bem

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

epah... ate tivemos opurtanidade de falar umas duas vezes, mas nao fazia ideia que tambem andavas por aqui... no primeiro dia tive a falar contigo no intervalo sobre as ligacoes de dados do flash a uma bd, e no segundo dia tambem no intervalo tiveste a mostrar aquele site da vodafone, que depois ate mostraste no projector...

Com este workshop consegui ficar com o bichinho do flahs ca dentro... :D fiquei mesmo com vontade deaprender mais e mais disto... ;-)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu até que já curti mais flash mas agora zangado (espero q m passe esta fase) com o xôr flashini pq m dá cabo da qualidade das imagens e dá-me dores de cabeça os códigos todos.

Mas isso pode ser o erro 111.

Esse site da Vodafone n é por acaso aquele onde aparece uma nina a falar e dps clicamos no menu e a chavala vai lá com o dedo e clica tmb no botão que escolhemos?

O Grettir tmb nos mostrou esse site.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Heyas,

é esse site mesmo gimbras.

fcosta, da-me uma dica de que és pah. LOL...

Lembro-me que no intervalo estavam 2 pessoas comigo a ver o site da Vodafone. Um tipo louro e um tipo por volta dos 30's/40's talvez...

Ou sera que estou errado ?

Damn, esta cabeça anda meio queimado....necessito ASAP de ir buscar uns add-ons lolol...tipo Cerebrum and stuff.

Keep on flashing people!!!

Fiquem bem

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

:shock: gurosan (<-- é assim que se escreve?) :D

Já agora postem aí o link para esse site.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Heyas,

já sei quem és pah.

Quando te vi a 1º vez no seminário da Exame Informática, pensei que fosses nórdico :P eheheh

Gimbras, o Gurosan é alta bomba...só uso para os "dias" que são grandes noitadas e no outro dia é necessário energia...mas o corpo acaba por pagar uma factura.

O Cerebrum é um composto vitaminico para quando o cérebro anda meio cansado...meio parvo e tal :)

Eheh

Hasta luego ppl

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Heyas,

o proximo artigo, que deverá de chegar as bancas lá para 2f ou 3f é iniciação à animação com Flash - "Back to Basics" é o titulo do artigo (espero que nao o troquem...)

Os proximos artigos deixarão de ter 6 páginas e passaram a contar somente com 4. Não foi uma despromoção, mas antes um convite a um colega participar nos artigos juntamente comigo. Deste modo, passamos a dispor de 8 paginas, e "dividindo irmamente" dá 4pags + 4pags para cada um. Os artigos dele serão na area do CAD.

No entanto, já está definido o tema para os meus próximos artigos --- "Flash Gaming".

É isso mesmo, vou escrever uma serie de artigos que no final darão para construir 2 ou 3 joguitos de Flash.

E que jogos são ??

Estou a pensar em jogos tipo Pong, Pacman, MicroMachine, R-Type, SuperMarioBros, etc...

Vamos ver no que dá.

Fiquem bem

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora