Aplicações Informáticas B 12º Ano Macromedia Flash Um projecto multimédia Aplicações Informáticas B

Apresentação do programa O Macromedia Flash é uma poderosa ferramenta na criação de materiais multimédia, interactivos e animados. O Flash permite construir desde simples animações, como banners publicitários, até complexas aplicações. Desde sítios para a Web até aplicações interactivas para publicação em CD ou DVD-ROM. Animação Banner Imagem sitio Sítio Web

Janela de abertura Publicidade Slide Shows Utilizando modelos Sempre que se inicia o programa aparece uma janela de Boas-vindas que permite várias opções para o início da sessão de trabalho. Publicidade Slide Shows Quiz Novos projectos Projectos recentes Utilizando modelos

O ambiente de trabalho e seus elementos Os principais elementos do ambiente de trabalho são: 1 3 Barra de menus Toolbar Main – Barra de Ferramentas Padrão Painéis – Project, Components, Behaviors, Library, etc. 2 Toolbox – Barra de Ferramentas de desenho e pintura Timeline – Linha de tempo 4 7 Stage – Palco 6 5 Painéis – Actions (Acções), Help (Ajuda), Properties (Propriedades)

Noções básicas O Flash produz animações que normalmente se designam de ‘filmes’. A construção de um filme em Flash subentende o domínio de 5 noções básicas: Timeline (Linha de tempo) – Espaço temporal onde se desenrola a animação. Em Flash, a linha de tempo caracteriza-se pela quantidade de frames e pela velocidade de visualização da animação, definindo-se assim a duração do filme. Frames (Quadros) – Comparáveis aos fotogramas de uma película, são instâncias na linha de tempo onde podem ser inseridas imagens, texto, sons, vídeo, etc. Frame rate (Velocidade de visualização) – É a velocidade ou cadência com que os fotogramas, que no Flash são denominados de frames, nos são apresentados. Layers (Camadas) – No Flash utilizam-se como que várias películas de filme em simultâneo, que se designam de layers. Cada layer é composta por inúmeros frames com os quais se constrói o filme. Imagem sitio Stage (Palco) – Espaço físico onde tudo se constrói e conjuga.

Timeline (Linha de tempo) A Timeline é caracterizada por duas áreas principais: Layers – Estão organizadas na vertical e a visualização efectua-se de cima para baixo, de modo a que os objectos se sobreponham uns aos outros consoante a localização da Layer em relação às restantes. Frames – Cada quadrícula corresponde a um frame. Imagem sitio Movimentação – O movimento de um filme efectua-se sempre da esquerda para a direita.

Layers (Camadas) O Flash utiliza layers (camadas), compostas por frames, nos quais se pode inserir todo o tipo de objectos, desde imagem a texto, som, vídeo, etc. As Layers são transparentes, possibilitando a visualização de todos os elementos das layers inferiores. Desta forma permitem o trabalho em cada elemento do filme, facilitando a manipulação de objectos bem como a construção da própria animação. Uma layer por objecto Slide 7 Esquema do desenho Organização das layers na timeline Desenho final

Keyframe com objectos inseridos Keyframe com programação Frames (Quadros) Para cada tipo de utilização aplicada, os frames adoptam uma representação gráfica diferente que nos permite diferenciá-los. Frames vazios Keyframe – (quadro-chave) Quadro que permite conter informações / programação. Graficamente distinguem-se da seguinte forma: Keyframe vazio Keyframe com objectos inseridos Keyframe com programação Frames estáticos Imagem sitio Aparece a letra a Apresentam sempre uma cor de fundo cinzenta e os objectos nunca se alteram. Círculo preenchido

Toolbar (Caixa de ferramentas) Na Barra de ferramentas podem activar-se diversas ferramentas que nos permitem desenhar e transformar objectos. No Painel Properties, para cada ferramenta activada, são exibidas opções de configuração. Ferramentas de selecção e manipulação de formas vectoriais. Ferramentas de desenho. Ferramentas de configuração da área de visualização. Ferramentas de configuração dos objectos. Imagem sitio Área de opções/configuração das ferramentas.

