Vamos abordar um tema que foi muito pedido, que é a timeline do Swift 3D, pra quem não sabe esse é um ótimo Software produzito pela Eletric Rain, quem quiser pode visitar o site no endereço www.swift3d.com , lembrando que ele não é um software gratuito, mas tem as versões trial no site.

O Swift 3D cria animações vetoriais em 3D que podem ser importadas para o Flash MX frame a frame, já temos 2 Tutoriais sobre ele no site e agora vamos falar das suas Timelines.

Antes de tudo vamos desenhar um objeto para que possamos anima-lo, então abram um novo arquivo e na janela “Lathe Editor” vamos desenhar metade de um peão, conforme aprendemos no último tutorial:

Ao voltar para o palco “Scene Editor”, teremos a forma de um peão, como mostra a figura abaixo:

Pronto, agora temos um Objeto para apresentar a timeline do Swift 3D, se quiser pode colorir o peão ou até fazer outro objeto de forma diferente, no meu vou aplicar uma textura de madeira, olhem que legal que fica:

Agora vamos analizar essa timeline passo a passo, antes de animar o objeto, devemos clicar no botão “Animate” encima da timeline, após clicar ele ficará vermelho com o titulo “Animating” e a timeline ficará desbloqueada para animação:

Decima pra baixo temos os seguintes layers na timeline. Position, Pivot, Rotation, Scale, All Surfaces e Path01 (Lathe 01):

01 – Position:

O Layer Position, indica a posição do objeto no palco, portanto ao clicar no objeto dentro do palco, e alterando a posição, automaticamente estaremos animando ele no layer Position.

Clique no peão e arraste-o para o lado esquerdo conforme mostra a figura:

Logo após clique e arraste o retangulo vermelho que marca a posição do frame na timeline e arraste-o para cima do frame 20:

Mova o peão no palco para o lado direito, automaticamente os frames do layer position ficarão preenchidos com a cor verde, indicando que há uma mudança de posição do objeto, portanto uma animação:

Se clicar no botão “Play Animation” do lado esquerdo, já veremos o peão se deslocando da direita pra esquerda:

Podemos mexer nessas posições através do botão “position” no menu lateral esquerdo, vamos clicar com o botão direito do mouse sobre a timeline e clicar em “Delete all keyframes” para deletar todos os frames e retirar a animação anterior, pegue o retangulo vermelho do marcador de frames e retorne pro primeiro frame, em seguida clique no botão position do menu e deixe todas as opções de x, y e z em 0.00:

Arraste o marcador de frames para o frame 20, e alterem agora os valores de x, y e z no menu, os valores em x irá deslocar o peão na posição horizontal, o valor y vai alterar a posição vertical do peão, e a posição z vai alterar a profundidade do peão, fazendo isso voltaremos a ver a linha verde no layer Position e criaremos uma animação alterando a posição do peão por valores no menu.

Na maioria dos casos é bobeira alterar a posição z de um obketo, pois podemos importar o objeto para o Flash, e diminuir ou aumentar o tamanho simulando uma profundida, mas é bastante usado quando trabalhamos com grupos de objetos, por exemplo se inventar de fazer um carro, então teremos que usar todos os fatores x, y e z para encaixar uma roda no lugar certo do carro por exemplo.

01 – Pivot:

Como o próprio nome já diz, essa timeline controla o pivô do objeto, por padrão ele fica bem ao centro do objeto criado, delete os keyframes da animação, retorne ao primeiro frame e clique no botão Positon, la embaixo tem o botão “Move Pivot Only”, clique nele:

Ao clicar nesse botão estaremos permitindo que somente o botão do objeto seje alterado, o Pivô é este aqui:

Se clicar em Lock Vertical e movimentar o Peão na posição vertical, ele pegará como referencia o pivô que está no centro do peão, vejam esse exemplo que montei com duas imagens, somente metade dessa tela é mostrada no swift:

No palco, cliquem no pivô e arraste para baixo do peão:

Agora se voltar ao painel de rotação e repetir o movimento, notará que ele vai começar a girar em torno daquele ponto:

Portanto se arrastar o pivo pra fora do objeto, ele vai girar envolta desse pivô formando uma órbita, para se ter uma noção disso, coloque o pivo nas posições 0.00 em x e y, e na posição -1.00 em z:

Agora usando a rotação do objeto, veremos que ele não vai girar em volta de si, mas sim em volta do pivô:

A idéia de se mudar um pivô no meio da animação é meio maluca, mas dá um resultado até que legal, volte o objeto e o pivo para as posições 0.00 em X, Y e Z, vamos arrastar o controlador da timeline para o frame 20, agora no frame 20 coloque o pivo na parte decima do peão:

No primeiro frame coloque embaixo do peão:

Ao rodar a animação o peão ficará parado, porem da pra ver que o pivô dele sobe no decorrer da animação clicando e arrastando a barra de controle dos frames de um lado pro outro entre os frames 1 e 20.

Agora que entraremos no layer “Rotation”, dará pra ver a diferença que esse pivô faz.

03 – Rotation:

O item Rotation como o nome tambem diz, é a rotação do objeto no palco, aproveitando o trabalho anterior, vamos clicar no frame 20 e “Lock Spin” vamos girar o peão até que ele fique de cabeça para baixo, encima do pivô:

Agora a timeline ficará preenchida com alteração do pivo, rotação e posição:

Ao testar a animação dá pra tomar um susto com o movimento louco que o pivô fez junto com a animação, diminuí um pouco a qualidade da renderização pra não ficar muito pesado o swf, portanto perdeu um pouco a qualidade, mas é só pra mostrar o movimento que você deve chegar:

Agora que ja viu o efeito de um pivô junto com a rotação, vamos deletar os frames e voltar a posição inicial novamente, colocando o pivo e objeto nas posições 0.00 em X, Y e Z.

Clique no objeo no palco, e depois clique em “Lock Spin” e tombe um pouco o peão para o lado direito:

O Peão deverá ficar ligeiramente inclinado pro lado direito no palco:

Arraste o marcador da posição da timeline pro frame 10, agora que estamos no frame 10, vamos usar o “Lock Horizontal” e girar o peão da esquerda pra direita, pegando bem na extremidade da esfera na esquerda, passando para a estremidade da espera do lado esquerdo para que o peão dê um giro de 180 graus.

Posição no frame 1:

Posição no frame 10:

Arraste o marcador de frame pro frame 20 e repita o movimento da esquerda pra direita, pra ele completar 360 graus.

Posição no frame 20:

Ao testar a animação veremos que ela irá fazer uma movimentação bem semelhante a de um peão girando:

Qualquer movimentação feita com o Rotate Selected, será colocado como rotação na timeline.

04 – Scale:

O Scale é o tamanho do objeto, no caso X para a largura, Z para a produndidade, e Y para a altura.

Para altera-lo basta clicar no botão Scale do menu e mudar os valores de X, Y e Z:

Para importar esse efeito no Flash, nem sempre será um bom negócio, já que podemos diminuir seus tamanhos pelo menos em em X e Y com a ferramente Free Transform Tool do Flash, mas vamos testar esse efeito.

Clique com o botão direito do mouse encima da timeline e delete todos os frames, coloque o marcador de frame encima do frame 20, feito isso altere os valores de X e Y no item Scale do botão, notará que o peão ficou mais achatado e mais fino, ou se aumentaram o valor ele ficou maior e mais alto, o valor Z terá no caso quase o mesmo efeito de X já que ele é torneado (tem os 4 lados iguais), então com um peão o efeito Z parecerá o mesmo efeito de X, ao testar a animação verão ele trocando de forma, nessa parte a timeline Scale não tem segredos, é apenas isso que ela faz.

05 – All Surfaces:

O Layer All Surfaces é usado para alterar superfícies do objeto, no caso as cores, vamos deletar novamente a animação, colocar o marcador de timeline sobre o frame 20, na paleta “Show Materials” vamos escolher uma cor e arrastar para o objeto:

Objeto no frame 20 com outra cor:

Como ele serve somente para mudar de cor, então ao testar a animação o peão irá somente mudar de cor:

06 – Path 1(Lathe01):

Essa timeline se refere a timeline do nosso objeto que está no palco, agora que ja deve estar de saco cheio desse peão, vamos mudar a forma dele e transforma-lo em uma maçã, gostou da idéia?

Clique em Lathe Editor:

Aqui foi onde desenhamos nosso peão, então vamos arrastar o marcador de frames para o frame 10, e vamos mudar a forma do peão para metade de uma maçã:

Volte ao Scene Editor e notará que a timeline Path 1, agora está preenchida, se testar a animação verá o peão se transformando em uma maçã, para melhorar no ultimo frame seria melhor jogar uma cor vermelha a maçã para chegar num melhor resultado:

Frame1:

Frame10:

Frame 20:

Agora que já sabem sobre todas timelines do palco, só ficou faltando mais uma, que é a timeline da iluminação que é a mais simples de todas.

Removam os frames animados, sobrando apenas o frame 1 com o famoso Peão, coloquem o marcador de frame novamente sobre o frame 20 e no marcador de iluminação, altere os pontos de luzes:

Imediatamente no palco, notará que o ponto de iluminação mudou de lugar, e o peão estará com um brilho diferente:

Ao testar a animação tambem notará a mudança de luzes no Peão.

Agora que ja sabem como trabalhar com a timeline do Swift 3D, é colocar a imaginação pra funcionar e abusar deste software, espero que tenham aproveitado esse tutorial que muitos usuários do site pediram.

Abraço e até a próxima !!!

Gustavo Henrique Carneirinho

Efeitos interessantes usando Máscaras,

Todos nós sabemos da maravilha que é a máscara no Flash, hoje vamos explorar um pouco a idéia de se usar esse recurso usando movieclips como máscaras.

Para fazer esse tutorial é fácil, precisaremos apenas de 3 imagens com o mesmo tamanho.

