Teste by Tirso

Manuais e recursos para desenvolvimento web www.criarweb.com

Manual de Flash

Autores do manual Este manual foi criado pelos seguintes colaboradores de Criarweb.com: Rubén Alvarez

Ludwing Rodriguez

Ivett Kelemen

Carlos Carmona

Tutoriales-flash.com

Aurelio Franco Fernández

http://www.scourdesign.com/ (1 capítulo)

http://www.tutoriales-flash.com/ (6 capítulos)

http://www.studioflash.es (1 capítulo)

Miguel Angel Alvarez Tradução de JML

Susana Ríos Suanes

(9 capítulos)

(1 capítulo)

(5 capítulos)

(8 capítulos)

http://www.delphi.todouy.com/ (1 capítulo)

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Prólogo do Manual de Flash Bem-vindo ao manual de Flash de CriarWeb. O objetivo deste manual é proporcionar os fundamentos necessários para que você possa se desenvolver facilmente em torno do trabalho de Flash. Ao longo dos artigos, vamos abordar os conceitos básicos necessários para o bom uso desta tecnologia e descobriremos o emprego das ferramentas mais utilizadas normalmente. Este tutorial não pretende ser uma descrição exaustiva da aplicação Flash. Desejamos mais deixar sentadas as noções que os ajudarão a ter as idéias claras na hora de planejar seu projeto. Portanto, deixamos a vocês mesmos a oportunidade de ver a fundo todas as possibilidades que este programa oferece, algo que se pode descobrir à medida que se cria suas próprias animações. A parte deste manual, os elementos que você necessita para criar suas animações são poucos: a aplicação Flash, que pode ser baixada em versão de prova no site de Macromedia, um navegador web e um editor de texto como o bloco de notas de Windows. Esperamos que o manual seja de seu agrado e pedimos que entre em contato conosco se encontrar algum tipo de errata no manual ou em caso de dúvidas. Artigo por Rubén Alvarez

O que é Flash Provavelmente, um dos avances mais importantes em matéria de desenho no web foi o aparecimento da tecnologia desenvolvida por Macromedia denominada Flash. Flash é a tecnologia mais utilizada no Web que permite a criação de animações vetoriais. O interesse no uso de gráficos vetoriais é que estes permitem realizar animações de pouco peso, ou seja, que demoram pouco tempo para ser carregadas. Como talvez vocês saibam, existem dois tipos de gráficos: •

•

Os gráficos vetoriais, nos quais uma imagem é representada a partir de linhas (ou vetores) que possuem determinadas propriedades (cor, espessura...). A qualidade deste tipo de gráficos não depende do zoom ou do tipo de resolução com o qual se esteja olhando o gráfico. Por muito que nos aproximemos, o gráfico não se pixeliza, já o computador traça automaticamente as linhas para esse nível de proximidade. As imagens em mapa de bits. Estes tipos de gráficos se assemelham a uma espécie de quadrículo no qual cada um dos quadrados (píxels) mostra uma cor determinada. A informação destes gráficos é salva individualmente para cada píxel e é definida pelas coordenadas e cor de tal píxel. Estes tipos de gráficos são dependentes da variação do tamanho e resolução, podendo perder qualidade ao modificar sucessivamente suas dimensões.

Sendo assim, Flash se serve das possibilidades que oferece trabalhar com gráficos vetoriais, Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

facilmente redimensionáveis e alteráveis por meio de funções, portanto de um armazenamento inteligente das imagens e áudios empregados em suas animações por meio de bibliotecas, para otimizar o tamanho dos arquivos que contém as animações. Esta otimização do espaço que ocupam as animações, combinada com a possibilidade de carregar a animação ao mesmo tempo em que esta se mostra no navegador (técnica denominada streaming), permite fornecer elementos visuais que dão vida a uma web sem que para isso o tempo de carregamento da página se prolongue até limites insuportáveis para o visitante. Ademais deste aspecto meramente estético, Flash introduz em seu entorno a possibilidade de interagir com o usuário. Para isso, Flash invoca uma linguagem de programação chamada Action Script. Orientado a objetos, esta linguagem tem claras influências do Javascript e permite, entre outras muitas coisas, organizar o preenchimento de formulários, executar distintas partes de uma animação em função de eventos produzidos pelo usuário, ir a outras páginas, etc. Deste modo, Macromedia põem a nossa disposição uma tecnologia pensada para fornecer um bom visual a nossa web e ao mesmo tempo, nos permite interagir com nosso visitante. Obviamente, não se trata da única alternativa de desenho vetorial aplicada ao Web, mas sem dúvida, trata-se da mais popular e mais completa delas. Artigo por Rubén Alvarez

Sobre o trabalho em Flash As animações Flash são produzidas em uma aplicação de desenho. Pode-se baixar tal aplicação em versão-prova no site de Macromedia. Uma vez baixada e instalada, já podemos trabalhar. Evidentemente, aprender a fazer animações com este programa requer por uma parte um conhecimento do software e por outra, uma aplicação inteligente dos recursos que nos oferecem. Neste manual tentaremos insistir no segundo deixando ao leitor a possibilidade de descobrir pouco a pouco a aplicação. Para a redação deste manual, servimos de Flash MX. Cabe esperar que o dito para esta versão seja aplicável em grande medida às versões precedentes e as que saiam em um futuro. Logo após instalar e abrir a aplicação pela primeira vez, acessaremos a uma janela de diálogo que nos propõe três modos de uso distintos: • • •

Modo desenhista, destinado a criar animações e gráficos Modo geral, no qual vamos dispor de todas as opções de Flash ademais da ajuda. Modo desenvolvedor, enfocado à criação de aplicações com formulários, botões e outros componentes.

Este menu aparecerá unicamente na primeira vez que abrirmos Flash, não obstante, poderemos acessá-lo através da barra de ferramentas na seção Ajuda>Bem-vindo.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Já dentro do programa, após haver fechado alguns painéis com o objeto de dispor de espaço de trabalho, faremos frente a uma interface como a que se mostra na figura:

Dentro desta interface, podemos distinguir três partes principais: •

O palco Trata-se do espaço no qual realizaremos todas as tarefas de edição de gráficos. De certa forma é como o papel no qual desenharemos o que faça falta.

•

A linha de tempo Esta seção é onde poderemos organizar no tempo cada uma das imagens desenhadas no palco. Podemos subdividi-la em duas partes: A parte esquerda, onde poderemos organizar as camadas e a parte da direita que fica reservada a gestão dos fotogramas. Ambos elementos, camadas e fotogramas serão tratados mais adiante.

•

A caixa de ferramentas Aqui encontraremos as ferramentas de edição gráfica que Flash coloca a nossa disposição. Como pode se observar, estas são muito parecidas as que podemos encontrar em outros programas de edição gráfica que seja vetorial ou não.

Artigo por Rubén Alvarez

Camadas e fotogramas em Flash Como dissemos no capítulo anterior, a linha de tempo é onde poderemos organizar a sucessão de imagens que dão lugar a uma animação. Neste capítulo introduziremos os conceitos de camada e fotograma, vitais para uma compreensão do funcionamento de Flash. De certa forma, Flash trabalha como se fosse um filme. Uma animação é uma sucessão de imagens fixas que, ao passar rapidamente umas atrás das outras, dão a impressão de um movimento. Cada uma destas imagens fixas é chamada também fotograma. Os fotogramas são representados sob a forma de retângulos na parte direita do palco. Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Nestes retângulos podemos alojar três tipos diferentes de imagens: • • •

Imagens chaves Trata-se das imagens que nós mesmos desenharemos Imagens fixas São as imagens chaves copiadas nos fotogramas seguintes ao da primeira imagem chave de forma a produzir um efeito de objeto estático. Imagens de interpolação Trata-se de imagens calculadas por Flash que permitem a transição gradual entre duas imagens chaves. Este tipo de imagens muito úteis já que se geram automaticamente e proporcionam um efeito suave de movimento ou transformação.

Por outro lado, uma animação está geralmente constituída de uma variedade de objetos diferentes, cada um dos quais se introduz em um momento diferente e apresenta um comportamento independente ao resto dos objetos. De forma a organizar e editar todos estes elementos, Flash permite o uso de camadas ou decalques. Assim, uma animação Flash está composta de uma superposição de camadas em cada uma das quais introduziremos um objeto que terá sua própria linha de fotogramas. Estas camadas nos permitem trabalhar a animação em distintos planos independentes. Por padrão, ao começar uma nova cena encontraremos em nossa linha de tempo uma só camada. Progressivamente iremos introduzindo mais camadas que permitam separar cada um dos elementos da animação: objetos, fundo, áudios ou trajetórias. Um uso inteligente das camadas é a base para criar animações de qualidade. Artigo por Rubén Alvarez

Bibliotecas em Flash No capítulo precedente introduzimos o conceito de camada e fotograma e ressaltamos a necessidade de utilizá-los inteligentemente. Outro elemento de Flash que necessita uma gestão mais sábia é a biblioteca. Como dissemos previamente, Flash permite a otimização do espaço ocupado pela animação, ou o que é mesmo, do tempo que o usuário demora em carregá-la. Um dos elementos que contribui para isso é as denominadas bibliotecas. Uma biblioteca não é mais que um armazém de objetos (gráficos ou áudios) que poderão ser utilizados em uma mesma animação em uma ou ocasiões. Dependendo da posição que apresente esta biblioteca, esta pode ser própria à animação, compartilhada por várias animações, ou então permanente (empregada pela totalidade de animações). Cada um dos elementos que constituem uma biblioteca, são denominados símbolos. Como

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

dissemos, estes elementos poderão ser utilizados em nossa animação quantas vezes desejarmos. Não obstante, cada uma destas utilizações não é chamada, é sim, ocorrência. Portanto, uma ocorrência é cada uma das ocasiões nas quais um símbolo armazenado em nossa biblioteca é utilizado em nossa animação. Mudando as propriedades de um símbolo da biblioteca, mudamos cada uma das ocorrências que aparecem na animação. Contrariamente, a modificação de uma ocorrência não altera ao símbolo da biblioteca nem as outras ocorrências da animação. Como podemos observar, o uso das bibliotecas não só nos ajuda a tornar o arquivo leve como também nos permite uma criação, edição e um delete rápidos de cada uma das ocorrências. Nos capítulos posteriores abordaremos com mais detalhes a gestão de bibliotecas símbolos e ocorrências. Passaremos a seguir à aplicação do aprendido a partir da criação de uma animação. Artigo por Rubén Alvarez

Minha primeira animação em Flash I Depois de termos introduzido os conceitos básicos de Flash, vamos colocar em prática alguns deles de forma a começar a familiarizarmos com a interface. Para começar, geraremos um documento em branco por meio de: Arquivo > Novo Como podemos observar na linha de tempo, nossa animação consta de uma só camada e um único fotograma representado por um retângulo com um círculo. Este círculo significa que se trata de um fotograma que contem uma imagem chave vazia. A animação que pretendemos criar consiste em um movimento de translação de uma esfera com uma trajetória elíptica. Sendo assim, o primeiro que devemos fazer é desenhar a esfera. Entretanto, para começar com os bons costumes, não desenharemos a esfera diretamente sobre nosso fotograma vazio, e sim, criaremos um símbolo em nossa biblioteca.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Object 1

Para criar nosso símbolo na biblioteca: Janela > Biblioteca Chegado a este ponto veremos aparecer na tela uma janela como a que se vê na ilustração.

Para inserir o símbolo podemos fazer a partir do botão com uma cruz situada na parte inferior esquerda da janela da biblioteca, ou então ir à barra de menus e fazer:

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Inserir > Novo Símbolo Uma nova janela de diálogo aparece diante de nossos olhos (ver figura abaixo). Nela poderemos definir o nome (para este caso a chamaremos esfera) e o comportamento (escolheremos gráfico). Por enquanto, não entraremos na explicação da opção comportamento, já o veremos mais adiante.

