Você está na página 1de 44

Este curso tem por propósito mostrar detalhadamente as principais características do

Macromedia Flash.. Foi escrito para usuários principiantes em Flash. Ao fazer este
curso o usuário terá uma base sólida para saber se é realmente algo como o Flash que
ele esta a procura, e com o conhecimento adquirido aqui, ele estará apto para criar
animações em um ambiente visual, para seus sites, trabalhos e clientes..
Este pode ser um ótimo começo para um animador profissional.

Ao longo do curso vamos construir várias animações, e algumas não somente com a
finalidade de simples exemplos, mas também como alguma utilidade prática. Cada
animação será comentada e entendida, todas propriedades importantes serão
explicadas e demonstradas.

Abra o Flash e ele automaticamente criará um novo projeto. Caso isso não
aconteça clique em File>New.
Vamos conhecer um pouco mais sobre o Flash.
- Barra de Opções(1)
- Barra de Ferramentas(2)
- Layers( Camadas ) (3)
- Time Line ( Linha de Tempo ) (4)
- Propriedades (5)
- Ações (6)

Segue abaixo uma breve explicação sobre as áreas do Flash:

(1) - Barra de Opções - É a barra que todos programas possuem, onde você possui
varias opções, como salvar, abrir, formatar fonte e muita outras opções que veremos
mais pra frente.
(2) - Barra de Ferramentas - É a barra que mais usamos em nossos trabalhos, nelas
contemos tudo que prescisamos para crias nossos clips, masi pra frente veremos um
explicação mais detalahada sobre ela.
(3) - Layers - São as camadas de nossa animação, usadas para deixar um objeto atras
do outro por exemplo.
(4) - Time Line - Nossa linha do tempo, é onde vamos determinar a velocidade e a
ordem de nossas animações.
(5) - Propriedades - Neste local podemos editar as propriedades do nosso arquivo, ou
de algum objeto selecionado.
(6) - Ações - Aqui adicionamos as ações aos nosso objetos, usamos a liguagem
chamada " Action Script ".

A Barra de Ferramentas
Vamos conhecer as funções exatas de cada ferramenta:

- Ferramenta Seta (V) - Usada para selecionar,arrastar e redimensionar textos,


objetos ou um clipes de filme. Com ela você pode selecionar apenas partes do objeto
desejado.

- Ferramenta Subselecionar (A) - Usada para selecionar, arrastar e redimensionar


textos, objetos ou um clipes de filme. A diferença dela é que você seleciona o objeto
inteiro.
- Ferramenta Linha (N) - Simples ferramenta para criação de linhas, para usa -la
clique onde deseja iniciar a linha, segurando o botão esquerdo arraste até o onde
deseja que seja o final da linha e solte.
- Ferramenta Laço (L) - Usada para selecionar,arrastar e redimensionar textos,
objetos ou um clipes de filme, porém você pode selecionar da forma que quiser, não
necessariamente sendo de forma retamgular.
- Ferramenta Caneta (P) - Para desenhar caminhos precisos como linhas retas ou
curvas suaves, você pode usar a ferramenta Caneta. Você pode criar segmentos de
linha curvos ou retos e ajustar o ângulo e o comprimento de segmentos retos e a
inclinação de segmentos curvos.
- Ferramenta Texto (T) - Utilizada para adicionar textos.
- Ferramenta Oval (O) - Para criar circunferências, com preenchimentos ou não.
- Ferramenta Retângulo (R) - Utilizada para criar retângulos e quadrados.
- Ferramenta Lápis (Y) - Para desenhar linhas e formas, da mesma forma como
usaria um lápis de verdade para desenhar.
- Ferramenta Pincel (B) - Mesma função da ferramenta lápis, porém com mais
funções.
- Ferramenta " Transformação Livre " (Q) - Utilizada para tranformar uma área
selecioanda ou o objeto inteiro.
- Ferramenta " Transformar preenchimento " - É possível transformar um
preenchimento de gradiente ou de bitmap ajustando o tamanho, a direção ou o centro
do preenchimento. Para transformar um preenchimento de gradiente ou de bitmap,
use a ferramenta Transformar preenchimento.
- Ferramenta Tinteiro (S) - Utilizado para colorir objetos, ainda sem preenchimento.
- Ferramenta Balde de Tinta (K) - Utilizado para colorir objetos ou alterar a cor de
um objeto ja preenchido.
- Ferramenta Conta-gotas (l) - Para absorver a cor de um determinado local, para
ser usada em outro objeto.
- Ferramenta Apagador (E) - A velha e conhecida borracha, utilizada para apagar
algo.

Camadas
Camadas são utilitzadas para empilhar uma imagem sobre a outra. Elas o ajudam a
organizar as ilustrações no seu documento. Você pode editar uma camada sem mesmo
interfirir nas outras.
Quando abrimos um novo documento, o Flash abre om apenas uma camada, caso
queira adicionar outras clicamos no botão .
Veja abaixo um exemplo com três camadas.

Perceba que a ordem das camadas é a mesma das bolas, lembrando que para
renomear uma camada bastar dar um clique duplo no nome da camada.
Agora vamos alterar as camadas para você entender melhor, para alterar basta clicar
sobre a camada e arrasta -la para cima ou para baixo.
Veja que coloquei a camda da bola verde em cima de todas, assim a bola verde ficou
em cima de tudo em nossa animação.

Linha do Tempo

A linha do tempo serve para organizamos o tempo e a ordem de nossa animação. Na


linha do tempo contemos os quadros e os quadros chaves, que a seguir explicaremos
melhor.

Vamos fazer um exercicio para você enteder:

1- Crie um circulo ( ferramenta oval ) de sua preferência.

2 - Insira um quadro-chave no 5º quadro, para isso clique com o botão direito no 5º


quadro e em seguida em Inserir Quadros-chave.
3 - Agora com o Quadro-chave 5 selecionado mova o circulo para onde você desejar

com a ferramenta .

4 - Agora clique em Controlar > Testar Filme ou se preferir as teclas de atalho aperte
CTRL + ENTER, você perceberá que já criou sua primeira animação, a bola comeã no
local do quadro 1 quando chega no quadro 5 ela vai pra o lugar que você mudou no
quadro 5.
Animando
Agora que você ja conhece um pouco sobre o flash, vamos criar uma animação.
1 - Crie um quadrado com preenchimento de sua escolha.
2 - Agora que você já aprendeu a inserir quadros-chave, insira um Quadro-chave do
quadro 20.

3 - No quadro 20 apague o seu quadrado, e insira um circulo em qualquer lugar da tela


com outra cor de preenchimento.
4 - Agora vamos criar uma " Interpolação " para isso selecione o primeiro quadro e va
nas propriedades, que ficam abaixo na tela, depois em Interpol.: selecione Forma.
Veja a figura abaixo.

Botões
Vamos aprender criar botões, uma parte bem legal do flash.
1 - Crie um quadrado com preenchimento a sua escolha.

2 - De um duplo clique no quadrado com a ferramenta , e depois em Inserir >


converter em simbolo na barra de opções em cima da tela.
3 - Abrirá uma janela, preencha conforme a figura abaixo e clique em OK:
4 - Agora que transformamos nosso quadrado em um botão, vamos edita -lo par isso
de um duplo clique em cima do nosso quadrado ou se preferir clique com o botão
direito no quadrado e selecione Editar.
5 - Perceba na linha do tempo apareceram 4 quadros, como mostra a figura abaixo:

Para Cima - É o estado do botão normal que ele vai ficar na tela.
Sobre - É o estado do botão quando a seta do mouse estiver sobre ele.
Para baixo - É o estado do botão quando você clicar sobre ele.
Área - Tudo que você coloca no quadro área não vai aparecer no botão, é para você
definir a áre clicavel do botão.
Então vamos la, insira um quadro-chave no quadro "Sobre" e com o quadro "Sobre"
selecionado, altere a cor de seu quadrado. Depois criei um quadro-chave no quadro
"Para baixo" e diminua um poco o tamanho do quadrado.
Agora teste seu botão apertando CTRL + ENTER,
Clipe de Filme
Vamos aprender um poco o que são os Clipes de Filme ( Movie Clip ), vamos criar um
exemplo de Clipe de Filme.
1 - Crie um circulo com preenchimento a sua escolha.

2 - Agora selecione o circulo com a ferramenta e clique em Inserir > Converter em


Simbolo.
3 - Abrirá uma janela, preencha de acordo com a figura abaixo e clique em OK:

4 - Agora de dois cliques sobre o circulo e perceba que você vai entrar dentro do Clipe
de Filme, então insira um quadro-chave no quadro 3, e com o quadro tres selecionador
altere a cor do simbolo.
5 - Agora volte para a cena principal, para isso clique no botão seguindo a figura
abaixo:

