Multimédia Flash CS3 - Introdução

Transcrição

1 Departamento de Engenharia Informática Multimédia Flash CS3 - Introdução Rui Pedro Paiva

2 Sumário Elementos de Apoio Introdução Breve Resumo Histórico Ambiente de Desenvolvimento Exploração Introdutória Flash CS3 Introdução 2

3 Elementos de Apoio ActionScript ActionScript 3.0 Bible, Braunstein, Mims & Noble Geral Tutoriais online, Mailing Lists, Suporte da Macromedia e Adobe Ambiente de Desenvolvimento Help do Macromedia Flash CS3 Flash CS3 Introdução 3

4 Introdução Objectivos Desenvolvimento de Aplicações Multimédia Criação, manipulação e controlo de conteúdos multimédia (animação, imagem, áudio, vídeo) Criação de interfaces mais apelativos Design, interactividade, Simplicidade de programação: linguagem de (muito) alto nível, orientada ao multimédia Expressão de mensagens Meio para expressão criativa, de formas inovadoras Melhoria da qualidade da experiência web Interactividade e dinamismo Flash CS3 Introdução 4

5 Introdução Porquê Flash? Outros sistemas autor: Director dominava no passado Lingo: Linguagem de alto nível com muitos recursos para criação de aplicações multimédia interactivas Tipicamente, CDs multmédia Mudança de ponto de referência: Web Aplicações multimédia Web e não standalone (CD) 2005: Adobe adquire a Macromedia Investe em novas versões do Flash mas tem alguma relutância em manter Director: update apenas em 2008 Flash CS3 Introdução 5

6 Introdução Porquê Flash? Web Interactividade Outras tecnologias (e.g., Javascript) com poucos recursos SMIL: linguagem markup para descrição de apresentações multimédia (focada em aspectos de sincronização de media) Director: aplicações pesadas para Web Flash files (swf): pequenos, leves, adequados para download; Flash Player pequeno (< 500KB) Consistência na visualização Formatação HTML não é 100% consistente de browser para browser Flash CS3 Introdução 6

7 Introdução Porquê Flash? (cont.) Web (cont.) Presença de Flash na Web realimentação positiva Utilização de Flash na Web é universal Junho de 2003: 97.4% de utilizadores Web têm o Flash Player instalado no seu computador Flash Player plug-in pré-instalado no IE e outros browsers Mais recentemente, aplicações cliente-servidor, multi-utilizador E.g., acesso a bases de dados remotas, acesso a web services Flash CS3 Introdução 7

8 Introdução Porquê Flash? (cont.) Desenvolvimento de jogos (standalone ou Web) ActionScript (linguagem de programação do Flash) superior relativamente ao Lingo a este respeito Double-buffering Simplicidade de programação e mais recursos actualmente (nas versões iniciais, o Lingo dispunha de muito mais recursos que o ActionScript) Aplicações leves Flash CS3 Introdução 8

9 Introdução Porquê Flash? (cont.) Aplicações Páginas web (ou front-ends, com ligação a BDs remotas) Entretenimento Jogos, animações, cartoons, Publicidade online Propriedades TV-like vs banner-like Ensino e formação Contextos de aprendizagem interactivos, dinâmicos, apelativos, simulações Expressão artística Flash CS3 Introdução 9

10 Introdução Limitações ActionScript reformulado significativamente de versão para versão Sintaxe, funcionalidades Ambiente de desenvolvimento: seleccionar a versão AS a usar Flash Video Compressão de vídeo com menor qualidade do que codecs standard (até Flash CS3) Mas, Flash CS3: FLV já suporta codec H.264, parte do standard MPEG-4 3D Animação 3D apenas frame-a-frame Motores de pesquisa Não conseguem indexar o conteúdo de flash movies Flash CS3 Introdução 10

11 Breve Resumo Histórico Actualização permanente nos últimos 9 anos ( ) Complexidade crescente de versão para versão, na direcção de uma ferramenta de autoria multimédia com uma linguagem de programação standardizada Versões iniciais: apenas alguns comandos simples para controlo da timeline Essencialmente, aplicação gráfica com possibilidade de animação Alguma interactividade para criação de jogos básicos e sites mais ricos do que HTML simples Flash CS3 Introdução 11

12 Breve Resumo Histórico Flash 1 (1996) Macromedia compra o software de animação vectorial FutureSplash Animator, e lança no final do ano a primeira versão do Flash Gráficos vectoriais para animação: muito mais pequenos que GIFs animados Animação frame-a-frame Flash 2 (1997) Suporte de som stereo, botões, tweening de cores, etc, Flash CS3 Introdução 12

13 Breve Resumo Histórico Flash 3 (1998) Interactividade básica: pequenos scripts Melhorias na animação: shape tweening Flash 4 (1999) Primeira versão com full scripting: Actions Caixas de diálogo específicas para cada acção (artist-friendly programação drag-and-drop) Motion tweening, streaming de mp3 Explosão de utilização: inclusão no Internet Explorer 5 Flash CS3 Introdução 13

14 Breve Resumo Histórico Flash 5: AS 1.0 (2000) Resposta ao impacto da inclusão de scripting no Flash 4 Primeira versão de ActionScript (família do JavaScript) Amadurecimento para linguagem OOP Adição de novas funcionalidades: e.g., dados XML, XMLSockets Flash 6 e MX (2002) Modelo de gestão de eventos, AMF, RTMP (streaming) Dynamic loading Melhor suporte para aplicações cliente-servidor: Flash Remoting MX, Flash Communication Server MX Flash CS3 Introdução 14

15 Breve Resumo Histórico Flash 7 e MX 2004: AS 2.0 (2003) Melhores práticas de programação Declaração explícita de variáveis Class-based syntax, mecanismos de derivação e interfaces Expansão: novas classes e métodos Possibilidade de autoria em forms em vez de timeline e keyframes Adição de debugging (breakpoints, step, ) Acesso a web services e ficheiros flv em tempo de execução Flash 8: Melhoria de AS 2.0 pela adição de novas classes (controlo de bitmaps em tempo-real, upload de ficheiros, filtros, ) e sintaxe de classes OOP mais flexível Flash CS3 Introdução 15

16 Breve Resumo Histórico Flash 9 (inicialmente 8.5): AS 3.0 (2006) Melhorias de desempenho (JIT compilation), modo full-screen, revisão do API Flash CS3 (2007): utilizado na disciplina Extensões do API do AS 3.0 FLV com suporte de H.264 Mudança de escala por hardware, suporte de IPv6, alterações de segurança, Integração com outros produtos da Adobe Melhores gráficos vectoriais Flash CS3 Introdução 16

17 Breve Resumo Histórico Flash CS4 (2008): versão 10 (Diesel) Manipulação básica de objectos 3D Cinemática inversa (inverse kinematics) Animação baseada em objectos Motor de texto melhorado Algumas extensões ao AS 3.0 Requer Flash Player 10 (Astro) Flash CS3 Introdução 17

18 Breve Resumo Histórico Em síntese Primeiros dias Ferramenta de animação baseada em gráficos vectoriais Actualmente Ambiente de design e desenvolvimento rico, flexível e integrado Manipulação de imagens bitmap, áudio, vídeo, streaming, programação, comunicação em tempo-real, integração de tecnologias, Flash CS3 Introdução 18

19 Ambiente de Desenvolvimento Flash CS3 Introdução 19

20 Ambiente de Desenvolvimento Adaptação de Flash MX 2004 Bible Flash CS3 Introdução 20

21 Ambiente de Desenvolvimento Metáfora do cinema e animação Produção de uma aplicação multimédia idêntica à realização de um filme ou animação terminologia em consonância Elementos principais Documento Flash Aplicação em edição (.fla) Flash movie: resultado da produção (.swf) Library Janela com os elementos que poderão ser incluídos no produto multimédia (membros do elenco ou actores: bitmaps, sons, vídeos, fontes, símbolos, componentes...) Symbol Objectos reutilizáveis Instâncias Ocorrências de símbolos no Stage Controláveis por ActionScript Flash CS3 Introdução 21

