Upload
doankien
View
228
Download
0
Embed Size (px)
Citation preview
Departamento de Engenharia Informática
Multimédia Flash CS3 - Introdução
Rui Pedro Paiva
Flash CS3 – Introdução 2
Sumário
Elementos de Apoio
Introdução
Breve Resumo Histórico
Ambiente de Desenvolvimento
Exploração Introdutória
Flash CS3 – Introdução 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 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 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 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 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 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 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 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 11
Breve Resumo Histórico
Actualização permanente nos últimos 9 anos (2000-2009) 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 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 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 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 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 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 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 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 19
Ambiente de Desenvolvimento
Flash CS3 – Introdução 20
Ambiente de Desenvolvimento
© Adaptação de “Flash MX 2004 Bible”
Flash CS3 – Introdução 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 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 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 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 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 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 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 28
Exploração Introdutória
Flash Movie Simples
1. Criar ficheiro novo File New
General: ficheiro .fla novo
Template: utilização de modelo de base
Flash CS3 – Introdução 29
Exploração Introdutória
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 30
Exploração Introdutória
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 31
Exploração Introdutória
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 32
Exploração Introdutória
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 33
Exploração Introdutória
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 34
Exploração Introdutória
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 35
Exploração Introdutória
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 36
Exploração Introdutória
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 37
Exploração Introdutória
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 38
Exploração Introdutória
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 39
Exploração Introdutória
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 40
Exploração Introdutória
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 41
Exploração Introdutória
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 42
Exploração Introdutória
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 43
Exploração Introdutória
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
Exploração Introdutória
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
Flash CS3 – Introdução 45
Exploração Introdutória
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 46
Exploração Introdutória
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 47
Exploração Introdutória
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 48
Exploração Introdutória
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 49
Exploração Introdutória
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 50
Exploração Introdutória
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 51
Exploração Introdutória
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 52
Exploração Introdutória
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 53
Exploração Introdutória
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 54
Exploração Introdutória
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 55
Exploração Introdutória
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 56
Exploração Introdutória
9. Visualizar Efeitos (cont.)
Flash CS3 – Introdução 57
Exploração Introdutória
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 …