6 - Agora vamos abrir nossa biblioteca, que é onde ficam gravados todos nossos
botões, clipes de filmes e símbolos. Com isso podemos criar apenas uma vez o clipe de
filme e adiciona -lo várias vezes na nossa animação. Para abrir a biblioteca, clique em
Janela > Biblioteca ou aperte F11, abrirá a biblioteca como na figura abaixo.
7 - Com a biblioteca aberta clique e arraste seu clipe de filme quantas vezes quiser
para a tela, e depois teste apertando CTRL + ENTER
Ações
Agora que você ja sabe criar um botão, vamos aprender a usar as ações.
1 - Primeiro crie um botão qualquer e deixe -o no primeiro quadro.
2 - Agora vamos colocar uma ação no primeiro quadro, selecione o primeiro quadro na
linha do tempo, e clique em ações, agora verifique se o modo especialista esta
selecionado, caso não esteja selecione, veja como na figuara abaixo:

3 - Então insira o seguinte código:


stop();

4 - Agora insira um quadro-chave no quadro 2, então com o quadro 2 selecionado


apague o botão, e como você ja aprendeu, insira um figura qualquer. Depois insira
uma ação stop() , igual você fez no primeiro quadro.
5 - Agora volte ao quadro 1, clique no botão e va nas ações do botão, que ficam logo
abaixo na tela. E insira o seguinte código:
on(press){
gotoAndPlay(2)
}

6 - Agora teste sua animação, aperte CTRL + ENTER

Animação Transparente
Para criar animações que se encaixem adequadamente a um layout muitas vezes pode
se parecer tarefa impossível, mas não é. Este exemplo que estou dando poderá ser
muito útil para quem gosta de integrar FLASH com HTML.
Para se fazer animações com fundos transparentes basta acrescentar este parâmetro
no código fonte da página onde se encontra a animação:
height=100 type="application/x-shockwave-flash" pluginspage=
"http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash">
Spectrum Analizer
os famosos medidores de som
Para quem não conhece, ou não tenha ouvido falar a respeito, trata-se dos "leds" que
vemos nos aparelhos de som ou até mesmo em alguns softwares de som como o
Winamp.
A pergunta que existia era a seguinte: Existiria a possibilidade de criarmos um
spectrum analizer com Flash?
Sim. Graças à nova tecnologia do Macromedia Flash MX, que nos permite utilizar de
alguns parâmetros inexistentes para as versões anteriores.
Vamos construí-lo?
Primeiro abra o seu Flash MX...rs.
Começaremos criando um Movie Clip (MeuSpectrum) que contém uma camada e dez
frames. Nestes dez frames, cada um com nove quadrados um em cima do outro:

À medida em que os frames aumentam (1, 2, 3, 4, 5...), acrescente cores aos


quadrados, até que no 10º frame os nove quadrados estejam coloridos.

Spectrum Analizer
os famosos medidores de som
Volte à cena principal (Scene 1) e arraste o Movie Clip (MeuSpectrum) para o palco (no
1º e único frame) instanciando-o de "meuSpectrum" (sem aspas). Neste mesmo
frame, crie um campo de texto dinâmico e instancie-o de "meuNivel" (sem aspas tb!).
Crie uma nova camada no filme, abra o painel de ações no modo expert e coloque o
seguinte script:
createEmptyMovieClip("micAudio", 3);
micAudio.attachAudio(Microphone.get());
setaMic = Microphone.get();
setaMic.setUseEchoSuppression(1);
setaMic.setRate(128);
setaMic.setSilenceLevel(50);
setaMic.setGain(10);
setaSom = new Sound(micAudio);
setaSom.setVolume(0);
onEnterFrame = function () { amp =
_root.setaMic.activitylevel;_level0.meuSpectrum.gotoandstop(math.round((amp/8)));_
level0.meuNivel.text = math.round(amp/8);};
function fazSom(inAmp) {
minhaVoz.setVolume(inAmp);
}
Bom, publique seu filme, permita o acesso e fale algo ao microfone e/ou ligue um som
para conferir o resultado!
Controle de MovieClip via Microphone.get()
Crie um filme com uma Cena (Cena 1) duas Camadas – “DES16N” e "AÇÕES" - ajuste
a velocidade do filme para 30 qps.
No primeiro frame da Camada DES16N, crie um movie clip com alguma animação
qualquer e instancie-o de "des16n" (sem aspas) também.
Agora, na camada AÇÕES, no primeiro e único frame insira as seguintes actionscripts
no modo especialista:
createEmptyMovieClip("micAudio", 3);
// cria um mc vazio e coloca as propriedades de microfone
micAudio.attachAudio(Microphone.get());
// "atacha" audio com o parâmetro Microphone.get ()
setaMic = Microphone.get();
setaMic.setUseEchoSuppression(0);
// setRate baixo pois não queremos qualidade, apenas o movimento
setaMic.setRate(10);
setaMic.setSilenceLevel(0);
// setGain baixo também
setaMic.setGain(10);
// aqui ... acontece tudo de novo =)
setaSom = new Sound(micAudio);
setaSom.setVolume(0);
des16n.onEnterFrame = function() {
des16n.stop();
carinha1 = _root.setaMic.activityLevel*3;
// play no mc!!!
if (Math.abs(carinha1-_root.carinha)>10) {
_root.carinha = des16n.play();
}
};
stop();
Bom, publique seu filme, permita o acesso e fale algo ao microfone e/ou ligue um som
para conferir o resultado!
É um grande motivo pra gente começar a pensar em uma navegação diferenciada -
que tal, através deste, criar uma navegação controlada por sons?

Efeito gradiente variável

Muitos colegas perguntam nas listas de discussão da ferramenta como obter


gradientes variáveis.

Faremos, através de algumas linhas de Actionscript, um efeito interessante usando


cores da ferramenta de forma que obteremos uma mudança gradiente.

Tentaremos simular uma "Aurora Boreal". =)

Vale frisar que gradientes utilizam milhões de cores e ao usarmos de maneira incorreta
obteríamos um filme de baixa qualidade e tamanho inviável para web, em kbs. Neste
exemplo, obteremos um arquivo *.swf com o tamanho de 2,80 kb.

Portanto, é extremamente importante que mexamos no código abaixo para irmos nos
familiarizando com o Actionscript, alterando valores para observar os resultados.

Crie um filme com uma Cena e uma Camada – ajuste a velocidade do filme para 20
qps.
No único frame, abra o painel de ações no modo expert e insira as seguintes linhas:

velocidadeVermelho1 = .1;
velocidadeVerde1 = .07;
velocidadeAzul1 = .04;
velocidadeVermelho2 = .09;
velocidadeVerde2 = .06;
velocidadeAzul2 = .03;
velocidaderotacao = .01;
onEnterFrame = function () {
anguloVermelho1 += velocidadeVermelho1;
anguloVerde1 += velocidadeVerde1;
anguloAzul1 += velocidadeAzul1;
anguloVermelho2 += velocidadeVermelho2;
anguloVerde2 += velocidadeVerde2;
anguloAzul2 += velocidadeAzul2;
vermelho1 = Math.sin(anguloVermelho1)*127+128;
verde1 = Math.sin(anguloVerde1)*127+128;
azul1 = Math.sin(anguloAzul1)*127+128;
vermelho2 = Math.sin(anguloVermelho2)*127+128;
verde2 = Math.sin(anguloVerde2)*127+128;
azul2 = Math.sin(anguloAzul2)*127+128;
col1 = vermelho1 << 16 | verde1 << 8 | azul1;
col2 = vermelho2 << 16 | verde2 << 8 | azul2;
rot = Math.sin(anguloRotacao += velocidaderotacao)*Math.PI;
cores = [col1, col2];
alphas = [100, 100];
radianos = [0, 255];
matriz = {matrixType:"box", x:0, y:0, h:400, w:550, r:rot};
clear();
beginGradientFill("linear", cores, alphas, radianos, matriz);
lineTo(550, 0);
lineTo(550, 400);
lineTo(0, 400);
lineTo(0, 0);
endFill();
};
Formulário Flash + PHP
Após colocar um formulário em meu site, muitos colegas me perguntaram como
funcionava e mencionaram da possibilidade de fazer um tutorial a respeito.
Bom aqui estou, mostrarei como criar um *.swf que capta informações de caixas de
texto, envia o formulário para o administrador e responde automaticamente para o
cliente.
Vale frisar que para o funcionamento deste formulário é necessário que o servidor local
dê suporte para arquivos *.php.
Começaremos pelo arquivo do Flash:
Criaremos tudo dentro de um movie clip instanciado de "email" (sem áspas), para que
vocês possam usá-lo em outras ocasiões utilizando apenas a cópia do movie clip.
1. Crie um movie clip e o instancie de "email" (sem aspas), o movie clip todo tem 123
quadros.
Este movie clip contém seis camadas.
botãoTAB
ações
nomenosquadros
avisos
botões
caixadetexto
botãoTAB:
Crie um botão e coloque-o fora do palco. Coloque as seguintes linhas de actionscript
nele:
on (keyPress "<Tab>") {
if (Selection.getFocus() == null) {
Selection.setFocus("_level0.email.inputNome");
} else if (Selection.getFocus() == "_level0.email.inputMensagem") {
Selection.setFocus("_level0.email.inputNome");
} else if (Selection.getFocus() == "_level0.email.inputTel") {
Selection.setFocus("_level0.email.inputMensagem");
} else if (Selection.getFocus() == "_level0.email.inputCidade") {
Selection.setFocus("_level0.email.inputEstado");
} else if (Selection.getFocus() == "_level0.email.inputEmail") {
Selection.setFocus("_level0.email.inputTel");
} else if (Selection.getFocus() == "_level0.email.inputEstado") {
Selection.setFocus("_level0.email.inputEmail");
} else if (Selection.getFocus() == "_level0.email.inputNome") {
Selection.setFocus("_level0.email.inputCidade");
}
}
Este código seta a tecla TAB para mover o cursor para o próximo campo.
ações:
No primeiro quadro insira stop();
No quadro 55, crie um quadro-chave em branco e coloque a ação:
gotoAndStop("start");
No quadro 56, crie outro quadro-chave em branco e insira:
verifica = 0;
No quadro 72 coloque:
if (verifica == 1) {
gotoAndPlay(57);
} else {
gotoAndPlay("valido");
}
No quadro 123 coloque:
inputNome = "";
inputCidade = "";
inputEstado = "";
inputEmail = "";
inputTel = "";
inputMensagem = "";
_root.email.callback.gotoAndStop(1);
gotoAndStop("start");
nomenosquadros:
No primeiro quadro, selecione-o e abra a caixa de propriedades.
Nomeie o quadro de "start" - sem áspas.
No quinto quadro, nomeie "invalido" - idem.
No 57º, nomeie "verifica" - idem. E insira uma imgem no palco de "verificando dados",
por exemplo.
No 73º, nomeie "valido" - idem.
avisos:
Do 5º ao 55º coloque uma imagem de erro indicando a falta no preenchimento dos
campos obrigatórios.
No 73º coloque outra imagem, desta vez, agradecendo o cliente pelo preenchimento.
Afinal de contas é um saco ficar preenchendo formulários né? =)

