Introdução

A ferramenta flash é uma das ferramentas mais completas no segmento de animação para web,
é a pioneira no assunto. Com a ferramenta Flash, podemos criar várias coisas para web das mais
diferentes formas, pois seu action script é bem flexível aos comandos do usuário, podemos por criar
aplicações usando arquivos externos, interagir com outros formatos como por exemplo .php, .asp.
Esta apostila tem por finalidade mostrar um pouco desta fantástica ferramenta, para que vocêm possa
ao final, a partir de exemplos práticos, construir sites dinâmicos com facilidade e praticidade, já que
esta é a intenção do flash, com apr~encia amigável e totalmente dinâmica para que se possa criar
sites, aplicações web e outros.
Daremos maior importância as principais e mais usadas opções do flash, com ênfase inicial em
lógica de programação desta ferramenta, para que depois possamos enfatizar a sua programação
Orientada a Objetos. Algumas das coisas que serão explicadas aqui nesta apostila é a criação de
eventos utilizados em muitos sites por ae, como por exemplo,
preloaders avançados, objetos arrastáveis, classes de som, função, carregamento de arquivos externos,
carregamento de arquivos externos com preloader, animação a objetos diretamente por action script,
animação a objetos por action scripts diretamente por eventos de mouse, botões, teclas, variáveis e
funções lógicas como for, if, else etc... e outras coisas básicas da qual são de suma importância para
que usuários que nunca utilizaram a ferramenta sejam capazes de fazerem os argumentos aqui
representados.
 Esta apostila foi desenvolvida por Fernando Zanatta, Todos os Direitos de uso da mesma,
devem ser pedidos a mim, protegida sobre lei de Direitos Intelectuais.
Paranavaí 11 de Setembro de 2004-09-11
msn: fernando.wizard@fornet.com.br
e-mail: Fernando.lino@fornet.com.br
Conceitos Iniciais
Flash é um software desenvolvido pela Macromedia que possibilita a
criação de conteúdos multimídia de alta qualidade, interativos e
animados, otimizados para a publicação na internet.
Conteúdo produzido em Flash pode ser:
- Botões;
- Banners;
- Jogos;
- Formulários;
- Descanso de Tela;
- Interfaces de Navegação;
- Sites.
Um dos primeiros passos no inicio de um projeto é a definição da
tecnologia utilizada nas partes ou processos do projeto, a correta
aplicação da ferramenta está intimamente ligada com o conhecimento
de suas funcionalidades e aplicações, e a escolha da ferramenta certa
para seu objetivo trará resultados mais proveitosos e profissionais.
Características:
Os arquivos criados no Flash guardam e apresentam as informações
gráficas vetorialmente. Isto significa que as imagens são entendidas como
formas e preenchimentos e o que é armazenado são seus parâmetros,
diferente dos formatos bitmap (mapa de bits - .jpg, .gif, .bmp),
normalmente utilizado para armazenamento de fotos e imagens. A
imagem de um círculo, por exemplo, armazenaria vetorialmente apenas os
valores referentes à posição e ao raio deste círculo. Uma imagem bitmap
armazena a informação da cor de cada pixel que forma o desenho, o que
geralmente ocupa muito mais espaço.

Começando um Projeto:

Vamos começar nosso primeiro projeto utilizando o Flash e aproveitar

para saber como se configura as principais características de seu Filme.
Comece um novo Filme.
Através do menu Modify>Document ( Ctrl+J )acesse as
propriedades de seu Filme :
Taxa de Quadros (Frame Rate):
Define em quantos quadros por segundo seu filme será apresentado,
alterando este valor é possível conseguir filmes mais detalhados (e
demorados) ou filmes mais rápidos.
Dimensões (Dimensions):
A dimensão de seu Palco, o tamanho final visualizável de seu filme.
Corresponder (Match): Impressora/Conteúdo (Printer/Contents)
Atribui as dimensões de seu filme para se ajustar ao tamanho do
papel configurado pela sua impressora, ou a menor área possível
com relação ao conteúdo já disposto.
Cor do fundo(Background Color):
Define a cor de fundo do Filme.
Unidade de medida:
Define a unidade de medida de trabalho, a mais cômoda costuma
ser pixels.
Explore as configurações disponíveis, são as definições de como seu filme
será publicado e apresentado.
Desenho Vetorial
Ferramentas
O Flash Mx 2004 dispõe das principais ferramentas para desenho vetorial.
Esta é a barra de Ferramentas de Desenho:

1- ferramenta de seleção (v)

2- linha (n)
3- caneta (p)
4- bola (o)
5- lápis (y)
6- transformação (q)
7- tinteiro (s)
8- conta gotas (i)
9- ferramenta de subleção (a)
10- ferramenta laço (l)
11- texto (t)
12- quadrado (r)
13- Pincel (b)
14- preenchimento de transformação (f)
15- prechimento (k)
16- borracha (e)
17- ferramentas de visualização
18- ferramentas de cor
19- opções específicas da ferramenta selecionada
Características do Desenho
A técnica de desenho vetorial possui algumas características que
com sua utilização se tornam familiar.
Um desenho vetorial é constituído apenas de Linhas e
Preenchimento (que podem ser nulos). As linhas quando sobrepostas se
associam, já os preenchimentos possuem dois comportamentos diferentes,
quando da mesma cor se associam, quando de cores distintas a área de
baixo é subtraída.
Com a resolução dos exercícios propostos, estas e outras
características se tornarão mais claras. Para se transformar imagens comuns em vetoriais,
use o programa da Macromedia free hand, com esta ferramenta você transforma sua
imagem vetorial com apenas alguns cliques do mouse.
A imagem abaixo é uma imagem vetorial.
Organizando
Desenhando no Flash você deve ter reparado que muitas vezes é
impossível fazer um desenho sem alterar ou confundir-se com outro já
pronto. Uma das maneira de começar a organizar seu conteúdo é
agrupando as formas assim como nos softwares comuns de edição de
imagens. Para tal, selecione as formas que pretende agrupar e clique em
Modify > Group (Modificar > Agrupar) ou pressione Ctrl+G. Para editar
figuras agrupadas, basta dar um duplo-clique sobre a imagem.
Assim como os principais programas de gráficos, o Flash também
trabalha com layers (camadas), controle e operações com as camadas,
que podem ser acessados pelos atalhos:

1- show/hide all layers (mostra ou esconde todos os

frames)
2- protege ou desprotege todos os layers
3- mostra os layers somente com linhas externas
4- nome do layer (pode ser editado, dois cliques)
5- Inserir um novo layer
6- Guia de animação
7- insere uma pasta para guardar os layers
8- delete o layer selecionado

É fundamental que se esteja familiarizado a trabalhar com camadas,

sua utilização facilita a criação e manutenção de seu projeto.

Símbolos
Para começarmos a utilizar os recursos de animação do Flash, é
preciso antes aprender a trabalhar com Símbolos.
Para o Flash interagir com um elemento, é preciso que este elemento
seja definido como um objeto, um Símbolo. Como objeto, os símbolos
possuem propriedades, ações e comportamentos, que poder ser definidos
e/ou alterados no decorrer da animação.
Ao inserir um símbolo em uma animação, você está inserindo uma
instância do objeto definido. É como se fosse uma cópia, porém com
características diferentes. Instâncias de um mesmo símbolo possuem
mesmo conteúdo, porém podem possuir propriedades e características
diferentes.
Tipos
Existem três tipos possíveis de símbolos: Graphic, Movie Clip e Button
(Gráfico, Clipe de Filme e Botão), que se diferenciam pelo comportamento
e pelas propriedades que conheceremos mais adiante.
Para transformar uma forma em um símbolo, selecione alguma forma
em seu palco e clique em Insert>Convert to Symbol (Inserir>Converter para
Símbolo), escolha o nome do objeto e o tipo do símbolo: Graphic.
Descrição dos tipos de Símbolos:
• Graphic(gráfico): Ideal para elementos que não interagem com o
filme, a linha de tempo dos símbolos do tipo gráfico correm junto
com a linha de tempo principal. Não realizam ação, nem recebem
interação.
• Movie Clip(clipe de filme): Semelhante ao gráfico, porém possui linha
de tempo independente, um clipe de filme se comporta como um
arquivo flash a parte, pode executar ações e receber controle e
interação externa.
• Button(botão): Um símbolo do tipo botão, responde a eventos do
mouse(up, over, down, e hit) e executa ações.
Conheceremos melhor as características de cada tipo de símbolo quando
precisarmos aplicar os conceitos.
Biblioteca
Quando criamos um símbolo, este é arquivado na biblioteca do
filme, a partir dela é possível gerenciar os objetos de seu filme,
organizando, alterando referências e visualizando o conteúdo existente.
Você acessa a biblioteca de seu filme através do menu
Window>Library (Janela>Biblioteca), ou através do atalho Ctrl+L.

