Você está na página 1de 65

Um pouco sobre Flash

Prólogo do Manual de Flash


Começamos o tutorial de Flash...

Por Rubén Alvarez

Publicado em: 22/12/04


Valorize este artigo:
4 votos
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.

O que é Flash
Descrição desta tecnologia vetorial.

Por Rubén Alvarez

Publicado em: 22/12/04


Valorize este artigo:
2 votos
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, 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.

Sobre o trabalho em Flash


Descrevemos a interface da aplicação Flash MX.

Por Rubén Alvarez

Publicado em: 29/12/04


Valorize este artigo:
3 votos
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.

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.

Camadas e fotogramas em Flash


Explicamos os conceitos de camadas e fotogramas e seu uso.

Por Rubén Alvarez

Publicado em: 29/12/04


Valorize este artigo:
2 votos
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.

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.

Bibliotecas em Flash
O uso de bibliotecas. Conceito de símbolo e ocorrência.

Por Rubén Alvarez

Publicado em: 03/1/05


Valorize este artigo:
2 votos
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 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.

Minha primeira animação em Flash I


Criação de um símbolo em nossa biblioteca flash.

Por Rubén Alvarez

Publicado em: 03/1/05


Valorize este artigo:

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.

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:

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:
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.

Minha primeira animação em Flash II


Vamos começar a trabalhar com a animação propriamente dita. Criação de
imagens chave.

Por Rubén Alvarez

Publicado em: 09/1/05


Valorize este artigo:
4 votos
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 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:

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.

Minha primeira animação em Flash III


Criação de um guia de movimento.

Por Rubén Alvarez

Publicado em: 11/1/05


Valorize este artigo:
1 voto
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:
• 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.

Minha primeira animação em Flash IV


Criando uma interpolação.

Por Rubén Alvarez

Publicado em: 11/1/05


Valorize este artigo:
2 votos
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:


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.

Colocar filmes Flash em nossas páginas


Um pequeno truque para conseguir o código necessário para incrustar um filme
Flash dentro de uma página web.

Por Ludwing Rodriguez

Publicado em: 02/2/05


Valorize este artigo:
0 votos
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.
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.

Como fazer botões em Flash


Explicação passo a passo sobre a criação de botões no programa Flash.

Por Ludwing Rodriguez

Publicado em: 08/2/05


Valorize este artigo:
0 votos
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.
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 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.

Linkar páginas web por meio de botões


Flash
Como fazer com que ao clicar um botão se acesse a outra página no navegador.

Por Ludwing Rodriguez


Publicado em: 13/2/05
Valorize este artigo:
1 voto
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.

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 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.

Links e-mails Flash


Como linkar um botão flash com um endereço de correio eletrônico.

Por Ludwing Rodriguez


Publicado em: 15/2/05
Valorize este artigo:
0 votos
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:

• 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.

Interpolação de Formas
Como mudar a forma física de um objeto no palco de Flash.

Por Ludwing Rodriguez

Publicado em: 17/2/05


Valorize este artigo:
1 voto
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 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)


Shape Hint. Interpolação ordenada de
formas
A interpolação de formas é um processo que leva consigo idéia de ordenação. Neste
capítulo veremos como podemos consegui-lo usando Shape Tweening.

Por Ivett Kelemen

Publicado em: 22/2/05


Valorize este artigo:
0 votos

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). 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).

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).

Interpolações de símbolos
Com este capítulo, o usuário aprenderá a fazer interpolações com objetos
complexos como grupos e símbolos.

Por Ivett Kelemen

Publicado em: 28/2/05


Valorize este artigo:
0 votos
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.

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

Efeitos de máscaras com Flash


Como poder usar as máscaras para obter uma animação web.

Por Ivett Kelemen

Publicado em: 02/3/05


Valorize este artigo:
1 voto
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 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!

Onion Skin ( Pele de cebola )


Existe outro tipo de animação chamada "fotograma por fotograma". Neste
capítulo veremos como fazer este tipo de animação.

Por Ivett Kelemen

Publicado em: 06/3/05


Valorize este artigo:
0 votos
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 semi-transparentes. Inserimos fotogramas chaves no
fotograma 10. Movemos o pincel, e alongamos a listra.

Provamos o filme: Ctrl+Enter

Importar bitmap e usar como fundo


Como escolher uma imagem e poder usá-la como fundo ou preenchimento de uma
maneira simples.

