Búfalo Informática - Criando um Menu Lateral em Flash

O Flash nos permite criar menus interativos e diferentes, que servem para incrementar nosso site e ao mesmo tempo dar um toque exclusivo ao mesmo.

No tutorial de hoje iremos aprender a construir uma barra de menu lateral no Flash.
Para isso trabalharemos com símbolos tipo Button e Movie Clips, além de Actions Script.
Antes de iniciarmos o tutorial, vamos primeiro entender esses conceitos:

Os Símbolos são recursos existentes no Flash que nos permitem executar ações específica a cada tipo de símbolo, e que reduzem consideravelmente o tamanho da nosso animação, por ficarem armazenados em uma espécie de biblioteca (Library), a qual podemos recorrer sempre que quisermos utilizar novamente os mesmos.

São três os tipos de símbolos criados no Flash:

Símbolo tipo Button (Botões) - normalmente utilizados para menus ou na criação de objetos de controle (parar, abrir, fechar, iniciar, etc).
Possuem Quatro Estados:

Up - Estado inicial
Over - Estado ao passar com o mouse sobre ele
Down - estado do botão ao ser clicado
Hit - define a área sensível ao passar(clique) do mouse

Símbolo tipo Graphic (gráfico) - podem ser utilizados para transição de cores (opaco - transparência - opaco), aumento de brilho, mudança de cor (cor padrão - cor sólida), etc.

Símbolo tipo Movie Clip - um dos mais interessantes símbolos do Flash, através dele podemos fazer uma maior interação (utilizando Action Sript), criando diversas animações em um único frame - animações que podem ser controladas e personalizadas pelo usuário.

Não importa o tipo de símbolo desejado, o processo inicial de criação é sempre o mesmo: faz-se o desenho, seleciona e apertando F8 abriremos a janela de Símbolos do Flash (ou usando Insert - na Barra de Menu - Convert to Symbol). O que irá variar será as propriedades de cada símbolo e o modo de edição de cada um deles.

Actions Scripts:

Actions são programações que podem ser extremament simples (play, stop, go to), mas também extremamente complexas. É o uso correto delas que permitem uma integração usuário - site perfeita.
Existem Actions comuns a quase todos os objetos e actions exclusivas de apenas alguns.

Iniciando o Tutorial:

Entendido o conceito, passamos agora a próxima fase, que é a elaboração do nosso menu lateral.

O primeiro passo é definir o tamanho do stage - configurar o nosso palco. Como animações feitas em flash podem ficar em um tamanho desagradável em uma página Web, gosto de criar animações pequenas para aumentá-las depois em um editor HTML (no caso, Dreamweaver).

Mas, não causa distorções?

Se utilizar figuras bitmap (JPG, Gifs), com certeza, mas nesse tutorial, tudo será criado no próprio Flash, tratando-se portanto de figuras vetorias, as quais não sofrem uma distorção tão forte ao serem redimensiondas, que causem prejuízo no resultado final.

Por isso, configure o stage para o tamanho 50(W) de largura por 46(H) de altura. Vai ficar minúsculo, impossível de trabalhar. Portanto aumente o zoom até uma visualização que seja satisfatória.

Nós iniciaremos o Menu, criando uma nova layer e no Frame 1 da mesma, desenharemos um retângulo normal de 1.3 de largura e 46 de altura.
Retire o contorno do retângulo e coloque-o com as seguintes cores: Modifique a cor a seu gosto - no caso usarei um Fill tipo Linear - cor1:#996600, cor2:#ffffff e cor3:#996600.

Na Layer 1 - vamos desenhar o botão que será nosso menu:

1) Desenhe um retângulo com bordas arredondadas em 5 corner, com 5.6 de largura (W) e 21.2 de altura (H);
2) Corte-o um pouco antes do meio (sentido Vertical)
Ex:

1) Apague a metade menor do retângulo e redimensione-o para: 3.1 de largura e 11.7 de altura.
2) Modifique a cor a seu gosto - no caso usarei um Fill tipo Linear - cor1:#996600, cor2:#ffffff e cor3:#996600

3) Para criarmos um efeito de sombreado, agrupe o retângulo;
4) Duplique-o e coloque o duplicado na parte de trás do colorido;
5) Edite o duplicado clicando 2X sobre ele e mude a cor para Preto.

Resultado Final:

Observação: Se não quiser fazer com essas cores, nem com o sombreado, esteja à vontade.

