Site básico em flash

Nesse tutorial você irá aprender a criar um site básico em flash…

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

1º – Crie um novo filme com as seguintes características :
Width = 500 px
Height = 300 px
Com o Background na cor preta (#000000)

2º – 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”;
Todos sem as aspas.
3º – 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
4º – 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 “alt+F8” (para criar um novo símbolo), nas opções selecione “botão” e no campo “nome” coloque “link1” sem as aspas.
b. No “timeline” haverá 4 Para Cima, Sobre, Para baixo, Área. (normal, quando passa o mouse por cima, quando clicar, área “rolável” e “clicável” do botão);
b1. – No frame “Para Cima” 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 “Áera” e aperte “F6” (para inserir um quadro chave);
Vá no frame “Sobre” e também aperte “F6”; continuando no frame “Sobre” 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”, sem as aspas, 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 “alt+F8”, nas opções selecione “botão” e no campo “nome” = “link2” sem as aspas.
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.

5º – Vamos inserir os botões no palco;
Pressione “F11” ou “ctrl+L” para abrir a bibliotecade 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.
6º – 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.

7º – Vamos as actions (Tá acabando):
Vá na layer “actions”e clique no 1º frame.
Abra o painel de ações e coloque no modo expert (se você utilizar o flash MX 2004 não é necessário modificar);

a. Vamos colocar as actios para que o filme comesse parado e com o link1 iniciado:
escreva:

CODEStop();

Para que o filme comesse parado;
Na segunda linha:

CODEcreateEmptyMovieClip(“mc1″, 5)

ai ele cria um movieclip que chamará de “mc1”
Na terceira linha:

CODEmc1.loadMovie(“home.swf”)

Ai ele fala que o mc1 deve dar um load no arquivo “home.swf”
Na quarta e quinta linha:

CODEmc1._x = 0.0
mc1._y = 100.0

Ai ele fala a posição X e Y do mc1.
b. Continuando com o painel de ações aberto clique sobre o botão “home”.
O Painel de ações ficará vazio então insira as seguintes ações:

CODEon (press)

A única coisa que muda é esta ação que diz que ao clicar deste botão…, e a ação “stop” que ai não tem alem das chaves para continuar a açã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 ações aberto clique sobre o botão “Links”.
O painel ficará vazio então insira as açõ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”.
8º – ACABOU!!!
Salve este arquivo e teste ele.

3 Respostas

  1. Gisele disse:

    Olá!! Eu gostaria de aprender mais sobre o Flash.
    Tenho algumas noções básicas de Flash, mas eu não sei trabalhar com camadas, e também gostaria de saber como se cria os passos (frames), como funciona tudo isso?
    Poderia me ajudar. Abraço!!!
    Obs: Gisele, 20 anos, interior de SP.

  2. olá td bem… achei muito legal o seu tutorias acho q esta bem simples porem eu ñ estou conseguindo fazer as mc ‘s “rodar”. esta dando uma monte de erro segue o erro e um unico botão:

    **Error** Scene=Scene 1, layer=BOTOES, frame=1:Line 2: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
    {createEmptyMovieClip(”mc2″, 4)

    **Error** Scene=Scene 1, layer=BOTOES, frame=1:Line 3: ‘)’ or ‘,’ expected
    mc2.loadMovie(”link2.swf”)

    **Error** Scene=Scene 1, layer=BOTOES, frame=1:Line 4: ‘)’ or ‘,’ expected
    mc2._x = 0.0

    Total ActionScript Errors: 3 Reported Errors: 3

    **Error** Scene=Scene 1, layer=BOTOES, frame=1:Line 2: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
    {createEmptyMovieClip(”mc2″, 5)

    **Error** Scene=Scene 1, layer=BOTOES, frame=1:Line 3: ‘)’ or ‘,’ expected
    mc2.loadMovie(”link2.swf”)

    **Error** Scene=Scene 1, layer=BOTOES, frame=1:Line 4: ‘)’ or ‘,’ expected
    mc2._x = “0.0″

    **Error** Scene=Scene 1, layer=BOTOES, frame=1:Line 2: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
    {createEmptyMovieClip(”mc2″, 5)

    **Error** Scene=Scene 1, layer=BOTOES, frame=1:Line 3: ‘)’ or ‘,’ expected
    mc2.loadMovie(”link2.swf”)

    **Error** Scene=Scene 1, layer=BOTOES, frame=1:Line 4: ‘)’ or ‘,’ expected
    mc2._x = 16.8

    se puder ajudar…
    falei!

    thiago esterci

  3. Excellent site, where did you come up with the information in this piece of content? I’m pleased I found it though, ill be checking back soon to see what other articles you have.

Deixe um Comentário

© 2007 Meus Tutoriais.
Proudly designed by Clickmidia.