MAURO ROCHA TAVARES (40 pts)

SASHA GUDEY (235 pts)

GÉRIO (93 pts)

RICARDO TAKAHASHI (180 pts)

MANGOOST (80 pts)

STICKMAN (155 pts)

HELEN TRIOLO (444 pts)

IRAPUAN MARTINEZ (45 pts)

GUILHERME G.G. (137 pts)

KEN AWAMURA (130 pts)

JOÃO NETO (78 pts)

MUZAK (45 pts)
Treinamento PontoFlash de Flash e ActionScript

Como abrir uma janela popup no Flash?

Flash The Easter Egg.

Como encontro o valor da Hipotenusa de um triângulo com AS?

Rodo um vídeo usando Flash ou Director?

EasyPreloader utilizando os recursos do FLEM.

Como é que eu faço para diminuir a velocidade da minha apresentação? Tentei mudar o Frame Rate mas não adiantou.

Criar SWF em tempo de execução, ou seja, criar SWF a partir de PHP.

Como posso setar uma cor para o Release de todos os botões de meu filme?

Qual a diferença entre variável global e variável local?

Como posso parar um movieclip no mouseOver? Pode ser com um operador condicional?

É possível usar meta tags para evitar que os SWF vão para o cache?

Quero um movieclip subindo dinamicamente e que pare no mouse over.

Como dar um fade (alpha) num movieclip clicando num botão?

Como carrego os vários filmes que utilizarei no meu flash em apenas um preload?
Controlando um swf que está em outro frame

Objeto XML - introdução.

Botão avançar e recuar.

Frases randômicas

Integrando o Flash com Arquivos de Vídeos II.

Animação com TextFields Dinâmicos

Loop Mixer.

Janelas tipo Windows com Swap Depth

Jpeg, Gif, texto, gradientes X slices no Fireworks

Formulário interagindo Flash e PHP.

Tornando movieclips arrastáveis (drag movieclip)

Objeto Movieclip - introdução
Line trail e random

Drummer

Ondas

Preloader marquee

Drag MC 2

To Upper Case

Raysoflight 2

Arrays

Texto com scroll

Pista de corrida

ComboBox duplo

Texto com scroll
HOME | TUTORIAIS
Menu horizontal com descrição.
por Luís Alberto

Olá galera da Ponto Flash!

Vocês me conhecem como Luiz - Peninha, pela lista de discussão. Em fim criei coragem e montei um tutorial! Espero que este seja só um empurrão para a montagem de vários outros!

Vamos ao que interessa:

Neste tutorial vamos aprender a montar um MENU semelhante ao exibido abaixo:
Obs.: Este tutorial deve ser executado no Flash MX. E me desculpem se eu exagerei nos detalhes! hehehehe

Vamos aos passos:

Crie um arquivo novo no Flash e modifique o tamanho do mesmo para 400 de "width" por "60" de height, e coloque a cor de fundo que você preferir.
Modify > Movie.

   Crie um quadrado com o tamanho de 40x40 (Procure fazer este quadrado sem linhas de borda). Este será o quadrado que, inicialmente, aparenta ser uma simples borda branca para o botão.

   Transforme este quadrado em MOVIE CLIP. Selecione o quadrado, pressione a Tecla F8, na janela Convert to Symbol, digite no campo NAME: Movie_Borda, pressione OK. Na sua instância coloque Graph (se você quiser colocar outro nome, tudo bem, é só lembrá-lo mais pra frente, uando formos usar esta instância na Programação).

   Entre na edição deste MOVIE CLIP e alinhe o objeto (o quadrado) à Left Edge e Vertical Center. Clique duas vezes sobre ele. Selecione o objeto interno e na Paleta Align, escolha os seguintes botões: (se a Paleta Align não estiver sendo exibida, pressione CTRL + K).

   Saia da edição do MOVIE CLIP, clicando duas vezes numa área fora do objeto.

   Selecione o MOVIE CLIP (Movie_Borda) e pressione a Tecla F8. A janela Convert to Symbol aparece. Na janela Convert to Symbol, escolha Movie Clip, no campo NAME digite: Movie_Bot01. Pressione OK. Na sua instância coloque Bot01 (se você quiser colocar outro nome, tudo bem, é só lembrar mais pra frente, quando formos usar esta instância na Programação).

   Entre na edição do MOVIE CLIP Movie_Bot01. A partir de agora, vamos editar o próprio botão, nossa linha de tempo deve parecer-se com a da figura abaixo:

   Como pode ver, estamos na Edição do Movie_Bot01, que se encontra na Scene 1.

   Renomeie o "Layer1" para Graph. Eu procuro estar associando sempre o nome do Objeto com o nome do Layer, fica mais fácil de se encontrar depois!

   Crie mais dois Layers e deixe sua Time Line, igual a imagem abaixo:

   No Layer TextoBot, vamos colocar o Texto que vai ficar no botão. Crie um quadrado de 30x30 (menor que o Movie_Borda). Neste se você quiser deixar uma borda, fica até legal. Agrupe este quadrado (CTRL + G) e alinhe ele no centro do MOVIE. Você pode usar tanto texto quanto uma imagem, como aparência do botão. A aplicação deste MENU vai conforme a criatividade de cada um, como no exemplo estamos trabalhando com texto, crie um TEXTO e alinhe este texto no centro do MOVIE.