22 Ambiente de Desenvolvimento Elementos principais (cont.) Scenes Segmentos do Flash Movie Cada cena contém a sua timeline Utilizadas como forma de organização e modularização do Flash Movie Na prática, mais recomendável organizar o conteúdo por vários Flash Movies Stage Palco: espaço onde se situam os actores, i.e., os conteúdos da aplicação (imagens, vídeos, botões, ) Controla onde são colocados os componentes Flash CS3 Introdução 22

23 Ambiente de Desenvolvimento Elementos principais (cont.) Timeline Idêntico ao score dos animadores Janela onde se faz a montagem, i.e., onde se controla quando são apresentados os conteúdos (e também um pouco como) Contém layers Layers (camadas) Componentes que contêm efectivamente o conteúdo a apresentar a cada momento Semelhantes a folhas transparentes de acetato, empilhadas umas sobre as outras Organização em pilha: layer mais acima fica à frente de todas as outras Utilizadas para organização dos conteúdos, i.e., componentes distintos em layers diferentes, componentes afins na mesma layer (semelhante ao Photoshop) Flash CS3 Introdução 23

24 Ambiente de Desenvolvimento Elementos principais (cont.) Assets ou Elementos Items colocados em cada layer (bitmaps, texto, ) Frames (quadros) Definem o conteúdo do filme em cada instante Dois tipos essenciais Frames estáticas Repetem o conteúdo da frame anterior Keyframes Denotam modificação de conteúdo, quer para animação frame-a-frame, quer para animação tweening Conteúdo das frames entre duas keyframes é animado automaticamente, e.g., interpolação) Playhead: indica a frame actual Flash CS3 Introdução 24

25 Ambiente de Desenvolvimento Elementos principais (cont.) Código ActionScript Possibilita o controlo e interacção entre os elementos anteriores, interacção com o utilizador, fluxo de informação entre elementos, gestão da sequência temporal, Controla como são apresentados os conteúdos Flash CS3 Introdução 25

26 Ambiente de Desenvolvimento Visualização do Flash Movie Plug-in do Flash Player (FP) num web browser Aplicação stand-alone: projector O FP é integrado no executável Forma frequente quando o meio de distribuição é fixo, e.g., CD, DVD QuickTime (MOV) ou Video for Windows (AVI) Animações ou vídeos criados em Flash Exportado como conjunto de imagens GIF, PNG, JPG Flash CS3 Introdução 26

27 Ambiente de Desenvolvimento Tipos de Ficheiros Documentos Flash:.fla Desenvolvimento de flash movies Flash movies:.swf ShockWave Flash Ficheiros ActionScript externos:.as Flash Debug File:.swd Ficheiro criado pela ferramenta de autoria em acções de debugging (depuração, correcção de erros) Flash Component Files:.swc E.g., ComboBox, List, Button, UI, Flash Video File:.flv Flash Project File:.flp *** Flash CS3 Introdução 27

28 Flash Movie Simples 1. Criar ficheiro novo File New General: ficheiro.fla novo Template: utilização de modelo de base Flash CS3 Introdução 28

29 2. Definir propriedades do documento Property Inspector Se não estiver visível: Window Properties Especifica parâmetros de todos os objectos, incluíndo o stage E.g., dimensão, cor Context-dependent Alternativamente: Modify Document Nota: janelas internas do Flash podem estar acopladas (docked) ou soltas (undocked) Flash CS3 Introdução 29

30 3. Adicionar conteúdos à Library Importação de ficheiros externos: jpg, mpeg, mp3, File Import Import to Library Criação de gráficos vectoriais ou texto internamente no Flash Tools Adição de componentes UI Window Components List, ComboBox, ProgressBar, Flash CS3 Introdução 30

31 4. Adicionar conteúdos ao Stage e Timeline 4.1. Arrastar da library para o Stage Coloca objecto na Layer activa e no bloco de frames activas Timeline inicial: - 1 layer - 1 Blank keyframe (keyframe sem conteúdo círculo branco) Timeline alterada: - 1 layer - 1 keyframe (com conteúdo círculo preto) Flash CS3 Introdução 31

32 4. Adicionar conteúdos ao Stage e Timeline (cont.) 4.2. Organizar Layers Timeline organizada por layers (semelhante ao Photoshop) Layer mais acima objectos no foreground Elementos colocados em cada layer mantêm-se no stage até à última frame em que estejam definidos Acções sempre realizadas na layer activa ícone com lápis A cabeça de reprodução (playback head) faz o ciclo (loop) automaticamente Flash CS3 Introdução 32

33 4. Adicionar conteúdos ao Stage e Timeline (cont.) 4.2. Organizar layers (cont.) Número máximo: limitado apenas pela memória do computador Não aumenta a dimensão do swf final Podem ser organizadas por pastas Layers especiais Guides Conteúdo não aparece: informação de suporte, e.g., marcador de zona a utilizar Masks Revelam selectivamente partes de layers mascaradas Controlo Esconder/visualizar (olho) Trancar/destrancar (cadeado) Não permite alterar Visualizar outlines (quadrado) Flash CS3 Introdução 33

34 4. Adicionar conteúdos ao Stage e Timeline (cont.) 4.3. Criar Line Art Com base na janela de ferramentas (Window Tools) Formas geométricas simples, texto, cores, Não aparecem na library Flash CS3 Introdução 34

35 4. Adicionar conteúdos ao Stage e Timeline (cont.) 4.3. Criar Line Art (cont.) Criação de gradientes: Window Color Tools: Gradient Transform Flash CS3 Introdução 35

36 4. Adicionar conteúdos ao Stage e Timeline (cont.) 4.3. Criar Line Art (cont.) Duplicar: Edit Duplicate (ou CRTL+D) Apagar DEL Transformações: Modify Transform (Envelope, Distort, ) Flash CS3 Introdução 36

37 4. Adicionar conteúdos ao Stage e Timeline (cont.) 4.3. Criar Line Art (cont.) Máscaras Revelam selectivamente partes das layers abaixo Right-click sobre o nome da layer Mask Flash CS3 Introdução 37

38 4. Adicionar conteúdos ao Stage e Timeline (cont.) 4.4. Definir durações Insert Frame na frame desejada 4.4. Inserir objectos noutros instantes temporais Insert Blank Keyframe Flash CS3 Introdução 38

39 5. Converter objectos para símbolos Botão direito do rato Convert to Symbol Ou Modify Convert to S Símbolo adicionado à library Se Movie clip ou Button Dar nome à instância Sufixo adequado: _mc, _btn,... Contexto para AS Flash CS3 Introdução 39

40 5. Converter objectos para símbolos (cont.) Algumas características de símbolos Base para interactividade Mais funcionalidades do que em Shapes E.g., transparência Símbolo alterado todas as instâncias são alteradas É possível ter símbolos dentro de símbolos, dentro de símbolos,, cada um na sua timeline (associada ou não à timeline mãe) Tipos de símbolos Button Criação de botões com efeitos especiais Animação em 4 estados (up, over, down, hit) Timeline individual e nomes às instâncias Flash CS3 Introdução 40

41 5. Converter objectos para símbolos (cont.) Tipos de símbolos (cont.) Graphic Adequado para manipulação de imagens estáticas Animações associadas à timeline principal Timeline principal só tem uma frame só se vê um quadro da animação Não se pode atribuir nomes às instâncias Não pode ser referenciado por ActionScript Movie Clip Análogo a documento dentro do documento: timeline independente da timeline principal Pode-se atribuir um nome à instância Pode ser referenciado por ActionScript Flash CS3 Introdução 41

42 6. Animação: Tweening (in between) Selecionar símbolo (Movie Clip) Converter para MovieClip, se não o for Editar o símbolo (duplo clique) Só se se pretender realizar a animação dentro do símbolo Timeline interna Flash CS3 Introdução 42

43 6. Animação: Tweening (cont.) Na timeline interna, converter o objecto para símbolo (novamente, para poder definir transparência) Definir a segunda keyframe Clicar numa das frames entre as duas keyframes e definir Tween Motion Em cada keyframe, seleccionar o objecto no stage e Definir posição, dimensão, cor, Voltar à timeline principal Flash CS3 Introdução 43