Painéis O Flash disponibiliza diversos painéis de tarefas. Os dois principais painéis estão localizados na parte inferior do palco. Painel Actions (Acções) – Local onde se define todo o tipo de interactividade num filme, pela inserção de programação. O Flash utiliza uma linguagem própria de programação que se designa de ActionScript. Imagem sitio Painel Properties (Propriedades) – Para a maioria das ferramentas da Barra de ferramentas Tools (ferramentas de desenho), o painel disponibiliza opções de configuração.

Painel Properties O Painel Properties (propriedades) permite configurar a ferramenta activa e alterar os atributos dos objectos criados. Botão que permite abrir a janela de configuração inicial do filme. A informação que apresenta, indica o tamanho de cada um dos quadros do filme a produzir. Botão que permite seleccionar a cor de fundo do palco (filme). Frequência (cadência) de visualização do filme. Nome atribuído ao novo documento. Botão que permite aceder ás configurações de exportação final do filme. Slide 11 Elementos definidos por defeito para o filme. Este filme está a utilizar: Para a visualização – Flash Player 7 Para a programação – ActionScript 2 O profile (perfil) – Default (por defeito/padrão)

Painel Actions O painel Action (Acções) possibilita a inserção de programação. Janela de Script Espaço onde se inserem as acções que definem a programação. 3 Janela Script Navigator (navegador de Script) Permite visualizar todos os objectos, símbolos, Cenas do filme. Pode ser utilizado como forma rápida de aceder à programação de um determinado objecto. 2 Botão Add Action Adicionar uma acção. 4 Botões Find e Replace Permite procurar e Substituir palavras no actionscript. 5 Botão Insert a Target Path (inserir um caminho para um alvo) Permite definir a acção para uma determinada instância. 6 Botão Check Syntax (verificação da sintaxe). Permite verificar se a programação definida não possui erros de ‘escrita’. 7 Botão Autoformat (auto-formatação ) Permite formatar o texto do actionscript bem como preencher palavras em falta na programação). 8 Botão Show code hint Apresenta informações de auxílio sobre a acção em utilização na programação. 9 Janela Actions Toolbox (Caixa de acções) Disponibiliza acções a inserir na programação. As acções estão organizadas por categorias e podem ser inseridas fazendo duplo clique sobre a acção ou arrastando-a para a janela de Script. 1 Slide 12

Painéis laterais Botão Expandir(▼) / Recolher(►) Permitem abrir e fechar o painel. Neste exemplo, ambos os painéis estão abertos. 1 Painéis laterais Opções de gestão de cor. Permite configurar a aplicação de cor a linhas de contorno e ao preenchimento dos objectos. 3 Janela de pré-visualização do painel Library Permite visualizar os objectos inseridos na biblioteca. Caso sejam animações, disponibiliza um botão de Play para activar a animação. 4 Nome do painel 2 Símbolos Para cada tipo de símbolo – gráfico, botão ou animação – o programa atribui um ícone diferente. 5 Do lado direito do ambiente de trabalho localizam-se os restantes painéis do Flash. Animação 6 Folder (pasta) 7 Imagens do tipo Mapa de bits 8 Slide 13 Duplicate (duplicar) 13 New Folder (Inserir nova pasta) 14 Properties (propriedades do objecto seleccionado). 15 Delete (Apagar o objecto seleccionado). 16 Botão (component) 9 Símbolo gráfico 10 Trilha de Som 11 Vídeo 12

Painéis laterais Para abrir os diversos painéis deve utilizar-se o menu Window. Nome do painel Teclas de atalho Slide 14

Iniciar um novo projecto Para iniciar um novo filme deve proceder-se das seguinte forma: Escolher, na janela de boas-vindas, o tipo de documento a criar. Se seleccionarmos Flash Document, o documento padrão que será aberto apresenta um palco com 500 x 400 pixéis. Utilizando o painel Properties, podem alterar-se as configurações do documento. Imagem sitio Para alterar as configurações do documento deve clicar-se em Size, e abrir-se-á a janela Document Properties