botões:

Crie dois botões - Enviar e Limpar

No botão Enviar insira:

on (release) {
if (inputNome ne "" and inputEmail ne "" and inputMensagem ne "") {
loadVariablesNum("email.php", 0, "POST");
gotoAndPlay("verifica");
} else {
gotoAndPlay("invalido");
}
}

Neste caso estamos verificando se os campos obrigatórios (no caso - nome, email e
mensagem) mencionados foram preenchidos, caso contrário o filme é encaminhado
para o frame "invalido".

No botão Limpar insira:

on (release) {
inputNome = "";
inputCidade = "";
inputEstado = "";
inputEmail = "";
inputTel = "";
inputMensagem = "";
_root.email.callback.gotoAndStop(1);
}

Aqui, estaremos fazendo com que as caixas de texto tenham seus campos limpos ou
esvaziados.

caixadetexto:
Insira 8 caixas de texto no modo input text onde duas delas, com as variáveis setadas
de inputCallback (aqui, veremos logo à frente, um botão de escolha que usará esta
variável) e action estejam fora do palco.

As outras seis caixas de texto e suas variáveis são:

inputNome;

inputCidade;

inputEstado;

inputEmail;

inputTel;

inputMensagem.

Agora, nesta mesma camada, crie um movie clip e o instancie de "callback" (sem
áspas). Este mc possui duas camadas e dois quadros.

Na primeira camada e primeiro quadro insira a ação stop();

Na segunda camada e primeiro quadro, crie um botão no estado vazio (imagem sem
preenchimento) e coloque a seguinte ação nele:

on (release) {
nextFrame();
_root.email.inputCallback = "yes";
}

Isto faz com que ao clicá-lo a mensagem "yes" aparecerá na caixa de texto situada
fora do palco com a variável inputCallback e moverá o filme para o próximo quadro;

Ainda na segunda camada mas no 2º quadro, crie outro botão no estado cheio (com
imagem preenchendo-o) e insira as seguintes linhas de actionscript:

on (release) {
prevFrame();
_root.email.inputCallback = "no";
}

Aqui, estaremos enviando para a variável inputCallback o valor "no" - que seria como
se desmarcássemos a opção de "urgência" de resposta, por exemplo. No meu
formulário serviu para que os internautas me deixassem saber se havia interesse de
serem comunicados sobre o lançamento de meu site.

No flash, terminamos. Partiremos agora para a criação do arquivo email.php:

Abra o bloco de notas e insira:

<?
$cabecalho = "From: Seu nome <seu@email.com.br> ";
// Seu email aqui
$emailadmin = "seu@email.com.br";

// seu site
$siteadmin ="http://www.seusite.com.br";

// O nome da companhia
$nomesite = ".Seu nome";

// pega a data do servidor


$date = date("m/d/Y H:i:s");

// Pega o IP cliente - este aqui era pra ser segredo! hehehe


if ($REMOTE_ADDR == "") $ip = "no ip";
else $ip = getHostByAddr($REMOTE_ADDR);

//Processa e envia as informações coletadas no flash para o seu email

//IF ($action != "")


//{
$mens .= "Opinião sobre conteúdo do livro

";
$mens .= "Nome: $inputNome
";
$mens .= "Cidade: $inputCidade
";
$mens .= "Estado: $inputEstado
";
$mens .= "Email: $inputEmail
";
$mens .= "Telefone: $inputTel
";
$mens .= "Saber sobre o lançamento? : $inputCallback
";
$mens .= "Mensagem: $inputMensagem
";
$mens .= "------------------------------
";
$mens .= "Informações:
";
$mens .= "Usando: $HTTP_USER_AGENT
";
$mens .= "Hostname: $ip
";
$mens .= "Endereço de IP: $REMOTE_ADDR
";
$mens .= "Data/Hora: $date
";
mail("$emailadmin","Aqui o assunto do formulário","$mens","$cabecalho");
echo "&verifica=1";
//Aqui envia um email de confirmação para o usuário
mail("$inputEmail","Obrigado por visitar $nomesite","NONONonONONonoNONonon n
ono non ononon onono nono no nonon on","$cabecalho");

//Confirmação que o flash recebe


$sendresult = "Done!";
$send_answer = "answer=";
$send_answer .= rawurlencode($sendresult);

// echo "$send_answer";

//}

?>

Salve-o como email.php e pronto! Temos um formulário que envia mensagens e


responde automaticamente para o usuário!

Preload Class
Trata-se de um *.swf que carrega *.swf's externos com um preloader próprio, isto é,
os *.swf's externos não possuem preloader.
E é por isso que esta semana iremos aprender como construí-lo.
Nesta versão Jonas Galvez utilizou o novo método addProperty da classe Object que
permite definir propriedades com getters e setters. O recurso é muito interessante,
pois ele permite que o usuário acesse propriedades internas indiretamente. Agora para
iniciar o preloader, é preciso chamar o método startPreload. O usuário pode parar o
preloader a qualquer momento, chamando o método stopPreload, mas este método já
é chamado implicitamente pelo evento onPreloadComplete. Segue abaixo a lista
completa das propriedades, métodos e eventos da classe.
Preloader.addMovieClips
(Adiciona um ou mais movieclips para serem monitorados pelo Preloader)
Preloader.bytesLeft
(Retorna o número de bytes restantes a serem carregados)
Preloader.bytesLoaded
(Retorna o número de bytes carregados)
Preloader.bytesTotal
(Retorna o número total de bytes)
Preloader.hasMovieClip
(Verifica se um movieclip já está incluído no Preloader)
Preloader.movieclips
(Array com todos os movieclips incluídos no Preloader)
Preloader.onPreloadComplete
(Event Handler chamado quando o carregamento termina)
Preloader.onPreloadUpdate
(Event Handler chamado continuamente durante o carregamento)
Preloader.percentage
(Retorna o progresso do Preloader em porcentagem)
Preloader.removeMovieClips
(Remove um ou mais movieclips do Preloader - propriedade movieclips)
Preloader.startPreload
(Inicia o Preloader)
Preloader.stopPreload
(Interrompe o Preloader)
E ainda usou uma instrução interessante - #include, onde chamaremos um arquivo de
texto externo salvo como um arquivo de actionscript (*.as).
Começaremos criando um arquivo com o tamanho de palco em 320 x 240 px e com
quatro camadas:
scripts
botões
movieclips
layout
No primeiro frame da camada scripts insira o seguinte código:
// -------------------------------------------------------------------
// Image Preloader 2
// by Thiago Borges Fonseca (thgb@bol.com.br)
// -------------------------------------------------------------------
fscommand("allowscale", false); //fixa o tamanho no palco do swf, para não distorcer a
imagem
this.stop();
#include "preloader.as" // inclui arquivo externo - preloader.as
this.createEmptyMovieClip("images", -1); // cria um movieclip vazio, instancia de
images e seta o local no palco
this.images._x = ((320/2)-(305/2)) - 1;
this.images._y = ((240/2)-(178/2)) - 1;
this.buttons._visible = false; // torna as instancias de botão invísivel, a barra e //suas
bordas visíveis enquanto os movies externos são carregados.
this.progressbar._visible = true;
this.progressbar_border._visible = true;
this.attachMovie("status_message", "status_message", 0); // anexa o mc
//status_message
this.status_message._x = 15;
this.status_message._y = 12;
var total_images = 5; // define o nº total de imagens
var preloaderObj = new Preloader(); //seta a variável preloaderObj
for(var i = 1; i < (total_images+1); i++) {
this.images.createEmptyMovieClip("image" + i, i);
this.images["image" + i].loadMovie("image" + i + ".swf");
preloaderObj.addMovieClips(this.images["image" + i]);
this.buttons["button" + i].onRelease = function() {
for(var mc in _root.images) _root.images[mc]._visible = false;
_root.images["image" + this.i]._visible = true;
};
this.buttons["button" + i].i = i;
};
preloaderObj.startPreload();
preloaderObj.onPreloadUpdate = function() {
_root.progressbar._xscale = this.percentage;
};
preloaderObj.onPreloadComplete = function() {
for(var i = 0; i < this.movieclips.length; i++) {
this.movieclips[i]._visible = false;
this.movieclips[i].gotoAndStop(2);
};
_root.status_message.removeMovieClip();
_root.buttons._visible = true;
_root.progressbar._visible = false;
_root.progressbar_border._visible = false;
};
// -------------------------------------------------------------------
// ENG DTP & Multimídia
// http://www.eng.com.br/
// -------------------------------------------------------------------
Na camada botões, crie um movie clip e o instancie de "buttons" (sem áspas).

Dentro deste movie clip crie cinco botões e os instancie de "button1", "button2",
"button3", "button4" e "button5" - todos sem áspas.

Note que não há ações para os botões - esta é uma das grandes novas do Flash MX,
botões que podem ser instanciados e ter seus scripts declarados em um frame. =)