Ao preencher devidamente a janela anterior e Aceitar, veremos como o cenário se engrandece e a barra superior do cenário nos mostra a palavra Esfera. O que aconteceu é que saímos de nossa primeira animação para irmos para um espaço no qual podemos editar o símbolo que quisermos criar. Portanto, colocamos mãos à obra em nosso trabalho artístico! Para desenhar a esfera vamos utilizar as ferramentas de desenho. Começamos escolhendo a ferramenta oval, representada por um círculo. Uma vez escolhida vamos ao cenário e apertando a tecla Caps Lock e clicando o botão esquerdo do mouse (o único para os usuários Mac), deslocaremos o mouse para qualquer direção. Veremos aparecer um círculo com as cores definidas na seção cores da barra de ferramentas. Agora, para dar a sensação de perspectiva à esfera, vamos colori-la em seu interior usando um degrade radial. Para isso, visualizamos o painel mistura de cores: Janela > Mistura de cor Chegando aqui, veremos uma janela como a da figura:

Neste painel, selecionaremos no menu select a opção Radial. Veremos como a janela muda de aspecto se parecendo à imagem seguinte:

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

O que faremos é selecionar duas cores (as que vocês gostarem) para cada um dos campos que se encontram na parte inferior da barra de degrade. Para isso, clicaremos sobre cada um dos campos e a seguir, escolheremos uma cor na paleta select situada na parte superior esquerda do painel. Repetiremos o processo para o outro campo. Uma vez definido o degrade, podemos selecionar a ferramenta de pintura, e clicaremos com o botão esquerdo sobre a parte preenchida do círculo. Funcionando tudo corretamente, deveremos obter uma esfera similar a da figura mostrada:

Sugerimos repetir este processo de preenchimento do círculo com um degrade brincando com as opções que nos oferece o painel de mistura de cores. Podemos ver que é possível acrescentar mais campos para conseguir um efeito de coroas ou então mudar o tipo de degrade a linear e mais coisas... Depois de nos deixarmos levar por nossa veia criativa podemos nos voltar a coisas mais sérias. Para começar, podemos alinhar a esfera com a cruz que define o ponto de alinhamento do símbolo. Para isso, escolheremos a ferramenta seta e selecionaremos a esfera deslocando o mouse ao mesmo tempo que mantemos clicado o botão esquerdo. Para mover a esfera faremos da mesma forma, deslocando o mouse até o lugar apropriado mantendo o botão esquerdo pressionado. Podemos tornar preciso o deslocamento usando as setas do cursor que nos permitirão deslocarmos pixel por pixel. Artigo por Rubén Alvarez

Minha primeira animação em Flash II Ok, já definimos o símbolo na biblioteca. Agora vamos começar a trabalhar com a animação propriamente dita. A primeira coisa que devemos fazer é sair do espaço de criação do símbolo e irmos para o palco da animação. Para isso, clicaremos na palavra Palco 1 que aparece na parte superior esquerda do palco. Já dentro do palco, vamos incluir no primeiro fotograma o símbolo que acabamos de criar. Antes de nada, iremos à janela biblioteca (se tiver fechada poderá ser aberta com Janela > Biblioteca) e selecionaremos o símbolo esfera. A seguir, clicamos e arrastamos o símbolo até o palco. O resultado deveria ser algo como o que se mostra na imagem inferior:

Podemos observar que o círculo vazio do primeiro fotograma se converteu agora em um círculo cheio, o que significa que a imagem chave não esta vazia. Passamos agora a estudar o tipo de animação que vamos fazer. Como dissemos, pretendemos simular um movimento de translação da esfera com uma trajetória elíptica, dando a impressão Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

de um círculo em perspectiva. Esta animação poderia ser definida por três imagens chave: • • •

A esfera situada em primeiro plano ao princípio de seu movimento. A esfera situada em segundo plano na metade de seu ciclo de translação. A esfera chegada ao final do ciclo, aproximadamente na mesma posição que a primeira esfera.

Podemos ver quais seriam estas três imagens chave no seguinte esquema:

De modo que já dispomos da primeira imagem chave. Agora, introduziremos a segunda no lugar aproximado que lhe corresponderia. Para isso, realizamos as seguintes operações: •

Inserimos uma imagem chave na camada 1, mais ou menos sobre o fotograma 15. Para isso, nos situamos na camada 1, no fotograma 15. Clicamos no botão direito do mouse e selecionamos Inserir fotograma chave. Podemos observar como, uma vez realizada a operação, um novo círculo aparece nesse fotograma, indicando a presença de outra imagem chave que será idêntica à imagem de nosso primeiro fotograma..

•

Modificamos este novo fotograma chave. Para isso, situados nesse fotograma, selecionamos o objeto (ou ocorrência) e modificamos sua posição e tamanho. Modificamos a posição empurrando para cima com a tecla do cursor ou então, clicando e arrastando, como vimos anteriormente. Para modificar el tamaño, seleccionaremos la herramienta transformação livre. Uma vez feito isto, selecionaremos a opção escalar, que nos permitirá bloquear as proporções do objeto e reduziremos o tamanho da esfera clicando e arrastando em um dos pontos das esquinas da marca que rodeia a esfera.

A figura seguinte ilustra a tarefa de redimensionamento e dá uma idéia do aspecto que deve ter o fotograma uma vez modificado:

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

A seguir vamos criar o terceiro e último fotograma chave, correspondente ao momento em que a esfera está a ponto de completar o ciclo. Este fotograma deveria à princípio se parecer ao primeiro com a diferença de que a esfera não chegou a completar o ciclo, e sim que está perto de consegui-lo. Realizaremos os seguintes passos: • • •

Inserimos um fotograma chave vazio no fotograma 29 (Inserir>Fotograma chave vazio) Voltamos ao fotograma 1 e o copiamos (Editar>copiar) Voltamos ao fotograma 29 e o colocamos (Editar>colar)

O resultado é um fotograma idêntico ao 1 no qual deveremos mover ligeiramente a ocorrência à esquerda, algo que faremos mais tarde. Artigo por Rubén Alvarez

Minha primeira animação em Flash III Como já dispomos das imagens chave que definem a animação, o que necessitamos agora é definir uma trajetória elíptica que as uma. Esta trajetória tem de ser definida em uma camada especial chamada guia de movimento. O movimento não é nada mais do que uma camada que contém uma linha sobre a qual podemos colocar nossos objetos de forma que tal objeto se mova de uma posição a outra respeitando a trajetória definida por esta linha. No nosso caso, dado que o que buscamos é uma trajetória cíclica, para não confundir ao objeto definiremos duas linhas distintas, correspondentes a cada meia volta. Se não tomássemos esta precaução, o objeto teria dois possíveis sentidos para chegar a uma mesma posição. Passemos então a definir estas linhas: •

Criamos o guia de movimento. Para isso, selecionamos a camada 1 (ou onde tivermos criado nossas imagens chave ) e fazemos Inserir>guia de movimento. Constatamos o aparecimento de uma nova camada Guia: Camada 1 (ver figura).

•

Selecionamos o primeiro fotograma desta nova camada e desenhamos uma elipse sem preenchimento. Podemos nois servir da ferramenta oval utilizada para a criação da esfera, mas desta vez não escolhemos nenhuma cor na paleta de preenchimento (a ausência de cor vem simbolizada por um quadro branco barrado em diagonal por uma faixa vermelha). O resultado é uma figura tal como esta:

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

• • •

Com a ferramenta laço, selecionamos a metade (esquerda ou direita, como preferir) e a cortamos (Editar>cortar). O resultado é a obtenção de uma semi-elipse. Vamos ao fotograma 15 desta mesma camada e o convertemos em um fotograma chave vazio (Inserir>fotograma chave vazio) Colamos a outra meia elipse, que ficará desnivelada em relação a outra. Para ajustar as semi-elipses podemos, é claro, fazer a olho manuseando entre o fotograma 14 e o 15 até que as duas se completem corretamente. Entretanto, uma opção mais interessante é a de usar a edição simultânea de vários fotogramas. Esta opção, disponível na linha de tempo (ver figura), nos permite a visualização e edição simultânea de vários fotogramas. Deste modo, podemos selecionar uma das semi-elipses e movê-la por meio dos cursores até faze-la coincidir com a outra metade. Logo, tiramos este modo que foi selecionado, uma vez finalizada a operação.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Rubén Alvarez

Minha primeira animação em Flash IV Chegando a este ponto, podemos começar a definir a primeira meia volta da esfera. Para gerar o movimento existente entre os fotogramas chave, temos que criar o que se denomina uma interpolação de movimento. Como já dissemos, isso é algo que Flash calcula automaticamente, evitando a modificação sistemática de cada um dos fotogramas intermédios que formam parte da seqüência. Para criar a interpolação de movimento, selecionaremos os fotogramas da camada 1 e faremos: Inserir>Criar interpolação de movimento. Feito isso, poderemos constatar o aparecimento da camada 1 de uma seta entre o fotograma 1 e 15 e outra entre o 15 e o 29. Se agora vamos a algum dos fotogramas intermédios, veremos que a imagem que contém não é a mesma que a dos fotogramas chave 1 ou 15, e sim, um intermédio de posição e tamanho entre elas. Como se pode ver, o objeto se deslocaria desde 1 até 15 e seguidamente de 15 a 29 seguindo uma linha reta. Para obrigá-lo a dotar uma trajetória elíptica como a definida no guia de movimento, teremos que ir a cada uma das imagens chave (1, 15 y 29) e , usando a ferramenta seta, colocaremos o centro do objeto sobre a linha da elipse em cada uma das extremidades correspondentes. Podemos comprovar que o objeto está bem colocado na trajetória ao tentar movê-lo fora da linha, volta a se colocar automaticamente sobre ela. Agora só nos resta ocultar a camada da trajetória. Isto pode ser feito selecionando-a e clicando sobre o ponto que se encontra abaixo. O ponto se converte em uma cruz, que significa que a camada não é visível, embora, é claro, que segue existindo. Já temos a animação construída. Para prová-la podemos fazer rapidamente: Controle>Provar cena Veremos como saltamos para outra nova janela que nos mostra a cena criada, tal como a veríamos na realidade. Esta janela nos oferece múltiplas possibilidades que já serão abordadas em outros capítulos. Não obstante, aconselhamos dar uma olhada aos tipos de opções que propõe. O resultado é uma animação como esta:

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Object 2

Se desejar ver a animação diretamente no navegador, é possível faze-lo selecionando: Arquivo>Pré-visualização da publicação>HTML Chegando até aqui, vocês descobrirão algumas das muitas possibilidades que Flash oferece para a criação de animações e, o que é mais importante, estarão mais familiarizados com o tipo de técnicas e conceitos que emprega. Artigo por Rubén Alvarez

Colocar filmes Flash em nossas páginas Colocar filmes Flash em nossos arquivos html, asp, php, etc; poderia ser uma das principais perguntas que fazemos, quando começamos a conhecer grandioso programa, e faze-lo é mais simples do que parece. Antes devemos ter em conta que devemos seguir algumas regras para que tudo funcione corretamente. Quando criamos um filme com Flash, este gera um arquivo com extensão ".fla", este nos permite criar o filem e modificá-lo. Outro arquivo que se gera é o que tem a extensão ".swf", este se compõe no momento que provamos o filme e nos ajuda a ver o resultado das criações e modificações dos arquivos ".fla". Finalmente podemos gerar um arquivo "html", que se compõe quando publicamos nossos filmes e nos ajuda a ter uma idéia mais clara de como serão vistos na web. 1. Quando seu filme Flash esteja terminado, salvo e testado (CTRL+Enter), você deve publicá-lo (CTRL + F12). 2. No menu principal de nosso explorador, devemos clicar em "Ver", depois clicar em "Código fonte", isto faz com que se execute o "Bloco de notas", o qual nos mostrará o código html dos filmes.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

