Curso de Web Design MÓDULO IV FLASH 185 ACTIVE BRASIL



Documentos relacionados
Certificado ISO 9001:2000 Nº /98. Centro de Informática CETEP Quintino Elaborada por: João Marcelo

Licenciamento de Uso

c) Insira uma nova camada, acima daquela que contém o texto. Nomeie-a de máscara. Clique com o botão direito nesta camada e marque a opção Mask.

PASSO A PASSO MOVIE MAKER

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

CorelDRAW UM PROGRAMA DE DESIGN

TUTORIAL COMO CRIAR E EDITAR UM VÍDEO NO WINDOWS MOVIE MAKER*

Manual Sistema MLBC. Manual do Sistema do Módulo Administrativo

Ferramenta para design de web site Macromedia Flash Fábio Fernandes

ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007

Banner Flutuante. Dreamweaver

Prática 3 Princípios da Animação

ATENÇÃO: * Arquivos com tamanho superior a 500 KB NÃO SERÃO ACEITOS * SOMENTE serão aceitos documentos do formato: PDF

Prática 6 ActionScript

Universidade Federal de Santa Maria UFSM Centro de Tecnologia CT. Power Point. Básico

Iniciação à Informática

Microsoft Office PowerPoint 2007

SUMÁRIO TUTORIAL DO HQ. 2 DICAS PEDAGÓGICAS:. 2 DOWNLOAD DA INSTALAÇÃO. 2 PASSO 1 FORMULÁRIO PARA DOWNLOAD. 2 PASSO 2 ESCOLHENDO A VERSÃO.

Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U)

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA

Tutorial de Blender, Animação básica do tipo keyframe

Apostila de Windows Movie Maker

GRADIENTES. f lash TRABALHANDO COM. Guilherme Marconi

Sumário. 1 Tutorial: Blogs no Clickideia

Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

MANUAL DO ANIMAIL Terti Software

15. OLHA QUEM ESTÁ NA WEB!

APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

Manual de configuração do sistema

TUTORIAL: APRENDENDO A LIDAR COM O AXURE PRO

OneDrive: saiba como usar a nuvem da Microsoft

UNIVERSIDADE FEDERAL DO AMAPÁ PRÓ REITORIA DE ADMINISTRAÇÃO E PLANEJAMENTO DEPARTAMENTO DE INFORMÁTICA TREINAMENTO EM INFORMÁTICA MÓDULO V

1 UNIT Universidade do Trabalhador Dr. Abel dos Santos Nunes

Tutorial de animação

CRIANDO TEMPLATES E LEGENDAS

Sumário. Computação Gráfica Illustrator

AULA 1 Iniciando o uso do TerraView

Pesquisa e organização de informação

INTRODUÇÃO AO WINDOWS

Aula 5 Microsoft PowerPoint 2003: Criando uma Apresentação

Universidade Estadual de Campinas Faculdade de Educação Laboratório de Novas Tecnologias Aplicadas à Educação

NÚCLEO DE TECNOLOGIA E EDUCAÇÃO CURSO: WINDOWS MOVIE MAKER TUTORIAL

Sumário INTRODUÇÃO 3 TELA DE APRESENTAÇÃO 3 DESENHANDO E TRANSFORMANDO 29 FERRAMENTA FORMA 29 PREENCHIMENTOS E CONTORNOS 36

Centro de Competência Entre Mar e Serra. Guia

PROJETO INFORMÁTICA NA ESCOLA

OURO MODERNO Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.

Menus Personalizados

Prática 2 Características do Flash

CRIANDO BANCOS DE DADOS NO SQL SERVER 2008 R2 COM O SQL SERVER MANAGEMENT STUDIO

C D. C) Coleções: é usada para organizar o conteúdo de áudio, vídeo e imagens em pastas, buscando facilitar a montagem do storyboard.

COLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS

UNIVERSIDADE FEDERAL DE PELOTAS. Índice

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização

Book Flash CS6.indb 8 10/01/ :37:42

Introdução O que irá mudar? Por onde começar? Para que serve cada camada (layer)? Inserindo a ClickTag...

1º PASSO: CRIE NO SEU COMPUTADOR UMA PASTA PARA O SEU PROJETO 2º PASSO: CONHEÇA O MOVIE MAKER

Usando áudio no Flash