Preparando o trabalho:

Começando nosso trabalho, vamos criar um novo arquivo no Flash, com o mesmo tamanho em altura e largura que tiverem as imagens, depois vamos importar as imagens para a Biblioteca (Library), clicando em File / Import / Import to Library.

Começando:

Com as imagens inseridas na Biblioteca, iremos agora criar um movieclip que será nosso primeiro efeito, cliquem em Insert / New Symbol / e na janela vamos dar o nome de animação 1, marcar a opção “movie clip” e clicar em “OK”, então entraremos na timeline do movieclip.

Apertando a tecla F11, abriremos a Biblioteca (Library), e dela vamos clicar e arrastar a primeira imagem para o movieclip e colocar a imagem nas posições 0 em x e 0 em y:

Vamos dar o nome pra esse layer de Imagem 1, e poderemos trancar ele e criar um novo layer com o nome “Mascara”, nele vamos desenhar um retangulo sem bordas que alcance a largura toda da imagem, depois de criado o retangulo, aperte as teclas Shift + F9 para abrir a janela color mixer, escolhe a opção Solid em Fill Color (cor de preenchimento), e deixe a transparencia em 50%:

Vamos selecionar esse retangulo e apertar a tecla F8, vamos salvar ele como movieclip, com o nome de “mascara 1 ” sem aspas.

Agora que nosso retangulo é um movieclip, vamos dar um duplo clique nele para entrar na sua timeline, a barra de navegação deverá estar assim:

Mais uma vez vamos selecionar esse quadrado dentro do movieclip, vamos apertar a tecla F8, e salvar ele como movieclip, com o nome “barra 1″ sem aspas, ele ficaré conforme a imagem abaixo:

Agora vamos criar várias cópias desse retangulo até que ele cubra toda a imagem, muito cuidado para não ficar nenhum espaço entre eles:

Certo:

Errado:

Notem que na figura acima os movieclips dos retangulos não cobriram direito a imagem pois há alguns espaços entre eles, então deixem bem encostados para não dar problemas com a máscara.

Após ter multiplicado os retangulos e cobrir a imagem com eles, vamos selecionar todos eles a apertas as teclas Ctrl + Shift + D, é o mesmo que clicar com o botão direito do mouse sobre eles e clicar em “Distribute to Layers” , fazendo isso o Flash vai distribuir cada retangulo num layer diferente, então agora vamos fazer uma animação simples com esses retangulos, vamos clicar no mais alto e achar o layer correspondente a ele, que deverá ser o primeiro debaixo para cima:

Então a ordem será essa, vamos deixar esse primeiro layer onde está e os decima vamos deixar 2 frames de distância entre um e outro:

Depois de feito isso, vamos apertar a tecla F5 embaixo do ultimo frame criado, vamos repetir essa operação em todos os layer, por ultimo, no layer vazio que sobrará encima, vamos dar o nome dele de “ações” e criar um frame vazio (F7) encima do último frame, e colocar a ação:

stop();

Vejam o resultado de como ficará esse movieclip:

Se apertar a tecla Enter, perceberão que os retangulos começarão a cobrir a imagem decima para baixo, agora vamos voltar para o movieclip animação 1, e vamos criar mais um layer acima do layer nomeado como “mascara”, depois disso clique com o botão direito do mouse no primeiro frame no layer máscara e clique em Copy Frames, logo em seguida clique com o botão direito do mouse sobre o novo layer criado e clique em paste frames, então terá dois layers duplicados no movieclip:

Vamos renomear o Layer criado acima para “Luz” e com o do meio vamos clicar com o botão direito do mouse sobre ele e clicar em Mask:

Agora vamos voltar pra timeline principal, e vamos arrastar o movieclip da biblioteca pro palco, vamos deixa-lo nas posições 0 em x e y:

Vou tirar apenas a ação stop(); no meu arquivo, para mostrar o resultado até agora, mas não tire no seu arquivo, se você testar ele deve ficar assim, só não ficará continuo como o desse exemplo:

Então ele carrega a máscara nessa ordem que é a do movieclip e fica com o branco por cima por causa daquele layer “Luz”, agora vamos finalizar esse efeito, vamos abrir a Biblioteca, clicar sobre o nome do movieclip “Barra 1″ que é aquele retangulo e vamos clicar em Edit, então veremos o triangulo no palco, vamos clicar no frame 5 desse movieclip, e vamos apertar a tecla F6 para fazer uma cópia do frame 1 para o frame 6, agora cliquem no frame 1, e nas propriedades coloque a opção Shape no Tween, assim sua timeline deverá ficar verde como no exemplo:

No primeiro frame vamos selecionar o retangulo e apertar a tecla “Q”, depois mantenha a tecla “Alt” pressionada e vamos deixar o retangulo mais fino, só que alinhado ao centro:

E no ultimo frame vamos abrir a paleta de cores denovo (Color Mixer) e vamos escolher a cor sólida branca, só que ao invés de 50% agora vamos deixar com 0%, totalmente transparente:

Se o retangulo sumir, não se desespere, ele está ali, só que agora está transparente, agora crie um novo layer, e no frame 5 aperte a tecla F7 para criar um frame em branco, e nele coloque a ação:

stop();

Voltem a timeline principal e testem a animação denovo, ela deverá estar assim, só que sem loops é claro:

Agora que viram que deu certo a primeira imagem, podem remover o movieclip da timeline principal, porque depois vamos inserir os 3 de uma vez só, depois de remover, vamos clicar em Insert / New Symbol e vamos criar um novo movieclip com o nome de Animação 2.

Com a Biblioteca aberta, arraste a segunda imagem para o movieclip que está vazio, colocando-a na posição 0 em x e y como fizemos com a imagem anterior, feito isso tranque esse layer da imagem e crie um novo layer com o nome “Macara”.Nesse layer desenhe um quadrado branco com 50% de transparencia, como no movieclip anterior, e tambem coloque-o na posição 0 em x e y:

Selecione esse quadrado, e apertando a tecla F8, vamos transforma-lo em um movieclip com o nome Mascara 2, agora clique duas vezes sobre o quadrado para entrar na timeline do movieclip Mascara 2, e nele vamos selecionar o quadrado denovo e vamos apertar novamente a tecla F8 e salvar ele como movieclip com o nome quadrado 1, e como o retangulo vamos multiplicar ele na imagem toda até cobrir a imagem:

Com todos os movieclips selecionados no palco, vamos clicar em Modify / Timeline / Distribute to Layers (Ctrl + Shift + D) assim ficará cada movieclip num layer diferente.

Vamos “embaralhar” os layers, alterando eles bastante de posições, para que a sequencia dos quadrados que forem aparecer fiquem trocadas, ou se quiserem podem seguir uma ordem, para embaralhar é ó clicar e arrastar os layers para cima ou para baixo, depois de embaralhar bastante, vamos fazer como no primeiro movieclip, começando debaixo para cima, vamos fazer aquela escadinha, dando espaço de dois frames entre um frame que contem um quadrado e o outro:

Aperte a tecla F5 em todos os frames abaixo do ultimo que foi criado.No layer acima que sobrou, vamos dar o nome de “Ações” para esse layer e no último frame onde acaba o ultimo quadrado vamos apertar a tecla F7 para criar um novo frame em branco e nele vamos colocar a ação

stop();

De um duplo clique em qualquer um dos quadrados para entrar na timeline do movieclip Quadrado, vamos selecionar o quadrado e apertar a tecla F8 mas uma vez, dessa vez vamos salvar ele como grafico, com o nome de “Quadrado”, em seguida, clique no frame 6 e aperte a tecla F6 para fazer uma cópia do frame 1 no frame 6, cliquem no frame 1 e na barra de propriedades, mude o Tween para Motion, em seguida selecionem o objeto e vamos clicar em Modify / Transform / Rotate 90° CCW (Ctrl + Shift + 10), aparentemente ele não fez nada, mas se testar a timeline verá que ele andou 90 graus sentido ante horário, agora com a ferramenta Free Transform Tool, vamos comprimir esse quadrado, mantenha a tecla Shift pressionada para ele diminuir em direção ao centro do quadrado:

No último frame, clique no quadrado, e na barra de propriedades no campo color, selecione o alpha e deixe ele em 0% (totalmente transparente).Crie um novo layer com o nome de ações, crie um novo frame no frame 6, e coloque a ação:

stop();

Volte para a timeline do movieclip Mascara 2, e depois para o movieclip Animação 2, chegaremos a essa timeline:

Crie mais um layer acima do layer Mascara, com o nome de “Luz”, copie o primeiro frame do layer mascara e colar no primeiro frame do layer Luz, uma maneira fácil de fazer isso é dar um clique no frame depois manter pressionado a tecla Alt e clicar e arrastar o frame do layer Mascara, pro frame do layer Luz, automaticamente o layer Luz mudará seu nome para Mascara, mas é só renomear denovo que não tem problema.

Cliquem com o botão direito do mouse sobre o layer Mascara e cliquem em Mask, assim o movieclip será mascara da imagem que está por baixo, quem quiser testar o efeito é só voltar para a timeline, arrastar o movieclip para o palco e testar, o resultdo deverá ser esse:

Quem fez o teste, delete o movieclip da timeline para ele ficar apenas na Biblioteca, agora vamos criar o terceiro e ultimo movieclip.

Clique em Insert / New Symbol / e vamos criar um Movieclip com o nome “Animação 3″ e clicar em Ok, assim ja estaremos na timeline desse movieclip.Abra a Bilblioteca e puxe a ultiam imagem para o palco desse movieclip, deixando a imagem na posição 0 (zero) em x e y:

Tranque esse layer e crie mais um com o nome “Mascara”, nele vamos desenhar um retangulo com a mesma altura da imagem do lado direito, vamos fazer ele na cor branca com 60% de transparencia, como fizemos nos anteriores (que estavam com 50% de transparencia):

