Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Olá a todos!

Um preloader é um recurso praticamente obrigatório em animações, jogos ou aplicativos desenvolvidos em Flash que serão executados na Web. Através do mesmo, apresentamos ao usuário um tempo estimado para o download (o carregamento) de um arquivo .swf (o filme Flash) no navegador. Desta forma, usuários saberão quando uma animação estará pronta para ser visualizada, por exemplo.

Para ajudar os desenvolvedores Flash de plantão, preparei um Flash Document (.fla, isto é, o arquivo fonte do Flash) que possui um preloader pronto para uso!

O arquivo .fla possui duas cenas. A primeira cena contém o preloader em si, que consiste em um texto dinâmico que mostra a porcentagem de carregamento do filme, além de uma barra de progressão. Na segunda cena, o desenvolvedor poderá criar seu trabalho. Para visualisar e acessar as cenas do arquivo .fla, basta acessar o painel “Cenas”, pressionando as teclas Shift + F2. Uma tela com o preloader em ação é mostrada na imagem abaixo.

Para baixar este exemplo, CLIQUE AQUI. Lembrando que utilizei o Flash CS3 para preparar este Flash Document. Utilize esta versão os versões posteriores do Flash para acessar o exemplo deste post!

Espero que seja útil!

Até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

O site Flash Kit fornece gratuitamente arquivos fonte (.fla) de diversos projetos desenvolvidos em Flash. São várias categorias de “movies”: 3D, animações, aplicações, básico, componentes, efeitos, games, interfaces, scripting, pequenos clipes, sons, utilidades, entre outros.

Examinar como cada projeto foi desenvolvido ajudará no seu aprendizado em Flash! Boa parte do que eu aprendi foi “fuçando” códigos-fonte e animações já prontas, e grande parte do material que utilizei nos estudos veio deste site.

Você também poderá evoluir projetos já existentes, adaptando-os para suas necessidades. Desta forma, reaproveita-se código e elementos de filme, acelerando o processo de produção.

Fica a dica para quem é curioso e autodidata!

Até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

No post de hoje, apresentarei como detectar colisões entre Movie Clips no Flash 8. Tal recurso é importantíssimo, por exemplo, no desenvolvimento de jogos. A animação abaixo demonstra um exemplo de colisão, onde dois “smiles” se chocam. Quando a colisão ocorre, um fica vermelho de raiva e o outro fica roxo após a pancada (comentário infame… relevem…)! Para colidir os smiles, clique sobre a animação e pressione a tecla direcional -> do teclado para mover o smile esquerdo em direção do direito.

Let’s go! Crie um novo documento flash. Desenhe ou importe algo para a área de desenho e o converta para Movie Clip (selecione o objeto, pressione F8 e escolha a opção Movie Clip). Copie e cole o Movie Clip para a área de desenho (mesmo layer, mesmo frame). Procure deixá-los distantes um do outro, alinhados. Selecione o Movie Clip da esquerda, pressione Ctrl + F3 e, na aba Properties (propriedades), nomeie o Movie Clip para smile1 (em instance name). Faça o mesmo com o Movie Clip da direita, nomeando-o para smile2.

Agora vem a inteligência da “parada”. Copie o código abaixo e cole nas ações de um dos Movie Clips (selecione um Movie Clip, pressione F9 e cole o código abaixo na aba Actions, ou ações):

onClipEvent(enterFrame)
{
if (_root.smile1.hitTest(_root.smile2)) {
var cor1:Color = new Color(_root.smile1);
cor1.setRGB(0xFF0000);
var cor2:Color = new Color(_root.smile2);
cor2.setRGB(0x330033);
}

if(Key.isDown(Key.RIGHT))
{
this._x = this._x + 10;
}
}

Explicarei o código: Como o código acima é aplicado em um Movie Clip, precisamos programar o action script no corpo da trigger onClipEvent. O parâmetro enterFrame da trigger indica que o evento ocorrerá logo quando o primeiro frame do MovieClip for ativado.