QUEM SOU EU? Apresentação autobibliográfica multimídia

Windows Live Movie Maker

PRINCÍPIOS DE INFORMÁTICA PRÁTICA OBJETIVO 2. BASE TEÓRICA 3. SEQÜÊNCIA DA AULA. 3.1 Iniciando o PowerPoint

MANUAL BÁSICO DE INSTRUÇÕES PARA USO DA LOUSA DIGITAL DO LMF

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção

Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.

Aula Au 3 la 7 Windows-Internet

Aula 01 - Formatações prontas e condicionais. Aula 01 - Formatações prontas e condicionais. Sumário. Formatar como Tabela

1Conhecendo o Flash O B J E T I V O S

Apostila para uso do Power Point

Gerenciamento de Arquivos e Pastas. Professor: Jeferson Machado Cordini jmcordini@hotmail.com

Índice: CMS 3 O que é Content Management System? Clientes 4 O que é o Cliente? 4 Configurando o i-menu/i-view para trabalhar. com o CMS.

Table of Contents. PowerPoint XP

W o r d p r e s s 1- TELA DE LOGIN

Fluxo de trabalho do Capture Pro Software: Indexação de código de barras e separação de documentos

Aula Au 3 la 3 Windows-Internet

Como Gerar documento em PDF com várias Imagens

Aula Au 3 la 9 Windows-Internet

Serviço Técnico de Informática. Curso Básico de PowerPoint

Google Drive. Passos. Configurando o Google Drive

Guia de Início Rápido

O que há de novo. Audaces Idea

AULA: BrOffice Impress terceira parte. Ao final dessa aula, você deverá ser capaz de:

ÍNDICE... 2 POWER POINT Abas... 7 Salvando Arquivos... 8 Abrindo um arquivo LAYOUT E DESIGN... 13

Operador de Computador. Informática Básica


Disciplina: Programas de Edição de Textos Professora: Érica Barcelos

PRINCÍPIOS DE INFORMÁTICA PRÁTICA OBJETIVO 2. BASE TEÓRICA. 2.1 Criando Mapas no Excel. 2.2 Utilizando o Mapa

02 - Usando o SiteMaster - Informações importantes

Apostilas OBJETIVA Escrevente Técnico Judiciário TJ Tribunal de Justiça do Estado de São Paulo - Concurso Público Caderno 1.

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.

Microsoft Access XP Módulo Um

1) MANUAL DO INTEGRADOR Este documento, destinado aos instaladores do sistema, com informações de configuração.

Windows Live Movie Maker

SUMÁRIO 1. AULA 6 ENDEREÇAMENTO IP:... 2

Movie Maker: Recurso para produção e comunicação.

Janelas e seus elementos

Aula 03 PowerPoint 2007

Construtor de sites SoftPixel GUIA RÁPIDO - 1 -

Desenhando no Flash. Comece um novo arquivo novo, de tamanho 500 X 300 pixels.

Transcrição:

MÓDULO IV FLASH 185 ACTIVE BRASIL

AULA 1 INTRODUÇÃO Objetivos: Antes de começarmos a efetivamente trabalhar em um programa de animação é muito importante o conhecimento dos conceitos da animação clássica, a fim de se aprender o método de animação. Contexto: Durante toda a história do cinema, a animação se fez presente, através de inúmeras técnicas e eventos. O desenho animado é um ramo do cinema único e diferenciado, e que adquiriu uma própria vertente de criação, modelagem e processo de produção. Dentre os processos de animação mais usados e antigos, certamente destacamos o quadro a quadro, onde através do retardamento da visão humana temos a sensação de movimento. Um dos mais antigos e interessantes projetores de animação é o zoetrópio que consiste de um disco dodecagonal com rasgos em suas arestas de forma que cada face do dodecágono corresponde a um quadro de animação. Ao se girar o equipamento se tem a sensação de movimento. Daí que as animações clássicas se dão a 12 quadros por segundo, ou 15. Notemos que a televisão corre a 24 quadros e os monitores a 30 quadros. Já durante a época de ouro do desenho animado, com a invenção das trucas e com o advento do Technicolor os desenhos animado criaram mais força entre o público. A famosa técnica das células de animação sob fundo deslizante foi a grande revolução que até hoje se utiliza nas mais tecnológicas empreitadas de desenhos animados. 186 ACTIVE BRASIL