3. Dentro do conteúdo do Bloco de notas, você deve procurar as etiquetas <object>...</object>, copie o conteúdo que se encontra entre essas etiquetas (logicamente as etiquetas deverão ser incluídas) e finalmente cole em seus arquivos. Isso é tudo, mas lembre-se que se seguir este truque e se não editar a etiqueta <object>, você deverá s arquivos .swf e .html no mesmo diretório do servidor ou do disco rígido de seu computador, do contrário os filmes Flash não se carregarão. Nota: Outra maneira muito simples para inserir uma animação Flash em uma página web é utilizar o programa Dreamweaver, também desenvolvido pela empresa Macromedia. Em tal programa existe um botão, na janela de objetos comuns, que nos permite selecionar o arquivo Flash (Com extensão .swf) que desejarmos inserir na página web.

Não é necessário subir o arquivo .fla ao seu servidor, já que o .swf e .html não o necessitarão. Artigo por Ludwing Rodriguez

Como fazer botões em Flash Neste capítulo aprenderemos a criar botões e como linká-los com nossos arquivos ou com outras páginas web, que não estão em nosso servidor. Flash nos permite criar botões personalizados, de maneira muito rápida; e ainda nos ajuda a dar vida a nossas páginas web; em poucas palavras, nos ajuda a tornar mais atrativo nosso site e logicamente isso é o que queremos para aumentar o número de visitas em nosso website. Por meio de linguagens de programação (por exemplo, Javascript), também poderíamos criar botões, mas seria um pouco mais complicado; ademais não poderíamos criar exatamente os mesmos efeitos que podemos fazer com Flash. Comecemos: 1- Primeiro, criaremos um novo símbolo, fazendo a seguinte combinação de teclas: CTRL+F8. Aparecerá o seguinte quadro:

2- Em Nome (Name), escreva "botão 1", em Comportamento (Behavior) selecione a opção Botão (Button), finalmente clique em Aceitar (OK). Automaticamente, seremos enviado desde a Cena 1 ao palco do símbolo "botão 1"; aí é onde criaremos um botão que será incluído em nossa biblioteca.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

O palco unicamente para a criação de botões, será parecido a seguinte imagem:

Olhe para a linha do tempo (Timeline), como se pode notar é diferente à linha do tempo da Cena 1. A linha do tempo, do palco para criar botões é parecida a seguinte imagem:

Expliquemos o gráfico anterior: Devemos entender que Repouso, Sobre, Pressionado e Zona ativa são os quatro estados de um botão. Vejamos a seguir, o que representa cada estado. Repouso: é quando o mouse não está colocado sobre nosso botão ou não se clicou sobre ele. Sobre: é quando o mouse está colocado sobre o botão, mas ainda não se clicou sobre ele. Pressionado: logicamente, é quando se clica sobre o botão. Zona Ativa: como o próprio nome indica, é quando o botão está ativo. Continuemos com a criação de nosso "botão 1". A cabeça leitora, na linha do tempo tem que estar assinalando o estado de Repouso. 3- Clique sobre a ferramenta de Retângulo (Rectangle Tool), que se encontra no Painel de Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Ferramentas. 4- Desenhe um retângulo no centro da área de trabalho, e coloque a cor azul. 5- Depois pressione a tecla F6; isto fará com que a cabeça leitora na linha do tempo passe ao estado Sobre. Como poderá se notar, o botão se copia, portanto não será necessário fazer um novo desenho. 6- Ainda estamos no estado Sobre, se não tiver selecionado o botão, faça-lo (com a ferramenta Seta e clique duas vezes sobre nosso desenho), logo dirija-se ao Preenchimento de Cor que se encontra na seção cores do Painel de Ferramentas, e escolha a cor vermelha, como se mostra a seguir:

7- Depois pressione novamente a tecla F6, para que a cabeça leitora passe ao estado Pressionado, e mude a cor de preenchimento da mesma forma que fizemos no passo 7; e escolha uma cor verde. Finalmente pressione pela última vez F6 para passar ao estado Zona ativa, isto fará com que se copie o botão. Para este último estado, não é realmente necessário mudar a cor de fundo. Com as cores que aplicamos, faremos com que o botão mude de cor, quando se realizar os Estados dos botões anteriormente descritos. Nosso botão foi criado, portanto você já pode voltar para a Cena 1, abrir a biblioteca e ver que aí está o símbolo chamado "botão 1", poderá arrasta-lo ao palco as vezes que quiser para fazer várias cópias dele. Pegue a Ferramenta de Texto (A), e escreva o que desejar, depois coloque o texto sobre o botão criado; para provar o filme faça a tradicional combinação de teclas CTRL + Enter. Se depois quiser ver o filme em seu explorador de internet, unicamente pressione as teclas CTRL + F12. Artigo por Ludwing Rodriguez

Linkar páginas web por meio de botões Flash Se criamos botões, logicamente é porque queremos linká-los com outras páginas web no nosso servidor, ou páginas web em outros servidores. Para este capítulo necessitaremos do botão que criamos no capítulo anterior. Para fazer os links, devemos utilizar o painel de Ações de Flash. Para poder visualizar tal painel, dirija-se ao menu principal e clique na Janela > Ações.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Aparecerá a seguinte imagem:

O painel de Ações, nos servirá para trabalhar com ActionScript. O que é ActionScript?, é a linguagem de criação de scripts de Flash. Pode utilizar ActionScript para controlar objetos nos filmes de Flash com o fim de criar elementos interativos e de navegação, e para ampliar Flash com o fim de criar filmes altamente interativos e aplicações Web. Em outras palavras, ActionScript é a linguagem de programação utilizada por Flash. Comecemos a fazer o link. 1- Na biblioteca de Flash, arrastamos à Cena 1 o botão criado no capítulo anterior. Mantemos o botão selecionado, se não estiver, clique sobre ele com a ferramenta seta. 2- No menu principal, clique em Janela > Ações. 3- No painel de Ações, clique na palavra Ações (Actions), automaticamente se desdobrará uma espécie de sub-menu onde se deverá clicar em Explorador (Browser/Network), depois clique duas vezes em getURL. getURL é a ação que nos permitirá navegar entre páginas web, também permite passar variáveis a outras aplicações numa URL definida. Um exemplo de URL é http://www.criarweb.com 4- Como se pode notar, ao clicar duas vezes sobre getURL, em cima do quadro que está à direita do painel de Ações, aparecem os seguintes campos de texto: URL: aqui você especificará o endereço o qual o botão fará o link. Se for fazer um link com uma página web dentro do seu servidor você tem que escrever o nme do arquivo, por exemplo: nome_de_arquivo.html Se for fazer um link com uma página web que não está dentro do seu servidor você tem que escrever http://, mais o nome do arquivo, por exemplo: http://www.criarweb.com Janela: Este é opcional (se quiser pode deixá-lo vazio). Especifica de que forma será carregado Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

o documento ou o fotograma. As formas na qual se carregam são: _self: especifica o fotograma atual da janela ativa. _blank: indica que a página se abrirá ou carregará em uma nova janela.. _parent: especifica o elemento principal do fotograma atual. _top: especifica o fotograma de nível superior da janela atual. Variáveis: POST e GET, especifica a maneira na qual se enviará a informação etc, se usa para formulários, portanto em nosso caso não são necessárias as variáveis; então selecionamos Não enviar. Um exemplo de como teria que ficar o script no quadro direito do painel de Ações é: on (release) { getURL("http://www.criarweb.com", "_blank"); } (se tiver problemas em seguir as instruções, simplesmente copie o código anterior e cole no painel de Ações) Pode-se ver que na primeira linha do script aparece escrito: "on (release)". É uma ação utilizada nos botões, que indica que a ação que aparece entre "{ }" se executará imediatamente depois de clicar sobre o botão, ou seja, ao liberar o botão do mouse. Artigo por Ludwing Rodriguez

Links e-mails Flash Por meio de botões feitos em Flash, podemos executar nossos programas de envio de correios eletrônicos (Outlook por exemplo), para enviar mensagens . (Seus programas de envio de correios eletrônicos têm que estar configurados e instalados corretamente) Como fazer isto? 1- Criamos um botão. 2- Clique com o botão direito > Ações 3- Copie as seguintes ações e cole no painel de Ações: on (release) { getURL("mailto:seu_e-mail@dominio.com"); }

Expliquemos o anterior:

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

• • •

on (release), é uma ação utilizada unicamente para botões, e indica que a ação se executará imediatamente depois de haver pressionado e liberado o botão do mouse. getURL: Ação; carrega um documento de uma URL específica em uma janela ou passa variáveis a outra aplicação em uma URL definida. Mailto: método utilizado para enviar correios eletrônicos.

Prove seu filme (CTRL+Enter). Depois você pode publicá-lo (em menu principal Arquivo > Publicar). O resultado pode ser visto neste link. Artigo por Ludwing Rodriguez

Interpolação de Formas A interpolação de formas, consiste em fazer com que um objeto no palco de Flash mude a sua forma física. Por exemplo, podemos fazer que um círculo se transforme em um retângulo. Para realizar uma interpolação de formas, temos que fazer uso de "Fotogramas chaves vazios", já que este nos permite criar um vazio na linha do tempo, o qual nos permitirá criar outras formas ou objetos. Para este capítulo, faremos um exemplo simples, comecemos: 1- Acima, na parte esquerda do palco, desenhe 3 retângulos com a ferramenta "Retângulo"(Rectagle tool). Na linha do tempo, pode se observar que estamos fazendo uso do fotograma 1, da camada 1. 2- Clique no fotograma 4, depois pressione a tecla F6, para criar fotogramas chaves. 3- Depois, clique no fotograma 17 e pressione a tecla F7 para criar um fotograma chave vazio. Observe a linha do tempo, e verá que a cabeça leitora está sobre um fotograma que não contem nada; é exatamente nesse fotograma vazio onde criaremos a imagem na qual se transformarão os retângulos anteriormente desenhados. 4- Clique na "Ferramenta de texto" do painel de ferramentas e na parte direita debaixo do palco, escreva a palavra "WEB", depois clique na "Ferramenta Seta", com o texto selecionado, faça a seguinte combinação de teclas: CTRL + B, duas vezes. A combinação de teclas CTRL + B, fará com que o texto se separe, para que Flash interprete cada letra como uma imagem individual, do contrário Flash interpretará à palavra "WEB" como uma só imagem e a interpolação de formas não funcionará. 5- Agora dirija-se ao fotograma 30 e pressione F6 para alongar o tempo de duração de os objetos na linha do tempo. 6- Regresse ao fotograma 4, clique sobre ele, e vá em direção ao painel de "Propriedades" que normalmente encontra-se na parte debaixo em torno de Flash, (se não puder visualizar vá ao Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

menu principal, clique em Janela>Propriedades); no mencionado painel existe uma opção chamada "Interpolação"(Tween), pode desdobrar a barra de opções e escolher a opção "Forma"(shape). Pode-se ver que na linha do tempo da camada 1, aparece a cor verde junto com uma seta que deve se estender desde o fotograma 4 até o 17; é aí exatamente onde se realiza a interpolação de formas; como mostra a seguinte imagem:

Agora já se pode provar o filme (CTRL + Enter) Artigo por Ludwing Rodriguez

Shape Hint. Interpolação ordenada de formas Neste capítulo nos ocupamos do Shape Tweening para controlar e ordenar a interpolação das formas. Primeiro, preparamos a interpolação a modificar: transformamos um retângulo em um triângulo. No primeiro fotograma desenhamos um retângulo. Copiamos sua base Edição Copiar. Inserimos um fotograma Chave vazio Inserir Fotograma Chave Vazio no fotograma 25, e colamos Inserir Colar em lugar (paste in place). Para ver o original retângulo clicamos o botão Onion Skin

e completamos o triângulo.

