MM 02 - Flash CS3 - Intro - Planeamento Estratégico de Sistemas de ... 02-FlashCS3-Intro.pdf · Criação de interfaces mais apelativos ... Jogos, animações, cartoons, … Publicidade

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


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


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


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


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


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


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


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


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


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 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 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 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 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 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 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)



  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, …


Ambiente de Desenvolvimento



© Adaptação de “Flash MX 2004 Bible”



  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



  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



  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)



  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



  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



  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



  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 ***


Exploração Introdutória

  Flash Movie Simples

  1. Criar ficheiro novo   File New

  General: ficheiro .fla novo

  Template: utilização de modelo de base



  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)



  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, …



  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)



  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



  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)



  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



  4. Adicionar conteúdos ao Stage e Timeline (cont.)   4.3. Criar Line Art (cont.)

  Criação de gradientes: Window Color   Tools: Gradient Transform




  Duplicar: Edit Duplicate (ou CRTL+D)   Apagar DEL

  Transformações: Modify Transform (Envelope, Distort, …)




  Máscaras   Revelam selectivamente partes das layers abaixo   Right-click sobre o nome da layer Mask



  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



  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



  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



  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



  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



  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


  6. Animação: Tweening (cont.)   Morphing

  Associar uma forma a uma keyframe e outra forma a outra keyframe   Definir Tween Shape




  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



  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



  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



  7. Criar Botões (cont.)   Inserir keyframes em cada

estado   Para controlar efeitos

separadamente (som, efeitos visuais, surgimento de elementos, etc.)



  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



  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



  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, …



  8. Adicionar Texto (cont.)   Tipos de texto (cont.)

  Static   Não pode ser alterado dinamicamente   Não é instanciado   Pode-se associar a um URL




  Dynamic   Pode ser alterado dinamicamente   Possível definir instância (sufixo _txt)   Pode ser utilizado para carregar conteúdo de ficheiro de

texto




  Input   Entrada de dados (single line, multi line, password)   Limitador de caracteres   Também instanciado



  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



  9. Visualizar Efeitos (cont.)



  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   …

Documents

MM 02 - Flash CS3 - Intro - Planeamento Estratégico de Sistemas de ... 02-FlashCS3-Intro.pdf · Criação de interfaces mais apelativos ... Jogos, animações, cartoons, … Publicidade