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

filip_e

[ActionScript] Site simples em Flash

13 mensagens neste tópico

Bom vamos começar o tutorial de um site feito totalmente em flash (um site básico).

- Crie um novo filme com as seguintes características :

Width = 500 px

Height = 300 px

Com o Background na cor branca (#FFFFFF)

- Crie 3 Layers (Camadas):

A primeira Camada deve se chamar actions;

A segunda Camada deve se chamar botões;

A terceira Camada deve se chamar Fundo;

- Vamos desenhar o fundo; Vá na layer fundo.

a. Desenhe um quadrado Azul (#0099FF), com o seguinte tamanho e localização:

W: 500.0 X: 0.0

H: 200.0 Y: 100.0

b. Desenhe um outro quadrado na cor cinza (#333333) com o seguinte tamanho e localização:

W: 500.0 X: 0.0

H: 100.0 Y: 0.0

- Vamos criar os botões, nesse tutorial vou fazer apenas 2 links (2 botões), com uma animação simples, vamos ao primeiro:

a. Vai ser o botão home;

Aperte F8 (para criar um novo símbolo), nas opções seleccione button e no campo name coloque link1.

b. No timeline haverá 4 frames Up, Over, Down, Hit. (normal, quando passa o mouse por cima, quando clicar, área "rolável" e "clicável" do botão);

b1. No frame UP insira um quadrado de 100 px X 30 px, na cor verde (#00FF00), Aperte Ctrl + K (alinhar) e alinhe ele no centro do palco.

b2. Vá no frame Hit e aperte F6 (para inserir um quadro chave);

Vá no frame over e também aperte F6 continuando no frame over clique sobre o quadrado e modifique sua cor para o azul (#0099FF).

b3. Para colocar um texto no botão você deve inserir um novo layer; renomeio para texto, verifique que o layer texto deve estar acima do layer Layer1.

No frame Up insira um campo de texto estático e escreva Home alinhe-o no centro do palco (caso não saiba alinhar volte para o passo b1).

c. O primeiro botão está feito, volte ao palco;

Vamos ao segundo botão, vai ser Links, aperte Ctrl+F8, nas opções seleccione button e no campo name = link2.

A partir daí­ repita o mesmo processo do botão 1 (b1, b2 e b3), mudando apenas o campo de texto de home para links.

- Vamos inserir os botões no palco;

Pressione F11 ou Ctrl+L para abrir a biblioteca de arquivos. Clique na layer botões e arraste para o palco os dois botões da biblioteca (link1 e link2), alinhe-os no palco sobre o quadrado cinza.

- Vamos criar os links ou telas, ou seja quando a pessoa clicar em um determinado link o determinado filme será exibido na parte azul.

a. Crie um novo filme com as seguintes características:

Width: 500 px

Height: 200 px

Com o background na cor branca (#FFFFFF).

Neste filme você deve inserir o que você quer que apareça quando o usuário pressionar o link home. Após colocar o conteúdo desejado salve-o na mesma pasta que o site com o nome de home. Após isto aperte Ctrl+Enter para testar.

b. Crie um outro filme que será do segundo link links com as mesmas características mas com outro conteúdo. E salve-o como links após isso teste o filme.

- Vamos às actions (Tá acabando):

Na layer actions clique no 1º frame.

Abra o painel de acções e coloque no modo expert (se você utilizar o flash MX 2004 não é necessário modificar);

a. Vamos colocar as actions para que o filme comece parado e com o link1 iniciado:

escreva:

Stop();

Para que o filme comece parado;

Na segunda linha:

createEmptyMovieClip("mc1", 5)

Ai ele cria um movieclip que chamará de mc1.

Na terceira linha:

mc1.loadMovie("home.swf")

Ai ele fala que o mc1 deve dar um load no arquivo home.swf.

Na quarta e quinta linha:

mc1._x = 0.0
mc1._y = 100.0

Ai ele fala a posiçãoo X e Y do mc1.

b. Continuando com o painel de acções aberto clique sobre o botão home.

O Painel de acções ficará vazio. Então insira as seguintes acções:

on (press)

A única coisa que muda é esta acção que diz que ao clicar deste botão..., e a acção stop que aé não tem além das chaves para continuar a acção on (press).

Nas linhas 2,3,4,5 e 6 coloque:

{createEmptyMovieClip("mc1", 5)
mc1.loadMovie("home.swf")
mc1._x = 0.0
mc1._y = 100.0
}

c. Continuando com o painel de acções aberto clique sobre o botão Links.

O painel ficará vazio. Então insira as acções nas linhas 1,2,3,4,5 e 6:

on (press)
{createEmptyMovieClip("mc2", 5)
mc2.loadMovie("links.swf")
mc2._x = 0.0
mc2._y = 100.0
}

Houveram algumas alterações do link1 para o link2 que foram:

Eu chamei o movieclip criado de mc2, e o filme a ser carregado de links.swf.

Salve o arquivo e teste-o.

[Artigo no Wiki]

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Bom tópico, aliás, já tinha visto o forum, e tinha dado pela falta do tópico actionscript !!!!

Ainda bem que apareceu, agora só falta fazer crecer a comunidade.

Max

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Mais um trabalho excelente do nosso moderador filip_e...

Podem acreditar neste tipo, que ele a desenhar websites é do melhor que eu tenho visto...

Cumps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Parece tar fixe, mas os caracteres tao todos baralhados.. :S tenta por isso direito... :(

Cumps...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Parece tar fixe, mas os caracteres tao todos baralhados.. :S tenta por isso direito... :(

Cumps...

isso teve a ver c a mudança de phpbb para CSM ...ficou assim, ja discutiram isso aki mas nao sabem por isso correcto  :dontgetit:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Parece tar fixe, mas os caracteres tao todos baralhados.. :S tenta por isso direito... :(

Cumps...

isso teve a ver c a mudança de phpbb para CSM ...ficou assim, ja discutiram isso aki mas nao sabem por isso correcto  :dontgetit:

mentira... sabemos pôr direito....

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Parece tar fixe, mas os caracteres tao todos baralhados.. :S tenta por isso direito... :(

Cumps...

isso teve a ver c a mudança de phpbb para CSM ...ficou assim, ja discutiram isso aki mas nao sabem por isso correcto  :dontgetit:

mentira... sabemos pôr direito....

:-[ ok desculpa, pensava que nao ...  :-[ mas ainda bem entao..

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Parece tar fixe, mas os caracteres tao todos baralhados.. :S tenta por isso direito... :)

Cumps...

Corrigidos os caracteres.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

com screens ficava altamente.

ja ta, nao é?

mas com screens uiiiiiiii

beijava vos a testinha

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

axo a explicacao fixe. agora k a li. mas axo k ajudava imenso se dissesses logo ao inicio o que fazia

o site. procuro material para fazer um, mas coisas especificas.

e tive de ler tudo para perceber o k fazia. de kkr modo. bom tutorial :thumbsup:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pode ser que com a introdução do VCM faca um filme deste tutorial !

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