44 6. Animação: Tweening (cont.) Morphing Associar uma forma a uma keyframe e outra forma a outra keyframe Definir Tween Shape Flash CS3 Introdução 44

45 6. Animação: Tweening (cont.) Shape tween vs Motion tween Shape Tween Alterações de forma Só funciona sobre Shapes Motion Tween Movimentos, mudanças de escala, transparência, etc., sem mudança da forma essencial Só funciona sobre símbolos ou grupos (neste caso, o elemento gráfico é convertido duas vezes para MovieClip) A maioria das vezes, pode-se criar o mesmo efeito com qualquer uma delas Diferenças: e.g., transparência (Shape não suporta) Outra forma de executar Insert Timeline Effects Transform/Transition Flash CS3 Introdução 45

46 7. Criar Botões Button Símbolo cuja timeline contém 4 frames especiais, as quais denotam diferentes estados: Up Botão esquerdo do rato é libertado Over Ponteiro do rato sobre o símbolo, sem botões premidos Down Botão esquerdo do rato é premido Hit Permite definir a zona onde se aceitam clicks, e.g., em texto tipicamente só as letras são clicáveis, não o fundo Controlo das acções despoletadas ActionScript Flash CS3 Introdução 46

47 7. Criar Botões (cont.) Método geral i. Definir componente de base Criar line art, usar imagem, texto, ii. Converter para símbolo iii. Dar nome à instância: nome_btn iv. Entrar para a timeline interna e editar estados Em cada estado é possível definir diferentes comportamentos: animações, mudanças de cor, textos que aparecem, etc. Inserção de keyframes em cada estado a personalizar Flash CS3 Introdução 47

48 7. Criar Botões (cont.) Inserir keyframes em cada estado Para controlar efeitos separadamente (som, efeitos visuais, surgimento de elementos, etc.) Flash CS3 Introdução 48

49 7. Criar Botões (cont.) Associar código ActionScript à frame desejada (Window Actions) Numa layer separada, com nome Action (por convenção) Testar botão em modo de edição Control Enable Simple Buttons Flash CS3 Introdução 49

50 7. Criar Botões (cont.) Outras possibilidades Utilizar componentes pré-definidos: Window Common Libraries Buttons Hit Area Na frame Hit, adicionar uma forma, a qual define a área clicável União da zona original com a nova Cor não interessa, apenas a área Útil quando caixas de texto são transformadas em botões Flash CS3 Introdução 50

51 8. Adicionar Texto Seleccionar a Text Tool no Tools Panel: Definir com o rato a zona do stage onde a caixa de texto ficará e mensagem Caixa de texto com largura fixa (quadrado no canto) Expande na vertical Caixa de texto com largura fixa (círculo no canto) Expande na horizontal Comutar: duplo clique no canto ou alargar caixa Definir propriedades do texto Tipo, fonte, tamanho, cor, Flash CS3 Introdução 51

52 8. Adicionar Texto (cont.) Tipos de texto (cont.) Static Não pode ser alterado dinamicamente Não é instanciado Pode-se associar a um URL Flash CS3 Introdução 52

53 8. Adicionar Texto (cont.) Tipos de texto (cont.) Dynamic Pode ser alterado dinamicamente Possível definir instância (sufixo _txt) Pode ser utilizado para carregar conteúdo de ficheiro de texto Flash CS3 Introdução 53

54 8. Adicionar Texto (cont.) Tipos de texto (cont.) Input Entrada de dados (single line, multi line, password) Limitador de caracteres Também instanciado Flash CS3 Introdução 54

55 9. Visualizar Efeitos Gerar um preview (CTRL +ENTER ou Control Test Movie) Flash Movie criado de acordo com os parâmetros em File Publish Settings Criar Flash Movie Também via File Export Flash CS3 Introdução 55

56 9. Visualizar Efeitos (cont.) Flash CS3 Introdução 56

57 Outras Possibilidades Básicas Efeitos especiais (animações, etc.) Insert Timeline Effects (Effects, Transform / Transition) Alinhamento de elementos no stage Window Align Visualizar a estrutura do documento Window Movie Explorer Flash CS3 Introdução 57