HELEN TRIOLO (444 pts)

IRAPUAN MARTINEZ (45 pts)

RICARDO TAKAHASHI (180 pts)

ALEXANDRE PORTO (1281 pts)

MAURO ROCHA TAVARES (40 pts)

ÉMERSON ROCHA (85 pts)

JONAS GALVEZ (521 pts)

AUTOR DESCONHECIDO (100 pts)

KEN AWAMURA (130 pts)

EDUARDO WALMOTT (226 pts)

MARCOS JOSÉ PINTO (44 pts)

EDUARDO CARREGA (150 pts)
Treinamento PontoFlash de Flash e ActionScript

Vou dar uma sugestão simples e prática em Flash 5 para criar menus dinamicamente.

Problemas com variáveis importadas de um txt.

Para arrastar um objeto ainda é melhor usar DragMovieclip com 'updateAfterEvent()'?

Tenho um site em flash5 e em uma página gostaria de colocar uma senha para entrar?

Como eu faço para alterar nome do .exe na barra de títulos e o ícone também?

Usando o método split para criar uma array de uma string?

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

Como faço para gravar um arquivo .txt a partir do flash e depois exibí-lo?

Como fazer um objeto se movimentar pelo teclado (UP, DOWN, Left e Rigth)?

Como se usa o "linkage/export this symbol"?

Dicas de um designer.

Classe para facilitar o uso dos SharedObjects.

Porque os símbolos de porcentagem (%) de um arquivo txt não aparecem num campo de texto?

Como faço para carregar randomicamente imagens com um botão sem repetilas?
Comunicação Flash-PHp-MySql - Editar banco de dados

Sistema de newsletter utilizando Flash + ASP

Executar funções de JavaScript (Flash+JavaScript).

Novas propriedade de botões no FireworksMX

Objeto XML - xml viewer

Shake - navegador tremendo.

Flash MX 2004 Updater

Objeto array - Arrays X Objetos

Elasticidade com ActionScript.

Sistema de newsletter utilizando Flash + ASP.

Uso da tecla tab num formulário Flash.

LOAD vs XMLConnector, vantagens e diferenças no carregamento do XML
News

Slicemenu 2

Shape tween imagem

Open background

Drag scroll texto

Scroll html

Random block

Drag simples

Menu Tsunami

Formulário

Ir e voltar

Planeta orbita
HOME | TUTORIAIS
Animação no Flash
por Jota Lago

Essa matéria pode ser encontrada na revista "Digital Designer", edição nº 20, mês de junho de 2000.

Desenho desde pequeno e jamais imaginei que minha primeira oportunidade de trabalho com arte, fosse aos trinta e quatro anos e para a Internet. Esse monstro que me assombrou há alguns meses atrás e que arrasta diariamente uma multidão para a rede, abre um espaço democrático jamais visto!

Não sou um técnico em informática, em Internet ou mesmo um conhecedor profundo do software que uso diariamente, o Flash 4. Sou simplesmente mais um desenhista que ficou fascinado com a possibilidade de animar aquela criação estática do papel de uma forma tão absurdamente acessível e rápida em um computador.

O que faz a diferença hoje na grande rede são os desenhos animados. Qualquer estudioso do Flash pode criar coisas muito boas num site, você coloca uma "action" de: go to and play aqui, um Tell target prá lá, dá um load movie de um outro swf, enfim, mil comandos para tornar o site agradável e interessante.

Mas os técnicos normalmente não sabem muito de arte e os artistas precisam ser humildes para aprender os conhecimentos técnicos destes e tornar o trabalho comum,
uma grande obra dentro dos atuais recursos da Internet e configurações em computadores nem sempre ideais para se rodar uma animação.

Hoje quem detém a técnica está a procura do artista, tenha ele treze ou trinta anos de idade. No momento a oportunidade é a mesma, até que os burocratas entrem em ação!

O que demonstrarei a seguir, são os passos básicos que utilizei para essa criação. Cada designer tem uma forma de trabalho e recursos próprios, mas os comandos são comuns a todos dentro do Flash.

O script fala sobre o "Raksha Bandhan", um costume hindu de demonstração de afeto entre irmãos. As configurações utilizadas foram:


Tamanho do stage (quadro branco): 400 x 300 pixels
Quantidade de FPS (frames por segundo): 15