Selecione esse retangulo e salve ele como um movieclip com o nome de Mascara 3, de um duplo clique pra entrar na timeline desse movieclip, selecione novamente o retangulo e salve ele como movieclip com o nome barra 3, agora vamos fazer cópias dele no palco e cobrir a imagem com eles:

Depois de selecionar todos os movieclips no palco, clique com o botão direito do mouse sobre eles e clique em “Distribute to layers”, como nos outros movieclips ele irá distribuir os movieclips cada um em um frame, agora vamos fazer diferente e fazer uma escada com espaço de dois frames até a metade dos retangulos, depois a mesma voltando, então até a metade ela vai, e da metade pra lá ela volta:

Depois disso deixe todos os frames estáticos até o ultimo usando no movieclip, e no primeiro frame lá encima vamos criar um frame em branco no ultimo frame e colocar a ação:

stop();

Feito tudo isso de um duplo clique em qquer movieclip do palco para editar o retangulo, certifique-se que você está na timeline Scene 1 >> Animação 3 >> Mascara 3 >> Barra 3, clique no frame 6 e aperte a tecla F6 pra fazer uma cópia do frame 1 no frame 6:

Clique no primeiro frame e mude o tween para Shape, selecione o retangulo no palco e nas propriedades deixe o H com o valor de 5 pixel, agora selecione o retangulo no frame 6, abra a paleta do Color Mixer, e coloque a transparencia do preenchimento para 0, deixando o objeto todo apagado:

Crie mais um layer com o nome Ações e no ultimo frame coloque a ação:

stop();

Agora volte para a timeline do Movieclip Mascara 3, nele criamos aquelas duas escadinhas de frames, então vamos inverter os movieclips que estarão desse ponto pra cima:

Então da metade dos layers pra cima, vamos clicar no frame, depois clicar no objeto que tem nele que está no palco, e vamos clicar em Modify >> Transform >> Flip Vertical, então esses movieclips ficarão de ponta cabeça, como nesse exemplo:

Repita a operação até o ultimo frame decima, assim ficarão metade normal e metade de ponta cabeça:

Volte para a timeline do movieclip Animação 3, faça um novo layer acima do layer Mascara e copie o primeiro frame do layer Mascara para o primeiro frame do layer acima, depois disso de o nome ao layer decima de “Luz” e clique com o botão direito do mouse encima do layer “Mascara” e no menu que se abrirá, clique em Mask, e assim estão prontos nossos 3 movieclips, vamos agora voltar a timeline principal do swf que ainda está vazia.

Vamos criar 5 Layers, o primeiro debaixo pra cima se chamará Imagem de fundo, nele iremos criar um frame em branco no segundo frame, para isso é só clicar no segundo frame e apertar a tecla F7, feito isso vamos abrir a Biblioteca apertando a tecla F11, e vamos puxar a imagem usada no ultimo movieclip para o palco, e colocar ela na posição 0 em x e y, mas preste atenção pois será só a imagem e não o movieclip que criamos:

Em seguida selecione a imagem e transforme ela em um movieclip com o nome img_fundo, e de o nome de instancia para esse movieclip de “img_fundo” sem aspas:

Clique no terceiro frame desse Layer e aperte a tecla F5 para deixar ele estático até o frame 3, depois disso vamos pro segundo Layer onde daremos a ele o nome de “Animação 1″, vamos criar um frame em branco no segundo frame desse layer e vamos arrastar uma cópia do movieclip Animação 1 da biblioteca para o palco, deixando na posição 0 em x e y, ele deverá ficar exatamente encima da imagem que ficou por baixo, caso não fique, pode ser a mascara no movieclip que não está na posião 0, se a posição 0 em x e y não se encaixar prfeitamente, coloque a olho mesmo até ajustar, depois disso clique no terceiro frame e tambem aperte a tecla F5 para deixar os dois estáticos.

Depois disso vamos para o terceiro Layer, o nome dele será “Animação 2″, vamos fazer um novo frame no terceiro frame desse layer, e vamos fazer o mesmo procedimento, arrastar o movieclip “Animação 2″ e coloca-lo no palco na posição 0 em x e y, depois de ajustara sua posiçã se por acaso for preciso, vamos clicar no frame 4 e apertar a tecla F5 para manter a animação estática nos frames 3 e 4.

Vamos para o quarto Layer, com o nome de “Animação 3″, vamos criar um frame em branco no frame 4, e arrastar o movieclip “Animação 3″ da biblioteca para o palco, depois de ajustar ele nas posições tambem vamos deixar o frame 5 estático, apertando a tecla F5:

No ultimo Layer, vamos dar o nome de Ações, e vamos colocar essa ação no primeiro frame:

_root.numero = 1;

Em seguida crie um novo frame no frame 2, que vai receber a seguinte ação:

stop();
_root.img_fundo._visible = false;
if (_root.numero == 2) {
_root.img_fundo._visible = true;
}
comeco = setInterval(avancar, 3000);
function avancar(){
if (_currentFrame == 4) {
clearInterval(comeco);
_root.numero = 2
gotoAndStop(2);}
else {
nextFrame();
}
}

Detalhando o código:

Acima criamos uma função que fará com que a cada 3 segundos a timeline ande 1 Frame, mostrando assim uma animação a cada 3 segundos.
A ação _root.img_fundo._visible = false; torna aquele movieclip imagem de fundo transparente na primeira passagem, e a partir da segunda passagem (loop) ele aparecerá por baixo da primeira animação pra parecer que é continuação do final da animação.
Então criamos a ação:
if (_root.numero == 2) {
_root.img_fundo._visible = true;
}
Ela que dizer que se o numero do _root que criamos no frame receber o valor 2, então a imagem de fundo que criamos ficará visível, isso acontecerá a partir da segunda vez que se repetir o efeito.
comeco = setInterval(avancar, 3000);
function avancar(){
if (_currentFrame == 4) {
clearInterval(comeco);
_root.numero = 2
gotoAndStop(2);}
else {
nextFrame();
}
}
Acima se declarou o intervalo da função avançar para 3000, então se cada 1000 corresponde a 1 segundo, isso fará com que a cada 3 segundos a função seja executada.
Então ela faz uma condição dizendo que se o frame atual for o frame 4, ela vai quebrar esse intervalo, e o valor do numero de _root vai passar a ser 2, assim fazendo aparecer o movieclip na segunda passagem, e o clearInterval que faz parar o Intervalo, serve apenas, para quando recomeçar a função pra ela não dobrar, senão ela começa a pular 2 frames por vez, depois 3, até ficar maluca a função, então é só um “anti-bug”.
E por fim, se for verdadeiro de o frame atual ser o 4, ele vai mandar pro frame 2, onde recomaça a função.
No else vemos que até chegar no frame 4 ele só vai caminahndo para o próximo frame com a ação nextFrame até chegar no frame 4.

No final dessa jornada, seu trabalho resultará nisso:

Qualquer duvida é só perguntar no forum, espero que aproveitem bem este tutorial e abusem da criatividade de se trabalhar com máscaras e movieclips.

Até a Próxima !!!

Gustavo Henrique Carneirinho

Vamos fazer agora um efeito de cortina para ser usado nos sites e aplicativos multimídia.É um arquivo fácil de fazer e se bem aproveitado, vocês poderão criar muitas coisas com ele, como um menu, um album de fotos, ou mesmo um site inteiro só com esse arquivo, então vamos-lá.

Preparação do trabalho:

Esse tipo de animação vai abrir menus como se fossem uma sanfona, então precisaremos criar entre 3 ou mais movieclips, nesse caso pelo padrão do site ou trabalhar com um arquivo com 400 px de largura por 150 px de altura, vou criar o primeiro movieclip junto com vocês e depois sozinhos vocês criarão os demais, mas vou ajudar aquí com as ações, portanto, juntem aí material para colocar nos slides, aquí vou usar somente 5, mas o numero de slides é ilimitado e fácil de acrescentar ao trabalho.

Criando a lateral do movieclip:

Com a ferramenta Rectangle Tool, vamos fazer um retangulo em pé, ele não terá bordas, o preenchimento vou usar aquele degradê de branco para preto, que já vem pronto na ferramenta de preenchimento do flash:

Desenhe o retangulo e aplique essa cor a ele:

Abram a paleta Color Mixer, com o objeto selecionado, vamos alterar as pontas preta e branca, para um alpha de 40%:

Agora vamos selecionar o retangulo, apertar a tecla F8 e salvar ele como gráfico com o nome de barras e clicar em OK.

Então agora temos um gráfico padrão pra ser a lateral da nossa cortina, fizemos esse modo de transparencia, para poder aplicar a propriedade Tint ao nosso gráfico e colocar ele de várias cores usando somente 1 símbolo da biblioteca, o resultado é economía de tempo e de kbs do arquivo, pois assim a biblioteca fica mais fazía e só usamos cópias desse gráfico.

Montando os movieclips das cortinas:

Vamos aproveitar essa instancia do gráfico que está no palco e vamos selecionar ele e apertar a tecla F8 para salvar como um movieclip, esse será o movieclip “azul”, vamos dar um duplo clique no movieclip que está no palco para entrar na timeline desse movieclip azul, vamos colocar o nome desse layer para coluna lateral, vamos clicar no objeto no palco, colocar ele na posição 0 em x e y na barra de propriedades, e na janelinha Color, vamos aplicar uma cor no tint Azul, com 60%:

Depois disso vamos criar um novo layer, com o nome conteudo, e vamos colocar algum conteudo do lado direito da coluna, o legal sería jogar esse layer para baixo do layer coluna lateral e fazer um retangulo por baixo do gráfico:

Isso vai até deixar a coluna com uma cor mais forte, usem mais layer para colocar conteudo do lado direito da coluna, veja um exemplo:

Agora vamos criar um novo layer com o nome “Botão”, nele vamos desenhar um retangulo que peque toda a area do filme, depois salvaremos o retangulo como botão, e edita-lo para ficar sua area só como HIT:

Agora vamos destrancar todos os layers, selecionar tudo o que estiver no palco, e na barra de propriedades, vamos definir a posição em y do grupo todo para 0 (zero):

Fizemos isso, para que o movieclip tenha seu ponto 0 em X na ponta esqurda do movieclip, notem que o grupo de objetos ficarão a direita do ponto central do movieclip.

Vamos então voltar para o palco principal, vamos clicar no movieclip e colocaremos a posição dele em X para 0:

Agora repetiremos todas as ações encima, adicionando layers e colocando movieclip sobre movieclip, até se formarem 5 movieclips, a unica diferença será o final, que vocês deverão colocar aa posição em X no palco a olho, sempre forumando uma coloca embaixo da outra, como o exemplo abaixo:

Para ficar com essa aparencia, eu joguei o layer dos botões para baixo de todos, façam 1 por 1 pos 5 movieclips, até chegar nesse resultado:

Agora que fizemos os 5 movieclips, é hora de começar a colocar as ações, vamos criar um novo layer com o nome ações, e vamos colocar a seguinte ação nele:

function movermc(mc)
{
if (_root.mc_ativo == Falso)
{
novoX = mc.originalX;
}
else if (mc == _root.mc_ativo || mc._x < _root.mc_ativo._x)
{
novoX = mc.abertoX;
}
else
{
novoX = mc.fechadoX;
}
distanciaX = novoX – mc._x;
mc._x = mc._x + distanciaX / _root.velocidade;
}
mc_ativo = Falso;
velocidade = 6;

Aquí criamos os 3 estágios do nosso movieclip, ele com a posição normal, ele quando se fecha e quando se abre, agora vamos para a parte mais chata que é declarar esses valores, então vamos clicar em View/ Rules ele abrirá as guias pra gente trabalhar melhor, vamos então adiantar e colocar essa ação em cada um dos movieclips:

onClipEvent (load)
{
originalX = this._x;
abertoX = 0;
fechadoX = 0;
}
onClipEvent (enterFrame)
{
_root.movermc(this);
}

Depois de colocar essa ação em todos os movieclips será a hora de altera-las, esses movieclips terão 3 posições, que é quando ele começa, quando abre para mostrar o conteudo e quando se fecha pra mostrar o conteudo dos outros, então o OriginalX é o valor em X do moviclip de quando ele começa, vamos fazer agora o fechadoX.

Quando o usuário passar o mouse em uma das cortinas elas vão se deslocar para a direita, para a selecionada mostrar o conteudo, então vamos fazer o seguinte, vamos deixar todos os layers invisíveis, clicando naquele olho ao lado do cadeado:

Agora com o palco em branco vamos puxar uma linha guía para o final do palco:

Vamos destrancar os layers e desocultar a visualização denovo, com a tecla SHIFT pressionada, vamos selecionar todos os movieclips do segundo em diante, e arrastar eles para a direita até a coluna do ultimo movieclip tocar na linha guía, como na figura abaixo:

com os movieclips nessa posição, vamos clicar no primeiro movieclip do grupo da direita, e na barra de propriedades vamos pegar o valor que aparecerá em x, e vamos adicionar esse valor a ação do mesmo movieclip:

Notem que o movieclip laranja acima, está com o valor 279 em x, então vamos clicar no movieclip e abrir o painel de ações e adicionar esse valor ao fechadoX:

onClipEvent (load)
{
originalX = this._x;
abertoX = 0;
fechadoX = 279;
}
onClipEvent (enterFrame)
{
_root.movermc(this);
}

O mesmo processo faremos com os outros movieclips, vamos clicar no verde, fazer a leitura da sua posição em x e adicionar a posição ao código no fechadoX, assim sucessivamente até o ultimo movieclip.

Feito isso vamos pegar o primeiro movieclip da direita, e vamos com a tecla Shift + seta para a esquerda (left), trazer ele até cobrir a metade da primera coluna, como na figura abaixo:

Notem que o movieclip laranja ficou sobre o movieclip azul, o mesmo fazemos com o resto,, o verde encima do laranja, o mermelho encima do verde e assim por diante até chegar a esse ponto:

Essa posição será o abertoX, então vamos repetir o mesmo processo, vamos clicar do movieclip laranja em diante, vamos pegar o valor dele em x e colocar na ação do frame em abertoX:

Como podem notar o movieclip laranja está com a posição 13 em x, então vou abrir a barra de ações dele e colocar a seguinte ação:

onClipEvent (load)
{
originalX = this._x;
abertoX = 13;
fechadoX = 279;
}
onClipEvent (enterFrame)
{
_root.movermc(this);
}

E o mesmo fazemos com os outros movieclips, só não é necessário fazer ao primeiro pois ele não se move em tempo algum, então façam o mesmo procedimento até o ultimo movieclip da direita.

Depois disso vamos retornar os movieclips as suas posições originais:

Agora nosso trabalho está quase pronto, só falta dar as ações aos botões que estão dentro do movieclip.Então abram o primeiro movieclip e coloquem essa ação no botão:

on (rollOver)
{
_root.mc_ativo = this;
}
on (rollOut)
{
_root.mc_ativo = Falso;
}

Essa mesma ação vocês vão colocar nos outros botões dos outros movieclips, no final de todo esse trabalho o resultado deverá ser esse:

Até a próxima !!!

Gustavo Henrique Carneirinho

Atenção: Decidi alterar esse tutorial no dia 22/03/2005, pois as ações que antes eram usadas, agora não funcionam mais no Flash MX 2004, portanto fiz algumas alterações nas ações deste tutorial e assim ele funcionará tanto no Flash MX 2004 como o Flash MX 6 (antes funcionava no 5), então mãos a obra!

Vamos brincar um pouco com a idéia de se controlar Movieclips dentro de movieclips, usando condições e variáveis, o resultado será um menuzinho interessante pra ser usado em sites ou cds de multimidia.

Vamos então preparar nosso trabalho, vamos desenhar um botão no Flash, e salvar ele primeiro como gráfico na biblioteca, porque vamos usar ele diversas vezes ao longo do trabalho, então fica mais fácil para fazer uma cópia desse botão:

Para salvar o botão como gráfico, basta seleciona-lo e apertar F8, na caixa que aparecer, de um nome a ele e marque a opção como “Graphic”, e aperte OK.

Agora vamos criar os botões, vamos arrastar 6 cópias desse gráfico da biblioteca para o palco, ou se preferir, pode segurar a tecla ALT clicar sobre o gráfico no palco e arrastar para ele fazer as cópias do gráfico no palco, fazendo as 6 cópias, vamos alinhar todas, uma encima da outra formando um menu:

Agora vamos dar um clique no primeiro gráfico de cima pra baixo, e vamos apertar a tecla F8, vamos dar o nome pra ele de “Animais” e vamos salvar ele como botão.

Depois de salvo, vamos dar dois cliques nele para edita-lo, então entraremos na timeline do botão que tem apenas 4 frames, nele vamos adicionar mais um layer, e vamos escrever o texto “Animais” Sem aspas, e mudar a gosto o over, down e hit, o resultado será o primeiro botão do menu:

O mesmo então faremos com os outros botões, clicando em cada um, salvando como botão primeiro, só que colocaremos os nomes “Carros”, “Frutas”, “Estados”,”Países”,”Contato”, não é jogo de Stop, é apenas para aprendizado, então o resultado será esse:

Agora que já temos todos os botões do menu, é hora de criar os submenus, pode parecer complicado, mas não é, então vamos selecionar o menu inteiro com todos os botões e vamos apertar a tecla F8 e salvar ele como movieclip “todos”, vamos apertar “OK”, então ele vai agrupar todos os botões dentro do movieclip, vamos dar um clique nesse movieclip e vamos dar o nome de instancia pra ele de “todos” sem aspas:

Ao fazer isso, vamos dar um duplo clique no movieclip para edita-lo, então entraremos na timeline Scene1 >> todos.

Nesse movieclip estarão todos os botões, vamos então selecionar todos os botões, menos o ANIMAIS, e vamos salva-lo como um movieclip com nome de “carro”, então teremos no mesmo layer 1 botão e 1 movieclip, dê o nome de instancia para o movieclip de “carro” sem aspas, depois selecione o botão e o movieclip e vamos clicar em Modify >> Distribute to layers, para ele separar os dois objetos, então se formarão um layer com nome de “carros”, e outro com nome de “animais”, e mais um layer que ficará vazio que depois usaremos ele para as ações, a timeline deverá ficar assim por enquanto:

Agora vamos dar dois cliques no movieclip carros, e estaremos então na Timeline Scene1 >> todos >> carro. Aquí vamos fazer o mesmo esquema, vamos deixar o botão carros sem selecionar e selecionar o resto de frutas pra baixo, e vamos criar um movieclip com nome de “fruta” e dar o nome de instancia pra ele como “frutas” sem aspas:

Vamos repetir agora o processo anterior, vamos selecionar o botão e o movieclip juntos, vamos clicar em modify >> Distribute to layers, acontecerá o mesmo da outra vez, um frame ficará vazio, e o botão ficará num layer separado do resto dos outros botões agrupados em um movieclip.

Agora daremos um duplo clique no movieclip Fruta e vamos entrar na timeline Scene1 >> todos >> carro >> fruta. E vamos repetir o processo, vamos selecionar os botões de Estados para baixo, e salvar como um movieclip com nome “estado” e nome de instancia “estados”, vamos fazer o mesmo dos movieclips passados, vamos selecionar o botão “frutas” junto com o movieclip “estados” e vamos clicar em modify >> Distribute to layers, para separar o botão frutas e o movieclip em layers diferentes.