Animações
Finalmente o que interessa, Animar!
Dizemos que o Flash cria conteúdo 3D, isso porque como já deve ter
observado, temos o plano de desenho (2D) e tudo o que acontece neste
plano acontece em função de um Tempo (a terceira dimensão), que é
representado pela timeline ou linha-do-tempo, conheça:
Cada caixinha na timeline representa um frame (quadro) de sua
animação, que roda por default a 12fps (frames-por-segundo). Quando
iniciamos uma animação, esta contém apenas um frame, ou seja, ainda é
estática.

Observe a alteração na timeline:

O Quadrado com a bolinha preta representa um Key Frame e indica

os quadros-chave da animação, ou seja, onde existe mudança no
conteúdo da mesma, o restante dos quadros cinzas são Frames(quadros),
e indicam que o conteúdo do KeyFrame imediatamente anterior continua
presente. O quadradinho no fim da animação indica o último quadro em
que o conteúdo do KeyFrame aparece.
É possível desenvolver basicamente dois tipos de animações no
Flash, elas são explicadas a seguir:
Frame by frame (Quadro-a-quadro)
É a mais simples, porém a mais trabalhosa. Para criar animações
quadro-a-quadro (como o próprio nome sugere), é necessário que se
defina todos os quadros da animação, ou seja, todo quadro é um quadrochave
(keyframe).

Tweening (Animação Linear)

O Tweening é a principal forma de animação no Flash, é uma
maneira mais fácil de se animar, basta definir o quadro chave inicial e o
quadro chave final e comandar ao Flash que realize o tweening. O Flash
detecta a mudança e “tenta adivinhar” qual era o movimento desejado.
Existem duas formas de Tweening:
Tweening Motion:
Utilizado para animar símbolos. Para a correta utilização do Tweening
motion é preciso alguns cuidados:
- Somente Símbolos podem ser animados.
- Somente um Símbolo por Keyframe/Layer deve ser utilizado.
- O mesmo Símbolo deve estar presente no keyframe inicial e final.
- O fundo dos frames preenchidos ficam com a cor ROXA (e não cinza, que é o estático)

Tweening Shape:
Transforma uma forma livre em outra, criando um efeito de “morph”.
O procedimento de criação é semelhante ao do Tweening Motion, porém
os quadros chaves só devem conter formas livres.
O fundo dos frames preenchidos ficam da cor verde (e não cinza, que é o estático ou roxo como a
da motion tween)
Botões
Os botões no Flash, assim como os gráficos, são símbolos que
possuem características especiais. Um símbolo do tipo botão possui 3
estágios, Up (levantado), Over (em cima) e Down (abaixado), que
representam os comportamentos possíveis de um botão com relação ao
cursor do Mouse:
- UP : botão solto
- Over: cursor sobre o botão
- Down: botão clicando;
e um quarto frame, Hit, que representa a área clicavel do botão.
Observe:

ACTION SCRIPT (AÇÕES)

O Action script é a parte mais importante do flash, é com ele que podemos criar animações
perfeitas e complexas, deixando nossos arquivos em flash mais bonitos e sofisticados, e
com menor tamanho.
Abaixo segue alguns actions básicos e sua explicação.

Stop();
Para o filme no frame em que está adicionado
gotoAndStop(frame);
ele vai ao frame que está referenciado entre parênteses e para.
gotoAndPlay(framme);
ele vai ao frame que está referenciado entre parênteses e da um play.
nextFrame();
vai para o próximo frame
prevFrame();
vai apra o frame anterior
_root.
Acessa o palco pricipal do filme
_parent.
Acessa o filme anterior ao que você está (vixi.. ai fico complicado de intender ☺)
_this.
Executa as ações no filme que o action está
objeto._x = valor;
da a um objeto o valor de sua posição x
objeto._y = valor;
da a um objeto o valor de sua posição y
objeto._xscale = valor;
define a escala de x de um objeto
objeto._yscale = valor;
define a escala de y de um objeto
objeto._width = valor;
define a largura de um objeto
objeto._height = valor;
defini o tamanho de um objeto
random (valor);
da um valo aleatório para certa função a ser executada no flash

Ações Básicas (controle de reprodução)

Para começarmos a controlar nossa animação e até mesmo para
que o uso de botões faça sentido, é hora de aprendermos como inserir
Ações no Flash. Através de Ações é possível controlar a reprodução de um
filme, planejar navegação de uma aplicação, configurar o modo de
visualização, criar interações das mais diversas com o usuário, programar
eventos e menus, definir variáveis, interagir com aplicativos externos e até
mesmo gerar uma animação. É possível definir ações em Frames, em
símbolos do tipo Movie Clip e em botões.
Para visualizar as ações disponíveis, clique em Window>Actions
(Janela>Ações ), ou clique no atalho no canto inferior direito da tela do
Flash:
Janela de Ações :
Publicação
Agora que temos uma animação pronta e com controles no Flash,
nos resta exportar, publicar e visualizar o resultado.
Sua animação pode ser exportada em diversos formatos. O padrão
para animações Flash é a exportação para o Flash Player e Flash Plug-in,
nos quais a animação é compilada e recebe a extensão .SWF e está
pronta para ser distribuída ou inserida em uma página HTML . Clique em
File>Export (Arquivo>exportar) para verificar os formatos de exportação do
Flash.
Para publicar seu filme, clique em File>Publish Setings (Arquivo,
Configurar Publicação) e escolha o formato desejado:
Usando condições lógicas

Na programação usamos símbolos lógicos, para executarmos os códigos, como IF, ELSE, FOR,

If e else

numero = 3;
if (numero == 3){
resultado = "é impar";
trace (resultado);
}
else {
resultado = "é par";
trace (resultado);
}

For
i=0;
for(i == 0;i<=10;i++){
trace(i);
}

Arrastar Objetos (Movie Clips)

Este método é bastante interessante, pois trata-se de um método bastante usado na internet,
não só arrastando objetos, mas sim também para trocar o ponteiro do mouse (Próximo assunto).
Esta opção do flash é chamada de Drag, abaixo está um exemplo bastante simples de como
funciona esta opção.
Abra um novo arquivo no flash, e no palco principal, adicione qualquer objeto (imagem, texto,
etc...) e transforme em um MovieClip e instancie de “imagem” sem aspas,

bom, agora no primeiro frame do palco principal, adicione o seguinte código:

this.onEnterFrame = function(){ // ao entrar neste frame ira executar a função que está entre as chaves
imagem.onPress = function(){ // ao pressionar o mouse sobre o MovieClip "imagem" ira
executar a linhda de baixo
 imagem.startDrag(false); // o movieclip ira ficar "grudado" ao mouse... o false, é referente a
opção do drag chamada "look center", coloquei falso, pois quero que independente da posição do
mouse ao ser passado sobre o movie, o movie nao seja direcionado para o centro do mouse,
"centralizado".
}
imagem.onRelease = function(){ // ao soltar o botão do mouse ira executar a função
imagem.stopDrag(); // para de arrastar o objeto pelo palco principal
}
}

bom.. o exemplo acima é o mais simples possível para esta função, mas como podem ver, ao executar
este Action no flash, o seu movie pode ser arrastado por todo o palco principal, certo? Mas... pode
haver situações que queira que o objeto seja arrastado somente dentro de um espaço, isto é, você
ordena um limite para que seja definido até onde o movie pode ser arrastado. Isto é possível, pois no
exemplo acima, usamos apenas a expressão booleana para dizer que o não queríamos o movie
centralizado no mouse, para impormos limite no movie, devemos configurar as opções de left, Top,
right, down (exatamente nesta ordem). Veja abaixo como ficaria o nosso exemplo acima,
adicionando estes limites:

this.onEnterFrame = function(){
imagem.onPress = function(){
imagem.startDrag(false,100,300,300,100); //Veja que está numeração está na ordem descrita
acima, Left, Top, Right, Down ( esquerda, topo, direita, abaixo)
}
imagem.onRelease = function(){
imagem.stopDrag();
}
}

Como pode perceber, eu dei um limite a área de funcionalidade do código, você só poder arrastar o
Movie, dentro deste limite. Para testar usando limites estabelecidos com você, posicione o movie nos
locais de onde ele não deve passar, e anote as coordenadas X (horizontal, Left e Right (esquerda e
direita)) e Y (vertical, Top e Down(Topo e Abaixo));

Ponteiro do mouse diferente.

Uma coisa bem legal que o flash possibilita ao desenvolvedor do site, é a opção de utilizar um
ponteiro do mouse diferente do convencional, usando um dos movie clips do seu site em flash.
Para que entenda esta parte, é interessante que leia sobre a opção Drag().
Siga os mesmos paços do exemplo do uso do Drag(); (arrastando Obetjos), a única coisa aqui
diferente da opção drag() convencional, é que iremos utilizar uma função não tratada no uso de drag()
de suma importância e a maneira que iremos iniciar o drag();. Abaixo segue o Action do exemplo:

Mouse.hide(); // com esta opção você deixa o ponteiro do mouse excondido enquanto o mesmo
estiver posicionado sobre os limites do seu site.
this.onEnterFrame = function(){
 imagem.startDrag(true);// Veja que o look center esta como "true", porque o movie tem que
ficar centralizado ao ponteiro do mouse
}

Bom, acredito não haver mais nada para explicar aqui, pois é uma função bastante simples do flash,
para implementa-lo, use a sua imaginação (ao clicar o mouse ou deixalo muda o ponteiro do mouse,
ou passar sobre certo objeto o ponteiro muda e por ai vai... etc.. etc..).

Animações Dinâmicas

Bom, esta parte é bastante complexa, e é necessária uma boa lógica, e principalmente matemática,
pois iremos criar um movie clip que será editado totalmente por código (tamanho inicial, final etc...)
em um evento do mouse. Para que possa compreender este exemplo é de extrema importância que
tenha o domínio TOTAL e NENHUMA DÚVIDA sobre utilizações de movie clips para controlar
animações, funções e função IF, se você entende completamente todos os requisitos acima, poderá ter
dificuldades também para entender a lógica aqui usada, mas será muito mais fácil.
Para começarmos nosso exemplo de uso geral, irei explicar exatamente aonde deveremos chegar,
Quero que ao passar o mouse sobre o movieClip, ele cresca dinamicamente, através de Action, na
vertical.
Bom, primeiramente abra um novo documento no flash, e desenhe no palco principal um quadrado e
transforme-o em um movie clip , e instancie com o nome de “quadrado” sem aspas, e configure seu
tamanho para : W (width) 30 e H (Height) 30, deve ficar assim:
Classes de Som

Para usarmos som no flash há vários jeitos, mas o objetivo desta apostila é não ser tão simples, por
isso iremos criar uma classe de som.
Inicialmente crie um novo filme no flash e importe um arquivo de som para sua biblioteca, após isso,
na sua biblioteca, clique com o botão direito em cima do seu som e escolha “linkage”. Irá abrir uma
nova tela, configure as propriedades como a imagem abaixo
perceba que estamos exportando nossa música para o action script e este terá o nome de
minhamusica.

Agora no primeiro frame do seu filme, aidione o seguinte código:

musica = new Sound(); // estamos declarando que musica é uma nova classe de som
musica.attachSound("minhamusica"); // musica irá receber o som (tocar) minhamusica (que // é o
nome que demos para nossa música na biblioteca)
musica.start(0,1000); // musica ira começar do 0 segundos e irá repetir 1000 vezes

pronto, ai está é só isso, nesse caso nossa música está começando ao entrar no primeiro frame (onde
est´nosso action) mas para iniciar a toca-lá quando clicar em algum botão é apenas levar tirar esta
linha de código musica.start(0,1000); para onde qiuser.

Preloaders

Para criarmos preloaders no flash é necssário que tenha entendido o uso de variáveis, função e uso de
movie clips como um FOR, caso tenha entendido os requesitos acima muito bem, vamos começar a
criar os preloaders, da qual aqui serão tratados em categorias
Preloader 1

Para criar um preloader simples, crie um novo documento no flash, selecione a ferramenta texto e
posicione no meio da tela, quando for adicionar a ferramenta texto, segure o mouse e arraste para a
direita, para que nosso campo texto, fique com um bom comprimento, pois não escrevermos
absolutamente nada nele inicialmente, isso será feito via código, já que este receberá a porcentagem.
Após ter feito o passo acima, clique no texto e selecione em propertyes a opção de Dynamic Text,
pois como disse, ele receberá conteúdo via código, sendo assim, é um texto dinâmico. Após ter feito
isso, ainda em properties, há uma opção chamada Var, este campode deverá estar vazio, digite nele
“textpor” sem aspas, pois este será o nome deste campo, ele agirá como se fosse uma variável, por
isso seu nome é digitado na var, e não em instance name.
Após isso, vá ao frame 2 da scena, e insira algumas imagens pesadas, (para que seu filme tenha uns
70 Kbytes), isto deve ser feito para que seu preloader tenha algo para carragar, senão pra que fazer o
preloader em um movie vazio? Com tamanho de 6, 10 kbytes?
Após ter feitos todos os passos acimas, certifique-se de que não cometeu nenhum erro, pois seja este
pequeno ou não, pode fazer com que nosso preloader não funcione corretamente, ou pior, nem
funcione.
No primeiro action do filme e no segundo, digite o action Stop();, pois nosso filme deverá executar
primeiramente o preloader ( que se encontra no frame 1) e só quando atingir o objetivo ( que será
dado por nós) ele irá para o frame 2.
Vamos lá, digite o seguinte código no frame 1:

stop();
this.onEnterFrame = function(){
porcentagem = int(getBytesLoaded() / getBytesTotal() * 100);
textpor = porcentagem + " %";
if (porcentagem = = 100){
nextFrame();
}
}

bom, olhando o código acima, caso seja seu primeiro contato com este tipo de código, não se assuste
pois ele não é difícil de se entender, e serve para abrir sua cabeça quanto ao funcionamento de
qualquer preloader, pois todos, tem como base este tipo de código, abaixo vamos comenta-lo linha
por linha para que você possa entende-lo melhor.

stop(); // para o filme neste frame

this.onEnterFrame = function(){ // aoentrar neste filme abre uma função para que se faça a
verificação da linha abaixo repetidamente.
porcentagem = int(getBytesLoaded() / getBytesTotal() * 100); // cria a variavel porcentagem
e faz com que ela receba o resultado do calculo da porcentagem, o int, transforma este valor em um
número inteiro, o getBytesLoaded() pega os bytes que já forão carregados, o getBytesTotal(), pega o
tamanho total do filme.
textpor = porcentagem + " %"; // é o nome da variável da qual já adicionamos no palco
principal com o a ferramenta Dinamic text, ela receberá as informações que vem desta daqui, daqual é
apenas mostrar a a variavel porcentagem, que contem o resultado do calculo de porcentagem do nosso
filme, o sinal de +, faz exatamente a função de ajuntar o texto “ %” no mesmo campo, logo ao lado da
porcentagem.
if (porcentagem == 100){// se a porcentagem for igual a 100 executa a próxima linha,
enquanto a porcentagem não atinge o valor 100, ele volta ao inicio da função.
nextFrame(); // vai para o proximo frame, que no nosso caso é o frame 2.
}
}

Preloader 2

Já no preloader a baixo, vemos a mesma função do preloader 1, mas a diferenã está no objeto “barra”,
mas o que é este objeto barra? Quando entramos em algum site, normalmente vemos não so a
porcentagem em forma de texto, mas sim, uma barra que aumenta de acordo com o carregamento do
filme, indo até 100. Para rodarmos este movie clip, vamos fazer a mesma coisa que fizemos com
preloader 1, siga todos os passos (adicionar Dynamic text, imagens para pesar o filme etc...) e por
final, vamos adicionar o nosso objeto chamado barra, pois ele ainda não existe no palco principal, e
sim apenas no Action. Clique na ferramenta de desenho, rectangle tool (para desenhar um quadrado) e
crie um retângulo no palco principal sem bordas, transforme este retângulo em movie clip, e instancie
com o nome de “barra” (pois é este retângulo que recebera a ação de ir aumentando de acordo com a
porcentagem), e rode o filme e veja o resultado.

stop();
this.onEnterFrame = function(){
porcentagem = int(getBytesLoaded() / getBytesTotal() * 100);
barra._xscale = porcentagem;
textpor = porcentagem + " %";
if (porcentagem = = 100){
nextFrame();
}
}

Perceba que, por mais que você tenha desenhado ele comprido, ele começa invisível, mas como eu
disse, ele obedece a porcentagem, sua escala, aumenta de acordo com a porcentagem, e a
porcentagem sempre (ou quase sempre, depende do tamanho do filme) sai com valor 0, por isso ele
fica invisível.

Preloader 3

Neste preloader, apenas utilizei algumas funções simples mas muito úteis para animações dinâmicas
no flash, as alterações aqui efetuadas não alteram o funcionamento do preloader, mas sim, do movie
clip que instanciei de “carregando”. Faça os mesmos passos do preloader 1, adicione os passos do
preloader 2 (barra) e agora siga este passo: no primeiro frame, onde estão os outros objetos (barra,
textos etc..) crie um texto estático, e digite “carregando”, após isso, transforme o mesmo em um
movie clip, e instancie como “carregando” e pronto, agora que já temos o “carregando” em nosso
palco principal, ele ira receber as ações direcionadas a ele pelo nosso Action.

stop();
this.onEnterFrame = function(){
porcentagem = int(getBytesLoaded() / getBytesTotal() * 100);
barra._xscale = porcentagem;
textpor = porcentagem + " %";
// carregando._alpha = random(95); pisca
// carregando._width = random(95); estica na vertical
// carregando._height = random(95); estica na horizontal
carregando._rotation = random(95); // gira entorno do eixo
if (porcentagem == 100){
nextFrame();
}
}

Como pode ver acima, algumas novas funções foram usadas, como o _alpha, _witdh etc... com a
função random na frente, use sua imaginação para criar animações com estas ações dinâmicas.

Preloader 4

Neste preloader, vamos aprender a utilizar o preloader direcionado a uma mascará, se você é uma
daquelas pessoas que tem um bom raciocínio e sabe bem usar uma mascara, já deve saber como fazer
isso, mas mesmo assim, se você ainda não sabe como, vamos fazer agora. Imagine que você vai criar
um site para uma empresa, e o dono da empresa exigiu que o a logo marca de sua empresa, fosse
aparecendo aos poucos conforme o site fosse carregado, isto é seria um preloader, ai você deve estar
pensando “é so colocar a logo da empresa, transforma-la em movie clip e instanciala de barra” se
você pensou assim, infelizmente pensou errado, pois ele quer que a logo vá aparecendo aos poucos, e
não crescendo, até para isso usaríamos apenas um truque de mascaras, siga as instruções para
criarmos o exemplo: faça todas as opções dos preloaders anteriores exceto do preloader 3, e preste
muita atenção. Se segui as instruções direitinho do exemplos ateriores, seu filme deve conter apenas
um layer no palco principal, mas vamos criar mais dois layers, um para adicionarmos a barra e o
outro para adicionarmos a logo da empresa. Certifique-se de que o layer onde está a barra, fique
acima do layer da qual está a logo (se ainda não tiver adicionado a logo marca, pegue qualquer
imagem e adicione no frame do layer que fica abaixo da barra), após isso, pegue a barra e altere seus
tamanhos para que fique da mesma proporção da logo em largura, quanto em altura, após ter
verificado isto, clique com o botão direito no layer onde está contido a barra (deve estar contido
somente a barra) e selecione a opção “mask” e rode seu filme.

