SlideShare una empresa de Scribd logo
1 de 25
Descargar para leer sin conexión
2013
              ABOBE FLASH:
CONTADO EM POUCOS CLIQUES



           damiana.guedes@gmail.com




                    Damiana Guedes
                    [Escrever o nome da empresa]
                    06-03-2013
NOÇÕES GERAIS

ANIMAÇÃO VETORIAL INTERATIVA

            A animação vetorial é parecida de uma forma geral à edição bitmap.

            O primeiro software a utilizar tecnologia de animação vetorial para a web foi o Adobe
             Flash, sendo atualmente a plataforma mais robusta e mais difundida para criação de
             animações online.

            Um dos grandes potenciais desta tecnologia é que não só permite efetuar animações como
             também permite adicionar interação a essa mesma animação.
                                                                                                           2
            Embora o Flash não tenha sido originalmente criado para elaborar websites, é atualmente
             muito usado para essa finalidade.

ANIMAÇÃO DIGITAL PARA A WEB

    O Adobe Flash começou por se chamar Future, Splash Animator, um pequeno programa de criação
     e de animação vetorial. Em 1977, adivinhando que viria a ser a base tecnológica da disponibilização
     de conteúdo multimédia na web, a Macromedia compra o programa e modifica o nome do
     programa para FLASH.

    O formato vetorial aplica-se a tudo que se desenhe no flash. Na sua versão final, todo o conteúdo
     elaborado é compactado em formato de filme (.swf) o qual pode ser visualizado em qualquer
     browser de Internet que tenha instalado o plug-in Flash Player.

    O Flash apresenta-se como uma das melhores ferramentas para se trabalhar com animações na
     Internet. A facilidade associada à interatividade e capacidade em realizar animações complexas em
     ficheiros de tamanho reduzido são os principais motivos da elevada utilização e sucesso do Flash.

    As animações criadas com o Flash para serem visualizadas online requerem a instalação do Plug-in
     flash player (http://www.adobe.com/pt/)

   A FINALIDADE DO FLASH É CRIAR CONTEÚDOS MULTIMÉDIA ONLINE E OFFLINE:

                       Criação e edição de imagens

                       Animação

                       Animação interativa

                       Código html necessário para a visualização na Web

                       Programação básica e avançada

   O FLASH PERMITE:

            Integrar num único filme (fla) sons, imagens fixas, vídeos, animações, desenhos vetoriais.

            Que um filme editável (extensão .fla) seja publicado em diferentes formatos para
             diferentes aplicações.
POTENCIALIDADES DO FLASH:

        Trabalha com formatos vetoriais de imagem o que permite ter um controlo rigoroso das
         mesmas;

        Capacidade de streaming, (opção de eliminar o tempo de espera até que o filme carregue.
         Permite visualizar o filme ainda antes de estar totalmente carregado);

        Reutilização dos elementos multimédia (criação de bibliotecas partilhadas);

        Criação de scripts (combinações de expressões que dão origem a determinadas instruções.
         No flash estas instruções são criadas através da linguagem de programação actionscript,
         que controla o comportamento dos objetos e do filme de uma maneira geral) aumentando         3
         as capacidades interativas dos produtos;

        Disponibiliza um conjunto de ferramentas profissionais de design multimédia e
         desenvolvimento para a Web.



ALGUNS DOS FICHEIROS SUPORTADOS:

        .fla

                 Extensão nativa do flash, organizada através da existência de uma timeline (linha
                  do tempo).

                 Dispõe de uma library, a qual armazena os recursos que são acrescentados ao
                  filme sendo estes colocados em layers.

                 A exportação pode ser feita para diversos formatos dependendo da finalidade.

        .swf

                 As layers do documento são convertidas numa única camada de modo a criar
                  ficheiros mais leves.

                 Formato normalmente utilizado para publicação na Internet, sendo incluído dentro
                  de um ficheiro html.

        .flv

                 Formato de vídeo muito popular na web.

                 Pode ser importado para um ficheiro .fla existente ou carregado para dentro de um
                  projeto.

        .exe/ .hqx

                 Destina-se à publicação do filme para ser visualizado de forma autónoma quer num
                  PC (exe) quer num Aplle (hqx) desde que no computador esteja instalado o plugin
                  Flash Player.
VANTAGENS NO USO DO FLASH

             Integra animações de grande qualidade e com boa reprodução de som, em ficheiros
              pequenos, ideais para publicação na Internet.

             A maioria dos formatos multimédia pode ser integrada no flash;

             As fontes utilizadas são embebidas dentro do ficheiro;



 DESVANTAGENS NO USO DO FLASH

             Os filmes flash necessitam de um plugin instalado no browser para permitir a sua          4
              visualização;

             Os motores de busca têm dificuldade em indexar os conteúdos dos filmes flash;

             Os formatos 3D não são diretamente importados ou visualizados em filme flash;

             Em muitas circunstâncias é mais fácil, adequado e económico criar um projeto utilizando
              html.




ESTRUTURA DO FLASH


    Painel de        Linha de tempo     Painel de propriedades     Painéis de controlo        Palco
   Ferramentas
MENU INICIAL

Este menu surge sempre que o programa é iniciado ou quando não está nenhum documento aberto. No
caso de se optar por este menu não aparecer basta selecionar a opção “Don´t show again”. Contudo este
menu revela-se de grande utilidade uma vez que permite apenas com um clique do rato selecionar o tipo
de documento que se pretende trabalhar. Na versão CS3 aceda a: Create New » Flash File (ActionScript
3.0).




                                                                                                           5




MENU PRINCIPAL

Este menu compreende todos os comandos do Flash: File, Edit, View, Insert, Modify, Text, Control, Debug,
Window e Help.

                 Menu Ficheiro/File:                                  Menu Editar/Edit:




O Menu Ficheiro engloba as diversas opções O Menu Editar disponibiliza as preferências da
concernentes aos ficheiros, nomeadamente: abrir, edição do ficheiro, tais como: cortar, copiar, editar,
procurar, guardar, importar, exportar, publicar,…. selecionar, timeline, entre outras.

               Tecla de atalho: Alt+F                               Tecla de atalho: Alt+E
Menu Ver/View:                     Menu Inserir/Insert:             Menu Modificar/Modify:




                                                                                                             6




      O Menu Ver elenca as           O Menu Inserir permite a           O Menu Modificar possibilita a
preferências do ficheiro relativas   inserção no ficheiro de novos      alteração de configurações do
à sua visualização: zoom in, zoom    símbolos, inserir na linha de      ficheiro. Elenca opções como por
      out, régua, grelha, …)         tempo layers, frames, keyframes,   exemplo: converter para símbolo,
                                     blank frames, criar motion tween   keyframes, blank frames, editar e
                                     e shape tween e inserir diversos   remover       efeitos,    alinhar,
                                     efeitos.                           combinar objetos, entre outros.
     Tecla de atalho: Alt+V               Tecla de atalho: Alt+I             Tecla de atalho: Alt+M


       Menu Texto/Text:                  Menu Controle/Control:            Menu Depuração/Debug:




O Menu Texto disponibiliza            Disponibiliza diversas opções,    Possibilita a procura por erros de
opções relativas à formatação do       principalmente as de testar o    sintaxe relativos aos códigos
texto (fonte, tamanho, estilo,        projeto, através dos comandos     ActionScript. No caso de existir
alinhamento, espaçamento, …)               Play/Reproduzir, Test        algum tipo de erro desta
                                         Movie/Testar Filme, Test       natureza, o programa notifica em
                                            Scene/Testar Cena.          qual cena, layer, frame e linha
                                                                        está o erro ou erros.
     Tecla de atalho: Alt+T               Tecla de atalho: Alt+O              Tecla de atalho: Alt+D
Menu Janela/Window:                                    Menu Ajuda/Help:




                                                                                                          7




Possibilita a configuração de quais as janelas e Contém as opções relativas a ajuda, suporte,
paletas exibidas ou ocultadas.                   registro e sobre o programa.

             Tecla de atalho: Alt+W                               Tecla de atalho: Alt+H


BARRA DE FERRAMENTAS DE DESENHO


                                  - Disponibiliza as ferramentas fundamentais para desenhar, editar e
                                  manipular objetos. Dividem-se em quatro partes bem diferenciadas:
                                  - Ferramentas/Tools: Engloba todas as ferramentas e manipulação de
                                  desenhos.
                                  - Visualização/Preview: Move ou amplia o desenho
                                  - Cores/Colors: Escolha de cores para utilizar nomeadamente por
                                  ferramentas de desenho e pintura.
                                  - Opões/Options: Elenca as opções que variam em concordância com o
                                  que está no palco.

                                  Tecla de atalho: Ctrl+F2



Painel de Propriedades/Properties