Nosso documento deve parecer-se com o abaixo:

   No Layer Botao, vamos colocar um botão invisível. Ele só vai servir pra "startar" a animação e como link. Crie um quadrado de 30x30, selecione ele e pressione a Tecla F8.
Aparece a janela Convert to Symbol. Na janela Convert to Symbol, escolha Button, no campo NAME coloque: Bot01, pressione OK.

   Entre na edição do botão, dentro dele arraste o Frame UP até o HIT. Nossa Time Line do botão deve ficar assm.

Selecione o botão, pressione a Tecla F8. A janela Convert to Symbol aparece. Na janela Convert to Symbol, escolha Movie Clip e no campo NAME digite: MC_Bot01. pressione Ok. Entre na edição do "MC_Bot01", selecione o objeto interno (Bot01), alinhe o objeto (Bot01) à Left Edge e Vertical Center, na Paleta Align. Escolha os seguintes botões: (se a Paleta Align não estiver sendo exibida, pressione CTRL + K).

   Saia da edição do "MC_Bot01". Na sua instância coloque: Bot (se você quiser colocar outro nome, tudo bem, é só lembrar mais pra frente, quando formos usar esta instância na Programação).

   Agora só falta criarmos a descrição do botão, que só irá aparecer a partir do momento que a pessoa colocar o mouse sobre o botão, por isto teremos de trabalhar com Layer do tipo Mask. Para confirmar, mova seu mouse sobre qualquer botão do exemplo do MENU acima.

Crie mais dois Layers. O Layer superior você deverá configurá-lo como MASK e o 2º Layer como MASKED. Deixe sua Time Line igual a imagem abaixo:

   No Layer MASK, crie um quadrado de 30x30 (não importa a cor, ele não vai aparecer. Estou usando a cor PRETA, tanto no preenchimento, quanto na borda).

   Transforme este quadrado em um MOVIE CLIP. Nomeio-o como Movie_Mask, e coloque como instância dele: Mask (se você quiser colocar outro nome, tudo bem, é só lembrar mais pra frente, quando formos usar esta instância na Programação).

   Entre na edição deste MOVIE CLIP (Movie_Mask) e alinhe o objeto interno à Left Edge e Vertical Center, na Paleta Align, escolha os seguintes botões: (se a Paleta Align não estiver sendo exibida, pressione CTRL + K).

   Saia da edição do MOVIE CLIP (Movie_Mask) e verifique se seu documento está parecido com a imagem:

   No Layer DESCRICAO, crie um texto como descrição do que teria no Item 1. Alinhe o texto de maneira que fique igual a imagem abaixo:

   Como o texto está no Layer DESCRICAO que é MASKED, ele não aparecerá. Para confirmar, pressione CTRL + ENTER.

   Pronto, os objetos necessários para o funcionamento, já foram criados. Agora precisamos inserir a devida programação! Antes de continuarmos, vamos verificar se está tudo em ordem?

   Abra a janela MOVIE EXPLORER (Window > Movie Explorer ou F4). Verifique se sua janela está semelhante a esta:

   Verifique se está tudo certo, lembrando que o que está dentro do quadrado VERMELHO, são as instâncias, e devem estar corretas, pois se não, a programação não irá funcionar corretamente.

Estando tudo em ordem, vamos em frente!

Certifique-se que você está na edição do MOVIE CLIP (Movie_Bot01).

No PRIMEIRO FRAME do Layer ACTIONS, digite ou escolha na coluna de Actions da janela ACTIONS, esta instrução:

stop();

   Entre na edição do MOVIE CLIP (MC_Bot01), vamos colocar as instruções no botão. Se você não estiver vendo o MOVIE CLIP, oculte o Layer MASK!

   Selecione o botão, e na janela ACTIONS, digite ou escolha na coluna de Actions da janela ACTIONS, estas instruções:

on (rollOver) {
    _parent.gotoAndPlay(2);
}

  Nesta instrução você está fazendo com que o MOVIE CLIP (MC_Bot01), vá até o FRAME 2. Repare bem que estamos dentro do MC_Bot01, por isto estamos colocando _parent.

on (rollOut) {
    _parent.gotoAndPlay(4);
}

Nesta instrução você está fazendo com que o MOVIE CLIP (MC_Bot01), vá até o FRAME 4.

   Saia da edição do MOVIE CLIP (MC_Bot01). Crie mais 4 KEY FRAMES na Time Line do Layer ACTIONS do MOVIE CLIP (MC_Bot01). Sua Time Line deve parecer-se com a imagem:

   No FRAME 2, digite ou escolha na coluna de Actions da janela ACTIONS, estas instruções:

if (Graph._xscale == "310") {
    stop();
} else {
    Graph._xscale = Graph._xscale + 30;
    Mask._xscale = Mask._xscale + 30;
    Bot._xscale = Bot._xscale + 30;
}

   Nestas instruções, você está verificando se o TAMANHO em % do MOVIE CLIP GRAPH é igual à 310, se for ele para, se não, ele vai aumentando o _xscale de 30 em 30, tanto do GRAPH quanto do MASK e do BOT. O MASK para que apareça a descrição, ele aumenta o TAMANHO do MOVIE (Mask) e assim a área de exibição do LAYER MASK aumenta! E o BOT para que aumente a área de HIT do Botão.

   Mas ainda falta um detalhe para que esta etapa funcione! No FRAME 3, digite ou escolha na coluna de Actions da janela ACTIONS, esta instrução:

gotoAndPlay (_currentframe -1);

   Pronto! A primeira etapa está concluída. Pressione CTRL + ENTER, ao passar o mouse sobre o botão, você verá que ele vai aumentar conforme o esperado, mas ainda não volta por que não montamos a programação de volta!

Então vamos a ela!

No FRAME 4, digite ou escolha na coluna de Actions da janela ACTIONS, estas instruções:

if (Graph._xscale == "100") {
    stop();
} else {
    Graph._xscale = Graph._xscale - 30;
    Mask._xscale = Mask._xscale - 30;
    Bot._xscale = Bot._xscale - 30;
}

   Nestas instruções, você está verificando se o TAMANHO em % do MOVIE CLIP GRAPH é igual à 100, se for ele para, se não, ele vai diminuindo o _xscale de 30 em 30, tanto do GRAPH quanto do MASK e do BOT.

   No FRAME 5, digite ou escolha na coluna de Actions da janela ACTIONS, esta instrução:

gotoAndPlay (_currentframe -1);

   Terminamos o primeiro botão. Se você precisar aumentar o tamanho do botão, é só aumentar o valor no IF do FRAME 2, faça o teste! Agora só criar outros botões baseado no primeiro e ir alterando o tamanho dele conforme o necessário.

   A única coisa que mudará quando tivermos mais de um botão no MENU, é que precisamos fazer o SEGUNDO, TERCEIRO... quantos botões você tiver criado, andarem conforme o movimento do botão ativo, mas é bem simples também, é só acrescentarmos estas instruções no FRAME 2 do Layer ACTIONS de cada MOVIE CLIP:

_root.Bot02._x = _root.Bot02._x + 12;
_root.Bot03._x = _root.Bot03._x + 12;

Para não haver confusão! Nosso código no FRAME 2, ficará assim:

if (Graph._xscale == "310") {
    stop();
} else {
    Graph._xscale = Graph._xscale + 30;
    Mask._xscale = Mask._xscale + 30;
    Bot._xscale = Bot._xscale + 30;
    _root.Bot02._x = _root.Bot02._x + 12;
    _root.Bot03._x = _root.Bot03._x + 12;
}

Obs.: Isto supondo que você está trabalhando com 3 BOTÕES, assim como no exemplo, caso contrário, você deve acrescentar este código conforme o número de botões você criou. E lógico, os outros Botões devem seguir a mesma nomenclatura, se o nosso primeiro botão chama Bot01, o segundo irá chamar Bot02, e assim por diante!

No FRAME 4, você deve acrescentar o mesmo código, mas alterando o sinal + para -! Ficaria assim:

if (Graph._xscale == "100") {
    stop();
} else {
    Graph._xscale = Graph._xscale - 30;
    Mask._xscale = Mask._xscale - 30;
    Bot._xscale = Bot._xscale - 30;
    _root.Bot02._x = _root.Bot02._x - 12;
    _root.Bot03._x = _root.Bot03._x - 12;
}


Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
0 comentário