Vamos para algum dos fotogramas intermédios. No painel de propriedades na opção Interpolação (Tween) Desdobramos a barra de opções e escolhemos a opção Forma (Shape).

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Provamos o filme (Ctrl+Enter) Podemos ver que a transformação é bastante desordenada. Queremos que a base sempre fique em seu lugar. No primeiro fotograma clicamos no menu Modify>Shape>Add Shape Hint. Deslocamos o ponto vermelho ao ângulo esquerdo do retângulo e no fotograma 25 ao ângulo esquerdo do triângulo. Acrescentamos outro Shape Hint ao ângulo direito das formas. Provamos o filme (Ctrl+Enter).

Object 4

Podemos ver que a transformação já é muito mais ordenada. Acrescentamos outro Shape Hint à metade da base das formas E provamos o filme (Ctrl+Enter).

Object 5

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Ivett Kelemen

Interpolações de símbolos Neste parágrafo aprenderemos a criar interpolações com objetos complexos como grupos e símbolos. Primeiro, criamos um símbolo: Inserir / Símbolo Novo. Damos um nome: 'hello' e escolhemos o botão de opção "Grafica". Com o "type tool" escrevemos HELLO. No painel "Propriedades" formatamos. Regressamos à cena e clicamos no "Sceen1" debaixo da linha do tempo. Clicamos no menu Janela/Biblioteca. Na janela que aparece pegamos o símbolo 'hello' e o arrastamos ao palco. Movemos o símbolo à parte de cima do palco, mais ou menos ao centro. No painel de "Propriedades" na opção "Cor" desdobramos a barra de opções e escolhemos a opção "Alpha", e damos um valor de 0%. Com isso, conseguimos que o texto seja transparente. Inserimos um fotograma chave Inserir> Fotograma Chave no fotograma 25. Aqui selecionamos o símbolo. No painel de "Propriedades" mudamos o valor "Alpha" a 100% para que seja opaco. Deslocamos o símbolo ao fundo do palco. Com o botão "Free transform" alongamos o texto. Assim definimos a situação inicial e final da interpolação. Falta agora criar os fotogramas intermediários. Clicamos na linha do tempo. No painel de "Propriedades" na opção "Interpolação"(Tween) desdobramos a barra de opções e escolhemos a opção "Movimento" (Motion). Provamos o filme: Ctrl+Enter. Tudo funciona perfeitamente.

Object 6

Retornamos à área do desenvolvimento para ajustar outro parâmetro. No painel de "Propriedades" no campo "Ease" podemos ajustar a aceleração da animação. Escolhemos -100: assim a velocidade aumenta durante a animação. Provamos o filme: Ctrl+Enter

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Object 7

Artigo por Ivett Kelemen

Efeitos de máscaras com Flash As máscaras são um efeito utilizado freqüentemente em páginas web que contém filmes Flash. Tal efeito consiste em ocultar objetos que se encontram no palco de Flash, e mostrá-los pouco a pouco, por algum objeto que tenha uma interpolação de movimento ou qualquer outro efeito que seja produto de sua imaginação. A máscara não é somente para ocultar objetos completamente, um exemplo poderia ser mostrar os objetos cor cinza e que um objeto com interpolação de movimento os mostre de outra cor quando passe sobre eles. Para ter tudo mais claro, façamos um exemplo fácil: 1- Em Flash, na cena 1, pegue a ferramenta de texto (A) e escreva o que desejar, utilize um tamanho de fonte grande para que o texto abranja grande parte do palco... 2- Dirija-se ao fotograma (frame) número 60 da "camada 1", clique sobre ele, e pressione F6, para que o tempo de duração do filme seja mais prolongado. 3- Crie outra camada (camada 2), depois use a ferramenta "oval" e desenhe uma figura oval. 4- Clique com o botão direito sobre o nome da "camada 2" e no menu que se desdobrará, selecione a opção "Máscara" (Mask) 5- Agora, dirija-se ao fotograma número 1 da "camada 2" (é onde está a figura oval), clique com o botão direito, e depois na opção "Criar interpolação de movimento". 6- Finalmente clique no fotograma número 60 da "camada 2" e pressione a tecla F6 e mova a Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

figura oval como quiser, agora você já é um Flasher, portanto deve ter muita imaginação. Nossa linha do tempo teria que ser parecida com a seguinte imagem:

Agora prove o filme! Artigo por Ivett Kelemen

Onion Skin ( Pele de cebola ) Neste capítulo trataremos da animação "fotograma por fotograma". Para realizar este tipo de animação temos de modificar manualmente os símbolos. Por exemplo, simularemos o movimento de um pincel. Criamos um símbolo de pincel e o colocamos no nível 1. Criamos um símbolo de listra e a colocamos no nível 2. Em ambos níveis selecionamos o fotograma 4 e clicamos F6, inserimos 2 fotogramas chaves. No nível do pincel, movemos o pincel. No nível da listra com a "Transformação livre" alongamos a listra. Inserimos fotogramas chaves no fotograma 7. (F6). Agora queremos que o movimento seja fluido. Como faremos? Clicamos o botão "Onion skin" na barra de estado da linha de tempo. Pegamos a borda esquerda da "Onion skin" e movemos até o primeiro fotograma. Isto nos permite ver os fotogramas anteriores, que aparecem semitransparentes. Inserimos fotogramas chaves no fotograma 10. Movemos o pincel, e alongamos a listra. Provamos o filme: Ctrl+Enter

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Object 8

Artigo por Ivett Kelemen

Importar bitmap e usar como fundo Do menu File escolhemos Import, e escolhemos o arquivo Passaro.bmp. A imagem aparece no palco e está na Library (menu Window/Library ou F11).

A imagem se comporta como um símbolo, e podemos reutilizá-la várias vezes no filme sem que o tamanho do arquivo cresça excessivamente. Todos os bitmaps inseridos estão no painel Cor Mixer (menu Window/ Color Mixer ou Shift+F9) e podem ser utilizados como preenchimento. Como se faz? Abrimos o painel das cores (menu Window/ Color Mixer ou Shift+F9). Na barra de opções escolhemos Bitmap. No quadro debaixo aparecem todos os bitmaps que podemos utilizar. Escolhemos Passaro.bmp, e com o Rectangle Tool

desenhamos um retângulo. O retângulo

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

está formado por pequenos pássaros.

Object 9

No Tool Box painel clicamos Fill Transform e clicamos dentro do retângulo. Um dos pássaros fica selecionado. Podemos mudar seu tamanho ou girá-lo clicando com o mouse no símbolo correspondente. A totalidade dos pássaros que formam o recheio fica modificado da mesma forma.

Object 10

Artigo por Ivett Kelemen

Modificar Bitmap Modificar bitmap O Flash não é um programa para retocar fotografias, e por isso não é tão fácil modificar as imagens importadas. Podem se modificar parcialmente através da divisão, transformar a desenhos vetoriais. - Primeiro, trataremos da divisão: No menu File/Import selecionamos o arquivo Passaro.bmp.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Selecionamos a imagem com a seta preta e escolhemos o menu Modify/Break Apart. A imagem selecionada fica marcada com pontos. A partir deste momento já é possível modificar por partes a imagem com os instrumentos de desenho. Por exemplo, selecionamos o Lasso Tool E depois o Magic Wand e clicamos no fundo da imagem. Com isto conseguimos que só o fundo da imagem fique selecionado (marcado com pontos). Agora, podemos mudar a cor, ou editar qualquer parâmetro do fundo sem afetar a imagem em primeiro plano. Podemos ver o resultado na seguinte imagem:

Object 11

Como podemos ver na imagem, a capacidade de selecionar do Flash não é tão perfeita como poderíamos desejar. Mesmo assim, pode ser útil em muitos casos. Outra maneira de manejar os bitmaps é convertê-los em áreas vetoriais. Para provar esta facilidade, eliminamos a imagem que temos no palco e copiamos nele, arrastando pela janela de livraria, a imagem do pássaro original. Como podem ver, a imagem na livraria intacta e não foi afetada pelas modificações que fizemos com sua cópia no palco. Selecionamos a imagem com a seta preta e escolhemos o menu: Modify/Trace Bitmapp. Na janela que aparece damos os seguintes valores: ColorTreshold: 50. Isto significa que se a diferença entre os valores RGB de 2 pixels for menor de 50, então a cor dos 2 pixels se considera igual. Minimum Area: 5 Deixamos invariável os valores Curve fit= Normal, e Corner Tresholder=Normal. A imagem do pássaro já é um desenho vetorial, e podemos editá-lo como tal.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Object 12

Color Treshold=50, Minimum Area=5

Object 13

Color Treshold=100, Minimum Area=10

Object 14

Color Treshold=150, Minimum Area=15

Artigo por Ivett Kelemen

Distribute to Layers Em Flash, em 1 linha de tempo pode-se animar somente 1 objeto. Mas se quisermos que um texto, por exemplo, se espalhasse, como podemos fazer? Na versão MX de Flash temos a resposta. Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

• •

• • • • •

•

Com o Type Tool escrevemos o texto 'Ciao bello'. Selecionamos com a seta preta e escolhemos o menu: Modify / Break Apart. Assim, ainda não podemos anima-la porque todas as letras estão no mesmo nível. Para animálas teríamos que estar em níveis diferentes. Quando a palavra estiver selecionada escolhemos o menu: Modify / Distribute To Layers. Flash automaticamente cria para cada letra um nível diferente. Agora apagamos a linha de tempo "layer 1" que fica vazia. Em todas as linhas de tempo do fotograma 10 inserimos um fotograma chave. Selecionamos o fotograma 10. Vemos no palco as letras do texto "Ciao bello". Distribuímos as letras pelo palco, procurando coloca-las perto da borda. Agora vamos a um fotograma intermediário entre o 1 e o 10, selecionando todas as linhas de tempo. No painel Property, na opção Tween desdobramos a barra de opções e escolhemos a opção Motion. Isto cria, em todos os fotogramas intermediários entre o 1 e o 10, as imagens necessárias para dar sensação de movimento progressivo entre o texto legível que temos no 1 e as letras distribuídas que temos no 10. Provamos o filme: Ctrl+Enter

Object 15

Isto é o que queríamos conseguir: um texto onde todas as letras estão animadas. Provamos o Distribute to layers em um texto. É possível usar este menu em todos os objetos complexos que possam ser divididos em objetos individuais. Artigo por Ivett Kelemen

Inserir vídeo em Flash Importar vídeo Uma das novidades de Flash MX é a melhora na importação e gestão das seqüências de vídeos (video-clip). Flash é capaz de manejar os seguintes arquivos:

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

.avi Quick Time .mpeg Digital video

É necessário que o computador tenha o Quick Time 4 ou o Director 7 (ou versões posteriores) instalados. Vamos criar um símbolo, e dentro deste símbolo inserimos uma seqüência de vídeo. •

Escolhemos o menu Insert / Create New Symbol (name=ruela, behavior=Movie Clip). Do menu; File escolhemos Import e escolhemos rua.avi. Flash apresenta uma nova janela de diálogo onde podemos ajustar a importação do vídeo. Flash comprime as seqüências de vídeo com o codex 'Sorenson Spark' o que permite reduzir notavelmente o tamanho do arquivo. Os parâmetros Quality, Keyframe e Scale permitem ajustar este processo.

•

Deixamos 40 o valor de Quality, e 24 o de Keyframe. Este parâmetro indica a série de fotogramas chave que serão inseridos na seqüência. Colocamos Scale = 70% para reduzir o tamanho do vídeo. A importação pode demorar vários minutos - dependendo do tamanho do vídeo. Antes de inserir definitivamente a seqüência de vídeo, Flash nos informa que este necessita por sua reprodução total um número de fotogramas superior ao que temos atualmente. Portanto, é necessário aumentar o número de fotogramas (neste exemplo: 84). O procedimento está completo.

Agora vamos ver como podemos aplicar as modificações de símbolos na seqüência de vídeo. •

Regressamos ao palco. Inserimos um fotograma chave na posição 84.

•

Regressamos ao fotograma 1. Selecionamos o Movie Clip, e o movemos ao canto esquerdo, e com o Free Transform o giramos um pouco. No Properties painel abrimos o menu desdobrável de Color e escolhemos cor = Alpha. Damos um valor de 0%.