Volte para a cena principal.

Agora, na camada movieclips, crie uma barra horizontal com preenchimento e bordas.

Selecione somente a borda e pressione F8 - marque a opção Movie Clip. Uma vez
transformada a borda em movie clip, instancie-o de "progressbar_bord" (sem áspas).

Agora selecione somente o preenchimento da barra e pressione F8 - marque a opção


Movie Clip. Uma vez transformado o preenchimento em movie clip, instancie-o de
"progressbar" (sem áspas).

Na camada layout, crie um layout que desejar.

Agora abra um novo arquivo de texto no bloco de notas, iremos criar o arquivo
preloader.as.

Insira as seguintes linhas dentro do novo arquivo de texto:

// ------------------------------------------------------------------------
// Preloader Class v2.0
// by Thiago Borges Fonseca (thgb@bol.com.br)
// ------------------------------------------------------------------------

_global.Preloader = function() {
var args = (arguments[0].length) ? arguments[0] : arguments;
this.mcTotal = this.total = this.left = 0;
this.loaded = this._percentage = 0;
this.movieclips = new Array();
for(var i = 0; i < args.length; i++) {
if(args[i] instanceof MovieClip) {
this.mcTotal += args[i].getBytesTotal();
this.movieclips[this.movieclips.length] = args[i];
};
};
};
ASSetPropFlags(_global, "Preloader", 7);

Preloader.prototype.getBytesTotal = function() { return this.total; };


Preloader.prototype.addProperty("bytesTotal", Preloader.prototype.getBytesTotal,
null);
ASSetPropFlags(Preloader.prototype, "getBytesTotal", 7);

Preloader.prototype.getBytesLoaded = function() { return this.loaded; };


Preloader.prototype.addProperty("bytesLoaded", Preloader.prototype.getBytesLoaded,
null);
ASSetPropFlags(Preloader.prototype, "getBytesLoaded", 7);
Preloader.prototype.getBytesLeft = function() { return this.left; };
Preloader.prototype.addProperty("bytesLeft", Preloader.prototype.getBytesLeft, null);
ASSetPropFlags(Preloader.prototype, "addMovieClips", 7);

Preloader.prototype.getPercentage = function() { return this._percentage; };


Preloader.prototype.addProperty("percentage", Preloader.prototype.getPercentage,
null);

Preloader.prototype.startPreload = function() {
if(this.movieclips.length) this._interval = setInterval(this, "_main", 100);
};
ASSetPropFlags(Preloader.prototype, "startPreload", 7);

Preloader.prototype.stopPreload = function() {
clearInterval(this._interval);
};
ASSetPropFlags(Preloader.prototype, "stopPreload", 7);

Preloader.prototype.hasMovieClip = function(mc) {
if(mc instanceof MovieClip) {
for(var i = 0; i < this.movieclips.length; i++) {
if(this.movieclips[i] == mc) return true;
};
};
return false;
};
ASSetPropFlags(Preloader.prototype, "hasMovieClip", 7);

Preloader.prototype.addMovieClips = function() {
var args = (arguments[0].length) ? arguments[0] : arguments;
for(var i = 0; i < args.length; i++) {
if(args[i] instanceof MovieClip) if(!this.hasMovieClip(args[i])) {
this.mcTotal += args[i].getBytesTotal();
this.movieclips[this.movieclips.length] = args[i];
};
};
};
ASSetPropFlags(Preloader.prototype, "addMovieClips", 7);

Preloader.prototype.removeMovieClips = function() {
var args = (arguments[0].length) ? arguments[0] : arguments;
for(var i = 0; i < args.length; i++) {
if(!this.hasMovieClip(args[i])) {
this.mcTotal -= args[i].getBytesTotal();
for(var j = 0; j < this.movieclips.length; j++) {
if(this.movieclips[j] == args[i]) this.movieclips.splice(j, 1);
};
};
};
};
ASSetPropFlags(Preloader.prototype, "removeMovieClips", 7);

Preloader.prototype._main = function() {
this.total = this.loaded = 0;
for(var j = 0; j < this.movieclips.length; j++) {
this.total += this.movieclips[j].getBytesTotal();
this.loaded += this.movieclips[j].getBytesLoaded();
};
if(this.total != this.mcTotal) {
this.left = this.total - this.loaded;
this._percentage = Math.round(this.loaded*100/this.total);
this.onPreloadUpdate();
};
if(this._percentage == 100) {
this.onPreloadComplete();
this.mcTotal = this.total = this.left = 0;
this.stopPreload();
};
};
ASSetPropFlags(Preloader.prototype, "_main", 7);

MovieClip.prototype.preloadMovie = function(url, variables) {


if(variables.length) this.loadMovie(url, variables);
else this.loadMovie(url);
return new Preloader(this);
};
ASSetPropFlags(MovieClip.prototype, "preloadMovie", 7);

// ------------------------------------------------------------------------
// ENG DTP & Multimidia
// http://www.eng.com.br/
// ------------------------------------------------------------------------

Salve o arquivo como preloader.as no mesmo diretório em que vão estar todos os
filmes deste tutorial.

Agora, criaremos os filmes contendo as imagens.

Abra um novo arquivo do Flash MX no tamanho 284 x 160 px, com uma camada e dois
quadros-chves.

No primeiro quadro-chave insira a seguinte ação:

this.stop();

Na segunda camada, insira a imagem desejada e a transforme em movie clip.

Exporte e salve o arquivo no mesmo diretório dos outros como "image1" - sem áspas.

Faça o mesmo com os outros quatro arquivos:

image2

image3

image4

image5

Lembre-se de exportá-las!
Preloader com pseudo-máscara

O interessante deste preloader é que podemos esconder um imagem e à medida que o


filme for carregando, a imagem vai aparecendo.

Mãos a obra.

Crie um filme do tamanho que quiser com o palco na cor #9CAAB5.

Este filme deverá possuir duas ou mais cenas, neste exemplo usaremos duas cenas
(Scene 1 e Scene 2).

scene 1:

Quatro camadas

scripts
pseudo-máscara
imagem
caixa de texto

scripts:

Dois key-frames. No primeiro insira as seguintes linhas:

porcarregado = int(getBytesLoaded()/getBytesTotal()*100);
mascara._yscale = 100-porcarregado;
xporcento = porcarregado+"%";

No segundo insira:

if (getBytesLoaded()<getBytesTotal()) {
gotoAndPlay("Scene 1", 1);
} else {
gotoAndPlay("Scene 2", 1);
}

pseudo-máscara:

Dois key-frames contínuos:

Insira um movieclip, neste está contido um retângulo na mesma cor do fundo