O segredo para detectarmos uma colisão entre Movie Clips no Flash está no uso da função hitTest(), localizado na terceira linha. Podemos interpretar a mesma da seguinte maneira: Se (if) o Movie Clip smile1, localizado na área de desenho (_root.smile1) colidir (hitTest) com o Movie Clip smile2, também localizado na área de desenho (_root.smile2) então ({)…

Então ambos deverão mudar de cor. Poderemos fazer isso através da função setRGB(valor de cor em hexadecimal). Tal função só é aplicada em variáveis do tipo cor. Logo, declaramos a variável do tipo Color cor1 (var cor1: Color) e indicamos que a mesma apontará para a cor do Movie Clip smile1, localizado na área de desenho (= new Color(_root.smile1)). Faremos o mesmo para a variável cor2, que apontará para a cor do Movie Clip smile2. Após a declaração das variáveis de cores, poderemos manipular as cores dos Movie Clips a partir delas, graças a função setRGB (cor1.setRGB(0xFF0000) muda a cor do Movie Clip smile1 para vermelho, e cor2.setRGB(0×330033) muda a cor do Movie Clip smile2 para roxo).

O segundo if faz com que o Movie Clip que contenha o script ande para a esquerda quando o usuário pressionar a tecla direcional ->. Maiores detalhes sobre a movimentação de Movie Clips a partir do teclado foram demonstrados no post Flash - Controlando Movie Clips através do teclado. Visite o referido post para maiores detalhes!

Pronto! Teste sua animação pressionando Ctrl + Enter. Poste suas dúvidas nos comentários e/ou CLIQUE AQUI para baixar o arquivo .fla deste exemplo. E divirta-se!

Até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

No mini-tutorial de hoje apresentarei como aplicar o efeito de máscaras no Flash. O resultado do uso deste efeito pode ser visualizado na animação abaixo.

A máscara é simplesmente uma área delimitadora que define o que realmente será apresentado na apresentação. Tudo que a máscara sobrescreve será visualizado. Tudo que estiver fora do perímetro da máscara será ocultado.

Tal técnica já foi apresentada em um post anterior, que descreve como criar efeitos de assinatura no Flash.

Vamos começar (lembrando que estou utilizando o Flash 8 para descrever o processo de criação)! Crie um novo documento Flash. Neste documento, crie dois layers (novos layers podem ser gerados a partir da opção de menu Insert >> Timeline >> layer). O layer superior conterá frames que utilizaremos para desenhar a máscara, e o inferior conterá algo que será exibido de acordo com o movimento da máscara. Clique com o botão esquerdo do mouse sobre a área de animação e siga até a aba Properties (Ctrl + F3), vá até a lista de cores para o background da animação e defina uma cor para o fundo (no exemplo, utilizo azul marinho).

Selecione o primeiro frame do layer inferior e, na área de desenho, digite a frase “Teste de máscaras no Flash” através da ferramenta Text (pressionando T). Defina a cor da fonte como branca, tipo arial, tamanho 39, negrito (selecione o texto e pressione Ctrl + F3 para definir tais propriedades na aba Properties). Procure deixar a frase no centro da área de desenho.

Clique com o botão esquerdo do mouse sobre o primeiro frame do layer superior e desenhe a máscara que será utilizada na animação. No nosso exemplo, desenharemos um pequeno circulo branco (Ferramenta Oval… pressione O). Selecione o círculo recém-criado, pressione F8 e o converta em gráfico (Graphic). Procure posicionar o gráfico por cima do início a frase digitada anteriormente.

Agora clique com o botão direito do mouse sobre o nome do layer superior e selecione a opção “Mask”. Você notará que o layer inferior ficará “submisso” ao superior, com o título deste layer ficando mais a direita (os ícones dos layers ficarão azuis). Já será possível observar o efeito de máscara em ação na área de desenho.

Provavelmente os dois layers ficarão bloqueados após esta etapa (será apresentado um ícone com cadeados nas duas layers). Portanto, clique sobre os cadeados para desbloqueá-los novamente.

Você também poderá verificar uma prévia do efeito da máscara pressionando as teclas Ctrl + Enter. Só será apresentado parte do texto “coberto” pelo círculo. Mas ainda tudo está muito estático… Vamos animar um pouco!

Segure a tecla Shift e clique com o botão esquerdo do mouse sobre o primeiro frame de cada layer, para selecioná-los. Pressione a tecla F5 até que a animação tenha 60 frames. Selecione o frame 30 do layer superior e pressione F6 para definir o ponto central de animação e, logo em seguida, selecione o último frame do layer superior e pressione F6 para definir o ponto final. Selecione novamente o frame 30 e, na área de animação, arraste o círculo até fim da frase. Clique com o botão direito do mouse sobre o primeiro frame do layer superior e selecione a opção “Create Motion Tween” (criar interpolação de movimento). Clique agora com o botão direito sobre o frame 30 e aplique novamente a interpolação.

Teste sua animação pressionando novamente as teclas Ctrl + Enter! A tendência é sua animação ficar parecida com a animação apresentada neste post. Caso você tenha alguma dificuldade em seguir o passo a passo, CLIQUE AQUI, baixe o arquivo .fla do exemplo e tente acompanhar o tutorial utilizando o mesmo.

Espero que este mini-tutorial tenha sido útil!

Até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Olá a todos!

Em mais um mini-tutorial de Flash, apresento-lhes como adicionar guias de movimento (Motion Guides) no Flash. Utilizarei a versão 8 para produzir este post, mas presumo que tal técnica também poderá ser aplicada em outras versões.

Através dos Motion Guides, em adição com a técnica de interpolação de movimento, poderemos direcionar nossas animações de acordo com guias definidos por linhas, círculos, etc. O vídeo abaixo demonstra como aplicar esta técnica (decidi criar um vídeo desta vez).

Este vídeo poderá ser visualizado em HD. Assista o mesmo em full screen, para facilitar a visualização.

Para iniciar, deveremos clicar com o botão direito do mouse sobre o layer de trabalho e selecionar a opção de menu “Add Motion Guide”. Será adicionado um novo layer para a animação, onde os frames ligados a ele conterão o guia de animação. O layer inicial ficará “submisso” ao layer adicionado, e seus frames conterão o objeto que se movimentará pela guia de animação.

No layer superior, desenharemos a guia de animação (confira o vídeo acima). Procure não desenhar caminhos com curvas muito “bruscas”, para que a animação funcione corretamente. Já no layer inferior, desenhe ou insira algo de sua preferência e converta-o em gráfico (Pressionando a tecla F8 e selecionando a opção de gráfico).

Defina a duração da sua animação (como apresentado no vídeo) e defina o ponto final da mesma pressionando F6 no último frame do layer que contém o objeto animado. No primeiro frame deste layer, posicione o gráfico no início da guia. No último frame deste layer, posicione o gráfico no fim da guia (procure “seguir” a guia enquanto arrasta o objeto, só para garantir o movimento). Clique com o botão direito do mouse sobre o primeiro frame do mesmo layer e selecione a opção de menu “Create Motion Tween”, para ser adicionada uma interpolação de movimento na sua animação.

Teste sua animação, através das teclas Ctrl + Enter, e divirta-se! Não conseguiu executar este mini-tutorial? Comente suas dúvidas!

Até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Olá a todos!

No post de hoje, demonstrarei como controlar Movie Clips através das teclas direcionais do teclado. Tal técnica é útil, por exemplo, na criação de jogos.

Abaixo é apresentada uma animação que aplica esta técnica. O Movie Clip (esse boneco tosco que eu fiz “nas carrera”, hahahahaha) pode ser controlado para baixo, para cima, para a esquerda e para a direita. Para testar, clique sobre a animação e pressione as teclas direcionais do seu teclado.

Utilizei o Flash 8 para produzir este post…

Let’s go! Primeiramente deverás criar um Movie Clip que irá se movimentar. Poderá ser um objeto qualquer, um boneco (de preferência mais produzido do que eu fiz :P), etc. Irei considerar que o leitor já conheça os procedimentos para a criação de Movie Clips. Caso contrário, faça uma solicitação de maiores esclarecimento nos comentários do post, beleza?!

Continuando… Com o Movie Clip já criado, selecione-o e acesse a aba de Ações (Actions), normalmente localizada abaixo da área de desenho (a mesma poderá ser acessada no Flash 8 através da tecla F9). Insira o seguinte código nesta aba:

onClipEvent(enterFrame)
{
  if(Key.isDown(Key.LEFT))
  {
    this._x = this._x - 2.6;
  }
  if(Key.isDown(Key.RIGHT))
  {
    this._x = this._x + 2.6;
  }
  if(Key.isDown(Key.UP))
  {
    this._y = this._y - 2.6;
  }
  if(Key.isDown(Key.DOWN))
  {
    this._y = this._y + 2.6;
  }
}

Pressione as teclas Ctrl + Enter para testar a animação e movimentar seu Movie Clip.

O que tem de mais neste código? O procedimento OnClipEvent(enterFrame) prevê uma ação a ser executada em um Movie Clip, logo quando o primeiro frame do mesmo Movie Clip for apresentado na animação.

O visitante observará 4 blocos com “ifs” para cada tecla direcional: Key.LEFT, Key.RIGHT, Key.UP e Key.DOWN. Explicando um bloco, ficará fácil entender os demais. Por exemplo, no primeiro “if” da série, temos

if(Key.isDown(Key.LEFT)) {

que significa “Se (if) a tecla pressionada (isDown) foi a tecla direcional esquerda (Key.LEFT) então faça ({)”. Fácil, né? Os demais “ifs” tem o mesmo significado, aplicado para as demais teclas. E o que ele irá fazer quando isso acontecer? Irá para a esquerda, horas?! Mas como indicar isso no Flash? Através dos códigos Action Script de posicionamento

this._x e this._y

que identificam a posição do objeto na área de trabalho. São utilizados os parâmetros X e Y porque o Flash trata a área de desenho como um produto cartesiano (x,y) virado para baixo (os valores negativos de Y ficam para cima, inverso ao que estamos acostumados a estudar nas aulas de matemática). Dentro de cada bloco com “if”, encontramos uma função como esta

this._x = this._x - 2.6;

que, neste caso, significa “A nova posição X (_x) do Movie Clip em questão (this) será igual a posição corrente do mesmo (this._x) menos 2.6″. A mesma idéia valerá para os demais blocos, mudando a posição (X ou Y) ou o cálculo (+ ou -). Para que o movimento seja mais espaçado, basta inserir um número maior que 2.6. Para que o movimento seja mais curto, basta inserir um número menor que 2.6. Simples!

Ainda ficou complicado? Então CLIQUE AQUI e baixe o arquivo fonte (.fla) da animação acima! Vasculhe o código e observe como o mesmo foi produzido!

Até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Olá a todos!

Hoje demonstrarei como criar cursores personalizados para suas animações em Flash. Utilizarei o Flash 8 para descrever os passos de criação, mas presumo que tais passos também possam ser seguidos utilizando-se versões anteriores e posteriores a esta.

Tal técnica é útil, não apenas para aumentar a interatividade das suas animações, como até para criar jogos do tipo “tiro ao alvo”, por exemplo.

Para início de conversa, inicie um novo documento flash. Desenhe algo que servirá de cursor, e o converta em Movie Clip (no Flash 8, selecionamos o objeto, pressionamos F8 e escolhemos a opção “Movie Clip”). Clique sobre o Movie Clip gerado para selecioná-lo, e siga para a aba de propriedades, localizada abaixo da área de desenho, ou pressione os botões Ctrl + F3. Em “instance name”, batize o Movie Clip com o nome “cursor”.

Após esta etapa, clique sobre o frame em que seu cursor está inserido e siga até a aba de ações, ou pressione F9. Nesta aba, copie e cole o seguinte código:

Mouse.hide();
cursor.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
updateAfterEvent();
};

Pressione Ctrl + F9 e teste sua animação. Provavelmente ele funcionará corretamente!

Vamos para a explicação do action script. A primeira linha (Mouse.hide();) oculta o cursor original, para que apenas o cursor criado seja exibido. A segunda linha (cursor.onMouseMove = function() {) inicia a função de controle que prevê uma ação enquanto o mouse estiver em movimento, para o Movie Clip “cursor” (por isso a importância de dar um nome ao objeto). A terceira e quarta linha (this._x = _xmouse; this._y = _ymouse;) atualizam a posição do Movie Clip, setando sua posição para que seja a mesma da posição do cursor do mouse. A quinta linha (updateAfterEvent();) atualiza a execução dos parâmetros definidos nesta função. A última linha fecha a implementação da função.

Qualquer dúvida, escreva um comentário! Tentarei responder o mais rápido possível…

E até a próxima!

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

Olá a todos!

Hoje, apresentarei como criar o efeito de assinatura no Flash 8. A técnica também é válida para versões anteriores e posteriores a esta que utilizarei na produção deste post. Tal efeito pode ser conferido no site da arquiteta paraibana Márcia Barreiros, cliente da ATYS Tecnologia. Tal efeito utiliza o recurso de máscaras para gerar a animação.

Primeiramente, crie um novo documento flash em “File >> New”. Defina as dimensões e cor de fundo de sua preferência na animação, na aba “Properties” (Ctrl+F3). Em “Frame Rate”, defina 30 frames por segundo (ou um valor superior, para uma animação mais rápida).

Como o flash cria por default o Layer 1 para o início dos trabalhos de animação, o utilizaremos para inserir o texto que será “assinado” na tela, no primeiro frame. No nosso exemplo, assinaremos a letra T. Para que a animação fique caracterizada como uma assinatura, é interessante a utilização de uma fonte “manuscrita” (existem várias na net. Pesquisem no Google!).

Após esta etapa, crie um novo Layer. O layer recentemente criado será usado para aplicar a máscara no texto. Portanto, o mesmo deverá estar acima do Layer que contém o texto a ser assinado (caso não esteja, clique, segure e arraste o novo Layer para cima do Layer 1). Logo em seguida, clique com o botão direito do mouse sobre o Layer superior e selecione a opção “Mask” (Máscara). Será visível uma alteração em ícones nos 2 Layers, além da alteração de nível do Layer que contém o texto (o Layer 1 se tornará um “sub-layer” do Layer 2).

Não sei bem ao certo, mas boa parte das versões do Flash bloqueia os Layers envolvidos na aplicação de máscara. Para continuarmos a animação, desbloqueie o Layer superior, isto é, o Layer que servirá de base para a produção da máscara, clicando sobre o ícone de cadeado, apresentado ao lado do rótulo do Layer (a figura acima apresenta o referido cadeado).

Agora poderemos iniciar o processo de criação da máscara. Selecione a ferramenta “Brush Tool” (pincel) (b), escolha a opção de pincel redondo, com o tamanho da circunferência suficiente para cobrir totalmente uma parte do texto. Selecione o primeiro Frame do Layer superior e pinte uma parte de uma letra, isto é, o ponto inicial de escrita da assinatura. A cor do pincel não importa já que, por ser uma máscara, a área pintada pelo pincel não será visível na animação. Trabalhado os primeiros frames de cada Layer da animação, selecione o primeiro frame do Layer superior e pressione F5 (para copiar o frame selecionado para o frame em seguida) e F6 logo em seguida (para criar um novo keyframe). No Layer inferior, pressione F5 para copiar o texto para o próximo frame (não é necessário o pressionamento de F6 neste Layer, pois não iremos alterar o texto durante a animação). No novo keyframe gerado, no Layer superior, pinte outra parte do texto (próximo a outra bola pintada anteriormente) e assim sucessivamente (pressionando novamente F5 e F6 no último frame trabalhado no Layer superior e F5 no inferior), até todo o texto estiver coberto por bolas.

Quando todo o texto estiver coberto, pressione Ctrl + Enter para testar o efeito. O efeito é realizado pois aplicamos máscaras no texto. Tudo o que a máscara cobre é o que realmente será exibido na animação. Aí está o “macete”!

Como podemos observar, trata-se de uma animação Frame a Frame, e a duração da mesma irá depender do tamanho do texto.

Para facilitar o aprendizado, CLIQUE AQUI para baixar o fonte deste tutorial.

Até a próxima!