Digite o texto Principal, formate com cor=#633000 e tamanho de fonte 3 (mesmo não existindo esse tamanho, basta digitar o tamanho desejado na caixa de tamanho da paleta Caracteres), gire o texto em 90º no sentido Horário.

Posicione-o sobre o botão criado e se for necessário redimensioná-lo, faça isso, até que caiba no botão.

Transformando o botão em símbolo:

A parte do criação de objetos está praticamente encerrada, agora nós iremos para a próxima etapa que é transformar o botão criado em um símbolo tipo button.
Para isso, selecione o botão criado e aperte F8 ou Insert - Convert to Symbol.
Selecione a opção Button, dê o nome de principal para ele e clique em Ok.
Vamos agora editar os estados do botão, clicando 2X sobre ele.

Crie um Keyframe em cada um dos estados (F6)
Up = deixe do jeito que está;
Over= desagrupe tudo e mude a cor do botão para marrom escuro e do texto para branco;
Down = modifique a cor se quiser - esse estado representa o momento do click do mouse;
Hit = agrupe os objetos novamente.

Editado o Botão, vamos agora abrir a janela Library.

Observe que o símbolo criado já está armazenado dentro de Library.
Não iremos fazer mais nenhum botão, mas simplesmente duplicar o existente e modificar o texto.

Para duplicar o símbolo, você pode clicar sobre ele com o botão direito do mouse:

Duplique o arquivo 3 X e dê os seguintes nomes: Produtos, Promoções, Fale Conosco.

Uma ação é um determinado comportamento que o nosso objeto vai executar ao ser acionado através do clique do mouse.
No caso, nossa ação principal é fazer com que o botão sirva como link entre uma página e outra, ou se trabalhar o site somente em Flash, entre um frame / animação e outra.

Se for apenas isso, ao clicar no botão principal, quero ir para a página index.htm, devo criar uma ação específica para isso. Selecionando o botão e abrindo o painel Action (clique com o botão direito do mouse, sobre o botão).

Clique em Basic Action e procure Get URL, clique 2X sobre ela.

O que acabamos de fazer, foi definir a Ação Get URL para o botão criado, falta agora complementar a ação com as configurações corretas.

Na primeira linha, na caixa do lado direito, temos o comportamento do mouse, que normalmente já está configurado para (release) - ao clicar e soltar, se clicarmos sobre essa linha, aparecerão outras possibilidades de comportamento: press (pressionar), Roll Over (rolar sobre), Roll Out (rolar for a) etc.
Na linha debaixo: getURL (""), devemos completar a sequência da ação, digitando nos campos de texto na parte inferior da janela a:

URL - endereço do site (não marque a caixa Expression);
Window - target (destino) da janela a ser aberta - clicando na seta aparecerão as propriedades padrões: blanck, self, top, parent. Mas, podemos também digitar o nome do frame, (caso tenhamos definido um anteriormente, durante a criação de nossa janela de frame). Também não é para marcar a caixa Expression.

Por último, mantenha Variables como Don't Send (não enviar), pois essa opção somente é utilizada em caso de trabalharmos com dados armazenáveis.

No inicio desse tutorial, falei que preferia trabalhar minhas animações pequenas e aumentá-las no Editor de Html. Na verdade, o único editor que me permite fazer isso, sem prejudicar o resultado final de minha animação, e o Dreameweaver, por já ter embutido entre seus recursos, uma perfeita interação com animações feitas em flash.

Por tanto, após publicar minha animação, no caso,meu menu lateral, vou agora adequá-lo ao meu site, utilizando para isso do Dreamweaver.

1) Abra a página aonde você deseja colocar o menu, um bom exemplo, é fazer uma página com um frame esquerdo e direito, e colocar o menu em um dos dois, lembrando de deixar a página com o menu lateral estática, isto é, o usuário pode navegar a vontade no site, mas estará sempre com condições de voltar a onde estava.
2) No Dreamweaver, na caixa Object, clique no botão Insert Flash, selecione o menu lateral criado anteriormente (não esqueça, a extensão deve ser .swf) e clique em Ok.
3) Redimensione a animação; posicione-a no lugar desejado.
4) Na paleta Properties, nos devemos definir:
a. A qualidade da animação (high, low, auto low e auto high)
b. A escala dessa animação (Default, no border ou Exact Fix) - para aumentarmos sem distorcer nosso menu, devemos marcar a opção Exact Fix, que aumenta proporcionalmente todos os elementos da nossa animação.

Na próxima semana, continuarei esse tutorial, acrescentando outras ações ao clicar do mouse em nosso menu.