Universidade Católica de Brasília

Bacharelado em Ciência da Computação

Professora: Shin Man Lin

Disciplina: Interação Homem Máquina

Ferramenta Web – Flash MX

Delliany da Silva Miranda – UC06014757

Introdução

Macromedia Flash, ou simplesmente Flash, é um programa gráfico vetorial

utilizado para se criar animações interativas, desenvolvido e comercializado pela

Macromedia (empresa especializada em desenvolver programas que auxiliam o

processo de criação de páginas web).

Os arquivos executáveis gerados pelo Flash, chamados de " SWF" (Small Web

File), podem ser visualizados em uma página web usando um navegador web ou

utilizando o Flash Player.

Em versões recentes (a partir da 5), a Macromedia expandiu a utilização do

Flash para além de simples animações, mas também para uma ferramenta de

desenvolvimento de aplicações completas. Isso graças aos avanços na linguagem

Action Script que é a linguagem de programação do flash e já encontra-se em sua

segunda versão.

Tipos de Gráficos

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.

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.

Características do Flash

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.

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, executarem

distintas partes de uma animação em função de eventos produzidos pelo usuário, ir a

outras páginas, etc.

Camadas e fotogramas em Flash

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.

Baixando Aplicativo

Todos os produtos da Macromedia são pagos, mas tem disponível a versão trial

do Flash MX em português, no site superdownloads.uol.com.br

Janela Principal

Linha do Tempo

Bibliotecas

Bibliotecas são conjuntos de elementos tais como símbolos, sons, objetos

gráficos importados (BitMaps), que podem ser reutilizados nos Filmes.

Temos 3 diferentes Tipos de Bibliotecas:

Biblioteca do Filme – Contém os elementos que estão no Filme.

Bibliotecas Comuns – Biblioteca do próprio Flash, contendo elementos

de exemplos, (Botões, Gráficos, Clips, Clips Inteligentes e Sons) que

podem ser usados livremente nos Filmes.

Bibliotecas Compartilhadas – Permite a utilização de um mesmo símbolo

em diversos filmes.

Símbolos

Símbolos são elementos reutilizáveis ao longo de um mesmo Filme, ou em

Filmes diferentes e que podem ser guardados em uma Biblioteca, reduzindo o

tamanho do arquivo final.

Utilizamos freqüentemente os Símbolos nos Filmes.

Os Símbolos podem ser criados com as ferramentas comuns de desenho.

Tipos de Símbolo

Clipes de Filmes – São pequenos trechos de filmes com uma linha do tempo

independente, ou um pequeno filme, que pode ser utilizado em diversos pontos do

mesmo filme ou em outros filmes.

São chamados de Minifilmes. Os Símbolos do Tipo Clipe de Filme respondem a

eventos e podem conter interatividade através da Linguagem de Script, (Action Script).

Botões – São elementos utilizados para acionar comandos e responder aos

diversos eventos do mouse.

Os Botões são os maiores responsáveis pela interatividade dos Filmes no Flash.

Podem conter Actions. Os Botões tem 3 estados ( Normal), (Over, quando passamos o

mouse sobre ele) e ( Pressionado, quando pressionamos sobre o mesmo), estes estados

podem ser editados e personalizados em sua aparência, para sobressair o efeito aplicado.

Para Criar e Editar os Estados de um Botão faremos um exercício em seguida.

Gráficos – São imagens estáticas, não podem conter Actions.

Os Símbolos Gráficos são utilizados quando queremos manter na biblioteca um

determinado desenho que poderá ser reutilizado posteriormente. Também para

aplicarmos efeitos a desenhos, Transparência, brilho, etc com Interpolação de

Movimento etc.

Montando um Site

Passo a passo

1. Crie um documento novo e coloque as dimensões para 1024px X 708px

2. Vá em Arquivo > Importar e importa uma imagem para o plano de fundo

3. Utilize a “Ferramenta Retângulo” para fazer os botões. Faça uns 4 retângulos e

depois com a “Ferramenta Texto” escreva os nomes dos botões nos retângulos

4. Para todos os retângulos “Converter em Símbolo” de “Botão” e depois adicionar

uma nova Camada

5. Na camada 1 e no quadro 2 da “Linha do Tempo”, pressione o F5. Na camada 2

no quadro 2 da “Linha do Tempo”, pressione o F6 e depois importe outra

imagem.

6. No quadro 1 da camada 2, abra a janela de “Ações” e insira o comando “stop();”,

faça também para o quadro 2, isso fará com que a imagem não fique executando

continuamente, ela irá parar depois de executar

7. Dê dois cliques no botão “Fotos”, na tela que aparece no quadro “Sobre”

pressione o F6 e depois tinge o botão de outra cor com a “Ferramenta Balde de

Tinta”, para quando o cursor do mouse estiver sobre o botão ele mudará de cor.

8. No botão “Fotos”, abre a janela “Ações” e insira o comando “on (release) {

gotoAndPlay(2);}” , para quando clicar o botão, executar o quadro 2 onde está a

imagem

9. Adicione outra Camada, com a “Ferramenta Texto” escreva “Lady Gaga”na

parte em cima do Menu e converta em símbolo de “Clipe de Filme”.

10. No quadro 1 modifique a tonalidade de alfa do texto “Lady Gaga” para 0%,

depois em 10 em 10 quadros aumente mais 20% de alfa do texto a cada quadro

11. Selecione o quadro 1 até o último quadro e vá em inserir > criar interpolação de

movimento, depois disso terá uma animação que gradativamente o texto

aumenta a tonalidade de cor

Visualizando a Página