Passo 1 - Criando o Background: Normalmente começo desenhando os personagens, mas neste caso preferi começar pelos objetos e o cenário. Como a animação teria um teor místico, utilizei esse procedimento como um ponto de apoio e inspiração (Figura 1).


figura 1

Os objetos foram feitos com degradê radial e linear para dar um efeito 3D (Figura 1b)


figura 1b

Passo 2 - Criação dos personagens: A seguir criei os personagens tendo como base um site on line com fotos de uma família típica. Verifiquei os tipos de roupas, biotipo das pessoas, enfim, pesquisa mesmo (Figura 2).


figura 2

Ainda com os personagens, criei um movie clip para os olhos, outro para as bocas e outros para as Sobrancelhas de ambos (Figura 2b).


figura 2b

Passo 3 - Animando os personagens:
Primeiro criei um movie clip chamado: "movie cenas" e dentro deste movie quase toda a animação aconteceu. Como os personagens iriam se mover da cintura para cima, criei dois gráficos com braços em posições diferentes para ambos, centralizei os eixos dos mesmos e utilizei vários Tweening motions, incluindo movimentos dos corpos e cabeças (Figura 3).


figura 3

Na figura 3b podemos ver a transição dos movimentos, indicados com a seta amarela.


figura 3b

Passo 4 - Criando layers: A seguir Criei os layers (as famosas camadas) na timeline principal do movie. Uma para o background (cenário de fundo), uma para a luz final da janela da casa, uma para o movie "cenas", uma para a mesa e objetos, uma para o texto final e por último uma, para colocar uma action de "stop" no fim da timeline, para que o movie não ficasse em loop (Figura 4).


figura 4

Para o texto procurei utilizar uma fonte que não destoasse da animação e em seguida transformei-o em símbolo, para poder utilizar um "tweening motion alfado" (Figura 4b).


figura 4

Dicas: Para evitar que um arquivo fique grande demais, tornando-o inviável para a Internet, tome cuidado com as linhas do desenho. Quanto mais curvas, maior o tamanho de cada gráfico criado. Ao exportar o movie ative a opção "Generate size report". Essa opção gera um arquivo txt onde você pode analizar o tamanho de cada gráfico ou movie criado (Figura 5).


figura 5

Verifique o que está grande demais, volte ao FLA (documento principal) e ative o gráfico desejado dentro da library (window > library ou Ctrl+L). Em seguida ative: Modify > curves > optimize. Ali você poderá controlar o quanto irá otimizar. Faça de uma forma que não comprometa os movies criados ou mesmo o seu tipo de traço.
Você ficará surpreso com a economia de Kb em seu trabalho! (Figura 5b).


figura 5b

Outra dica importante: transforme tudo em símbolo. Apenas agrupar desenhos torna maior o arquivo. Uma última dica, e a melhor de todas:

Vasculhe a Internet atrás de animações. Veja o que está sendo feito, compare com o que você faz, analise suas falhas e tente melhorar sempre, com humildade!

Para finalizar gostaria de dizer que, do ponto de vista artístico ou não, o grande trunfo da Internet é a imparcialidade. Você produz e expõe algo que acha interessante e espalha pela rede sem gastos. Quem julga se seu trabalho é bom ou não, são os internautas, na sua grande maioria jovens, totalmente globalizados e principalmente livres de preconceitos, mais preocupados em se informar e principalmente se divertir e menos preocupados em saber se quem desenvolveu determinado trabalho, possui "trinta ou sessenta anos de experiência comprovada em carteira", tendo apenas quinze ou dezesseis anos de idade.

Eles fazem a Internet acontecer através do seu acesso e acompanham freqüentemente aquilo que os atraiu na rede. Portanto vá à luta!



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
2 comentários


Comentário de Carolina
| 9/7/2011 - 20:06 |


Acho que essa página foi traduzida, pois qual o brasileiro que em sua primeira criação faz uma animação justamente de uma celebração hindu??? Acho que isso foi traduzido de um tutorial de algum indiano, kkkkk... É válido pela intenção !



Comentário de Carolina
| 9/7/2011 - 20:06 |


Acho que essa página foi traduzida, pois qual o brasileiro que em sua primeira criação faz uma animação justamente de uma celebração hindu??? Acho que isso foi traduzido de um tutorial de algum indiano, kkkkk... É válido pela intenção !