•

Criamos uma interpolação (clicando em um fotograma intermediário), e no Properties painel, menu desdobrável "Tween", escolhemos a opção "Motion"). Clicando no fotograma 84 abrimos o painel Actions (menu Window / Actions o F9), e escrevemos stop(). Dando um clique duplo no vídeo, e clicando no fotograma 84 abrimos o painel Actions (menu Window / Actions o F9), e escrevemos stop(). Assim, não se repete infinitamente o filme.

Provamos o filme (menu Control / Test Movie o Ctrl+Enter)

Artigo por Ivett Kelemen

Scroll de texto em Flash Vamos criar um scroll de texto da forma mais simples que há. Já será com você torná-lo esteticamente mais chamativo ou complicá-lo mais. Primero podemos dar uma olhada no exemplo em funcionamento para saber o que vamos criar neste artigo. Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Abrimos um novo filme de Flash e vamos usar uma única camada. Com a ferramenta de texto Criamos um campo de texto do tamanho que quisermos e lhe daremos as seguintes propriedades:

Estas propriedades são: Campo de texto tipo dinâmico, multi-linha para que o texto possa ocupar mais de uma linha, criamos a variável "MeuTexto" que é onde, usando ActionScript, meteremos o texto do scroll. Quanto ao tipo de fonte, tamanho e cor, coloquei uma letra Arial, a 14 px e de cor azul, você pode colocar o que quiser. E por último, temos estes três botões: O primeiro quer dizer que o texto poderá ser selecionado pelo usuario, o segundo, que o texto lerá o formato HTML, ou seja, poderemos colocar etiquetas de HTML, e o terceiro é que o campo de texto terá uma moldura ao redor. Agora vamos criar 2 botões, para mover o texto para cima e para baixo. Você pode criar os botões como quiser, para este exemplo, usamos uns dos que vêem na biblioteca de arquivos comuns de Flash MX (janela>biblioteca comuns>botoes>circle buttons>menu):

Como se pode ver, o botão de baixo, está invertido; para os que são muito novatos em flash, digo para que para dar a volta ao botão, embora haja várias maneiras, a mais simples seria selecionar o botão e modificar>transformar>virar verticalmente, e pronto.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Bem, a parte do desenho, (o mais simples possível), já está terminada, agora vamos ver o código que necessitamos. Comecemos pelo código dos botões; selecionamos o botão de cima, clicamos com o botão direito sobre ele e damos a "ações", então, se abrirá o quadro de código, e colocaremos o seguinte: on (press) { MeuTexto.scroll -= 1; }

E no botão de baixo colocaremos: on (press) { MeuTexto.scroll += 1; }

Estes códigos, o que dizem a flash é que quando se pressione o botão, a MeuTexto, que é a variável que criamos para o texto anteriormente, na propriedade scroll que já vem definida em ActionScript, lhe diminuímos (para subir), ou lhe somamos (para baixar), uma unidade ao que já tínhamos. Por último, nos falta colocar o texto no scroll, selecionamos o primeiro e único fotograma que temos, clicamos com o botão direito sobre ele e vamos à 'ações', e colocamos:

stop(); MeuTexto = "O texto que quiser.";

O código é muito fácil, simplesmente, colocamos de entrada um stop, por uma razão, cada vez que se leia este fotograma, se executará este código, como só deve se executar uma vez, (do contrário o texto não pararia de se carregar no scroll), colocamos um stop e o filme se deterá. Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

A seguir carregamos o texto colocando na variável MeuTexto que criamos ao criar o campo de texto dinâmico. Atenção com um erro muito bobo que pode dar alguma dor de cabeça para os mais novatos; para carregar o texto, a estrutura é a seguinte: variável = "texto"; como se pode ver, o texto vai entre aspas, de modo que o texto que colocarmos não poderá ter nada entre aspas, ou seja, isto: variavel = "aqui vai o "texto" que quero colocar"; nos daria erro. Neste caso, por ser um texto tão curto se vê fácil, porém o mais lógico é que copiássemos e colássemos o texto, tenha em conta que não pode ter aspas intercaladas. E outra coisa que não pode ter são quebras de linha. São as únicas coisas a ter em conta neste tipo de scroll. Se desejar, pode baixar o arquivo do exemplo aqui. Para acabar podemos abrir uma página a parte para ver o exemplo funcionando. Artigo por Carlos Carmona

Criar um reprodutor de MP3 em Flash Neste tutorial vamos aprender a realizar um reprodutor MP3 com Flash, com sua lista de reprodução. Como vamos empregar componentes, vocês verão o fácil que é a programação do exemplo. COMO FAZÊ-LO. Vamos depositar os arquivos MP3 em um diretório na raiz do servidor web chamado mp3. Se dispusermos da capacidade para executar alguma tecnologia de servidor como ASP ou PHP, criaremos dinamicamente um arquivo XML com os nomes dos arquivos MP3. Se não tivermos nenhuma destas tecnologias ao nosso alcance o melhor é criar o arquivo XML manualmente e depositá-lo no servidor. De qualquer forma, o XML que administra os dados deverá ter esta estrutura. <?xml versao='1.0' ?> <exploracao pasta='mp3'> <arquivo nome='2_pi_r.mp3' /> <arquivo nome='Brain_Stew.mp3' /> <arquivo nome='Carrera_Rapida.mp3' /> <arquivo nome='Feel_The_Pain.mp3' /> <arquivo </exploracao>

Em nosso exemplo, empregamos ASP, para isso nos baseamos no tutorial Como ler os arquivos que há em uma pasta do servidor com ASP e passá-lo a Flash.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

O arquivo que usamos gera esta saída.

Já em Flash, arrastamos quatro componentes ao stage através do painel de componentes. Primeiro, arrastamos um componente MediaPlayback que vai se encarregar da reprodução dos arquivos MP3, lhe colocaremos como nome de instancia controlador. Com o componente selecionado, clicamos na aba parâmetros da barra de propriedades para abrir o Inspetor de componentes. Uma vez aberto, atribuímos os parâmetros como se mostra na figura. Depois posicionamos no stage um componente do tipo lista e lhe colocamos como nome de instancia temas_list. Este componente irá conter a lista de canções de nosso reprodutor MP3 e nos permitirá mudar de tema ao clicar sobre seus elementos. Os outros dois componentes que nos restam são dois do tipo Label, que nos indicarão o título da canção que se está reproduzindo e o número de temas na lista. Seus respectivos nomes de instancia são titulo_lb e quantidade_lb. A seguir apresentamos o código comentado que vai na linha de tempo principal, que ademais é o único de todo o filme, exceto umas pequenas linhas associadas ao componente lista.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

// código em linha de tempo principal // ajustes iniciais System.useCodepage = true; // evitamos problemas com os nodes em branco XML.prototype.ignoreWhite = true; // defino um estilo global para os componentes _global.style.setStyle("fontSize", 10); // neste array armazenarei as canções var array_temp:Array = new Array(); // objeto XML que carrega a lista de arquivos var lista_xml:XML = new XML(); lista_xml.onLoad = carregarLista; // ponho o conteúdo do XML // no componente lista function carregarLista():Void { array_temp = this.firstChild.childNodes; if (!isNaN(array_temp.length)) { // numero de temas titulo_lb.text = array_temp.length+" temas"; // preencho a lista for (var k:Number = 0; array_temp[k]; k++) { temas_list.addItem(array_temp[k].attributes.nome); } // carrega a primeira canção carregarMP3(0); } } // com esta função carrego o mp3 dentro do // componente mediaplayback function carregarMP3(indice:Number):Void { controlador.setMedia("/mp3/"+array_temp[indice].attributes.nome, "MP3"); controlador.play(0); } // rotinas para passar à seguinte canção // quando termine a atual var listenerObject:Object = new Object(); listenerObject.complete = function(eventObj:Object) { _root.tema_actual++; if (_root.tema_actual>=array_temp.length) { _root.tema_actual = 0; } carregarMP3(_root.tema_actual); }; controlador.addEventListener("complete", listenerObject); // carrego a lista de reprodução lista_xml.load("/asp/verLista.asp"); // esta linha seria do tipo // lista_xml.load("minhaLista.xml"); // se emprego um arquivo de texto // plano com formato XML

Agora só falta o código associado ao componente lista. on (change) { _root.carregarMP3(this.selectedIndex); }

Pode-se baixar este mesmo exemplo e ver como funciona: mp3player.zip, contém todos os arquivos necessários para executá-lo em um servidor ASP exceto os próprios MP3, que ocupam vários megas.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Tutoriales-flash.com

Filmes Flash que se adaptam ao tamanho da janela Um dos dilemas que se apresentam a um web designer quando começa um projeto em Flash é o tamanho do filme. Normalmente se define um tamanho objetivo e se trabalha em base a essas dimensões, o problema costuma surgir quando se visualiza o swf em tela que têm uma resolução diferente. Nunca lhe aconteceu isto? Você desenha uma web com resolução fixa, a 800 x 600px. por exemplo, e quando o cliente vê as primeiras telas com uma resolução de 1024 x 768 ou inclusive de 1280 x 1024 px. (cada vez mais freqüente devido ao boom dos TFT de 17'') se queixa porque considera que há uma área importante da tela sem utilizar. Chegados a esta situação se apresentam duas alternativas: Alternativa 1. Convencemos a nosso cliente de que o tamanho é o adequado, lhe aconselhamos sobre a necessidade de não saturar a tela, falamos das bondades de usar claros na composição, dizemos que tecnicamente é a única opção, blá, blá, blá. Alternativa 2. Desenhamos um website adaptável à resolução da tela (sempre haverá um tamanho mínimo). Se não souber como fazê-lo, neste tutorial explicaremos nossa maneira de fazê-lo, que certamente não é a única. A web www.ivi-concept.com está desenvolvida empregando o sistema que vamos mostrar neste tutorial. COMO FAZER. Mesmo querendo que os conteúdos do filme se adaptem ao tamanho da janela do navegador, devemos definir uma largura e uma altura mínima para organizar e desenhar a composição. Trabalharemos com estas dimensões e planejaremos o ajuste para resoluções maiores. Em nosso exemplo vamos trabalhar com um filme de 600 x 400px. e lhe atribuiremos comportamentos aos elementos que se executarão quando se detecte uma mudança na área disponível para mostrar o filme, ou seja, desenhamos o filme pensando em como se deve reajustar para diferentes tamanhos. Todos os elementos ajustáveis têm que ser do tipo movieclip e devem ter sua origem em sua esquina superior esquerda. Se tivermos botões e caixas, serão colocados dentro de um movieclip. Temos que incluir o swf no html com umas dimensões de 100% de largura e 100% de altura, além de indicar na linha de tempo principal que não queremos que se escale novamente, mas sim que se ajuste à esquina superior esquerda. No primeiro frame escreveremos: Stage.scaleMode = "noScale"; Stage.align = "TL";

Se fizermos isto, quando aumentarmos ou diminuirmos o tamanho da janela, estaremos fazendo o próprio com o tamanho do Stage. Todo o mecanismo do tutorial se baseia neste tamanho do Stage. A seguir definimos as dimensões mínimas: largura_minima = 600;

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

altura_minima = 400;

Para armazenar os clips que têm que se ajustar (que serão todos menos os que se ajustam acima à esquerda) iremos criar um array ou matriz: clips_ajustaveis = new Array();

Definimos o objeto detector de eventos que vai detectar a mudança de tamanho e o associamos ao Stage para detectar as mudanças: myListener = new Object(); Stage.addListener(myListener);

A função rec é a que se executará cada vez que detectarmos uma mudança no tamanho do Stage: myListener.onResize = rec; function rec() { altura = Stage.height; if (altura<altura_minima) { altura = altura_minima; } largura = Stage.width; if (largura<largura_minima) { largura = larugra_minima; } for (var g = 0; clips_ajustaveis[g]; g++) { clips_ajustaveis[g].alinhar(); } }

