1. 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
2. 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
3. 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
6. 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.
7. 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
8. 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
9. 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
10. 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
11. 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