(#9CAAB5) e do tamanho da imagem.

Certifique-se que que dentro deste movieclip, o retângulo deve ter o seu canto
superior esquerdo localizado no centro do movieclip, ou seja, faça com que o canto
superior esquerdo do quadrado esteja em cima do circulo com sinal de + (que é o
ponto de referência que o Flash usa para localizar o movieclip). Veja a figura:
Instancie-o de "mascara" - sem áspas.

imagem:

Dois key-frames contínuos:

Insira a imagem que quer esconder, de modo que fique totalmente coberta pela
camada superior - pseudo-máscara.

caixa de texto:

Insira uma caixa de texto dinâmica com a variável "xporcento" - sem áspas. Ao lado
escreva: PERCENTUAL.

na Scene 2:

Insira o filme que você deseja carregar.

Pronto, aí está o seu preloader com pseudo-máscara!

MP3 Player - Carregando através de texto

Vamos construir um MP3 Player que vai carregar um *.MP3 à partir do nome do
arquivos que está na mesma pasta... Isso mesmo! Basta digitar o nome da música na
caixa de texto e ouvir o desejado.
Um sistema onde a variável da caixa de entrada será trasnformada no arquivo *.MP3 a
ser carregado e tocado.

Mãos à obra:

Crie um filme do tamanho que quiser.

Este filme deverá possuir uma cena e 4 camadas:

acoes
objetos de Som
caixa de texto
botoes

acoes:

Um Key-frame, insira as seguintes linhas:

this.onEnterFrame = function () {
if (parado!=true) {
duracao=entradaSom.duration/1000;
posicao=entradaSom.position/1000;
}
musicaCarregada=entrada;
//
//Reverso
if (REV==1 && posicaoSom>0) {
_root.entradaSom.stop();
posicaoSom=posicaoSom-.5;
_root.entradaSom.start(posicaoSom,0);
}
revBotao.onPress = function () {
REV=1;
posicaoSom=_root.entradaSom.position/1000;
//
}
revBotao.onRelease = function () {
REV=0
}
//Avanço
if (FF==1 && entradaSom.position<entradaSom.duration) {
_root.entradaSom.stop();
posicaoSom=posicaoSom+.5;
_root.entradaSom.start(posicaoSom,0);
}
FFBotao.onPress = function () {
FF=1;
posicaoSom=_root.entradaSom.position/1000;
}
FFBotao.onRelease = function () {
FF=0
}
}

objetos de Som:
Um Key-frame, insira as seguintes linhas:

minhaMusica = new Sound(minhaMusicaMc);


minhaMusica.attachSound("minhaMusica01");
minhaMusicaVolume=100;
minhaMusica.setVolume(minhaMusicaVolume);

MP3 Player - Carregando através de texto


caixa de texto:
Insira três caixas de texto. Uma de entrada, instanciada de "entrada" sem áspas; e
duas dinâmicas instanciadas de "duracao" e "posicao" respectivamente e sem áspas.
E, por fim.
botoes:
Nesta camada, criaremos 7 botões, onde cinco deles são característicos de um player
(retroceder, tocar, avançar, pausar e parar) e os dois restantes comuns:
Instancie os botoes retroceder, tocar e avançar de "RevBotao", "playBotao" e
"FFBotao", respectivamente, onde playBotao deverá incluir o código:
on (press) {
if (playing!=true) {
playing=true;
pausado=false;
parado=false;
_root.entradaSom.start(myMusicPosition,0)
}
}
Para os botões pausar e parar, inserir:
parar:
on (press) {
if (playing==true) {
playing=false;
pausado=false;
parado=true;
_root.entradaSom.stop();
posicaoSom=0;
posicao=0;
}
}
pausar:
on (press) {
if (playing==true) {
playing=false;
pausado=true;
parado=false;
myMusicPosition=_root.entradaSom.position/1000;
_root.entradaSom.stop();
}
}
Ainda faltam dois botões, certo? Exatamente.
Em um destes botões, o qual terá a função de carregar o escrito na caixa de texto
dinâmica instanciada de "entrada" - sem áspas - coloque o seguinte código:
on(press) {
if (entrada!=nul && playing!=true) {
playing=true;
pausado=false;
parado=false;
entradaSom = new Sound(entradaSomMc);
entradaSomVolume=100;
entradaSom.setVolume(entradaSomVolume);
entradaSom.loadSound(entrada);
entradaSom.start(myPausePosition,0)
}
entradaSom.onSoundComplete=function() {
playing=false;
pausado=false;
parado=true;
entradaSomPosition=0;
posicao=0;
}
}
E finalmente, no último botão que terá a função de apagar o escrito dentro da caixa de
entrada, insira o seguinte script:
on(press) {entrada=nul}
Salve seu arquivo e exporte-o. Lembre-se que os arquivos *.mp3 devem estar no
mesmo diretório que o seu *.swf final.
O interessante é notar o que acontece nas caixas de textos dinâmicas - posição e
duração - que mostram o tempo total da música e a posição atual.
Prestem bem atenção no código, pois à partir daí temos inúmeras possibilidades na
criação de players interessantes.
Obs: Neste exemplo de *.swf (acima), não foi possível enviar um arquivo *.mp3, por
motivo de tamanho.
Contador Flash + PHP

Ensinarei como criar um contador usando Flash MX e PHP.

Criaremos um arquivo *.fla, um *.php e um *.txt.

De maneira simples chegaremos ao resultado desejado.

Simples por que não há muito a fazer no flash, veja:

Crie um filme do tamanho que quiser.

Este filme deverá possuir uma cena e 2 camadas com 50 frames:

acoes
objetos de texto

acoes:

No primeiro frame, insira a seguinte linha:

loadVariablesNum ("contadorDES16N.php?ran="+random(9999), 0);

No segundo, insira a seguinte linha:

loadVariablesNum ("contadorDES16N.txt?ran="+random(9999), 0);

No 50º frame, insira a seguinte linha:

gotoAndPlay (2);
objetos de texto:

No primeiro frame coloque uma caixa de texto dinâmica com a variável "Count" - sem
ápas.

Vá até o 50º frame e aperte F5.

Salve seu arquivo *.fla e exporte.

Agora iremos criar um arquivo *.php.

Abra seu bloco de notas e insira o seguinte:

<?
//dauton janota - www.des16n.com.br - dj@des16n.com.br
$nomedoarquivo = "contadorDES16N.txt";

$aa = fopen( $nomedoarquivo,"r");


$velho = fread($aa, 100);
fclose( $aa );

$velho = split ("=", $velho, 5);

$Novacontagem = $velho[1] + '1';

$novo = "Count=$Novacontagem";

$aa = fopen( $nomedoarquivo,"w+");


if (flock($aa, 2)) {
fwrite($aa, $novo, 100); }
fclose( $aa );

print "Count=$Novacontagem";

?>

Salve o arquivo como contadorDES16N.php no mesmo diretório do *.swf.

Note que ao salvar o arquivo o bloco de notas pergunta se é um arquivo de texto.


Selecione como "Todos os arquivos".

Novamente abra o bloco de notas, agora para criar o arquivo *.txt.

Insira:

Count=1

Salve o arquivo no mesmo diretório dos outros como contador DES16N.txt - note que
agora criamos um arquivo de texto.

É importante frisar que estes aqruivos devem ser locados num host que dê suporte
para php e setar o diretório onde estarão contidos os arquivos para o chmod 777, ou
seja, habilitá-los para ler, escrever e executar nos quesitos - Owner - Group e Other.
Pronto, aí está seu contador de visitas para o *.swf

Cubo Interativo - Actionscript MX


Trata-se de um cubo totalmente interativo construído apenas com actionscript MX
Note que você pode usar as setas e a barra de espaço do teclado.

Crie um filme do tamanho 400x350.

Este filme deverá possuir uma cena e uma camada com 4 frames:

acoes

acoes:

No primeiro frame, insira o seguinte código:

var pe = Math.PI/180;

//Construtor do ponto 3d
function Vertex(x,y,z) {
this.x = x;
this.y = y;
this.z = z;
this.ox = x;
this.oy = y;
this.oz = z;
this.sx = 0;
this.sy = 0;
}
//faces
function Face(colr,alph) {
this.colr = colr;
this.alph = alph;
this.ref = new Array();
this.facez = 0;
this.id;
}
//Poligonos construídos ao redor do centro
function Poly3D(x,y,z) {
this.p = new Array(); //pontos
this.f = new Array(); //faces

this.xpin = x;
this.ypin = y;
this.zpin = z;
this.scale = 100;
}

//Função 3d
Poly3D.prototype.addVertex = function(x,y,z) {
this.p.push( new Vertex(x,y,z));
}

Poly3D.prototype.addFace = function(colr,alph,verts) {
var tempface = new Face(colr,alph);
if (!verts) {
this.f.push(tempface);
return;
}
for (i=0;i<verts.length;i+=3) {
this.addVertex(verts[i],verts[i+1],verts[i+2]);
tempface.ref.push(this.p[this.p.length-1]);
}
this.f.push(tempface);
}

Poly3D.prototype.setFace = function(faceNum,indicesArray) {

this.f[faceNum].ref.splice(0);

for (i=0;i<indicesArray.length;i++) {
var ix = indicesArray[i];
this.f[faceNum].ref.push(this.p[ix]);
}
}

//seta a cor e alpha da face


Poly3D.prototype.setFaceProp = function(idx,colr,alph,id) {
this.f[idx].colr = colr;
this.f[idx].alph = alph;
this.f[idx].id = id;
}

//Reseta as coordenadas do poligono


Poly3D.prototype.reset = function() {
for (i=0; i<this.p.length;i++) {
this.p[i].x = this.p[i].ox;
this.p[i].y = this.p[i].oy;
this.p[i].z = this.p[i].oz;
}
this.updateFacez();
};

Poly3D.prototype.rotate = function(ax,ay,az) {
var tx,ty,tz;
var sinax=Math.sin(ax);
var cosax=Math.cos(ax);
var sinay=Math.sin(ay);
var cosay=Math.cos(ay);
var sinaz=Math.sin(az);
var cosaz=Math.cos(az);
//loop dos vértices
for (i=0;i<this.p.length;i++)
{
var pt = this.p[i];
if (ax != 0) {
//rotação no eixo x
ty = pt.y * cosax + pt.z * (-sinax);
tz = pt.y * sinax + pt.z * cosax;
pt.y = ty;
pt.z = tz;
}
if (ay!=0) {
//rotação no eixo y
tx = pt.x * cosay + pt.z * sinay;
tz = pt.x * (-sinay) + pt.z * cosay;
pt.x = tx;
pt.z = tz;
}
if (az != 0) {
//rotação no eixo z
tx = pt.x * cosaz + pt.y * (-sinaz);
ty = pt.x * sinaz + pt.y * cosaz;
pt.x = tx;
pt.y = ty;
}
}
this.updateFacez();
};
//Seta o fator de escala
Poly3D.prototype.setScale = function(factor) {
this.scale = factor;
}

Poly3D.prototype.project = function(distance) {
for (i=0;i<this.p.length;i++) {
var pt = this.p[i];
pt.sx = (this.scale * pt.x / (pt.z+distance+this.zpin))+this.xpin;
pt.sy = (this.scale * pt.y / (pt.z+distance+this.zpin))+this.ypin;
}
}

Poly3D.prototype.getFace = function(idx) {
var dp = new Object();
dp.pt = this.f[idx].ref;
dp.fa = this.f[idx];
return dp;
}

Poly3D.prototype.updateFacez = function() {
for (var i=0;i<this.f.length;i++) {
this.f[i].facez=this.f[0].ref[k].oz;
for(var k=0;k<this.f[i].ref.length;k++) {
this.f[i].facez += this.f[i].ref[k].z;
}
}
}

function Box3D(x,y,z,w,d,c,a) {
super(x,y,z);
for(var i=0;i<6;i++){
this.addFace(c,a);
}
//adiciona 8 vértices
this.addBoxCorners(0,0,z,w,d,c,a);
//conecta os vértices às faces
this.setFace(0,[4,5,6,7]);
this.setFace(1,[0,1,2,3]);
this.setFace(2,[0,1,5,4]);
this.setFace(3,[3,2,6,7]);
this.setFace(4,[1,5,6,2]);
this.setFace(5,[0,4,7,3]);
}
Box3D.prototype = new Poly3D();

Poly3D.prototype.addBoxCorners = function(x,y,z,w,d,c,a) {
w /= 2;
d /= 2;
this.addVertex(x-w,y-w,z+d);
this.addVertex(x+w,y-w,z+d);
this.addVertex(x+w,y+w,z+d);
this.addVertex(x-w,y+w,z+d);

this.addVertex(x-w,y-w,z-d);
this.addVertex(x+w,y-w,z-d);
this.addVertex(x+w,y+w,z-d);
this.addVertex(x-w,y+w,z-d);
}

No segundo, insira:

var xa=0.0;
var ya=0.0;
var za=0.0;

dispList = new Array();

function Displayer(clip,x,y,distance) {
this.Obj = new Array();
this.distance = distance;
this.shade = 1;
if (clip == 0) {
_root.createEmptyMovieClip("3DUniverse",1);
this.clip = _root["3DUniverse"];
}
else {
this.clip = clip;
}
//posição no palco
this.x = this.clip._x = x;
this.y = this.clip._y = y;

this.findPoly = function(ID) {
for (var i=0;i<this.Obj.length;i++) {
if (this.Obj[i].ID == ID) {return this.Obj[i];}
}
return undefined;
};

this.setRenderMode = function(ID,shade) {
var o = this.findPoly(ID);
if (!o) {return;}
o.shade = shade;
};

this.addPoly = function(ID,Poly) {
var temp = new Object();
temp.ID = ID;
temp.shade = 0;
temp.Poly = Poly;
this.Obj.push(temp);
this.updateDispList();
};

this.removeAll = function() {
dispList = new Array();
this.Obj = new Array();
}

this.updateDispList = function() {
dispList = new Array();
for (var i=0;i<this.Obj.length;i++) {
var o = this.Obj[i];
for (var k=0;k<o.Poly.f.length;k++) {
var dp=o.Poly.getFace(k);
dispList[dispList.length]=dp;
}
}
};
//Desenha as faces
this.drawAll = function() {
var mc = this.clip;
mc.clear();
for (var i=0;i<this.Obj.length;i++) {
var o = this.Obj[i];
o.Poly.project(this.distance);
}
dispList.sort(this.sorter);
for (var k=0;k<dispList.length;k++) {
var tf = dispList[k].fa;
var vt = dispList[k].pt;
mc.lineStyle(this.shade^1,tf.colr,tf.alph);
if (this.shade>0) {mc.beginFill(tf.colr,tf.alph);}
mc.moveTo(vt[0].sx,vt[0].sy);
//conexão face-vértices
for (var l=1;l<vt.length;l++) {
mc.lineTo(vt[l].sx,vt[l].sy);
}
mc.lineTo(vt[0].sx,vt[0].sy);
if (this.shade>0) { mc.endFill(); }
}
};
this.sorter = function(a,b) {
if(a.fa.facez > b.fa.facez) return -1;
if(a.fa.facez < b.fa.facez) return 1;
return 0;
};
this.scaleAll = function(amount) {
for(var i=0;i<this.Obj.length;i++) {
this.Obj[i].Poly.scale += amount;
}
};
this.rotateAll = function(xan,yan,zan) {
for (var i=0;i<this.Obj.length;i++) {
this.Obj[i].Poly.rotate(xan,yan,zan);
}
};
}

var universe = new Displayer(0,210,40,400);


Cube();

universe.onMouseMove = function() {
if (!this.dragging) return;
_root.ya = (this.lastx-_xmouse)/100;
_root.xa = (_ymouse-this.lasty)/100;
this.lastx = (_xmouse);
this.lasty = (_ymouse);
}
universe.onMouseDown = function() {
this.lastx = (_xmouse);
this.lasty = (_ymouse);
this.dragging = true;
_root.za = 0;
}
universe.onMouseUp = function() {
this.dragging = false;
if(Key.isDown(Key.SHIFT)) {
_root.xa = 0;
_root.ya = 0;
_root.za = 0;
}
}
Mouse.addListener(universe);

//cubo colorido
function Cube() {
var test = new Poly3D(100,100,0);
//Box parameter: x,y,z,width,depth,color,alpha
//use setFaceProp to set individual face colors/alphas
test = new Box3D(100,100,0,80,80,0x0000ff,100);
test.setScale(400);
//faceprop = index,color,alpha
test.setFaceProp(1,0x20ff20,100);
test.setFaceProp(2,0x00ffff,100);
test.setFaceProp(3,0xff00ff,100);
test.setFaceProp(4,0xffff00,100);
test.setFaceProp(5,0x8080ff,100);
universe.addPoly("theCube",test);
delete test;
}

function Piles() {
test = new Poly3D(100,100,0);
for (th=15;th<360;th+=20) {
t1 = pe*(th-15);
t2 = pe*th;
x1 = Math.sin(t1)*150;
y1 = Math.cos(t1)*150;
x2 = Math.sin(t2)*150;
y2 = Math.cos(t2)*150;
test.addFace(th,100,[x1,y1,40, x2,y2,40, x2,y2,-40, x1,y1,-40]);
}
test.rotate(pe*95,0,0);
test.setScale(300);
universe.addPoly("piles",test);
delete test;
}

No terceiro, insira:

//controle das teclas


if(Key.isDown(Key.SPACE)) universe.shade ^= 1;
if(Key.isDown(Key.PGUP)) universe.scaleAll(50);
if(Key.isDown(Key.PGDN)) universe.scaleAll(-50);
if(Key.isDown(Key.UP)) universe.distance += 10;
if(Key.isDown(Key.DOWN)) universe.distance -=10;
universe.rotateAll(xa,ya,za);
universe.drawAll();

E finalmente no quarto, insira:

gotoAndPlay(3);

Aí está o cubo, simples né?

Controlando Alpha via actionscript


Para isso é interessante conhecer um pouco sobre funções. Uma função é um bloco de
código que pode ser re-usado quantas vezes quiser, associando-o a um objeto
modificando seus parâmetros, mas não sua definição.
Pegaremos como exemplo um fato da vida real: uma guitarra.
function.guitarra(minhacor,minhamarca){
//aqui é descrito a definição de minha guitarra e etc
}
Como trata-se de um objeto qualquer da vida real, pode ter sua cor e marca
diferentes.
guitarra.cor=minhacor;
guitarra.marca=minhamarca;
Agora, ao usar a função guitarra poderemos especificar qual a cor e a marca sem
alterar a definição da guitarra.
guitarra(azul,ibanez)
// temos uma guitarra azul da marca ibanez
guitarra(preta,gibson)
// temos uma guitarra preta da marca gibson
Note que os parâmetros mudam mas a definição, não.
Agora falaremos sobre protótipo. O protótipo é uma maneira de organizar a função e
suas classes, podendo usá-lo em qualquer lugar e a qualquer momento.
Há vários tipos de protótipos - string, array, math... E neste caso iremos usar
Movieclip.prototype, para um objeto movie clip.
Criaremos um protótipo que mude a propriedade _alpha conforme a distância do
cursor para o objeto movie clip.

Crie um filme de tamanho qualquer com duas camadas e apenas um frame cada:

acoes
objeto

acoes:

No primeiro e único frame, insira o seguinte código:

Movieclip.prototype.alfa=function(limitedistancia,incremento){

xm=_root._xmouse;
ym=_root._ymouse;

distancia=Math.sqrt (((xm-this._x)*(xm-this._x)+(ym-this._y)*(ym-this._y)));

if(distancia<=limitedistancia){

if(this._alpha<=100){
this._alpha+=incremento;
}

}else{
if(this._alpha>=0){
this._alpha-=incremento ;
}
}
}

"limitedistancia" é a distância mínima para modificar a propriedade _alpha do objeto.

"incremento" é o incremento da propriedade _alpha quando a distância for alcançada.

"xm" é uma variável que irá orientar a coordenada _x do mouse.

"ym" é uma variável que irá orientar a coordenada _y do mouse.

objeto:

Crie um objeto movie clip e o instancie de "objeto" sem áspas.

Clicando em cima do movie clip, abra o painel de ações e insira as seguintes linhas:

onClipEvent (load) {
this._alpha=0;
}
onClipEvent (enterFrame) {
this.alfa(100,5);
}
Ao carregar o movie clip, a propriedade _alpha tem o valor igual a 0, fazendo o movie
clip invisível.

Logo abaixo, temos dois valores - 100 e 5 - o primeiro significa a distância mínima
para o incremento da propriedade _alpha. O seugundo valor é o próprio incremento,
isto é, a propriedade _alpha irá subindo e baixando de cinco em cinco

Câmera mascarada

Simples e objetivamente, podemos criar uma máscara que limitará a imagem fornecida
pela câmera de vídeo.

Crie um filme com três camadas:

máscara

video

ações

Primeiro passo:

máscara:

1 Crie um MovieClip e o instancie de "mascara" - sem áspas

2 Edite o MovieClip mascara e insira o objeto que será a máscara.

Segundo passo:

video:

1 Crie um MovieClip e instancie-o de "video" - sem áspas

2 Edite este o MovieClip video e insira um objeto de vídeo, para isto veja:
Abra o menu das opções no painel da biblioteca.

Selecione ' New Video ' do menu drop-down do painel da biblioteca.


Um objeto novo aparecerá na biblioteca.
Arraste um objeto de video da biblioteca no palco. O objeto video parecerá
simplesmente como um "X" azul no palco.
Instancie o objeto de video com o nome "camera" - sem áspas

Terceiro e último passo:

ações:

1 Introduza o seguinte ActionScript no quadro:


video.camera.attachVideo(Camera.get(0));
video.setMask(mascara);

Pronto!

Grade SonoraGrade Sonora


Muito Simples.

Começaremos com um filme em branco 600 x 400 pixels e apenas uma camada
chamada chamada ações.

Nesta camada colocaremos as seguintes linhas de actionscript:

l = 20;//largura
h = 20;// altura
a = 600/l;
d = 400/h;

for(i=0;i<d;i++){
for(j=0;j<a;j++){
contador = ((i*a)+j);
attachMovie("som_acionador", "acionador"+contador,contador);
mv = _root["acionador"+contador];
mv.onRollOver = function(){
this.gotoAndPlay("on");
}
mv._x = j*l;
mv._y = i*h;
}
}

Notem que usarei attachMovie, o que significa que anexarei um filme diretamente da
biblioteca, mas que filme?

Bem para isto, deveremos inserir um movieClip na biblioteca, portanto vá ao menu:

1. Inserir

2. Novo Símbolo

3. Selecione Movie Clip e dê o nome de som_acionador

Este movieClip conterá duas camadas (ações e preenchimento) com 20 frames


(quadros) cada.

ações:

No frame 1 coloque no nome no quadro (painel de propriedades) de "off" sem áspas.


Neste mesmo frame coloque a ação stop();

Insira um quadro em branco no frame 10 e nomeie-o de "on" sem áspas.

Por fim, no frame 15 insira a ação:

gotoAndStop("off");

preenchimento:
Do frame 1 ao 10º (frame contínuo) desenhe um quadrado de tamanho 20x20 px e
posicione em 0.0 em x e 0.0 em y (painel de propriedades)

No frame 11º, desenhe um quadrado igual, no mesmo tamanho e posição, porém com
uma cor diferente e mais um detalhe importante neste frame: Insira um som qualquer.

Volte para a Cena principal... acabou? Não... ainda falta uma coisa:

Linkar este movieClip.

Para isto, abra a biblioteca (Ctrl+L) procure o seu movieClip som_acionador, selecione-
o e com o clique direito do mouse, procure o ítem "linkage".

Clique em cima dele e selecione "Export for Actionscript" e na caixa de entrada coloque
o mesmo nome do movieClip - som_acionador - certamente já estará colocado
automaticamente.

Agora sim, acabou!

É só rodar o filme e ver o resultado!

Flash + Javascript

Muitas vezes recebo emails de usuários que gostariam de aplicar efeitos em seus
filmes através de actionscript. Como sabemos, actionscript é similar à linguagem
javascript.
Então, aprenderemos como criar uma janela independente, completamente
configurável através de actionscript. Isso mesmo, sem javascript nas tags html,
usando prototype.
É possível? Claro... mão à obra.
Criaremos um MovieClip que terá a função de botão no filme que quando clicado abra
uma janela ao centro do browser no tamanho 720x500, com barra de ferramentas, por
exemplo:
Começaremos criando um filme qualquer com tamanho qualquer... o interesse é
trabalhar com o MovieClip.
Crie um MovieClip e instancie de "meu_btn" - sem áspas. (usamos o sulfixo _btn, para
apresentar ao MovieClip as funções pré-determinadas do Flash MX para botões. O
mesmo acontece quando usamos outros objetos, como por exemplo, o sulfixo _txt -
neste caso o flash apresenta as funções aplicáveis ao objeto text.)
Volte para a Cena principal, clique sobre o frame (quadro) na linha do tempo e abra o
painel de ações (F9) - no modo expert.
Insira o seguinte código:
this.meu_btn.onRelease=function(){
endereco = "http://www.des16n.com.br/experimentos/3.html";
localAbre = "des16n";
largura = 720;
altura = 500;
barra = 1;// o valor um significa verdadeiro e o valor 0 significa falso
localizacao = 0;
diretorio = 0;
status = 0;
menu = 0;
rolagem =01;
redimensao = 0;
abreCentro(endereco, localAbre, largura, altura, barra, localizacao, diretorio, status,
menu, 9rolagem, redimensao);
}
Movieclip.prototype.abreCentro = function (url, winName, w, h, toolbar, location,
directories, 9status, menubar, scrollbars, resizable) {
getURL ("javascript:var minhaJanela; if(!minhaJanela || minhaJanela.closed)
{minhaJanela = 9window.open('" + url + "','" + winName + "','" + "width=" + w +
",height=" + h + ",toolbar=" + 9toolbar + ",location=" + location + ",directories=" +
directories + ",status=" + status + 9",menubar=" + menubar + ",scrollbars=" +
scrollbars + ",resizable=" + resizable + 9",top='+((screen.height/2)-(" + h/2 + "))
+',left='+((screen.width/2)-(" + w/2 + "))+'" +
9"')}else{minhaJanela.focus();};void(0);");
}
// onde estiver o "9" significa manter o script na linha de cima.
//portanto "9" não faz parte do código, delete-o
É só rodar o filme e ver o resultado!
Clique Direito!
Essa é interessante..=)
Com frequência muitos querem saber como tirar o menu de opções do clique direito
nos arquivos flash publicados.
Simples:
Stage.showMenu = false;
ou ainda, para os mais atrevidos:
ASNative (666,10) (0);
Mas o intuito deste exemplo é ir um pouco mais além... Fazer com que o clique direito
aja de alguma forma sobre o filme executado.
Começaremos criando um filme qualquer com tamanho qualquer...
Neste primeiro frame, colocaremos a seguinte actioscript:
ASNative (666,10)(0); // showMenu=0
Ainda neste único frame, criaremos um MovieClip vazio e nele, ou melhor, sobre ele
colocaremos o seguinte actionscript:
onClipEvent (enterFrame) {
if (Key.isDown(2)) {
getURL("mailto:dj@des16n.com.br", "_blank");
_root.texto = "ENVIE A MENSAGEM";
}
}
É só rodar o filme e ver o resultado!
MMSave
Como seria bom se pudéssemos gravar arquivos no servidor apenas com flash...
Infelizmente isto não é possível.
Mas se quisermos gravar um arquivo, seja ele qual for, na maquina local à partir de
um arquivo *.fla, podemos fazê-lo com o MMSave - que tem, praticamente, as
mesmas características com dashBoardSave para Flash 5.
Sintaxe:
MMSave(alvo, nome_do_arquivo);
Quando digo "gravar na máquina local à partir de um arquivo *.fla" quero dizer que só
funciona no modo de autoração (authoring mode) - isto é - quando exportamos o filme
*.swf automaticamente grava um arquivo na máquina local neste diretório:
C:Documents and SettingsUsuario1Dados de aplicativosMacromediaFlash
MXConfiguration
Vejamos um exemplo simples onde gravaremos um arquivo *.txt com o nome -
meu_texto - na raiz do c: :
minha_linha="Este é o texto que eu quero gravar dentro do arquivo 'meu_texto.txt'";
MMSave(minha_linha,"../../../../../../../meu_texto.txt");
O que significa que o "../../../../../../../" redireciona para a raiz do c:/.
Agora, gravaremos um arquivo *.swf que contém o painel do settings do flash player:
coloque estas linhas no primeiro frame:
ASNative(2107,0)(0);// similar System.showSettings(0);
this.onEnterFrame = function(){
if(typeof _level2130706430 == 'movieclip'){
MMsave(_level2130706430, '../../../../../../../janela.swf');
delete this.onEnterFrame;
}
}
Caso a janela de configuração do Player não abra, no momento em que você clicar
com o botão direito e selecionar o "settings" do player, o flash automaticamente estará
gravando o arquivo 'janela.swf' na raiz do c:.
Isto, de certa forma, é perigoso para aqueles que usam arquivos *.flas desconhecidos
na criação de websites ou similares. Porque?... Bem... hehe, vai saber o que um
arquivo deste pode estar gravando em sua máquina! Portanto, cuidado galera =).
Mouse
Você ja deve ter visto em vários sites feitos em Flash, o cursor do mouse substituido
por alguma imagem, então vamos aprender a fazer isso :D
1 - Abra um novo filme.
2 - Escolha o objeto que você deseja subtituir o cursor, e transforme -o em um clipe
de filme ( F8 ).
3- Agora, insira a ação descrita abaixo no seu clipe de filme que deseja que seja o
mouse:
onClipEvent (load) {
Mouse.hide ()
this.startDrag (true);
}
4- Agora teste sua animação ( CTRL + ENTER ) e veja, simples não ?
Drag

Vamos aprender a permitir os visitantes do site a arrastara objetos de nosso site com
o mouse.
1- Abra um novo filme no flash.
2- Crie um objeto que você deseja usar o drag() e transforme -o em um botão.
3- Agora insira o seguinte código nele:
on (press) {
startDrag (""); } on
(release, releaseOutside) {
stopDrag (); }
4- Agora teste seu filme
Movimento usando teclado

Esta é pra que gosta de fazer jogos no flash, vamos aprender a mover objetos através
das setas do teclado.
1- Abra um novo filme no flash.
2- Insira o objeto que você deseja arrastar e transforme -o em clipe de filme.
3- Agora insira o seguinte código em seu clipe de filme:
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
this._x=_x+20
}
if (Key.isDown(Key.LEFT)) {
this._x=_x-20
}
if (Key.isDown(Key.UP)) {
this._y=_y-20
}
if (Key.isDown(Key.DOWN)) {
this._y=_y+20
}
}
4- Eplicação do código:
if(key.isDown(Key.RIGHT)) - se a tecla direita estiver pressionada
this._x=_x+20 - isso ganhará x+20, seguinho o plano carteziano, x = horizontal e y=
vertical.