Esta função obtém em primeiro lugar o novo tamanho do Stage, o compara com as dimensões mínimas e se for menor atribui o valor mínimo. Depois executa o método alinhar() para cada um dos elementos do array clips_ajustaveis que são os clips. Com isto o que fazemos é ajustar cada clip da maneira que tivermos dito. E como dissemos? Agora veremos... Para continuar vamos definir dois métodos ou funções para todos os movieclips mediante protótipos, os protótipos nos permitem adicionar métodos a classes inteiras sem ter que fazêlo individualmente, já publicaremos um tutorial falando sobre eles. O primeiro método que implementaremos será setAjuste(ajuste_x, ajuste_y, ajuste_width, ajuste_height), através do qual vamos indicar como queremos que se ajuste cada clip. // Os valores para ajuste_x são "esquerda", "direita" e "centralizar" // Os valores para ajuste_y são "acima", "abaixo" e "centralizar" // Os valores para ajuste_width são false, um número de pixels // de largura ou a porcentagem da largura do clip com respeito à cena // O mesmo se aplica para ajuste_height com a altura MovieClip.prototype.setAjuste = function(ajuste_x, ajuste_y, ajuste_width, ajuste_height) { this.ajuste_x = ajuste_x; this.ajuste_y = ajuste_y; this.ajuste_width = ajuste_width; this.ajuste_height = ajuste_height; // armazeno a posição e o tamanho // iniciais dos clips ajustáveis this.x0 = this._x; this.y0 = this._y; this.w0 = this._width; this.h0 = this._height; this.ajustePersonalizado = false;

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

// armazeno o clip no array clips_ajustaveis.push(this); this.alinhar(); };