Vamos dar um duplo clique agora no movieclip “estados” e vamos entrar na timeline Scene1 >> todos >> carro >> fruta >> estado. Aquí será o mesmo processo tambem, vamos selecionar os botões paises e contato, salvaremos ele como um movieclip com o nome “pais” e nome de instancia “pais”, depois vamos selecionar o movieclip e o botão juntos, e ir novamente em modify >> distribute to layers. Mais umas vez ficaremos com 3 Layers, como mostra a figura abaixo:

Agora se vocês conseguem adivinhar bem, nós faremos a mesma coisa com o movieclip “pais”, vamos dar um duplo clique nele só que nesse caso, só teremos dois botões, então vamos selecionar o botão “contato” e transforma-lo num movie com o nome de “contatos” e com o nome de instancia “contato”, em seguida vamos selecionar ele junto com o botão países, e novamente clicar em modify >> distribute to layers, assim ficaremos com o botão e o movieclip separados por layers diferentes e sobrará mais um frame vazio, o resultado de todas as timelines será esse:

Agora que temos todos os movieclips separados, vamos voltar para a scene1 e criar um novo layer com o nome “Ações”, nesse frame colocaremos 5 funções que controlarão cada movieclip, para que sempre, apenas um menu fique aberto, por exemplo, se clicarmos no menu animais e o menu frutas estiver aberto, o menu frutas vai fechar, enquanto o Animais se abre, e assim com qualquer menu, sempre ficará apenas um aberto, coloquem essa ação nesse frame:

stop();
function item_1() {
if (_root.menu1 == “on”) {
_root.todos.gotoAndPlay(“volta”);
}
}
function item_2() {
if (_root.menu2 == “on”) {
_root.todos.carro.gotoAndPlay(“volta”);
}
}
function item_3() {
if (_root.menu3 == “on”) {
_root.todos.carro.frutas.gotoAndPlay(“volta”);
}
}
function item_4() {
if (_root.menu4 == “on”) {
_root.todos.carro.frutas.estados.gotoAndPlay(“volta”);
}
}
function item_5() {
if (_root.menu5 == “on”) {
_root.todos.carro.frutas.estados.pais.gotoAndPlay(“volta”);
}
}

Detalhando as funções:

A seguir, vamos criar ações nos botões pra controlar os filmes, esse controle será de forma simples, se algum menu estiver aberto, a variavel do menu receberá “on”, se estiver fechado, a variável do menu receberá “off”, então temos 5 menus, dentre eles: Animais, Carros, Frutas, Estados e País, portanto teremos 5 variaveis, uma pra cada menu, “menu1″ será a variável de Animais que é o primeiro menu, “menu2″ será a variável do menu Frutas, e assim por diante até o menu País.

A funcionalidade é a seguinte, cada função criada aí encima, vai checar se um dos menus está aberto (“on”), se ele estiver aberto, a função fará com que esse menu feche, olhe o exemplo:

function item_1() { <– Criada a função Item1 para controlar o Menu1 “Animais” que tem a instancia de “todos”
if (_root.menu1 == “on”) { <– Verificando se o menu está aberto (Se a variavel menu1 estiver “on”
_root.todos.gotoAndPlay(“volta”); <– Vá para o Menu todos que está na timeline principal, e reproduza no frame “volta” que é onde fecha o movieclip
}

Então é baseado na função acima que criamos uma função para cada menu, então por exemplo, ao clicarmos em Animais, teremos que conferir se os outros menus estão abertos, então chamaremos as funções item2, item3, item4 e item5, pois são os outros menus que não podem estar abertos, vamos retomar então.

Voltando ao trabalho:

Agora concluímos uma boa parte do menu, agora “só” falta construir os submenus, então vamos lá. vamos entrar no movieclip “todos” e trancar todos os layers menos o layer “carros” que é onde tem o movieclip Carro, vamos dar um clique no frame 5 e apertar a tecla F6 e fazer o mesmo no frame 10, depois vamos selecionar nesse layer, o frame 1 até o frame 10, na barra de propriedades, vamos alterar o tween para motion, agora vamos destrancar o layer “animais” e vamos clicar no frame 5, e em seguida apertar a tecla F6 para fazer uma cópia do frame 1 para o frame 5, e no frame 10 apertar a tecla F5 para que o botão fique estático até o frame 10.

Agora vamos voltar ao layer Carros, e no frame 5 vamos clicar no movieclip carros no palco, e com a tecla down do teclado vamos puxar ele para baixo até que caibam alí 4 botões:

Vamos agora criar um novo layer e coloca-lo abaixo do layer animais, o nome dele será submenu, e nele vamos fazer 4 botões relacionados aos animais:

Agora vamos organizar esse layer, vamos colocar essa animação para o frame 2 e deixar o primeiro frame em branco:

Caso vocês apertem a tecla Enter, vocês verão a animação pronta do menu descendo e aparecendo os submenus, nós colocamos o submenu do movieclip “todos” que se refere ao animais, a partir do frame 2, para não dar conflito entre os botões, pois eles ficaríam por traz dos outros, porem vão pegar a mesma area, então é melhor colocar ele pra executar só a partir do frame 2.

Bom, agora falta controlar tudo isso aí né?Então vamos por partes, naquele layer que ficou vazio, vamos agora renomea-lo como “ações” e logo no primeiro frame vamos colcoar a ação:

stop(); // para o menu não descer assim que rodar o filme

No frame cinco, vamos apertar a tecla F7 para criar um frame em branco e colocar o frame label como “volta” sem aspas, e a ação:

stop(); // para parar o menu assim que ele descer

E no sexto frame tambem criaremos um novo frame, clicando nele e apertando a tecla F7, e vamos colocar a ação:

_root.menu1 = “off”;

Isso é para mudar o valor de uma variavel que criamos, para controlar o abrir e fechar dos menus como será totalmente explicado mais pra frente.

Para finalizar esse movieclip, vamos voltar ao frame 1 do nalyer “Animais” onde tem o botão “animais”, vamos abrir o painel de ações dele e colocar a seguinte ação:

on (release) {
_root.menu1 = “on”;
_root.item_2();
_root.item_3();
_root.item_4();
_root.item_5();
play();
}

Quer dizer que ao clicar nesse botão, ele vai marcar a variavel menu1 como ON e chamar as funções que fizemos no _root (timeline principal) do item_2 até o item_5, que faz a leitura das variáveis dos outros menus e se alguma estiver no estado de “on” ou seja, se outro menu estiver aberto, ele vai fazer ir para o frame 6 que é o frame que faz o menu fechar, sendo assim, só esse menu estará “ON”, ou seja ativo, e com tudo isso, terá a ação play(); que fará com que ele reproduza até que o stop(); no frame 5 pare a reprodução.

No frame 5 clicaremos no mesmo botão e abriremos o painel de ações denovo, veremos que ele está sem ações, então vamos colocar essa ação pra ele:

on (release) {
_root.menu1 = “off”;
_root.item_2();
_root.item_3();
_root.item_4();
_root.item_5();
play();
}

Então aquí é a mesma ação, só que agora alteraremos o status da variavel menu1, para off, se testarmos o filme agora, veremos que o primeiro item está pronto, se clicarmos no botão “Animais” ele irá mover os outros menus para baixo mostrando o submenu, e se clicarmos denovo, ele irá subir voltando a posição original conforme o exemplo abaixo:

Pois bem, vamos dar continuidade ao trabalho, vamos trancar todos os layers desse movieclip “todos” e destrancar apenas o layer “carros”, nesse layer então vamos repetir praticamente todo o processo acima, vamos primeiro clicar no frame 1 do layer carros, onde está o movieclip “carro” e vamos selecionar esse movieclip e dar um duplo clique para edita-lo.

Entraremos então novamente na timeline Scene1 >> todos >> carro, vamos trancar todos os layers, menos o layer frutas, vamos clicar no frame 5 do layer frutas e apertar a tecla F6, o mesmo faremos com o layer 10, vamos selecionar todos os frames desse layer e na barra de propriedades vamos alterar o tween para “motion”.

Agora para visualizar melhor o que fazemos a seguir, vamos no layer “carros” e vamos clicar no frame 5 desse layer e apertar a tecla F6 para fazer uma cópia do botão nesse layer, e vamos clicar no frame 10 e apertar a tecla F5 para deixar esse botão estático até o frame 10.

Vamos voltar para o layer frutas, no frame 5 e vamos clicar no movieclip frutas no palco, e vamos arrastar ele pra baixo, num espaço que caibam 3 botões, e vamos criar um novo layer abaixo do layer carros, que será onde faremos o submenu de carros, para ficar mais fácil, crie esse layer com o nome de submenu, e apertem e cliquem no frame 5, e apertem a tecla F7 para visualizar o movielclip para baixo e assim ficando com uma melhor visualização para fazer os botões, agora façam 3 botões relacionados ao assunto carro, conforme a figura abaixo:

Agora dê um clique no frame 5 do submenu, e arraste ele para o frame 2:

Vamos agora renomaer olayer “”layer 1″ para ações e vamos colocar a ação stop(); no frame 1 e no frame 5, no frame 5 tb colocaremos o frame label dele para “volta” sem aspas, e no frame 6, vamos apertar a tecla F7 e dar a seguinte ação pra ele:

_root.menu2 = “off”;

Isso é para a variavel menu2 receber o valor off, depois que passar pelo frame 6 e fechar o submenu dos carros.

Para finalizar esse menu do carro, precisamos então só aplicar as ações no botão Carro, então vamos no primeiro frame do layer carro, e vamos aplicar a seguinte açao no botão:

on (release) {
_root.menu2 = “on”;
_root.item_1();
_root.item_3();
_root.item_4();
_root.item_5();
play();
}

Com a ação acima ele irá reproduzir esse movieclip “carro”, e vai chamar as funções item_1, e item_3 até item_5, como na ação passada, ele vai chegar se os outros movieclips estão abertos, e se algum deles estiver “on”, ele vai fechar enquanto esse se abre, agora no frame 5, daremos essa ação ao botão:

on (release) {
_root.menu2 = “off”;
_root.item_1();
_root.item_3();
_root.item_4();
_root.item_5();
play();
}

Aqui ele fará com que o movieclp reproduza denovo fechando o menu de carros, e alterando o status do menu2 de on para off, Agora já teremos os dois primeiros menus funcionando, notem que quando se clica em Animais, ele abre, mas ao clicar em Carros, ele vai abrir o Carros e ao memso tempo, vai fechar o Menu Animais, e vice-versa:

Agora já temos os dois primeiros submenus prontos, os demais serão feitos da mesma forma, então vamos lá concluir o trabalho, vamos para o próximo menu “frutas”, então através do layer frutas, do movieclip carro, vamos entrar na timeline do menu de frutas.

Dentro desse movieclip teremos o layer “futas”, vamos clica no frame 6 desse movieclip e vamos apertar a tecla F6 para fazer uma cópia do frame 1, e no frame 10 vamos clicar e apertar a tecla F5.

No layer”Estados”, é nele que está o movielcip que marcará de estado para baixo, então vamos fazer uma cópia desse primeiro frame, no frame 5 e no frame 10, para isso basta clicar no frame correspondente e apertar a tecla F6, após feito isso, vamos selecionar todos os frames desse layer e mudar o tween para “motion” na barra de propriedades, vamos agora criar um novo layer e dar o nome pra ele de Submenu, e vamos colocar ele como ultimo da lista, mais abaixo de todos.

Vamos clicar no frame 5 desse layer e apertar a tecla F7 para fazer um novo frame em branco:

Vamos agora clicar no frame 5 do layer estados, e vamos jogar o grupo do movieclip pra baixo, a ponto de caber mais 3 botões com assunto relacionado a frutas,daí voltaremos no frame 5 do submenu e vamos fazer os 3 botões:

Com esse Submenu feito, vamos clicar no frame 5 desse submenu, e vamos arrastar ele para o frame 2:

Agora já temos a animação dese menu pronta, só faltam as ações, vamos começar com as ações dos frames, vamos renomear o Layer 1 para “Ações”, e vamos fazer um frame em branco nos frames 5 e 6, para isso basta clicar no frame correspondente e apertar a tecla F7, então no frame 1 e no frame 5 usaremos a ação:

Stop();

No frame 5 vamos colocar o frame label como “volta” sem aspas e no frame 6 colocaremos a ação:

_root.menu3 = “off”;

Agora no layer Frutas, vamos no primeiro frame clicar no botão “frutas” e colocar a seguinte ação nele:

on (release) {
_root.menu3 = “on”;
_root.item_1();
_root.item_2();
_root.item_4();
_root.item_5();
play();
}

E no frame 5, vamos dar essa ação pro mesmo botão:

on (release) {
_root.menu3 = “off”;
_root.item_1();
_root.item_2();
_root.item_4();
_root.item_5();
play();
}

Fazendo isso, já teremos concluído o terceiro Menu e Submenu:

No layer Estados, do movieclip que estamos (fruta) vamos dar um duplo clique no movieclip “estados” para edita-lo, esse será nosso penultimo submenu:

Então vamos clicar no frame 5 do Layer Estados, e apertar a tecla F6 para fazer uma cópia do frame 1 no frame 5, e no frame 10 vamos apertar a tecla F5, para deixar estática a animação do frame 5 até o frame 10.

No layer Pais, vamos clicar no frame 5 e apertar a tecla F6, o mesmo para o frame 10, depois selecione todos os frames desse layer e na barra de propriedades, alterem o Tween para “motion”.

Criem um novo layer com o nome de Submenu, cliquem no frame 5 desse layer e aperte a tecla F7 para fazer um novo frame em branco, depois volte ao frame 5 do layer “país” e puxe o movieclip Pais para baixo, de forma que caibam mais 3 botões relacionados a Estado:

Agora no layer SubMenu vamos criar os 3 botões com assuntos relacionados a Estado, depois de terminado, clique sobre o frame 5 desse layer e arraste ele para o frame 2:

Agora vamos renomear o Layer 1 para “Ações” e vamos colocar a ação stop(); no frame 1 e no frame 5, anda no frame 6 vamos colocar o frame label como “volta” sem aspas e no frame 6 vamos colocar a ação:

_root.menu4 = “off”;

Para finalizar esse Submenu, iremos para o layer “Estados” e no primeiro frame vamos colocar a ação no botão:

on (release) {
_root.menu4 = “on”;
_root.item_1();
_root.item_2();
_root.item_3();
_root.item_5();
play();
}

E no frame 5, colocaremos essa ação no botão:

on (release) {
_root.menu4 = “off”;
_root.item_1();
_root.item_2();
_root.item_3();
_root.item_5();
play();
}

A essa altura o menu estará praticamente pronto, só estará faltando o movieclip Pais:

Então vamos lá terminar todo esse trabalho, vamos clicar no primeiro frame do layer Pais, e vamos dar um duplo clique no movieclip para edita-lo.

No Layer Países, vamos clicar no frame 5 e apertar a tecla F6, e logo depois apertar a tecla F5 no frame 10, para ficar estático do frame 5 ao frame 10.

No Layer Contato, vamos clicar no frame 5 e apertar a tecla F6, o mesmo no frame 10, então vamos selecionar todos os frames desse layer e mudar na barrade propriedades o Tween para “motion”, depois disso vamos criar mais um layer com o nome Submenu e vamos coloca-lo abaixo de todos:

No layer do submenu, vamos clicar no frame 5, e apertar a tecla F7 para inserir um novo frame em branco, cliquem agora no frame 5 de contato e jogue o movieclip contato para baixo a um espaço que caibam mais 3 botões.

Volte ao Layer Submenu e vamos colcoar alí 3 botões relacionados ao tema País, e após criar esses botões, clique no frame 5 do layer submenu, e arraste-o para o frame 2:

Agora vamos renomear o Layer “Layer1″ para “Ações”, vamos clicar e apertar F7 nos frames 5 e 6, no frame 1 e no frame 5, vamos colocar a ação stop(); e ainda no frame 5 vamos colocar o Frame Label como “volta” sem aspas, no frame 6 vamos colocar a ação:

_root.menu5 = “off”;

Vamos então colocar essa ação no botão que está no primeiro frame do layer Paises:

on (release) {
_root.menu5 = “on”;
_root.item_1();
_root.item_2();
_root.item_3();
_root.item_4();
play();
}

E no frame 5, vamos colcoar essa ação no botão:

on (release) {
_root.menu5 = “off”;
_root.item_1();
_root.item_2();
_root.item_3();
_root.item_4();
play();
}

Então teoricamente nosso menu já está pronto, o unico problema é esse espaço que vai aparecer abaixo do botão contato, então para arrumar isso, vamos entrar no movieclip contato, e fazer um novo layer nele, nesse layer vamos desenhar um quadrado branco, ou na cor que for a pagina e colocar abaixo dele:

Agora é só salvar e publicar seu menu, no fim de tanto trabalho, seu resultado deverá ser esse:

Espero que tenham aproveitado bastante esse tutorial, qualquer dúvida é só entrar em contato, estarei sempre no Forum.

Até a próxima !!!

Gustavo Henrique Carneirinho

Como carregar imagens e arquivos swfs externos:

Muita gente ainda se confunde na hora de usar o loadmovie, ou

mesmo usuários mais novos têm essa duvida de como carregar um arquivo

exerno com a extensão jpg ou swf, para dentro de um arquivo swf.

Para carregar uma imagem, colocaremos essa ação

no botão:

on (release) { // ao soltar o mouse

_root.createEmptyMovieClip(“foto”, i); //Cria um movieclip vazio no

palco com a instancia “foto”

loadMovie(“imagemi.jpg”, foto); //Carrega a imagem externa com o nome

imagem.jpg no movieclip criado com a instancia “foto”

foto._x = 100; //A imagem será carregada com a distancia de 100 pixels

a partir do lado esquerdo do documento (_x)

foto._y = 200; //A imagem será carregada a 200 pixels de distancia a

partir do topo do documanto (_y)

foto._xscale = 50; // Valor em porcentagem da largura da imagem que será

carregada, 50 corresponde a 50%, mas pode ser alterado para qquer valor, o valor

100 retorna o tamanho original da imagem

foto._yscale = 50;// Valor em porcentagem da altura da imagem que será

carregada, 50 corresponde a 50%, mas pode ser alterado para qquer valor, o valor

100 retorna o tamanho original da imagem

}

Então no caso aí acíma, vamos carregar uma

imagem e ter total controle sobre ela, sobre o posicionamento no palco

e sobre o seu tamanho a ser carregado, a vantagem de se trabalhar com

_xscale e _yscale, é essa de vc manter a mesma porcentagem em altura

e largura, assim não distorcendo a imagem, sempre mantendo a proporção

exata.Isso é muito usado para fazer menus com fotos, assim, vocês

podem criar um movieclip vazio no palco e só carregar foto por

foto encima dele, assim o usuário só carrega o que for ver,

economiza no tamanho do swf, ficando bem mais leve e mais rapida a navegação.

Agora pra carregar um swf, é o mesmo caminho, é

só alterar a extensão jpg para swf, olhem o exemplo:

on (release) { // ao soltar o mouse

_root.createEmptyMovieClip(“carregador”, i); //Cria um movieclip vazio

no palco com a instancia “carregador”

loadMovie(“arquivo.swf”, carregador); //Carrega um arquivo externo

com o nome arquivo.swf no movieclip criado com a instancia “carregador”

carregador ._x = 100; //O arquivo será carregada com a distancia de 100

pixels a partir do lado esquerdo do documento (_x)

carregador._y = 200; //O arquivoserá carregada a 200 pixels de distancia

a partir do topo do documanto (_y)

carregador ._xscale = 50; // Valor em porcentagem da largura do arquivo que

será carregado, 50 corresponde a 50%, mas pode ser alterado para qquer

valor, o valor 100 retorna o tamanho original do arquivo

foto._yscale = 50;// Valor em porcentagem da altura do arquivo que será

carregado, 50 corresponde a 50%, mas pode ser alterado para qquer valor, o valor

100 retorna o tamanho original do arquivo

}

Pois é, está aí um caminho fácil

para quem quer carregar arquivos externos com o LoadMovie, espero que aproveitem

o memorex e qualquer dúvida é só me procurar pelo forum

!!!

Até a próxima !!!

Gustavo Henrique Carneirinho

Como usar o LocalConnection para controlar swfs em janelas diferentes:

Vamos conhecer uma ferramente interessante do Flash MX, que poucos

usam e outros até nem sabem que ela existe, vamos aprender a controlar

um swf através de outro swf, separados por janelas diferentes (frames

ou popup).

Loucura?Não isso é possível mesmo, vamos

trabalhar um pouco e criar um swf com 6 botões, sendo que cada um desses

botões controlarão um outro swf, pra ir para um frame determinado,

ou seja, eu clico num swf e ele executa a ação no outro, piração

né?Pois é, vamos lá:

Crie um arquivo novo no flash com o nome de emissor, esse será

o swf com os botões, então vamos criar 6 botões nesse swf

e colocar o noem de instancia pro primeiro botão de “bot1″

sem aspas, e pro segundo botão colocaremos “bot2″ e assim sucessivamente

até o botão 6 como “bot6″.

Depois de criado e instanciado os 6 botões, vamos criar

uma ação para se conectar com o outro swf, então abram

o painel de ações do frame e coloquem a seguinte ação:

var filme1 = new LocalConnection(); // cria uma variavel

com nome “filme1″ que será uma nova conexão local

bot1.onRelease = function() { // ao soltar o botão “bot1″

filme1.send(“suaConexao”, “acao”, “1″); // o filme1

vai mandar uma ação para “suaConexao” definindo a ação

e o parametro, que nesse caso é o frame que va mandar

};

bot2.onRelease = function() { // mesma ação acima só que

para o botão 2 e assim por diante até o botão 6

filme1.send(“suaConexao”, “acao”, “2″);

};

bot3.onRelease = function() {

filme1.send(“suaConexao”, “acao”, “3″);

};

bot4.onRelease = function() {

filme1.send(“suaConexao”, “acao”, “4″);

};

bot5.onRelease = function() {

filme1.send(“suaConexao”, “acao”, “5″);

};

bot6.onRelease = function() {

filme1.send(“suaConexao”, “acao”, “6″);

};

Feito isso, vamos salvar esse fla, e vamos criar outro com o

nome de receptor, que é o swf que irá receber as ações,

então vamos criar um novo fla com 6 frames, a lógica então

é pelo outro swf que criamos, controlar esse por frames ou janelas separadas,

então vamos fazer o botão um fazer esse frame ir para o frame

1, o botão dois do outro swf, fazer esse swf ir para o frame dois e assim

por diante, então vamos criar 6 frames diferentes, eu fiz um mais simples

apenas mudando os nomes dos frames, então depois de feito os 6 frames,

vamos colocar essa ação no primeiro frame:

var filme2 = new LocalConnection(); // Cria a variavel

“filme2″ como uma nova conexão local

filme2.connect(“suaConexao”); // vai conectar o filme2 com “suaConexao”

que foi criada no filme1

filme2.acao = function(frame) { // criou a açao que é uma função

com 1 parametro “frame”

gotoAndStop(frame); // define a ação como gotoAndStop e o parametro

será o numero do frame

};

stop();// apenas uma ação para o filme não ir para os outros

5 frames

Então acima concluímos nossas ações,

vamos agora ver o resultado nessa página, notem como são swfs

diferentes e independentes e como o swf decima controla o de baixo, o mesmo

acontecería se estivessem em frames diferentes ou até mesmo em

janelas popups diferentes.

Filme Emissor:

Filme Receptor:

Então acima vocês aprenderam como fazer dois filmes

se comunicarem, isso é muito útil para quem trabalha com frames,

ou popups, é mais um recurso poderoso do Flash MX.

Até a próxima !!!

Gustavo Henrique Carneirinho

Como controlar as cores do scroll por Action Script,

Hoje vamos aprender a editar as cores dos componentes ScrollBar

e ScrollPane por Action Script,

O processo é simples, é só pegar as cores

desejadas nos valores hexadecimais, e atribuir as ações do frame,

se usarmos a seguinte ação no frame:

globalStyleFormat.face = 0xadbdcc;

globalStyleFormat.scrollTrack = 0xc1d1e0;

globalStyleFormat.arrow = 0x5b7a99;

globalStyleFormat.selection = 0×669966;

globalStyleFormat.selectionUnfocused = globalStyleFormat.selectionDisabled=0x99CC99;

globalStyleFormat.highlight = 0xd7dee6;

globalStyleFormat.shadow = 0x6c88a3;

globalStyleFormat.darkshadow = 0xc1d1e0;

globalStyleFormat.highlight3D = 0x6c88a3;

globalStyleFormat.applyChanges();

O resultado dos scrollers do seu ScrollPane ou ScrollBar, será

esse:

Agora usem a imaginação e paleta de cores, para

alterar todas as cores até que seu scroll fique na cor desejada !!!

Até a próxima !!!

Gustavo Henrique Carneirinho

Semana passada aprendemos algumas animações

e ferramentas básicas do Swift 3D, hoje vamos aprender trabalhar

com essa ferramenta “Lathe Editor” que funciona como um torno

no Swift 3D, seque abaixo algumas imagens que podemos fazer com essa poderosa

ferramenta do Swift 3D, com ela seus trabalhos no flash ficarão

bem mais fáceis e bonitos, pra quem trabalha com sites, é

uma boa, pra quem trabalha com projetores então nem se fala, vamos

então conhecer a ferramenta “Lathe Editor”.

Swift 3D v2 e v3:

Logo que abrirem Seu swift 3D v2 ou v3, você verão

a janelinha lá “Lathe Editor” cliquem nela para abrir

esta tela:

automaticamente ele vai acionar uma daquelas caixinhas de modelos de pontos,

o primeiro que está selecionado na figura acima é o “Corner

Point” (ponto de canto), com ele faremos pontos bem secos, com as linhas

retas, então no modelo que criamos acima, ele vai ficar uma forma bem

quadradona, mas se passarmos agora pra janela “Scene Editor”, já

vamos ver essa forma torneada no nosso palco, então ela ficará

assim:

conforme expliquei no outro tutorial de 3D, vamos ver certinho e compreender

melhor sua forma:

Ferramenta Rotate Selected:

que criamos, vamos clicar no nosso objeto no palco para seleciona-lo, e logo

depois vamos voltar para nossa janelinha “Lathe editor”, então

vamos encontrar por lá aquele desenho que fizemos, vamos clicar agora

no segundo item que é uma setinha azul com o nome “Shape Tool”,

ela serve para editar os pontos da nossa figura, vocês podem clicar nela,

e bagunçar a vontade nossos pontos, e ir testando no “Scene Editor”

pra ver como são feito as mudanças, olhem um exemplo:

Atari 2600 caído no chão” , para cgear a esse resultado,

eu dei uma alterada nos pontos de luz do palco, conforme a figura abaixo:

Editor”, vamos agora arrumar tudo denovo até chegarem nesse ponto:

um ponto de curva (curve point), para isso vamos clicar sobre um dos pontos,

e vocês verão que o ponto ficará vermelho, clicando com

o botão direito do mouse sobre ele, vai se abrir uma janelinha com onde

clicaremos em “Point Properties”:

mais uma ferramenta de desenho que é a “Tangent Point” que

é bem parecida com o “Curve Point” A diferença agora

é que agora as abas para se desenhar ficam indepentes, então vamos

voltar para o scene editor e vamos salvar esse documento, e criar um novo, nele

com a ferramenta “Corner Point” vamos fazer um desenho assim:

perceberam, essa janela serve pra alterar os formatos dos pontos já criados,

então vamos aqui transformar esse desenho em uma taça alterando

os pontos com o “Tangent Point”, para isso é só clicar

sobre os pontos e ir ajustando as curvas no palco, lembrando que deverá

ser alterado as propriedades ponto a ponto:

daquela linha verde, ele acaba fazendo um torno, preenchendo a figura toda,

com isso podemos Tambem afastar o desenho dessa linha verde e criar mais figuras,

como um anel, uma argola, pneu, onde depois daremos animações

e importaremos pro flash, vejam alguns exemplos de figuras feitos com o Lathe

Editor:

Na próxima semana começaremos falar sobre as timelines

deste software, para usar em aplicações junto com o Flash, portanto

até a próxima semana, espero que aproveitem esse tutorial.

Até a próxima !!!

Gustavo Henrique Carneirinho ]]> http://www.mxstudio.com.br/tecnologia/geral/swift_3d_parte_ii___ferramenta__quot_lathe_editor_quot_/feed/ 1 http://www.mxstudio.com.br/desenvolvimento/flash/preloader_com_barra_horizontal_e_campo_de_texto_com_porcentagem/ http://www.mxstudio.com.br/desenvolvimento/flash/preloader_com_barra_horizontal_e_campo_de_texto_com_porcentagem/#comments Wed, 11 Feb 2004 00:00:00 +0000 Gustavo