As células consistem em conjuntos de quadros de animação pintados sob uma película transparente de celulóide e ao serem fotografadas em fundo colorido em seqüência dão a sensação de um objeto ou personagem se deslocando do plano em duas dimensões. Estas técnicas serão usadas no processo de criação de animações em Flash já que o método de criação é semelhante no programa. Através de eventos de câmara podemos realizar quedas, pan e scan de detalhes, visualizações em primeiro plano dentre muitos outros. Estas técnicas eram feitas com a câmara pendurada a truca e movimentada de acordo com o Storyboard. O Storyboard é uma seqüência esquemática de desenhos, em formato quadrinhos que mostra como se desencadeará a animação. Nela contém os indicadores de som, eventos de câmara e fala por exemplo. É o modelo matriz para discussão e decisão do processo de produção do filme. Hoje em dia o Storyboard é indispensável nas grandes empresas de cinema e criação. É a forma mais correta de executar um estudo preliminar de animação e com certeza o método mais eficaz para resultados de primeiro nível. Exercícios: Crie seu próprio Storyboard. Use como tema uma animação inicial para seu site. Anotações 187 ACTIVE BRASIL

AULA 2 O PROGRAMA Objetivos: Inicialmente apresentaremos as funcionalidades e características da ferramenta, principalmente os conceitos de utilização da mesma, de maneira que o aluno aprenda a planejar e visualizar o desenvolvimento de seu projeto em Flash. Contexto: Flash é um software desenvolvido pela Macromedia que possibilita a criação de conteúdos multimídia de alta qualidade, interativos e animados, otimizados para a publicação na Internet. O Conteúdo produzido em Flash pode ser botões, banners, jogos, formulários, descanso de tela, interfaces de navegação, e sites propriamente ditos. Um dos primeiros passos no inicio de um projeto é a definição da tecnologia utilizada nas partes ou processos do projeto, a correta aplicação da ferramenta está intimamente ligada com o conhecimento de suas funcionalidades e aplicações, e a escolha da ferramenta certa para seu objetivo trará resultados mais proveitosos e profissionais. 188 ACTIVE BRASIL

Os arquivos criados no Flash guardam e apresentam as informações gráficas vetorialmente. Isto significa que as imagens são entendidas como formas e preenchimentos e o que é armazenado são seus parâmetros, diferente dos formatos bitmap (mapa de bits -.jpg,.gif,.bmp), normalmente utilizado para armazenamento de fotos e imagens. A imagem de um círculo, por exemplo, armazenaria vetorialmente apenas os valores referentes à posição e ao raio deste círculo. Uma imagem bitmap armazena a informação da cor de cada pixel que forma o desenho, o que geralmente ocupa muito mais espaço. Exemplo de Bitmap (mapa de bits) 189 ACTIVE BRASIL

Comparação entre uma imagem vetorizada e um Bitmap 190 ACTIVE BRASIL

Exemplo Gráfico Vetorial Os desenhos vetoriais podem ser redimensionados sem perda da qualidade de definição e sem diferença no tamanho do arquivo. O seu arquivo de trabalho no Flash, ou arquivo-projeto, é salvo com a extensão.fla, como o código fonte de um programa, e é nele que você vai desenvolver todo o conteúdo. Para a visualização e publicação deste conteúdo, ele precisa ser exportado para o formato.swf. 191 ACTIVE BRASIL

Interface Barra de Menu Barra de Ferramentas (desenho) Barra de Ferramentas (padrão) Timeline (linha do tempo) Library (Bliblioteca) Zoom Layers (camadas) Stage (Palco) Atalho para painéis de configuração Pannels (painéis de configuração) Conhecendo a Interface do Flash e seus elementos 192 ACTIVE BRASIL

Exercícios: Vamos começar nosso primeiro projeto utilizando o Flash e aproveitar para saber como se configura as principais características de seu Filme. Comece um novo Filme. Através do menu Modify>Movie (Modificar > Filme)(Ctrl+M) acesse as propriedades: Propriedades do filme Taxa de Quadros (Frame Rate): Define em quantos quadros por segundo seu filme será apresentado, alterando este valor é possível conseguir filmes mais detalhados (e demorados) ou filmes mais rápidos. Dimensões (Dimensions): A dimensão de seu Palco, o tamanho final visualizável de seu filme. Corresponder (Match): Impressora/Conteúdo (Printer/Contents) Atribui as dimensões de seu filme para se ajustar ao tamanho do papel configurado pela sua impressora, ou a menor área possível com relação ao conteúdo já disposto. Cor do fundo(background Color): Define a cor de fundo do Filme. Unidade de medida: Define a unidade de medida de trabalho, a mais cômoda costuma ser pixels. Explore as configurações disponíveis, são as definições de como seu filme será publicado e apresentado. 193 ACTIVE BRASIL

Ferramentas O Flash 5.0 dispõe das principais ferramentas para desenho vetorial. Barra de Ferramentas de Desenho 194 ACTIVE BRASIL

AULA 3 DESENHANDO Objetivos: Aprenda os principais métodos de desenho vetorial no FLASH, assim como editar desenhos, agrupar e desagrupar objetos. A técnica de desenho vetorial possui algumas características que com sua utilização se tornam familiar. Um desenho vetorial é constituído apenas de Linhas e Preenchimento (que podem ser nulos). As linhas quando sobrepostas se associam, já os preenchimentos possuem dois comportamentos diferentes, quando da mesma cor se associam, quando de cores distintas a área de baixo é subtraída. Com a resolução dos exercícios propostos, estas e outras características se tornarão mais claras. Aproveite seus estudos preliminares e seus Storyboards para produzir desenhos mais interessantes. Lembre-se que nunca se deve partir do desenho direto no computador. Isso abstrai sua criatividade e pode prejudicar seu trabalho. Sempre que possível utilize os Lessons (Lições) do próprio programa para obter maiores resultados. 195 ACTIVE BRASIL

Exercícios: 01) - Desenhe linhas, utilizando e explorando as configurações das ferramentas: o Linha o Caneta o Lápis (observe as opções de modo!) Opções do Lápis (modo da linha) 196 ACTIVE BRASIL

Faça modificações agora, utilizando as ferramentas: o Seta o Subseleção o Laço o Smooth (suavizar, alisar) o Straighten (regular) o Rotacionar o Redimensionar Opções da Seta: snap, smooth, straighten, rotate, scale Dica: Clicando em Window >Panel >Stroke (Janela > Painéis > Linha), você abre o painel específico de configuração de traços. 197 ACTIVE BRASIL

02) - Desenhe formas conhecidas (estrela, sol, etc..) explorando as ferramentas : o Oval o Retângulo o Pincel o Balde de Tinta o Borracha o Conta-gotas Opções de borracha Assim como no exercício anterior, procure utilizar as opções e os recursos de cada ferramenta: 198 ACTIVE BRASIL

Opções da Borracha: Observe também às configurações do Preenchimento. Opções de preenchimento Observe a janela de opções para encontrar mais opções de configuração para esta ferramenta: Janela de opções de Preenchimento 199 ACTIVE BRASIL

03) - Para que servem estas ferramentas? Você pode também importar imagens de outros arquivos e em outros formatos através do menu File>Import (Arquivo>Importar). Dentre os formatos disponíveis, é possível escolher entre importar o conteúdo de um outro arquivo flash, imagens vetoriais em outros formatos (freehand, ilustrator, wmf) e imagens bitmaps (.jpg,.gif,.bmp). Desenhando no Flash você deve ter reparado que muitas vezes é impossível fazer um desenho sem alterar ou confundirse com outro já pronto. Uma das maneira de começar a organizar seu conteúdo é agrupando as formas assim como nos softwares comuns de edição de imagens. Para tal, selecione as formas que pretende agrupar e clique em Modify > Group (Modificar > Agrupar) ou pressione Ctrl+G. Para editar figuras agrupadas, basta dar um duplo-clique sobre a imagem. 200 ACTIVE BRASIL

Assim como os principais programas de gráficos, o Flash também trabalha com layers (camadas), controle e operações com as camadas, que podem ser acessados pelos atalhos: Definição de opções de camada É fundamental que se esteja familiarizado a trabalhar com camadas, sua utilização facilita a criação e manutenção de seu projeto. 201 ACTIVE BRASIL

Exercícios: 04) - Comece um novo filme e desenhe uma casa, aplicando os conceitos desenvolvidos nos exercícios anteriores. - Desenhe um cenário de fundo para sua casa. - Salve seu exercício. Dicas: Procure identificar quais são os elementos de seu desenho e trabalhar cada um em uma camada diferente. Dê nomes sugestivos às camadas. É possível ocultar ou travar as camadas que desejar. Anotações 202 ACTIVE BRASIL

AULA 4 ANIMANDO Objetivos: Aprenda nesta aula os principais comandos para animação de objetos, símbolos e outras entidades. Símbolos Para começarmos a utilizar os recursos de animação do Flash, é preciso antes aprender a trabalhar com Símbolos. Para o Flash interagir com um elemento, é preciso que este elemento seja definido como um objeto, um Símbolo. Como objeto, os símbolos possuem propriedades, ações e comportamentos, que poder ser definidos e/ou alterados no decorrer da animação. Ao inserir um símbolo em uma animação, você está inserindo uma instância do objeto definido. É como se fosse uma cópia, porém com características diferentes. Instâncias de um mesmo símbolo possuem mesmo conteúdo, porém podem possuir propriedades e características diferentes. Tipos Existem três tipos possíveis de símbolos: Graphic, Movie Clip e Button (Gráfico, Clipe de Filme e Botão), que se diferenciam pelo comportamento e pelas propriedades que conheceremos mais adiante. Para transformar uma forma em um símbolo, selecione alguma forma em seu palco e clique em Insert>Convert to Symbol (Inserir>Converter para Símbolo), escolha o nome do objeto e o tipo do símbolo: Graphic. 203 ACTIVE BRASIL

Descrição dos tipos de Símbolos: Graphic(gráfico): Ideal para elementos que não interagem com o filme, a linha de tempo dos símbolos do tipo gráfico correm junto com a linha de tempo principal. Não realizam ação, nem recebem interação. Movie Clip(clipe de filme): Semelhante ao gráfico, porém possui linha de tempo independente, um clipe de filme se comporta como um arquivo flash a parte, pode executar ações e receber controle e interação externa. Button(botão): Um símbolo do tipo botão, responde a eventos do mouse(up, over, down, e hit) e executa ações. Conheceremos melhor as características de cada tipo de símbolo quando precisarmos aplicar os conceitos. Biblioteca Quando criamos um símbolo, este é arquivado na biblioteca do filme, a partir dela é possível gerenciar os objetos de seu filme, organizando, alterando referências e visualizando o conteúdo existente. Você acessa a biblioteca de seu filme através do menu Window>Library (Janela>Biblioteca), ou através do atalho Ctrl+L. Observe que as imagens importadas também aparecem na biblioteca. 204 ACTIVE BRASIL

Exercícios: 01) - Abra o arquivo biblioteca.fla e copie o símbolo Mouse para um novo filme. - Crie instâncias do Mouse, diferenciando uma de outra, aplique efeitos, redimensione. - Edite agora o conteúdo do símbolo e veja o que acontece. - Salve seu exercício. Dicas: Símbolo Mouse do tipo Gráfico - É possível arrastar símbolos de outras bibliotecas para seu filme. - É possível abrir um arquivo Flash, como uma biblioteca, experimente. - Procure o painel de Instâncias e o de efeitos. 205 ACTIVE BRASIL

Animações Dizemos que o Flash cria conteúdo de três dimensões, isso porque como já deve ter observado, temos o plano de desenho (2D) de comprimento e largura e tudo o que acontece neste plano acontece em função de um Tempo (a terceira dimensão), que é representado pela timeline ou linha-do-tempo: Quadro de tempo (timeline) Cada caixinha na timeline representa um frame (quadro) de sua animação, que roda por default a 12fps (frames-porsegundo). Quando iniciamos uma animação, esta contém apenas um frame, ou seja, ainda é estática. 206 ACTIVE BRASIL

Exercícios: 02) - Comece uma nova animação; - Insira o símbolo Biplane disponível em biblioteca.fla - Insira 30 quadros em seu filme. Observe a alteração na timeline: Quadros 0-30 preenchidos com entidades O Quadrado com a bolinha preta representa um Key Frame e indica os quadros-chave da animação, ou seja, onde existe mudança no conteúdo da mesma, o restante dos quadros cinzas são Frames(quadros), e indicam que o conteúdo do KeyFrame imediatamente anterior continua presente. O quadradinho no fim da animação indica o último quadro em que o conteúdo do KeyFrame aparece. É possível desenvolver basicamente dois tipos de animações no Flash, elas são explicadas a seguir: Frame by frame - É a mais simples e mais trabalhosa. Para criar animações quadro-a-quadro (como o próprio nome sugere), é necessário que se defina todos os quadros da animação, ou seja, todo quadro é um quadro chave (keyframe). 207 ACTIVE BRASIL

Exercícios: 03) - Faça uma animação quadro-a-quadro utilizando um símbolo ou uma forma livre.(sugestão: utilize o símbolo boneco do arquivo biblioteca.fla) Dicas: - Utilize Modify>Break Apart (Ctrl+B) para quebrar um símbolo em formas novamente. - Depois de pronto, explore as opções de Onion Skin Tweening (Animação Linear) - O Tweening é a principal forma de animação no Flash, é uma maneira mais fácil de se animar, basta definir o quadro chave inicial e o quadro chave final e comandar ao Flash que realize o tweening. O Flash detecta a mudança e tenta adivinhar qual era o movimento desejado. Existem duas formas de Tweening: Tweening Motion: Utilizado para animar símbolos. Para a correta utilização do Tweening motion é preciso alguns cuidados: - Somente Símbolos podem ser animados. - Somente um Símbolo por Keyframe/Layer deve ser utilizado. - O mesmo Símbolo deve estar presente no keyframe inicial e final. Tweening Shape: Transforma uma forma livre em outra, criando um efeito de morph. O procedimento de criação é semelhante ao do Tweening Motion, porém os quadros chaves só devem conter formas livres. 208 ACTIVE BRASIL

AULA 5 ANIMAÇÃO NA WEB Objetivos: Iremos discutir nesta aula a principal dúvida de um webdesigner antes de formatar seu modelo visual. Qual tecnologia empregar ao site, sendo pesada ou não, e sabendo que poderá ou não prejudicar a navegabilidade e a interatividade. Vale a pena investir pesado em imagens, sons e animações em sites de Internet? Contexto: Sabe-se muito bem que atualmente, em termos de mundo, as pessoas estão tendo melhor acessibilidade a Internet, e o melhor, com mais rapidez. Mesmo assim, boa parte da população que navega na Internet ainda costuma não ter paciência em esperar por dados e informações. Somente quem realmente procura algo maior e insistentemente (como arquivos de músicas e imagens) é que realmente estão predispostos a esperar. Mas para efeitos de marketing, seria muito interessante que este público que não gosta de esperar possa ter um atrativo maior para poder driblar as famosas barras de progresso. Uma delas, que é relativa a superestrutura de telecomunicações, são as bandas largas e conexões de rádio, DVI, cabo, DSL dentre outras. Mesmo assim não se pode dispensar o acesso discado, que hoje ainda toma boa parte dos usuários. Portanto a busca eterna por arquivos cada vez mais comprimidos e mais dinâmicos nos coloca na posição de decidir qual melhor tecnologia aplicar a determinado cliente. Ao se visitar sites de grandes designers e filmes por exemplo, a nível internacional, notamos um grande uso de tecnologias de animação em flash e scripts, que tornam a navegação uma experiência muito diferente e interessante, 209 ACTIVE BRASIL

divulgando ao mesmo tempo o nome e o produto. Já sites de esportes e portais de comunicação precisam ter um caminho inverso com o máximo de objetividade e clareza. Já descobrimos que a área de atuação do cliente é extremamente importante para o início de uma definição. Mas e quanto a questão do inovar a questão do ousar, isso conta como ponto positivo? Claro que sim, a questão é assumir os riscos que podem trazer ao retorno que se espera. Vejamos por exemplo casos de sites que mudaram completamente seu design em função de melhoria através de erros apontados. E casos também de total fracasso, oriundos de trabalhos experimentais mal planejados. Mas há quem diga também que o experimentalismo funciona. Existem milhares de endereços eletrônicos com material experimental, de péssima qualidade diga-se de passagem. Alguns desses projetos dão certo, principalmente os que tratam o lado entretenimento. Como exemplo podemos citar sites de charges e chacotas políticas, e os de humor. Note que nestes respectivos casos as tecnologias empregadas são flash e asp. Cada animação demora cerca de dois minutos para carregar em conexão regular. E mesmo assim o sucesso é enorme. Concluímos que não existe desperdício de bytes, e sim desperdício de informação. Se sua idéia é boa, é interessante, acredite nela, e utilize os meios mais inovadores de execução e apresentação do mesmo. Lembre-se que apesar de ainda estarmos engatinhando neste meio, existem milhões de pessoas como você pensando exatamente o mesmo. Anotações 210 ACTIVE BRASIL