Como se vê no final do bloco de código executamos o método alinhar() do clip. Esta função será definida de um modo parecido com outro protótipo. Com alinhar() o que fazemos é ajustar cada clip dependendo dos ajustes que tivermos passado com setAjuste(): MovieClip.prototype.alinhar = function() { // se passamos o parâmetro ajuste_width na função // setAjuste, significa que devo ajustar a largura do clip // quando escalo novamente a tela if (this.ajuste_width) { if (this.ajuste_width.indexOf("%") != -1) { // se o valor de this.ajuste_width é uma porcentagem this._width = (_root.largura*parseInt(this.ajuste_width))/100; } else { // se o valor de this.ajuste_width for um número de pixels this._width = this.ajuste_width; } } // o mesmo com o ajuste da altura do clip if (this.ajuste_height) { if (this.ajuste_height.indexOf("%") != -1) { this._height = (_root.altura*parseInt(this.ajuste_height))/100; } else { this._height = this.ajuste_height; } } // ajustes de posição dos clips if (this.ajuste_x == "esquerda") { this._x = this.x0; } if (this.ajuste_x == "direita") { this._x = Math.round(this.x0+(_root.largura-_root.largura_minima)); } if (this.ajuste_x == "centralizar") { this._x = Math.round((_root.largura-this._width)*0.5); } if (this.ajuste_y == "acima") { this._y = this.y0; } if (this.ajuste_y == "abaixo") { this._y = Math.round(this.y0+(_root.altura-_root.altura_minima)); } if (this.ajuste_y == "centralizar") { this._y = Math.round((_root.altura-this._height)*0.5); } // se o clip tiver um ajuste especial executo sua função ajustar // que definimos no onClipEvent(load) do clip if (this.ajustePersonalizado) { this.ajustar(); } };

Como se pode ver no final do código, se comprova o valor da propriedade ajustePersonalizado, esta propriedade terá um valor igual a true no caso em que quisermos ajustar o clip de um modo personalizado. Ou seja, se observarem no método setAjuste as opções que temos para ajustar um clip são ajustar à esquerda, à direita ou ao centro no plano horizontal, ajustar acima, abaixo ou ao centro no plano vertical, e definir largura e altura dando um número de pixels ou dando uma porcentagem do Stage. Estas opções são básicas, Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

por isso é muito provável que queiramos ajustar determinados clips de outra forma. Para isso, no onClipEvent(load) ao invés de executar o método setAjuste, o que vamos fazer é atribuir um valor true a sua propriedade ajustePersonalizado, incluir dentro do array clips_ajustaveis e definir sua função ajustar() que é a que lhe ajustará de maneira personalizada. Se aplicar sua imaginação e um pouco de tempo na construção das funções ajustar() poderá ampliar este tutorial e desenvolver sites onde tudo se ajustará ao tamanho da tela de um modo impecável. O código de clip de ajuste personalizado do exemplo é: onClipEvent (load) { this.rodapePagina_txt.autosize = "left"; this.x0 = this._x; this.y0 = this._y; // como quero ajustar o clip // adiciono ao array de clips ajustaveis _root.clips_ajustaveis.push(this); // este clip vai ter um ajuste personalizado, // vai estender a largura da caixa de texto // que tem dentro. Para isso definimos seu // ajuste dentro da função ajustar ajustePersonalizado = true; function ajustar() { this.rodapePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26; this.rodapePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26; this._y = _root.altura-this._height-5; } }

Em compensação, em um clip que se ajusta segundo os critérios padrão este código seria mais simples: onClipEvent (load) { this.setAjuste("direita", "acima", false, false); }

Seguir estas instruções é complexo, portanto recomendamos o download do fla com comentários explicativos. exemplo_ajustePantalla.fla Artigo por Tutoriales-flash.com

Cabeçalho Flash em Wordpress Os passos a seguir seriam os seguintes: •

•

Definir o tamanho exato que queremos desenhar nosso .swf, logicamente deve de ser o que tenha a imagem do cabeçalho do WP (wordpress) com o objetivo de ocupar o mesmo espaço que ele e não deixar espaços vazios. Para isto, temos que buscar o arquivo que se chama head.jpg, normalmente o teremos nas pasta wpcontent/themes(se usarmos algum)/nomedetheme/images/nomevariante(alguns themes têm distintas formas de poder se visualizar e podem vir diferenciadas por pastas), e assim poderemos ver as dimensões que tem. Uma vez feito o anterior, temos que incrustar o arquivo .swf no lugar onde está tal imagem, e para isso, temos que editar o arquivo header.php, normalmente localizado

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

em wp-content/themes/nomedelthemequeuses. O que temos que fazer é eliminar todo o conteúdo que encontramos entre a etiqueta div id="headerimg" e sua etiqueta de fechamento e substituí-lo pelo código que se vê na imagem, tal código pode ser encontrado em um arquivo de texto para baixar no final do tutorial. Com isso já teríamos o swf no cabeçalho.

Há que ter em conta um pequeno detalhe, que pelo menos para mim foi um contratempo. Se observarem o código da imagem, a referência ao arquivo .swf é relativa, ou seja, não é do tipo http://…. dando a url exata de onde está localizado no servidor, e sim que só põe o nome do arquivo .swf, que deveremos alojar na pasta principal de nosso wordpress. Isto tem uma explicação e há que ter em conta especialmente se usamos botões em swf, como é o caso deste blog para se dirigir às seções principais do mesmo. O caso é que se usarmos a url no lugar da rota relativa, no IE funciona perfeitamente, mas no Firefox, se visualiza corretamente o .swf, porém os botões não funcionam. Acho que não esqueci de nada, caso não funcione algo, entrem em contato comigo que eu ajudarei no que for possível. Deixo a seguir o link onde se pode baixar o código que se põe no header.php para incrustar o swf. código para incrustar flash em header.php Por último comentar que bom, se usarmos animações em tal cabeçalho, me refiro animações de entrada, temos que ter em conta que cada vez que mudarmos a seção, se recarregará esse arquivo, portanto ou as fazemos curtas ou não as fazemos porque pode chegar a ser inclusive incômodo, no meu caso, me limitei a animar só os botões. Artigo por Aurelio Franco Fernández

Como ler os arquivos do servidor com ASP e passá-lo a Flash Esta técnica tem múltiplas aplicações, como por exemplo: • • •

Carregar uma galera de imagens que previamente tenhamos depositado via FTP no servidor. Mostrar os links de download de um conjunto de arquivos em uma pasta. (NOSSO CASO) Explorar o conteúdo do disco rígido do servidor web.

Como Flash não pode realizar esta função, necessitamos alguma tecnologia de servidor como PHP, ASP, ColdFusion..., neste tutorial vamos empregar ASP. COMO FAZÊ-LO. Primeiro criamos o arquivo explorar.asp que é o que se vai encarregar de mostrar em formato XML a informação dos arquivos, neste exemplo se trata da pasta files situada na raiz de nosso domínio. Nesta pasta estão os arquivos de download que acompanham nossos tutoriais. Conteúdo de explorar.asp Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

<% ' tentamos evitar o cache do navegador -------------Response.Expires=0 Response.CacheControl="private" ' ---------------------------------------------------------------Response.ContentType="text/XML" 'Criamos o objeto FileSystemObject Set fso = Server.CreateObject("Scripting.FileSystemObject") ' escolhemos a pasta files atraves da raiz do servidor web ' substituir "/files/" pela que lhes interesse Set folder = fso.GetFolder(Server.MapPath(("/files/"))) Set files = folder.Files ' ' construimos o XML ---------------------------------------Response.Write("<?xml versao='1.0' ?><exploracao pasta='"+folder.Name+"'>") For Each file in files fil=file.Name Response.write("<arquivo nome='") Response.write(file.Name) Response.write("' size='") Response.write(file.size\1024) Response.Write("' />") Next Response.Write("</exploracao>") ' ---------------------------------------------------------------Set files = nothing Set folder = nothing Set fso = nothing %>

Neste código só têm que modificar a linha Set folder = fso.GetFolder(Server.MapPath(("/files/")))

Onde colocarem a pasta a explorar. Pode-se ver o resultado do documento aqui. Logo, em nosso filme incluímos este código no primeiro fotograma: XML.prototype.ignoreWhite = true; meuXML = new XML(); meuXML.onLoad = verArquivos; function verArquivos(ok) { pastaEscolhida = this.firstChild.attributes.pasta; if (ok) { var files = this.firstChild.childNodes; for (var k = 0; files[k]; k++) { arquivos.addItem(files[k].attributes.nome+" - "+files[k].attributes.size+" KBytes", files[k].attributes.nome); } } else { //falha no carregamento /> } } function clicLista(component) { getURL("/files/"+component.getSelectedItem().data, "_self"); }

Na primeira linha,

XML.prototype.ignoreWhite = true;

Dizemos a Flash, que ignore os espaços em branco e as tabulações no momento de analisar qualquer XML que carreguemos. Depois, definimos o objeto XML que vai receber os dados do arquivo ASP e a função

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

verArquivos. Esta função vai percorrer o XML e vai adicionar um elemento ao listBox por cada arquivo que houver na pasta a explorar. A função clicLista é a que se executa quando selecionamos um elemento do listBox, em nosso caso, lança o download do arquivo selecionado. Por último falta o código do botão, que é o que carrega os dados XML, o código é: on (release) { //evitamos carregar o XML mais de uma vez if (!meuXML.loaded) { meuXML.load("/asp/explorar.asp"); } }

Recomendamos o download do fla com comentários explicativos, exemplo_explorar.zip Artigo por Tutoriales-flash.com

Carregamento de clips externos em Flash. A classe MovieClipLoader Até o aparecimento desta classe (em Flash MX 2004), o carregamento de arquivos externos (swf ou jpeg) era um processo muito limitado e com escassas possibilidades de controle. Antes a única opção era executar a sentença loadMovie ou loadMovieNum e havia que recorrer a chatos loops para comprovar o carregamento completo do arquivo externo. Agora com o uso da classe MovieClipLoader, Flash se encarregará de comprovar o carregamento e executará as ações que lhe indicarmos quando o clip estiver disponível. Ademais, poderemos executar código em distintos momentos do processo. Ou seja, quando se iniciar o carregamento podemos executar ações, durante o progresso do carregamento, também, e como comentamos, quando finalizar a transferência também! Passamos a ter tudo sob controle! A seguir se pode baixar um fla comentado onde se explica de modo simples como empregar a classe MovieClipLoader.zip. Nota: Para comprovar o funcionamento perfeitamente os arquivos a carregar devem estar alojados em um servidor remoto.

Artigo por Tutoriales-flash.com

Distorcer clips com ActionScript Entretanto, se queremos distorcer um clip de filme veremos que com as ferramentas que nos proporciona Flash não poderemos fazê-lo diretamente.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Neste documento iremos facilitar uma maneira de distorcer um clip de filme em tempo de execução com ActionScript. Na verdade o clip original permanecerá inalterável, o que faremos será criar outro clip com a distorção aplicada e ocultar o primeiro. O processo se baseará na classe bitmapData de ActionScript. A classe bitmapData nos permite armazenar e manipular os pixels que compõe um clip. COMO FAZÊ-LO. A distorção se fará segundo este esquema onde cada bloco representa uma coluna de pixels:

Decomporemos a representação gráfica do clip original em filas ou colunas segundo seja a distorção horizontal ou vertical. Depois modificaremos as dimensões destes segmentos e se gerará a aparência de distorção. Vamos explicar só a distorção vertical, já que a distorção horizontal é praticamente igual e as diferenças no código são mínimas como se poderá comprovar mais adiante. O primeiro passo consiste em armazenar em um objeto bitmapData os pixels do clip a distorcer. Chamaremos de bitmap_1. Depois vamos criar um clip vazio que conterá o clip com a distorção aplicada. Seu identificador será conteiner. Para criar a distorção vamos descompor a rede de pixels do objeto bitmap_1 em suas colunas, de modo que ficará dentro do clip contêiner uma série clips de um pixel de largura e a mesma altura que o original. Para copiar estes pixels, nos apoiamos em outros objetos bitmapData, que se correspondem com o identificador bitmap_temp que há dentro do loop no código. // importamos as classes necessárias import flash.display.BitmapData; import flash.geom.Rectangle; import flash.geom.Point; MovieClip.prototype.distorcerV = function(distorcao:Number) { var largura:Number = Math.round(this._width); var altura:Number = Math.round(this._height); var transparent:Boolean = true; var fillColor:Number = 0x00000000; // objeto bitmapData onde armazenamos a info do clip a distorcer var bitmap_1:BitmapData = new BitmapData(largura, altura, transparent, fillColor); bitmap_1.draw(this); this._visible = false; distorcido_mc.removeMovieClip(); // clip onde criaremos a distorção var conteiner:MovieClip = this._parent.createEmptyMovieClip("distorcido_mc", this._parent.getNextHighestDepth(), {_x:this._x, _y:this._y}); conteiner._x = this._x; conteiner._y = this._y; for (var k:Number = 1; k<largura; k++) { var clip_temp:MovieClip = conteiner.createEmptyMovieClip("clip"+k, conteiner.getNextHighestDepth(), {_x:k, _y:0}); clip_temp._x = k; Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

var bitmap_temp:BitmapData = new BitmapData(1, altura); bitmap_temp.copyPixels(bitmap_1,new Rectangle(k, 0, k, alto),new Point(0, 0)); clip_temp.attachBitmap(bitmap_temp,clip_temp.getNextHighestDepth(),"auto",true); clip_temp._yscale = ((k/(alto-1))*(100-distorcao))+distorcao; clip_temp._y = (altura-clip_temp._height)*0.5; } // liberamos memória bitmap_1.dispose(); };

Para distorcer um clip simplesmente há que chamar ao seu método distorcerV(distorcao). O valor do parâmetro distorção deve estar entre 0 e 100 senão os resultados são imprevisíveis (pode-se provar de todos modos). Um exemplo seria: meuClip.distorcerV(70);

Facilitamos o código em uns arquivos .as de modo que para empregá-los você terá duas opções: • •

Copiar o código do .as dentro de nosso filme. Usar um #include para dispor de suas funções.

Com esta base o interessante é provar novas formas de distorção ou inclusive combinar várias distorções. Nesta imagem se aplicou uma distorção horizontal e logo outra vertical para conseguir um efeito de perspectiva.

Download dos arquivos .as: distorsion.zip Artigo por Tutoriales-flash.com

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Tutorial para fazer um livro de visitas com Flash e ASP Para evitar o uso do banco de dados vamos armazenar os comentários dos visitantes em um arquivo de texto plano em formato XML. Nota: Os comentários fúteis ou ofensivos serão eliminados do arquivo pela equipe de tutorialesflash.com.

O mecanismo do livro é muito simples, adicionamos os comentários sequencialmente em um arquivo de texto existente em nosso servidor. Para mostrar todos os comentários, se lê o arquivo e se carregam os dados no filme swf. COMO FAZÊ-LO. O arquivo que armazena os comentários, que em nosso caso se chama livro.txt, terá este formato: <visita data='27/12/2006 12:31:11'> <autor>Usuario%201</autor> <comentario>Este%20es%20un%20comentario%20de%20prueba%2E%20%BFse%20ve%20bien%3F</comentario> </visita> <visita data='27/12/2006 12:31:37'> <autor>Usuario%202</autor> <comentario>Este%20es%20otro%20comentario%20de%20prova%2E%20Pois%20s%ED%2C%20se%20ve%20bem %2E</comentario> </visita>

Como se pode ver, se parece a um documento XML, porém lhe faltam dois elementos imprescindíveis em todo XML: A declaração do tipo de documento e o nó principal que contém ao resto de nós. Mais adiante veremos o porquê deste formato incompleto. Para editar este arquivo livro.txt cada vez que se inclui um comentário novo, usamos o objeto FileSystemObject de ASP já que Flash por si só não pode fazê-lo. Ademais terá que estar habilitada a permissão de escritura no diretório que o contenha. Com este arquivo add_comentarios.asp realizamos a operação. <% On Error Resume Next ' Criamos o objeto FileSystemObject chamado fs Set fs=Server.CreateObject("Scripting.FileSystemObject") ' Abrimos o arquivo para modificá-lo e nos posicionamos ao final ' do arquivo, por isso o 2o argumento é 8, se fosse 1 se abriria ' em modo só leitura Set f=fs.OpenTextFile(Server.MapPath("/livro_visitas/livro.txt"), 8) ' Inserimos os dados enviados desde Flash f.WriteLine("<visita data='"& Now &"'>") f.Write("<autor>") f.Write(Trim(Request("autor"))) f.WriteLine("</autor>") f.Write("<comentario>") f.Write(Trim(Request("comentario"))) f.WriteLine("</comentario>")

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

f.WriteLine("</visita>") ' Fechamos e eliminamos os objetos usados f.Close Set f=Nothing Set fs=Nothing ' se Err=0 tudo foi bem, este valor é devolvido ' a flash para confirmar a operação Response.write("error="&Err) %>

Se observarem, se adiciona a data do servidor no momento do comentário, o autor e o comentário em si. Para ler o arquivo com os comentários usamos o arquivo comentarios.asp. <% Response.ContentType="text/xml" ' Abro o arquivo para lê-lo Set fs=Server.CreateObject("Scripting.FileSystemObject") Set f=fs.OpenTextFile(Server.MapPath("/livro_visitas/livro.txt"), 1) ' Adiciono a declaração de documento e abro o nó principal Response.write("<?xml version='1.0' encoding='ISO-8859-1' ?><visitas>") Response.Write(f.ReadAll) ' fecho o nó principal, com o que já tenho ' um XML bem formado Response.write("</visitas>") ' Fechamos e eliminamos os objetos usados f.Close Set f=Nothing Set fs=Nothing %>

A resposta deste arquivo é um XML bem construído que se pode ver aqui. A razão de salvar o arquivo livro.txt em formato incompleto é que se facilita sua atualização de novos comentários. Com cada comentário novo simplesmente temos que adicionar ao final os novos dados e esquecermos. Neste ponto, vamos a Flash para ver o código ActionScript necessário que vai no primeiro fotograma: // ajustes iniciais ----------------------------------System.useCodepage = true; // evitamos problemas com os nós em branco XML.prototype.ignoreWhite = true; _global.style.setStyle("fontSize", 10); visitas_txt.htmlText = true; // impedimos o uso dos caracteres < e > // que podem dar problemas autor_txt.restrict = "^<>"; comentario_txt.restrict = "^<>"; // fim ajustes iniciais ------------------------------// estilos CSS para os comentários var my_styles:TextField.StyleSheet = new TextField.StyleSheet(); my_styles.setStyle("autor", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"11px", color:"#99CC00"}); my_styles.setStyle("data", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px", color:"#006699"}); my_styles.setStyle("comentario", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px", color:"#666666"}); visitas_txt.styleSheet = my_styles; // objeto LoadVars para enviar comentarios // e comprovar a operação var visitas_lv:LoadVars = new LoadVars(); visitas_lv.onLoad = function() { Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

if (this.error == 0) { comentarios_xml.load("/asp/comentarios.asp"); } else { visitas_txt.text = "Erro escrevendo comentário."; } }; // objeto XML que carrega os comentários var comentarios_xml:XML = new XML(); comentarios_xml.onLoad = carregarComentarios; function carregarComentarios() { visitas_txt.text = ""; var array_temp:Array = this.firstChild.childNodes; if (!isNaN(array_temp.length)) { // numero de comentarios titulo_lb.text = array_temp.length+" comentarios"; // preencho o textArea com os comentarios array_temp.reverse(); for (var k:Number = 0; array_temp[k]; k++) { var autor:String = unescape(array_temp[k].firstChild.firstChild.toString()); var comentario:String = unescape(array_temp[k].lastChild.firstChild.toString()); visitas_txt.text += "<autor>Autor: "+autor+"</autor>"; visitas_txt.text += "<fecha>"+array_temp[k].attributes.data+"</data>"; visitas_txt.text += "<comentario>"+comentario+"</comentario>"; visitas_txt.text += ""; } } } // função para mandar um comentário, comprovo que o autor // tenha pelo menos 3 caracteres e o comentário 1 function enviarComentario() { if (autor_txt.text.length>=3 && comentario_txt.text.length>=1) { visitas_lv.autor = escape(autor_txt.text); visitas_lv.comentario = escape(comentario_txt.text); visitas_lv.sendAndLoad("/asp/add_comentario.asp", visitas_lv, "POST"); } } // defino a função que se executará o clicar no botão botao_enviar.addEventListener("click", enviarComentario); // carrego os comentários sem intervenção do usuário // ao entrar na página comentarios_xml.load("/asp/comentarios.asp");

Empregamos escape() e unescape() para assegurarmos que não haja problemas com os caracteres empregados no nome de autor e os comentários. Vocês podem baixar este mesmo exemplo e ver como funciona: livro.zip Artigo por Tutoriales-flash.com

Open Flash Chart Vamos falar de um componente Flash muito interessante para a criação de gráficos de representação de dados. Trata-se de Open Flash Chart, uma ferramenta de código livre, gratuita e livre de uso. Com Open Flash Chart você poderá criar gráficos em sua página web com facilidade e sem necessidade de ter Flash instalado em seu computador. Nos gráficos poderá carregar os dados que desejar e escolher entre vários tipos de gráficos, as cores, etc. Uma vez publicados os Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

gráficos em seu website, todos os visitantes que tiverem instalado o plugin de Flash poderão vê-los, o que é quase a totalidade do tráfego que poderá receber em sua página. É um projeto muito completo, que não só permite criar variados modelos de gráficos, como ademais tem diversos tipos de usos e tem bibliotecas para utilizar e integrar o sistema de gráficos Flash com o carregamento de dados em diversos linguagens de programação web como PHP, .NET, Perl, Java, Python, Rubi e Google WebToolkit. Podemos encontrar Open Flash Chart em http://teethgrinder.co.uk/open-flash-chart/ No momento de escrever este artigo está em fase de desenvolvimento a nova versão do produto, Open Flash Chart 2, que tem diversas melhoras, porém principalmente se trata de uma mudança no esquema de desenvolvimento, que segundo o autor, é muito mais robusto e permite uma melhor organização do código e o crescimento do projeto. Podemos encontrar a nova versão em: http://teethgrinder.co.uk/open-flash-chart-2/ O mais destacável para os desenvolvedores que pretendam utilizar a segunda versão de Open Flash Chart é que o carregamento de dados se realiza por JSON, uma notação especial de Javascript para a definição de objetos. Para fazer umas provas do sistema, embora a segunda versão do projeto esteja em fase Beta, em CriarWeb.com achamos que seria melhor ver a segunda versão. Segundo dia o autor ademais, a versão 1 já não seguirá sendo atualizada. Utilizar Open Flash Chart A criação de gráficos em Flash pode ser feito de uma maneira bastante rápida, ao menos os primeiros exemplos que oferecem. Para isso, será necessário que baixemos o sistema através da zona de Download da página de Open Flash Chart. Com isso, obteremos um arquivo zip que temos que descomprimir em nosso disco rígido. Dentro veremos uma estrutura de diretórios que tem muitos códigos e componentes, embora não caiba se assustar, porque para os exemplos mais simples não faz falta utilizar mais que um arquivo, que é a o filme Flash (arquivo open-flash-chart.swf) que há na raiz do pacote comprimido. Esse filme ou animação Flash é o que tem o código para gerar por Flash o gráfico. Logo, teremos que configurá-lo com um arquivo JSON para lhe indicar os dados que se desejam mostrar. Para incluir em uma página web o filme Flash temos que utilizar um código como este: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="600" height="300" id="graph-2" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="open-flash-chart.swf" /> <param name="quality" value="high" /> <embed src="open-flash-chart.swf" quality="high" bgcolor="#FFFFFF" width="600" height="300" name="open-flash-chart"

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>

Este código foi extraído do tutorial 1 da criação de gráficos Flash que têm na própria página do projeto. É um código normal para incluir um filme Flash em uma página web. Pois bem, para que isto funcione você tem que ter em conta uma série de coisas que veremos a seguir. 1) Tem que ter a animação Flash (arquivo open-flash-chart.swf) no mesmo diretório onde está o arquivo com o código HTML anterior. Poderia mudar o arquivo swf ao lugar que desejar, porém então terá que atualizar a rota a este arquivo no código HTML anterior. Observe que a rota ao arquivo está em dois lugares do código anterior, em uma etiqueta PARAM e em um atributo da etiqueta embed src="open-flash-chart.swf". 2) Tem que criar o código JSON para o carregamento de dados do gráfico e colocá-lo no lugar correto, com o nome de arquivo "data.json". Segundo a documentação de Open Flash Chart parece que se busca este arquivo de dados em vários lugares esse arquivo json, por exemplo, na raiz do domínio, porém, segundo as provas que fiz em criarweb .com, não me funcionou assim. Logo, veremos um exemplo deste código e uma maneira de localizá-lo para que funcione o exemplo, se é que não queremos colocá-lo na raiz do domínio. 3) Importante: o exemplo tampouco se visualizará corretamente se não colocar os arquivos em um servidor web. Ou seja, tem que publicá-los em seu espaço de hospedagem que tiver em Internet e não em seu computador local. Ou se tiver um servidor web configurado em seu computador, deve colocá-lo em algum diretório de publicação e acessar ao exemplo passando ao servidor web. Isto é porque o Flash adquire por http o arquivo JSON, por meio de Ajax, o que só funciona se estiver em um servidor web e acessar à página através de http. Arquivo JSON de carregamento de dados do gráfico Flash O arquivo JSON deve ser criado para indicar ao filme Flash quais são os dados que se tem que mostrar. Este arquivo se escreve com uma sintaxe especial, na linguagem Javascript. Não se assuste porque a sintaxe é simples de ler, entender, editar segundo suas necessidades, já que JSON é uma notação entendível pelas pessoas. De qualquer forma, o próprio Open Flash Chart tem uma série de bibliotecas em diferentes linguagens, como comentei antes neste artigo de CriarWeb.com, para gerar jogos de dados em sintaxe JSON, por isso você não teria porque conhecer nada sobre JSON para utilizar este componente. Um arquivo JSON que podemos utilizar de exemplo tem esta forma: { "title":{ "text": "Gráfica de prueba - DesarrolloWeb.com", "style": "{font-size: 20px; color:#999900; text-align: center;}" }, "y_legend":{ "text": "Gráfica creada con Open Flash Chart",

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

"style": "{color: #99cc33; font-size: 12px;}" }, "elements":[ { "type": "line", "alpha": 0.5, "colour": "#0000cc", "text": "Páginas vistas", "values" : [14,12,14,9,10,12,15,12,13] }, { "type": "line", "alpha": 0.5, "colour": "#660033", "text": "Paginas vistas 2", "values" : [9,7,8,10,12,14,13,10,11] } ], "x_axis":{ "stroke":2, "colour":"#d000d0", "grid_colour":"#00ff00" }, "y_axis":{ "stroke": 4, "tick_length": 3, "colour": "#9933ff", "grid_colour": "#0000ff", "offset": 0, "max": 20 } } Tirei isso do tutorial

