Jump to content
Sign in to follow this  
filip_e

[ActionScript] Site simples em Flash

Recommended Posts

filip_e

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]

Share this post


Link to post
Share on other sites
max

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

Share this post


Link to post
Share on other sites
deathseeker25

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

Share this post


Link to post
Share on other sites
joninho

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

Cumps...

Share this post


Link to post
Share on other sites
vbmaster

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

Share this post


Link to post
Share on other sites
saramgsilva

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

Share this post


Link to post
Share on other sites
operacoes

com screens ficava altamente.

ja ta, nao é?

mas com screens uiiiiiiii

beijava vos a testinha

Share this post


Link to post
Share on other sites
operacoes

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:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.