AULA 6 CONTROLE DA CENA Objetivos: Após o conhecimento adquirido criação de símbolos, e animação simples por vários meios, como próximo passo veremos as formas de controle da animação, por meios de botões e controladores. Estes conhecimentos serão importantes nos conceitos de interatividade propostos na criação de um veículo multimídia para a Internet. Botões Os botões no Flash, assim como os gráficos, são símbolos que possuem características especiais. Um símbolo do tipo botão possui 3 estágios, Up (levantado), Over (em cima) e Down (abaixado), que representam os comportamentos possíveis de um botão com relação ao cursor do Mouse: - UP : botão solto - Over: cursor sobre o botão - Down: botão clicando; - e um quarto frame, Hit, que representa a área clicável do botão. Tela de definição de botões 211 ACTIVE BRASIL

Exercícios: 01) - Crie três botões distintos que sugiram a idéia de Play, Pause, e Volta, com todos os estados definidos. - Salve seu exercício. Anotações 212 ACTIVE BRASIL

Ações Básicas (controle de reprodução) Para começarmos a controlar nossa animação e até mesmo para que o uso de botões faça sentido, é hora de aprendermos como inserir Ações no Flash. Através de Ações é possível controlar a reprodução de um filme, planejar navegação de uma aplicação, configurar o modo de visualização, criar interações das mais diversas com o usuário, programar eventos e menus, definir variáveis, interagir com aplicativos externos e até mesmo gerar uma animação. É possível definir ações em Frames, em símbolos do tipo Movie Clip e em botões. Para visualizar as ações disponíveis, clique em Window>Actions (Janela>Ações ), ou clique no atalho no canto inferior direito da tela do Flash. Para Inserir uma ação, basta selecionar um objeto válido e a ação que deseja atribuir. Janela de Ações 213 ACTIVE BRASIL

Exercícios: 02) - Escolha uma das animações feitas - Insira os Botões criados no último exercício - Adicione as respectivas ações aos botões, de modo a criar um controle da animação. Anotações 214 ACTIVE BRASIL

AULA 7 MAIS INTERATIVIDADE Objetivos: Iremos aprimorar nossos conhecimentos de controles a apresentar algumas técnicas de colocação de sons e mais comandos interativos. Com isso as animações se tornam mais interessantes e chamativas. Sons O FLASH possui várias opções de sons. Podem-se observar essas opções no menu de som. caixa de seleção de sons 215 ACTIVE BRASIL

Pose-se utilizar formatos de som do tipo WAV ou mp3 como matrizes da animação. Para carregar um som pode-se utilizar o comando importar e selecionar os tipo de som disponíveis. Uma vez carregado o arquivo de som deve-se escolher um keyframe onde este som ficará. Ele pode receber efeitos (pan, fade, canais esquerdo e direito, dentre muitos, de forma a controlar volume e reverberação por exemplo. A caixa de seleção sync oferece os tipo de sincronização de som com a animação. Veja que esta sincronia não é 100% perfeita pois irá variar de performance de computadores. Os eventos Start e Stop são utilizados para eventos ao se iniciar ou parar um keyframe. Enquanto o comando stream utiliza os keyframes subseqüentes e a velocidade em quadros por segundo para tocar o som. Exercícios: 01) Carregue um arquivo de som. Coloque-o em um keyframe e utilize os diversos tipo de eventos para saber a diferença entre eles. 02) DESAFIO: Você consegue com tudo o que aprendeu fazer um player de CD??? Anotações 216 ACTIVE BRASIL