Preloader com barra de rolagem horizontal, porcentagem e setas

que acompanham a barra de carregamento:

Sempre que navegamos na web, costumamos dar de frente com aqueles

preloaders, uns mais loucos que o outro, uns que a barra cresce, outro que indica

porcentagem, emfim, existem muitos modos de se fazer um preloader, hoje vamos

colocar aquí os mais comuns na web e explicar a funcionalidade de cada

um.

A ação _root.getBytesLoaded(); como o nome já

diz, faz a leitura do total de bytes carregados do seu swf, e o _root.getBytesTotal();

faz a leitura do total de bytes que tem o seu arquivo swf.Então dessa

forma podemos dizer que o filme só estará carregado quando o total

de bytes carregados de um filme, for igual ao total de bytes que o filme tem

e encima disso dá pra fazer os preloader visuais, aqueles que você

vê na tela o quanto do arquivo já foi carregado, e o quanto ainda

falta, isso é bem bacana porque se não tivesse o preloader num

site mais demorado para carregar, o usuário sem saber o que está

acontecendo, pode desistir de ver o site, mas isso tambem não é

carta branca para se fazer sites muito pesados, pois não é nada

agradável ficar esperando muito tempo para se ver um site, sabemos que

temos tudo nas mão para fazer um site lindo e cheio de efeitos, mas não