5 - Teste seu filme

Movimento usando teclado

Esta é pra que gosta de fazer jogos no flash, vamos aprender a mover objetos através
das setas do teclado.
1- Abra um novo filme no flash.
2- Insira o objeto que você deseja arrastar e transforme -o em clipe de filme.
3- Agora insira o seguinte código em seu clipe de filme:
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
this._x=_x+20
}
if (Key.isDown(Key.LEFT)) {
this._x=_x-20
}
if (Key.isDown(Key.UP)) {
this._y=_y-20
}
if (Key.isDown(Key.DOWN)) {
this._y=_y+20
}
}
4- Eplicação do código:
if(key.isDown(Key.RIGHT)) - se a tecla direita estiver pressionada
this._x=_x+20 - isso ganhará x+20, seguinho o plano carteziano, x = horizontal e y=
vertical.
5 - Teste seu filme
Testando seu código

Para testar o seu código e verificar se nele não contem erros


1 - Clique em Opções > Ações > Verificar sintaxe.

Se o seu código estiver correto será exibida uma mensagem dizendo que não possui
erros.

Se o seu código conter erros , será exibida uma mensagem informando que o script
contém erros. Abrirá também uma janela informando sobre os erros.

2 - Clique em OK para fechar a mensagem da sintaxe.


