Adobe Flash

246 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
246
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Adobe Flash

  1. 1. Universidade Católica de BrasíliaBacharelado em Ciência da ComputaçãoProfessora: Shin Man LinDisciplina: Interação Homem MáquinaFerramenta Web – Flash MXDelliany da Silva Miranda – UC06014757
  2. 2. IntroduçãoMacromedia Flash, ou simplesmente Flash, é um programa gráfico vetorialutilizado para se criar animações interativas, desenvolvido e comercializado pelaMacromedia (empresa especializada em desenvolver programas que auxiliam oprocesso de criação de páginas web).Os arquivos executáveis gerados pelo Flash, chamados de " SWF" (Small WebFile), podem ser visualizados em uma página web usando um navegador web ouutilizando o Flash Player.Em versões recentes (a partir da 5), a Macromedia expandiu a utilização doFlash para além de simples animações, mas também para uma ferramenta dedesenvolvimento de aplicações completas. Isso graças aos avanços na linguagemAction Script que é a linguagem de programação do flash e já encontra-se em suasegunda versão.Tipos de GráficosGráficos vetoriais:Nos quais uma imagem é representada a partir de linhas (ou vetores) quepossuem determinadas propriedades (cor, espessura...). A qualidade deste tipo degráficos não depende do zoom ou do tipo de resolução com o qual se esteja olhandoo gráfico. Por muito que nos aproximemos, o gráfico não se pixeliza, já ocomputador 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 cadaum dos quadrados (píxels) mostra uma cor determinada. A informação destesgráficos é salva individualmente para cada píxel e é definida pelas coordenadas ecor de tal píxel. Estes tipos de gráficos são dependentes da variação do tamanho eresolução, podendo perder qualidade ao modificar sucessivamente suas dimensões.Características do FlashFlash se serve das possibilidades que oferece trabalhar com gráficos vetoriais,facilmente redimensionáveis e alteráveis por meio de funções, portanto de umarmazenamento inteligente das imagens e áudios empregados em suas animaçõespor meio de bibliotecas, para otimizar o tamanho dos arquivos que contém asanimações.Esta otimização do espaço que ocupam as animações, combinada com apossibilidade de carregar a animação ao mesmo tempo em que esta se mostra no
  3. 3. navegador (técnica denominada streaming), permite fornecer elementos visuais quedão vida a uma web sem que para isso o tempo de carregamento da página seprolongue até limites insuportáveis para o visitante.Flash introduz em seu entorno a possibilidade de interagir com o usuário. Paraisso, 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, executaremdistintas partes de uma animação em função de eventos produzidos pelo usuário, ir aoutras páginas, etc.Camadas e fotogramas em FlashFlash trabalha como se fosse um filme. Uma animação é uma sucessão deimagens fixas que, ao passar rapidamente umas atrás das outras, dão a impressão deum movimento. Cada uma destas imagens fixas é chamada também fotograma. Osfotogramas 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 aoda primeira imagem chave de forma a produzir um efeito de objeto estático. Imagens de interpolação. Trata-se de imagens calculadas por Flash quepermitem a transição gradual entre duas imagens chaves. Este tipo deimagens muito úteis já que se geram automaticamente e proporcionam umefeito suave de movimento ou transformação.Por outro lado, uma animação está geralmente constituída de uma variedade deobjetos diferentes, cada um dos quais se introduz em um momento diferente eapresenta um comportamento independente ao resto dos objetos. De forma aorganizar e editar todos estes elementos, Flash permite o uso de camadas oudecalques.Assim, uma animação Flash está composta de uma superposição de camadas emcada uma das quais introduziremos um objeto que terá sua própria linha defotogramas. Estas camadas nos permitem trabalhar a animação em distintos planosindependentes.Baixando AplicativoTodos os produtos da Macromedia são pagos, mas tem disponível a versão trialdo Flash MX em português, no site superdownloads.uol.com.br
  4. 4. Janela PrincipalLinha do Tempo
  5. 5. BibliotecasBibliotecas são conjuntos de elementos tais como símbolos, sons, objetosgrá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 elementosde exemplos, (Botões, Gráficos, Clips, Clips Inteligentes e Sons) quepodem ser usados livremente nos Filmes. Bibliotecas Compartilhadas – Permite a utilização de um mesmo símboloem diversos filmes.SímbolosSímbolos são elementos reutilizáveis ao longo de um mesmo Filme, ou emFilmes diferentes e que podem ser guardados em uma Biblioteca, reduzindo otamanho 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ímboloClipes de Filmes – São pequenos trechos de filmes com uma linha do tempoindependente, ou um pequeno filme, que pode ser utilizado em diversos pontos domesmo filme ou em outros filmes.São chamados de Minifilmes. Os Símbolos do Tipo Clipe de Filme respondem aeventos e podem conter interatividade através da Linguagem de Script, (Action Script).Botões – São elementos utilizados para acionar comandos e responder aosdiversos 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 omouse sobre ele) e ( Pressionado, quando pressionamos sobre o mesmo), estes estadospodem 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 umdeterminado desenho que poderá ser reutilizado posteriormente. Também paraaplicarmos efeitos a desenhos, Transparência, brilho, etc com Interpolação deMovimento etc.
  6. 6. Montando um SitePasso a passo1. Crie um documento novo e coloque as dimensões para 1024px X 708px2. Vá em Arquivo > Importar e importa uma imagem para o plano de fundo
  7. 7. 3. Utilize a “Ferramenta Retângulo” para fazer os botões. Faça uns 4 retângulos edepois com a “Ferramenta Texto” escreva os nomes dos botões nos retângulos4. Para todos os retângulos “Converter em Símbolo” de “Botão” e depois adicionaruma nova Camada
  8. 8. 5. Na camada 1 e no quadro 2 da “Linha do Tempo”, pressione o F5. Na camada 2no quadro 2 da “Linha do Tempo”, pressione o F6 e depois importe outraimagem.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 executandocontinuamente, ela irá parar depois de executar
  9. 9. 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 deTinta”, 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á aimagem
  10. 10. 9. Adicione outra Camada, com a “Ferramenta Texto” escreva “Lady Gaga”naparte 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 quadro11. Selecione o quadro 1 até o último quadro e vá em inserir > criar interpolação demovimento, depois disso terá uma animação que gradativamente o textoaumenta a tonalidade de cor
  11. 11. Visualizando a Página

×