podemos esquecer, que nem todo mundo navega em banda larga ainda, e mesmo os

que navegam as vezes não gostam de esperar tanto, portanto cuidado ao

fazer filmes pesados, mas vamos ao assunto:

Primeiro Exemplo:

Esse preloader, terá uma caixa de texto dinâmico,

que informará ao visitante do site, o tamanho do seu arquivo, e o quanto

em porcentagem foi carregado, junto com ele terá uma barra horizontal

que crescerá de acordo com o total de bytes carregados, por fim para

que fique mais bonito, teremos uma seta (movieClip) que se deslocará

para a direita, dando a impressão que ele acompanha a barra enquanto

ela é carregada, então mão a obra !!!

Vamos criar um documento novo, e no primeiro layer vamos colocar

o nome dele como “ações”, e vamos dar a seguinte ação

pra ele:

stop();

Isso é para parar o nosso filme no primeiro frame onde

terá o preloader, então no preloader vamos comparar o total de

bytes carregados com o total de bytes do arquivo, quando eles se igualarem (em

100%) daí daremos uma ação para ele reproduzir o nosso

filme.

Agora vamos fazer um novo layer (camada), e vamos dar o nome

a ele de “preloader”, vamos trancar o layer de ações

e trabalhar apenas nesse layer agora. vamos então clicar no menu Insert

>> New Symbol >> e vamos criar um movieclip com o nome “preloader”,

se vocês repararem, vai aparecer uma nova timeline em branco, que será

a timeline do nosso movieclip “preloader” conforme a imagem abaixo:

Vamos nomear esse primeiro layer como “Texto”, e clicar

na ferramente “Text Tool” para criar um campo de texto dinâmico

no palco, então na barra de propriedades vamos mudar o Text Tool para

Dynamic Text, vamos marcar o alinhamento do texto ao centro, e clicando e arrstando

o mouse no palco, vamos criar a caixa no palco, depois de criada vamos clicar

na ferramenta “Arrow Tool” (que é aquela setinha preta), vamos

clicar no campo de texto para abrir as propriedades dele e no campo “var”

vamos digitar “mensagem” sem aspas:

Agora vamos trancar esse layer, e criar mais um com o nome Barra

Horizontal, que será a nossa barrinha que irá crescer de acordo

com o progresso do filme carregado, então vamos desenhar um retangulo

pequeno de mais ou menos 15 px em altura e largura, vamos seleciona-lo e apertar

a tecla F8, vai abrir uma tela para você salvar esse quadrado como um

simbolo gráfico, então vamos dar o nome a esse simbolo de Barra

horizontal e antes de clicar em ok, vamos mudar seu ponto de registro para a

esquerda conforme a figura abaixo:

Isso fará com que o movieclip barra horizontal fique com

o ponto de registro a esquerda, sendo assim, ele ficará na coordenada

0 em X dentro do movieclip, isso é importante pois fará com que

a barra cresça somente para o lado direito, ao invés de crescer

metade para cada lado, caso ela estivesse com o ponto de registro centralizado,

ou se tambêm colocar a direita, então ele vai crescer sentido contrário.

Agora voltando ao trabalho, estamos no layer com a barra feita,

então vamos pegar esse movieclip e dar o nome de instancia pra ele de

“barra_horizontal” sem aspas, e posiciona-lo no palco do lado esquerdo:

Feito isso, vamos trancar esse layer, e fazer um novo layer que

será a seta, que é um movieclip que vai se deslocar para a esquerda,

dando a impressão que ele acompanha o progresso todo da barra, então

vamos desenhar uma seta no palco dentro desse novo layer “seta”, vamos

selecionar a seta, transforma-la num movieclip, e vamos dar o nome de instancia

pra ela de “seta” sem aspas e posiciona-la abaixo da barra horizontal:

Agora vamos criar mais um layer com o nome de ações,

e vamos colocar a seguinte ação nesse layer:

t = _root.getBytesTotal()/1024;

c = _root.getBytesLoaded()/1024;

p = int((c/t)*100);

mensagem = “Foram carregados “+p+”% de “+int(t)+”Kb.”;

barra_horizontal._width = p*3;

seta._x = -154+(p*3);

if (c == t) {

_root.play();

}

Detalhando o código:

t = _root.getBytesTotal()/1024; // Aqui declaramos uma variavel

com o nome “t”,ela vai pegar o total de bytes do arquivo swf e dividir

por 1024 que é o valor de 1 kbyte, ou seja cada 1024 bytes, correspondem

a 1 kb, então como usamos mais os resultados em kbytes, faremos essa

conta para ele contar cada 1024 bytes, como 1 kb.

c = _root.getBytesLoaded()/1024; // Aqui declaramos uma variavel

com o nome “c”, ela vai pegar o total de bytes carregados do arquivo

swf e tambem dividir por 1024 do mesmo jeito.

p = int((c/t)*100); // p é variavel que acabamos de formar,

que vai pegar o valor inteiro dos bytes carregados, dividir pelos bytes total,

de desse resultado, multiplicar por 100 que será a porcentagem do arquivo

que já foi carregado.

Então dessas variaveis que criamos, vamos montar uma mensagem

para os visitantes naquele campo de texto dinâmico, com o código

mensagem = “Foram carregados “+p+”% de “+int(t)+”Kb.”;

Então acima, declaramos que o campo mensagem vai receber o texto “foram

carregados” mais o valor dos kb carregador em porcentagem, mais o sinal

de “%” do valor dos bytes total + o texto kb.

barra_horizontal._width = p*3; // Aqui a largura da barra_horizontal

será o valor de p multiplicado por 3, ou seja, vai começar com

3 pixels, que é o valor de 1, e ao final multiplicado por 3 terá

300 pixels, esse valor é adaptavel pro tamanho do seu filme, pode ser

alterado, pra 1, pra 2, pra 4, dependendo do valor que vocês queiram que

a barra cresça.

seta._x = -154+(p*3); // Aqui a seta vai se deslocar para a esquerda

de acordo com o progresso da barra, só que um script não depende

do outro, só vamos declarar aqui a posição inicial da seta

em X dentro do movieclip como ponto inicial, no meu caso foi -154 e a sua posição

em _x será a posição inicial -154 somado com o valor dos

bytes carregados multiplicado por três, ou seja, a cada 1 porcento ela

vai se deslocar 3 pixels, até atingir 300 pixels tambêm.

if (c == t) {

_root.play();

} // Aqui é o que faz todo o sentido do preloader, ele faz uma condição

“Se o total de bytes carregados for igual ao total de bytes do arquivo,

então ele vai mandar a timeline principal reproduzir, então sairá

daquele stop(); que colocamos no frame principal.

Pra finalizar tudo isso, vamos apertar a tecla F5 em todos os

frames 2 desse movieclip para criar um loop dessas ações, tirando

o layer do Logo que eu criei, seus frames deverão ficar assim:

E no fim do seu trabalho, seu preloader deverá ficar assim:

Baixe aqui o fla desse exemplo zipado AQUI

Hora de brincar com o código !!!

Agora que aprendemos a fazer um preloader simples, vamos dar

uma modificada nele, vamos alterar o campo de texto, e fazer com que ele diga

o quanto de Kbs foram carregados, ao invés de mostras a porcentagem.Então

vamos alterar a linha do código do campo de texto “mensagem”,

para essa:

mensagem = “Foram carregados “+int(c)+”Kb”

+” de “+int(t)+”Kb.”;

Então aqui a mensagem vai receber o valor inteiro de “c”

que são os bytes carregados, como expliquei no tutorial lá encima.

Agora vamos fazer o seguinte, vamos editar o movieclip da seta,

e colocar mais um campo de texto dinâmico lá dentro, para a porcentagem

concluída acompanhar a seta, assim o preloader vai ficar um pouco mais

bacana.

Destranquem então o layer “seta”, e vamos editar

o movieclip seta dando um duplo clique no ponto central dele ou editando direto

na biblioteca, então lá teremos um layer com a seta desenhada,

e vamos criar mais um campo de texto dinamico, com a var “porcentagem”,

como a firgua abaixo:

Agora voltando a timeline do Movieclip, vamos colocar a seguinte

linha no código:

seta.porcentagem = int(p) + “%”;

Então aquí vamos ordenar que o campo porcentagem

que está dentro do movieclip “seta”, receba o valor de “P”

mais o sinal de porcentagem, então no final seu código inteiro

deverá ficar assim:

t = _root.getBytesTotal()/1024;

c = _root.getBytesLoaded()/1024;

p = int((c/t)*100);

mensagem = “Foram carregados “+int(c)+”Kb” +” de “+int(t)+”Kb.”;

seta.porcentagem = int(p) + “%”;

barra_horizontal._width = p*3;

seta._x = -154+(p*3);

if (c == t) {

_root.play();

}

No final de tudo, com essas alterações, seu trabalho

deverá ficar assim:

Baixe aqui o fla desse exemplo zipado AQUI

Até a próxima !!!

Gustavo Henrique Carneirinho