Serve para visualizar ou alterar as propriedades de qualquer documento ou ferramenta que se encontre
selecionada no Flash. Conforme o documento ou ferramenta selecionados no palco o painel adapta as
opções. Este painel é constituído por três separadores:
Properties – disponível para todos os recursos utilizados no Flash.
Parameters – apenas disponível para utilização com componentes.
Filters – disponível para textos, movie clips e botões.
No caso de estar selecionada a ferramenta de seleção e de nenhum elemento estar selecionado no palco, o
painel exibe as propriedades gerais do documento.
Linha do Tempo/Timeline




A linha do tempo/timeline representa as distintas fases temporais ou frames de um documento. As layers
que são usadas para organizar e produzir as animações encontram-se nesta linha do tempo. A timeline
simultaneamente com o palco é usada para colocar os recursos num dado espaço de tempo.                      8
A barra de estado localizada no lado inferior esquerdo da timeline apresenta as informações relativamente
ao número da frame onde está o recurso, a velocidade e o tempo do filme decorrido até à frame atual.




PALCO/STAGE




Área onde se desenrola a cena. Nesta área apresentam-se os recursos que vão sendo progressivamente
adicionados ao documento atual à medida que a animação se constrói. Os recursos podem ser textos,
imagens, vídeos e sons. Todos estes recursos podem ser importados para forra do palco (zona cinzenta)
mas apenas são visualizados ao reproduzir o filme no browser os que se encontram no palco (área
inicialmente definida com o fundo branco.




                     E AGORA VAMOS APRENDER FLASH…PRATICANDO!
9




ABOBE FLASH:
  ATIVIDADES
EFEITO DE MÁQUINA DE ESCREVER


    1- Crie um novo Symbol Movie Clip: Menu-Insert-New Symbol (ctrl+F8).




    2- Na Timeline, insira uma Keyframe e escreve a frase à qual pretende aplicar o efeito de máquina de
       escrever.
                                                                                                           10
    3- Selecione a frame na qual se encontra a sua frase e clique em F6 o número de vezes igual ao
       número de letras da sua frase. Na figura abaixo, repare que se vê a indicação do número de
       frames.




    4- Na frame 1, elimine todas as letras, menos a primeira.
    5- Na frame 2, elimine todas as letras, menos as duas primeiras.
    6- Repita esta ação até à penúltima frame, uma vez que na última frame a fase deve aparecer na
       íntegra.
    7- Bloqueie a layer onde efetuou o efeito e crie uma nova layer por baixo, por razões de segurança.
    8- Na nova layer, desenhe um backgound para aplicar ao seu efeito de máquina de escrever.
    9- Clique na tecla Enter e visualize o seu efeito.




    10- Guarde o seu ficheiro. Aceda ao Menu-File-Save As.
    11- Exporte-o. Aceda ao Menu-File-Export-Export Movie (Ctrl+Alt+Shift+S).
EFEITO DE FADE IN/FADE OUT NO TEXTO


        1. Crie um novo documento. Aceda ao Menu-File-New (Ctrl+N) e escolha: Flash File (action script
           3.0).




                                                                                                          11




        2. Altere o tamanho do filme para 350x80 e digite o texto pretendido. Aplique ao texto qualquer
           cor menos o branco. Aceda ao Menu-Modify-Document (Ctrl+J).




        3. Selecione o texto que se encontra na área de trabalho utilizando a ferramenta de seleção:
           Selection Tool (V).




        4. Prima a tecla F8, depois de ter o texto selecionado. Surge a caixa de diálogo: Convert to
           Symbol. No campo: Name, atribua um nome e na secção: Behavior, selecione a opção: Movie
           Clip.
5. Prima a tecla: OK. O texto converteu-se em símbolo. Selecione-o e visualize o painel
   “properties” situado no canto inferior esquerdo da sua área de trabalho. Esse painel tem um
   menu drop down designado de “Color” o qual permite selecionar 5 opções: “None”,
   “Brightness”, “Tint”, “Alpha” e “Advanced”.
6. Escolha a opção “Alpha” e coloque a barra de percentagem no valor de 0%. Esta alteração ao
   seu texto vai torná-lo invisível.




                                                                                                  12




7. Insira uma Keyframe (F6) na frame 30 da timeline e selecione novamente o texto. Nas
   propriedades aceda à opção “Alpha” e coloque a barra de percentagem no valor de 100%.
8. Na Timeline dê um duplo clique entre a frame 1 e a frame 30 para que a sua layer fique
   selecionada.




9. Aceda ao Menu-Insert-Timeline-Create Motion Tween.




10. Pressione as teclas Ctrl+Enter simultaneamente para visualizar a animação.
11. Para o texto desaparecer novamente, insira uma nova Keyframe (F6) na frame 50 da Timeline e
    altere o Alpha novamente para 0%.
12. Exporte a sua animação. Aceda ao Menu-File-Export-Export Movie.
CRIAR UMA ANIMAÇÃO



   1. Crie um novo documento. Aceda ao Menu: “File-New” (Ctrl+N) e escolha: Flash File (action script
      3.0). Surge um novo documento em branco.
   2. Comece por definir as propriedades da sua animação: cor de fundo, dimensões e velocidade. No
      painel “properties” prima o botão: “Size 550x440”. Surge a caixa de diálogo: “Document
      Properties”. Nos campos “width” e “height” introduza os valores 300 e 200, respetivamente.
   3. No campo “background Color” escolhe como cor de fundo um verde da paleta de cores.
   4. Defina a velocidade da sua animação em frames por segundo (fps). Quanto maior for o valor (fps)
      mais rápida a animação é reproduzida. No campo “Frame Rate” defina 20 fps.                           13




   5. Clique em “OK” para aplicar à sua animação as alterações que acabou de efetuar.
   6. Uma vez que já configurou a animação, agora deve acrescentar texto, linhas e formas na área de
      trabalho. Antes de criar animações é necessário criar objetos. Os objetos no Flash podem ser desde
      uma linha até textos ou imagens. Os objetos podem ser convertidos em botões, gráficos ou movie
      clips.
   7. Selecione a ferramenta “Text Tool (T)” que se encontra no lado esquerdo do ambiente de trabalho.
      Dê um clique e arraste com o rato até obter uma caixa retangular de texto com um cursor a piscar.
   8. Escreva a frase: “Secretariado de Administração”.




   9. Com a ajuda da ferramenta “Selection Tool (V)” selecione a frase que escreveu.

   10. No painel “Properties” aplique as seguintes alterações:
       Fonte: Bauhaus 93
       Tamanho: 20
       Cor: branco
       Letra a bold/negrito.
ANIMAÇÃO

   11. Agora vai criar uma animação para o seu texto. Selecione o texto e arraste-o para fora da área de    14
       trabalho no lado esquerdo. Na timeline selecione a frame 25 e pressione a tecla (F6) ou com o
       botão do lado direito do rato, escolha a opção “Insert Keyframe”. Depois de ter escolhido a opção
       “Insert Keyframe” repare que surge um ponto negro dentro da frame 25. Este ponto chama-se
       Keyframe. Selecione-o na frame 25 de forma e veja como o texto fica automaticamente
       selecionado.
   12. Com a ajuda das teclas de direção mova o texto para a direita e pare assim que o texto se encontre
       fora da área de trabalho. Se pressionar a tecla Shift simultaneamente o texto movimenta-se mais
       rapidamente.




   13. Na timeline posicione o cursor do rato entre a frame1 e a frame 25 e dê um duplo clique.




   14. Com o botão do lado direito do rato escolha a opção: “Create Motion Tween”.
15. Grave e visualize a animação. Aceda ao Menu: “File-Publish Preview-Html”.




                                                                                                             15




LAYERS

   16. Atribua um nome, por exemplo “texto” à layer 1. Dê um duplo clique sobre “Layer 1”, o nome fica
       editável e escreva “texto”.




   17. Crie uma nova layer para desenhar o background. Com o botão do lado direito do rato dê um clique
       sobre a layer “texto” e escolha a opção “Insert Layer”. Uma nova layer é criada com o nome “Layer
       2”. Renomeie a layer para “background”.




   18. Como se pretende criar um background para complementar a animação, a layer “background” deve
       ficar por baixo da layer “texto”. Para alterar a ordem das layers basta dar um clique sobra a layer
       “background” e arrastá-la para baixo.
ACRESCENTAR UM BACKGROUND

   19. Selecione a primeira “keyframe” vazia da layer “background” .
   20. Na caixa de ferramentas escolha a ferramenta “Oval Tool (O)”.




                                                                                                            16


   21. O Painel “properties” situada no canto inferior esquerdo da sua área de trabalho mostra as opções
       disponíveis para esta ferramenta, nomeadamente: cor do contorno: “Stroke color”, cor de
       preenchimento: “Fill color”, espessura da linha “Stroke height” e estilo da linha: “Stroke style”.
       Clique no primeiro quadrado colorido referente à cor do contorno: “Stroke color”. Escolha a opção
       “no color” da paleta de cores exibida.




   22. Clique no segundo quadrado colorido referente à cor do preenchimento “Fill color”. Escolha um
       verde da paleta de cores.




   23. Desenhe alguns círculos para o background da sua animação. Clique na área de trabalho e arraste o
       rato até ter formado um círculo do tamanho pretendido.
   24. Repita a mesma operação quantas vezes o desejar até ter preenchido com círculos o seu
       background.
   25. Grave a sua animação e aceda ao Menu: File-Publish Preview-Html para visualizar a animação no
       Browser.




   26. Exporte a sua animação: Menu: File-Export-Export Movie (Ctrl+Alt+Shift+S).
CRIAR UM BANNER


1. Importe imagens “library” (as imagens devem ter o mesmo tamanho).




                                                                                                  17




2. Configure o tamanho: “document properties” (por exemplo: 950x189). A animação deve ser de 12
   fps (tamanho aconselhável para a web).




3. Arraste a primeira imagem para o centro. Renomeie-a: “Layer 1” para “foto 1”.




4. Aceda à Timeline, clique na frame 50 e prima a tecla F5 (“Insert-Timeline-Frame”).
5. Crie uma nova camada (layer 2) “foto 2” para inserir a segunda foto e arraste esta nova layer para
   baixo da layer 1.




6. Faça a transição a partir da frame 40. Prima a tecla F6 (“Insert-Timeline-Keyrame”). Surge um            18
   frame vazio.




7. Arraste a “foto 2” da “library” para o palco. Pode ativar a opção “ocultar” da layer 1 para visualizar
   melhor apenas a layer 2.
8. Uma vez que deixou 50 frames para a “foto 1”, deixe também 50 frames para a “foto 2” e como
   também começou na frame 40 vá até à frame 90 e prima a tecla F5 (“Insert-Timeline-Frame”).




9. Este é o limite até onde irá a sua imagem. Se clicar na tecla “Enter” pode visualizar esse efeito mas
    sem a transição.
10. Crie a terceira layer (“Insert-Timeline-Layer”).Renomeie-a: “Layer 3” para “foto 3” e arraste-a para
    baixo da “foto 2”.
11. Na segunda layer marcou de 40 para 50, ficaram 10 frames finais. Agora marque na frame 80
    premindo a tecla F6 para criar um frame vazio. Oculte a primeira e a segunda layer para facilitar a
    visualização apenas da terceira layer e arraste a terceira imagem para o palco, ajustando-a.
12. Faça um Preview do trabalho. Aceda ao Menu: “File-Publish Preview-Html”.
13. Faça a transição. Marque na frame 40, justamente em cima do ponto onde a camada da “foto 2”
    começa, marque na “foto 1”, prima a tecla F6, clique em cima da primeira opção com o botão do
    lado direito do rato e selecione a opção: “Create Motion Tween” (surge um tracejado).




                                                                                                          19




14. Clique em cima da “foto 1” e na opção “Color” coloque o “Alpha” a 100%.




15. Prima a tecla “Enter” para ver o efeito de transição aplicado.
16. Aplique as mesmas definições para as fotos seguintes.
17. Crie uma nova layer (layer 3) e renomeia para “foto 3” e arraste a foto 3 para o palco. Coloque o
    cursor do rato na frame 120 e prima a tecla F5 para inserir frames.
18. Na frame 110 prima a tecla F6. Entre a frame 110 e 120, clique com o botão do lado direito do rato
    na opção: “Create Motion Tween”. No primeiro quadro-chave (Keyframe-110) clique na imagem e
    na opção: “Color” coloque o “Alpha” a 100%.
19. No último quadro (120) prima a tecla F6, clique em cima da foto e na opção: “Color” coloque o
    “Alpha” a 0%.
20. Crie uma nova layer (layer 4) e renomeia para “foto 4” e arraste a foto 4 para o palco. Coloque o
    cursor do rato na frame 150 e prima a tecla F5 para inserir frames.
21. Na frame 140 prima a tecla F6.
22. Entre a frame 140 e 150, , clique com o botão do lado direito do rato na opção: “Create Motion
    Tween”. No primeiro quadro-chave (Keyframe-140) clique na imagem e na opção: “Color” coloque
    o “Alpha” a 100%.
23. No último quadro chave (frame 150) clique na imagem e na opção: “Color” coloque o “Alpha” a
    0%.
24. Crie uma nova layer (layer 5) e renomeia para “foto 5” e arraste a foto 5 para o palco. Coloque o
    cursor do rato na frame 180 e prima a tecla F5 para inserir frames.
25. Na frame 170 prima a tecla F6.
26. Entre a frame 170 e 180, , clique com o botão do lado direito do rato na opção: “Create Motion
    Tween”. No primeiro quadro-chave (Keyframe-170) clique na imagem e na opção: “Color” coloque
    o “Alpha” a 100%.
27. No último quadro chave (frame 180) clique na imagem e na opção: “Color” coloque o “Alpha” a
    0%.
28. Crie uma nova layer (layer 6). Renomeia para “foto 6” e arraste a foto 6 para o palco. Coloque o
    cursor do rato na frame 210 e prima a tecla F5 para inserir frames.
29. Na frame 200 prima a tecla F6.
30. Entre a frame 200 e 210, clique com o botão do lado direito do rato na opção: “Create Motion
    Tween”. No primeiro quadro-chave (Keyframe-200) clique na imagem e na opção: “Color” coloque
    o “Alpha” a 100%.
                                                                                                          20
31. No último quadro chave (frame 210) clique na imagem e na opção: “Color” coloque o “Alpha” a
    0%.
32. Insira uma nova layer (layer 7) e atribua a designação de “texto”. Com a ferramenta “Text Tool (T)”
    escreva “Secretariado de Administração” e “Escola Superior de Tecnologia e Gestão de Lamego”.
33. Arraste a layer “texto” para cima das outras layers.




34. Visualiza a sua animação premindo a tecla “Enter”.
35. Exporte. Aceda ao Menu: “File-Export-Export Movie (Ctrl+Alt+Shift+S)”.
EFEITO MORPHING - SHAPE TWEEN

   1. Crie um novo documento. Aceda ao Menu-File-New (Ctrl+N) e escolha: Flash File (action script
      3.0)
   2. No palco, com a ferramenta apropriada, desenhe um círculo na “frame 1”. Na mesma “layer”
      insira na “frame 10” uma “blank keyframe” (clique no botão do lado direito do rato e selecione:
      “insert keyframe blank” e aí desenhe um quadrado. O tamanho, posição e cor de ambos os
      objetos não é muito relevante, o importante é que estejam na mesma “layer”.




                                                                                                        21




   3. Para aplicar o efeito de “morphing”, selecione a primeira “frame” que criou, clicando em
      “frame 1”da sua “layer” na linha de tempo (timeline). Modifique o “tween type” na caixa de
      “properties” e altere para a opção “shape”.




   4. Prima a tecla “enter” do seu teclado ou aceda a: File » Publish Preview » Flash para ver
      animação que acabou de criar.
EFEITO MORPHING – TEXTO

A maior limitação do efeito “morphing” é a de funcionar apenas nas formas vetoriais (vector
shapes) o que significa que os blocos de texto não funcionam automaticamente quando se aplica o
efeito “shape tweened frame”.

Para se aplicar o efeito ao texto é necessário convertê-lo para uma forma vetorial básica (basic
vector shape), bastando para isso separá-lo “breaking it up”.



1. Selecione o bloco de texto que pretende e aceda a: Modify » Break Apart (Ctrl+B). A primeira
   vez que aplica a opção “break apart”, cada palavra do seu texto aparece separada em volta de    22
   uma caixa mas para o efeito de Morphing ser possível, terá de selecionar novamente a opção
   “break apart”. O texto que aparece já não é editável como texto e irá transformar-se
   (Morphing) em outras formas se aplicar a opção: “shape tween”.




2. Prima a tecla “enter” do seu teclado ou aceda a: File » Publish Preview » Flash para ver
   animação que acabou de criar.
EFEITO MORPHING - BITMAPS

   As imagens importadas para o Flash em qualquer formato de bitmap não podem ser utilizadas
   numa “shape tweened frame”, ou seja, uma imagem em formato Jpeg, Gif, Png ou qualquer outro
   tipo de bitmap não poderá transformar-se numa animação com efeito de “Morphing” uma vez que
   as imagens não estão em formato vetorial.

1. Para importar uma imagem aceda a: Import » Import to stage.




                                                                                                       23




2. O Flash apresenta uma solução para converter imagens bitmaps em imagens vetoriais. Aceda a
   Modify » Bitmap » Trace Bitmap e aplique a alteração à imagem pretendida. Selecionando a opção
   “tracing bitmap” irá converter a sua imagem numa imagem vetorial que poderá ser utilizada
   normalmente numa “shape tweened frame”.
3. Após ter importado a imagem, selecione-a e aceda a: Modify » Bitmap » Trace bitmap e
   experimente valores diferentes para obter diferentes efeitos de rastreamento.




4. Prima a tecla “enter” do seu teclado ou aceda a: File » Publish Preview » Flash para ver animação
   que acabou de criar.
CRIAR HYPERLINKS

       1. Crie um novo documento. Aceda ao Menu-File-New (Ctrl+N) e escolha: Flash File (action script
          2.0).
       2. Crie uma botão. Digite no botão criado: “Aceda aqui à Web Page da ESTGL” e crie uma
          hiperligação à página da ESTGL. (www.estgl.ipv.pt)

       3. Selecione à opção: Actions. No caso de não visualizar esta opção aceda ao Menu Windows »
          Action (F9).



                                                                                                         24




       4. No painel Actions slecione a opção: Browser/Network » getURL e insira o seguinte código
          action script):

           on(release){ getURL ("http://www.estgl.ipv.pt",

                                      "blank");

   }
5. Guarde o ficheiro: File » Save as » botão_link_estgl
        6. Pré-visualize: File » Publish Preview » Flash.
        7. Publique: File » Publish (Shift+F12)




                                                                                                              25




NOTA: A OPÇÃO WINDOW

Quando se clica no botão, a página é carregada numa nova janela do browser. Contudo podemos não
pretender que tal situação se verifique e desejar que o link abra na atual janela do browser e nesse caso a
opção Windows revela-se essencial.
Nesta atividade selecionamos a opção _blank de quatro escolhas possíveis. As opções disponíveis são:

_self
Carrega o link na janela atual do browser. Esta é a opção pré-definida pelo Flash para abrir qualquer link.

_blank
Carrega o link numa nova janela à semelhança do que acontece na atividade descrita.

_parent
Esta opção é especialmente útil quando trabalhamos com páginas que contêm frames. Ao escolhermos a
opção _parent as frames são eliminadas e a página passa a ser carregada numa janela normal do browser
sem frames.

_top
Carrega o link na frame do topo.

Más contenido relacionado

Destacado

Aula 3 Flash - Divirta-se criando animações
Aula 3 Flash - Divirta-se criando animaçõesAula 3 Flash - Divirta-se criando animações
Aula 3 Flash - Divirta-se criando animaçõesProjeto Meu Brasil
 
Aula 4 Flash - Divirta-se criando animações
Aula 4 Flash - Divirta-se criando animaçõesAula 4 Flash - Divirta-se criando animações
Aula 4 Flash - Divirta-se criando animaçõesProjeto Meu Brasil
 
Aula 7 Flash - Divirta-se criando animações
Aula 7 Flash - Divirta-se criando animaçõesAula 7 Flash - Divirta-se criando animações
Aula 7 Flash - Divirta-se criando animaçõesProjeto Meu Brasil
 
Aula 2 Flash - Divirta-se criando animações
Aula 2 Flash - Divirta-se criando animaçõesAula 2 Flash - Divirta-se criando animações
Aula 2 Flash - Divirta-se criando animaçõesProjeto Meu Brasil
 
Aula 5 Flash - Divirta-se criando animações
Aula 5 Flash - Divirta-se criando animaçõesAula 5 Flash - Divirta-se criando animações
Aula 5 Flash - Divirta-se criando animaçõesProjeto Meu Brasil
 
Aula 6 Flash - Divirta-se criando animações
Aula 6 Flash - Divirta-se criando animaçõesAula 6 Flash - Divirta-se criando animações
Aula 6 Flash - Divirta-se criando animaçõesProjeto Meu Brasil
 
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用Adobe Flash platform の法人利用
Adobe Flash platform の法人利用Keisuke Todoroki
 
Banco de dados oracle
Banco de dados oracleBanco de dados oracle
Banco de dados oracleEduardo Lopes
 
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo Projeto Meu Brasil
 
ADOBE DREAMWEAVER
ADOBE DREAMWEAVERADOBE DREAMWEAVER
ADOBE DREAMWEAVERNi
 
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBdualpixel
 
Implantação de um ERP - Vantagens e Dificuldades
Implantação de um ERP - Vantagens e DificuldadesImplantação de um ERP - Vantagens e Dificuldades
Implantação de um ERP - Vantagens e DificuldadesAndre Dourado
 
Técnica Construtiva : Adobe
Técnica Construtiva : AdobeTécnica Construtiva : Adobe
Técnica Construtiva : AdobePaula Bianchi
 
SlideShare moves to HTML5
SlideShare moves to HTML5 SlideShare moves to HTML5
SlideShare moves to HTML5 Amit Ranjan
 

Destacado (16)

Aula 3 Flash - Divirta-se criando animações
Aula 3 Flash - Divirta-se criando animaçõesAula 3 Flash - Divirta-se criando animações
Aula 3 Flash - Divirta-se criando animações
 
Aula 4 Flash - Divirta-se criando animações
Aula 4 Flash - Divirta-se criando animaçõesAula 4 Flash - Divirta-se criando animações
Aula 4 Flash - Divirta-se criando animações
 
Aula 7 Flash - Divirta-se criando animações
Aula 7 Flash - Divirta-se criando animaçõesAula 7 Flash - Divirta-se criando animações
Aula 7 Flash - Divirta-se criando animações
 
Aula 2 Flash - Divirta-se criando animações
Aula 2 Flash - Divirta-se criando animaçõesAula 2 Flash - Divirta-se criando animações
Aula 2 Flash - Divirta-se criando animações
 
Aula 5 Flash - Divirta-se criando animações
Aula 5 Flash - Divirta-se criando animaçõesAula 5 Flash - Divirta-se criando animações
Aula 5 Flash - Divirta-se criando animações
 
Aula 6 Flash - Divirta-se criando animações
Aula 6 Flash - Divirta-se criando animaçõesAula 6 Flash - Divirta-se criando animações
Aula 6 Flash - Divirta-se criando animações
 
Css
CssCss
Css
 
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用Adobe Flash platform の法人利用
Adobe Flash platform の法人利用
 
Banco de dados oracle
Banco de dados oracleBanco de dados oracle
Banco de dados oracle
 
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo
 
ADOBE DREAMWEAVER
ADOBE DREAMWEAVERADOBE DREAMWEAVER
ADOBE DREAMWEAVER
 
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
 
Implantação de um ERP - Vantagens e Dificuldades
Implantação de um ERP - Vantagens e DificuldadesImplantação de um ERP - Vantagens e Dificuldades
Implantação de um ERP - Vantagens e Dificuldades
 
Tutorial animação em flash - BOLA NO BURACO
Tutorial animação em flash - BOLA NO BURACOTutorial animação em flash - BOLA NO BURACO
Tutorial animação em flash - BOLA NO BURACO
 
Técnica Construtiva : Adobe
Técnica Construtiva : AdobeTécnica Construtiva : Adobe
Técnica Construtiva : Adobe
 
SlideShare moves to HTML5
SlideShare moves to HTML5 SlideShare moves to HTML5
SlideShare moves to HTML5
 

Similar a Adobe Flash: Animacao Vetorial Interativa

1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamadaAlexandre Ernesto
 
Apostila br office.org impress
Apostila br office.org impressApostila br office.org impress
Apostila br office.org impressMikkeias Alves
 
Apostila br office.org+impress
Apostila br office.org+impressApostila br office.org+impress
Apostila br office.org+impressMentes Em Rede
 
Apresentação1 Animação Digital 2D I
Apresentação1 Animação Digital 2D IApresentação1 Animação Digital 2D I
Apresentação1 Animação Digital 2D IJoão Leal
 
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Fábio Flatschart
 
UC 4 Apresentação Eletrônica - Operador de Microcomputador
UC 4   Apresentação Eletrônica - Operador de MicrocomputadorUC 4   Apresentação Eletrônica - Operador de Microcomputador
UC 4 Apresentação Eletrônica - Operador de MicrocomputadorGeovania Pabulla
 
Apostila br office.org impress
Apostila br office.org impressApostila br office.org impress
Apostila br office.org impresswajsilva
 
Análise de Interface_Geane Poteriko
Análise de Interface_Geane PoterikoAnálise de Interface_Geane Poteriko
Análise de Interface_Geane Poterikogepoteriko
 
Delphi e interbase
Delphi e interbaseDelphi e interbase
Delphi e interbaseMarcos Rocha
 
Introdução básica aos Navegadores de Internet
Introdução básica aos Navegadores de InternetIntrodução básica aos Navegadores de Internet
Introdução básica aos Navegadores de InternetClayton de Almeida Souza
 
Power point criar_biblioteca_vf_xira
Power point criar_biblioteca_vf_xiraPower point criar_biblioteca_vf_xira
Power point criar_biblioteca_vf_xiraMaria Laura Cavaleiro
 
APLICATIVO EDITORIAL PARA EAD
APLICATIVO EDITORIAL PARA EADAPLICATIVO EDITORIAL PARA EAD
APLICATIVO EDITORIAL PARA EADdualpixel
 

Similar a Adobe Flash: Animacao Vetorial Interativa (20)

Aula 02
Aula 02Aula 02
Aula 02
 
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
 
Apostila br office.org impress
Apostila br office.org impressApostila br office.org impress
Apostila br office.org impress
 
Apostila br office.org+impress
Apostila br office.org+impressApostila br office.org+impress
Apostila br office.org+impress
 
Flash material
Flash materialFlash material
Flash material
 
Apresentação1 Animação Digital 2D I
Apresentação1 Animação Digital 2D IApresentação1 Animação Digital 2D I
Apresentação1 Animação Digital 2D I
 
Flash
FlashFlash
Flash
 
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
 
Introdução aoubuntu
Introdução aoubuntuIntrodução aoubuntu
Introdução aoubuntu
 
UC 4 Apresentação Eletrônica - Operador de Microcomputador
UC 4   Apresentação Eletrônica - Operador de MicrocomputadorUC 4   Apresentação Eletrônica - Operador de Microcomputador
UC 4 Apresentação Eletrônica - Operador de Microcomputador
 
Semana 7 e_8_c
Semana 7 e_8_cSemana 7 e_8_c
Semana 7 e_8_c
 
Adobe flash cs3
Adobe flash cs3Adobe flash cs3
Adobe flash cs3
 
Apostila br office.org impress
Apostila br office.org impressApostila br office.org impress
Apostila br office.org impress
 
Flash basico
Flash basicoFlash basico
Flash basico
 
Análise de Interface_Geane Poteriko
Análise de Interface_Geane PoterikoAnálise de Interface_Geane Poteriko
Análise de Interface_Geane Poteriko
 
Apresentação multimídia 17
Apresentação multimídia 17Apresentação multimídia 17
Apresentação multimídia 17
 
Delphi e interbase
Delphi e interbaseDelphi e interbase
Delphi e interbase
 
Introdução básica aos Navegadores de Internet
Introdução básica aos Navegadores de InternetIntrodução básica aos Navegadores de Internet
Introdução básica aos Navegadores de Internet
 
Power point criar_biblioteca_vf_xira
Power point criar_biblioteca_vf_xiraPower point criar_biblioteca_vf_xira
Power point criar_biblioteca_vf_xira
 
APLICATIVO EDITORIAL PARA EAD
APLICATIVO EDITORIAL PARA EADAPLICATIVO EDITORIAL PARA EAD
APLICATIVO EDITORIAL PARA EAD
 

Más de damiana guedes

Tutorial:Calaméo - Publique, Partilhe, Procure
Tutorial:Calaméo - Publique, Partilhe, ProcureTutorial:Calaméo - Publique, Partilhe, Procure
Tutorial:Calaméo - Publique, Partilhe, Procuredamiana guedes
 
Tutorial VideoSpin da Pinnacle
Tutorial VideoSpin da PinnacleTutorial VideoSpin da Pinnacle
Tutorial VideoSpin da Pinnacledamiana guedes
 
Tutorial google docs:Criação de Questionários
Tutorial google docs:Criação de QuestionáriosTutorial google docs:Criação de Questionários
Tutorial google docs:Criação de Questionáriosdamiana guedes
 
Audacity- Criação de Conteúdos Audio: Documento de Apoio
Audacity- Criação de Conteúdos Audio: Documento de ApoioAudacity- Criação de Conteúdos Audio: Documento de Apoio
Audacity- Criação de Conteúdos Audio: Documento de Apoiodamiana guedes
 
Xtranormal: Documento de Apoio
Xtranormal: Documento de ApoioXtranormal: Documento de Apoio
Xtranormal: Documento de Apoiodamiana guedes
 

Más de damiana guedes (7)

Tutorial:Calaméo - Publique, Partilhe, Procure
Tutorial:Calaméo - Publique, Partilhe, ProcureTutorial:Calaméo - Publique, Partilhe, Procure
Tutorial:Calaméo - Publique, Partilhe, Procure
 
Tutorial VideoSpin da Pinnacle
Tutorial VideoSpin da PinnacleTutorial VideoSpin da Pinnacle
Tutorial VideoSpin da Pinnacle
 
Tutorial google docs:Criação de Questionários
Tutorial google docs:Criação de QuestionáriosTutorial google docs:Criação de Questionários
Tutorial google docs:Criação de Questionários
 
Tutorial do PREZI
Tutorial do PREZI Tutorial do PREZI
Tutorial do PREZI
 
Tutorial Authorstream
Tutorial AuthorstreamTutorial Authorstream
Tutorial Authorstream
 
Audacity- Criação de Conteúdos Audio: Documento de Apoio
Audacity- Criação de Conteúdos Audio: Documento de ApoioAudacity- Criação de Conteúdos Audio: Documento de Apoio
Audacity- Criação de Conteúdos Audio: Documento de Apoio
 
Xtranormal: Documento de Apoio
Xtranormal: Documento de ApoioXtranormal: Documento de Apoio
Xtranormal: Documento de Apoio
 

Último

PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...azulassessoria9
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...azulassessoria9
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfHELENO FAVACHO
 
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdfBlendaLima1
 
planejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdfplanejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdfmaurocesarpaesalmeid
 
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEMPRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEMHELENO FAVACHO
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfCamillaBrito19
 
Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)ElliotFerreira
 