No modo normal, os erros de sintaxe do ActionScript aparecem realçados em vermelho
no painel Script.
Componentes do Flash MX

No flash MX, foram incluidos alguns novos componetes, que podem ser usados em
nossas animações.
Veja abaixo os componentes:

Vamos aprender um pouco sobre eles:


CheckBox - Representa uma única escolha.
ComboBox - O famoso menu lista.
ListBox - Também uma list de escolhas.
PushButton - Botão normal.
RadioButton - Representa uma única escolha, em um grupo de várias.
ScrollBar - Barra de rolagem, para adicionar em textos
ScrollPane - Barra de rolagem, para adicionar em clipes de filme
Abrindo links

Você deseja fazer um link com a página de seu amigo, mas não sabe como, então
vamos aprender:
1 - Criei um botão
2 - Nas ações do botão insira o seguinte código, altere apenas o endereço da página :
on (release) {
getURL ("http://www.sitequervocequiser.com.br");
)

Carregando texto

Vamos aprender a carregar um texto que esta em um documento .txt


1 - Crie um campo de texto dinâmico, e com nome de instância texto1.

2 - Coloque a seguinte ação no quadro em que criou o texto:

loadVariablesNum("arquivo.txt", 0)
3 - Crie um arquivo .txt com o nome de arquivo.txt ( caso queira outro nome, altere
no código também ). Neste arquivo coloque:
texto1 = Coloque o texto que você quer que apareça em seu clipe de filme.
4 - Agora é só testar seu filme ( CTRL + ENTER ), lembrando que o arquivo.txt deve
estar na mesma pasta onde foi salva seu clipe de filme.