Iniciar um novo projecto - Janela Document Properties Fazer coincidir o tamanho do filme com: Printer – Papel definido na impressora Content – Mínimo necessário para conter todos os objectos nele inseridos - Default – Tamanho predefinido (pelo programa ou pelo utilizador) Tamanho do filme a produzir (por defeito, em pixéis) Na janela Document Properties podem realizar-se várias configurações. Em qualquer momento se podem alterar as configurações do filme em produção. Cor de fundo do filme Frequência de visualização de frames por segundo (fps) Imagem sitio A unidade de medida utilizada As alterações de configuração do documento para configuração predefinida do programa

Símbolos em Flash O Flash permite atribuir aos objectos a animar uma configuração com características técnicas específicas que designa de Symbols (símbolos). Um objecto pode ser identificado por três tipos de símbolos diferentes, que irão definir o seu comportamento: > Movie Clips (filmes / animações) > Buttons (botões) > Graphics (gráficos) Vantagens e características dos símbolos: Ao converter um objecto em símbolo, ele é arquivado na biblioteca de arquivo do filme. Sempre que se insere em palco um símbolo em arquivo na biblioteca, insere-se apenas uma instância desse símbolo. Desta forma, permite-se utilizar inúmeras instancias do mesmo símbolo, sendo que apenas existe um ficheiro em arquivo, tornando o documento final muito mais leve. Imagem sitio A utilização de símbolos permite, ainda, a realização de animações e a integração desses símbolos em programação.

Animação Tweening Motion Interpolação de movimento O Flash permite utilizar duas técnicas de animação. Tweening Motion Interpolação de movimento Tweening Shape Interpolação de formas É um movimento desenvolvido na layer, com a deslocação de objectos entre dois Keyframes É um movimento desenvolvido na layer com a transformação de um objecto entre dois Keyframes O movimento é assinalado pela seta que une os dois keyframes Imagem sitio Interpolação com problemas Quando aparecer a indicação de animação entre key-frames, representada por uma linha a tracejado em vez da habitual seta, é sinal de que existe um problema com a interpolação.

Animação 1 – Motion Tween* – Animação Interpolada O Motion Tween é um movimento que ocorre no meio de dois pontos. Estes pontos são: o ponto de início do movimento e o ponto em que objecto termina o movimento ou em que se lhe adiciona informação que altere o movimento inicial. Duração do movimento Keyframe de início do movimento Keyframe de fim do movimento Imagem sitio Posição inicial do objecto Posição final do objecto *Este tipo de animação utiliza o conceito Tween ou Tweening que deriva da palavra em inglês Between que em português significa ‘entre’ ou ‘no meio de (dois)’

Animação 2 – Tween Shape – Animação de formas O Motion Shape permite transformar um objecto tanto em cor como em forma, mesmo que o objecto não mude de posição no palco. Duração do movimento Keyframe de fim do movimento Keyframe de início do movimento Forma e posição inicial do objecto Imagem sitio Forma e posição final do objecto

Animação 3 – Motion Tween Guide – Guias de animação Interpolada O Motion Tween Guide é um movimento que permite que sejamos nós a definir a trajectória que o objecto irá descrever. Layer guia Para criar um Motion Guide deve-se criar uma layer especial utilizando o menu auxiliar e a opção – Add Motion Guide. Imagem sitio Trajectória desenhada na layer guia

Guardar e Publicar um filme Os documentos guardados com a extensão de gravação (*.fla), permitem guardar todas as definições dos objectos bem como as configurações das animações. O Flash possui uma extensão própria e única (*.fla) para o arquivo de documentos: Tendo sido concluído o trabalho... O programa permite que o filme seja publicado, ou seja, que sejam criados os ficheiros necessários para a divulgação do filme por diversos meios Para publicar um filme deve-se utilizar o menu File e a opção Publish. Imagem sitio

FIM