INTERVENÇÃO PARÁ - Formação de Professor
INTERVENÇÃO PARÁ - Formação de ProfessorINTERVENÇÃO PARÁ - Formação de Professor
INTERVENÇÃO PARÁ - Formação de ProfessorEdvanirCosta
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...azulassessoria9
 
Atividade - Letra da música Esperando na Janela.
Atividade -  Letra da música Esperando na Janela.Atividade -  Letra da música Esperando na Janela.
Atividade - Letra da música Esperando na Janela.Mary Alvarenga
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...azulassessoria9
 
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdfLeloIurk1
 
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxSlides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxLuizHenriquedeAlmeid6
 
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfCurrículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfTutor de matemática Ícaro
 
ATIVIDADE - CHARGE.pptxDFGHJKLÇ~ÇLJHUFTDRSEDFGJHKLÇ
ATIVIDADE - CHARGE.pptxDFGHJKLÇ~ÇLJHUFTDRSEDFGJHKLÇATIVIDADE - CHARGE.pptxDFGHJKLÇ~ÇLJHUFTDRSEDFGJHKLÇ
ATIVIDADE - CHARGE.pptxDFGHJKLÇ~ÇLJHUFTDRSEDFGJHKLÇJaineCarolaineLima
 
Historia da Arte europeia e não só. .pdf
Historia da Arte europeia e não só. .pdfHistoria da Arte europeia e não só. .pdf
Historia da Arte europeia e não só. .pdfEmanuel Pio
 
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...azulassessoria9
 
Discurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptxDiscurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptxferreirapriscilla84
 

Último (20)

PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
 
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf
 
planejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdfplanejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdf
 
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEMPRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdf
 
Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)
 
INTERVENÇÃO PARÁ - Formação de Professor
INTERVENÇÃO PARÁ - Formação de ProfessorINTERVENÇÃO PARÁ - Formação de Professor
INTERVENÇÃO PARÁ - Formação de Professor
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
 
Atividade - Letra da música Esperando na Janela.
Atividade -  Letra da música Esperando na Janela.Atividade -  Letra da música Esperando na Janela.
Atividade - Letra da música Esperando na Janela.
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
 
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
 
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxSlides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
 
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfCurrículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
 
ATIVIDADE - CHARGE.pptxDFGHJKLÇ~ÇLJHUFTDRSEDFGJHKLÇ
ATIVIDADE - CHARGE.pptxDFGHJKLÇ~ÇLJHUFTDRSEDFGJHKLÇATIVIDADE - CHARGE.pptxDFGHJKLÇ~ÇLJHUFTDRSEDFGJHKLÇ
ATIVIDADE - CHARGE.pptxDFGHJKLÇ~ÇLJHUFTDRSEDFGJHKLÇ
 
Aula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIXAula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIX
 
Historia da Arte europeia e não só. .pdf
Historia da Arte europeia e não só. .pdfHistoria da Arte europeia e não só. .pdf
Historia da Arte europeia e não só. .pdf
 
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
 
Discurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptxDiscurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptx
 

Adobe Flash: Animacao Vetorial Interativa

  • 1. 2013 ABOBE FLASH: CONTADO EM POUCOS CLIQUES damiana.guedes@gmail.com Damiana Guedes [Escrever o nome da empresa] 06-03-2013
  • 2. NOÇÕES GERAIS ANIMAÇÃO VETORIAL INTERATIVA  A animação vetorial é parecida de uma forma geral à edição bitmap.  O primeiro software a utilizar tecnologia de animação vetorial para a web foi o Adobe Flash, sendo atualmente a plataforma mais robusta e mais difundida para criação de animações online.  Um dos grandes potenciais desta tecnologia é que não só permite efetuar animações como também permite adicionar interação a essa mesma animação. 2  Embora o Flash não tenha sido originalmente criado para elaborar websites, é atualmente muito usado para essa finalidade. ANIMAÇÃO DIGITAL PARA A WEB  O Adobe Flash começou por se chamar Future, Splash Animator, um pequeno programa de criação e de animação vetorial. Em 1977, adivinhando que viria a ser a base tecnológica da disponibilização de conteúdo multimédia na web, a Macromedia compra o programa e modifica o nome do programa para FLASH.  O formato vetorial aplica-se a tudo que se desenhe no flash. Na sua versão final, todo o conteúdo elaborado é compactado em formato de filme (.swf) o qual pode ser visualizado em qualquer browser de Internet que tenha instalado o plug-in Flash Player.  O Flash apresenta-se como uma das melhores ferramentas para se trabalhar com animações na Internet. A facilidade associada à interatividade e capacidade em realizar animações complexas em ficheiros de tamanho reduzido são os principais motivos da elevada utilização e sucesso do Flash.  As animações criadas com o Flash para serem visualizadas online requerem a instalação do Plug-in flash player (http://www.adobe.com/pt/) A FINALIDADE DO FLASH É CRIAR CONTEÚDOS MULTIMÉDIA ONLINE E OFFLINE:  Criação e edição de imagens  Animação  Animação interativa  Código html necessário para a visualização na Web  Programação básica e avançada O FLASH PERMITE:  Integrar num único filme (fla) sons, imagens fixas, vídeos, animações, desenhos vetoriais.  Que um filme editável (extensão .fla) seja publicado em diferentes formatos para diferentes aplicações.
  • 3. POTENCIALIDADES DO FLASH:  Trabalha com formatos vetoriais de imagem o que permite ter um controlo rigoroso das mesmas;  Capacidade de streaming, (opção de eliminar o tempo de espera até que o filme carregue. Permite visualizar o filme ainda antes de estar totalmente carregado);  Reutilização dos elementos multimédia (criação de bibliotecas partilhadas);  Criação de scripts (combinações de expressões que dão origem a determinadas instruções. No flash estas instruções são criadas através da linguagem de programação actionscript, que controla o comportamento dos objetos e do filme de uma maneira geral) aumentando 3 as capacidades interativas dos produtos;  Disponibiliza um conjunto de ferramentas profissionais de design multimédia e desenvolvimento para a Web. ALGUNS DOS FICHEIROS SUPORTADOS:  .fla  Extensão nativa do flash, organizada através da existência de uma timeline (linha do tempo).  Dispõe de uma library, a qual armazena os recursos que são acrescentados ao filme sendo estes colocados em layers.  A exportação pode ser feita para diversos formatos dependendo da finalidade.  .swf  As layers do documento são convertidas numa única camada de modo a criar ficheiros mais leves.  Formato normalmente utilizado para publicação na Internet, sendo incluído dentro de um ficheiro html.  .flv  Formato de vídeo muito popular na web.  Pode ser importado para um ficheiro .fla existente ou carregado para dentro de um projeto.  .exe/ .hqx  Destina-se à publicação do filme para ser visualizado de forma autónoma quer num PC (exe) quer num Aplle (hqx) desde que no computador esteja instalado o plugin Flash Player.
  • 4. VANTAGENS NO USO DO FLASH  Integra animações de grande qualidade e com boa reprodução de som, em ficheiros pequenos, ideais para publicação na Internet.  A maioria dos formatos multimédia pode ser integrada no flash;  As fontes utilizadas são embebidas dentro do ficheiro; DESVANTAGENS NO USO DO FLASH  Os filmes flash necessitam de um plugin instalado no browser para permitir a sua 4 visualização;  Os motores de busca têm dificuldade em indexar os conteúdos dos filmes flash;  Os formatos 3D não são diretamente importados ou visualizados em filme flash;  Em muitas circunstâncias é mais fácil, adequado e económico criar um projeto utilizando html. ESTRUTURA DO FLASH Painel de Linha de tempo Painel de propriedades Painéis de controlo Palco Ferramentas
  • 5. MENU INICIAL Este menu surge sempre que o programa é iniciado ou quando não está nenhum documento aberto. No caso de se optar por este menu não aparecer basta selecionar a opção “Don´t show again”. Contudo este menu revela-se de grande utilidade uma vez que permite apenas com um clique do rato selecionar o tipo de documento que se pretende trabalhar. Na versão CS3 aceda a: Create New » Flash File (ActionScript 3.0). 5 MENU PRINCIPAL Este menu compreende todos os comandos do Flash: File, Edit, View, Insert, Modify, Text, Control, Debug, Window e Help. Menu Ficheiro/File: Menu Editar/Edit: O Menu Ficheiro engloba as diversas opções O Menu Editar disponibiliza as preferências da concernentes aos ficheiros, nomeadamente: abrir, edição do ficheiro, tais como: cortar, copiar, editar, procurar, guardar, importar, exportar, publicar,…. selecionar, timeline, entre outras. Tecla de atalho: Alt+F Tecla de atalho: Alt+E
  • 6. Menu Ver/View: Menu Inserir/Insert: Menu Modificar/Modify: 6 O Menu Ver elenca as O Menu Inserir permite a O Menu Modificar possibilita a preferências do ficheiro relativas inserção no ficheiro de novos alteração de configurações do à sua visualização: zoom in, zoom símbolos, inserir na linha de ficheiro. Elenca opções como por out, régua, grelha, …) tempo layers, frames, keyframes, exemplo: converter para símbolo, blank frames, criar motion tween keyframes, blank frames, editar e e shape tween e inserir diversos remover efeitos, alinhar, efeitos. combinar objetos, entre outros. Tecla de atalho: Alt+V Tecla de atalho: Alt+I Tecla de atalho: Alt+M Menu Texto/Text: Menu Controle/Control: Menu Depuração/Debug: O Menu Texto disponibiliza Disponibiliza diversas opções, Possibilita a procura por erros de opções relativas à formatação do principalmente as de testar o sintaxe relativos aos códigos texto (fonte, tamanho, estilo, projeto, através dos comandos ActionScript. No caso de existir alinhamento, espaçamento, …) Play/Reproduzir, Test algum tipo de erro desta Movie/Testar Filme, Test natureza, o programa notifica em Scene/Testar Cena. qual cena, layer, frame e linha está o erro ou erros. Tecla de atalho: Alt+T Tecla de atalho: Alt+O Tecla de atalho: Alt+D
  • 7. Menu Janela/Window: Menu Ajuda/Help: 7 Possibilita a configuração de quais as janelas e Contém as opções relativas a ajuda, suporte, paletas exibidas ou ocultadas. registro e sobre o programa. Tecla de atalho: Alt+W Tecla de atalho: Alt+H BARRA DE FERRAMENTAS DE DESENHO - Disponibiliza as ferramentas fundamentais para desenhar, editar e manipular objetos. Dividem-se em quatro partes bem diferenciadas: - Ferramentas/Tools: Engloba todas as ferramentas e manipulação de desenhos. - Visualização/Preview: Move ou amplia o desenho - Cores/Colors: Escolha de cores para utilizar nomeadamente por ferramentas de desenho e pintura. - Opões/Options: Elenca as opções que variam em concordância com o que está no palco. Tecla de atalho: Ctrl+F2 Painel de Propriedades/Properties Serve para visualizar ou alterar as propriedades de qualquer documento ou ferramenta que se encontre selecionada no Flash. Conforme o documento ou ferramenta selecionados no palco o painel adapta as opções. Este painel é constituído por três separadores: Properties – disponível para todos os recursos utilizados no Flash. Parameters – apenas disponível para utilização com componentes. Filters – disponível para textos, movie clips e botões. No caso de estar selecionada a ferramenta de seleção e de nenhum elemento estar selecionado no palco, o painel exibe as propriedades gerais do documento.
  • 8. Linha do Tempo/Timeline A linha do tempo/timeline representa as distintas fases temporais ou frames de um documento. As layers que são usadas para organizar e produzir as animações encontram-se nesta linha do tempo. A timeline simultaneamente com o palco é usada para colocar os recursos num dado espaço de tempo. 8 A barra de estado localizada no lado inferior esquerdo da timeline apresenta as informações relativamente ao número da frame onde está o recurso, a velocidade e o tempo do filme decorrido até à frame atual. PALCO/STAGE Área onde se desenrola a cena. Nesta área apresentam-se os recursos que vão sendo progressivamente adicionados ao documento atual à medida que a animação se constrói. Os recursos podem ser textos, imagens, vídeos e sons. Todos estes recursos podem ser importados para forra do palco (zona cinzenta) mas apenas são visualizados ao reproduzir o filme no browser os que se encontram no palco (área inicialmente definida com o fundo branco. E AGORA VAMOS APRENDER FLASH…PRATICANDO!
  • 9. 9 ABOBE FLASH: ATIVIDADES
  • 10. EFEITO DE MÁQUINA DE ESCREVER 1- Crie um novo Symbol Movie Clip: Menu-Insert-New Symbol (ctrl+F8). 2- Na Timeline, insira uma Keyframe e escreve a frase à qual pretende aplicar o efeito de máquina de escrever. 10 3- Selecione a frame na qual se encontra a sua frase e clique em F6 o número de vezes igual ao número de letras da sua frase. Na figura abaixo, repare que se vê a indicação do número de frames. 4- Na frame 1, elimine todas as letras, menos a primeira. 5- Na frame 2, elimine todas as letras, menos as duas primeiras. 6- Repita esta ação até à penúltima frame, uma vez que na última frame a fase deve aparecer na íntegra. 7- Bloqueie a layer onde efetuou o efeito e crie uma nova layer por baixo, por razões de segurança. 8- Na nova layer, desenhe um backgound para aplicar ao seu efeito de máquina de escrever. 9- Clique na tecla Enter e visualize o seu efeito. 10- Guarde o seu ficheiro. Aceda ao Menu-File-Save As. 11- Exporte-o. Aceda ao Menu-File-Export-Export Movie (Ctrl+Alt+Shift+S).
  • 11. EFEITO DE FADE IN/FADE OUT NO TEXTO 1. Crie um novo documento. Aceda ao Menu-File-New (Ctrl+N) e escolha: Flash File (action script 3.0). 11 2. Altere o tamanho do filme para 350x80 e digite o texto pretendido. Aplique ao texto qualquer cor menos o branco. Aceda ao Menu-Modify-Document (Ctrl+J). 3. Selecione o texto que se encontra na área de trabalho utilizando a ferramenta de seleção: Selection Tool (V). 4. Prima a tecla F8, depois de ter o texto selecionado. Surge a caixa de diálogo: Convert to Symbol. No campo: Name, atribua um nome e na secção: Behavior, selecione a opção: Movie Clip.
  • 12. 5. Prima a tecla: OK. O texto converteu-se em símbolo. Selecione-o e visualize o painel “properties” situado no canto inferior esquerdo da sua área de trabalho. Esse painel tem um menu drop down designado de “Color” o qual permite selecionar 5 opções: “None”, “Brightness”, “Tint”, “Alpha” e “Advanced”. 6. Escolha a opção “Alpha” e coloque a barra de percentagem no valor de 0%. Esta alteração ao seu texto vai torná-lo invisível. 12 7. Insira uma Keyframe (F6) na frame 30 da timeline e selecione novamente o texto. Nas propriedades aceda à opção “Alpha” e coloque a barra de percentagem no valor de 100%. 8. Na Timeline dê um duplo clique entre a frame 1 e a frame 30 para que a sua layer fique selecionada. 9. Aceda ao Menu-Insert-Timeline-Create Motion Tween. 10. Pressione as teclas Ctrl+Enter simultaneamente para visualizar a animação. 11. Para o texto desaparecer novamente, insira uma nova Keyframe (F6) na frame 50 da Timeline e altere o Alpha novamente para 0%. 12. Exporte a sua animação. Aceda ao Menu-File-Export-Export Movie.
  • 13. CRIAR UMA ANIMAÇÃO 1. Crie um novo documento. Aceda ao Menu: “File-New” (Ctrl+N) e escolha: Flash File (action script 3.0). Surge um novo documento em branco. 2. Comece por definir as propriedades da sua animação: cor de fundo, dimensões e velocidade. No painel “properties” prima o botão: “Size 550x440”. Surge a caixa de diálogo: “Document Properties”. Nos campos “width” e “height” introduza os valores 300 e 200, respetivamente. 3. No campo “background Color” escolhe como cor de fundo um verde da paleta de cores. 4. Defina a velocidade da sua animação em frames por segundo (fps). Quanto maior for o valor (fps) mais rápida a animação é reproduzida. No campo “Frame Rate” defina 20 fps. 13 5. Clique em “OK” para aplicar à sua animação as alterações que acabou de efetuar. 6. Uma vez que já configurou a animação, agora deve acrescentar texto, linhas e formas na área de trabalho. Antes de criar animações é necessário criar objetos. Os objetos no Flash podem ser desde uma linha até textos ou imagens. Os objetos podem ser convertidos em botões, gráficos ou movie clips. 7. Selecione a ferramenta “Text Tool (T)” que se encontra no lado esquerdo do ambiente de trabalho. Dê um clique e arraste com o rato até obter uma caixa retangular de texto com um cursor a piscar. 8. Escreva a frase: “Secretariado de Administração”. 9. Com a ajuda da ferramenta “Selection Tool (V)” selecione a frase que escreveu. 10. No painel “Properties” aplique as seguintes alterações: Fonte: Bauhaus 93 Tamanho: 20 Cor: branco Letra a bold/negrito.
  • 14. ANIMAÇÃO 11. Agora vai criar uma animação para o seu texto. Selecione o texto e arraste-o para fora da área de 14 trabalho no lado esquerdo. Na timeline selecione a frame 25 e pressione a tecla (F6) ou com o botão do lado direito do rato, escolha a opção “Insert Keyframe”. Depois de ter escolhido a opção “Insert Keyframe” repare que surge um ponto negro dentro da frame 25. Este ponto chama-se Keyframe. Selecione-o na frame 25 de forma e veja como o texto fica automaticamente selecionado. 12. Com a ajuda das teclas de direção mova o texto para a direita e pare assim que o texto se encontre fora da área de trabalho. Se pressionar a tecla Shift simultaneamente o texto movimenta-se mais rapidamente. 13. Na timeline posicione o cursor do rato entre a frame1 e a frame 25 e dê um duplo clique. 14. Com o botão do lado direito do rato escolha a opção: “Create Motion Tween”.
  • 15. 15. Grave e visualize a animação. Aceda ao Menu: “File-Publish Preview-Html”. 15 LAYERS 16. Atribua um nome, por exemplo “texto” à layer 1. Dê um duplo clique sobre “Layer 1”, o nome fica editável e escreva “texto”. 17. Crie uma nova layer para desenhar o background. Com o botão do lado direito do rato dê um clique sobre a layer “texto” e escolha a opção “Insert Layer”. Uma nova layer é criada com o nome “Layer 2”. Renomeie a layer para “background”. 18. Como se pretende criar um background para complementar a animação, a layer “background” deve ficar por baixo da layer “texto”. Para alterar a ordem das layers basta dar um clique sobra a layer “background” e arrastá-la para baixo.
  • 16. ACRESCENTAR UM BACKGROUND 19. Selecione a primeira “keyframe” vazia da layer “background” . 20. Na caixa de ferramentas escolha a ferramenta “Oval Tool (O)”. 16 21. O Painel “properties” situada no canto inferior esquerdo da sua área de trabalho mostra as opções disponíveis para esta ferramenta, nomeadamente: cor do contorno: “Stroke color”, cor de preenchimento: “Fill color”, espessura da linha “Stroke height” e estilo da linha: “Stroke style”. Clique no primeiro quadrado colorido referente à cor do contorno: “Stroke color”. Escolha a opção “no color” da paleta de cores exibida. 22. Clique no segundo quadrado colorido referente à cor do preenchimento “Fill color”. Escolha um verde da paleta de cores. 23. Desenhe alguns círculos para o background da sua animação. Clique na área de trabalho e arraste o rato até ter formado um círculo do tamanho pretendido. 24. Repita a mesma operação quantas vezes o desejar até ter preenchido com círculos o seu background. 25. Grave a sua animação e aceda ao Menu: File-Publish Preview-Html para visualizar a animação no Browser. 26. Exporte a sua animação: Menu: File-Export-Export Movie (Ctrl+Alt+Shift+S).
  • 17. CRIAR UM BANNER 1. Importe imagens “library” (as imagens devem ter o mesmo tamanho). 17 2. Configure o tamanho: “document properties” (por exemplo: 950x189). A animação deve ser de 12 fps (tamanho aconselhável para a web). 3. Arraste a primeira imagem para o centro. Renomeie-a: “Layer 1” para “foto 1”. 4. Aceda à Timeline, clique na frame 50 e prima a tecla F5 (“Insert-Timeline-Frame”).
  • 18. 5. Crie uma nova camada (layer 2) “foto 2” para inserir a segunda foto e arraste esta nova layer para baixo da layer 1. 6. Faça a transição a partir da frame 40. Prima a tecla F6 (“Insert-Timeline-Keyrame”). Surge um 18 frame vazio. 7. Arraste a “foto 2” da “library” para o palco. Pode ativar a opção “ocultar” da layer 1 para visualizar melhor apenas a layer 2. 8. Uma vez que deixou 50 frames para a “foto 1”, deixe também 50 frames para a “foto 2” e como também começou na frame 40 vá até à frame 90 e prima a tecla F5 (“Insert-Timeline-Frame”). 9. Este é o limite até onde irá a sua imagem. Se clicar na tecla “Enter” pode visualizar esse efeito mas sem a transição. 10. Crie a terceira layer (“Insert-Timeline-Layer”).Renomeie-a: “Layer 3” para “foto 3” e arraste-a para baixo da “foto 2”.
  • 19. 11. Na segunda layer marcou de 40 para 50, ficaram 10 frames finais. Agora marque na frame 80 premindo a tecla F6 para criar um frame vazio. Oculte a primeira e a segunda layer para facilitar a visualização apenas da terceira layer e arraste a terceira imagem para o palco, ajustando-a. 12. Faça um Preview do trabalho. Aceda ao Menu: “File-Publish Preview-Html”. 13. Faça a transição. Marque na frame 40, justamente em cima do ponto onde a camada da “foto 2” começa, marque na “foto 1”, prima a tecla F6, clique em cima da primeira opção com o botão do lado direito do rato e selecione a opção: “Create Motion Tween” (surge um tracejado). 19 14. Clique em cima da “foto 1” e na opção “Color” coloque o “Alpha” a 100%. 15. Prima a tecla “Enter” para ver o efeito de transição aplicado. 16. Aplique as mesmas definições para as fotos seguintes. 17. Crie uma nova layer (layer 3) e renomeia para “foto 3” e arraste a foto 3 para o palco. Coloque o cursor do rato na frame 120 e prima a tecla F5 para inserir frames. 18. Na frame 110 prima a tecla F6. Entre a frame 110 e 120, clique com o botão do lado direito do rato na opção: “Create Motion Tween”. No primeiro quadro-chave (Keyframe-110) clique na imagem e na opção: “Color” coloque o “Alpha” a 100%. 19. No último quadro (120) prima a tecla F6, clique em cima da foto e na opção: “Color” coloque o “Alpha” a 0%. 20. Crie uma nova layer (layer 4) e renomeia para “foto 4” e arraste a foto 4 para o palco. Coloque o cursor do rato na frame 150 e prima a tecla F5 para inserir frames. 21. Na frame 140 prima a tecla F6. 22. Entre a frame 140 e 150, , clique com o botão do lado direito do rato na opção: “Create Motion Tween”. No primeiro quadro-chave (Keyframe-140) clique na imagem e na opção: “Color” coloque o “Alpha” a 100%. 23. No último quadro chave (frame 150) clique na imagem e na opção: “Color” coloque o “Alpha” a 0%. 24. Crie uma nova layer (layer 5) e renomeia para “foto 5” e arraste a foto 5 para o palco. Coloque o cursor do rato na frame 180 e prima a tecla F5 para inserir frames. 25. Na frame 170 prima a tecla F6.
  • 20. 26. Entre a frame 170 e 180, , clique com o botão do lado direito do rato na opção: “Create Motion Tween”. No primeiro quadro-chave (Keyframe-170) clique na imagem e na opção: “Color” coloque o “Alpha” a 100%. 27. No último quadro chave (frame 180) clique na imagem e na opção: “Color” coloque o “Alpha” a 0%. 28. Crie uma nova layer (layer 6). Renomeia para “foto 6” e arraste a foto 6 para o palco. Coloque o cursor do rato na frame 210 e prima a tecla F5 para inserir frames. 29. Na frame 200 prima a tecla F6. 30. Entre a frame 200 e 210, clique com o botão do lado direito do rato na opção: “Create Motion Tween”. No primeiro quadro-chave (Keyframe-200) clique na imagem e na opção: “Color” coloque o “Alpha” a 100%. 20 31. No último quadro chave (frame 210) clique na imagem e na opção: “Color” coloque o “Alpha” a 0%. 32. Insira uma nova layer (layer 7) e atribua a designação de “texto”. Com a ferramenta “Text Tool (T)” escreva “Secretariado de Administração” e “Escola Superior de Tecnologia e Gestão de Lamego”. 33. Arraste a layer “texto” para cima das outras layers. 34. Visualiza a sua animação premindo a tecla “Enter”. 35. Exporte. Aceda ao Menu: “File-Export-Export Movie (Ctrl+Alt+Shift+S)”.
  • 21. EFEITO MORPHING - SHAPE TWEEN 1. Crie um novo documento. Aceda ao Menu-File-New (Ctrl+N) e escolha: Flash File (action script 3.0) 2. No palco, com a ferramenta apropriada, desenhe um círculo na “frame 1”. Na mesma “layer” insira na “frame 10” uma “blank keyframe” (clique no botão do lado direito do rato e selecione: “insert keyframe blank” e aí desenhe um quadrado. O tamanho, posição e cor de ambos os objetos não é muito relevante, o importante é que estejam na mesma “layer”. 21 3. Para aplicar o efeito de “morphing”, selecione a primeira “frame” que criou, clicando em “frame 1”da sua “layer” na linha de tempo (timeline). Modifique o “tween type” na caixa de “properties” e altere para a opção “shape”. 4. Prima a tecla “enter” do seu teclado ou aceda a: File » Publish Preview » Flash para ver animação que acabou de criar.
  • 22. EFEITO MORPHING – TEXTO A maior limitação do efeito “morphing” é a de funcionar apenas nas formas vetoriais (vector shapes) o que significa que os blocos de texto não funcionam automaticamente quando se aplica o efeito “shape tweened frame”. Para se aplicar o efeito ao texto é necessário convertê-lo para uma forma vetorial básica (basic vector shape), bastando para isso separá-lo “breaking it up”. 1. Selecione o bloco de texto que pretende e aceda a: Modify » Break Apart (Ctrl+B). A primeira vez que aplica a opção “break apart”, cada palavra do seu texto aparece separada em volta de 22 uma caixa mas para o efeito de Morphing ser possível, terá de selecionar novamente a opção “break apart”. O texto que aparece já não é editável como texto e irá transformar-se (Morphing) em outras formas se aplicar a opção: “shape tween”. 2. Prima a tecla “enter” do seu teclado ou aceda a: File » Publish Preview » Flash para ver animação que acabou de criar.
  • 23. EFEITO MORPHING - BITMAPS As imagens importadas para o Flash em qualquer formato de bitmap não podem ser utilizadas numa “shape tweened frame”, ou seja, uma imagem em formato Jpeg, Gif, Png ou qualquer outro tipo de bitmap não poderá transformar-se numa animação com efeito de “Morphing” uma vez que as imagens não estão em formato vetorial. 1. Para importar uma imagem aceda a: Import » Import to stage. 23 2. O Flash apresenta uma solução para converter imagens bitmaps em imagens vetoriais. Aceda a Modify » Bitmap » Trace Bitmap e aplique a alteração à imagem pretendida. Selecionando a opção “tracing bitmap” irá converter a sua imagem numa imagem vetorial que poderá ser utilizada normalmente numa “shape tweened frame”. 3. Após ter importado a imagem, selecione-a e aceda a: Modify » Bitmap » Trace bitmap e experimente valores diferentes para obter diferentes efeitos de rastreamento. 4. Prima a tecla “enter” do seu teclado ou aceda a: File » Publish Preview » Flash para ver animação que acabou de criar.
  • 24. CRIAR HYPERLINKS 1. Crie um novo documento. Aceda ao Menu-File-New (Ctrl+N) e escolha: Flash File (action script 2.0). 2. Crie uma botão. Digite no botão criado: “Aceda aqui à Web Page da ESTGL” e crie uma hiperligação à página da ESTGL. (www.estgl.ipv.pt) 3. Selecione à opção: Actions. No caso de não visualizar esta opção aceda ao Menu Windows » Action (F9). 24 4. No painel Actions slecione a opção: Browser/Network » getURL e insira o seguinte código action script): on(release){ getURL ("http://www.estgl.ipv.pt", "blank"); }
  • 25. 5. Guarde o ficheiro: File » Save as » botão_link_estgl 6. Pré-visualize: File » Publish Preview » Flash. 7. Publique: File » Publish (Shift+F12) 25 NOTA: A OPÇÃO WINDOW Quando se clica no botão, a página é carregada numa nova janela do browser. Contudo podemos não pretender que tal situação se verifique e desejar que o link abra na atual janela do browser e nesse caso a opção Windows revela-se essencial. Nesta atividade selecionamos a opção _blank de quatro escolhas possíveis. As opções disponíveis são: _self Carrega o link na janela atual do browser. Esta é a opção pré-definida pelo Flash para abrir qualquer link. _blank Carrega o link numa nova janela à semelhança do que acontece na atividade descrita. _parent Esta opção é especialmente útil quando trabalhamos com páginas que contêm frames. Ao escolhermos a opção _parent as frames são eliminadas e a página passa a ser carregada numa janela normal do browser sem frames. _top Carrega o link na frame do topo.