Por Ivett Kelemen

Publicado em: 06/3/05


Valorize este artigo:
0 votos
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 está formado por pequenos pássaros.

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.

Modificar Bitmap
Vemos como modificar uma imagem importada com o programa Flash.

Por Ivett Kelemen


Publicado em: 10/3/05
Valorize este artigo:
0 votos
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.

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:

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.

Color Treshold=50, Minimum Area=5

Color Treshold=100, Minimum Area=10

Color Treshold=150, Minimum Area=15

Distribute to Layers
Neste artigo, englobado dentro do manual de Flash, vamos aprender a fazer
animações com objetos complexos.

Por Ivett Kelemen

Publicado em: 17/3/05


Valorize este artigo:
0 votos
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.

• 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

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.
Inserir vídeo em Flash
Inserção e gestão de filmes nos projetos Flash.

Por Ivett Kelemen

Publicado em: 23/3/05


Valorize este artigo:
0 votos
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:

- .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)

Scroll de texto em Flash


Como criar um scroll de texto simples com Flash.

Por Carlos Carmona

Publicado em: 13/7/08


Valorize este artigo:
0 votos
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.

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.

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á. 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.

Criar um reprodutor de MP3 em Flash


Como criar um reprodutor de mp3 em flash e asp.

Por Tutoriales-flash.com

Publicado em: 21/7/08


Valorize este artigo:
0 votos
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.

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.

// 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.

Filmes Flash que se adaptam ao tamanho


da janela
Como criar filmes Flash que se adaptem ao tamanho da janela do navegador.

Por Tutoriales-flash.com

Publicado em: 31/7/08


Valorize este artigo:
0 votos
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;
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;
// 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, 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

Cabeçalho Flash em Wordpress


No seguinte tutorial, veremos como mudar a imagem de cabeçalho de um
wordpress por um arquivo .swf de Flash.

Por Aurelio Franco Fernández

Publicado em: 11/8/08


Valorize este artigo:
0 votos
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
wp-content/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 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.

Como ler os arquivos do servidor com


ASP e passá-lo a Flash
Neste tutorial vamos explicar como obter o nome e o tamanho em KBytes dos
arquivos alojados em determinado diretório do servidor web. Logo, passaremos
esta informação a Flash em formato XML.

Por Tutoriales-flash.com

Publicado em: 21/8/08


Valorize este artigo:
1 voto
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

<%
' 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
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


Carregamento de clips externos em
Flash. A classe MovieClipLoader
A classe MovieClipLoader nos permite gerenciar de um modo excelente o
carregamento de filme.

Por Tutoriales-flash.com

Publicado em: 03/9/08


Valorize este artigo:
0 votos
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.

Distorcer clips com ActionScript


Em Flash as transformações básicas que podemos aplicar a um clip são mudar a
posição, a rotação e a escala.

Por Tutoriales-flash.com

Publicado em: 25/9/08


Valorize este artigo:
0 votos
Entretanto, se queremos distorcer um clip de filme veremos que com as ferramentas
que nos proporciona Flash não poderemos fazê-lo diretamente.

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;
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

Tutorial para fazer um livro de visitas


com Flash e ASP
Neste tutorial iremos ensinar a fazer um livro de visitas simples com ASP, Flash e
sem necessidade de banco de dados.

Por Tutoriales-flash.com
Publicado em: 07/10/08
Valorize este artigo:
0 votos
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 tutoriales-flash.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>")
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() {
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 += "<p><autor>Autor: <b>"+autor+"</b></autor></p>";
visitas_txt.text += "<p><fecha>"+array_temp[k].attributes.data+"</data></p>";
visitas_txt.text += "<p><comentario>"+comentario+"</comentario></p>";
visitas_txt.text += "<p></p>";
}
}
}
// 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
Open Flash Chart
Uma ferramenta gratuita para fazer gráficos em Flash. Permite gráficos diversos,
como gráficos de barras, de linhas, de pizza, etc.

Por Miguel Angel Alvarez - Tradução de JML

Publicado em: 17/10/08


Valorize este artigo:
0 votos
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 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"
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",
"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.

Vestir a uma boneca em Flash


Pequena aplicação concreta em flash para realizar uma boneca de recortes.

Por Susana Ríos Suanes

Publicado em: 04/11/08


Valorize este artigo:
0 votos
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.


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);
}
}

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.

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