AULA 8 EXPORTANDO Objetivos: Finalmente, após todo o processo de criação e animação, resta o aprendizado de exportação para os diversos tipos de mídia disponíveis para o FLASH. Com isso, o usuário final poderá ver, na Internet por exemplo, o trabalho final através de um tipo de arquivo específico para a WEB. Publicação na Internet Agora que temos uma animação pronta e com controles no Flash, nos resta exportar, publicar e visualizar o resultado. Sua animação pode ser exportada em diversos formatos. O padrão para animações Flash é a exportação para o Flash Player e Flash Plug-in, nos quais a animação é compilada e recebe a extensão.swf e está pronta para ser distribuída ou inserida em uma página HTML. Clique em File>Export (Arquivo>exportar) para verificar os formatos de exportação do Flash. 217 ACTIVE BRASIL

Para publicar seu filme, clique em File>Publish Setings (Arquivo, Configurar Publicação) e escolha o formato desejado: Tela de publicação do FLASH Em seguida clique em Publish (Publicar). Os arquivos selecionados serão gerados no diretório em que a animação está salva. Abra e veja o resultado. 218 ACTIVE BRASIL

Otimizando o Projeto Para melhores resultados na Internet, existem algumas técnicas para otimizar o projeto exportado que garantem a eficiência de execução nos diversos tipos de computadores. Serão comentadas algumas dessas técnicas. Processadores O FLASH, por utilizar o cálculo vetorial como método de visualização de imagens, utiliza diversos cálculos de processador para executar as tarefas requisitadas. O que ocorre enfim é que diversas instruções passadas na animação podem gerar resultados diferenciados em computadores de maior ou menor porte de processamento. Para isso é importante verificar o framerate e a quantidade de animações simultâneas na tela Sons os sons aumentam e muito o tempo de carregamento do arquivo flash. Utilizando os controladores de ação podese criar telas de aguardo para entreter o usuário/espectador. No caso da Internet é extremamente recomendado utilizar a compressão mp3 para arquivos de som Multimídia por definição e normatização utilizamos a velocidade de 15 fps para as animações multimídias, isso garante performance de vídeo para placas sem processamentos como opengl ou GLIDE. Mas como utilizamos as regras de animação clássica para as animações criadas, 12fps é satisfatório. Mesmo assim para resultados visuais de melhor movimento e suavização, recomenda-se 30 fps Log de Informação O log de informação é o arquivo gerado pelo FLASH ao se exportar um filme. Com esse arquivo pode-se verificar o tamanho em bytes dos símbolos, fontes e imagens na animação. Isso ajuda bastante na interpretação do filme e ajuda na decisão de optar por remodelações e cortes na animação 219 ACTIVE BRASIL

Macetes Utilize o help do programa, suas lições e seu guia de referência para encontrar novidades e técnicas avançadas de animação. Utilize sempre um Storyboard para ter a referência exata do seu filme e como vai se comportar sua animação Através do Storyboard, defina seus símbolos e sua interatividade na cena, assim você já garante de antemão a eficiência e rapidez de animação. Através de outros programas de edição em vetor (CORELDraw e Adobe Ilustrator) você pode conseguir formas mais diferenciadas de desenho. Mas atenção, alguns preenchimentos e curvas não são 100% interpretados pelo programa. Anotações 220 ACTIVE BRASIL

AULA 9 APRESENTAÇÃO Objetivos: Após a criação de sua animação Flash, e inserida em sua webpage, faça uma convincente e criativa apresentação do seu trabalho, enfocando os pontos de maior destaque e as intenções de uso de cada tecnologia, conceituando a navegabilidade do site.. Anotações 221 ACTIVE BRASIL

AULA 10 APRESENTAÇÃO Objetivos: Após a criação de sua animação Flash, e inserida em sua webpage, faça uma convincente e criativa apresentação do seu trabalho, enfocando os pontos de maior destaque e as intenções de uso de cada tecnologia, conceituando a navegabilidade do site.. Anotações 222 ACTIVE BRASIL

BIBLIOGRAFIA Ferramentas Gráficas Adobe Pothoshop Básico CCUEC Unicamp Apostila de Internet e Arquitetura TCP/IP Volume 1-2ª edição Curso REDES DE COMPUTADORES - Internet e arquitetura TCP/IP - PUC Rio/CCE Icmc USP sc Tutorial de CSS - ricardo@iecentral.net Apostila Flash 5 Básico CCUEC Unicamp Guia do Currículo Macromedia Flash 223 ACTIVE BRASIL