fscommand

Vamos aprender a utilizar fscommand


Veja alguns deles abaixo:
Tela inteira, use para deixar sua animação maximizada
fscommand("fullscreen", "true");
Sem menu, use para tirar aquele menu superior que aparece quando você abre seu
.swf
fscommand("showmenu", "false");
Bloquear Full Screen da tecla ESC, use para bloquear que a pessoa saia do full
screen( tela inteira ) usando a tecla ESC.
fscommand("trapallkeys", true);
Sair, use para o usuário sair do seu clipe de filme através de um botão
on (press) {
fscommand("quit", "true");
}
Lembrando que todos fscommand devem ser inseridos no primeiro quadro chave de
seu clipe de filme, menos o comando sair que deve ser inserido em um botão.
Obs: Seu fscommand não ira funcionar quando você estiver no .fla e
pressionar CTRL + ENTER, ele só funcionará quando você abrir seu .swf.
Criando arquivo executável

Para finalizar vou ensinar como criar um arquivo executavel ( .exe ) para que todos
mesmo não possuindo o plugin do flash instalado possam ver sua animação.
1 - Va na pasta onde salvou e abara seu .swf
2 - Clique no menu superior em File > Create Projector
3 - Escolha o nome do seu arquivo e onde deseja salva -lo, e clique em OK.
4 - Seu .exe foi criado