que oferecem na página do produto e só adaptei umas poucas coisas para personalizá-lo e de passo conhecer algumas das funcionalidades deste módulo. Agora só teríamos que indicar o lugar onde está o arquivo com os dados. Para isso, a forma mais simples é através da URL. Coloque simplesmente o arquivo JSON no mesmo diretório que colocou tanto a página web com o código HTML para invocar ao Flash, como o próprio filme, com nome "data.json". Sendo assim, pois terá nesse diretório 3 arquivos. • • •

O arquivo HTML com o código para incluir o filme Flash O arquivo da animação Flash: open-flash-chart.swf O arquivo com os dados JSON: data.json

Agora acesse a essa página indicando na URL o nome do arquivo JSON: http://www.seudominio.com/rota_de_seu_arquivo_html.html?ofc=data.json Colocamos o exemplo em CriarWeb.com para que se possa vê-lo. Artigo por Miguel Angel Alvarez - Tradução de JML

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Vestir a uma boneca em Flash A idéia e as imagens foram tiradas daqui: www.teacuerdas.com E foi usada na seguinte mostra que quero que vejam para que tenham uma idéia clara do que pretendemos fazer. Uma lojinha que se chama "Sol" Nesta loja há em FLASH um provador de roupa que é que faremos aqui. O resto é PHP e um banco de dados MySql. Comecemos em forma ordenada: 1) Ter uma idéia clara do que queremos fazer. Neste caso o melhor é entrar à lojinha "Sol" e brincar um pouco em vestir e trocar as distintas roupas e botas à boneca. Verão que a ação sempre está nos botões que são as roupinhas da vitrine. Na vitrine, clique sobre a roupinha para vestir e o mesmo clique para tirar. Resumindo o funcionamento da aplicação, com exemplos: • • • •

Ao abrir, a boneca só em malha e as roupinhas (botões) na vitrine. Clique no botão (conjunto amarelo), e vestimos com o conjunto amarelo. Clique no botão (agasalho), e agregamos agasalho à boneca. Clique no botão (conjunto amarelo), a boneca fica só com o agasalho.

2) Criar em nosso computador uma nova pasta que podemos chamar provador. 3) Conseguir as imagens necessárias. Como nosso propósito é Flash e não o domínio do tratamento de imagens, elas já estão prontas. Porém, qualquer coisa que quiserem perguntar a este respeito, responderei por e-mail com muito prazer. Na página http://www.delphi.todouy.com/flash/probador/imagenes.html encontrarão todas as que necessitam. Com o botão direito do mouse, clique sobre cada imagem e "Salvar imagem como.." Salve na Pasta que criou o fundo .png e os nove futuros botõezinhos b1.png, b2.png,...b9.png... E os nove futuros clips c1.png, c2.png,.... c3.png . Se alterar a extensão .png por .bmp ou .jpg as imagens sairão com o fundo celeste e não transparente como necessitamos. 4) Abrimos o Flash e criamos a aplicação: Arquivo->, Novo->, Documento de Flash. Nossa aplicação terá um só frame(fotograma) e duas camadas na linha do tempo. Até agora, temos somente uma camada que nomearemos fundo. Importamos a imagem do fundo desde a mesma Pasta.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Arquivo-> Importar-> Importar a biblioteca. E já teremos a imagem na biblioteca. Se a biblioteca estiver fechada, a abrimos com Control L e trazemos o fundo.png à cena. Em propriedades vemos que as dimensões dessa imagem são 402 x 500. Se a imagem for fazer parte de outra página como no caso da "lojinha Sol" o cenário deve ser dimensionado 402 x 500 tal como o fundo.

E ajustadas as posições do fundo.png no painel Propriedades à zero tanto "x" como "y".

Salvamos o fla que também podemos chamar provador.fla e se pode provar com Control Enter . 5) Colocamos o cadeado na primeira camada e criamos a segunda onde vai tudo que falta. 6) Importar à biblioteca o resto das imagens (todos os botõezinhos e clips), que por enquanto ainda nem são botões, nem clips, e sim imagens "mapa de bits". 7) Primeiro, vamos provar com b1 e c1. Arrastamos a b1 desde a biblioteca ao cenário e o transformamos em botão com o nome botao1. E trazemos a c1 e o transformamos em clip de filme com o nome clip1. Localizamos a botao1 na vitrine e a clip1 no lugar exato para que fique bem à bonequinha. Importante: Em um papel, deve ir anotando a localização exata de cada clip. No meu caso: clip1, x 238, y 160 8) As ações correspondentes: Clip1, vai estar aí, porém não queremos que se veja. Para isto escrevemos a ação no frame 1, (o único frame que teremos na linha do tempo). setProperty("clip1", _visible, false);

No botao1 escrevemos a ação para vestir e tirar essa blusinha azul que é clip1. on(press){ if(clip1._visible==false){ setProperty("clip1", _visible, true); }else{ setProperty("clip1", _visible, false); } }

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

O frame nomeia a clip1, e botao1 nomeia a clip1, em suas ações, que não funcionarão se se esquecer de selecionar clip1, para no Panel de Propriedades escrever seu nome em Nome de Instância. 9) Agora salve e prove, e se tudo funcionou como esperamos, repita a ação para cada um dos artigos da vitrine. Levará pouco tempo usando Edit, Copiar e Colar, ajustando correções para cada caso. Claro que para saber o lugar exato aonde vai cada peça, terá que tirar a anterior. Afinal terá que colocá-las todas empilhadas e por isso dizia que se deve anotar as localizações de cada clip. 10) Para que não se esqueça de nada, comece com os botões. Transforme a b1.png no botao1, localize na vitrine e escreva a ação. Agora há que transformar a b2.png no clip botao2 e localizá-los na vitrine. Copie a ação de botao1 e cole como ação de botao2. Depois corrija mudando no que colou, "clip1" por "clip2". Fazendo assim até que tenha os nove botões, localizados na vitrine e com a ação referida ao clique com seu mesmo número. 11)Os botões estão prontos e na vitrine. Continue com os clips que vestirão a boneca. De cada c1.png, c2.png, etc. crie um clip de filme com os nomes clip1, clip2, etc. e o localize vestindo a boneca para anotar a posição exata nas coordenadas x, y, que correspondem, e o exclua do cenário para que fique na biblioteca e a boneca fique somente com a roupinha de malha para provar o próximo clip e anotar suas coordenadas. Por enquanto isso é tudo! 12) Criar o botão dos clips, cada um segundo a anotação. E atenção: não se esqueça de colocar a cada um, seu nome no painel de propriedades.

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

Ficará assim:

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

Manuais e recursos para desenvolvimento web www.criarweb.com

13) Completar a ação do frame para que torne o botão inteiro invisível:

Artigo por Susana Ríos Suanes

Manual de Flash: http://www.criarweb.com/flash/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.