Vestir a uma boneca em Flash

Pequena aplicação concreta em flash para realizar uma boneca de recortes.

Por Susana Ríos Suanes


Publicado em: 04/11/08
Valorize este artigo:
A idéia e as imagens foram tiradas daqui:

www.teacuerdas.com

E foi usada na seguinte mostra que quero que vejam para que tenham uma idéia clara do que pretendemos fazer.

Uma lojinha que se chama "Sol"

Nesta loja há em FLASH um provador de roupa que é que faremos aqui.

O resto é PHP e um banco de dados MySql.

Comecemos em forma ordenada:

1) Ter uma idéia clara do que queremos fazer. Neste caso o melhor é entrar à lojinha "Sol" e brincar um pouco em vestir e trocar as distintas roupas e botas à boneca. Verão que a ação sempre está nos botões que são as roupinhas da vitrine. Na vitrine, clique sobre a roupinha para vestir e o mesmo clique para tirar. Resumindo o funcionamento da aplicação, com exemplos:

  • Ao abrir, a boneca só em malha e as roupinhas (botões) na vitrine.
  • Clique no botão (conjunto amarelo), e vestimos com o conjunto amarelo.
  • Clique no botão (agasalho), e agregamos agasalho à boneca.
  • Clique no botão (conjunto amarelo), a boneca fica só com o agasalho.

2) Criar em nosso computador uma nova pasta que podemos chamar provador.

3) Conseguir as imagens necessárias. Como nosso propósito é Flash e não o domínio do tratamento de imagens, elas já estão prontas. Porém, qualquer coisa que quiserem perguntar a este respeito, responderei por e-mail com muito prazer. Na página http://www.delphi.todouy.com/flash/probador/imagenes.html encontrarão todas as que necessitam.

Com o botão direito do mouse, clique sobre cada imagem e "Salvar imagem como.."

Salve na Pasta que criou o fundo .png e os nove futuros botõezinhos b1.png, b2.png,...b9.png...

E os nove futuros clips c1.png, c2.png,.... c3.png . Se alterar a extensão .png por .bmp ou .jpg as imagens sairão com o fundo celeste e não transparente como necessitamos.

4) Abrimos o Flash e criamos a aplicação: Arquivo->, Novo->, Documento de Flash.

Nossa aplicação terá um só frame(fotograma) e duas camadas na linha do tempo.

Até agora, temos somente uma camada que nomearemos fundo.

Importamos a imagem do fundo desde a mesma Pasta.

Arquivo-> Importar-> Importar a biblioteca. E já teremos a imagem na biblioteca.

Se a biblioteca estiver fechada, a abrimos com Control L e trazemos o fundo.png à cena.

Em propriedades vemos que as dimensões dessa imagem são 402 x 500. Se a imagem for fazer parte de outra página como no caso da "lojinha Sol" o cenário deve ser dimensionado 402 x 500 tal como o fundo.

E ajustadas as posições do fundo.png no painel Propriedades à zero tanto "x" como "y".


Salvamos o fla que também podemos chamar provador.fla e se pode provar com Control Enter .

5) Colocamos o cadeado na primeira camada e criamos a segunda onde vai tudo que falta.

6) Importar à biblioteca o resto das imagens (todos os botõezinhos e clips), que por enquanto ainda nem são botões, nem clips, e sim imagens "mapa de bits".

7) Primeiro, vamos provar com b1 e c1. Arrastamos a b1 desde a biblioteca ao cenário e o transformamos em botão com o nome botao1. E trazemos a c1 e o transformamos em clip de filme com o nome clip1. Localizamos a botao1 na vitrine e a clip1 no lugar exato para que fique bem à bonequinha.

Importante: Em um papel, deve ir anotando a localização exata de cada clip. No meu caso:
   clip1, x 238, y 160

8) As ações correspondentes:

Clip1, vai estar aí, porém não queremos que se veja. Para isto escrevemos a ação no frame 1, (o único frame que teremos na linha do tempo).

   setProperty("clip1", _visible, false);

No botao1 escrevemos a ação para vestir e tirar essa blusinha azul que é clip1.

on(press){
if(clip1._visible==false){
   setProperty("clip1", _visible, true);
   }else{
   setProperty("clip1", _visible, false);
   }
}


O frame nomeia a clip1, e botao1 nomeia a clip1, em suas ações, que não funcionarão se se esquecer de selecionar clip1, para no Panel de Propriedades escrever seu nome em Nome de Instância.

9) Agora salve e prove, e se tudo funcionou como esperamos, repita a ação para cada um dos artigos da vitrine. Levará pouco tempo usando Edit, Copiar e Colar, ajustando correções para cada caso. Claro que para saber o lugar exato aonde vai cada peça, terá que tirar a anterior. Afinal terá que colocá-las todas empilhadas e por isso dizia que se deve anotar as localizações de cada clip.

10) Para que não se esqueça de nada, comece com os botões. Transforme a b1.png no botao1, localize na vitrine e escreva a ação.

Agora há que transformar a b2.png no clip botao2 e localizá-los na vitrine. Copie a ação de botao1 e cole como ação de botao2. Depois corrija mudando no que colou, "clip1" por "clip2".
Fazendo assim até que tenha os nove botões, localizados na vitrine e com a ação referida ao clique com seu mesmo número.

11)Os botões estão prontos e na vitrine. Continue com os clips que vestirão a boneca.
De cada c1.png, c2.png, etc. crie um clip de filme com os nomes clip1, clip2, etc. e o localize vestindo a boneca para anotar a posição exata nas coordenadas x, y, que correspondem, e o exclua do cenário para que fique na biblioteca e a boneca fique somente com a roupinha de malha para provar o próximo clip e anotar suas coordenadas. Por enquanto isso é tudo!

12) Criar o botão dos clips, cada um segundo a anotação. E atenção: não se esqueça de colocar a cada um, seu nome no painel de propriedades.

Ficará assim:


13) Completar a ação do frame para que torne o botão inteiro invisível:






Comentários do artigo
Foram enviados 4 comentários ao artigo
4 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato