Apostila Flash Mx 2004%281%29

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: [email protected] e-mail: [email protected]

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.