stop();
this.onEnterFrame = function(){
porcentagem = int(getBytesLoaded() / getBytesTotal() * 100);
barra._xscale = porcentagem;
textpor = porcentagem + " %";
if (porcentagem == 100){
nextFrame();
}
}

Verá que a barra tem a mesma ação dos preloaders anteriores mas a diferença é que como é uma
maskara, ela ira mostrar o que está no layer abaixo, que no caso é a logo, logo assim, a logo vai
aparecendo de acordo com o andamento da maskara

Preloader 5

Bom, enfim chegamos ao movie clip mais complicado de todos, este é um movie clip que exige muito
raciocínio do webdesigner, pois é muito complexo mesmo, usa várias novas Actions como o
createEmptyMovieClip e outras coisas mais, além de exigir muita lógica ao ser programado, lembro
que as linhas estão comentadas, sendo assim, fica fácil entender o que cada Action faz. Este movie
clip calcula a porcentagem de outro filme a ser carregado no nosso filme, isso é, um .swf externo,
para fazer este preloader é necessário que tenha TOTAL domínio dos outros preloaders e funções, e é
claro do action loadMovie, que é tratado anteriormente de chegarmos aqui. Os preloaders que vimos
até aqui, apenas calculam a porcentagem do filme em que estão contidos, como disse, nesse caso é ao
contrario, por isso vamos prestar atenção. Para não embolarmos o meio de campo, crie um novo
filme, adicione os Dynamic text necessários, barra e mãos a obra.
Crie um outro filme ( que iremos calcular a porcentagem e exibilo dentro de nosso filme) e no
primeiro e único frame a ser usado, adicione várias imagens ( para que o filme tenha no máximo 600
kb). Após isso volte ao filme que iremos adicionar as actions (da qual já adicionou os dynamic text e
barra) e adicione o código abaixo no primeiro frame. Antes de rodalo observe que no action onde nos
referenciamos ao loadMovie(“teste.swf”) deve ser o nome do filme da qual iremos carregar, então
salve o outro filme da qual adicionou várias imagens como teste.swf ou outro nome se quiser, mas
lembre-se de mudar no filme principal na função loadMovie, o nome do filme a ser carregado, agora
rode seu filme.

this.createEmptyMovieClip("filme",1000); // criando movieClip

filme.loadMovie("teste.swf"); // carregando o filme
filme._x = 0; // posicao X
filme._y = 0; // posicao Y
this.onEnterFrame = function(){ // este filme ao entrar neste frame vai criar esta funcao
porcentagem = int (filme.getBytesLoaded() / filme.getBytesTotal() * 100 ); // calculo da
porcentagem ja carrregada
carregado = int (filme.getBytesLoaded() ); // calculo do inteiro ja carregado
total = int (filme.getBytesTotal() ); // total inteiro ja carregado
textpor = "Carregado " + int(carregado) + " bytes de " + int(total); // texto dinamico
barra._xscale = porcentagem; // barra dinamica

if (porcentagem == 100){ // verifica se carregou 100%

 barra._visible = 3000; // esconde a barra, deixa ela sem visibilidade para o //usuário.
textpor = ""; // apaga o texto dinamico
}
}

Caso tenha percebido, este é o preloader (ou pelo menos um dos) preloaders mais difíceis para ser
construído entre os vários existentes.
Para criarmos preloaders precisamos apenas de idéias legais, como por exemplo, insira um if e fale a
ele o seguinte :se a porcentagem for igual a 50 %, então aparecera uma mensagem na tela dizendo “ta
acabando, já chegamos no meio”, bom, esse é simples, tente você fazer sozinho e veja como é legal
fazer nossos próprios preloaders, com nossas próprias idéias.