Aula 1 – Conhecendo o Flash MXO que o Flash, Notas de estudo de Gestão de Recursos Humanos

Baixe Aula 1 – Conhecendo o Flash MXO que o Flash e outras Notas de estudo em PDF para Gestão de Recursos Humanos, somente na Docsity! Aula 1 – Conhecendo o Flash MX Nesta aula você aprenderá o seguinte: O que o Flash MX faz. Imagens Vetoriais X Bitmap. Formatos de Bitmap. Como iniciar o programa. Área de trabalho do Flash MX. Painéis. Barras de Ferramentas. Barras de Propriedades. Propriedades do Documento. O que o Flash MX faz O mercado consumidor de web sites está cada dia mais exigente. Para que possamos atender as expectativas de nossos clientes será necessário fazer uso do aplicativo Flash MX. Uma poderosa ferramenta que nos permite criar trabalhos simples como o desenho de um círculo até sites dinâmicos. O Flash MX faz parte do pacote Macromedia Studio MX, que é composto pelo Dreamweaver MX, Fireworks MX e Flash MX. Quando criamos um filme em flash estamos criando um projeto com extensão FLA. Nesse arquivo nos podemos inserir textos, sons, vídeos, etc. Mas essa extensão não pode ser publicada na Internet, quando o projeto está finalizado é possível gerar um arquivo com a extensão SWF, que é a extensão utilizada para a Internet. Imagens Vetoriais X Bitmap As imagens utilizadas em web sites podem ser de duas formas possíveis: imagens vetoriais e imagens bitmap. As imagens Vetoriais, também denominadas imagens orientadas para objeto ou imagens de desenho. Os desenhos baseados em vetores não dependem de resolução. Quando um vetor é redimensionado, seus vértices são reposicionados na tela, recalculando-os matematicamente. As imagens Bitmaps, essas imagens são constituídas por pontos denominados pixels. As imagens que são redimensionadas tendem a perder resolução devido a alteração nos pixels. Formatos de Bitmap O Flash MX pode importar 28 formatos compatíveis de bitmaps, músicas e vídeos, tornando assim o trabalho dos Desenvolvedores Web e Designers mais fácil. A seguir serão apresentadas algumas das extensões mais utilizadas pelo Flash MX com suas respectivas particularidades. • GIF – Essa extensão é muito utilizada para o desenvolvimento de sites, porque gera arquivos muito pequenos. • JPG – Imagens geradas com a extensão jpg são imagens com qualidade superior a imagens com extensões gif, mas o seu tamanho também é superior. • PSD – Esse formato é gerado pelo PhotoShop. • PNG – Formato Gerado pelo Fireworks. Tanto o PNG quando o PSD são arquivos com um tamanho bem mais elevado do que o JPG ou o GIF, pois os mesmos são editáveis. Como Iniciar o Programa 1. Clique no botão Iniciar da barra de tarefas. 2. Deslize o mouse até Programas. 3. Deslize o mouse até Macromedia MX. 4. Dê um clique no ícone do programa Flash MX. Após a instalação do pacote Macromedia MX, vamos encontrar no menu iniciar os aplicativos que compõem esse pacote, com certeza a combinação desses 3 aplicativos nos resultará em sites fantásticos. Área de Trabalho do Flash MX A área de trabalho do Flash MX é dividida em 5 partes. A esquerda fica a barra de ferramentas (Tool). No alto está a linha do tempo ( TimeLine ). No centro está o palco (Stage), onde são feitos os desenhos. Em baixo está o painel de Propriedades (Properties) e no lado direito estão disponíveis outros painéis que serão utilizados durante o curso, tais como: Misturador de Cores (Color Mixer), Biblioteca (Library). Barra de Propriedades O inspetor de propriedades do Flash MX permite fazer algumas formatações rápidas como a configuração de página. Cada vez que selecionamos uma ferramenta o inspetor de propriedades nos disponibiliza as opções da ferramenta selecionada. Propriedades do Documento Antes de iniciarmos qualquer trabalho no Flash se faz necessário à configuração do documento onde será desenvolvido o projeto. Para executar a configuração do documento com êxito é necessário saber informações como: Altura, Largura, Cor de Fundo e taxa de quadros. Para Configurar o documento: 1. Clique no Menu Modificar 2. Clique em Documento ou Clique na opção tamanho da barra de propriedades. A unidade de medida da largura e da altura podem ser polegadas, milímetros, centímetros e pixels, sendo pixels a mais recomendada. Fixação 01 1. A área de trabalho do Flash MX é dividida em quantas partes? 2. Qual a função da linha do tempo? 3. Para que criamos um layout de painéis? 4. Quantos formatos podem ser importados para o Flash MX? Para Ocultar ou Exibir o Painel basta clicar na seta posiciona da ao lado 5. A qual pacote o Flash MX pertence? Atividade 01 1. Para desenvolver o seu conhecimento sobre as ferramentas de desenho do Flash crie os desenhos abaixo. Consulte seu professor se existe algum link de exemplo. Aula 2 – Ferramentas de Desenho Nesta aula você aprenderá o seguinte: Preenchimento e Contorno Ferramenta Oval Ferramenta Retângulo Ferramenta Lápis Ferramenta Pincel Ferramenta Seta (Preta) Sobrepondo Objetos Criando um Grupo As ferramentas de desenho do Flash MX geram imagens vetoriais. O Flash MX possui ferramentas pré-definidas e também opções de desenho a mão-livre, veremos agora algumas dessas ferramentas. Preenchimento e Contorno Quando vamos utilizar uma ferramenta de desenho no Flash MX temos que escolher o preenchimento e o contorno. O preenchimento e a borda são tratados separadamente. As cores utilizadas serão do padrão RGB (Red Green Blue), o único suportado pelo Flash MX. Podemos alterar o preenchimento e o contorno de cada ferramenta de três maneiras: seção de cores, caixa de propriedades e painel misturador de cores. Seção de Cores Cor do Traço: Altera a cor da Linha. Cor do Preenchimento: Altera a cor a ser utilizada nos objetos. Trocar Cores: Inverte as cores de preenchimento e contorno. Preto e Branco: Modifica a cor do preenchimento para branco e a cor do contorno para preto, essa opção também é conhecida como cores padrão. Transparência: Retira o contorno ou o preenchimento dos objetos. Barra de Propriedades Na barra de propriedades podemos escolher também a largura e o estilo do traço, além das cores de preenchimento e contorno. Painel Misturador de Cores Selecionar o Preenchimento Com a ferramenta seta ativa basta dar um clique no interior do objeto. Editando um Objeto Criado no Flash A ferramenta seta nos permite fazer edições nos objetos criados no flash. Mas para que isso ocorra é necessário clicar e arrastar a borda do objeto. Para fazer uma cópia de um objeto basta pressionar a tecla ALT enquanto move-se o objeto. Sobrepondo os objetos Quando objetos de cores diferentes são sobrepostos no Flash MX o objeto de baixo é cortado pelo objeto de cima. Agora quando objetos de cores iguais são sobrepostos eles se unem. Isso ocorre porque os dois objetos estão na mesma CAMADA. 1. As vezes a sobreposição dos objetos se faz necessária, mas muitas vezes essa não é a melhor opção, vejamos agora o que acontece quando nós sobrepomos dois objetos no Flash MX. 2. Quando é removido um dos objetos o outro sofre alteração. Isso ocorre porque estamos trabalhando com camadas. Para que os objetos não sofram essas alterações é necessário selecioná- los e logo em seguida criar um grupo de objetos. Criando um Grupo (Group) Para criar um grupo de objetos é necessário acessar o menu Modificar opção Agrupar. Um grupo age de forma semelhante a uma camada, permitindo assim o empilhamento e a organização dos elementos. Para selecionar tudo CTRL + A Para editar um grupo basta dar duplo clique nos objetos agrupados. Para retornar a cena basta escolher a opção cena na linha do tempo. Observe agora que quando trabalhamos com grupos podemos sobrepor os objetos sem que os mesmos percam suas características. Como saber se está ou não trabalhando com um grupo ? Fácil, note quando selecionamos um grupo aparece em volta dele um quadrado azul. Organizando objetos Para organizar os objetos por ordem de empilhamento utilize o Menu Modificar e escolha a opção Organizar, desta forma é possível enviar os objetos para frente e para trás um dos outros. Fixação 02 1. Quando sobrepomos dois objetos de mesma cor o que acontece? 2. Quando sobrepomos dois objetos de cores diferentes o que acontece? 3. Para selecionarmos o preenchimento e o contorno são necessários quantos cliques? 4. Qual é a tecla de atalho para agrupar? 5. Qual é a tecla de atalho para desagrupar? Atividade 02 1. Utilizando as ferramentas de desenho do Flash, escolha uma imagem na Internet faça sua vetorização. Vetorização - É a arte de transformar um bitmap em vetor. Exemplo: Consulte seu professor se existe algum link de exemplo. Quando ativamos a opção do cadeado estamos bloqueando a camada de ser editada, isso impede que a camada que já está pronta seja alterada por engano. A opção quadrado nos permite visualizar todos os objetos das camadas, nos mostrando apenas os contornos dos objetos. Excluindo uma camada 1. Selecione a camada a ser excluída. 2. Clique no botão localizado no painel linha do tempo, ou clique com o botão direito sobre a camada e escolha a opção excluir. Linha do Tempo (TimeLine) A Linha do Tempo ( TimeLine) é utilizada para controlar o fluxo de informações no decorrer do tempo de um filme, ela indica a duração e a velocidade da animação sendo dividida em Quadros (Frames). Onde: (1) - Centralizar quadro: Centraliza na linha do tempo o quadro em que o marcador esta posicionado. (2) – Papel de transparência: Mostra os quadros selecionados como linhas de contorno. (3) – Estruturas seqüenciais em papel de paredes: Exibe a trajetória que o objeto irá fazer apenas com o contorno do objeto. (4) – Editar vários quadros: Quando ativamos essa opção podemos editar vários quadros ao mesmo tempo. (5) – Modificar marcadores de transparência: Essa opção funciona em conjunto com a opção 1 e 2 listadas acima, e serve para definirmos quantos quadros (frames) transparentes irão ser exibidos. (6) – Quadro atual: Mostra qual é o quadro em que o marcador está posicionado. (7) – Taxa de quadros: Essa opção nos mostra um valor seguido de (qps) que seria Quadros Por Segundo, ou seja, é nessa opção que teremos a velocidade do filme. (8) – Tempo decorrido: Mostra o tempo de início do filme até o quadro atual. Um frame muito importante no Flash MX é o quadro chave (Key Frame), ele é indicado por um ponto preto dentro do quadro, essa opção é utilizada para alterar uma animação. A ordem em que os quadros e quadros-chave aparecem na Linha de tempo determina a seqüência em que eles são exibidos em um filme. Para inserir um quadro-chave 1. Selecione a linha do tempo na posição desejada. 2. Clique no menu Inserir e escolha a opção quadro-chave (F6). Removendo quadro-chave 1. Selecione o quadro ou o intervalo que deseja remover. 2. Clique no menu Inserir e escolha a opção remover quadros. Nossas animações ainda podem conter mais dois tipos de quadros (Frames). O quadro é utilizado para determinar o tempo que um objeto vai levar para entrar em execução, ele pode ser inserido através do F5. O quadro com um ponto branco é o terceiro tipo de frame que podemos utilizar em uma animação, ele é usado em alguns pontos que haverá o evento de animação, mas que ainda está vazio, e pode ser inserido através do F7. Animação Quadro a Quadro No Flash MX há três tipos de animações: a quadro a quadro, interpolação de movimento e interpolação de forma. A animação quadro a quadro é a mais básica das animações, uma desvantagem dela é que o usuário tem que criar todas as variações de movimentos da animação. Se criarmos uma animação muito extensa, ou seja, se utilizarmos muitos quadros o arquivo dessa animação terá um tamanho superior em relação às outras animações. Criando uma animação quadro a quadro Em uma animação quadro a quadro é necessário que todos os objetos utilizados na animação estejam em grupos, isso é fundamental para que possamos animar os objetos individualmente. Nesse exemplo vamos mostrar como é simples a animação quadro a quadro. Primeira Etapa: Nessa etapa se faz necessário criar e agrupar o primeiro objeto. Segunda Etapa: Após a criação do objeto é necessário definir um tempo para a primeira animação. Nesse caso nós selecionamos o quadro de número 5 e pressionamos a tecla F6, com isso inserimos um quadro-chave, podendo assim fazer a primeira mudança na animação. Com o marcador posicionado no quadro 5, podemos alterar o objeto, dando assim uma nova forma para ele, sem alterar o resto da animação. 1. Quantas camadas podem ser inseridas no Flash MX? 2. O que significa a sigla FPS? 3. Qual a extensão dos arquivos criados no Flash? 4. Qual a extensão das animações criadas no Flash? 5. Conseguimos abrir um arquivo com extensão swf no Flash? Por qual motivo? Atividade 03 1. Utilizando a animação quadro a quadro e o conceito sobre camadas, desenvolva uma animação de duas bolinhas pulando no palco. Consulte seu professor se existe algum link de exemplo. Aula 4 – Trabalhando Com Texto Nesta aula você aprenderá o seguinte: Ferramenta Texto Propriedades do texto Alterando a forma do texto Cuidados com o texto Criando Link Animação com texto Ferramenta Texto (Text Tool) – (T) Quando inserimos textos no Flash podemos definir o tamanho, a fonte, o espaçamento, a cor e o alinhamento. Podemos também transformar o texto como um objeto, girando, redimensionando, inclinando e invertendo-o. Como a animação do Flash MX é voltada para a Internet podemos então trabalhar com caixas de texto do tipo entrada para que o usuário possa digitar textos em um formulário ou para exibir o texto que pode ser atualizado dinamicamente. Além disso, podemos criar links com esses textos. Quando usamos uma fonte instalada em nosso computador no Flash MX, ele incorpora as informações sobre essa fonte no arquivo SWF (arquivo Flash para visualização na Internet), garantindo que seja exibida corretamente no Flash Player. Os textos inseridos no Flash MX podem receber três valores: estático que é usado para textos comuns, dinâmicos usado para textos gerados por variáveis e o texto de entrada usado para criar formulários onde o usuário poderá inserir um valor. Inserindo Texto no Flash MX 1. Clique na ferramenta texto e logo em seguida clique no palco. 2. Note que no canto superior direito aparece um círculo. Ele indica que não tem limitação para a largura da caixa de texto. Para definir uma largura fixa para a caixa de texto basta clicar no círculo e arrastar até a largura desejada. Bom para saber se a caixa de texto está com uma largura fixa, basta olhar no canto superior direito e verificar se o círculo agora está na forma de um quadrado. Propriedades do Texto No Flash é possível aplicar formatações simples no texto como: fonte, tamanho, cor e alinhamento. Essas opções podem ser encontradas em dois lugares no Flash, sendo o painel de propriedades e no menu texto. Formatando o texto Para ganhar tempo podemos utilizar o painel de propriedades para formatar o texto. No painel de propriedades encontramos opções de formatações como: cor, tamanho, fonte, alinhamento, tipo do texto, espaçamento de caracteres, posição do caractere e link da URL. No painel de propriedades podemos ainda encontrar o botão formatar que nos permite aplicar formatações como: recuo, espaçamento, margem esquerda e margem direita. Alterando a Forma do Texto O Flash MX trata o Texto como um objeto gráfico, podendo assim receber formatações e efeitos diversos como um objeto gráfico qualquer. Quando inserimos um texto esse texto vem agrupado, nós podemos desmembrar o texto para que cada caractere receba uma formatação diferente. Desmembrando o Texto 1. Selecione o texto 2. Clique no menu Modificar e escolha a opção Desmembrar. Note que agora cada caractere é um grupo separado, podendo então receber diferentes formatações. d. Selecione o primeiro quadro. e. Apague o seu nome, deixando apenas uma ponta. f. Selecione o segundo quadro, apague seu nome deixando agora um pedaço do texto um pouco maior. g. Repita os passos ate chegar no quadro 20. Consulte seu professor se existe algum link de exemplo. Aula 5 – Interpolação de Forma (Shape) Nesta aula você aprenderá o seguinte: Animação com Vetores Animação com Textos Ferramenta Transformar Preenchimento Ferramenta Tinteiro Ferramenta Balde de Tinta Ferramenta Conta-Gotas O Flash MX nos permite transformar um objeto em outro através da interpolação de Forma (Tweening Shape), ou seja, podemos ter uma bola e facilmente transforma - lá em uma estrela, um quadrado ou qualquer outro objeto que você deseje desde que esse objeto seja desmembrado. Animação com Vetores Para criar animações do tipo Interpolação de Forma é necessário ter dois ou mais objetos, um objeto pode se transformar em dois ou mais objetos, vamos ver agora como fazer uma bolinha virar um quadrado facilmente. Criando Animação 1. Selecione a Ferramenta Oval (O). 2. Crie uma bolinha no Palco (Stage). 3. Clique no Quadro (Frame) de número 10 e insira um Quadro-Chave (KeyFrame) através da tecla F6. 4. Apague a bolinha do frame 10. 5. Selecione a Ferramenta Retângulo (R) . 6. Crie um Retângulo no Palco (Stage). 7. Selecione a Linha do Tempo (TimeLine). 8. Na barra de propriedades selecione a opção Interpolação de Formas. 9. Após aplicar a Interpolação de Forma sua Linha do Tempo deve ficar assim: 10. Agora é só pressionar CTRL + ENTER. Animação com Textos Para fazer uma animação do tipo Interpolação de Forma (Shape) com textos é necessário Desmembrar o texto, para fazer isso selecione o texto e clique no menu Modificar – Desmembrar ou CTRL + B. Criando Animação 1. Digite um Texto no Palco. 2. Selecione o Texto e pressione CTRL + B. 3. Pressione CTRL + B novamente para transformar o texto em forma. 4. Selecione o Quadro (Frame) de numero 10 e insira um Quadro-Chave (KeyFrame) através da tecla F6. 5. Apague o Texto. 6. Digite um outro texto. 7. Pressione novamente CTRL + B para Desmembrar o texto. A Ferramenta Conta-Gotas permite que possamos copiar o preenchimento de um objeto para aplicar em outro. Essa ferramenta também é utilizada no Corel Draw, PhotoShop e Fireworks. Selecionando uma Cor 1. Selecione a Ferramenta Conta-Gotas (I). 2. Clique sobre a cor desejada. 3. Note agora que a ferramenta selecionada foi o Balde de Tinta. 4. Clique sobre o objeto que vai receber o novo preenchimento. Fixação 05 1. Qual a diferença entre a ferramenta tinteiro e a ferramenta balde de tinta? 2. É possível criar uma animação de Forma com objetos agrupados? 3. Para criar uma animação de forma com textos o que é necessário fazer? 4. Quantos são e quais são os estilos de preenchimento? Atividade 05 1. Crie uma animação onde uma bola seja convertida para um retângulo, o retângulo no seu nome. Consulte seu professor se existe algum link de exemplo. Aula 6 – Usando Símbolos e Instâncias. Nesta aula você aprenderá o seguinte: Comportamentos de Símbolos Criando Símbolos Criando Instâncias Biblioteca Quando criamos um símbolo em nosso filme podemos atribuir 3 comportamentos, gráfico, botão ou clipe de filme. Os símbolos criados tornam-se parte de uma biblioteca. O uso de símbolos nos filmes reduz consideravelmente o tamanho do arquivo, isso ocorre porque ao invés de carregar vários símbolos iguais ele carrega uma instância, quando colocamos um símbolo no palco nós temos uma instância. As instâncias podem ser editadas individualmente sem que alteremos o símbolo principal. Comportamento de Símbolos Símbolos são elementos reutilizáveis ao longo de um Filme, ou em Filmes diferentes, os símbolos criados ficam armazenados em uma Biblioteca. Quando criamos um símbolo devemos determinar qual será o seu comportamento, essa escolha é muito importante porque é a partir do comportamento escolhido que o símbolo assumirá suas características na animação. Clipe de Filme (Movie Clip) - São pequenos trechos de filmes com uma linha do tempo independente, e muito útil para a interação via programação. Botão (Button) – Esse comportamento é utilizado para a criação de botões interativos no Flash MX. Gráfico (Graphic) – Esse tipo de símbolo é muito primitivo, ele é um símbolo estático e não sofre interação com a programação. Criando Símbolos Podemos criar um símbolo a partir de qualquer imagem que esteja no palco, utilizamos símbolos quando temos que criar animações com movimentos repetitivos, como por exemplo: uma pessoa correndo. Para criar símbolos 1. Selecione um objeto. 2. Clique no Menu Inserir e escolha a opção converter em símbolo (F8). 3. Digite um nome para esse símbolo. 4. Escolha um comportamento. Para editar símbolos 1. Selecione o símbolo a ser editado. 2. Clique no menu Editar e escolha a opção Editar Símbolo (CTRL + E). Quando editamos um símbolo o Flash atualiza automaticamente todas as instâncias que aquele símbolo faz parte. Criando Instâncias Quando inserimos um símbolo no palco estamos criando uma instância de símbolo. O Flash MX armazena o símbolo no arquivo somente uma vez independentemente do número de instâncias de um símbolo criadas. Podemos modificar as propriedades de uma instância sem afetar o símbolo principal e editá-lo para alterar todas as instâncias. Para criar uma instância basta clicar no símbolo que está localizado na biblioteca e arrastá-lo para o palco. Ex: Quando apagamos um objeto do Palco ele continua na biblioteca, então se faz necessário também excluir da biblioteca. Note na imagem acima que não temos nenhum objeto no palco, mas na biblioteca podemos visualizar dois símbolos, isso vai fazer diferença no tamanho final do nosso filme. É aconselhável criar pastas para separar os objetos por tipo. Fixação 06 1. Quais são os símbolos padrão do Flash? 2. O que vem a ser instância no Flash? 3. Quando convertemos um objeto em símbolo podemos mudar o seu ponto de registro, Para que usamos isso? 4. Qual a tecla de atalho para converter um objeto em símbolo? 5. Qual a tecla de atalho para ativar a biblioteca? Atividade 06 1. Utilizando o conceito visto nessa aula sobre a criação de instâncias crie o objeto abaixo. Consulte seu professor se existe algum link de exemplo. Aula 7 – Interpolação de Movimento (Motion) Nesta aula você aprenderá o seguinte: Interpolação de Movimento Propriedades dos Símbolos Animação com Bitmaps Uma das coisas que torna o Flash MX realmente interessante é o poder das animações, nessa aula vamos aprender a criar animações com símbolos vistos na aula anterior. Além da animação feita na linha do tempo, podemos criar também animações através da linguagem de programação do Flash ou ActionScript, com isso nossa animação vai ter um tamanho final bem menor. Interpolação de Movimento Para criar animações com Interpolação de Movimento é necessário que nossos objetos sejam símbolos, após isso basta ter um Quadro-Chave inicial e um Quadro-Chave final que o Flash cria a trajetória de movimento. Criando uma animação. 1. Crie um objeto no palco. 2. Selecione o objeto e clique no menu Inserir – Converter em Símbolo (F8). 3. Digite o nome do objeto e escolha qual tipo de símbolo será utilizado. 4. Clique no Quadro (Frame) de número 10 e pressione a tecla F6. 5. Mude o seu objeto de lugar. Na opção avançado podemos estar alterando os valores RGB (Red Green Blue) e alfa do símbolo. Clique no botão de configurações. Altere os valores até obter a cor desejada para o símbolo. Essa opção nos permite ter apenas um objeto na biblioteca e poder trabalhar com várias instâncias coloridas desse símbolo. Essa opção nos permite ter um filme bem mais leve. Podemos alterar várias propriedades dos símbolos através do ActionScript. Animação com Bitmaps O Flash MX permite trabalhar com imagens bitmaps, devemos lembrar que o Flash MX não é um programa de tratamento de imagens. O que o Flash permite é aplicar animações de Movimento e de Forma nos bitmaps importados. Criando uma animação. 1. Clique no Menu Arquivo – Importar (CTRL + R). 2. Selecione a pasta onde se encontra a imagem a ser utilizada. 3. Selecione a imagem e clique em Abrir. 4. Sua imagem é posicionada no ponto zero do palco. 5. Selecione o objeto e clique no menu Inserir – Converter em Símbolo (F8). 6. Digite o nome do objeto e escolha qual tipo de símbolo será utilizado. 7. Clique no Quadro de número 10 e pressione a tecla F6. 8. Mude o objeto para o canto inferior direito. 9. Aumente o tamanho do objeto utilizando a ferramenta Transformação Livre (Free Transform) (Q). 10. Selecione o primeiro Quadro-Chave. 11. Clique no Menu Modificar – Transformar – Inverter Verticalmente. 12. Clique no painel de propriedade e ative a opção Interpolação de Movimento. 13. Pressione CTRL + ENTER. Quando desejamos aplicar Interpolação de Forma em um bitmap, devemos primeiro desmembrar esse objeto, através do Menu Modificar – Desmembrar ou CTRL + B. Quando tentamos aplicar Interpolação de Forma ou de Movimento e a linha do tempo fica tracejada isso significa que a animação tem um erro e não vai funcionar. Fixação 07 1. Para criar uma animação de movimento o que devemos fazer com nossos objetos? 2. O que vem a ser o Alpha de um símbolo? 3. Selecione a segunda camada. 4. Desenhe uma bolinha. 5. Selecione o objeto e clique no menu Inserir – Converter em Símbolo (F8). 6. Digite o nome do objeto e escolha qual tipo de símbolo será utilizado. 7. Posicione o ponto de registro da bola no início da trajetória. 8. Clique no Quadro (Frame) de número 10 e pressione a tecla F6. 9. Posicione o ponto de registro da bola no final da trajetória. Deixe o botão encaixar ativado para facilitar o encaixe do objeto. 10. Clique no painel de propriedade e ative a opção Interpolação de Movimento. 11. Pressione CTRL + ENTER. Note que quando pressionamos CTRL + ENTER a linha que definimos como sendo o trajeto para o objeto seguir não aparece em nossa animação. Na caixa de Propriedades é possível marcar a opção Orientar à Trajetória, isso vai fazer com que o objeto siga exatamente a trajetória definida. É possível definir uma rotação para o objeto seguir, ela pode ser em sentido horário ou em sentido anti-horário. Máscara (Mask) Quando desejamos exibir ou ocultar parte de um objeto podemos utilizar a camada do tipo Máscara. Com esse tipo de camada podemos criar desde animações básicas até efeitos mais avançados. Esse recurso também pode ser criado através de comandos ActionScript. Criando uma Máscara. 1. Clique no Menu Arquivo – Importar (CTRL + R). 2. Selecione a pasta onde se encontra a imagem a ser utilizada. 3. Selecione a imagem e clique em Abrir. 4. Selecione o objeto e clique no menu Inserir – Converter em Símbolo (F8). 5. Digite o nome do objeto e escolha qual tipo de símbolo será utilizado. a. Importe uma imagem para o Flash. b. Crie uma nova camada. c. Mude o nome das camadas para “Foto” e “Mask”. d. Crie um objeto no palco. e. Selecione o objeto e transforme em um símbolo do tipo gráfico. f. Selecione o quadro 20 das duas camadas e pressione a tecla F6. g. Mude o Objeto de lugar. h. Altere o tamanho do objeto para que possa cobrir toda a imagem. i. Selecione os quadros da camada “Mask” e ative a opção Interpolação de movimento no painel de propriedades. j. Clique com o botão direito na camada “Mask” e ative a opção “Máscara”. Consulte seu professor se existe algum link de exemplo. Aula 9 – Clipe de Filme e Botão Nesta aula você aprenderá o seguinte: Clipe de Filme Botão ActionScript Clipe de Filme (Movie Clip) O tipo de símbolo mais completo é o clipe de filme, pois ele permite uma vasta interação com ActionScript, alem de ter sua própria linha do tempo, tornando assim mais fácil a criação de animações complexas. Símbolos do tipo Clipe de Filme podem conter várias animações em sua Linha do Tempo sem modificar a linha do tempo principal. Podemos observar na imagem acima que o objeto chuva_mc esta dentro do objeto nuvem_chuva que por sua vez está na Linha do Tempo principal. Na Linha do Tempo principal não temos nenhuma animação. As animações estão internas, ou seja, elas foram feitas dentro de Clipes de Filmes sem precisar da linha do tempo principal. Tornando assim a nossa animação mais organizada. Através de comando ActionScript é possível alterar cor, tamanho, posição, rotação entre outros atributos do Clipe de Filme, mas esse assunto será visto na próxima aula. Botão (Button) O Flash MX nos permite criar botões animados, de maneira rápida e funcional, possibilitando assim uma maior interatividade entre nossas animações, através deles podemos criar links entre uma animação e outra. Devemos lembrar que os Clipes de Filmes também podem ser usados como botões. Os símbolos do tipo botão criados no Flash MX tem 3 estados, são eles: Para Cima (Up): Quando o botão esta em repouso. Sobre (Over): Quando passamos o mouse sobre o botão. Para Baixo (Down): Ocorre quando o botão é pressionado. Área (Hit): Essa opção não é um estado do botão, aqui definimos qual será a área ativa do botão. Criando um Botão. 1. Crie um objeto no palco. 2. Selecione o objeto e clique no menu Inserir – Converter em Símbolo (F8). 3. Clique no menu Editar – Editar Símbolos (CTRL + E). Bom observe que a Linha do Tempo mudou passando agora para os estados que conversamos no início desse tópico. 4. Pressione F6 para poder editar o botão nos próximos estados. 5. Pressione CTRL + ENTER. Observe que o botão não aparece quando rodamos nossa animação. Ações (ActionScript) O ActionScript é uma linguagem de programação nativa do Flash que torna possível criar animações robustas e mais leves. Uma das grandes vantagens do ActionScript é a interatividade que ele permite do projeto com o usuário final. Essa linguagem já esta sendo utilizada para desenvolver jogos devido a sua facilidade de programar e o tamanho final do arquivo. O Flash MX utiliza a versão 1.0 do ActionScript, já o Flash MX 2004 e o Flash 8 utilizam a versão 2.0, no final de 2006 provavelmente será lançado o Flash 9 com a versão 3.0 do ActionScript. Devemos lembrar que os comandos aprendidos nessa apostila continuam valendo para a versão 2.0 e possivelmente irão funcionar na versão 3.0 também. Os códigos devem ser escritos no painel Ações (Actions) que é habilitado pela tecla F9. 1. Exibe em qual local será inserido o código ActionScript. 2. Caixa de Ferramentas Ações – Armazena todos os comandos ActionScript. 3. Painel de Script – Exibe o código que está sendo utilizado. 4. Opções de Exibição – Permite Mudar o modo de exibição do Painel de Script de Normal para o modo Especialista. 5. Referência – Dicionário dos comandos Actions Script. Parando a animação. 1. Crie uma bola no palco. 2. Selecione o objeto e clique no menu Inserir – Converter em Símbolo (F8). 3. Clique no Quadro (Frame) de número 10 e pressione a tecla F6. 4. Mude a bola de lugar. 5. Clique no painel de propriedade e ative a opção Interpolação de Movimento. Agora vamos inserir um código ActionScript para parar o filme, ou seja, vamos fazer com que o filme reproduza apenas uma vez. 6. Selecione o Quadro (Frame) de número 10 e logo em seguida pressione a tecla F9 para ativar o painel de Ações. 7. Selecione a ação STOP como mostra na figura acima. 8. Pressione CTRL + ENTER. Note que o filme será reproduzido apenas uma vez. Fixação 09 1. Um símbolo do tipo Clipe de Filme pode ser utilizado como botão? 2. Quantos são e quais são os estados de um botão? 3. O que devemos fazer para criar um botão invisível? 4. O que vem a ser a opção área de um botão? 5. Para que um botão do tipo texto funcione perfeitamente o que é necessário fazer? Atividade 09 1. Nessa aula vamos criar um menu desdobrável, algo simples bastante utilizado em sites. a. Crie um retângulo no palco. b. Utilize a cor de preenchimento - #FF6600 c. Mude o nome da camada para principal d. Selecione o rentângulo e pressione F8, para converter em símbolo. e. Copie e cole o botão, posicione as copias uma abaixo da outra, como mostra a figura. f. Selecione os 3 botões abaixo do botão principal e altere suas propriedades de cor para os valores da imagem abaixo. o. Selecione o primeiro quadro da camada ações e pressione a tecla F9, para ativar o painel de ações. p. Digite o código abaixo: q. Selecione o quadro de número 5 da camada ações e pressione a tecla F6. r. Digite o código abaixo: s. Selecione o primeiro quadro da camada principal. t. Selecione o botão principal, pressione a tecla F9 para ativar o painel de ações. u. Digite o código abaixo: v. Selecione o quadro de número 5 da camada principal. w. Selecione o botão principal, pressione a tecla F9 para ativar o painel de ações. x. Digite o código abaixo: Pronto agora é vamos testar. Consulte seu professor se existe algum link de exemplo. Aula 10 – Controlando o Filme Nesta aula você aprenderá o seguinte: Ajuda Controlando o Filme Links Ajuda (Help) A melhor maneira de se aprender sobre um programa é utilizando o HELP, no Flash não seria diferente, é possível encontrar tutoriais e exemplos no menu Ajuda do Flash MX, além de um grande dicionário que explica a função de cada comando presente no ActionScript. Uma frase muito comum vista na Internet é: Não tenha medo do F1, ele só quer te ajudar. O dicionário é de fácil utilização, basta procurar pelo comando desejado. É possível descobrir a descrição do comando, a sua disponibilidade e em alguns casos exemplos de como utilizar esse comando. Os tutoriais disponíveis no Flash MX, partem do básico com animações quadro-a-quadro até interação com o ActionScript. No menu Ajuda podemos encontrar Lições, Tutoriais, Exemplos, Dicas, Suporte e o famoso Dicionário do ActionScript. Agora só depende de Você. O Flash trás alguns exemplos bem interessantes como Jogos, controle do filme, interações com botões entre outros. 1º Linha Quando o botão for pressionado ele irá executar o que está entre as chaves. 2º Linha Ação que vai ser executada após o botão ser pressionado. 15. Pressione CTRL + ENTER. Links O Flash MX permite criarmos links para animações internas, externas, sons, imagens, páginas HTML e para e-mail. Nesse tópico vamos aprender a criar link para páginas HTML e para e-mail. Os Links podem ser atribuídos a textos ou a qualquer tipo de imagem, desde que seja transformado em um botão ou em um clipe de filme. Controlando a Animação. 1. Crie um objeto no palco. 2. Selecione o objeto e clique no menu Inserir – Converter em Símbolo (F8). 3. Copie e Cole o Botão ou Selecione o símbolo na biblioteca e crie uma instância no palco. 4. Selecione o primeiro botão, logo após pressione a tecla F9. 5. Mude o Painel de ações para o Modo Especialista. 6. Digite o seguinte código: 1º Linha Quando o botão for pressionado ele irá executar o que está entre as chaves. 2º Linha Comando getURL permite criar um link entre a animação e um outro arquivo. Parâmetros getURL(url,window) Url – Endereço do objeto ou site a ser aberto. Window – Local onde o arquivo será aberto, devemos utilizar um dos seguintes nomes de destinos: _self especifica o quadro atual na janela atual. _blank especifica uma nova janela. _parent especifica a origem do quadro atual. _top especifica o quadro de nível superior na janela atual. 7. Pressione CTRL + ENTER. Vamos agora criar um Link para E-mail. 1. Selecione o botão contato, logo após pressione a tecla F9. 2. Digite o seguinte código: 1º Linha Quando o botão for pressionado ele irá executar o que está entre as chaves. 2º Linha Utilizando o comando getURL insira - mailto:seuemail@servidor.com.br 3. Pressione CTRL + ENTER. É possível que ao testar em sua máquina o link para e-mail não funcione, às vezes é necessário publicar o arquivo na Internet para ele funcionar. Devemos lembrar que esse comando vai abrir o Outlook Express e irá enviar o e-mail através dele. Para criar um formulário no Flash que envie os dados direto para o e-mail será necessário utilizar uma linguagem Server Side, ou seja, Linguagens que irão fazer a ponte entre o Flash e o Servidor, tais como: PHP e o ASP. Fixação 10 1. Qual a tecla de atalho para ativar o painel de ações? 2. Qual a função do comando gotoAndStop? Para encontrar essa resposta utilize o dicionário de Ações do Flash, localizado no menu Ajuda. 3. Quando criamos um formulário no Flash que tipo de linguagem é necessário para que o mesmo seja enviado direto para o nosso e-mail? 4. Que comando utilizamos para quando o usuário clicar em um botão consiga entrar no site do Cedaspy? 5. É possível inserir o comando on (press) em um símbolo do tipo gráfico? por qual motivo? Atividade 10 1. A animação dessa aula será controlada por dois botões, sendo um de play e o outro de stop. Consulte seu professor se existe algum link de exemplo. Esse tipo de banner é famoso na Internet, Seu tamanho pode variar de site para site, mas hoje em dia não é uma das melhores escolhas já que os navegadores estão bloqueando automaticamente esse tipo de propaganda. Banner retirado do site www.pop.com.br BANNER FLUTUANTE Uma das opções mais utilizadas de banners atualmente, pois eles substituem os banners Pop-up, esse tipo de banner normalmente é criado em Flash e inserido em uma camada no Dreamweaver ficando sobre o resto do site, fica poucos segundos na tela e logo após ele é fechado automaticamente. Banner retirado do site www.terra.com.br BANNER VERTICAL Banner de fácil visualização e de tamanho variado de site para site. Esse tipo de banner normalmente fica por um longo período no site que foi publicado. Banner retirado do site www.superdownloads.com.br BANNER EXPANSÍVEL Foi uma febre no ano de 2005, esse banner é executado com a interação do usuário, para exibir as informações do banner o usuário tem que passar o mouse sobre o banner. O banner utilizado como exemplo é uma chamada para o treinamento na arte de defesa da rede da Microsoft. Quando o usuário passar o mouse sobre o banner e ele estiver todo aberto, será permitido que através das setas direcionais do teclado o usuário possa movimentar o boneco pelo banner, também pode chutar e dar soco em palavras que são uma ameaça para a segurança das empresas na Internet, tais como: Vírus e Hackers. Banner retirado do site www.baboo.com.br Fixação 11 1. Qual a diferença de logotipo para logomarca? 2. O que é usabilidade? 3. É vantagem utilizar janela pop-up para fazer anúncios em sites? Por qual motivo? 4. O que é portfólio? Atividade 11 O Exercício dessa aula propõe a você desenvolver um banner expansível, siga todos os passos listados abaixo para obter um bom resultado. 1. Crie um Retângulo no palco. 2. Selecione o objeto e clique no menu Inserir – Converter em Símbolo (F8). 3. Digite o nome do objeto e escolha qual tipo de símbolo será utilizado. 4. Selecione o Quadro (Frame) de número 10 e pressione a tecla F6 para inserir um quadro chave. 5. Selecione o Quadro (Frame) de número 20 e pressione a tecla F6 para inserir um quadro chave. 6. Selecione o Quadro (Frame) de número 10, selecione o objeto e mude a sua altura de 66 px para 250 px. Aula 12 – Áudio e Vídeo Nesta aula você aprenderá o seguinte: Importando Áudio Efeitos e Eventos de Áudio Botão com Som Importando Vídeo O Flash MX permite a importação de arquivos de áudio e vídeo para serem inseridos nas animações, esses recursos são bastante utilizados em animações multimídias. Os formatos mais conhecidos de arquivos de áudio como mp3 e wav são suportadas pelo Flash MX, assim como os formatos para vídeo como mov, avi, mpeg e dvi. Não usamos o Flash MX para fazer edição de sons, para isso será necessário ter um bom Hardware e Softwares apropriados para esse tipo de trabalho. Um dos softwares mais utilizados para a edição de sons é o ACID e o Sound Forge XP. Áudio Os arquivos de áudio são inseridos no Flash através do comando Arquivo – Importar, os arquivos de áudio importados ficam armazenados na biblioteca, deixando assim o nosso swf com um tamanho final maior. Existem vários sites na Internet que disponibilizam arquivos de áudio para serem utilizados no Flash, um site muito utilizado é o www.flashkit.com, nesse site é possível encontrar trechos de músicas ou sons como uma porta abrindo ou uma conversa. CUIDADO: Não é todo arquivo de áudio que pode ser inserido em suas animações e publicados na Internet ou Distribuídos em CDs, é necessário verificar se o arquivo utilizado tem direitos autorais. Importando um arquivo de áudio 1. Arquivo – Importar (Ctrl + R). Selecione o Arquivo a ser utilizado em sua animação. Agora o Flash está importando o arquivo para sua biblioteca, o tempo desse processo pode variar dependendo do tamanho do arquivo escolhido e do desempenho do Hardware de seu computador. 2. Clique no menu Janela – Biblioteca (F11). Note que o arquivo importado está armazenado na biblioteca. 3. Clique e Arraste o som para o palco. 4. Pressione CTRL + ENTER. Quando salvar o seu filme e gerar o swf, verifique o tamanho final do seu arquivo. É aconselhável escolher um arquivo pequeno. Imagine essa animação sendo visualizada na Internet por um usuário que tem uma conexão de 56 Kbps em casa. Efeitos e Eventos de Áudio Quando importamos um arquivo de áudio para o Flash é possível aplicar efeitos de entrada e saída desse som em nossa animação. Após importar o arquivo de áudio, ative o painel de propriedades. 1. Som: Arquivo utilizado naquele Quadro. 2. Efeito: Permite criar efeito de entrada e de saída para o som. Nessa caixa é possível habilitar ou desabilitar uma das caixas de som, iniciar o som apenas na caixa da esquerda e passar para a caixa da direita, e em personalizado é possível criar outros efeitos manualmente. O tamanho do arquivo vai variar dependendo do som escolhido. O Flash MX utiliza um software da Sorenson Spark para importar vídeos, esse Software permite fazermos configurações básicas em nosso filme, tais como: qualidade e tamanho. Importando Vídeo 1. Clique no menu Arquivo – Importar (Ctrl + R). 2. Selecione o arquivo de vídeo a ser utilizado. 3. Nessa janela podemos definir a qualidade do vídeo e o seu tamanho, é importante lembrar que quanto maior a qualidade do vídeo maior será o arquivo final. O tempo de importação do arquivo pode variar de acordo com o Hardware e o tamanho do arquivo importado. 4. Após importar o vídeo o Flash mostrará uma caixa com a quantidade de quadros que serão necessários para a reprodução desse vídeo. 5. Pressione CTRL + ENTER. Também é possível criar um tocador de vídeo dentro do Flash utilizando de comandos ActionScript. Fixação 12 1. Para que usamos o sincronismo do som como Fluxo? 2. Qual a finalidade do ID3 em um arquivo com extensão MP3? 3. O que é CODEC? 4. Que empresa fabrica o CODEC utilizado para trabalhar com vídeos no Flash? 5. Onde podemos encontrar as Alças de Envelopes quando estamos trabalhando com som? Esse modelo de Player foi retirado do Flash 8. Atividade 12 1. Nessa aula vamos construir um player básico para controlar a reprodução do filme importado para o Flash. Seu professor deixou um vídeo disponível para que você utilize nessa aula, peça para ele em qual pasta está esse arquivo. a. Importe o vídeo para o Flash. b. Crie uma nova camada. c. Renomeie as camadas para “Vídeo” e “Botões”. d. Na camada botões, crie um objeto e transforme-o em um símbolo do tipo botão. e. Copie e Cole o seu botão f. Escreva play e stop sobre eles. 3. Insira uma terceira camada, e mude seu nome para ações. 4. Selecione os quadros de número 10 e pressione a tecla F6 para inserir Quadros – Chaves. 5. Repita o passo 4 nos quadros 20 e 30 da sua linha do tempo. 6. Selecione o quadro de número 1 da camada ações e pressione a tecla F9 para ativar o painel de ações. 7. Digite o seguinte código. 8. Repita os passos 6 e 7 nos quadros 10 e 20. 9. Bloqueie a camada ações. 10. Selecione o quadro de número 1 da camada conteúdo e ative o painel de propriedades. 11. Insira um nome para o quadro – chave. 12. Repita os passos 10 e 11 nos quadros 10 e 20, com os nomes “quem_sou” e “contato” sem aspas. 13. Selecione o quadro 1 da camada conteúdo e digite um texto. 14. Repita o passo de número 13 no quadro 10. Utilize imagens, animações, sons e etc. Tenha criatividade. 15. Selecione o quadro 20 da camada conteúdo. 16. Selecione a ferramenta Texto, no painel de propriedades selecione o tipo de texto Entrada. 17. Desenhe os campos de entrada como mostra à imagem a abaixo. Salve sua animação. Vamos utilizar ela na próxima aula. Para deixar os campos com o seu preenchimento branco é necessário ativar o botão “Mostrar Borda em Volta do Texto” que está localizado no painel de propriedades. 5. Arraste para o palco o componente ComboBox. 6. Selecione o ComboBox e ative o painel de propriedades. 7. Na opção “Label” clique na lupa que aparece ao lado direito. 8. Agora cadastre algumas profissões nessa caixa. Agora vamos ver qual a aparência dos componentes em seu site. 9. Arraste para o palco o componente Push Button. 10. Selecione o componente Push Button e ative o painel de propriedades. 11. Na opção “Label” altere o conteúdo de “Push Button” para “Enviar”. Para adicionar mais itens basta clicar no sinal de +. As setas servem para ordenar os valores. 12. Crie uma nova camada, mude seu nome para botões. Criando Links 13. Crie um Retângulo no Palco. Não precisa se preocupar muito com cores de preenchimento e de contorno, pois esse retângulo será utilizado como botão invisível. 14. Selecione o Retângulo e pressione a tecla F8 para converter esse objeto em um símbolo. 15. Selecione o botão, clique no menu Editar – Editar Símbolos. 16. Arraste o Quadro – Chave do botão de “Para Cima” para “Área”. 17. Retorne para a linha do tempo principal. 18. Copie e Cole o Botão para as próximas opções. 19. Selecione o botão “Home”, pressione a tecla F9 para ativar o painel de ações. 20. Clique no canto superior direito e mude o modo de visualização de “Normal” para “Especialista”. 21. Digite o seguinte código: Linha 1: Quando o botão for pressionado será executado o que estiver entre as chaves. Linha 2: Envia a reprodução para o quadro que foi especificado no comando e para a reprodução da animação. 22. Repita os passos 8 e 10 nos outros dois botões. Lembre-se de alterar o nome do quadro no comando gotoAndStop. 23. Pressione CTRL + ENTER. Consulte seu professor se existe algum link de exemplo. Fixação 14 1. Quantos são os componentes do Flash MX? 2. Qual a função do comando gotoAndPlay? Utilize o dicionário de Ações localizado no menu ajuda para obter essa resposta. 3. Qual é a ultima versão do Flash em português lançado pela Macromedia? 4. Qual empresa fez a compra da Macromedia no ano de 2005? Na guia HTML podemos definir a posição, tamanho e qualidade do filme. Uma outra opção bastante utilizada é a opção exibir menu que está ativa, normalmente deixamos ela desativada, assim não permitimos ao usuário mudar algumas configurações na reprodução do filme. Transparência no Flash Ao alterar a cor de fundo da nossa pagina HTML nos deparamos com um problema, observamos que a animação SWF não é transparente. Para deixar a animação transparente no Internet Explorer devemos editar manualmente o código HTML da página. Abra o arquivo HTML gerado em sua pasta no Dreamweaver ou no Bloco de Notas, e insira o código abaixo em sua página. Repetindo a linha por questões de legibilidade. <param name= “wmode” value= “transparent”> É importante salientar que essa opção funciona atualmente apenas para o navegador Internet Explorer. Publicando Filmes na Internet O Flash MX não faz a publicação de arquivos via FTP (File Transfer Protocol – Protocolo de Transferência de Arquivos) como o Dreamweaver, para isso é necessário utilizar um software de publicação. Através do site do Cedaspy é possível fazer a transferência desses dados facilmente. Para publicar seus arquivos na rede é necessário ser cadastrado no site. Criando uma conta no Cedaspy 1. Acesse o site do Cedaspy – www.cedaspy.com.br. 2. Clique na opção – Cadastre seu e-mail. 3. Preencha o Formulário, lembre-se que os dados com * são de preenchimento obrigatório. 4. Selecione a Pessoal – área FTP. Será aberta uma nova janela com um sistema de gerenciamento de arquivos, permitindo o envio de arquivos para a Internet. Leia atentamente as informações mostradas na próxima janela. 5. Clique em gerenciar sua conta através da interface Web. 6. Clique no botão Enviar. 7. Clique no botão adicionar campo para enviar vários arquivos ao mesmo tempo.