Macromedia Flash 8: Rich Content Creation

Transcrição

Macromedia Flash 8:
Rich Content Creation
Versão em português do Brasil
Outubro de 2005
©2005 Macromedia, Inc.
Marcas comerciais
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate,
Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp,
Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder,
Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave,
SoundEdit, Studio MX, UltraDev e WebHelp são marcas registradas ou marcas comerciais da Macromedia, Inc.
e podem estar registradas nos Estados Unidos ou em outras jurisdições, inclusive internacionalmente. Outros nomes
de produtos, logotipos, designs, títulos, palavras ou expressões mencionados nesta publicação podem ser marcas
comerciais, marcas de serviço ou nomes comerciais da Macromedia, Inc. ou de outras entidades e podem estar
registrados em determinadas jurisdições, inclusive internacionalmente.
Informações de terceiros
Este guia contém links para sites de terceiros que não estão sob o controle da Macromedia. A Macromedia não é
responsável pelo conteúdo de nenhum site vinculado. Se acessar um dos sites de terceiros mencionados neste guia,
você estará assumindo os riscos inerentes. A Macromedia fornece esses links apenas como uma conveniência, e a
inclusão do link não significa que a Macromedia apóia ou aceita qualquer responsabilidade pelo conteúdo apresentado
nos sites de terceiros.
Copyright © 1997-2005 Macromedia, Inc.
Todos os direitos reservados.
O software descrito neste manual é fornecido pela Macromedia, Inc. sob um contrato da Macromedia, Inc. O software
só pode ser usado de acordo com os termos do contrato. Nenhuma parte desta publicação pode ser reproduzida,
transmitida ou traduzida de qualquer forma ou por quaisquer meios, quer sejam eletrônicos, mecânicos, fotocópias,
manuais, óticos, gravações ou outros, fora do contrato de licença que acompanha esse material, sem a permissão prévia
por escrito da Macromedia, Inc.
A Macromedia, Inc. reivindica direitos autorais deste programa e desta documentação como trabalho não publicado,
cujas revisões foram inicialmente licenciadas na data indicada na observação anterior. A reivindicação de direitos
autorais não implica a renúncia de outros direitos da Macromedia, Inc. e de suas subsidiárias.
As informações contidas neste manual podem ser alteradas sem aviso prévio e não representam um compromisso por
parte da Macromedia, Inc.
AVISO DE RESPONSABILIDADE
As informações contidas neste material de treinamento são distribuídas NO ESTADO EM QUE SE ENCONTRAM ,
sem nenhum tipo de garantia, expressa ou implícita. Embora todas as precauções tenham sido tomadas na preparação
deste material, nem a Macromedia Inc. nem seus licenciantes serão responsabilizados por nenhuma pessoa ou entidade
a respeito de responsabilidade, perda ou dano causado, ou alegadamente causado, direta ou indiretamente pelas
instruções contidas neste material ou pelos produtos de software ou hardware de computador aqui descritos.
Primeira edição: Outubro de 2005
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
Guia do aluno
Unidade 1: Introdução ao Macromedia Flash 8: Rich Content Creation
1-1
Sobre o curso ...............................................................................................................................1-2
Formato do curso .........................................................................................................................1-3
Objetivos do curso .......................................................................................................................1-4
Pré-requisitos do curso ................................................................................................................1-4
Estrutura do curso ........................................................................................................................1-4
Introdução a aplicativos Rich Internet .........................................................................................1-5
HTML...................................................................................................................................1-5
Servidores de aplicativo........................................................................................................1-5
Aplicativos Rich Internet......................................................................................................1-6
Unidade 2: Trabalhando no Flash
2-1
Introdução ao Macromedia Flash 8..............................................................................................2-2
Software Flash ......................................................................................................................2-2
Documentos do Flash...................................................................................................................2-6
Tipos de arquivo do Flash ....................................................................................................2-6
Criando um novo documento.......................................................................................................2-7
Definindo preferências.................................................................................................................2-8
Desfazer em nível de documento versus em nível de objeto ................................................2-8
Adicionando metadados........................................................................................................2-11
Menu principal......................................................................................................................2-12
Stage .....................................................................................................................................2-12
Painel Timeline.....................................................................................................................2-12
Painéis...................................................................................................................................2-13
Painéis comuns .....................................................................................................................2-15
Desenvolvendo documentos do Flash..........................................................................................2-24
Criando documentos do Flash ..............................................................................................2-24
Adicionando propriedades....................................................................................................2-24
Publicando documentos ...............................................................................................................2-25
Alterando as configurações de publicação ...........................................................................2-26
Usando Control  Test Movie.............................................................................................2-28
Usando File  Publish Preview...........................................................................................2-29
Unidade 3: Importando e criando gráficos
3-1
Tipos de imagens .........................................................................................................................3-2
Imagens de bitmap................................................................................................................3-2
Gráficos vetoriais..................................................................................................................3-3
Adicionando recursos gráficos e de imagem ...............................................................................3-4
Importando imagens .............................................................................................................3-4
Posicionando imagens ..........................................................................................................3-4
Usando camadas ..........................................................................................................................3-7
Trabalhando com camadas ...................................................................................................3-8
i
Criando gráficos vetoriais no Flash .............................................................................................3-12
Usando o painel Tools .........................................................................................................3-12
Traço vs. preenchimento.......................................................................................................3-13
O modelo de desenho de objetos .................................................................................................3-16
Usando as ferramentas de desenho natural do Flash ............................................................3-17
Usando guias e réguas ..........................................................................................................3-18
Usando as ferramentas de cor do Flash........................................................................................3-22
Criando gradientes ................................................................................................................3-23
Transformando gradientes ....................................................................................................3-24
Trabalhando com amostras de cores .....................................................................................3-25
Usando símbolos de gráficos .......................................................................................................3-30
Símbolos ...............................................................................................................................3-30
Símbolos de gráficos.............................................................................................................3-30
A biblioteca...........................................................................................................................3-31
Criando símbolos de gráficos e armazenando-os na biblioteca ............................................3-32
Instâncias ..............................................................................................................................3-32
Modos de edição de símbolos...............................................................................................3-33
Criando efeitos de máscara ..........................................................................................................3-37
Criando máscaras..................................................................................................................3-37
Unidade 4: Usando texto com eficiência
4-1
Trabalhando com recursos de texto .............................................................................................4-2
Criando recursos de texto .....................................................................................................4-2
Tipo de campo de texto.........................................................................................................4-3
Usando texto estático ...................................................................................................................4-4
Adicionando texto estático ...................................................................................................4-4
Vantagens e desvantagens do campo de texto estático .........................................................4-4
Alterando o método de processamento de fonte ...................................................................4-5
Criando formulários no Flash ......................................................................................................4-9
Atribuindo tipos de texto a campos do formulário ...............................................................4-9
Usando texto de entrada...............................................................................................................4-10
Texto de entrada ...................................................................................................................4-10
Incorporando um contorno de fonte .....................................................................................4-10
Atribuindo tipo de linha........................................................................................................4-10
Exibindo a borda de texto .....................................................................................................4-11
Adicionando um nome de instância......................................................................................4-11
Adicionando efeitos de filtro a campos de texto..........................................................................4-16
Adicionando um filtro de sombreamento .............................................................................4-16
Usando práticas recomendadas para filtro ............................................................................4-16
Questões de fontes .......................................................................................................................4-18
Fontes de dispositivo e incorporadas ....................................................................................4-18
Mapeamento de fontes em arquivos FLA.............................................................................4-20
Texto sem serrilhado.............................................................................................................4-20
Unidade 5: Criando animações
5-1
Apresentando a Animação ...........................................................................................................5-2
Timeline................................................................................................................................5-2
Criando animações.......................................................................................................................5-3
Interpolação de movimento ..................................................................................................5-3
Utilizar símbolos ..................................................................................................................5-3
Utilizar quadros-chave..........................................................................................................5-4
ii
Guia do aluno
Criando uma animação de interpolação de movimento ...............................................................5-7
Erros da interpolação de movimento ....................................................................................5-8
Criando uma máscara animada ....................................................................................................5-9
Usando um Motion Guide............................................................................................................5-12
Criar um guia de movimento na camada Motion Guide.......................................................5-13
Utilizando a interpolação de forma..............................................................................................5-16
Exemplo de uso ....................................................................................................................5-16
Utilizar marcadores de transparência....................................................................................5-17
Criar interpolações de forma ................................................................................................5-18
Práticas recomendadas para interpolação de forma ..............................................................5-18
Unidade 6: Adicionando o ActionScript com Script Assist
6-1
Introduzindo o Script Assist ........................................................................................................6-2
Usando o ActionScript..........................................................................................................6-2
Usando o Script Assist para adicionar o ActionScript.................................................................6-3
Adicionando ações à linha de tempo ...........................................................................................6-4
Interrompendo a repetição de uma linha de tempo...............................................................6-4
Criando botões .............................................................................................................................6-6
Usando instâncias de botão...................................................................................................6-6
Usando as linhas de tempo do botão.....................................................................................6-7
Estados do botão...................................................................................................................6-7
Exemplo de uso ....................................................................................................................6-10
Noções básicas sobre botões invisíveis ................................................................................6-10
Adicionando ações a botões.........................................................................................................6-14
Criando sistemas de navegação ...................................................................................................6-15
Adicionando clipes de filma a um documento......................................................................6-15
Noções básicas sobre o símbolo do clipe de filme ...............................................................6-15
Usando clipes de filme.................................................................................................................6-17
Adicionar propriedades diretamente a uma instância de clipe de filme................................6-17
Carregando arquivos SWF independentes em clipes de filme vazios ..................................6-17
Usando clipes de filme como recipientes..............................................................................6-18
Usando a ação loadMovie............................................................................................................6-19
Usando a ação loadMovie para criar sistemas de navegação ...............................................6-19
Unidade 7: Usando clipes de filme
7-1
Trabalhando com clipes de filme .................................................................................................7-2
Criando clipes de filmes ..............................................................................................................7-3
Adicionar propriedades a uma Timeline do clipe de filme...................................................7-3
Editar Timelines do clipe de filme........................................................................................7-4
Utilizando clipes de filmes para criar estados diferentes .............................................................7-9
Criar estados visuais diferentes ............................................................................................7-9
Exemplo de uso ....................................................................................................................7-10
Utilizando eventos para controlar o estado visual .......................................................................7-14
Adicionar a ação goto com o Script Assist ...........................................................................7-15
Utilizando comportamentos .........................................................................................................7-19
Adicionar comportamentos...................................................................................................7-19
Utilizar o comportamento Goto and Stop at Frame or Label................................................7-20
Alterar o disparador de eventos ............................................................................................7-21
iii
Unidade 8: Adicionando som e vídeo
8-1
Trabalhando com som e vídeo .....................................................................................................8-2
Trabalhando com som..................................................................................................................8-3
Importando arquivos de som........................................................................................................8-4
Alterando propriedades de som ...................................................................................................8-6
Adicionando som a um documento do Flash ...............................................................................8-7
Adicionando uma instância de som ao Stage........................................................................8-7
Controlando o som na Timeline...................................................................................................8-8
Definindo tipos .....................................................................................................................8-8
Incorporando vídeo .....................................................................................................................8-15
Incorporando vídeo diretamente em um documento do Flash ..............................................8-15
Importando vídeo..................................................................................................................8-16
Usando o componente FLVPlayback...........................................................................................8-21
Adicionando mídia de fluxo ao componente FLVPlayback .................................................8-22
Unidade 9: Publicando documentos do Flash
9-1
Publicando na Web ......................................................................................................................9-2
Configurações de publicação .......................................................................................................9-3
Atribuindo configurações de publicação ..............................................................................9-3
Publicando em formatos de arquivos diferentes ..........................................................................9-4
Selecionar formatos de arquivo ............................................................................................9-5
Salvando configurações de publicação ........................................................................................9-8
Especificando um SWF padrão a ser carregado...........................................................................9-12
Adicionando a detecção da versão do Flash ................................................................................9-13
O que afeta o tamanho do documento?........................................................................................9-16
Técnicas para otimização de documentos Flash ..........................................................................9-17
Usar símbolos .......................................................................................................................9-17
Otimizar formas ....................................................................................................................9-18
Utilizar fontes de dispositivo ................................................................................................9-18
Carregar SWFs relevantes ao conteúdo externo ...................................................................9-19
Usar som com critério...........................................................................................................9-19
Usar vídeo com sabedoria.....................................................................................................9-19
Otimizar bitmaps...................................................................................................................9-19
Apêndice A: Guia de configuração do aluno
A-1
Requisitos de hardware ...............................................................................................................A-1
Requisitos de software ................................................................................................................A-1
Instalação e teste de software ......................................................................................................A-2
Apêndice B: Recursos adicionais
B-1
Sites da Web ................................................................................................................................B-1
Documentação ............................................................................................................................B-1
Grupos de usuários .....................................................................................................................B-1
Apêndice C: Atalhos de teclado
C-1
Atalhos de teclado .......................................................................................................................C-1
iv
Unidade 1:
Introdução ao Macromedia Flash 8:
Rich Content Creation
Objetivos da unidade
Após concluir esta unidade, você deverá ser capaz de:
•
Descrever o formato do curso.
•
Listar os pré-requisitos do curso.
•
Descrever os objetivos e tópicos do curso.
•
Compreender o site que construirá.
Tópicos da unidade
•
Sobre o curso
•
Formato do curso
•
Objetivos do curso
•
Pré-requisitos do curso
•
Estrutura do curso
•
Introdução a aplicativos Rich Internet
1-1
Sobre o curso
O Macromedia Flash 8: Rich Content Creation fornece a usuários novatos
do Macromedia Flash 8 as instruções práticas que os ajudarão a se
tornarem competentes ao criar e publicar documentos do Flash na web.
Ao fim do curso, alunos devem ser capazes de usar o que aprenderam para
construir experiências de usuário ricas, como interfaces de usuário (UIs),
sistemas de navegação e sites da Web completos que incluam imagens,
textos, animações, sons e vídeos.
Assim como existem metodologias para desenvolvimento de aplicativos,
existem também metodologias para ensino e aprendizado. A metodologia
usada neste curso é o aprendizado master. O aprendizado master inclui:
1-2
Objetivos de aprendizado
claramente definidos
Cada unidade neste curso começa
com os objetivos para a unidade.
Apresentação de material para dar
suporte aos objetivos de
aprendizado
O instrutor deste curso usa slides,
o quadro de comunicações e outros
meios para esclarecer os conceitos.
Modelo de uso de novos materiais
Os instrutores deste curso
demonstram o uso do produto.
Resposta dos estudantes
Os instrutores deste curso testam a
compreensão dos estudantes
durante e ao final de cada unidade.
Exercícios orientados
Cada unidade neste curso tem uma
série de procedimentos a serem
seguidos junto com o seu instrutor
para que você se familiarize com as
novas habilidades.
Exercícios independentes
Cada unidade neste curso é
concluída com um laboratório
prático que permite que você
pratique sozinho um conjunto de
novas habilidades em contexto.
Fechamento e teste
Após cada laboratório neste curso,
será feita uma revisão do que foi
aprendido e haverá uma discussão
sobre os possíveis problemas
encontrados durante a prática das
novas habilidades.
Introdução ao Macromedia Flash 8: Rich Content Creation
Formato do curso
Este curso é dividido em 9 unidades que, em sua maioria, apresentam
novas informações e contêm demonstrações, procedimentos e um
laboratório. Ao final de cada unidade haverá um resumo e uma
recapitulação para testar seu conhecimento do conteúdo da unidade.
Os seguintes ícones são usados ao longo do guia.
Conceitos introduzem novas informações.
Demonstrações ilustram novos conceitos.
Os procedimentos guiam você com a ajuda do instrutor.
Laboratórios permitem que você pratique novas habilidades por conta
própria.
Resumos fornecem uma breve sinopse do conteúdo da unidade.
Revisões testam o quanto você se lembra dos conceitos da unidade.
1-3
Objetivos do curso
Ao completar este curso, você deverá ser capaz de usar o Macromedia
Flash 8 para:
•
Criar documentos do Flash e testá-los em um navegador.
•
Adicionar metadados a documentos do Flash.
•
Incorporar imagens de bitmap e vetoriais em documentos do Flash.
•
Usar ferramentas de desenho do Flash.
•
Incorporar texto e campos de formulário de texto a documentos do
Flash.
•
Criar diferentes tipos de animação do Flash.
•
Construir sistemas de navegação.
•
Usar linhas de tempo de clipes de filme para obter interatividade.
•
Adicionar sons e vídeos a documentos do Flash.
•
Publicar documentos do Flash para atender a diferentes necessidades
do usuário.
Pré-requisitos do curso
Para aproveitar o máximo deste curso, você já deve estar familiarizado com:
•
O sistema operacional Windows® ou Macintosh®.
•
Terminologia da Web.
Estrutura do curso
Este curso de dois dias inclui estas nove unidades:
1-4
•
Unidade 1: Introdução ao Macromedia Flash 8: Rich Content Creation
•
Unidade 2: Introdução
•
Unidade 3: Trabalhando com recursos de imagens e gráficos
•
Unidade 4: Usando texto com eficiência
•
Unidade 5: Criando animações
•
Unidade 6: Construindo um sistema de navegação
•
Unidade 7: Usando MovieClips
•
Unidade 8: Adicionando som e vídeo
•
Unidade 9: Publicando documentos do Flash
Introdução a aplicativos Rich Internet
Desde a introdução da World Wide Web:
•
Servidores da Web servem páginas da Web para clientes.
•
Navegadores processam páginas para usuários em navegadores nos
clientes.
Arquitetura de uma página estática
HTML
No começo, HTML era a linguagem de markup mais avançada para a
estruturação de documentos com texto e imagens incorporadas. O HTML:
•
Era fácil de usar.
•
Criava arquivos leves que podiam ser facilmente transferidos de
servidores da Web para o computador cliente.
•
Era facilmente interpretado por um navegador no computador de um
usuário.
Apesar dos aprimoramentos e refinamentos do HTML, ele ainda limita
a riqueza da interface do usuário (UI) em um navegador. Quando um
aplicativo da Web deve suportar vários navegadores ou versões de
navegadores, as limitações são mais perceptíveis.
Servidores de aplicativos
Durante a primeira década da Web, servidores de aplicativos também se
tornaram parte do ciclo de desenvolvimento e implantação da Web. Eles
tornaram-se o backend para processamento de lógica de servidor e conexão
a bancos de dados a outras fontes de dados.
1-5
Aplicativos Rich Internet
Ao longo da última década, tentativas de fazer da Internet um meio mais
levaram a comunidade de desenvolvimento a reconhecer a necessidade de
amadurecer:
•
Clientes versáteis
•
Plataformas de servidores de aplicativos mais versáteis
Essas duas tendências juntas têm pavimentado o caminho para a próxima
geração de aplicativos da Internet, também conhecidos como aplicativos
rich Internet.
Clientes versáteis
A próxima geração de aplicativos da Internet exige um cliente versátil,
que possa fornecer:
•
Interfaces eficientes e intuitivas para uma grande faixa de usuários em
uma variedade de clientes, como computadores e telefones.
•
Processamento eficiente e interatividade no cliente.
UIs construídas com o Macromedia Flash 8 estão se tornando uma alternativa
popular ao uso de HTML. Uma UI do Flash fornece um cliente versátil que:
•
É leve, com quase 100% de aceitação no mercado.
•
É suportado em dispositivos com ou sem navegador.
•
Elimina problemas de compatibilidade entre navegador e plataforma.
•
Fornece processamento e interatividade no cliente.
Plataformas de aplicativos mais versáteis
Duas plataformas de aplicativos da Internet estão emergindo como padrão
do setor.
•
J2EE, que é baseado no Java e especificações desenvolvidas pela Sun
Microsystems.
•
O .Net framework desenvolvido pela Microsoft.
Cada plataforma é poderosa o suficiente, mas ambos têm curvas de
aprendizado íngremes e complexidade de codificação que podem levar
a longos ciclos de desenvolvimento.
É possível dominar o poder do J2EE e do .Net sem sacrificar o
desenvolvimento rápido usando o Macromedia ColdFusion MX 7.
O ColdFusion MX 7 é executado sobre um servidor J2EE para providenciar
o poder do Java com uma linguagem de programação bem mais simples.
O ColdFusion também fornece interoperabilidade com .Net através de
serviços da Web.
Como as plataformas de aplicativos podem ser facilmente integradas com
o Flash, é possível combinar uma interface de usuário versátil com um
processamento de servidor robusto para construir a próxima geração de
aplicativos da Internet.
1-6
Demonstração 1-1:
Visualizando o site do Café Townsend
Observe conforme o seu instrutor apresenta o site que você construirá e
os arquivos com os quais trabalhará durante os procedimentos e os
laboratórios de cada unidade. Durante cada laboratório e procedimento,
você construirá ou modificará uma parte desse site da Web ao criar ou
modificar arquivos no seu computador.
1. Vá até
http://localhost/mmcourses/frcc800/completeProject/finishedApp/main
.html.
2. Clique no botão Chef Ipsum.
3. Passe o cursor do mouse sobre as miniaturas na seção House Favorites.
4. Clique no botão Menu.
5. Clique nas opções de menu Appetizers, Entrees, Desserts e Catch of
the Day.
6. Durante procedimentos e laboratórios, você criará documentos do
Flash e os armazenará em um diretório /walk e /lab. Você publicará
seus SWFs em um diretório diferente.
7. Durante o curso, você criará um arquivo ao modificar um já existente
ou criar um arquivo do zero.
8. Veja os arquivos de solução no seu diretório
{webroot}/mmcourses/frcc800. Os arquivos de solução estão nos
diretórios walkSolution e labSolution.
9. Durante laboratórios e procedimentos, consulte esses arquivos para ver
como seus arquivos devem se parecer.
10. É possível usar esses arquivos para começar qualquer procedimento ou
laboratório no caso de você estar atrasado ou de querer começar com
um arquivo novo.
1-7
Resumo da unidade
1-8
•
O curso é apresentado através de uma combinação de palestras,
demonstrações, procedimentos e laboratórios.
•
O curso foi projetado pressupondo que você já conhece procedimentos
básicos de usuários de sistemas operacionais Windows ou Macintosh.
•
O curso consiste em 9 unidades.
•
O curso se concentra em como usar o Macromedia Flash 8 para criar
experiências versáteis dos usuários com mídia.
•
Você completará o site do Café Townsend até o fim do curso.
Unidade 2:
Trabalhando no Flash
•
Iniciar o ambiente de desenvolvimento do Flash.
•
Criar e modificar documentos do Flash.
•
Definir preferências gerais.
•
Adicionar metadados a um documento do Flash.
•
Organizar a área de trabalho do Flash.
•
Visualizar e publicar documentos do Flash.
Tópicos da unidade
•
Introdução ao Macromedia Flash 8
•
Documentos do Flash
•
Criando um novo documento
•
Definindo preferências
•
Definindo propriedades do documento
•
Trabalhando com a interface do Flash
•
Publicando documentos do Flash
2-1
Introdução ao Macromedia Flash 8
Use o software Macromedia Flash 8 para criar e publicar documentos
compatíveis com várias plataformas e com pouca largura de banda, que
incluam imagens, movimento, som, vídeo e interatividade.
Você pode publicar documentos do Flash para serem executados como
seus próprios aplicativos ou pode incorporá-los em páginas da Web.
Software Flash
O software Flash contém duas partes:
•
Macromedia Flash 8
•
Flash Player 8
Macromedia Flash 8
O Macromedia Flash 8 é o ambiente de desenvolvimento do Flash usado
para projetar, desenvolver e publicar documentos. Há duas versões desse
ambiente de desenvolvimento.
Flash 8 Basic
O ambiente de desenvolvimento do Flash 8 inclui um conjunto de
ferramentas de criação usadas para criar documentos do Flash.
Use o ambiente de desenvolvimento do Flash 8 para incorporar, com
facilidade, o seguinte em seus aplicativos versáteis de Internet:
•
Imagens vetoriais e de bitmap.
•
Texto formatado e hyperlinks.
•
Animação e interatividade.
•
Esquemas de navegação simples e complexos.
•
Som e vídeo.
•
Conectividade de banco de dados.
•
Bibliotecas de componentes pré-criados que podem ser compartilhadas
por documentos do Flash.
ActionScript, a linguagem de scripts do Flash, permite que você adicione
lógica de programação para criar, de modo rápido e fácil, aplicativos cada
vez mais robustos.
2-2
Flash 8 Professional
O ambiente de desenvolvimento do Flash 8 Professional inclui todos os
recursos disponíveis no Flash 8 Basic. Recursos adicionais facilitam o
desenvolvimento de documentos do Flash de forma ainda mais rápida e
com mais aparência de aplicativo.
Estes são alguns dos recursos do Flash 8 Professional:
•
Conectividade de banco de dados fácil de usar.
•
Recursos de vídeo aprimorados.
•
Métodos fáceis para a criação de apresentações de slides e aplicativos
com base em formulários.
•
Componentes sofisticados que facilitam a criação de aplicativos para
diversos dispositivos.
Flash Player 8
Ao clicar com o botão direito do mouse em um arquivo do Flash (SWF)
em um navegador, você verá no menu exibido a opção About Macromedia
Flash Player (version), em vez de View Source. O menu é mostrado a
seguir.
Menu contextual do Flash Player
Para exibir o conteúdo do Flash, é necessário que a versão apropriada do
Macromedia Flash Player esteja instalada no computador do usuário, pois
os arquivos do Flash não são compostos por HTML.
Quase 100% de todos os navegadores incluem uma versão do Flash Player.
É possível criar documentos do Flash que detectem um Flash Player e sua
versão dentro do navegador de um usuário. Se não for detectada nenhuma
versão ou se for detectada a versão errada, o documento poderá solicitar
que os usuários instalem a versão mais recente a partir do site da
Macromedia.
Nota: Na Unidade 9, você incorporará o Flash Version Detection ao site
do Cafe Townsend.
2-3
Demonstração 2-1: Recursos do Flash
Nesta demonstração, o instrutor exibirá exemplos de como o Flash é usado
na Web.
1. Procure http://www.macromedia.com.
Observe o seguinte:
•
Essa é uma página HTML, e você pode exibir sua origem.
•
O menu de navegação no início da página foi criado com o Flash 8.
•
O Flash Player está instalado no navegador que exibe essa página
HTML. Isso permite que o conteúdo do Flash seja visualizado na
página.
2. Passe o mouse sobre o botão Support no menu de navegação. Observe
que um submenu é exibido. Observe também como a exibição do menu
e do respectivo submenu é rápida e suave.
3. Clique com o botão direito do mouse (ou, no Mac, pressione a tecla
CTRL e clique) no menu de navegação e observe a opção About
Macromedia Flash Player 8.
4. Procure http://www.thewatergatehotel.com.
5. No menu de navegação, clique no botão Make a Reservation.
6. Use o calendário para selecionar a data de check-in.
http://www.thewatergatehotel.com
Continuação na próxima página
2-4
7. Selecione uma data de check-out.
8. Observe que a disponibilidade (e a tarifa) dos quartos é atualizada
automaticamente com base na interação do usuário; não é necessário
atualizar a página.
9. Feche o navegador.
2-5
Documentos do Flash
Geralmente, um documento do Flash contém muitas propriedades. Essas
propriedades incluem imagens, gráficos, textos, som e vídeo.
Você usará o ambiente de criação do Flash para criar, importar e modificar
essas propriedades em um documento e, assim, determinar a aparência dos
aplicativos Flash que serão publicados na Web.
Os aplicativos Flash podem ser, por exemplo, apresentações, aplicativos de
telefone celular, animações, aplicativos de quiosque e sites completos.
Tipos de arquivo do Flash
Os documentos do Flash com os quais você trabalha no ambiente de
desenvolvimento são arquivos do tipo FLA. Os arquivos FLA são criados,
abertos e editados no ambiente de criação do Flash. O Flash Player não
abre arquivos FLA.
Você deve publicar um arquivo FLA para criar um arquivo SWF (um
formato de arquivo leve que pode ser aberto e exibido com o Flash Player).
Nota: Posteriormente nesta unidade, você aprenderá a publicar
documentos do Flash para criar arquivos SWF. Na Unidade 9, você
aprenderá a publicar para criar outros tipos de arquivos.
2-6
Por padrão, a página inicial é exibida no ambiente de desenvolvimento
quando você inicia o Macromedia Flash 8.
Você pode selecionar um dos hyperlinks da página inicial para criar novos
documentos do Flash, abrir documentos recém-editados do Flash ou
acessar diferentes tipos de conteúdo do Flash.
Essa página inicial aparece como uma página padrão sempre que você abre
o Flash ou fecha todos os documentos do Flash.
Página inicial do Flash
Você também pode selecionar File  New para criar um novo arquivo
FLA na caixa de diálogo New Document, que apresenta as mesmas opções
que a tela inicial.
Caixa de diálogo New Document
2-7
As preferências permitem personalizar o modo como os eventos acontecem no
ambiente de criação do Flash. São organizadas em categorias, e as diferentes
configurações se aplicam a todos os documentos criados no Flash 8.
Para abrir as preferências no Windows, selecione Edit  Preferences.
No OS X, escolha Flash Professional  Preferences.
Caixa de diálogo Preferences
Desfazer em nível de documento versus em nível de objeto
O Flash 8 apresenta duas opções da ação desfazer: nível de documento e
nível de objeto.
A opção Document-level Undo retrocede através do histórico de edição do
documento inteiro com base no número de níveis especificado em
Preferences.
A opção Object-level Undo retrocede através do histórico de edição de
objetos específicos e não afeta as alterações feitas em outros objetos do
documento do Flash.
Os níveis de Undo se aplicam com exclusividade a todos os objetos do
documento do Flash. Se Object-level Undo for selecionado, e Undo level
estiver definido como 100, cada objeto terá 100 níveis.
2-8
Procedimento 2-1:
Criando um documento do Flash
Neste procedimento, você:
•
Criará um novo documento do Flash
•
Definirá níveis da ação desfazer
•
Salvará um arquivo
Etapas
1. Selecione Start  Programs  Macromedia  Macromedia
Flash 8 para abrir o ambiente de desenvolvimento do Flash, ou escolha
Launch Flash 8 em Applications no OS X
Examinando a página inicial
2. Examine a página inicial. Se você não conseguir ver a página inicial
inteira, selecione a seta para baixo no fim da página, ao lado da palavra
Properties, para expandir a exibição se necessário.
3. Observe a opção Don't Show Again no canto inferior esquerdo da
página inicial. Certifique-se de que essa opção não esteja marcada.
Usando a página inicial
4. Na página inicial, em Create New, clique em Flash Document para
criar um documento em branco.
5. No menu suspenso Edit do Windows, ou no menu suspenso Flash 8
do OS X, escolha Preferences.
6. Na caixa de diálogo Preferences, em General Category, selecione o
menu Undo e altere o tipo para Object-level Undo.
7. Defina os níveis da ação de desfazer como 50 para conservar cache de
disco e melhorar o desempenho.
8. Salve o arquivo como wt2-1.fla no diretório
{webroot}/mmcourses/frcc800/walk.
9. Mantenha o arquivo aberto para o próximo procedimento.
2-9
Definindo propriedades do documento
Para definir as propriedades do documento, use o Property inspector ou
selecione Modify  Properties.
Usando o Property inspector, você pode alterar a cor de fundo do Stage ou
a taxa de quadros do documento. Você também pode clicar no botão Size
para iniciar a caixa de diálogo Document Properties.
Botão Size
Frame Rate
É possível usar a caixa de diálogo Document Properties para alterar não
apenas a cor de fundo e a taxa de quadros, mas também o tamanho do
Stage, a unidade de régua usada no documento. Além disso, é nessa caixa
de diálogo que os metadados são adicionados.
2 - 10
Adicionando metadados
Os metadados são armazenados em um arquivo SWF quando você publica
seu FLA. Eles são usados a fim de aumentar a visibilidade do arquivo SWF
para mecanismos de busca.
Um título descritivo deve ser adicionado ao campo Title.
No campo Description, forneça uma descrição que explique o propósito do
arquivo SWF. Palavras-chave, direitos autorais e informações de criação
podem ser usados na descrição para aumentar a probabilidade de um
arquivo SWF ser incluído em resultados de busca significativos.
2 - 11
Trabalhando com a interface do Flash
A interface do ambiente de desenvolvimento do Flash é semelhante à
interface de outros produtos de design da Macromedia; ela é intuitiva e
fácil de usar. O ambiente de desenvolvimento do Flash é mostrado a seguir.
Painéis
Menu
principal
Painel
Timeline
Painel
Tools
Stage
Property
inspector
Ambiente de desenvolvimento do Flash
Menu principal
O menu principal do ambiente de desenvolvimento permite afetar a
formatação e os arquivos de um documento do Flash. Esse menu se parece
com os menus principais de outros aplicativos.
Stage
Use o Stage para adicionar todas as propriedades visuais do documento. As
propriedades visuais incluem textos, imagens, vídeos e filmes.
Painel Timeline
O painel Timeline representa visualmente as fases, ou quadros, de um
documento. Esse painel contém o painel Layers e pode ser usado para
produzir uma animação. Use a Timeline juntamente com o Stage para
adicionar propriedades a quadros específicos.
2 - 12
Painéis
Existem muitas ferramentas de criação e você pode usá-las para
desenvolver e projetar documentos do Flash. Os painéis organizam essas
ferramentas de criação por objetivo. Por exemplo, o painel Tools contém as
ferramentas usadas para criar, selecionar e modificar propriedades de
documentos no Stage.
Estados dos painéis
Os painéis têm três estados:
•
Open
A janela de conteúdo do painel está aberta na interface.
•
Collapsed
•
Closed
Apenas a barra de título do painel é exibida.
O painel não está disponível na interface.
Para abrir um painel fechado, selecione-o no submenu Window.
O ambiente de desenvolvimento a seguir descreve os estados dos painéis.
Submenu Window
Painéis reduzidos
Grupo de
painéis
Painel aberto
Estados dos painéis
2 - 13
Organizando painéis na interface
Você pode desencaixar, mover e encaixar painéis na interface para
organizar a interface de acordo com seu estilo de trabalho.
Para desencaixar e mover um painel, selecione a pinça do painel para
desencaixá-lo, arraste-o para outro local e solte o mouse.
Pinça
Desencaixando um painel com a pinça
Quando você move um painel por regiões que podem receber encaixes na
interface, um contorno de caixa preto aparece para indicar onde o painel
será encaixado se você soltar a pinça.
Se você selecionar um painel desencaixado, ele alternará entre os estados
open e closed.
Salvando e gerenciando conjuntos de painéis
Depois de configurar a interface de acordo com suas necessidades, você
pode salvar os conjuntos de painéis.
•
Selecione Window  Workspace Layout  Save Current e digite um
nome exclusivo para salvar sua organização personalizada do painel.
•
Selecione Window  Workspace Layout e escolha o nome do
conjunto de painéis para carregar um conjunto de painéis específico na
interface.
•
Para remover e renomear conjuntos de painéis, selecione Window 
Workspace Layout  Manage.
Renomeando e excluindo layouts de área de trabalho
2 - 14
Painéis comuns
Neste curso, você usará vários painéis para criar documentos do Flash.
Os painéis serão abordados em detalhes, conforme necessário, ao longo do
curso. Estes são os painéis que você mais usará:
•
Painel Properties
•
Painel Tools
•
Painel Library
•
Painel Align
•
Painéis de cores
•
Painel Actions
2 - 15
O painel Properties
Use o painel Properties para exibir ou alterar as propriedades de um
documento do Flash. Geralmente, o painel Properties é chamado de
Property inspector e é composto por três guias:
•
Properties: Disponível para todas as propriedades do Flash.
•
Parameters: Disponível apenas para componentes.
•
Filters: Disponível apenas para textos, clipes de filme e botões.
O Property inspector exibe atributos para os itens selecionados em um
documento. As propriedades exibidas variam dependendo dos itens
selecionados, mas as propriedades comuns incluem origens X e Y, bem
como largura e altura.
Você pode selecionar uma propriedade no Stage, uma ferramenta ou o
próprio documento para visualizar e para alterar as propriedades no
Property inspector.
O Property inspector a seguir mostra as propriedades do próprio Stage.
Property inspector
2 - 16
Painel Tools
O painel Tools contém várias ferramentas de desenho, seleção, texto e cor
que você poderá usar para criar e modificar propriedades no Stage.
Sempre que você clicar em uma ferramenta no painel Tools, o Property
inspector mudará automaticamente para exibir as propriedades dessa
ferramenta. Isso permite que você especifique configurações para as
ferramentas à medida que as utiliza.
Ferramenta Selection
Ferramenta Text
Ferramenta Oval
Ferramenta
Rectangle/Polystar
Ferramenta Eyedropper
Controle Stroke color
Controle Fill color
Ferramentas do painel Tools
2 - 17
Ferramentas conhecidas
A ferramenta Selection será a mais usada por você. Use a ferramenta
Selection para selecionar propriedades no Stage e posteriormente modificar
ou reposicionar essas propriedades. Quando seleciona uma propriedade
com a ferramenta Selection, você pode movê-la no Stage ou modificar suas
propriedades no Property inspector.
Para modificar várias propriedades simultaneamente, clique e arraste a
ferramenta Selection para acomodar as propriedades dentro de uma área de
seleção retangular.
Para selecionar várias propriedades, mantenha a tecla Shift pressionada
enquanto clica nas propriedades.
2 - 18
Painel Library
O painel Library armazena as propriedades usadas em um aplicativo Flash.
Especificamente, o painel Library armazena:
•
Bitmaps
•
Clipes de filme, botões e símbolos gráficos
•
Símbolos de fonte
•
Sons
•
Vídeo
•
Componentes
Você usará a biblioteca para armazenar as propriedades que serão
utilizadas várias vezes em um documento do Flash.
Selecione Window  Library para abrir esse painel no ambiente de
desenvolvimento. O painel Library é mostrado a seguir.
2 - 19
Painel Align
Use o painel Align para alinhar e distribuir propriedades no Stage:
•
Selecionando as propriedades com a ferramenta Selection.
•
Selecionando no painel Align o ícone que descreve o modo como você
deseja associar as propriedades selecionadas.
•
Determinando se as propriedades deverão ser alinhadas em relação à
largura e à altura do Stage, ou em relação a outras propriedades.
O painel Align é mostrado a seguir.
2 - 20
Painéis de cores
Você poderá usar diversos painéis para aplicar propriedades de cor a outros
painéis e a propriedades no Stage. Por exemplo:
•
Use o painel Color Mixer para atribuir efeitos de cor às ferramentas
de cor do Flash (como a ferramenta Fill) e às propriedades no Stage.
O painel Color Mixer é mostrado a seguir.
Color Mixer
Na Unidade 3, você aprenderá mais sobre o painel Color.
•
Use o painel Color Swatches para armazenar as cores dos documentos
do Flash e para manter a consistência de cores entre documentos. O
painel Color Swatches é mostrado a seguir.
Painel Color Swatches
Na Unidade 3, você aprenderá mais sobre o painel Color Swatches.
2 - 21
Procedimento 2-2:
Configurando a área de trabalho
•
Alterará as propriedades do documento
•
Adicionará metadados a um arquivo
•
Criará e salvará o layout de um painel
Etapas
1. Abra o wt2-1.fla no diretório {webroot}/mmcourses/frcc800/walk.
2. Salve o arquivo como wt2-2.fla no mesmo diretório.
Configurando as propriedades do documento e o tamanho
do Stage
3. Para definir a largura e altura do Stage, clique no botão Size no
Property inspector.
4. Defina as dimensões do Stage como 740 pixels de largura por
600 pixels de altura.
5. Defina a cor de fundo como black.
6. Altere a taxa de quadros para 18 fps (quadros por segundo).
7. No campo Title, digite Café Townsend Home.
8. No campo Description, digite uma descrição abreviada do Café
Townsend. Por exemplo: Café Townsend is located in San
Francisco, California, and provides fine foods and
fine dining experiences.
9. Clique em OK.
2 - 22
Abrindo painéis e salvando o layout de uma área de trabalho
10. No menu suspenso Window, selecione Other Panels  History.
11. Selecione Window  Align para abrir o painel Align.
12. Para encaixar o painel Align, clique na pinça e arraste o painel com os
grupos de painéis para a direita. Quando um contorno preto aparecer,
solte o botão do mouse para encaixar o painel.
13. Feche o painel History. Para isso, clique no menu Options à direita da
barra de título do painel e escolha Close Panel Group.
14. Abra e encaixe os painéis Color Swatches, Behaviors e Components.
15. Selecione Window  Workspace Layout  Save Current.
16. Nomeie o layout como FRCC800 Training.
17. Salve wt2-2.fla e mantenha-o aberto para o próximo procedimento.
2 - 23
Desenvolvendo documentos do Flash
Durante o último procedimento, você criou um documento do Flash e
configurou sua área de trabalho; mas, no momento, esse documento não
tem propósito, e o usuário não pode visualizá-lo e nem interagir com ele no
Flash Player.
O desenvolvimento de documentos do Flash envolve:
•
A criação de um documento do Flash.
•
A inclusão de propriedades no documento do Flash.
•
A publicação do documento para a criação de um aplicativo Flash.
Criando documentos do Flash
Conforme discutido anteriormente, os documentos do Flash contêm
propriedades. Essas propriedades incluem imagens, textos, som e vídeo,
entre outros itens.
Os documentos do Flash com os quais você trabalha no ambiente de
desenvolvimento são arquivos do tipo FLA. Os arquivos FLA podem ser
abertos no ambiente de desenvolvimento, e as propriedades podem ser
editadas e exibidas. Os arquivos FLA não podem ser exibidos em um
navegador e, conseqüentemente, o tamanho desses arquivos não é muito
importante.
Você pode criar um documento do Flash das seguintes maneiras:
•
Use o menu File para abrir um arquivo FLA existente e salvá-lo em um
arquivo novo.
Assim como em outros aplicativos, você pode modificar arquivos
existentes para criar novos.
•
Use o menu File ou a página inicial para criar e salvar um novo
documento FLA.
Assim como em outros aplicativos, o ambiente de desenvolvimento do
Flash inclui diversos modelos de formatação.
Adicionando propriedades
Depois de criar um documento do Flash, você usará o Stage, os painéis e
outras ferramentas de criação do Flash para adicionar e modificar as
propriedades do documento.
2 - 24
Publicando documentos
É necessário publicar um arquivo FLA para criar um arquivo SWF que
possa ser exibido em um navegador. Ao desenvolver um documento do
Flash, você publica em arquivos SWF para que possa visualizar seu
progresso à medida que avança.
É possível publicar um documento e criar um arquivo SWF de três
maneiras:
•
Publique diretamente usando File  Publish no menu principal.
•
Publique indiretamente usando File  Publish Preview.
•
Publique indiretamente usando Control  Test Movie no menu
principal.
Quando você cria um arquivo SWF com um desses métodos:
•
O arquivo SWF criado corresponde ao estado atual do documento do
Flash a partir do qual é publicado.
•
O arquivo FLA do Flash não é salvo automaticamente quando você
publica.
2 - 25
Alterando as configurações de publicação
Selecione File  Publish Settings para acessar a caixa de diálogo Publish
Settings. Essa caixa de diálogo consiste em uma série de guias. Use essas
guias para descrever as propriedades de publicação dos arquivos criados.
Use as guias para:
•
Atribuir formatos e propriedades aos arquivos que publicar.
•
Publicar os arquivos em nomes de arquivo e pastas (caminhos).
•
Descrever Flash Version Detection de arquivos publicados.
A caixa de diálogo Publish Settings é mostrada a seguir.
Publish Settings
Nota: Nesta unidade, você aprenderá a atribuir nomes de arquivo padrão
e a publicar nos formatos de arquivo SWF e HTML. Na Unidade 9, você
aprenderá a atribuir outros formatos de arquivo e a ativar o Flash Version
Detection e outras configurações de publicação quando aprender a
publicar documentos para implantação.
2 - 26
Atribuindo configurações de publicação
Ao desenvolver documentos do Flash, certifique-se de que a guia Formats
da caixa de diálogo Publish Settings use nomes padrão e que o campo
Flash (.swf) esteja ativado.
Ao selecionar o botão Use Default Names, você garante que os arquivos
publicados sejam:
•
Nomeados com o mesmo nome do arquivo FLA, com a extensão
apropriada.
•
Salvos na mesma pasta do arquivo FLA a partir do qual foram
publicados.
Exemplo de uso
À medida que desenvolver documentos do Flash, você publicará arquivos
SWF salvos com um novo nome na mesma pasta em que o arquivo FLA
reside. Dessa forma, você poderá testá-los e modificá-los com rapidez
durante o processo.
Ao publicar documentos do Flash para implantá-los na Web, você poderá
publicá-los em um caminho de diretório totalmente diferente e em formatos
de arquivo HTML e SWF. Dessa forma, o arquivo SWF será incorporado
em uma página HTML.
2 - 27
Usando Control  Test Movie
Use Control  Test Movie para testar o modo como o aplicativo ou o
filme se comporta enquanto você ainda está trabalhando no ambiente de
desenvolvimento.
Quando seleciona Control  Test Movie, você publica imediatamente um
arquivo SWF usando as configurações de publicação do documento,
conforme descrito na caixa de diálogo Publish Settings.
Se o padrão for mantido, Control  Test Movie:
•
Criará um arquivo SWF na mesma pasta do arquivo FLA.
•
Abrirá o arquivo SWF em uma janela de teste disponível no ambiente
de desenvolvimento do Flash para que você possa testar o modo como
o filme se comporta enquanto você ainda está trabalhando.
•
Exibirá guias (no Windows) na parte superior da interface para denotar
os dois arquivos abertos: o arquivo FLA no ambiente de
desenvolvimento e o arquivo SWF na janela de teste.
A guia wt2-3.fla e a guia wt2-3swf correspondente são mostradas a seguir.
Guias de arquivos
Para fechar a janela SWF e retornar ao ambiente de desenvolvimento do Flash,
clique em CTRL+W e feche a janela, ou selecione a guia do arquivo FLA.
Nota: O Flash Player 8 deverá estar instalado no computador em que você
está trabalhando se o arquivo SWF incluir recursos do Macromedia Flash 8.
2 - 28
Usando File  Publish Preview
Quando desejar visualizar o trabalho realizado em Flash na janela de um
navegador, ou como um tipo de arquivo que não seja SWF, escolha uma
opção no menu File  Publish Preview.
Se você escolher Default ou pressionar o atalho F12 no teclado, será
produzida uma página HTML com o SWF incorporado no navegador
padrão do sistema.
Usando Publish Preview
2 - 29
Procedimento 2-3:
Publicando um arquivo
•
Definirá a versão do Flash Player
•
Adicionará conteúdo a um arquivo
•
Visualizará um arquivo
•
Publicará um arquivo
Etapas
Definindo a versão do Flash Player
3. Para abrir a caixa de diálogo Publish Settings, clique no botão Publish:
Settings no Property Inspector.
4. Na guia Flash, clique no menu suspenso Version. Verifique se a
versão do Flash Player está definida como 8. Observe as outras opções
de versão do player.
5. Clique no menu suspenso ActionScript Version. Observe a opção
para alternar para o ActionScript versão 1. Certifique-se de que
ActionScript versão 2 esteja selecionado.
6. Clique em OK para retornar ao Stage.
Adicionando conteúdo ao Stage
7. No painel Tools, alterne para a ferramenta Text.
8. No Property inspector, verifique se o tipo de texto é Static Text.
9. No Stage, clique e arraste usando a ferramenta Text para criar um
campo de texto; em seguida, digite seu nome.
10. No painel Tools, alterne para a ferramenta Selection.
11. Arraste o campo de texto para qualquer lugar do Stage.
2 - 30
Publicando um arquivo e visualizando SWF e HTML
12. Para gerar um arquivo SWF e um arquivo HTML e visualizá-los na
janela de um navegador, selecione File  Preview In Browser
Default.
13. Feche a janela do navegador.
14. Para publicar somente um arquivo SWF e exibi-lo no ambiente de
testes, no Flash, selecione Control  Text Movie.
15. Para publicar um arquivo sem visualizá-lo, selecione File
Publish.
16. Inicie um navegador e vá para
http://localhost/mmcourses/frcc800/walk/wt2-3.html.
17. No navegador, escolha View  Source para exibir as tags Object e
Embed geradas pelo Flash.
18. Feche a janela do navegador.
19. Salve e feche o wt2-3.fla.
2 - 31
Resumo da unidade
2 - 32
•
Use o ambiente de desenvolvimento do Macromedia Flash para criar e
publicar documentos do Flash e para adicionar e modificar propriedades.
•
Um documento do Flash é um arquivo do tipo FLA. Arquivos FLA são
arquivos editáveis que contêm as propriedades de seus documentos.
•
Os documentos do Flash são publicados para criar um arquivo SWF.
Os usuários podem visualizar um arquivo SWF e interagir com ele.
É possível publicar arquivos SWF como aplicativos independentes ou
incorporados em páginas da Web.
•
É possível adicionar metadados a documentos do Flash a fim de
aumentar a visibilidade para mecanismos de busca.
•
A área de trabalho do Flash pode ser personalizada para atender às suas
necessidades.
•
As propriedades do documento podem ser definidas na caixa de
diálogo Document Properties e no Property inspector.
•
É necessário que exista uma versão do Flash Player instalada no
navegador para que o usuário possa visualizar arquivos SWF e
interagir com eles. Os usuários podem fazer download da versão
mais recente do Flash Player no site da Macromedia.
Revisão da unidade
1. Nomeie três tipos de propriedades de documentos descritas nesta
unidade.
2. Explique a diferença entre FLA e SWF.
3. Qual software deve estar instalado no computador para que seja
possível visualizar um arquivo SWF?
4. Quais são os dois métodos usados para publicar um documento do
Flash para criar um arquivo SWF?
5. Qual é a função dos metadados adicionados a um arquivo do Flash?
2 - 33
Laboratório 2:
Criando um novo documento e definindo
propriedades
Durante este laboratório, você criará um documento do Flash e explorará a
ferramenta de criação do Flash 8.
Objetivos
Após concluir este laboratório, você deverá ser capaz de:
•
Criar um novo documento do Flash 8
•
Alterar o tamanho do Stage
•
Adicionar metadados ao arquivo para publicação
•
Alterar a cor de fundo do Stage
•
Alterar a taxa de quadros
Etapas detalhadas
1. Selecione File  New.
2. Escolha New Document na categoria General.
3. Clique em OK.
4. Salve o arquivo como lab2.fla no diretório
{webroot}/mmcourses/frcc800/lab.
5. Escolha a ferramenta Selection no painel Tools.
6. Clique uma vez no Stage e expanda ou abra o Property inspector
(Window  Properties).
7. Na guia Properties do Property inspector, clique no botão Size.
8. No campo de texto width, digite 740.
9. No campo de texto height, digite 600.
10. Clique no controle Background color e defina o fundo como black.
11. Defina Frame rate como 18 fps.
12. No campo Title, digite algo como Café Townsend Presents its
Menu.
13. No campo Description, digite algo como Cafe Townsend has a
robust menu of foods ranging from the every day to
the epicurean’s delight.
2 - 34
14. Clique em OK.
15. Salve e feche o lab2.fla.
Etapas gerais
1. Crie um novo documento do Flash.
2. Salve o documento como lab2.fla no diretório
3. Altere a largura do Stage para 740.
4. Altere a altura do Stage para 600.
5. Altere a taxa de quadros para 18 fps.
6. Altere a cor de fundo do Stage para black.
7. Abra a caixa de diálogo Document Properties.
8. Adicione um título e uma descrição para o arquivo.
2 - 35
2 - 36
Unidade 3:
Importando e criando gráficos
•
Importar uma imagem de bitmap em um documento do Flash.
•
Usar as ferramentas de criação do Flash para criar e manipular gráficos
vetoriais.
•
Adicionar recursos a camadas para facilitar a edição e o gerenciamento
do documento.
•
Criar um arquivo de amostra de cores para manter um esquema de cores.
•
Criar um símbolo e instâncias dele para minimizar o tamanho do arquivo.
•
Adicionar um efeito de máscara a uma imagem.
Tópicos da unidade
•
Tipos de imagens
•
Adicionando recursos gráficos e de imagem
•
Usando camadas
•
Criando gráficos vetoriais no Flash
•
O modelo de desenho de objetos
•
Usando as ferramentas de cor do Flash
•
Usando símbolos de gráficos
•
Criando efeitos de máscara
3-1
Tipos de imagens
Como você aprendeu na última unidade, um documento do Flash pode
conter diversos recursos. Os recursos do Flash podem incluir imagens,
texto, vídeo e som.
Há suporte para dois tipos de imagens em ambientes de publicação:
•
Imagens de bitmap
•
Gráficos vetoriais
Imagens de bitmap
As imagens de bitmap são compostas de elementos de imagem ou pixels.
Os pixels armazenam dados de cores. Uma série de pixels fornece um
mosaico dos dados da imagem. JPG, BMP, GIF e TIF são tipos de arquivos
de imagens de bitmap comuns.
Vantagens e desvantagens das imagens de bitmap
•
O bitmap é um formato bom para imagens detalhadas, como fotografias.
•
O redimensionamento é limitado pela resolução dos dados de pixel.
•
Os tamanhos de arquivos tendem a ser maiores devido à maior
quantidade de dados.
A fotografia a seguir é uma imagem de bitmap.
Imagem de bitmap
3-2
Gráficos vetoriais
Os gráficos vetoriais são compostos de formas bem definidas, como curvas,
pontos e linhas. Cada forma no gráfico é definida matematicamente. Os
tipos de arquivos vetoriais comuns incluem:
Tipo de
arquivo
Criado por
EPS
Adobe Illustrator
AI
Adobe Illustrator
CDR
CorelDraw
DWG
AutoCAD
FH9
Macromedia Freehand 9
FH10
Macromedia Freehand 10
Vantagens e desvantagens dos gráficos vetoriais
•
O gráfico vetorial é um bom formato para gráficos que exigem
medidas precisas.
•
Devido à base matemática, os gráficos vetoriais são redimensionáveis.
•
Como eles não armazenam todos os elementos da imagem, o tamanho
do arquivo pode ser melhor administrado do que o de imagens de
bitmap.
•
Quanto mais complexo o gráfico, maior o tamanho final do arquivo.
•
Não é possível obter qualidade fotográfica em imagens vetoriais.
Você cria gráficos vetoriais em pacotes de desenho, como Macromedia
Fireworks ou Macromedia Freehand. Você também os cria diretamente no
ambiente de desenvolvimento do Flash. A imagem a seguir é a mesma
anterior salva em formato vetorial.
Imagem vetorial
3-3
Adicionando recursos gráficos e de imagem
Há duas maneiras de adicionar recursos gráficos e de imagem a um
documento do Flash:
•
Importar imagens de bitmap e vetoriais existentes.
•
Criar imagens vetoriais no ambiente de desenvolvimento do Flash.
Importando imagens
Você pode importar imagens de bitmap e vetoriais para o ambiente de
desenvolvimento do Flash.
Uma prática comum em design da Web é:
•
Criar, retocar e otimizar imagens em um programa de edição, como o
Macromedia Freehand ou Fireworks.
•
Importar essas imagens para o Flash.
•
Usar as ferramentas de criação do Flash para combinar as imagens com
outros recursos, posicionar os recursos e adicionar efeitos, como
movimento, para criar um documento do Flash.
•
Publicar um documento do Flash usando ferramentas de compressão
do Flash para gerar arquivos SWF leves para os navegadores.
Selecione File  Import  Import to Stage para importar uma imagem
para o Stage. Depois da importação, você usa diversas ferramentas de
criação para posicionar e modificar a imagem no stage.
Nota: Os recursos de imagem que você adiciona ao Stage também são
adicionados à biblioteca do documento. Você aprenderá mais sobre a
biblioteca de documentos posteriormente nesta unidade.
Posicionando imagens
Além de arrastar e soltar imagens em uma posição no Stage, você pode
usar o painel Align e o Property inspector para organizar os recursos.
Painel Align
3-4
Quando o botão To Stage for selecionado no painel Align, os recursos
serão alinhados em relação às partes superior, inferior, esquerda, direita e
central do Stage. Quando ele for desmarcado, os recursos serão alinhados
em relação a suas bordas e seus centros.
Property inspector
Com o Property Inspector, você pode alterar as coordenadas X e Y de um
recurso, assim como sua largura e sua altura. Você também pode trocar o
recurso de imagem por outro bitmap da biblioteca do documento ou usar o
recurso de edição do Flash para editar a imagem em uma ferramenta como
o Macromedia Fireworks.
3-5
Procedimento 3-1:
Importando gráficos
•
Importará um gráfico de bitmap
•
Importará um gráfico vetorial
•
Usará o painel Align
•
Usará o Property inspector
Etapas
2. Salve o arquivo como wt3-1.fla na mesma pasta.
Importando um gráfico de bitmap para o Stage
3. Para importar um gráfico de bitmap para o Stage, selecione File 
Import  Import to Stage
4. Na caixa de diálogo Import, selecione header.jpg no diretório
{webroot}/mmcourses/frcc800/assets.
5. Selecione header.jpg no Stage com a ferramenta Selection e expanda
o painel Align.
6. Alinhe a imagem ao centro horizontal do Stage selecionando o botão
To Stage no painel Align e pressionando o botão horizontal center
pela seta Align.
7. Defina o valor de y como 10 no Property Inspector para posicionar o
gráfico 10 a partir da parte superior do documento.
Importando um gráfico vetorial para o Stage
8. Para importar um gráfico vetorial para o Stage, selecione File 
Import  Import to Stage
9. Na caixa de diálogo Import, escolha smallLogo.fhll no diretório
10. Na caixa de diálogo Import Freehand, selecione Flatten na opção
Layers e pressione OK.
11. Use a ferramenta Selection para selecionar o gráfico no Stage.
12. No Property Inspector, altere o valor W para 15.
13. Altere o valor H para 15.
14. Arraste o gráfico para o canto inferior esquerdo da tela.
15. Salve o wt3-1.fla e deixe-o aberto para o próximo procedimento.
3-6
Usando camadas
Use camadas para organizar os recursos de um documento do Flash.
Camadas são, literalmente, níveis de conteúdo dispostos um sobre o outro.
No diagrama a seguir, há três camadas, cada uma com um recurso.
Três camadas com objetos
Ao trabalhar em um documento do Flash que você inserir, nomeie e
organize as camadas para:
•
Controlar a ordem de empilhamento e a profundidade em um
documento do Flash para organizar o espaço.
•
Colocar recursos em suas próprias camadas para que sejam
manipulados e controlados com facilidade.
•
Impedir que os recursos interajam uns com os outros e se mesclem.
Por exemplo, um documento do Flash pode ter as seguintes camadas como
prática recomendada:
•
Camada de texto
•
Camada de fundo
•
Camada de imagens
Ao colocar recursos nessas diferentes camadas, você pode facilmente
selecionar itens que podem ser colocados uns sobre os outros e também
impedir que textos e imagens colocados sobre o fundo se mesclem
inadvertidamente com partes das imagens do fundo.
3-7
Trabalhando com camadas
Um novo documento do Flash contém uma camada chamada Layer 1.
Selecione Insert  Timeline  Layer ou selecione o ícone Insert Layer
para inserir camadas adicionais sobre a pilha de camadas.
Para renomear uma camada, clique duas vezes nela e insira um novo nome.
Depois de criar as camadas e adicionar recursos a elas, você pode:
•
Selecionar e arrastar canadas para alterar a ordem de empilhamento.
•
Bloquear/desbloquear camadas para controlar o que é editado e quando.
•
Ativar e desativar a visibilidade durante a edição para controlar a
exibição do documento durante a edição.
•
Selecionar e arrastar camadas para a lixeira a fim de excluí-las.
Ícone Show/Hide
layer icon
Ícone Lock/Unclock
Ícone Layer type
Ícone View as outlines
Ícone Insert Layer
Ícone Trash
Ícone Insert Layer Folder
Painel Layers
Você também pode usar pastas de camadas para organizar camadas quando
um documento do Flash tiver muitos recursos. Para usar pastas de camadas,
clique no ícone Insert Layer Folder a fim de adicionar uma camada e
arraste camadas para a nova pasta de camadas.
Se você clicar no ícone View as outlines, exibirá somente os contornos dos
recursos em uma camada, o que pode ser muito útil para organizar o
conteúdo no Stage.
3-8
Conteúdo da camada visto como contornos
Se você clicar duas vezes no ícone Layer type, a caixa de diálogo Layer
Properties será aberta, e você poderá alterar o nome e o comportamento da
camada.
Layer Properties
3-9
Procedimento 3-2:
Trabalhando com camadas
•
Adicionará camadas a um documento
•
Alterará a ordem das camadas
•
Adicionará uma pasta de camadas para organizar as camadas
Etapas
2. Salve-o como wt3-2.fla na mesma pasta.
Alterando o nome de uma camada
3. Altere o nome da Layer 1 no painel Layers para images. Para isso,
clique duas vezes nela e insira o novo nome.
Inserindo novas camadas
4. No painel Layers, clique no botão Insert New Layer para criar uma
nova camada. Altere o nome da camada para background.
5. Selecione Insert  Timeline  Layer para criar uma nova camada.
6. Clique duas vezes no nome da camada e renomeie-a como buttons.
7. Adicione mais duas camadas: menu items e text.
8. Arraste a camada images para a parte superior do painel Layers.
9. Selecione a camada menu items e clique no botão Insert Layer
Folder no painel Layers.
10. Renomeie a pasta de camadas como nav elements.
11. Arraste a camada menu items e a camada buttons para a pasta de
camadas nav elements.
12. Organize as camadas de modo que elas apareçam na mesma ordem
mostrada na figura a seguir:
3 - 10
3 - 11
Criando gráficos vetoriais no Flash
Você pode criar gráficos vetoriais diretamente no Flash usando diversas
ferramentas de criação. Você fará isso, por exemplo, para adicionar uma
forma a fim de criar efeitos de movimento.
Usando o painel Tools
O painel Tools oferece diversas ferramentas para ajudar você a:
•
Criar formas.
•
Selecionar formas para que possa alterar suas propriedades.
•
Preencher a aplicar traços.
Você pode usar essas ferramentas em conjunto com outras ferramentas de
criação, como o Property inspector, para criar e modificar gráficos vetoriais
no Flash.
As ferramentas que você usará com mais freqüência ao criar e modificar
gráficos vetoriais do Flash são exibidas a seguir:
Ferramenta Selection
Ferramenta Oval
Ferramenta Subselection
Ferramenta Rectangle/polystar
Ferramenta Eyedropper
Stroke
Fill
Barra de ferramentas
3 - 12
Traço vs. preenchimento
Com o Flash, quando você desenha um objeto como uma oval ou um
retângulo, ele cria a forma em duas partes por padrão:
•
O traço, que é o contorno da forma
•
O preenchimento, que é o interior da forma
Você pode selecionar o traço e o preenchimento separadamente e defini-los
com cores diferentes. O preenchimento e o traço do objeto são formas
separadas. Isso ajuda a manter o menor tamanho de arquivo possível, além
de permitir que você os controle separadamente.
Selecionando o preenchimento
Quando você usa a ferramenta Selection para clicar uma vez dentro de uma
oval, você seleciona o preenchimento. Você pode confirmar isso porque o
preenchimento fica pontilhado e o Property inspector mostra as
propriedades do preenchimento.
Oval com preenchimento selecionado
3 - 13
Selecionando o traço
Quando você seleciona o traço, pode ver suas propriedades no Property
inspector. Cuidado, pois você pode facilmente arrastar o traço, separando-o
do preenchimento.
Oval com traço selecionado
Selecionando o traço e o preenchimento
Se desejar alterar toda a oval, você precisará selecionar o traço e o
preenchimento simultaneamente. Você pode fazer isso clicando duas
vezes dentro da forma. Agora você poderá alterar as propriedades do
traço e do preenchimento no Property inspector.
3 - 14
Removendo traço ou preenchimento
Se não desejar um traço ou um preenchimento, você pode selecionar a
caixa com marca de seleção vermelha nas opções do traço ou do
preenchimento na seção Color da barra de ferramentas.
Traço transparente
Você pode remover o traço ou o preenchimento antes ou depois de
desenhar o objeto.
Agrupando formas
Se desejar afetar o traço e o preenchimento ao mesmo tempo, como um só
objeto, você poderá agrupá-los.
Clique duas vezes na forma para selecionar simultaneamente o traço e o
preenchimento. Em seguida, escolha Modify  Group para transformá-los
em um só objeto.
3 - 15
O modelo de desenho de objetos
O Macromedia Flash 8 utiliza dois modelos de desenho diferentes para a
criação de artes vetoriais:
Object Drawing: as formas criadas com o modelo Object Drawing são
desenhadas como gráficos agrupados independentes que não são mesclados
nem se interseccionam com outros gráficos vetoriais no Stage.
Merge Drawing: as formas criadas com o modelo Merge Drawing se
interseccionam e se mesclam quando são sobrepostas. O traço e o
preenchimento são desenhados como dois gráficos separados. O modelo
Merge Drawing é o padrão no Flash.
Object Drawing ligado/desligado
3 - 16
Usando as ferramentas de desenho natural do Flash
Use as ferramentas de desenho natural do Flash com gráficos criados em
qualquer modelo de desenho para reformatar qualquer linha ou elemento de
um gráfico vetorial a fim de suavizá-lo, com uma aparência mais natural.
Para acessar as ferramentas de desenho natural, selecione a ferramenta
Arrow e mantenha o mouse sobre parte de uma forma no Stage. O cursor
é alterado para:
•
Uma seta com um arco de círculo, quando posicionado sobre uma linha.
Arco de círculo na linha
•
Uma seta com um ângulo reto, quando posicionado sobre um canto.
Ângulo reto em canto
Agora que selecionou a ferramenta de desenho natural, você pode arrastála nos cantos e nas laterais para criar formas diferentes.
Arrastando ferramentas de desenho natural
Nota: Você não pode usar as ferramentas de desenho natural com um
gráfico que tenha sido agrupado.
3 - 17
Usando guias e réguas
Use regras e guias quando for importante a maneira como você desenha e
posiciona formas no Stage.
Use o submenu View para ativar e mostrar guias e réguas:
•
Selecione View  Rulers para exibir réguas na parte superior e à
esquerda do Stage.
•
Selecione View  Guides e ative Show Guides para que você possa
arrastar guias das réguas e posicioná-las no Stage.
•
Selecione Snapping  Snap to Guides e ative essa opção para que
você possa arrastar formas e outros recursos próximos a interseções de
guias de modo que eles se encaixem na posição.
Depois de ativar as guias, você pode clicar na área da régua, seja na
horizontal ou na vertical, e arrastar uma guia para posicioná-la onde desejar.
Guias e réguas
3 - 18
Procedimento 3-3:
Criando arte no Flash
•
Desenhará um gráfico usando o modelo Object Drawing
•
Usará guias para auxiliar no desenho
•
Alterará as propriedades do gráfico com o Property inspector
Etapas
Configurando guias para desenhar
3. Selecione View  Rulers.
4. No painel Tools, escolha a ferramenta Selection.
5. Para criar uma guia vertical, pressione e arraste na régua vertical para
arrastar uma guia vertical.
6. Posicione a guia vertical cerca de 5 pixels a partir da borda esquerda
do Stage.
7. Arraste outra guia vertical cerca de 5 pixels a partir da borda direita do
Stage.
8. Arraste uma guia horizontal cerca de 5 pixels a partir da parte inferior
do Stage.
9. Arraste uma guia horizontal cerca de 215 pixels a partir da parte
superior do Stage.
10. Selecione View  Guides  Lock Guides.
Desenhando um gráfico de fundo
11. Selecione a camada de background para torná-la ativa. Clique com o
botão direito do mouse na camada (ou clique com a tecla Ctrl
pressionada no OS X) e escolha Lock Others no menu contextual.
12. Selecione a ferramenta Rectangle no painel Tools.
13. Selecione a opção de cor No Stroke no controle de cor do traço para
desativar o traço.
14. Defina a cor do preenchimento como #FF1900 por meio do controle de
cor do preenchimento.
15. Na seção Options do painel Tools, clique no botão Set Corner
Radius e defina o raio do canto como 10.
3 - 19
16. Posicione a cruz de desenho na interseção das guias superiores e
inferiores.
17. Para desenhar o retângulo, clique e arraste para a interseção das guias
no canto inferior esquerdo.
Criando um fundo de navegação
18. Selecione a camada buttons na pasta de camada nav elements e insira
uma nova camada. Nomeie a nova camada como nav box.
19. Arraste a camada nav box para acima da camada menu items,
certificando-se de que ela ainda esteja na pasta nav elements.
20. Clique com o botão direito do mouse ou clique pressionando Control
na camada nav box e selecione Lock Others no menu contextual.
21. Selecione a ferramenta Rectangle. Defina a cor de traço como
#BB1602.
22. Selecione No Fill para a cor do preenchimento.
23. Verifique se Object Drawing ainda está selecionado.
24. Verifique se o raio do canto ainda está definido como 10.
25. Com a ferramenta Rectangle, desenhe um retângulo de cerca de
330 pixels de largura por 300 pixels de altura na camada nav box.
27. Clique duas vezes no novo gráfico. Observe que agora você está em
modo Edit in Place.
28. Clique em Scene 1 para retornar ao modo de edição padrão.
3 - 20
29. Com o Property, defina os seguintes valores para o gráfico:
•
W: 140
•
H: 310
•
X: 24
•
Y: 250
3 - 21
Usando as ferramentas de cor do Flash
O ambiente de desenvolvimento do Flash oferece diversas ferramentas para
facilitar o gerenciamento de cores para seu aplicativo e a atribuição de
cores a ferramentas no painel Tools e a recursos no Stage.
Por exemplo, use:
•
Painel Color Mixer para definir cores e gradientes para ferramentas de
desenho e outros painéis de cores.
Painel Color Mixer
•
Ferramenta Eyedropper (
) para retirar amostras de cores e atribuílas a recursos no Stage, ao Color Mixer e ao painel Color Swatches.
•
Property inspector para definir cores a fim de atribuir propriedades de
cores a um recurso.
Cor no Property inspector
•
3 - 22
Painel Color Swatches para acompanhar e salvar as cores usadas em
um documento.
Painel Color Swatches
Criando gradientes
Use o painel Color Mixer para criar e aplicar preenchimentos gradientes,
sólidos ou de bitmap a preenchimentos e cores sólidas para traços.
O painel Color Mixer permite a criação de cores usando combinações RGB,
HSB ou hexadecimais. O alfa (opacidade) também pode ser definido para
cores no Color Mixer.
O Flash 8 aceita gradientes lineares e radiais. É possível adicionar até 16
cores a um gradiente.
Aplique um gradiente a um gráfico selecionando o gráfico no Stage e
escolhendo Linear ou Radial como tipo de preenchimento no painel Color Mixer.
Gradiente linear
3 - 23
Transformando gradientes
Altere a largura, a rotação e a posição dos gradientes por meio da
ferramenta Gradient Transform.
Ferramenta Gradient Transform
3 - 24
Trabalhando com amostras de cores
As amostras de cores se referem a um pequeno conjunto de quadrados
coloridos que você cria e mantém por meio do painel Color Swatches.
Use um conjunto de Color Swatch para manter as cores consistentes em
todos os seus aplicativos. Para isso:
•
Adicione cores ao painel Color Swatches selecionando-as com a
ferramenta Eyedropper em uma imagem.
•
Selecione uma amostra de cores no painel Color Swatches com a
ferramenta Eyedropper quando precisar usara a cor novamente em um
documento.
•
Salve as amostras de cores no painel para criar um arquivo de amostras
de cores (arquivo CLR) e importe esse arquivo em outros documentos
do Flash a fim de manter as cores e usá-las de maneira consistente em
documentos do Flash.
Salve, importe e exclua amostras de cores usando o menu de opções de
amostras de cores, que está disponível no lado esquerdo do painel Color
Swatches.
Menu de opções de amostras de cores
Nota: Para excluir uma amostra de cor, selecione-a no painel e selecione
Delete Swatch no menu de opções de amostras de cores.
3 - 25
Garantindo cores seguras para a Web
A implementação de cores na Web apresenta desafios específicos, pois os
monitores oferecem suporte a cores de maneiras diferentes, de acordo com
suas profundidades de cores.
As cores seguras para a Web são as 216 cores que funcionam de maneira
consistente entre diversas profundidades de cores em monitores e entre
plataformas Windows e Macintosh.
As cores seguras para a Web estão disponíveis como uma amostra de cores.
Web 216 é a amostra de cores padrão que é carregada no painel Color
Swatches de um novo documento.
Amostra de cores Web 216
3 - 26
Procedimento 3-4:
Trabalhando com painéis de cores
Neste procedimento, você executará as seguintes tarefas:
•
Aplicar um gradiente com o painel Color Mixer
•
Alterar a aparência de um gradiente com a ferramenta Fill Transform
•
Criar amostras de cores personalizadas
•
Carregar uma paleta de cores personalizadas com o painel Color Swatches
Etapas
Aplicando um gradiente ao gráfico de fundo
3. Selecione a camada de background para torná-la ativa. Clique com o
botão direito do mouse na camada (ou clique com a tecla Ctrl
pressionada no OS X) e escolha Lock Others no menu contextual.
4. Selecione o gráfico na camada background.
5. Expanda o painel Color Mixer.
6. Para aplicar um gradiente ao gráfico de fundo, clique no menu suspenso
Type no Color Mixer e altere o tipo de preenchimento para Linear.
7. Selecione o controle de gradiente esquerdo e digite #FF1900 no campo
hex.
8. Selecione o controle de gradiente direito e digite #990000 no campo hex.
Transformando o gradiente
9. Para alterar a largura, a posição e a rotação do gradiente, selecione a
ferramenta Gradient Transform no painel Tools.
10. Se as alças do controle Gradient Transform não aparecerem, clique
uma vez no gráfico preenchido com o gradiente.
11. Clique e arraste o controle position do gradiente para que fique
localizado na terça parte direita do gráfico.
12. Para diminuir o gradiente, clique e arraste o controle width.
3 - 27
Criando uma paleta de cores personalizada
13. Expanda o painel Color Swatches.
14. Para remover a paleta de cores atual, clique no menu Options no
painel Color Swatches e feche Clear Colors.
15. Expanda o painel Color Mixer se já não estiver expandido. Ele ainda
deve exibir as cores do gradiente. Se não, certifique-se de que o gráfico
de fundo esteja selecionado no Stage.
16. Para adicionar a cor do gradiente ao painel Color Swatches, posicione
na área Color Swatches. Clique no espaço cinza do painel. O gradiente
aparecerá na parte inferior do painel.
17. Selecione o controle de gradiente direito no painel Color Mixer.
Posicione o mouse no painel Color Swatches e clique para adicionar
a amostra.
18. No painel Tools, alterne para a ferramenta Selection e clique uma vez
no Stage para desmarcar o gráfico de fundo.
19. No painel Color Mixer, selecione o controle de cor do preenchimento
e posicione o cursor Eyedropper em uma das cores da imagem.
20. Clique com o Eyedropper na imagem header.jpg para selecionar uma
de suas cores.
21. Posicione o mouse no painel Color Swatches e clique para adicionar a
amostra de cor.
22. Selecione outras cores da imagem do banner.
Salvando e carregando amostras de cores
23. No painel Color Swatches, clique no botão de menu Options e
escolha Save Colors.
24. Salve as cores como o mySwatch.clr no diretório
25. Clique em OK.
3 - 28
26. No painel Color Swatches, clique no botão de menu Options novamente
e escolha Web216 para carregar a paleta de cores Web216.
27. Para carregar o arquivo CLR, selecione o menu Options no painel
Color Swatches e escolha Add Colors.
28. Carregue o arquivo mySwatch.clr de
{webroot}/mmcourses/frcc800/assets para adicionar suas cores
personalizadas à parte inferior do painel Color Swatches.
3 - 29
Usando símbolos de gráficos
É comum trabalhar com várias cópia de formas semelhantes ao criar
documentos do Flash especialmente animações e sistemas de navegação.
Se você precisasse copiar e colar sempre para fazer referência a uma forma,
seu trabalho seria entediante e o tamanho do arquivo ficaria inadministrável
rapidamente.
Os símbolos de gráficos permitem que você crie uma forma uma vez e faça
referência a ela várias vezes.
Símbolos
Um símbolo é um objeto reutilizável no Macromedia Flash. Ele pode ser
tão simples quanto um desenho estático ou tão complexo quanto um clipe
de filme que é executado dentro de outro clipe de filme.
Os símbolos permitem que você crie recursos e os utilize facilmente. Isso
ajuda a manter o documento pequeno quando você usa mais de uma
ocorrência de um recurso. Os símbolos também podem ajudar você a usar
o mesmo recurso de maneiras diferentes.
Há quarto tipos de símbolos ou comportamentos de símbolos:
•
Gráfico
•
Botão
•
Clipe de filme
•
Fonte
Durante o curso, você trabalhará com comportamentos de símbolos de
gráficos, clipes de filme e botões conforme o necessário. Durante esta
unidade, você trabalhará com símbolos de gráficos.
Os símbolos são armazenados na biblioteca de um documento do Flash.
Símbolos de gráficos
Os símbolos de gráficos, botões e clipes de filme têm suas próprias linhas
de tempo. As linhas de tempo de símbolos de gráficos dependem da linha
de tempo pai em que eles estão.
Os símbolos gráficos não podem ser controlados com ActionScript e não
podem conter ActionScript, símbolos de botões nem sons. Como não
podem ser programados, eles têm menos influência no tamanho do arquivo
do que um clipe de filme, que pode ser controlado com ActionScript. Você
aprenderá mais sobre clipes de filme na unidade 7.
Use símbolos de gráficos para conter gráficos estáticos que serão
reutilizados em um aplicativo ou serão usados para criar animações.
3 - 30
A biblioteca
Qualquer símbolo que você criar ou que for importado de um arquivo para
o documento será colocado automaticamente na biblioteca.
O painel Library exibe o conteúdo da biblioteca de um documento.
Selecione Window  Library para abrir o painel Library no ambiente de
desenvolvimento.
Assim que um símbolo for armazenado na biblioteca do documento, você
poderá criar instâncias dele no Stage.
Biblioteca de símbolos
3 - 31
Criando símbolos de gráficos e armazenando-os na biblioteca
Para criar um símbolo de gráfico:
•
Selecione no Stage o recurso a ser convertido em símbolo.
•
Clique com o botão direito (ou clique com Control no Mac) no recurso
e escolha Convert to Symbol, selecione Modify  Convert to Symbol
ou arraste-o para a biblioteca.
•
Nomeie o símbolo usando um prefixo gr para denotar que é um
símbolo de gráfico, escolha o tipo de comportamento Graphic e defina
seu registro como o canto superior esquerdo da caixa de diálogo
Convert to Symbol.
Caixa de diálogo Convert to Symbol
Nota: O campo Registration exibe a origem X,Y do símbolo.
Instâncias
Assim que um símbolo é armazenado na biblioteca de um documento, você
pode usá-lo repetidamente e entre documentos, arrastando-o da biblioteca
para o Stage.
Quando você arrasta um símbolo para o Stage, o Flash coloca uma cópia,
ou instância, do símbolo no Stage.
Os símbolos agem como modelos e as instâncias são ocorrências
exclusivas desses modelos no Stage.
3 - 32
Modos de edição de símbolos
Quando você arrasta uma instância de um símbolo para o stage, a instância
é selecionada e você entra automaticamente no modo de edição do símbolo.
No exemplo a seguir, o ícone grCircle na barra de título de um documento
indica que você está no modo de edição de símbolo:
Modo de edição de um símbolo chamado grCircle
Modo de edição de símbolo
Cada símbolo tem sua própria linha de tempo e estrutura de camadas,
separadas da linha de tempo principal. Quando você clica em um símbolo
diretamente na biblioteca ou quando clica em um símbolo e escolhe o
modo de edição, você entra automaticamente no modo de edição de
símbolo.
No modo de edição de símbolo, você não pode ver outros objetos no stage,
apenas os recursos do próprio símbolo.
Qualquer alteração que você faça ao editar o símbolo afetará o símbolo na
biblioteca e cada instância desse símbolo no documento. Outros símbolos e
a linha de tempo principal não serão afetados.
Selecione o ícone Scene 1 ou a seta da barra de título do documento para
voltar à edição do documento principal.
Barra de edição: modos de edição
3 - 33
Modo de edição no local
O modo de edição de símbolo também permite que você edite um símbolo
no local. Para acessar o modo de edição no local, você clica duas vezes na
instância do símbolo no stage ou escolhe Edit in Place no menu contextual.
Opção Edit in Place no menu contextual
O modo de edição no local simplesmente significa que todos os outros
recursos da linha de tempo principal são visíveis pela linha de tempo do
símbolo. Isso pode ser confuso, pois você precisa se lembrar de quais
elementos fazem parte do símbolo e quais fazem parte do documento
principal; no entanto, pode ser muito útil para o design para garantir que os
recursos apareçam no local adequado.
Modificando instâncias do símbolo
Você pode modificar uma instância sem afetar o símbolo. Para isso, clique
uma vez na instância e use o Property inspector para fazer alterações. Altere
uma instância, por exemplo, modificando sua cor, seu tamanho ou seu local.
Alterações de instância no Property inspector
Você não pode fazer alterações fundamentais em uma instância separadamente
de seu símbolo. Por exemplo, você não pode mudar a forma geral de uma
instância.
3 - 34
Procedimento 3-5:
Criando símbolos e instâncias de gráficos
•
Desenhar um retângulo no modelo Merge Drawing
•
Converter arte em um símbolo de gráfico
•
Usar uma instância de um símbolo de gráfico
•
Modificar propriedades do símbolo
•
Organizar o painel Library
Etapas
Desenhando um retângulo e convertendo-o em um símbolo
de gráfico
3. Insira uma nova camada acima da camada background e atribua a ela
o nome bars.
4. Clique com o botão direito do mouse (ou clique com a tecla Ctrl
pressionada no OS X) na camada bars e escolha Lock Others no
menu contextual.
5. Se as guias não estiverem visíveis, selecione View  Guides  Show
Guides para torná-las visíveis.
6. Selecione View  Guides  Lock Guides.
7. No painel Tools, selecione a ferramenta Rectangle.
8. Defina a cor do traço como No Stroke e a cor do preenchimento como
#990000.
9. Defina o modelo do desenho como Merge Drawing.
10. Defina o raio do canto como 10.
11. Usando as guias, desenhe um retângulo do canto superior esquerdo do
gráfico de fundo até a guia direita, com cerca de 100 pixels de altura.
13. Desenhe uma caixa de seleção ao longo do retângulo recém-desenhado
para que somente um pouco mais do que a metade inferior do retângulo
seja selecionada.
14. Pressione delete no teclado.
15. Clique das vezes no gráfico de retângulo restante para selecioná-lo.
16. Para converte o retângulo em um símbolo, pressione F8.
3 - 35
17. Nomeie o símbolo de gráfico como grBar.
18. Clique em OK.
Usando uma instância do símbolo de gráfico grBar
19. Selecione Window  Library se a biblioteca do documento já não
estiver aberta.
20. Arraste uma instância do símbolo de gráfico grBar para fora da
biblioteca e para dentro do Stage na camada bars.
21. Com a nova instância ainda selecionada, escolha Modify 
Transform  Flip Horizontal.
23. Arraste a instância do símbolo gráfico para a parte inferior do Stage,
alinhando seus cantos aos cantos do gráfico de fundo.
Organizando a biblioteca
24. No painel Library, clique no botão New Folder.
25. Nomeie a nova pasta de biblioteca como images.
26. Adicione outra pasta de biblioteca. Nomeie-a como graphic symbols.
27. Arraste a imagem header.jpg para a pasta de biblioteca images.
28. Arraste o símbolo de gráfico grBar para a pasta de biblioteca graphic
symbols.
29. Salve wt3-5.fla e feche-o.
3 - 36
Criando efeitos de máscara
Uma Máscara é um tipo de efeito especial de camada usado para revelar
partes selecionadas de outra camada sob ela.
Crie formas em uma camada de máscara para criar efeitos de máscara,
como refletores na imagem que mostra figuras enquadradas por uma forma
de gráfico em camada sobre ela. Você pode adicionar animação a um efeito
de máscara para criar efeitos de transição.
Efeito de máscara em uma imagem
Criando máscaras
Para criar uma máscara, você insere uma nova camada e a coloca
diretamente sobre a camada a ser mascarada. Você pode usar uma
ferramenta de desenho, como a ferramenta Oval ou Rectangle, para
desenhar a forma da máscara transparente. Por fim, clique com o botão
direito (ou clique pressionando Control no Macintosh) na camada e
selecione Mask no menu contextual.
As camadas de máscara e a camada que elas afetam são bloqueadas
automaticamente quando você aplica a máscara., o que produz o efeito de
máscara no ambiente de criação. Se desbloquear uma das camadas, você
verá o gráfico de máscara novamente; no entanto, ele só é visível na
criação. Quando selecionar Control  Test Movie, você verá a máscara se
comportando como o esperado.
3 - 37
Procedimento 3-6:
Criando um efeito de máscara
•
Desenhar um gráfico para usar como máscara
•
Criar um efeito de máscara com uma camada
Etapas
1. Abra o wt3-6.rawfla no diretório {webroot}/mmcourses/frcc800/walk.
Inserindo uma nova camada e desenhando um gráfico
3. Insira uma nova camada acima da camada image e atribua a ela o
nome image.
4. Clique com o botão direito do mouse (ou clique com a tecla Ctrl
pressionada no OS X) na camada mask e escolha Lock Others no
menu contextual.
6. Defina a cor do traço como No Stroke e a cor do preenchimento como
any color.
7. Defina o modelo do desenho como Object Drawing.
8. Defina o raio do canto como any radius.
9. Clique e arraste no Stage com a ferramenta Rectangle para desenhar
um retângulo sobre a imagem na camada image.
Criando o efeito de máscara
10. Para criar o efeito de máscara, clique com o botão direito ou clique
pressionando Control na camada mask no painel Layers.
11. No menu contextual, escolha Mask.
12. Observe como as camadas são bloqueadas.
13. Desbloqueie a camada mask.
14. Ajuste o gráfico de máscara, se desejado.
15. Selecione Control
Test Movie.
16. Feche o SWF.
3 - 38
Resumo da unidade
•
Você pode importar recursos de imagem de bitmap e gráficos vetoriais
para um documento do Flash.
•
Quando você importa uma imagem, ela também é adicionada à
biblioteca do documento para que você possa reutilizá-la facilmente
sem aumentar o tamanho do arquivo do documento.
•
Use camadas para organizar os recursos de um documento do Flash
para que sejam fáceis de ser selecionados e administrados. Camadas
são, literalmente, níveis de conteúdo dispostos uns sobre os outros.
•
Você pode criar gráficos vetoriais diretamente no ambiente de
desenvolvimento usando diversas ferramentas de criação.
•
Há dois modelos de desenho no Flash: Object Drawing, que trata traço
e preenchimento como um objeto agrupado, e Merge Drawing, que
mescla gráficos vetoriais não agrupados. Merge Drawing é o padrão.
•
Use as ferramentas de cor do Flash, como o painel Color Swatches,
para manter um esquema de cores consistentes e seguras para a Web
em todo o site.
•
Os símbolos de gráficos permitem que você crie uma forma uma só
vez e crie várias instâncias dela arrastando um símbolo da biblioteca
para o Stage.
•
Clique duas vezes em uma instância no Stage para editar o símbolo no
local.
•
Clique uma vez em uma instância de símbolo no Stage para
modificá-la.
•
Use a camada de máscara para criar técnicas como refletores ou para
mostrar imagens através de outras imagens.
3 - 39
Revisão da unidade
1. Quais são algumas das diferenças entre imagens de bitmap e vetoriais?
2. Quais são os dois métodos que você pode usar para adicionar imagens
a um documento do Flash?
3. Como você controla a ordem de empilhamento das camadas?
4. Por que você desenharia no modelo Merge Drawing?
5. Qual é o objetivo do painel Color Swatches?
6. Quais são as ferramentas que você usa para retirar amostras de cores de
imagens de bitmap no Stage?
7. Qual é a diferença entre um símbolo de gráfico e uma instância?
8. Onde você adiciona um efeito de máscara a uma imagem?
3 - 40
Laboratório 3:
Durante esta laboratório, você começará a criar a interface da seção Menu
do Café Townsend.
Objetivos
•
Importar um gráfico de bitmap
•
Usar o painel Align
•
Criar camadas
•
Usar réguas e guias
•
Desenhar um gráfico com o modelo Object Drawing
•
Alterar as propriedades do gráfico usando o Property inspector
•
Adicionar um preenchimento de gradiente a um gráfico
•
Criar um símbolo de gráfico.
•
Organizar a biblioteca
Etapas detalhadas
1. Abra o lab2.fla no diretório {webroot}/mmcourses/frcc800/lab.
2. Salve o arquivo como lab3.fla na mesma pasta.
Importando um gráfico de bitmap
3. Importe o gráfico do cabeçalho principal diretamente para o Stage
selecionando File  Import  Import to Stage.
4. Na caixa de diálogo Import to Stage, navegue para
{webroot}/mmcourses/frec800/assets/header.jpg.
5. Clique em Import.
6. Alterne para a ferramenta Selection no painel Tools e selecione o
gráfico de bitmap no Stage.
7. Com o Property inspector, defina o valor de Y como 10.
8. Expanda o painel Align. Abra-o se já não estiver aberto (Window 
Align).
9. No painel Align, selecione o botão To Stage.
10. Para centralizar a imagem de bitmap no Stage, clique no botão Align
Horizontal Center no painel Align.
3 - 41
11. No painel Layers, altere o nome de Layer 1 para images e bloqueie a
camada.
Criando uma nova camada e desenhando um gráfico
12. Insira uma nova camada acima da camada de imagens e atribua a ela o
nome background.
13. Arraste a camada background para a parte inferior do painel Layers.
14. Certifique-se de que as réguas estejam visíveis selecionando View 
Rulers.
15. A partir da régua horizontal, arraste uma guia até 120 pixels.
16. A partir da régua vertical, arraste uma guia até 150 pixels.
18. Defina a cor de traço como No Stroke.
19. Defina a cor de preenchimento como #FFFF99.
3 - 42
22. Com a ferramenta Rectangle ainda selecionada, clique na cruz das
guias para desenhar um retângulo de cerca de 570 de largura por
460 pixels de altura. Use as marcas de seleção na régua para guiar o
desenho.
Aplicando um preenchimento de gradiente ao gráfico
23. Expanda ou abra o painel Color Mixer (Window  Color Mixer).
24. Com o retângulo no Stage ainda selecionado, altere o tipo de
preenchimento de Solid para Linear.
25. Redefina o controle de cor esquerdo para #FFFF99.
26. Clique duas vezes no controle de cor direito e defina a cor para um
laranja mais escuro, como #FF9900.
27. Selecione a ferramenta Gradient Transform pelo painel Tools.
28. Ajuste a largura e a posição do gradiente para que ele ocupe a extrema
direita do retângulo no Stage. O gradiente deve se parecer com a figura
a seguir.
3 - 43
Convertendo o gráfico de fundo em um símbolo
29. Escolha a ferramenta Selection pelo painel Tools e selecione o gráfico
de retângulo no Stage.
30. Selecione Modify  Convert to Symbol para converter o retângulo
em um símbolo.
31. Nomeie o símbolo como grBackground.
32. Aplique a ele um comportamento Graphic.
33. Certifique-se de que o registro esteja definido como o canto superior
esquerdo.
34. Clique em OK.
Criando mais camadas
35. Crie uma nova camada e atribua a ela o nome actions.
36. Crie uma nova camada e atribua a ela o nome button text.
37. Crie outra camada e atribua a ela o nome buttons.
38. Crie uma camada final e atribua a ela o nome static text.
39. Organize as camadas como aparecem na figura a seguir:
3 - 44
40. Expanda o painel Library. Se ele já não estiver aberto, selecione
Window  Library.
41. Crie duas pastas de biblioteca.
42. Nomeie a primeira pasta de biblioteca como images.
43. Nomeie a segunda pasta de biblioteca como graphic symbols.
44. Arraste header.jpg para a pasta de biblioteca images.
45. Arraste grBackground para a pasta de biblioteca graphic symbols.
46. Salve e feche lab3.fla.
Etapas gerais
Importando um gráfico de bitmap
3. Altere o nome de Layer 1 para images.
4. Importe o header.jpg do diretório
{webroot}/mmcourses/frcc800/assets para o Stage.
5. Altere a coordenada Y de header.jpg para 10.
6. Alinhe header.jpg ao centro horizontal do Stage.
Criando uma nova camada e desenhando um gráfico
7. Crie uma nova camada e atribua a ela o nome background.
8. Arraste a camada background abaiso da camada images.
3 - 45
9. Torne as réguas visíveis.
10. Arraste uma guia horizontal para 120 pixels e uma guia vertical para
150 pixels.
11. Selecione a ferramenta Rectangle.
12. Defina o traço como No Stroke e o preenchimento como #FFFF99.
13. Defina o modelo de desenho como Object Drawing e o raio do canto
como 10.
14. Usando as guias e réguas, desenhe um retângulo com cerca de
570 pixels de largura por 460 pixels de altura.
15. Aplique um gradiente linear ao gráfico, usando as cores #FFFF99 e
#FF9900.
16. Transforme o gradiente com a ferramenta Gradient Transform para
que ele se pareça com a seguinte figura:
Convertendo o gráfico de fundo em um símbolo
17. Selecione o retângulo que você desenhou no Stage e converta-o em
um símbolo.
18. Nomeie o símbolo grBackground e transforme-o em um símbolo de
gráfico.
Criando mais camadas
19. Crie uma nova camada e atribua a ela o nome actions.
20. Crie uma nova camada e atribua a ela o nome button text.
21. Crie outra camada e atribua a ela o nome buttons.
22. Crie uma camada final e atribua a ela o nome static text.
3 - 46
23. Organize as camadas como aparecem na figura a seguir:
24. Na biblioteca do documento, crie duas pastas de biblioteca.
25. Nomeie as pastas como graphic symbols e images.
26. Arraste a imagem header.jpg para a pasta de camadas images.
27. Arraste o símbolo de gráfico grBackground para a pasta de camadas
graphic symbols.
28. Salve e feche lab3.fla.
3 - 47
3 - 48
Unidade 4:
Usando texto com eficiência
•
Criar texto estático.
•
Criar campos de texto de entrada.
•
Preencher previamente os campos de texto usando ActionScript.
•
Usar práticas recomendadas para atribuir propriedades de fonte.
•
Criar campos de formulário usando os componentes de texto Flash.
Tópicos da unidade
•
Trabalhando com recursos de texto
•
Usando texto estático
•
Criando formulários no Flash
•
Questões de fontes
•
Usando filtros para efeitos de texto
4-1
Trabalhando com recursos de texto
O texto é mais um tipo de recurso que você adiciona a um documento do
Flash. O texto é o meio principal de informação sobre seu aplicativo, site e
funções da empresa.
Sobre os recursos de texto:
•
O texto é o conteúdo que você cria.
•
A fonte se refere aos caracteres usados para exibir o texto.
•
O contorno de fonte se refere aos gráficos que criam as letras.
Nesta unidade, você aprenderá sobre as características de texto e fonte
usando as ferramentas e os recursos de texto Flash para adicionar qualidade
e recursos de texto comuns a documentos do Flash.
Criando recursos de texto
Todo o texto adicionado ao Stage está contido em um campo de texto. Use
a ferramenta Text no painel Tools para criar os campos de texto no Stage e
preenchê-los com texto. Os campos de texto podem ter largura fixa, para
colunas e parágrafos, ou largura variável, para uma única linha de texto.
Ferramenta Text
Propriedades de texto
No Stage, você pode usar a ferramenta Selection para selecionar o campo
de texto. Em seguida, você pode visualizar e modificar suas propriedades
no Property Inspector para definir características de texto e de fonte, como
tipo de texto, tipo de fonte, tamanho de fonte, cor de fonte e opções de
eliminação de serrilhado.
Propriedades de campo de texto
4-2
A largura e a altura são alteradas usando-se o Property inspector para
distorcer o texto em um campo de texto, o que pode ser útil para efeitos
visuais. Para alterar a largura e a altura dos campos de texto a fim de
modificar a quebra de colunas e palavras, use a ferramenta Text ou a
ferramenta Selection.
Tipo de campo de texto
Os campos de texto podem ter várias finalidades em aplicativos Flash. Eles
podem, por exemplo, conter instruções a serem seguidas por usuários ou
aceitar textos inseridos por usuários em um arquivo SWF exibido no Flash
Player 8.
Use o campo Type do Property inspector para descrever o tipo de recurso
de texto que deseja atribuir ao campo de texto. Quando você seleciona um
tipo de texto nesse campo, o Property inspector é atualizado para exibir os
campos apropriados.
Tipos de campo de texto
Há três tipos de texto que podem ser atribuídos a campos de texto no
Property inspector:
•
Texto estático
•
Texto dinâmico
•
Entrada de texto
Um campo de texto estático exibe simplesmente informações digitadas
por você durante o desenvolvimento. O usuário não pode alterar o texto.
Os dois outros tipos serão abordados na seção subseqüente.
Exemplo de uso
Por exemplo, um formulário de entrada de usuário pode ser criado usandose texto estático para os rótulos de campo do formulário e campos de texto
de entrada para digitação de informações pelo usuário.
Texto estático versus texto de entrada
4-3
Usando texto estático
O texto estático é usado para exibir informações que não serão alteradas
regularmente nem baseadas em entrada de usuário. Opções de navegação,
texto de copyright, histórico de empresa, descrições de entrada e instruções
são grandes exemplos de uso do texto estático.
O texto estático não pode ser controlado nem alterado pelo ActionScript.
Adicionando texto estático
O texto estático só pode ser criado com a ferramenta Text. Para cirar um
campo de texto no Stage, selecione primeiro a ferramenta Text.
Para criar um campo de texto com largura fixa, pressione e arraste com a
ferramenta Text no Stage. Linhas de texto longas serão quebradas em um
campo de texto de largura fixa.
Para criar um campo de texto com largura variável, clique uma vez no
Stage com a ferramenta Text e inicie a digitação. A largura do campo de
texto será expandida conforme você for digitando.
Vantagens e desvantagens do campo de texto estático
Vantagens:
•
Os campos de texto estático incorporam automaticamente o
contorno de fonte em um SWF quando o arquivo FLA é publicado.
Isso significa que você pode usar a fonte que desejar.
•
O serrilhado dos campos de texto estático é automaticamente
eliminado, suavizando a fonte e resultando geralmente em uma
aparência melhor.
•
Podem ser aplicados efeitos de filtro aos campos de texto estático.
Desvantagens:
4-4
•
Os campos de texto estático aumentarão o tamanho do arquivo de
um documento devido à incorporação do contorno de fonte.
•
As fontes pequenas são de difícil leitura quando o serrilhado é
eliminado.
Alterando o método de processamento de fonte
O Flash 8 e o Flash 8 Professional oferecem aos designers e
desenvolvedores mais controle sobre a exibição de fontes no SWF final.
Use o método de processamento de fonte para alterar o modo como o
serrilhado é eliminado da fonte em diferentes situações.
•
Use device fonts faz com que o Flash recupere a fonte do
computador do usuário final. As fontes de dispositivo são
apresentadas com serrilhado por padrão e devem estar instaladas
no computador do usuário final para serem exibidas.
•
Anti-alias for readability suaviza as letras no texto para torná-las
mais legíveis na maioria dos tamanhos de fonte.
•
Anti-alias for animation altera a aparência do texto otimizado para
animações de movimento.
•
Bitmap text (no anti-alias) não suaviza a fonte de maneira alguma
e é a melhor opção para tamanhos pequenos de fontes sem serifa.
•
Custom anti-alias oferece aos designers e desenvolvedores mais
controle sobre o modo como a fonte é apresentada no SWF final.
Métodos de processamento de fonte
4-5
Procedimento 4-1:
Adicionando texto estático a um documento
•
Usar a ferramenta Text para adicionar texto estático a um documento
•
Redimensionar os campos de texto
•
Alterar as propriedades de texto
•
Alinhar campos de texto no Stage
•
Alterar o método de processamento de fonte para tornar o texto mais
legível
Etapas
Adicionando texto estático a um documento
3. Clique com o botão direito do mouse (clique com a tecla Ctrl pressionada
no OS X) na camada static text e escolha Lock Others no menu
contextual.
4. No painel Tools, selecione a ferramenta Text.
5. No Property inspector, defina a fonte como Arial.
6. Defina o tamanho de fonte como 12.
7. Defina a cor de fonte como #003300.
8. Para adicionar texto estático à camada static text, clique uma vez e
digite a palavra Name:.
9. Usando a ferramenta de texto, crie mais quatro campos de texto:
•
Phone:
•
Email:
•
Subject:
•
Message:
10. Digite Submit: no canto inferior direito do gráfico de fundo.
11. Digite Café Townsend no canto superior esquerdo do documento.
12. Selecione View  Guides  Show Guides se suas guias não
estiverem visíveis.
4-6
14. Alinhe todos os campos de texto de modo que a base das letras toquem
levemente suas respectivas guias como mostrado na tela abaixo.
15. Com a ferramenta Selection, desenhe a caixa de seleção ao redor do
texto à esquerda e expanda o painel Align.
16. Desmarque a opção To Stage.
17. Pressione o botão Align Left Edge para alinhar os campos de texto.
Adicionando e redimensionando um campo de texto de
largura fixa
18. No painel Tools, alterne para a ferramenta Text.
19. No canto superior direito do gráfico de fundo, pressione e arraste com
a ferramenta Text para criar um campo de texto de largura fixa.
20. Digite algo como: We’d love to hear from you at Café
Townsend. Fill out the form below to send us your
questions, concerns, or comments.
22. Redimensione o campo de texto clicando nele uma vez e arrastando as
alças de redimensionamento, diminuindo assim seu tamanho, até que
ele ocupe praticamente um quarto da largura do gráfico de fundo.
Alterando as propriedades de campo de texto
23. Usando a ferramenta Selection, selecione o texto Café Townsend.
24. No Property inspector, altere a fonte para Arial Black.
25. Altere o tamanho de fonte para 24.
4-7
Alterando o método de processamento de fonte
26. Usando a ferramenta Selection, selecione o texto Name:.
27. No Property Inspector, altere o método de processamento de fonte para
Anti-Alias for Readability.
28. Repita esse processo para todos os campos de texto no Stage.
4-8
Criando formulários no Flash
Assim como nos formulários de HTML, os formulários do Flash são usados
para aceitar entrada de usuário. Ao criar formulários no Flash em vez de HTML:
•
A interface de usuário é a mesma para diferentes navegadores e
plataformas.
•
A validação e a entrada do usuário podem ser executadas no lado do
cliente, portanto, o processamento requer menos sobrecarga e tempo
que os formulários em HTML.
•
A formatação Rich Text pode ser integrada nos formulários.
•
Componentes de texto Flash criados previamente podem ser facilmente
adicionados ao formulário.
•
Os campos de formulário personalizados, como os controles deslizantes
personalizados, são mais fáceis de se criar no Flash do que em HTML ou
JavaScript.
Os campos de formulário são criados usando-se campos de texto e
componentes de texto Flash.
Como em qualquer formulário, você ou um desenvolvedor precisará
programar o back-end para manipular os dados coletados.
Atribuindo tipos de texto a campos do formulário
Atribua os tipos de texto a campos de texto baseado em suas finalidades
em um formulário. Há três tipos de campos de texto disponíveis:
Tipo
Descrição
Edição
Uso
Static
Campos de texto com
conteúdo e características
determinados durante a
criação do documento do
Flash
Não podem ser editados
por usuários
texto do corpo
ou títulos
Input
Campos que aceitam
entrada do usuário
Editados pelo usuário,
mas também podem ser
preenchidos previamente
ou atualizados em tempo
de execução
formulários e
pesquisas
Dynamic
Campos programáveis que
são atualizados em tempo
de execução
Preenchem e formatam
o texto exibido usando
variáveis de programa,
ActionScript e tags
HTML 1.0
preenchimento
prévio de uma
caixa de lista ou
exibição de
estatísticas
dinâmicas
Não podem ser editados
por usuários
4-9
Usando texto de entrada
Os campos de texto de entrada são usados para coletar informações de um
usuário final. Você pode solicitar que os usuários finais se registrem para
usar o seu site ou digitem respostas às perguntas em um curso de e-learning,
ou você pode ainda criar um aplicativo de webmail no Flash que precise
usar texto de entrada.
Às vezes, os campos de texto de entrada devem limitar a quantidade de
informação digitada neles. Use o campo Max Chars no Property inspector
para limitar a quantidade de texto que pode ser digitada em um campo.
Nota: O número zero (0) no campo Max Chars significa que não há limite
de caracteres.
Texto de entrada
O texto de entrada usa fontes de dispositivo por padrão.
O serrilhado não é eliminado nos campos de texto de entrada por padrão.
Para usar fontes especiais e texto de entrada sem serrilhado, você deve
incorporar o contorno de fonte para todos os campos de texto nos quais
deseja usar a fonte.
Incorporando um contorno de fonte
Para incorporar um contorno de fonte para um campo de texto de entrada,
selecione o campo e, em seguida, pressione o botão Embed no Property
inspector.
Você pode incorporar contorno de fonte inteiro, um intervalo de caracteres
ou um conjunto limitado de caracteres.
Atribuindo tipo de linha
Ao criar campos de texto de entrada, você também precisa especificar se
ele é Single line (para uma única linha) ou Multiline (para diversas linhas)
no tipo de linha. Um campo de texto de uma única linha não quebra nem
expande para outra linha.
A figura abaixo realça o campo de tipo de linha que é exibido para campos
de texto de entrada.
Tipo de linha para campos de texto
4 - 10
Exibindo a borda de texto
Você pode determinar que o Flash coloque uma borda ao redor do texto
clicando na opção no Property inspector. O ícone Show Border Around
Text está realçado na figura abaixo. Caso contrário, você pode criar suas
próprias bordas e planos de fundo com as ferramentes de desenho do Flash.
Opção Show border around text
Adicionando um nome de instância
Os nomes de instância são usados para recuperar informações de um
campo de texto de entrada usando ActionScript. Os nomes de instância
para cada campo de texto devem ser exclusivos e funcionam da mesma
maneira que as IDs de campo em HTML. Neste curso, você não usará
nomes de instância com campos de texto, mas saiba sobre seu uso geral.
4 - 11
Procedimento 4-2:
Adicionando texto de entrada a um documento
•
Adicionar campos de texto de entrada
•
Alterar as propriedades de campo de texto de entrada
•
Importar um símbolo de outro arquivo FLA
•
Testar seu aplicativo
Etapas
1. Abra o wt4-1.fla em {webroot}/mmcourses/frcc800/walk.
Adicionando texto de entrada a um documento
3. No painel Layers, insira uma nova camada pressionando o botão Insert
New Layer. Renomeie a camada input text.
4. Clique com o botão direito do mouse (clique com a tecla Ctrl
pressionada no OS X) na camada input text e escolha Lock Others no
menu contextual.
5. Selecione a ferramenta Text no painel Tools.
6. No Property inspector, escolha Input Text no menu suspenso Type.
7. Defina a fonte como Arial.
9. Defina a cor de fonte como #274C3A.
10. Para criar um campo de texto de entrada, pressione e arraste com a
ferramenta Text no Stage.
11. Redimensione o campo de texto até que fique com praticamente 200
pixels de largura.
12. Usando a ferramenta Selection, reposicione o campo de texto de modo
que fique ao lado do campo estático Name:.
4 - 12
Fazendo cópias de um campo de texto
13. Alterne para a ferramenta Selection no painel Tools.
14. Clique uma vez no campo de texto de entrada.
15. Duplique o campo de texto. No Windows, pressione e mantenha
pressionada a tecla Alt e, em seguida, clique e arraste com o mouse
para criar um campo de texto duplicado. No OS X, use a tecla Option.
Libere o mouse quando o campo estiver na posicão desejada.
16. Repita a etapa 15 para criar mais duas cópias dos campos de texto de
entrada.
17. Alinhe os campos de texto ao texto estático:
Criando uma área de texto
18. Alterne para a ferramenta Selection no painel Tools se esta ainda não
estiver selecionada.
19. Clique uma vez no Stage e uma vez na ferramenta Text
20. No Property inspector, altere o tipo de linha para Multiline.
21. Crie uma área de texto à direita do centro do Stage pressionando e
arrastando no Stage. Arraste para baixo de modo que a área de texto
possa exibir mais de uma linha de texto.
4 - 13
Importando um símbolo de gráfico para indicar os campos
de texto
22. No painel Layers, pressione no botão Insert New Layer para criar
uma nova camada acima da camada de texto de entrada. Atribua o
nome input boxes à nova camada.
pressionada no OS X) na camada input boxes e escolha Lock Others
no menu contextual.
24. Importe um gráfico de outro arquivo FLA selecionando File 
Import  Open External Library.
25. Procure em {webroot}/mmcourses/frcc800/walk e abra o
graphicsToShare.fla.
26. Na biblioteca graphicsToShare.fla, arraste uma instância do símbolo
de gráfico textFieldBackground para o Stage. Observe que o símbolo
de gráfico foi adicionada à biblioteca do wt4-2.fla.
27. Arraste uma instância do símbolo de gráfico textAreaBackground
para o Stage.
28. Feche a biblioteca externa graphicsToShare.fla.
29. Na biblioteca do documento wt4-2.fla, arraste mais três instâncias de
textFieldBackground para o Stage.
30. Organize os seus símbolos de gráficos de maneira similar à exibida na
tela a seguir.
4 - 14
Alterando as propriedades de campo de texto de entrada
31. Bloqueie a camada input boxes. Desbloqueie a camada input text.
32. Com a ferramenta Selection, redimensione todos os campos de texto
de modo que encaixem perfeitamente dentro do contorno para a caixa
de texto.
33. Altere a área de texto para que caiba dentro do contorno para a seção
de mensagem.
Testando um filme
34. No menu suspenso Control, escolha Test Movie.
35. Digite os textos nos campos de texto de entrada.
36. Feche o arquivo SWF.
4 - 15
Adicionando efeitos de filtro a campos de texto
Os efeitos de filtro são fornecidos com o Flash 8 Professional. Esses são
efeitos visuais que podem ser aplicados a campos de texto, símbolos de
clipe de filme e símbolos de botão.
Os efeitos de filtro são adicionados na guia Filters no Property inspector.
Adicionando um filtro de sombreamento
Selecione o campo de texto no Stage ao qual deseja adicionar um filtro.
Na guia de filtro do Property inspector, pressione no botão de adição de
filtro e escolha Drop Shadow.
Quando você ajusta as configurações de sombreamento, o campo de texto
no Stage é atualizado automaticamente.
Efeitos de filtro no Flash
Usando práticas recomendadas para filtro
Os efeitos de filtro podem tornar o desempenho da reprodução lento no
SWF final. Como resultado, você deveria:
Usar filtros moderadamente.
Certificar-se de ajustar a qualidade para a mais apropriada para o seu
aplicativo.
4 - 16
Procedimento 4-3:
Adicionando efeitos de filtro a texto
•
Adicionar um efeito de filtro a texto estático.
•
Modificar a aparência do efeito de filtro.
Etapas
1. Abra o wt4-2.fla em {webroot}/mmcourses/frcc800/walk.
Adicionando um efeito de filtro ao cabeçalho principal.
pressionada no OS X) na camada static text e escolha Lock Others no
menu contextual.
4. Alterne para a ferramenta Selection no painel Tools.
5. Clique uma vez no Stage e uma vez no texto Contact Café Townsend.
6. No Property inspector, alterne para a guia Filters.
7. Para adicionar um efeito de filtro, pressione o botão Add Filter.
8. Na lista de filtros, escolha Drop Shadow.
9. Defina blur como 2.
10. Defina distance como 2.
11. Selecione os botões Knockout, Inner Shadow e Hide Object para ver
o efeito que eles têm no texto. Desmarque essas opções após concluir.
Adicionando um efeito de filtro ao texto Submit.
12. Use a ferramenta Selection para selecionar o texto Submit no Stage.
14. Para adicionar um efeito de filtro, pressione o botão Add Filter.
15. Na lista de filtros, escolha Drop Shadow.
17. Defina distance como 2.
18. Teste o filme selecionando Control  Test Movie.
19. Feche o SWF.
20. Salve wt4-3.fla e feche o arquivo.
4 - 17
Questões de fontes
Os arquivos SWF que você publica incluem formas e imagens, além das
propriedades de fontes que você atribui a recursos de texto.
Fontes de dispositivo e incorporadas
Para exibir texto, um SWF precisa que as fontes atribuídas ao texto sejam
incorporadas no arquivo SWF ou precisa contar com as fontes no
computador do usuário (fontes de dispositivo).
Você deve especificar se incorporará as fontes ou se usará fontes de
dispositivo para cada recurso de texto no Stage. Cada tipo de texto tem
suas próprias características e padrões de fonte.
Texto estático
Como mencionado anteriormente na unidade, quando você publica um
FLA com texto estático, por padrão o Flash incorpora o contorno da fonte
no SWF, que o SWF usa para exibir o texto no Flash Player. Embora
assegure que a experiência do usuário seja sempre a mesma, isso pode criar
um SWF grande.
Você pode reduzir o tamanho do arquivo SWF ativando as fontes de
dispositivo no menu de método de processamento de campos de texto
estático. Use device fonts instrui o Flash Player a localizar fontes idênticas
ou semelhantes na máquina de um usuário ao carregar esse aplicativo.
4 - 18
Texto de entrada e dinâmico
Ao contrário dos campos de texto estáticos, as fontes não são incorporadas
para campos de texto de entrada ou dinâmicos. Quando você publica um
FLA que tenha campos de texto de entrada ou dinâmicos, por padrão o
Flash armazena os nomes das fontes usadas no SWF para que as fontes de
dispositivo possam ser usadas para exibir o texto na máquina de um
usuário.
Quando o SWF é carregado no Flash Player, ele usa os nomes das fontes
para localizar fontes idênticas ou semelhantes na máquina do usuário. Isso
mantém o tamanho do arquivo SWF no mínimo para uso de fontes.
Quando necessário, você pode exportar contornos de fontes (fontes
incorporadas) com texto de entrada ou dinâmico clicando em Embed no
Property inspector e selecionando as fontes a serem incorporadas no
arquivo SWF.
O Property inspector a seguir destaca o botão Embed. O botão Embed está
disponível para campos de texto de entrada e dinnâmicos.
Botão Embed
O Flash não pode converter todas as fontes em contornos. Para verificar se
uma fonte pode ser exportada como contorno, selecione View  Preview
Mode  Anti-alias Text para visualizar o texto. O tipo com bordas
dentadas indica que o Flash não reconhece o contorno da fonte e não
exportará o texto.
4 - 19
Mapeamento de fontes em arquivos FLA
As fontes podem causar problemas durante o desenvolvimento quando
houver alguma especial no FLA e diferentes usuários trabalharem no
arquivo em computadores diferentes.
No passado, os usuários viam texto exibido com uma fonte padrão quano
abriam um FLA em uma máquina que não tinha a fonte instalada.
Com o Flash 8, a janela Font Mapping aparece automaticamente quando as
fontes em um FLA não estão instaladas no computador em que está sendo
aberto.
Use a janela Font Mapping para selecionar fontes ausentes e mapeá-las
para fontes disponíveis no computador atual.
A janela Font Mapping é exibida a seguir.
Caixa de diálogo Font Mapping
Texto sem serrilhado
Cada fonte é composta de uma série de quadrados pretos e, quando o
tamanho de ponto aumenta, as bordas se tornam mais destacadas e podem
parecer dentadas ou serrilhadas.
A eliminação de serrilhado se refere a um processo de suavização das
bordas de uma fonte. Ela gera os seguintes resultados:
•
Textos com 12 pontos ou mais têm melhor aparência; as bordas são
suaves e nítidas.
•
Textos com menos de 11 pontos ficam borrados e difíceis de serem
lidos.
•
O texto sem serrilhado não é bem redimensionado em um navegador;
as bordas se tornam dentadas e ele é difícil de ser lido.
A eliminação de serrilhado é feita automaticamente em texto estático
quando a fonte é incorporada no SWF.
4 - 20
Para melhorar a legibilidade de textos pequenos, você pode:
•
Usar fontes de dispositivo em um campo de texto estático, pois
nenhuma eliminação de serrilhado será feita em campos mapeados para
fontes de dispositivo.
•
Usar campos de texto de entrada ou dinâmicos, pois a eliminação de
serrilhado não é feita nesses campos.
•
Usar um tamanho de 12 pontos ou mais ao usar eliminação de
serrilhado.
Quando você desejar ver a aparência de uma fonte antes de publicar um
arquivo SWF, selecione View  Preview Mode ou teste o filme com
Control  Test Movie.
Práticas recomendadas para fontes em relação à eliminação de serrilhado
A seleção do melhor tipo de texto e propriedades de fontes dependerá do
objetivo do texto em um aplicativo, assim como do tamanho da fonte.
Use as seguintes diretrizes ao selecionar propriedades de texto:
•
Ao trabalhar com 9 a 12 pontos, use Anti-alias for readability como
método de processamento de fontes.
•
Para fontes iguais ou com menos de nove pontos, escolha Bitmap text
(no anti-alias) como método de processamento.
•
Cuidado com as escolhas de fontes. Alguma fontes não são legíveis,
a menos que o serrilhado seja eliminado.
•
Não use fontes especiais, a não ser que você tenha que fazer isso e não
tenha que incorporar fontes.
•
Use fontes de dispositivo sempre que possível.
•
Quando você desejar aplicar efeitos de texto não disponíveis no Flash,
converta o texto em uma imagem usando um programa de edição de
imagens e importe-a para o Flash.
4 - 21
Resumo da unidade
4 - 22
•
Use as ferramentas Text e Selection e o Property inspector para
adicionar e modificar recursos de texto estático, de entrada e dinâmico.
•
O texto estático é mais útil para situações que não serão alteradas
regularmente nem baseadas em entrada de usuário.
•
O texto estático incorpora contornos de fontes por padrão, permitindo
que você use fontes especiais
•
Ative as fontes de dispositivo para criar arquivos menores e para
desativar a eliminação de serrilhado, mas use fontes comuns.
•
Os campos de texto devem ser redimensionados com a ferramenta Text
ou Selection.
•
Os formulários do Flash são independentes do navegador, executam
processamento no cliente e podem incluir formatação complexa.
•
O texto de entrada é usado para coletar informações de usuários e,
por padrão, não incorporam contornos de texto.
•
O texto de entrada usará fontes de dispositivo por padrão, mas é
possível usar fontes especiais por meio da incorporação dos contornos
das fontes.
•
Você pode criar seus próprios fundos e bordas para campos de texto de
entrada.
•
O SWF que você publica inclui as propriedades da fonte que você
atribui a recursos de texto.
•
É possível adicionar efeitos de filtro a campos de texto estático.
•
Os efeitos de filtro devem ser usados com pouca freqüência.
Revisão da unidade
1. Quais são os três diferentes tipos de campos de texto e qual é a
diferença?
2. Por que você criaria um formulário Flash, em vez de HTML?
3. O que faz o método de processamento de fonte?
4. Por que você usaria fontes de dispositivo ao publicar um SWF?
5. Que tipos de texto devem ter o serrilhado eliminado?
6. O que são os efeitos de filtro e por que você os usaria?
4 - 23
Laboratório 4:
Adicionando recursos de texto
Neste laboratório, você adicionará texo ao aplicatvo de menu que começou
a ser criado no laboratório anterior.
Objetivos
•
Adicionar texto estático a um documento
•
Alterar as propriedades do texto com o Property inspector
•
Alinhar texto no Stage
•
Alterar o método de processamento de fonte
•
Adicionar um efeito de filtro a texto
•
Verificar a ortografia
Etapas detalhadas
3. Selecione a camada static text no painel Layers, clique nela com o
botão direito do mouse ou com a tecla Ctrl pressionada e, em seguida,
selecione Lock Others no menu contextual.
4. Clique uma vez no Stage e uma vez na ferramenta Text no painel Tools.
5. No Property inspector, defina a fonte como Arial Black.
7. Defina a cor de fonte como #33FF00.
8. Defina o método de processamento de fonte como Anti-alias for
readability.
9. Crie um campo de texto de largura fixa clicando e arrastando com a
ferramenta de texto próximo ao canto superior esquerdo do Stage,
abaixo da imagem do cabeçalho.
10. Digite: Click on the options below to see our
delicious menu.
4 - 24
11. Crie um campo de texto com largura variável clicando em outro local
abaixo do parágrafo que você acabou de digitar.
12. Adicione o texto Appetizers.
13. Adicione o texto Entrees abaixo do campo de texto anterior.
14. Adicione o texto Desserts abaixo do campo de texto anterior.
15. Adicione o texto Catch of the Day antes do campo de texto
anterior.
16. Use as alças de redimensionamento no campo de texto Catch of the
day para deixar o bloco de texto com 2 linhas.
17. COm o Property inspector, justifique centralizando o texto Catch of
the Day.
18. No canto inferior direito do Stage, adicione o texto: Café Townsend:
A Fictional Company
19. Na parte superior do gráfico de fundo, digite: Café Townsend
Presents Our Menu.
20. Organize os campos de texto de maneira semelhante à disposição
exibida na figura a seguir:
4 - 25
Alterando propriedades de texto
21. Selecione o campo de texto na parte inferior direita do Stage com a
22. No Property inspector, altere a fonte para tamanho 9.
23. Altere o método de processamento da fonte para Bitmap text (no antialias).
24. Selecione o campo de texto com a frase Café Townsend Presents Our
Menu.
26. Defina a cor da fonte como #530F06.
27. Defina a coordenada X como 228 e a coordenada Y como 131.
28. Clique com a tecla Shift pressionada para selecionar os campos de
texto que exibem as opções de menu.
29. Recorte o texto para a área de transferência selecionando Edit  Cut.
30. Desbloqueie a camada button text.
31. Cole os campos de texto na camada button text selecionando Edit 
Paste in Place.
Aplicando um efeito de filtro ao texto
32. Selecione o campo que contém o texto: Café Townsend Presents Our
Menu.
34. Clique no botão Add Filter.
35. Selecione Drop Shadow. Experimente as configurações.
4 - 26
Verificando a ortografia
36. No menu suspenso Text, selecione Check Spelling.
37. Corrija os termos com erro de ortografia.
38. Se Café não estiver escrito corretamente, escolha Add to Personal
para adicionar a palavra a seu dicionário pessoal.
Etapas gerais
3. Selecione a camada static text no painel Layers, clique nela com o
botão direito do mouse ou com a tecla Ctrl pressionada e, em seguida,
selecione Lock Others no menu contextual.
4. Selecione a ferramenta Text.
5. Defina a fonte como Arial Black com tamanho 14 e cor de fonte
#33FF00.
6. Defina o método de processamento de fonte como Anti-alias for
readability.
7. Crie um campo de texto com largura fixa próximo ao canto superior
esquerdo do Stage, abaixo da imagem de cabeçalho.
8. Digite: Click on the options below to see our
delicious menu.
4 - 27
9. Adicione as seguintes linhas como campos de texto individuais:
•
Appetizers.
•
Entrees.
•
Desserts.
•
Catch of the Day,
10. Redimensione o campo de texto Catch of the day para que ele fique
com 2 linhas e justifique o texto no centro.
11. No canto inferior direito do Stage, adicione o texto: Café Townsend:
A Fictional Company
12. Na parte superior do gráfico de fundo, digite: Café Townsend
Presents Our Menu.
13. Organize os campos de texto de maneira semelhante à disposição
exibida na figura a seguir:
Alterando propriedades de texto
14. Selecione o campo de texto na parte inferior direita do Stage com a
15. Altere o tamanho de fonte para 9 e o método de processamento para
Bitmap text (no anti-alias).
16. Selecione o campo de texto com a frase Café Townsend Presents Our
Menu.
17. Defina o tamanho da fonte como 21 e a cor como #530F06.
18. Defina a coordenada X como 228 e a coordenada Y como 131.
4 - 28
19. Clique com a tecla Shift pressionada para selecionar os campos de
texto que exibem as opções de menu.
20. Recorte o texto para a área de transferência selecionando Edit  Cut.
21. Desbloqueie a camada button text.
22. Cole os campos de texto na camada button text selecionando Edit 
Paste in Place.
Aplicando um efeito de filtro ao texto
23. Selecione o campo que contém o texto: Café Townsend Presents Our
Menu.
24. Aplique um filtro de sombra ao texto.
Verificando a ortografia
25. No menu suspenso Text, selecione Check Spelling.
26. Corrija os termos com erro de ortografia.
27. Se Café não estiver escrito corretamente, escolha Add to Personal
para adicionar a palavra a seu dicionário pessoal.
4 - 29
4 - 30
Unidade 5:
Criando animações
•
Utilizar a interpolação de movimento para criar uma animação.
•
Criar uma máscara animada para obter um efeito transacional.
•
Utilizar um guia de movimento para controlar uma animação.
•
Criar uma interpolação de forma
Tópicos da unidade
•
Apresentando a Animação
•
Criando animações
•
Criando uma interpolação de movimento
•
Controlando a Timeline
•
Usando um Motion Guide
•
Utilizando a interpolação de forma
5-1
Apresentando a Animação
Animação é um conceito chave no Flash. Geralmente, refere-se a gráficos
que se movem e se transformam por um período de tempo. Animação é
mais ou menos uma ilusão criada pela exibição do conteúdo de diferentes
quadros com muita rapidez. O conteúdo de cada quadro terá uma aparência
ou posição ligeiramente diferente do conteúdo do quadro anterior,
causando a impressão aos olhos de que o gráfico está se movendo
fisicamente ou alterando o formato.
Ao longo desta unidade, você utilizará a Timeline do Flash e outras
ferramentas de criação do Flash para mover e transformar gráficos para
criar uma animação.
Timeline
A Timeline fornece uma estrutura para um documento Flash. As seguintes
afirmações sobre Timelines são verdadeiras:
•
A Timeline é dividida em quadros.
•
A reprodução determina o que aparece atualmente no Stage no FLA ou
na tela do SWF.
•
Por padrão, a reprodução começa no Frame 1 e se move pelos quadros
até alcançar o último quadro do documento.
•
Por padrão, a reprodução continua a criar uma repetição nos quadros.
•
As camadas também fazem parte da Timeline. Cada camada tem sua
própria Timeline.
Timeline com a reprodução no quadro 12
5-2
Criando animações
Criando animações
Para criar animações no Flash 8, normalmente você utilizaria:
•
Interpolação de movimento
•
Símbolos
•
Quadros-chave
Você sempre utilizará quadros-chave ao produzir animações na Timeline,
uma vez que os quadros-chave são os únicos quadros que podem ser
editados.
Interpolação de movimento
A interpolação de movimento é uma maneira eficiente de criar animações.
Em vez de criar um desenho exclusivo para cada quadro em uma Timeline,
representa visualmente como um gráfico deve aparecer nos pontos inicial,
intermediário e final da animação. Em seguida, instrui o Flash para desenhar
entre as etapas. O processo de desenho entre as etapas é chamado de
interpolação.
A aplicação de uma interpolação de movimento preencherá todos os
quadros entre os pontos inicial e final. É possível interpolar movimento
apenas de instâncias de símbolos.
Uma animação de interpolação de movimento também é chamada de
motion tween transition.
Nota: O Flash suporta também animação quadro a quadro; um tipo de
animação que requer a criação manual de um gráfico no quadro inicial,
no quadro final e entre eles. As animações quadro a quadro geralmente
resultam em tamanhos de arquivos maiores.
Utilizar símbolos
Conforme mencionado acima, apenas símbolos podem ser animados com
uma interpolação de movimento. Normalmente, você animará um gráfico
ou um símbolo de clipe de filme colocando e modificando instâncias deles
em diferentes quadros-chave inseridos em uma Timeline.
É possível interpolar apenas instâncias do mesmo símbolo; as instâncias de
símbolos devem ser as únicas propriedades nos quadros-chave de animação
durante toda a animação. Por exemplo, não é possível ter um símbolo e
uma propriedade de texto no mesmo quadro-chave de uma mesma camada.
A propriedade de texto deverá ocupar um quadro-chave em uma camada
diferente, caso queira torná-la visível.
5-3
Utilizar quadros-chave
Um quadro-chave é um tipo de quadro utilizado para adicionar símbolos ou
outras propriedades a uma timeline da camada. Depois que uma propriedade
for adicionada a um quadro-chave na Timeline, ficará disponível nos
quadros subseqüentes. Você pode inserir outros quadros-chave ao longo da
Timeline de uma camada para modificar a propriedade e adicionar
movimento aos quadros entre dois quadros-chave. Ao inserir um quadrochave em novos quadros, a propriedade do quadro-chave anterior é copiada
para o novo quadro-chave, por padrão.
Ao criar uma animação de interpolação de movimento:
•
Utilize o Stage para adicionar ou modificar uma instância de símbolo
nos quadros-chave no início e no final da transição da interpolação de
movimento.
•
A interpolação de movimento aplicada aos quadros entre os quadroschave move a instância de símbolo do quadro-chave inicial até o
quadro-chave final.
•
A interpolação de movimento também pode redimensionar, girar e
inclinar a instância entre os quadros inicial e final.
•
Utilize a interpolação de movimento para alterar o alfa, o brilho e a
tonalidade ao longo do tempo.
Inserir quadros-chave
Um quadro-chave é colocado automaticamente no Frame 1 de cada camada
no momento em que for criada. Insira quadros-chave em outros locais do
quadro selecionando o quadro e selecionando Insert  Timeline 
Keyframe, conforme mostrado abaixo.
Inserindo um quadro-chave
5-4
Criando animações
inserir quadros
Uma animação pode se estender por vários quadros. Quando o documento
contiver outras camadas, poderá ser necessário estender suas Timelines
para que o conteúdo fique visível pelo mesmo tempo das camadas com
animação.
Estenda uma Timeline da camada inserindo um quadro no mesmo local do
quadro, no final das camadas de animação. O quadro servirá para estender
a visibilidade da propriedade sem duplicar a propriedade propriamente dita.
Ao contrário dos quadros-chave, não será possível editar o conteúdo de um
quadro normal.
A camada background é estendida com um quadro
Selecione um quadro em uma camada e selecione Insert  Timeline 
Frame para estender uma Timeline da camada. Os quadros são indicados
por um retângulo. Os quadros com conteúdo são sombreados em cinza. Os
quadros vazios não são sombreados.
5-5
Informações sobre exibição de quadros-chave
Um círculo vazio é exibido em um quadro-chave quando ele não tem
conteúdo. Um quadro-chave sem conteúdo é chamado de blank keyframe.
Por exemplo, não há conteúdo no Frame 1 em nenhuma camada da
Timeline abaixo.
Círculos vazios indicam sem conteúdo
Um círculo sólido é exibido em um quadro-chave quando ele tem conteúdo.
Por exemplo, não há conteúdo no frame 1 da camada images na figura
abaixo, mas há conteúdo no frame 1 das camadas text e background, e na
máscara animada.
Círculos sólidos indicam conteúdo
5-6
Criando animações
Criando uma animação de interpolação de
movimento
Para criar uma animação utilizando um símbolo gráfico e uma interpolação
de movimento:
1. Selecione o quadro-chave, que começará a animação em uma Timeline
da camada e arraste uma instância de um símbolo gráfico da biblioteca
até o quadro-chave. Também é possível criar um símbolo nesse
quadro-chave.
2. Modifique as propriedades da instância para descrever como ela deve
aparecer no começo da posição de interpolação de movimento.
3. Selecione Insert  Timeline  Keyframe para inserir um quadrochave na Timeline em que a posição da interpolação de movimento
deve terminar.
4. Modifique as propriedades da instância desse quadro-chave para
descrever como a instância deve aparecer quando a animação terminar.
5. Selecione o quadro-chave em que a animação começará.
6. Selecione Motion no campo Properties Tween para aplicar
interpolação de movimento.
Motion é selecionado no campo Tween da figura abaixo.
Configurando interpolação no Property inspector
Nota: Também é possível clicar com o botão direito do mouse entre os
quadros-chave para animar e escolher Create Motion Tween no menu
contextual ou selecionar Insert  Timeline  Create Motion Tween.
5-7
Erros da interpolação de movimento
Quando a interpolação de movimento não puder ser criada com êxito,
o Flash indicará um erro com uma linha tracejada na Timeline da camada
em que ocorre a animação.
Por exemplo, se você aplicar interpolação de movimento a qualquer outra
coisa diferente de uma instância de símbolo, a Timeline e o Property
inspector exibirão erros.
Exibição de erro na Timeline
Um erro de interpolação de movimento é exibido como uma linha tracejada
na Timeline, conforme mostrado abaixo.
Erro indicado pela linha tracejada
Um erro de interpolação de movimento exibe um ícone Alert (
) no
Property inspector. Ao selecionar o ícone, a mensagem de erro a seguir
será exibida.
Alerta de interpolação de movimento
5-8
Criando animações
Criando uma máscara animada
Uma máscara animada difere de uma máscara padrão na qual ela se move.
Como a máscara é uma propriedade de camada, é fácil animá-la:
1. Crie uma camada acima da imagem que deseja mascarar. Essa será a
camada da máscara.
2. Crie ou importe um gráfico na camada de máscara e a converta em um
símbolo.
3. Crie uma animação na camada de máscara.
4. Clique com o botão direito do mouse na camada de máscara e
selecione Máscara no menu contextual.
5. Bloqueie as camadas para ver o efeito de máscara no ambiente de edição.
6. Selecione Control  Test Movie para visualizar a animação.
Máscara animada com várias camadas
5-9
Procedimento 5-1:
•
Adicionar quadros e quadros-chave a uma timeline
•
Criar uma interpolação de movimento simples
•
Criar um efeito de máscara animada
Etapas
1. Abra o wt5-1raw.fla no diretório {webroot}/mmcourses/frcc800/walk.
Adicionar quadros e quadros-chave a uma Timeline
4. Na Timeline, selecione o frame 12 da camada text.
5. Mantenha pressionada a tecla shift e selecione o frame 12 da camada
background.
6. Estenda a Timeline inserindo quadros com o atalho de teclado F5.
7. Selecione o quadro 12 da camada images.
8. Insira um quadro-chave no frame 12 da camada images com o atalho
de teclado F6.
9. Selecione o símbolo gráfico grStreetSign no Stage.
10. Com o Property inspector, defina a posição x como 24,6 e a posição y
como 164.
11. Selecione o frame 5 na camada images e insira um quadro-chave com
o atalho de teclado F6.
12. Selecione o frame 1 da camada images e exclua a instância de
grStreetSign do Stage.
Adicionar a interpolação de movimento
13. Selecione o quadro-chave 5 da camada images.
14. No Property inspector, selecione Motion no menu suspenso Tween.
15. Pressione Enter no teclado para ver a animação.
16. Selecione Control  Test Movie para testar a animação.
5 - 10
Criando animações
Adicionar um efeito de máscara animada
17. Adicione uma nova camada acima da camada text utilizando o botão
Insert New Layer.
18. Renomeie a nova camada como animated mask.
19. Abra a biblioteca de documentos selecionando Window  Library.
20. Na Library, arraste uma instância de grBackground no Stage.
21. Selecione o frame 12 da camada animated mask.
22. Insira um quadro-chave no frame 12 da camada animated mask
selecionando Insert  Timeline  Keyframe.
23. Posicione a reprodução do quadro-chave 1 da camada animated mask
e selecione a instância de grBackground no Stage.
24. Com o Property inspector, defina a largura como 1 pixel.
25. Defina a altura como 1 pixel.
26. Utilizando o painel Align, centralize a instância no Stage pressionando
os botões Horizontal Center e Vertical Center da linha Align.
Verifique se o botão To Stage está selecionado.
27. Na Timeline, clique com o botão direito do mouse ou pressione
Control entre os quadros-chave da camada animated mask.
28. Escolha Create Motion Tween no menu contextual.
29. Pressione Enter ou Return no teclado para testar a animação.
30. Adicione o efeito de máscara clicando com o botão direito do mouse
ou pressionando Control na camada animated mask do painel Layers
e selecionando mask no menu contextual.
31. Selecione Control  Test Movie para ver a animação.
Adicionar camadas a uma máscara
32. Adicione a camada images à máscara animada clicando duas vezes no
ícone de tipo de camada.
33. Na caixa de diálogo Layer Properties, escolha o botão de opção Masked.
34. Clique em OK.
36. Salve o wt5-1.fla e mantenha-o aberto para o próximo procedimento.
5 - 11
Utilize um guia de movimento para desenhar o caminho do gráfico a ser
seguido durante a interpolação.
Há duas maneiras de adicionar uma camada Motion Guide:
Você pode pressionar o botão Insert Motion Guide no painel Layers.
Selecione Insert  Timeline  Motion Guide para inserir uma camada
Motion Guide, conforme mostrado abaixo.
Inserindo um guia de movimento
Uma camada Motion Guide é visível apenas durante a criação.
5 - 12
Criando animações
Criar um guia de movimento na camada Motion Guide
Para criar a guia de movimento na camada Motion Guide:
•
Utilize qualquer ferramenta de desenho no painel Tools para desenhar
um caminho do quadro-chave inicial até o quadro-chave final na
camada Motion Guide.
•
Assegure-se de estar utilizando o modelo Merge Drawing. Motion
guides não funcionam com Object Drawing.
•
Desenhe o caminho utilizando uma cor diferente para facilitar a
visualização no Stage.
•
Utilize a ferramenta Selection para anexar os gráficos ao guia nos
quadros-chave inicial e final.
O início do guia de movimento é anexado a uma instância de símbolo
gráfico no Frame 1 da Timeline abaixo.
Desenhando um guia de movimento
Bloqueie a camada Motion Guide depois de criar o caminho para que ela
não seja editada inadvertidamente. O bloqueio da camada guide também
facilitará a anexação de um objeto interpolado.
5 - 13
Procedimento 5-2:
•
Adicionar uma camada Motion Guide
•
Criar um caminho a ser seguido pela animação
•
Ajustar uma animação a um caminho
Etapas
Adicionar uma camada Motion Guide e criar um caminho
3. No painel Layers, selecione a camada images.
4. Adicione uma camada Motion Guide acima da camada images
pressionando o botão Insert Motion Guide na parte inferior do painel
Layers. Observe que o nome da camada é alterado para Guide:Images.
5. Clique com o botão direito do mouse ou pressione Control na camada
Guide images e escolha Lock Others no menu contextual.
6. Selecione a ferramenta Line no painel Tools.
7. Vá para o modelo Merge Drawing na seção Options do painel Tools.
8. Com a ferramenta Line, desenhe uma linha vertical à esquerda do
Stage e ligeiramente acima do Stage.
10. Aproxime-se da borda direita do traço, próximo ao centro. Quando o
cursor for alterado para uma linha curva, pressione e arraste para
curvar o traço sobre o Stage.
5 - 14
Criando animações
Encaixar os símbolos gráficos no caminho.
11. Ative Object Snapping no painel Tools pressionando o botão Object
Snapping da seção Options. Object snapping estará ativado quando o
botão estiver realçado.
12. Selecione o frame 12 da camada Guide images na Timeline.
13. Com a ferramenta Selection, ajuste a posição do traço para que faça
interseção com o centro do símbolo gráfico da camada images.
images e escolha Lock Others no menu contextual.
16. Ajuste a instância de grStreetSign no quadro-chave 5 do caminho
pressionando e arrastando-o do centro até a linha. Ela deve se ajustar
no lugar à medida que você se aproximar.
17. Com o quadro-chave 5 selecionado, pressione Enter no teclado para
ver a animação.
18. Selecione Control  Enter para visualizar a animação em um SWF.
19. Salve o wt5-2.fla e feche o arquivo.
5 - 15
Utilizando a interpolação de forma
A interpolação de forma transforma uma forma em outra ao longo do
tempo. Ao contrário da interpolação de movimento, que funciona com
símbolos, você só poderá interpolar formas entre formas de vetores
desenhados com o modelo Object Drawing ou Merge Drawing.
Não é possível interpolar forma de símbolos, texto editável ou formas
agrupadas.
Para interpolar forma de texto estático ou objetos armazenados em
símbolos, selecione Modify  Break Apart para converter os gráficos em
objetos editáveis.
A interpolação de forma não funcionará em imagens de bitmap que foram
desmembradas.
Exemplo de uso
A figura abaixo mostra uma transição de círculo em estrela utilizando uma
interpolação de forma.
Interpolação de forma entre as formas círculo e estrela
5 - 16
Criando animações
Utilizar marcadores de transparência
Os marcadores de transparência são alternados no painel Timeline e são
utilizados para ver o conteúdo de quadros diferentes do quadro-chave que
está sendo ativamente editado. Dessa maneira, você cria gráficos em
quadros lembrando-se da posição e da aparência dos gráficos
imediatamente antes e após a edição.
Iniciar marcador
de transparência
Terminar
marcador de
transparência
Ativar/desativar
transparência
Gráfico com
transparência
5 - 17
Criar interpolações de forma
Para criar uma interpolação de forma:
1. Selecione a camada que contém a forma a ser interpolada.
2. Selecione o quadro-chave que contém a forma e que começará a animação.
3. Insira um quadro-chave vazio para definir onde a animação deve terminar.
4. Adicione uma nova forma ao último quadro-chave para definir a forma
em que ele deverá se transformar.
5. Selecione o quadro-chave na Timeline em que a animação começará e
selecione Shape no menu Tween do Property inspector.
O Property inspector abaixo está com o campo Tween definido como
Shape para um Frame selecionado no Stage.
Configuração da interpolação de forma no Property inspector
Práticas recomendadas para interpolação de forma
Ao trabalhar com interpolação de forma, lembre-se do seguinte:
5 - 18
•
Trabalhe com formas simples.
•
Utilize a interpolação de forma com moderação, pois ela produz
tamanhos de arquivos grandes devido à impossibilidade de utilizar
símbolos.
Criando animações
Procedimento 5-3:
Criando interpolações de forma
•
Utilizar quadros-chave vazios
•
•
Criar uma interpolação de forma
Etapas
1. Crie um novo documento
2. Salve o novo arquivo aswt5-3.fla no diretório
Desenhar um gráfico e estender a Timeline
3. Selecione uma ferramenta de desenho de forma no painel Tools.
5. Defina a cor de preenchimento como qualquer cor.
6. Pressione e arraste qualquer lugar do Stage para criar um gráfico.
7. Selecione o frame 20 na Timeline.
8. Insira um quadro-chave vazio selecionando Insert  Timeline 
Blank Keyframe.
9. Ative os marcadores de transparência pressionando o botão Onion
Skin na Timeline.
10. Para o gráfico dos quadros anteriores, arraste o onion skin marker
esquerdo para sobrepor os quadros anteriores.
11. Selecione a ferramenta de desenho de forma do painel Tools para outra
diferente da que acabou de utilizar.
12. Pressione e arraste no Stage para desenhar uma nova forma no quadrochave 20.
13. Posicione o gráfico no mesmo local do gráfico em papel de
transparência no Stage.
14. Desative o Onion Skinning pressionando o botão Onion Skin na
Timeline.
5 - 19
Configurar a interpolação de forma
16. Selecione o quadro-chave 1.
17. Para criar a interpolação de forma, selecione Shape no menu suspenso
Tween do Property Inspector.
19. Feche o arquivo SWF.
20. Salve e feche o wt5-3fla.
5 - 20
Criando animações
Resumo da unidade
•
A interpolação de movimento é uma maneira eficiente de criar animações.
•
Utilize as instâncias de símbolos e os quadros-chave para representar
visualmente como um gráfico deve aparecer nos pontos inicial e final
da animação da Timeline. A interpolação preencherá o espaço entre os
quadros.
•
As máscaras animadas podem ser utilizadas para criar transições.
•
Utilize um guia de movimento para desenhar um caminho do gráfico a
ser seguido durante a interpolação.
•
A interpolação de forma transforma uma forma em outra na Timeline.
•
Ao contrário da interpolação de movimento que funciona com símbolos,
só é possível interpolar forma entre formas primitivas, como quadrados e
círculos.
5 - 21
Revisão da unidade
1. Com que tipo de propriedades é possível trabalhar para criar uma
interpolação de movimento?
2. É necessário utilizar um guia de movimento sempre que executar uma
interpolação de movimento?
3. Como você cria uma máscara animada?
4. Em que uma interpolação de forma é diferente de uma interpolação de
movimento?
5 - 22
Criando animações
Laboratório 5:
Neste laboratório, você criará uma animação para a seção Special Events
do Web site Café Townsend.
Objetivos
•
Utilizar quadros e quadros-chave
•
Usar símbolos
•
Criar uma interpolação de movimento
•
Criar um efeito de máscara animada
Etapas detalhadas
1. Abra o lab5raw.fla no diretório {webroot}/mmcourses/frcc800/lab.
2.
Salve o arquivo como lab5.fla na mesma pasta.
Convertendo um desenho em um símbolo
4. Selecione a camada background no painel Layers, clique com o botão
direito do mouse ou pressione Control e selecione Lock Others no
menu contextual.
5. Com a ferramenta Selection, clique uma vez no gráfico da camada
background.
6. Converta o desenho do vetor em um símbolo gráfico com o atalho de
teclado F8.
7. Denomine o símbolo como grBackground e selecione gráfico como
o tipo.
8. Certifique-se de que o ponto de registro esteja no canto superior
esquerdo e pressione OK.
Criar uma camada para animação
9. Selecione a camada images e insira uma nova camada acima dela com
Insert  Timeline  Layer. Atribua o nome animation à nova
camada.
10. No painel Library, arraste uma instância do símbolo gráfico
grBackground na camada animation.
5 - 23
11. Coloque o símbolo em um X de 13 e um Y de 10. Observe como ele
oculta todo o restante do conteúdo do Stage.
Estender a Timeline e adicionar uma interpolação de
movimento
12. Selecione o 12 da camada animation.
13. Insira um quadro-chave com o atalho de teclado F6. Observe como
isso copia o símbolo grBackground no novo quadro-chave.
14. No quadro-chave 1 da camada animation, selecione a instância de
grBackground no Stage.
15. Com o Property inspector, altere a largura para 1.
16. Altere a altura para 1.
17. Selecione o quadro 12 da camada images.
background.
19. Estenda as camadas para fora do frame 12 inserindo um quadro com o
atalho de teclado F5.
20. Na camada animation, clique com o botão direito do mouse ou
pressione Control entre os dois quadros-chave nos frames 1 e 12.
21. Selecione Create Motion Tween no menu contextual.
Ele oculta gradualmente o conteúdo do Stage.
23. Feche o SWF.
5 - 24
Criando animações
Adicionando o efeito de máscara
24. Clique com o botão direito do mouse na camada animation.
25. Selecione Mask no menu contextual.
26. Adicione a camada static text à máscara clicando duas vezes no seu
ícone de tipo e selecionando Masked na caixa de diálogo Layer
Properties.
27. Pressione OK para sair da caixa de diálogo.
Testando a animação
28. Salve o arquivo e, em seguida, selecione Control  Test Movie.
29. Saia do SWF. Você interromperá o loop de animação no próximo
laboratório.
30. Salvar e fechar o lab5.fla
Etapas gerais
2.
Convertendo um desenho em um símbolo
3. Selecione a camada background no painel Layers e bloqueie as outras
camadas.
4. Converta o gráfico da camada background em um símbolo gráfico
chamado grBackground.
5. Selecione a camada images e insira uma nova camada acima dela.
Atribua o nome animation à nova camada.
5 - 25
6. No painel Library, arraste uma instância do símbolo gráfico
grBackground na camada animation e coincida as coordenadas
X e Y com as da instância da camada background.
Estender a Timeline e adicionar uma interpolação de
movimento
7. Insira um quadro-chave no frame 12 da camada animation.
8. No frame 1 da camada animation, altere a largura e a altura da
instância de grBackground para 1.
9. Estenda as outras camadas para o frame 12 utilizando um quadro.
10. Selecione o quadro-chave 1 da camada animation.
11. Ative a interpolação de movimento da camada animation.
13. Feche o SWF.
Adicionando o efeito de máscara
14. Transforme a camada animation em uma máscara.
15. Adicione a camada static text à máscara clicando duas vezes no seu
ícone de tipo e selecionando Masked na caixa de diálogo Layer
Properties.
5 - 26
Criando animações
16. Pressione OK para sair da caixa de diálogo.
Testando a animação
17. Salve o arquivo e, em seguida, selecione Control  Test Movie.
18. Saia do SWF. Você interromperá o loop de animação no próximo
laboratório.
19. Salvar e fechar o lab5.fla
5 - 27
5 - 28
Unidade 6:
Adicionando o ActionScript com Script
Assist
•
Criar um menu de navegação do Flash que inclui efeitos de
rolagem do mouse.
•
Usar o Script Assist para criar um botão de navegação que abra
uma página da Web por meio de um clique do usuário.
•
Usar o Script Assist para carregar SWF externos.
•
Usar Actions para impedir a repetição de uma animação.
Tópicos da unidade
•
Introduzindo o Script Assist
•
Usando o Script Assist para adicionar o ActionScript
•
Adicionando ações à linha de tempo
•
Criando botões
•
Adicionando ações a botões
•
Criando sistemas de navegação
•
Usando clipes de filme
•
Usando a ação loadMovie
6-1
Introduzindo o Script Assist
O Script Assist é uma ferramenta usada para adicionar o ActionScript
aos documentos do Flash 8. Mesmo se você não estiver familiarizado
com o ActionScript, o Script Assist o tornará bastante fácil.
Ao utilizar o Script Assist, você pode adicionar o ActionScript a:
•
Objects: clipes de filme, botões, componentes e telas.
•
Quadros-chave.
Usando o ActionScript
O ActionScript é uma linguagem de script fornecida com o Flash.
Ele é utilizado para controlar o funcionamento do aplicativo Flash. O
ActionScripts pode ser tão simples quanto os comandos para
interromper o movimento da reprodução ou tão complexo quanto um
objeto invisível que carregue, execute e exiba informações sobre
arquivos MP3.
O ActionScript está adicionado ao painel Actions (Window 
Actions). O painel Actions é composto de três painéis:
•
caixa de ferramentas Actions
•
navegador Script
•
painel Actions
Actions
Toolbox
Actions
Pane
Script
Navigator
Painel Actions no modo Script Assist
6-2
Adicionando o ActionScript com Script Assist
Usando o Script Assist para adicionar o
ActionScript
Para usar o Script Assist, primeiro selecione um objeto como um
botão ou quadro-chave no Stage. Em seguida, abra o painel Actions
com o Window  Actions.
Para alternar para o modo Script Assist, pressione o botão Script
Assist. Se o botão aparecer realçado, você estará no modo Script
Assist.
alternância para o modo Script Assist
Na caixa de ferramentas Actions, selecione uma ação. Por exemplo,
para interromper a repetição de uma animação, você usaria a ação
stop em Global Functions  Timeline Control.
O Script Assist descreverá o objetivo da ação no painel Actions. Se a
ação for o que você deseja, clique duas vezes nela para adicioná-la.
Se a ação precisar de parâmetros adicionais, os parâmetros
modificáveis serão mostrados no painel Actions.
Na figura abaixo, a ação adicionada não aceita parâmetros.
Propósito da ação
Parâmetros, se houver
Ações
Ação
incluída
Script Assist exibindo uma ação stop
6-3
Adicionando ações à linha de tempo
As ações são adicionadas a linhas de tempo de documentos por diversos
motivos. Talvez você deseje que um site seja aberto em uma janela do
navegador após a conclusão da animação ou talvez você deseje impedir
que uma animação se repita. Em um ActionScript mais complexo,
você pode preferir controlar objetos nomeados a partir de um único
local. Para isso, você adiciona todo o ActionScript a um único
quadro em uma Timeline.
Se todas as ações forem adicionadas a uma Timeline, elas deverão ser
gravadas em um quadro-chave. Não é possível adicionar ações a um
quadro padrão. As ações apenas podem ser adicionadas a linhas de
tempo de clipes de filme ou à linha de tempo do documento principal.
Quando você adiciona um ActionScript a um quadro-chave, o quadrochave exibe a letra a para indicar que o script existe dentro dele.
Quadro-chave com uma ação
Ações adicionadas a um quadro-chave são executadas quando a
reprodução insere o quadro-chave que contém a ação.
Por convenção, ações e ActionScript gravados em quadros-chave são
colocados nas respectivas camadas, normalmente denominadas
actions . A maioria dos designers e dos desenvolvedores coloca a
camada de ações na parte superior do painel Layers para facilitar a
localização do ActionScript.
Interrompendo a repetição de uma linha de tempo
Na unidade anterior, você criou uma animação e a viu por padrão, a
animação se repetirá continuamente. Para interromper a repetição de
uma Timeline, coloque uma ação stop no último quadro-chave da
animação ou onde desejar que a Timeline pare.
Uma ação stop no último quadro-chave da camada actions
6-4
Procedimento 6-1:
Usando o ActionScript para parar uma animação
•
Adicionar o ActionScript a um quadro
•
Usar o Script Assist para adicionar o ActionScript
Etapas
1. Abra o wt5-2.fla no diretório
Adicionando uma camada para armazenar o ActionScript
3. Selecione a camada animated mask no painel Layers.
4. Insira uma nova camada pressionando o botão Insert New Layer.
5. Renomeie a camada actions.
6. Selecione o quadro 12 da camada actions e insira um quadro-
chave usando o atalho de teclado F6.
7. Selecione o novo quadro-chave para que ele seja realçado.
Usando o Assist para adicionar uma ação stop
8. Com o quadro-chave 12 da camada actions ainda selecionado,
abra o painel Actions selecionando Window Actions.
9. No painel Actions, pressione o botão Script Assist para ligar o
modo Script Assist.
10. Expanda Global Functions clicando no texto na caixa de
ferramentas Actions.
11. Expanda Timeline Control.
12. Selecione stop.
13. Observe que o Script Assist indica a ação a ser executada no
canto superior direito do painel Script Assist.
14. Adicione a ação stop à linha de tempo clicando duas vezes nela.
15. Salve e teste o SWF.
6-5
Criando botões
As ações também podem ser adicionadas a botões com o objetivo de
criar interatividade. Usuários clicam em botões para abrir páginas
novas, expandir menus e enviar dados de formulário, embora as
utilidades desses botões não estejam limitadas a esses exemplos.
Um botão é um tipo de símbolo no Flash que você cria e armazena
na Library. Como todos os símbolos, os botões são reutilizáveis para
que você possa usar uma única instância do várias vezes sem
aumentar o tamanho do arquivo. Para criar um símbolo de botão
desde o início:
1. Selecione Insert  New Symbol para criar um símbolo.
2. Nomeie o símbolo de botão e atribua a ele um tipo de botão.
Criando um símbolo de botão
Como símbolos gráficos, símbolos de botões são armazenados na
Library de documentos. O nome que você atribui na caixa de diálogo
Create New Symbol é igual ao nome do item na Library. O prefixo
btn é recomendado (ou algum prefixo similar) e apenas é usado
para fins de organização da Library.
Usando instâncias de botão
Arraste os símbolos de botão da Library para o Stage para criar
instâncias de botão. Do mesmo modo que com outras propriedades,
insira os botões nas respectivas camadas para que você possa
gerenciá-los com facilidade independentemente das outras
propriedades.
Quando você arrasta uma instância de um botão para o Stage, uma
caixa azul é exibida ao seu redor para mostrar que ele foi
selecionado. Quando você clica duas vezes em um botão:
6-6
•
O ícone do botão é exibido na barra de edição.
•
A linha de tempo do botão substitui a linha de tempo do
documento principal acima do Stage.
Usando as linhas de tempo do botão
Uma instância de botão possui duas linhas de tempo próprias, com
quatro quadros nomeados, referidos normalmente como estados do
botão.
•
Up
•
Over
•
Down
•
Hit
Você pode usar os estados na linha de tempo para adicionar texto ou
outras propriedades como som, imagens ou símbolos de clipes de
filme ao botão e definir como o botão aparecerá no SWF.
Para inserir uma linha de tempo do botão, clique duas vezes em uma
instância do símbolo no Stage para editá-la no local ou clique duas
vezes no ícone de tipo na Library para editar o símbolo.
O ícone de símbolo do botão é um dedo apontando para um retângulo.
Timeline do símbolo de botão
Estados do botão
Os três primeiros quadros de uma Timeline de um botão correspondem
a um dos três estados possíveis do botão que são representados
visualmente: Up, Over e Down. O quarto estado é a área ativa do
botão ou hot spot e é denominado estado Hit. O estado hit não é
visível.
Você insere quadros-chave em qualquer um desses locais do quadro
para controlar o que aparece no botão em cada estado, como você
faria para editar um quadro em uma Timeline padrão.
6-7
Up
O estado up é o estado de botão que o usuário vê primeiro, antes que
o símbolo interaja com:
•
Se houver um campo de texto no estado up, o usuário visualizará
o texto.
•
Se houver um gráfico, o usuário visualizará esse gráfico.
•
Se não houver nada, o usuário não visualizará nada.
•
Já que o estado up é o primeiro quadro na Timeline do botão, um
quadro-chave é inserido automaticamente.
Estado up da linha de tempo do botão
Over
O estado over é como o botão aparece quando o cursor do mouse
está sobre ele. Se não houver nenhum quadro-chave inserido nesse
estado, o estado over será igual ao estado up.
Estado over de uma Timeline do botão
6-8
Down
O estado down é como o botão aparece quando ele é clicado. Se não
houver nenhum quadro-chave para esse estado, ele será igual ao
estado over.
Estado down de uma Timeline do botão
Hit
O quarto quadro de uma Timeline do botão é o estado hit. O estado
hit é a área ativa (ou hot spot) do botão. O estado hit não é visível
para usuários finais.
O estado hit é obrigatório. Se um gráfico não estiver posicionado no
estado hit, o Flash tentará usar qualquer gráfico que estiver no estado
up do botão como a área ativa do botão.
Você define o estado hit:
•
Selecionando o quadro hit e inserindo um quadro-chave nele.
•
Desenhando um contorno para denotar a área ativa do botão no
quadro-chave.
Estado hit de uma Timeline do botão
6-9
Exemplo de uso
Por exemplo, para criar um botão para um menu de navegação do site:
1. Crie um símbolo de botão, nomeie-o e atribua a ele um tipo de botão.
2. Assegure-se de estar visualizando a Timeline do botão.
3. Selecione o estado up da Timeline do botão e adicione um
gráfico a ela.
Nota: O estado up possui automaticamente um quadro-chave
pois ele é o primeiro quadro.
4. Insira quadros-chave nos estados over e down e altere suas
aparências ligeiramente para criar efeitos de rolagem e clique.
5. Insira um quadro-chave no estado hit para copiar o gráfico do
quadro-chave anterior ou insira um quadro-chave em branco e
desenhe um novo gráfico. Esse gráfico funcionará como a área
interativa do botão.
6. Retorne à Timeline do documento principal selecionando o ícone
Scene 1 na barra de edição.
7. Arraste uma instância do botão da Library para o Stage.
Noções básicas sobre botões invisíveis
Botões invisíveis são botões que possuem apenas um estado hit definido
e são criados para serem posicionados sobre outras propriedades no Stage.
Ele funciona com o mesmo objetivo que um hot spot de uma imagem em
HTML, criando uma região invisível na qual o usuário pode clicar. Você
criará normalmente um botão invisível:
•
Criando um novo símbolo de botão.
•
Inserindo um quadro-chave no estado hit.
Desenhando um gráfico no estado hit e, em seguida, retornando
para a Timeline do documento principal.
Botões invisíveis são representados no ambiente de desenvolvimento
como uma forma em ciano semi-transparente.
•
Timeline do botão invisível
6 - 10
Procedimento 6-2:
Criando botões
•
Criar um símbolo de botão
•
Usar a linha de tempo do botão
•
Criar estados diferentes de botão
•
Usar instâncias de botão
Etapas
1. Abra wt6-2raw.fla no diretório
3. Selecione Insert  New Symbol.
4. Nomeie o símbolo como btnNav.
5. Escolha o comportamento do botão e pressione OK.
Adicionando gráficos à linha de tempo do botão
6. Insira um quadro-chave no estado over da linha de tempo do
botão selecionando Insert  Timeline  Keyframe.
9. Defina a cor de preenchimento como #FFEE5A.
12. Pressione e arraste-o no Stage para desenhar um retângulo de
qualquer tamanho.
13. Usando o Property inspector, posicione o gráfico em 0 nos eixos
x e y.
14. Defina a largura como 140.
16. Insira um quadro-chave no estado down usando o atalho de
teclado F6.
6 - 11
17. Selecione o gráfico no estado down e altere a cor de
preenchimento para #FFCC00.
18. Insira um quadro normal no estado hit usando o atalho de
teclado F5.
19. Retorne à linha de tempo principal pressionando Scene 1 na
barra de edição.
Inserindo instâncias de botão no Stage.
20. Na linha de tempo principal, expanda a pasta da camada nav
elements.
21. Clique com o botão direito do mouse ou pressione Control na
camada buttons e selecione Lock Others no menu contextual.
22. Abra o documento da Library, se ele ainda não estiver aberto,
selecionando Window  Library.
23. Na Library, arraste uma instância de btnNav para a camada
buttons.
24. Usando o Property inspector, posicione o botão em 25 no eixo x
e em 256.5 no eixo y.
25. Arraste quatro instâncias de botão adicionais na camada buttons.
Posicione e redimensione os botões, se necessário, para que eles
fiquem iguais à tomada de tela a seguir.
6 - 12
Testando estados de botões
26. Selecione Control  Enable Simple Buttons.
27. Role sobre os botões.
28. Tente mover um botão com a ferramenta Selection.
29. Selecione Control  Enable Simple Buttons novamente para
desativar o recurso.
30. Salve wt6-2.fla e deixe-o aberto para o próximo procedimento.
6 - 13
Adicionando ações a botões
Para adicionar uma ação a um botão, selecione-o com a ferramenta
Selection e abra o painel Actions. A barra de título do painel Actions
indicará que um objeto de botão foi selecionado.
Com o Script Assist, você pode clicar duas vezes em uma ação para
adicioná-la ao botão. Quando você faz isso, um manipulador de
eventos padrão é criado para iniciar a ação assim que o botão for
clicado. O evento é um evento de liberação.
ActionScript adicionado a um botão
6 - 14
Criando sistemas de navegação
Tudo o que você fez no curso até agora está em uma linha de tempo
do documento. Esta é a linha de tempo do documento principal, que
é, na realidade, um clipe de filme grande. A linha de tempo do
documento principal pode conter outros clipes de filme que podem
ser usados para interatividade ou para armazenar conteúdo carregado
do servidor.
Adicionar clipes de filme à linha de tempo principal é como ter
aplicativos dentro aplicativos e fornece muito mais flexibilidade aos
designers/desenvolvedores.
Adicionando clipes de filme a um documento
Quando uma linha de tempo de documento principal contém uma
série de clipes de filme:
•
A linha de tempo do clipe de filme é independente de qualquer
outra linha de tempo no aplicativo.
•
Os clipes de filme são seqüências independentes dos quadros da
linha de tempo no documento principal.
•
Eles podem ser referidos fora do contexto da linha de tempo
principal.
•
Você pode controlar propriedade como tamanho, inclinação,
rotação, som e efeitos especiais de maneira independente em
cada clipe de filme.
Esse tipo de controle permite criar, por exemplo, sistemas de
navegação que não precisam ser atualizados sempre que o usuário
faz uma seleção, desde que seja possível carregar o conteúdo
externamente ou criar estados visuais diferentes em um único
símbolo de clipe de filme.
Noções básicas sobre o símbolo do clipe de filme
Um clipe de filme é um símbolo. Como símbolos de botão e gráficos:
•
Crie um símbolo de clipe de filme usando Insert  New Symbol
ou convertendo uma propriedade para um símbolo usando
Modify  Convert to Symbol.
•
Armazene os símbolos de clipes de filme na Library de
documentos.
6 - 15
•
Nomeie os símbolos do clipe de filme usando uma convenção de
nomenclatura intuitiva, como a utilização do prefixo mc , para
organizar melhor a Library.
•
Arraste as instâncias de um símbolo de clipe de filme da Library
para o Stage.
A caixa de diálogo Create New Symbol abaixo mostra um clipe de
filme sendo descrito e criado.
Caixa de diálogo Create New Symbol
6 - 16
Há duas formas de adicionar propriedades a clipes de filme em
documentos Flash:
•
Adicionar as propriedades diretamente aos clipes de filme no
modo de edição de símbolos.
•
Carregar arquivos SWF independentes nos clipes de filme vazios
na linha de tempo do documento principal.
Adicionar propriedades diretamente a uma instância de clipe de
filme
Adicione propriedades diretamente a um clipe de filme no modo de
edição de símbolos e posicione uma instância do clipe de filme na
linha de tempo do documento principal.
Adicione clipes de filme desta maneira:
•
Todos os clipes de filme e propriedades são carregados quando o
documento (SWF principal) é carregado.
•
O usuário observará uma melhora no desempenho, mas deverá
aguardar para que o SWF seja carregado integralmente.
Você usará este método na próxima unidade ao criar um documento
do Flash com estados de aplicativos diferentes.
Carregando arquivos SWF independentes em clipes de filme
vazios
Normalmente, um aplicativo contém uma variedade de informações,
e o usuário não navega por essas informações da mesma forma ou
profundidade. Ao estruturar a interface usando uma série de clipes
de filme menores, você pode:
•
Salvar cada parte como o respectivo SWF.
•
Usar a ação loadMovie para carregar informações de acordo com
a necessidade do usuário.
Por exemplo, ao longo desta unidade, adicione a ação loadMovie ao
botão Home e ao botão Contact. Nem todos os usuários do site
estarão interessados em enviar comentários ao site, por isso faz
sentido carregar o conteúdo por solicitação .
6 - 17
Usando clipes de filme como recipientes
Ao desenvolver um aplicativo Flash como uma série de arquivos
SWF independentes:
1. Crie um documento principal que armazenará os clipes de filme.
2. Crie os clipes de filme como documentos do Flash e publique-os
para criar arquivos SWF.
3. Crie um símbolo de clipe de filme no menu principal.
4. Adicione a instância de clipe de filme vazia à linha de tempo do
documento principal e nomeie a instância.
5. Carregue o SWF na instância de clipe de filme vazia usando a
ação loadMovie.
Quando o documento principal é publicado, o SFW que você criou
faz referência a outros arquivos SWF com base em como a ação
loadMovie estiver sendo utilizada.
Quando um clipe de filme vazio é criado em um documento, um
pequeno ponto é exibido no Stage no local em que você tiver
posicionado o clipe.
Indicador de clipe de filme vazio.
Quando um usuário clica no botão, ou a linha de tempo alcança o
quadro que contêm a ação loadMovie no SWF:
6 - 18
•
Os arquivos SWF, JPG, PNG ou GIF substituem o conteúdo da
instância do clipe de filme em branco no SWF do documento
principal.
•
Esse arquivo carregado herda as propriedades de rotação e
origem X e Y do clipe de filme em branco.
Usando a ação loadMovie
Adicione a ação loadMovie a um botão ou quadro-chave. Quando a
ação loadMovie é adicionada ao botão, o conteúdo externo é
recuperado ao clicar no botão. Ao adicioná-la a um quadro-chave, o
conteúdo externo será carregado quando a reprodução encontrar o
próprio quadro-chave.
A ação loadMovie pode carregar:
•
SWF externo
•
imagens GIF, JPG e PNG
Usando a ação loadMovie para criar sistemas de navegação
Para criar um sistema de navegação que carregue submenus ou
outras informações de página com base em uma interação do usuário,
você pode adicionar a ação loadMovie a botões do seguinte modo:
1. Insira um símbolo novo e atribua-o um comportamento de clipe
de filme. Não adicione conteúdo a ele.
2. Arraste uma instância do símbolo de clipe de filme vazio para o
Stage e posicione-a nas origens X e Y necessárias.
3. Nomeie a instância de clipe de filme para que você possa fazer
referência a ela no painel Behaivors.
4. Selecione a instância de botão ou o quadro que deve controlar o
comportamento, bem como Global Functions  Browser/Network
 loadMovie na caixa de ferramentas Actions.
ação loadMovie
6 - 19
5. Insira o caminho relativo ao SWF ou ao JPEG no campo URL,
defina Location como Target, use o indicador Target Path para
indicar a sua instância de clipe de filme no Stage.
Indicador
Target Path
parâmetros de loadMovie
Usando a caixa de diálogo Insert Target Path
6 - 20
Procedimento 6-3:
Usando o Script Assist para carregar SWF externos.
•
Criar um clipe de filme vazio
•
Usar o Script Assist para adicionar o ActionScript a um botão
•
Carregar um SWF externo em um clipe de filme vazio
Etapas
1. Abra o wt6-2.fla no diretório
2. Salve o arquivo como wt6-3.fla na mesma pasta
Criando um símbolo de clipe de filme
3. Selecione Insert  New Symbol.
4. Nomeie o símbolo como mcContainer.
5. Escolha o comportamento do clipe de filme e pressione OK.
6. Para criar um clipe de filme vazio, pressione Scene 1 na barra de
edição para sair do modo de edição de símbolos. Você não
posicionará gráficos neste clipe de filme.
Adicionando o clipe de filme à linha de tempo
7. Selecione a camada bars na linha de tempo principal.
8. Insira uma nova camada pressionando o botão Insert Layer.
9. Renomeie a camada como container clip.
10. Clique com o botão direito do mouse ou pressione Control na
camada container clip e selecione Lock Others no menu
contextual.
11. Na Library de documentos, arraste uma instância mcContainer
para a camada container clip. Não selecione-a.
12. Atribua um nome de instância de container ao clipe de filme e
pressione Enter no quadro-chave para que você possa fazer
referência a ele por meio do Script Assist.
13. Posicione o clipe de filme em 160 no eixo x e em 150 no eixo y.
14. Bloqueie a camada container clip.
6 - 21
Carregando um SWF externo em uma instância de clipe de filme.
15. Desbloqueie a camada buttons.
16. Com a ferramenta Selection, clique uma vez no fundo e uma vez
no botão embaixo do texto Home.
17. Abra o painel Actions, selecionando Window  Actions e
verifique se está no modo Script Assist.
18. Na caixa de ferramentas Actions, selecione Global Functions 
Browser/Network.
19. Clique duas vezes em loadMovie.
20. No campo URL, digite wt6-1.swf.
21. Defina o local como Target e digite container no campo de
texto do local.
22. Defina as variáveis como Do Not Send.
23. Selecione o botão Contact.
24. No Script Assist, clique duas vezes em loadMovie na categoria
Global Functions  Browser/Network da caixa de ferramentas
Actions.
25. Defina a URL como wt4-3.swf.
26. Defina o local como Target e digite container no campo de
texto do local.
27. Salve wt6-3.fla e deixe-o aberto.
Testando o ActionScript
Test Movie.
29. Clique no botão Home. Um SWF deverá ser carregado no clipe
de filme do recipiente.
30. Clique no botão Contact.
31. Feche o SWF.
6 - 22
Resumo da unidade
•
O Script Assist é uma ferramenta para adicionar o ActionScript a
um aplicativo Flash.
•
O Script Assist pode adicionar ações a quadros-chave em uma
linha de tempo ou a uma instância de botão.
•
Um botão é um símbolo reutilizável com o qual usuários finais
podem interagir.
•
Cada instância de botão tem a própria linha de tempo com quatro
quadros nomeados: Up, Over, Down e Hit.
•
Use a linha de tempo para definir como o botão aparecerá no
SWF em estados diferentes e para definir o seu ponto ativo.
•
Adicione uma ação a uma instância de botão para associar dados,
mídia, som, página da Web ou clipe de filme a um botão.
•
Crie sistemas de navegação usando uma série de clipes de filme
menores.
•
Adicione a ação loadMovie aos botões para controlar que SWFs
serão carregados em clipes de filme vazios (recipientes) no
documento principal quando ela for executada em um navegador.
•
Um clipe de filme é um símbolo reutilizável com a própria linha
de tempo independente.
6 - 23
Revisão da unidade
1. Nomeie os quatro quadros na linha de tempo de um botão e
descreva como eles serão utilizados.
2. Como você adiciona gráficos à linha de tempo de um botão?
3. Qual é a importância dos clipes de filmes?
4. Que tipos de elementos podem ser adicionados ao ActionScript
pelo Script Assist?
5. Que ação impede a repetição de uma linha de tempo?
6 - 24
Laboratório 6:
Criando botões e usando o Script Assist
Neste laboratório, você criará um símbolo de botão para a página do
menu. Você anexará uma ação a um botão usando o Script Assist
para abrir uma página da Web. Você também interromperá a
animação contínua da seção Special Events.
Objetivos
•
Criar um botão.
•
Usar o Script Assist para adicionar uma ação a um botão.
•
Interromper a execução de uma animação.
Etapas detalhadas
1. Abra o lab4.fla no {webroot}/mmcourses/frcc800/lab.
New Symbol.
3. Crie um novo símbolo de botão selecionando Insert
4. Na caixa de diálogo New Symbol, nomeie o símbolo como
btnNav.
5. Escolha Button como tipo e pressione OK. Isso o colocará no
modo de edição de símbolos da linha de tempo do botão.
6. No modo Symbol Editing, selecione a ferramenta Rectangle no
painel Tools.
7. Defina a cor de traço como No stroke.
8. Defina a cor de preenchimento como #006600.
9. Defina o modelo de desenho como Object Drawing e o raio do
canto como 5 pixels.
10. Pressione e arraste no Stage para criar um retângulo com
aproximadamente 100 pixels de largura e 30 pixels de altura.
Você ajustará a largura e a altura com o Property inspector.
11. Alterne para ferramenta Selection no painel Tools e selecione o
retângulo no Stage.
6 - 25
12. Usando o Property inspector, defina a largura como 100 pixels e
a altura como 30 pixels.
13. Defina os eixos x e y como 0.
14. Selecione o quadro over na Timeline do botão e insira um
quadro-chave com o atalho de teclado F6.
15. Selecione o gráfico do retângulo no Stage no quadro Over.
16. Defina a cor de preenchimento do retângulo como #009933.
17. Selecione o quadro Hit na linha de tempo do botão.
18. Insira um quadro no quadro Hit usando o atalho de teclado F5.
19. Pressione Scene 1 na barra de edição para retornar à linha de
tempo do documento principal.
Inserindo instâncias de botões no Stage
20. Selecione a camada buttons na Timeline, clique nela com o
botão direito do mouse ou com a tecla Ctrl pressionada e, em
seguida, escolha Lock Others no menu contextual.
21. No painel Library, arraste uma instância do símbolo de botão
btnNav adjacente ao texto Appetizers.
22. Arraste mais três instâncias do símbolo de botão e posicione-as
abaixo dos campos de texto que exibem os itens de menu.
23. Use o Property inspector ou a ferramenta de transformação livre
para redimensionar ou reposicionar os botões se necessário.
24. Use o painel Align para alinhar os botões pela esquerda.
6 - 26
Usando o Script Assist para adicionar uma ação a um botão
25. Desbloqueie a camada button text e alterne para a ferramenta Text.
26. Próximo ao canto inferior esquerdo do Stage, digite uma linha de
texto com a frase Get Recipes!
27. Faça com que a fonte do campo de texto tenha 10 pontos e defina
seu método de processamento como Anti-alias for readability.
28. Bloqueie a camada button text.
29. Arraste uma instância de btnNav na camada buttons abaixo do
campo de texto adicionado.
30. Alterne para a ferramenta Selection e clique uma vez na
instância de botão que você acabou de adicionar ao Stage.
31. Abra ou expanda o painel Actions selecionando Window 
Actions.
32. Alterne para o modo Script Assist pressionado o botão do Script
Assist se necessário.
33. Na caixa de ferramenta Actions, selecione Global Functions 
Browser/Network e clique duas vezes em getURL.
34. No campo URL, digite: http://www.allrecipes.com/
35. No campo Window, escolha _blank.
36. No campo Variables, selecione Don t Send.
Test Movie.
38. Coloque o mouse sobre os botões. Clique no botão Get Recipes.
6 - 27
39. Feche o SWF.
40. Salve e feche o lab6.fla. Você adicionará o ActionScript aos
outros botões no próximo laboratório.
Interrompendo uma animação
41. Abra lab5.fla do diretório {webroot}/mmcourses/frcc800/lab.
42. Salve o arquivo como specialEvents.fla na mesma pasta.
43. Selecione a camada animation e insira uma nova camada acima.
Nomeie a nova camada como actions.
44. Selecione o quadro 12 da camada actions e insira um quadro-
chave usando o atalho de teclado F6.
45. Expanda ou abra o painel Actions (Window  Actions).
46. Selecione o quadro 12 da camada actions para que ele seja realçado.
47. No painel Actions, selecione Global Functions  Timeline
Control e clique duas vezes em stop.
48. Salve o arquivo e selecione Control  Test Movie.
A animação não deverá mais se repetir.
49. Feche o SWF.
50. Salve e feche specialEvents.fla.
Etapas gerais
1. Abra o lab4.fla no {webroot}/mmcourses/frcc800/lab.
3. Insira um novo símbolo de botão e nomeie-o como btnNav.
4. No modo Symbol Editing, selecione a ferramenta Rectangle no
painel Tools.
6 - 28
5. Defina a cor de traço como No stroke e a cor de preenchimento
como #006600.
6. Defina o modelo de desenho como Object Drawing e o raio do
canto como 5 pixels.
7. Pressione e arraste no Stage para criar um retângulo com
aproximadamente 100 pixels de largura e 30 pixels de altura.
Você ajustará a largura e a altura com o Property inspector.
8. Usando o Property inspector, defina a largura como 100 pixels e
a altura como 30 pixels.
9. Defina os eixos x e y como 0.
10. Selecione o quadro over na Timeline do botão e insira um
quadro-chave com o atalho de teclado F6.
11. Selecione o gráfico do retângulo no Stage no quadro Over e
altere a cor de preenchimento para #009933.
12. Insira um quadro no quadro Hit.
13. Retorne à Timeline do documento principal.
Inserindo instâncias de botões no Stage
14. Selecione a camada buttons na Timeline, clique nela com o
botão direito do mouse ou com a tecla Ctrl pressionada e, em
seguida, escolha Lock Others no menu contextual.
15. Arraste mais quatro instâncias de btnNav e posicione-as abaixo
dos campos de texto que exibem os itens de menu.
16. Use o Property inspector ou a ferramenta de transformação livre
para redimensionar ou reposicionar os botões se necessário.
17. Use o painel Align para alinhar os botões pela esquerda.
6 - 29
Usando o Script Assist para adicionar uma ação a um botão
18. Desbloqueie a camada button text e alterne para a ferramenta Text.
19. Próximo ao canto inferior esquerdo do Stage, digite uma linha de
texto com a frase Get Recipes!
20. O tamanho do texto deve ser ligeiramente menor que os itens do
menu. Escolha o método de processamento de fonte mais adequado.
21. Bloqueie a camada button text.
22. Na camada buttons, arraste uma instância de btnNav abaixo do
campo de texto adicionado.
23. Adicione a ação getURL à instância do botão na caixa de
ferramentas Actions (Global Functions  Browser/Network).
24. No campo URL, digite: http://www.allrecipes.com/
25. No campo Window, escolha _blank.
26. Teste o filme.
27. Coloque o mouse sobre os botões. Clique no botão Get Recipes!.
28. Feche o SWF.
29. Salve e feche o lab6.fla. Você adicionará o ActionScript aos
outros botões no próximo laboratório.
6 - 30
Unidade 7:
Depois de concluir esta unidade, você deverá ser capaz de:
•
Criar um símbolo de clipe de filme.
•
Adicionar propriedades a uma Timeline do clipe de filme.
•
Utilizar uma Timeline do clipe de filme para criar estados visuais
diferentes.
•
Utilizar um ActionScript para controlar uma Timeline do clipe de filme.
Tópicos da unidade
•
Trabalhando com clipes de filme
•
Criando clipes de filme
•
Utilizando clipes de filmes para criar estados diferentes
•
Utilizando eventos para controlar o estado visual
•
Utilizando comportamentos
7-1
Trabalhando com clipes de filme
Um clipe de filme é um tipo de símbolo, junto com o símbolo gráfico e o
símbolo de botão. Você trabalhou com clipes de filmes em diferentes
pontos deste curso. Nesta unidade, trabalhará com eles um pouco mais
detalhadamente.
Os clipes de filmes são úteis porque:
•
Os clipes de filmes podem ser manipulados de maneiras mais variadas
do que os outros símbolos.
•
As Timelines de clipes de filmes são independentes da Timeline do
documento principal.
•
Os clipes de filmes podem ser manipulados durante o ActionScript,
tornando-os ideais para vários tipos de interação com o usuário.
•
Os clipes de filmes podem ser utilizados para estruturar o aplicativo a
fim de criar estruturas de paginação, mecanismos de respostas e para
fornecer contêineres para conteúdo externo.
Os clipes de filmes são um símbolo chave a ser utilizado, pois são
programáveis. Os clipes de filmes são normalmente utilizados para criar
aplicativos da Web que funcionam de maneira semelhante aos aplicativos
desktop, incluindo tudo, desde imagens de carregamento no vôo até a
implementação da funcionalidade arrastar e soltar.
Nesta unidade, você trabalhará com clipes de filmes e utilizará a Timeline
do clipe de filme para controlar os estados visuais do aplicativo.
7-2
Criando clipes de filmes
Qualquer objeto visual em Flash poderá ser colocado em uma Timeline do
clipe de filme. Os clipes de filmes podem ser criados desde o início ou,
caso a propriedade já esteja no Stage, poderá ser convertida em um
símbolo do clipe de filme:
•
Selecione Insert  New Symbol para criar um símbolo totalmente
novo e preenchê-lo com propriedades.
•
Clique com o botão direito do mouse (pressione ctrl no Mac) em uma
propriedade e selecione Convert to Symbol no menu contextual.
•
Selecione a propriedade e, em seguida, nos menus, selecione Modify
 Convert to Symbol.
•
Arraste a propriedade para a Biblioteca.
Criando clipes de filmes
Depois de criar o símbolo do clipe de filme, atribua a ele um nome de
instância no Property inspector. Utilize o nome da instância do clipe de
filme para controlá-lo com o ActionScript.
Um clipe de filme com um nome de instância
Adicionar propriedades a uma Timeline do clipe de filme
As Timelines do clipe de filme podem ter sua própria estrutura de camadas.
E mais, podem conter tudo que o documento principal pode conter,
inclusive outros clipes de filmes.
Quando estiver no modo de edição do símbolo, é possível adicionar
camadas, importar conteúdo e adicionar instâncias do símbolo a qualquer
Timeline do clipe de filme.
7-3
Uma Timeline do clipe de filme sendo editada no Stage
Editar Timelines do clipe de filme
Para editar uma Timeline do clipe de filme:
•
Clique duas vezes em uma instância do clipe de filme no Stage
para entrar no modo de edição local.
•
Clique duas vezes no ícone do clipe de filme do clipe de filme a ser
editado na Biblioteca do documento.
Clipes de filmes na Biblioteca
7-4
Procedimento 7-1:
Fazendo um clipe de filme para interatividade
•
Criar um símbolo de clipe de filme
•
Adicionar camadas a uma Timeline do clipe de filme
•
Criar um efeito de máscara
•
Utilizar um botão invisível
Etapas
Criando o clipe de filme
4. Selecione a imagem de bitmap na camada featuredItems.
5. Converter a imagem em um símbolo do clipe de filme, selecionando
Modify  Convert to Symbol.
6. Atribuir nome ao símbolo mcFeaturedItems e escolher Movie Clip
como o comportamento. Pressione OK.
7. Insira a Timeline mcFeaturedItems clicando duas vezes na instância
do símbolo no Stage.
8. Renomeie Layer 1 como images.
Adicionar camadas à Timeline do clipe de filme
9. Insira as seguintes camadas no painel Layers:
•
alpha graphic
•
mask
•
thumbs
•
buttons
•
text
•
labels
•
actions
7-5
10. Organize as camadas para que apareçam como na figura a seguir:
Adicionar conteúdo à Timeline do clipe de filme.
11. Selecione a camada Thumbs no painel Layers.
Thumbs e escolha Lock Others no menu contextual.
13. Abra a biblioteca de documentos selecionando Window  Library.
14. Expanda a pasta images da Biblioteca
15. Arraste as quatro imagens em miniatura ativas para o Stage da
Biblioteca:
•
noodlesThumb
•
salmonThumb
•
summerThumb
•
cCakeThumb
16. Organize as imagens em miniatura da esquerda para a direita, na
mesma ordem acima.
17. Bloqueie a camada thumbs e desbloqueie a camada alphaGraphic.
19. Define o traço como No Stroke.
20. Defina o preenchimento como verde claro e o preenchimento alfa
como 85%.
7-6
21. Arraste um retângulo do Stage na camada alphaGraphic que contém a
metade direita da imagem e é ligeiramente maior do que a imagem.
22. Bloqueie a camada alphaGraphic e desbloqueie a camada mask.
24. Assegure-se de que o traço esteja definido como No Stroke.
25. Escolha qualquer cor de preenchimento e defina o raio dos cantos
como 10.
26. Desenhe um retângulo da camada mask aproximadamente com o
mesmo tamanho da imagem na camada images.
27. Adicione o efeito de máscara clicando com o botão direito do mouse
ou pressionando Control na camada mask do painel Layers e
selecionando Mask no menu contextual.
28. Adicione a camada images à máscara clicando duas vezes no ícone de
tipo e escolhendo Masked na caixa de diálogo Layer Properties.
Pressione OK.
29. Desbloqueie a camada buttons.
30. Arraste quatro instâncias do botão btnInvisible da Biblioteca para a
camada buttons.
31. Arraste cada botão sobre a parte superior de uma imagem em miniatura
e redimensione o botão para ajustar a imagem.
32. Da esquerda para a direita, atribua os seguintes nomes de instâncias
aos botões invisíveis:
•
noodleBTN
•
salmonBTN
•
summerBTN
•
cCakeBTN
7-7
33. Bloqueie a camada buttons e desbloqueie a camada text.
34. Selecione a ferramenta Text no painel Tools.
35. Defina a fonte como Arial Black e o tamanho da fonte como 21
utilizando o Property Inspector.
36. Na camada text, digite: House Favorites acima das imagens em
miniatura.
7-8
Utilizando clipes de filmes para criar estados
diferentes
Você pode utilizar os quadros em uma Timeline do clipe de filme para
definir estados visuais diferentes para um aplicativo Flash. Pode utilizar
também o ActionScript para controlar qual estado visual exibir em um
aplicativo a qualquer momento.
Como uma Timeline do clipe de filme é independente das outras Timelines
do aplicativo, as informações não afetam nenhum outro item do Stage.
Criar estados visuais diferentes
Como uma Timeline do clipe de filme é independente, é possível utilizar
quadros-chave para colocar conteúdo diferente em diferentes pontos da
Timeline do clipe de filme. Com o ActionScript, é possível controlar qual
quadro-chave exibir, enviando a reprodução diretamente para ele.
Conteúdo do quadro 1 na Timeline do clipe de filme
Conteúdo do quadro 2 na Timeline do clipe de filme
7-9
Exemplo de uso
Se você estivesse produzindo um Web site para uma empresa de ciclismo,
por exemplo, poderia criar um mapa interativo que incluiria três rotas e
teria as seguintes características:
•
A rota 1 é realçada em vermelho em um quadro-chave em Frame 5 da
Timeline.
•
Timeline.
•
Timeline.
•
Nenhuma Rota é realçada em um quadro-chave no Quadro 1 da Timeline.
•
Todos os quadros são carregados quando o filme é enviado ao Flash
Player.
•
Os três botões à esquerda do mapa têm comportamentos atribuídos a
eles que vão para as diferentes rotas (quadros) da Timeline quando um
usuário passa por eles.
O mapa interativo sem nenhuma rota realçada.
Quando o mapa é carregado no Flash Player, nenhuma rota é realçada, pois
o Frame 1 não contém realce algum.
Quando um usuário rola por um dos três botões, uma rota é realçada no
mapa, pois a reprodução é movida para o quadro apropriado.
Ao criar um mapa dessa maneira, todas as informações necessárias para
exibir cada seção do mapa são enviadas diretamente para o cliente, em vez
de os dados irem e voltarem do cliente para o servidor.
7 - 10
Rótulos de quadros
Os números dos quadros não são alterados. O Frame 10 será sempre o
frame 10. No entanto, o conteúdo do frame 10 pode alterar sua posição na
Timeline de 10 para, digamos, 20. Se você tiver um ActionScript que envie
a reprodução para um quadro específico e, posteriormente, incluir quadros
adicionais, o ActionScript não mostrará mais o conteúdo correto. Se, no
entanto, você enviar a reprodução para um quadro rotulado, então a
reprodução será sempre movida para esse quadro, independentemente de
onde esteja na Timeline.
Utilize rótulos de quadros em uma Timeline para que possa:
•
Organizar o conteúdo da Timeline, especialmente quando estiver
criando estados visuais diferentes no mesmo documento.
•
Fazer referência ao rótulo do quadro nos painéis Actions para que
possa mover a reprodução para um estado visual específico.
É possível atribuir rótulos a todos os quadros em uma Timeline de clipes
de filmes.
Criar rótulos de quadros
Ao rotular quadros:
•
Crie uma camada separada para os rótulos de quadros para que possam
ser facilmente visualizados.
•
Adicione rótulos aos quadros-chave na Timeline.
•
Utilize o Property inspector para atribuir um rótulo a um quadro.

Todos os rótulos do quadro são exibidos na Timeline.

Todos os rótulos do quadro podem ser selecionados nos painéis
Behavior e Actions.
A figura abaixo mostra rótulos nos quadros 1, 5, 10 e 15.
Rótulos do quadro
Nota: Não é necessário adicionar um rótulo de quadro no Frame 1, pois o
conteúdo na posição do Frame 1 raramente é alterado.
7 - 11
Procedimento 7-2:
Utilizando um clipe de filme para criar estados
visuais diferentes
•
Utilizar quadros-chave para organizar uma Timeline do clipe de filme
•
Adicionar rótulos do quadro aos quadros-chave
•
Impedir a animação da Timeline do clipe de filme
Etapas
Estender uma Timeline do clipe de filme
4. Com a ferramenta Selection, clique no frame 20 da camada actions.
5. Mantenha pressionada a tecla shift e, em seguida, selecione o frame 20
da camada images.
6. Estenda a Timeline até o frame 20 em todas as camadas pressionando
F5 no teclado.
7. Na camada labels, insira os quadros-chave nos frames 5, 10 e 15.
Utilize o atalho de teclado F6.
8. Na camada images, insira os quadros-chave nos frames 5,10 e 15.
Utilize o atalho de teclado F7.
Adicionando rótulos de quadro
9. Selecione o quadro-chave 1 da camada labels.
10. No Property inspector, digite summer no campo <frame label>.
11. Selecione o quadro-chave 5 da camada labels. Rotule o quadro noodle.
12. Selecione o quadro-chave 10 da camada labels. Rotule o quadro salmon.
13. Selecione o quadro-chave 15 da camada labels. Rotule o quadro
cheesecake.
7 - 12
Adicionar imagens para criar estados visuais
14. Oculte as camadas mask e alphaGraphic no painel Layers.
15. Selecione o quadro-chave da camada images.
16. Na biblioteca de documentos, expanda a pasta de imagens.
17. Arraste uma instância de noodles.jpg no quadro-chave Stage 5 da
camada images.
18. No Property inspector, posicione o conjunto das posições x e y como 0.
20. Arraste uma instância de salmon.jpg no Stage e posicione-o em um x e
um y como 0.
22. Arraste uma instância de cheesecake.jpg no Stage e posicione-o em
um x e um y como 0.
23. Salve o arquivo.
Test Movie.
25. A Timeline do clipe de filme é animada.
26. Feche o SWF e retorne ao ambiente de edição.
Parar a animação do clipe de filme
27. Selecione o quadro-chave 1 da camada actions.
28. Abra ou expanda o painel Actions (Window  Actions).
29. Pressione o botão Add Action.
30. Selecione Global Functions  Timeline Control  stop.
31. Salve e teste o filme.
32. A Timeline do clipe de filme não será mais animada.
33. Feche o SWF.
7 - 13
Utilizando eventos para controlar o estado visual
O mapa interativo que você está reconstruindo inclui quatro estados visuais,
mas no momento não há como controlar qual estado exibir.
É possível utilizar eventos para controlar os estados visuais de um documento.
Os eventos são transmitidos sempre que alguma coisa acontecer no
aplicativo Flash. Isso, às vezes, pode ser tão simples quanto clicar em um
botão ou tão complexo quanto uma série de pontos de início sendo
detectados no vídeo de transmissão.
Depois que ocorrer um evento, é possível instruir o Flash para concluir
uma tarefa. Por exemplo, se alguém clicar em um botão, será possível abrir
uma página da Web.
Nesta unidade, você manipulará eventos com o Script Assist.
Eventos para botões e componentes no Script Assist
7 - 14
Adicionar a ação goto com o Script Assist
A ação que move a reprodução para posições diferentes na Timeline é a
ação goto. Você pode localizar a ação goto na caixa de ferramentas Actions.
Ao utilizar o Script Assist, a ação goto terá duas opções:
•
Go To and stop enviará a reprodução para um quadro rotulado ou
um número de quadro e instruirá a reprodução para não se mover a
partir desse quadro.
•
Go To and stop enviará a reprodução para um quadro rotulado ou
um número de quadro e instruirá a reprodução para começar a se
mover a partir desse quadro.
Ação goto no Script Assist
O menu suspenso Type permite alternar entre números de quadros ou
rótulos do quadro para referência.
Ao selecionar Frame Label no menu suspenso Type, o Flash coletará os
rótulos do quadro na Timeline do clipe de filme e os exibirá no menu
suspenso Frame. Quando Frame Number estiver selecionado, digite o
número do quadro que deseja que a reprodução direcione no campo Frame.
7 - 15
Alterar eventos no Script Assist
Ao aplicar uma ação como a ação goto em um botão, um evento deverá
acioná-la para que ela seja executada. O evento padrão do botão do mouse
que o Script Assist adiciona para executar seu script é release, que ocorre
quando alguém clica ou solta o botão esquerdo do mouse.
Para alterar o evento que aciona a ação
1. Selecione o evento do mouse no painel Actions.
2. Nos parâmetros Script Assist, selecione um ou mais eventos.
3. Se estiver trabalhando com componentes, você poderá selecionar um
evento do componente no menu suspenso do componente.
Alterando um evento do mouse no Script Assist
7 - 16
Procedimento 7-3:
Controlando uma Timeline do clipe de filme com o
ActionScript
•
Adicionar o ActionScript aos botões com o Script Assist.
•
Utilizar o ActionScript para mover a reprodução para quadros rotulados.
•
Utilizar eventos para disparar ações.
Etapas
Adicionar o ActionScript a um botão com o Script Assist
3. Na Timeline mcFeaturedItems, clique com o botão direito do mouse
ou pressione Control na camada buttons e selecione Lock Others no
menu contextual.
4. Vá para a ferramenta Selection no painel Tools.
5. Na camada buttons, selecione a instância de btnInvisible na imagem
noodlesThumb no Stage.
6. Abra o painel Actions (Window  Actions) e vá para o modo Script
Assist, caso ainda não esteja nele.
7. Selecione Global Functions  Timeline Control  goto na caixa de
ferramentas Actions.
8. Nos parâmetros do Script Assist, selecione o botão de opção Go to and
stop.
9. Selecione Frame Label no menu suspenso Type.
10. Selecione noodle no menu suspenso Frame.
7 - 17
Alterar o evento que dispara a ação
11. Ainda no Script Assist, selecione a linha do ActionScript em que se lê
on(release) no painel Actions.
12. Nos parâmetros do Script Assist, desmarque Release e selecione Roll
Over.
Adicionar o ActionScript aos botões restantes
13. Selecione a instância de btnInvisble na imagem salmonThumb no
Stage.
14. Selecione Global Functions  Timeline Control  goto.
15. Nos parâmetros do Script Assist, selecione o botão de opção Go to and
stop, defina Type como Frame Label e o quadro como salmon.
16. Selecione a linha do ActionScript em que se lê on(release) no painel
Actions. Altere o evento de Release para Roll over.
17. Repita as etapas de 9 a 12 para os botões em summerThumb e
cCakeThumb, utilizando os rótulos do quadro summer e cheesecake,
respectivamente.
18. Salve e teste o filme.
19. Role sobre cada botão.
7 - 18
Utilizando comportamentos
Os comportamentos são partes pré-criadas do ActionScript fornecidas com
o Flash 8. Eles podem ser encontrados no painel Behaviors (Window 
Behaviors) e, como o Script Assist, fazem boa parte do trabalho para você.
Os Comportamentos podem ser adicionados a:
•
Objetos como botões, clipes de filmes ou componentes.
•
Quadros-chave na Timeline.
Os Comportamentos são organizados em categorias diferentes no painel
Behaviors. Cada categoria faz alguma coisa ligeiramente diferente. Por
exemplo, a categoria Movieclip contém comportamentos que controlam os
objetos do clipe de filme.
Adicionar comportamentos
Para adicionar um comportamento ao aplicativo Flash, selecione um objeto
ou um quadro-chave e, em seguida, acione o painel Behaviors.
•
Pressione o botão Add Behavior, selecione uma categoria no menu
suspenso. É possível adicionar mais de um comportamento a
qualquer objeto.
7 - 19
Adicionar um comportamento
•
Selecione um comportamento nas categorias.
Selecionar um comportamento da categoria Movieclip
•
Preencha os parâmetros necessários e, em seguida, clique em OK.
Utilizar o comportamento Goto and Stop at Frame or Label
O comportamento Goto and stop at frame or label faz o mesmo que a ação
goto faz no Script Assist. A única diferença são as caixas de diálogo que
ajudam a preencher os parâmetros necessários.
Adicione o comportamento selecionando o botão Add behavior e, em
seguida, Movieclip  Goto and Stop at frame or label. Ao adicionar o
comportamento a algo parecido com um botão, a seguinte caixa de diálogo
será exibida:
7 - 20
Caixa de diálogo Goto and stop at frame or label
Nessa caixa de diálogo, selecione o clipe de filme a ser controlado e, em
seguida, digite o rótulo do quadro ou o número do quadro a ser reproduzido
para ir para o campo de texto.
Alterar o disparador de eventos
Como no Script Assist, o evento padrão que ativa o ActionScript ao
adicionar um comportamento em um botão é release. Para alterá-lo,
selecione um evento diferente no menu suspenso Event no painel Behaviors.
Alterando um evento no painel Behaviors
7 - 21
Resumo da unidade
7 - 22
•
Os clipes de filmes são símbolos reutilizáveis que podem ser
controlados pelo ActionScript.
•
As Timelines do clipe de filme são independentes de outras Timelines
do aplicativo Flash.
•
Um clipe de filme pode ser referido no ActionScript pelo nome de
instância.
•
Você pode utilizar os quadros em uma Timeline de clipes de filmes
para definir estados visuais diferentes para um aplicativo Flash.
•
Utilize os botões e eventos para controlar o estado visual de um
aplicativo Flash.
•
A ação goto controla a posição de uma reprodução dentro de um clipe
de filme. Com o Script Assist, é possível informar à reprodução to go
and stop at a frame or a label ou to go to and play.
•
Utilize rótulos do quadro em uma Timeline para organizar o conteúdo.
Fazer referência aos rótulos de quadros no ActionScript em vez de aos
números de quadros atualiza o aplicativo com mais facilidade.
•
Você pode alterar o evento que ativa um ActionScript para atender as
suas necessidades ou as expectativas do usuário.
Revisão da unidade
1.
Qual é a diferença entre um símbolo de clipe de filme e um símbolo
gráfico?
2. O que é um evento?
3. Qual é a vantagem de atribuir rótulos de quadro ao conteúdo?
4. Ao utilizar o Script Assist, por que você desejaria alterar o evento
padrão que ativa um ActionScript para um tipo de evento diferente?
7 - 23
Laboratório 7:
Controlando uma Timeline do clipe de filme
Neste laboratório, você adicionará o ActionScript que exibirá seções de
menus diferentes na página Menu quando um usuário clicar em um botão.
Objetivos
Depois de concluir este laboratório, você deverá ser capaz de:
•
Organizar uma Timeline do clipe de filme
•
Utilizar rótulos do quadro
•
Adicionar ações aos botões
•
Controlar uma Timeline com o ActionScript
•
Utilizar botões para disparar ações.
Etapas detalhadas
2.
Organizando os estados visuais da Timeline de um clipe de
filme
3. Um símbolo de clipe de filme já foi criado para você e colocado na
camada de menu do Stage. Clique duas vezes nele com a ferramenta
Selection para acessar sua Timeline. Você estará no modo Edit in
Place e, portanto, seus outros gráficos parecerão estar esmaecidos.
4. Selecione Layer 1 e renomeie-a como images.
5. Insira uma nova camada acima da camada images e atribua a ela o
nome labels.
6. Insira uma nova camada acima da camada labels e atribua a ela o nome
actions.
7. Selecione o quadro 20 da camada actions.
images.
9. Estenda a Timeline das três camadas pressionando o atalho do
teclado F5.
10. Selecione o frame 5 na camada images e insira um blank keyframe
com o atalho de teclado F7.
7 - 24
11. Insira mais dois quadros-chave vazios nos frames 10 e 15 da camada
images.
12. Selecione o quadro-chave em branco no quadro 5 da camada images.
13. Abra a Biblioteca selecionando Window  Library, caso ela ainda
não esteja aberta.
14. Arraste uma instância de grAppetizer da pasta Library para o quadro 5
da camada images.
15. Usando o Property inspector, posicione o símbolo no ponto (0,0) do
sistema de coordenadas xy.
16. Adicione uma instância de grEntree ao quadro 10 da camada images e
posicione-a no ponto (0,0).
17. Adicione uma instância de grDesserts ao quadro 15 da camada images
e posicione-a no ponto (0,0).
18. Bloqueie a camada images.
19. Selecione o quadro 1 da camada labels.
20. No Property inspector, digite special no campo <frame label>.
22. Insira um quadro-chave no frame 5 da camada labels com o atalho de
teclado F6.
23. Utilize o Property inspector para rotular o quadro apps.
24. Selecione o quadro 10 da camada labels. Insira um quadro-chave e
rotule o quadro como entrees.
rotule o quadro como desserts.
Adicionando o ActionScript que controla a Timeline
26. Selecione o quadro 1 da camada actions.
27. Abra o painel Actions.
28. Pressione o botão Add Action e selecione Global Functions 
Timeline Control  stop nos menus.
7 - 25
29. Retorne à Timeline do documento principal pressionando Scene 1 na
barra Edit.
buttons e selecione Lock Others no menu contextual.
31. Selecione a instância de botão para appetizers.
32. Abra o painel Behaviors selecionando Window  Behaviors.
33. Assegure-se de que o botão de teste esteja selecionado no Stage.
34. Pressione o botão Add Behavior.
35. Selecione Movie clips  Go to and stop at frame or label.
36. Na caixa de diálogo Go to and stop at frame or label, selecione
menuClip como o clipe de filme a ser controlado.
37. Digite apps no campo de rótulo ou número do quadro na parte inferior
da caixa de diálogo.
7 - 26
38. Pressione OK.
39. Verifique se o evento de ativação está onRelease.
40. Selecione o botão Entrees.
41. No painel Behaviors, adicione o comportamento Go to and stop at
frame or label ao botão Entrees.
42. Selecione menuClip como o clipe de filme a ser controlado e digite
entrees no campo de rótulo ou número do quadro.
43. Pressione OK.
44. Repita as etapas 39 a 42 para os botões Desserts e Catch of the Day, o
que levará a linha de tempo do clipe de filme aos quadros rotulados
desserts e special, respectivamente.
Testando os comportamentos.
Test Movie.
46. Verifique se cada um dos botões está levando a Timeline do clipe de
filme ao quadro com o rótulo correto.
47. Feche o SWF.
48. Faça as devidas correções se necessário.
7 - 27
Etapas gerais
2.
Organizando os estados visuais da Timeline de um clipe de
filme
3. Um símbolo de clipe de filme já foi criado para você e colocado na
camada de menu do Stage. Clique duas vezes nele com a ferramenta
Selection para acessar sua Timeline. Você estará no modo Edit in
Place e, portanto, seus outros gráficos parecerão estar esmaecidos.
4. Renomeie Layer 1 como images.
5. Insira mais duas camadas chamadas actions e labels.
6. Posicione suas camadas para que correspondam à figura abaixo:
7. Estenda a Timeline das três camadas para o frame 20 com um quadro
padrão.
8. Insira um quadro-chave vazio nos frames 5, 10 e 15 da camada images.
9. Selecione o quadro-chave em branco no quadro 5 da camada images.
10. Abra a Biblioteca, caso ainda não esteja aberta.
11. Arraste uma instância de grAppetizer da pasta Library para o quadro 5
da camada images.
12. Usando o Property inspector, posicione o símbolo no ponto (0,0) do
sistema de coordenadas xy.
13. Adicione uma instância de grEntree ao quadro 10 da camada images e
posicione-a no ponto (0,0).
14. Adicione uma instância de grDesserts ao quadro 15 da camada images
e posicione-a no ponto (0,0).
15. Bloqueie a camada images.
17. No Property inspector, digite special no campo <frame label>.
18. Insira um quadro-chave no frame 5 da camada labels e rotule-o como
apps.
rotule o quadro como entrees.
7 - 28
rotule o quadro como desserts.
Adicionando o ActionScript que controla a Timeline
21. Adicione uma ação stop ao frame 1 da camada actions para evitar a
animação do clipe de filme.
22. Retorne à Timeline do documento principal pressionando Scene 1 na
barra Edit.
buttons e selecione Lock Others no menu contextual.
24. Selecione a instância de botão para appetizers.
25. Abra o painel Behaviors e pressione o botão Add Behavior.
26. Selecione Movie clips  Go to and stop at frame or label.
27. Na caixa de diálogo Go to and stop at frame or label, selecione
menuClip como o clipe de filme a ser controlado.
7 - 29
28. Digite apps no campo de rótulo ou número do quadro na parte inferior
da caixa de diálogo.
29. Pressione OK.
30. Selecione o botão Entrees.
31. Adicione o comportamento Go to and stop at frame or label ao botão.
32. Selecione menuClip como o clipe de filme a ser controlado e digite
entrees no campo de rótulo ou número do quadro.
33. Pressione OK.
34. Repita as etapas 39 a 42 para os botões Desserts e Catch of the Day, o
que levará a linha de tempo do clipe de filme aos quadros rotulados
desserts e special, respectivamente.
Testando os comportamentos.
Test Movie.
36. Verifique se cada um dos botões está levando a Timeline do clipe de
filme ao quadro com o rótulo correto.
37. Feche o SWF.
38. Faça as devidas correções se necessário.
7 - 30
Unidade 8:
Adicionando som e vídeo
•
Importar um som e adicioná-lo à Timeline de um documento.
•
Importar um vídeo e incorporá-lo em um clipe de filme.
•
Usar o componente FLVPlayback para fazer download progressivo de
vídeo a partir de um servidor.
Tópicos da unidade
•
Trabalhando com som e vídeo
•
Trabalhando com som
•
Importando arquivos de som
•
Alterando propriedades de som
•
Adicionando som a um documento do Flash
•
Controlando o som na Timeline
•
Incorporando vídeo
•
Usando o componente FLVPlayback
8-1
Trabalhando com som e vídeo
O uso de som e vídeo em sites tornou-se mais popular nos últimos anos.
Som e vídeo oferecem a desenvolvedores e designers novas oportunidades
de produzir experiências enriquecedoras na Web que abordem diversos
propósitos, de educação a entretenimento.
No passado, o uso de som e vídeo era restrito:
•
Arquivos de som tendem a ser grandes
•
Arquivos de vídeo tendem a ser grandes
•
Vídeos de transmissão em fluxo contínuo requerem um plug-in
•
Nem todas as pessoas têm o mesmo plug-in instalado.
Os plug-ins de vídeo limitavam-se ao Real, ao Windows Media e ao
QuickTime, que raramente é pré-instalado em todos os sistemas
operacionais.
A Macromedia apresentou o suporte a som muito cedo; sons importados
para arquivos Flash são compactados no formato MP3, que é leve e pode
ser transferido ou obtido por download progressivo. Há outros formatos de
compactação disponíveis no Flash.
Com o Macromedia Flash 8, o suporte a vídeo foi aperfeiçoado para incluir
duas codecs para compactação. Atualmente, o formato FLV (Macromedia
Flash Video) é o formato mais usado para fornecimento de vídeo na Web e
tende a ser mais leve do que outros formatos, como WMV, MOV e RAM.
Nesta unidade, você trabalhará com arquivos de som e arquivos de vídeo.
Você importará sons e vídeos e incorporará ambos na Timeline de um
documento. Além disso, você usará o componente FLVPlayback para fazer
download progressivo de vídeo com formato FLV.
8-2
Trabalhando com som
O som pode melhorar a experiência do usuário fornecendo comentários após
a conclusão de uma tarefa, instruções para projetos (como aprendizado
baseado na Web) ou entretenimento (como uma jukebox MP3 baseada no
Flash). O Flash é capaz de importar e compactar a maioria dos formatos de
som, bem como transferir ou fazer download progressivo de arquivos MP3
do servidor.
O Flash 8 suporta os seguintes formatos de arquivos de som:
•
MP3
•
AU
•
WAV
•
AIFF
•
Sound Designer II
•
Filmes QuickTime, somente som
•
Sons System 7 (somente Macintosh)
Nota: É necessário ter o QuickTime 4 ou superior para importar arquivos
do AIFF, do WAV e do Sound Designer II entre plataformas.
8-3
Importando arquivos de som
Selecione File  Import  Import to Library para adicionar um
arquivo de som à Library de um documento. Os arquivos de som não podem
ser importados diretamente para o Stage, pois não são propriedades visuais.
Importar para Library
Quando você importa um som para Library, o arquivo de som importado:
8-4
•
É, por padrão, compactado como MP3 quando publicado.
•
É armazenado uma vez e pode ser mencionado várias vezes em um
documento do Flash.
•
Adiciona tamanho de arquivo ao documento do Flash.
•
Deve ser adicionado a um quadro-chave em uma Timeline para ser
executado.
•
Não pode ser adicionado à Timeline de um símbolo gráfico.
Arquivo de som na Library de um documento
O arquivo de som é mostrado na Library com seu nome de arquivo. Esse
nome pode ser alterado. Na verdade, o som é importado para o Flash e as
alterações feitas no arquivo não afetam o arquivo original a partir do qual
você realizou a importação.
8-5
Alterando propriedades de som
Depois de importar som para o documento, você pode alterar seu tipo de
compactação na caixa de diálogo Sound Properties. Para abrir a caixa de
diálogo Sound Properties, clique duas vezes no ícone do arquivo de som na
Library.
Estes são os tipos de compactação de som disponíveis para o Flash 8:
•
ADPCM: Bom para sons curtos
•
MP3: Bom para sons longos
•
RAW: Bom para sons extremamente curtos
•
Speech: Bom para narrações
Ao selecionar um tipo de compactação diferente, você pode clicar no botão
Test para saber como a nova compactação soará quando o SWF for
executado.
8-6
Adicionando som a um documento do Flash
Há duas maneiras de adicionar um som a um documento do Flash:
•
Arraste uma instância de um som da Library para o Stage.
•
Use ActionScript para carregar um som na Library.
•
Use ActionScript ou um componente de mídia para transferir ou fazer
download progressivo de arquivos MP3 de um servidor.
Nota: Este curso só aborda a inclusão de sons na Timeline de um
documento.
Adicionando uma instância de som ao Stage
Quando você adicionar um som arrastando uma instância dele de Library
para Stage em um documento principal, um clipe de filme ou uma
Timeline de botão:
•
Crie uma camada separada para as propriedades do som e, na maioria
dos casos, uma camada separada para cada som (isso facilita a
localização de muitos sons).
•
Insira um quadro-chave no ponto da Timeline em que deseja que o
som comece.
•
Realce o quadro-chave e arraste e solte a instância de som em algum
lugar do Stage.
•
O som não é representado visualmente. Quando o som está no quadrochave, um padrão de onda é exibido na Timeline, começando no
quadro-chave no qual o som se encontra.
Som na Timeline de um botão
8-7
Controlando o som na Timeline
Assim como faz com outras propriedades, selecione uma propriedade de
som na Timeline e use o Property inspector para visualizar e alterar as
características de uma instância de som, como tipo e efeito.
O Property inspector com uma instância de soundtrack.mp3
selecionada.
Definindo tipos
Use os campos Sync do Property inspector para definir um tipo de som.
Existem dois tipos de som:
•
Sons de eventos
•
Fluxos de som
Você também pode usar os campos Sync para especificar se deseja fazer
loops contínuos no arquivo de som ou repeti-lo até 999 vezes.
O Property inspector com soundtrack.mp3 definido para iniciar.
Estes são os tipos de som exibidos no menu suspenso Sync:
8-8
•
Event: Um som de evento é executado quando o quadro-chave no
qual ele se encontra é localizado pela reprodução e é inteiramente
executado, mesmo que a reprodução não esteja mais se movendo.
Se a reprodução fizer loop, uma nova instância do som começará a
ser executada, mesmo que a instância inicial ainda esteja em
execução.
•
Start: Funciona da mesma forma que Event, com a diferença de
que, se a reprodução fizer loop, o som só será executado se a
reprodução da instância anterior do mesmo som já tiver sido
concluída.
•
Stop: Silencia o som especificado no quadro-chave com o som
definido para parar.
•
Stream: Sincroniza o som para que seja executado juntamente com
uma animação em um site. O Flash instrui a animação a
acompanhar os fluxos de som. Se ele não conseguir desenhar
quadros da animação suficientemente rápido, esses quadros serão
ignorados. Ao contrário dos sons de evento, os fluxos de som serão
interrompidos se o arquivo SWF parar. Além disso, a reprodução
de um fluxo de som nunca pode ultrapassar a duração dos quadros
ocupados pelo som. Os fluxos de sons são mixados quando você
publica o arquivo SWF.
Opções Sync
8-9
Usando fluxos de som
Fluxos de som:
•
São sincronizados com a Timeline.
•
Geralmente, são usados para narrações e sons sincronizados com uma
animação.
•
Podem começar a ser executados assim que os primeiros quadros de
dados forem transferidos por download; o restante será sincronizado
com a Timeline conforme for executado.
•
Devem ocupar o mesmo número de quadros que o período de execução
do som.
Determinando a duração de um arquivo de som
Antes de adicionar um som à Timeline a fim de sincronizá-lo com uma
animação ou outra seqüência de quadros, você precisa determinar sua
duração e estender a Timeline antes de adicionar a instância de som.
Para determinar a duração de um arquivo de som:
1. Clique duas vezes (ou, em um MAC, clique em ctrl) no som na Library
para acessar Sound Properties e exibir a duração do som em segundos.
O arquivo de som acima tem 32 segundos de duração.
2. No menu principal, selecione Modify  Properties para exibir as
propriedades do documento do Flash.
3. Multiplique a duração do som pelo número de quadros por segundo
(qps) definido para o documento do Flash a fim de determinar em que
número de quadro a Timeline deverá ser estendida.
4. Insira um quadro nesse número para estender a Timeline.
8 - 10
Usando sons de eventos
Sons de eventos:
•
São bons para trilhas sonoras de fundo, pois são executados
independentemente da Timeline.
•
Podem ser vinculados a um evento de usuário, como o clique de um
botão. Para isso, o som deve ser colocado no quadro para baixo da
Timeline de um botão.
•
São freqüentemente usados para efeitos sonoros de botão e para
jukeboxes.
•
Devem ser totalmente transferidos por download antes de serem
executados.
•
Serão executados até o fim, a menos que sejam explicitamente
interrompidos.
Nota: Use sons curtos para trilhas sonoras de fundo e atribua Loop para o
tipo de som Event a fim de manter o tamanho de arquivo mínimo do
documento.
Definindo tipos de eventos de som
Use o campo Effect do Property inspector para definir Fade in, Fade out ou
efeitos de volume personalizados para a instância de som.
O campo Effects controla o efeito de volume de um som.
O Flash também inclui um editor de som que você pode usar para aplicar
efeitos de volume adicionais. Como opção, você pode criar e aplicar seu
próprio efeito de volume.
Selecione Edit no Property inspector para acessar o editor de som (Edit
Envelope).
8 - 11
Use o editor de som para selecionar uma opção em uma lista de
efeitos de volume ou para criar seu próprio efeito.
Opções de efeito sonoro disponíveis no Flash
8 - 12
Procedimento 8-1:
Importando sons
•
Importar um som para a Library
•
Alterar propriedades de som
•
Adicionar som à Timeline de um botão.
Etapas
Importando um som para a Library do documento
3. Para importar um som, selecione File  Import  Import to Library.
4. Na caixa de diálogo Import to Library, escolha
{webroot}/mmcourses/frcc800/assets/soundTrack.mp3.
5. Pressione Import para importar o som.
6. Para abrir a caixa de diálogo Sound Properties, clique duas vezes em
soundtrack.mp3 na Library do documento.
7. No menu suspenso Compression, selecione MP3 para alterar a
compactação.
8. Defina a taxa de bits como 24kps.
9. No menu suspenso Quality, escolha Fast.
10. Para ouvir a nova compactação, pressione Test.
11. Para sair da caixa de diálogo Sound Properties, clique em OK.
Adicionando o som à Timeline e atribuindo a ele um efeito
de desaparecer.
12. Insira uma nova camada acima da camada images e denomine-a
soundtrack.
13. Clique com o botão direito do mouse na camada soundtrack, ou
clique em control e na camada soundtrack, e escolha Lock Others
no menu contextual.
14. Selecione o quadro 1 da camada soundtrack e arraste uma instância de
soundtrack.mp3 da Library para o Stage. Observe o padrão de onda
no quadro-chave.
15. Realce o quadro 1 da camada soundtrack.
16. No Property Inspector, selecione Fade Out no menu suspenso Effect
para criar um efeito de desapareccer.
8 - 13
17. No menu suspenso Synch, selecione Start.
18. Salve o arquivo e selecione Control  Test Movie para ouvir o som
em execução.
19. Feche o SWF.
Importando um som para um botão
20. Selecione File  Import  Import to Library.
21. Na caixa de diálogo Import to Library, procure
{webroot}/frcc800/assets/popcork.wav. Clique em Import.
22. Na Library do documento, clique duas vezes em popcork.wav.
23. Na caixa de diálogo Sound Properties, altere o tipo de som para
ADPCM.
24. Defina Sample Rate como 11kHz.
25. Defina os ADPCM Bits como 4 bits.
26. Clique em OK.
Adicionando som à Timeline de um botão
27. Na Library do documento, clique duas vezes em btnNav para entrar no
modo de edição de símbolos.
28. Renameie Layer 1 como graphics.
29. Insira uma nova camada acima da camada graphics e renomeie-a
sound.
30. Selecione o quadro Down e insira um quadro-chave usando o atalho de
teclado F6.
31. Certifique-se que o quadro-chave no quadro Down esteja realçado.
Arraste uma instância de popcork.wav no Stage.
32. Pressione Scene 1 na barra de edição para retornar à principal Timeline
do documento.
33. Selecione Control  Test Movie para publicar um SWF.
34. No modo Test Movie, pressione os proncipais botões de navegação.
35. Feche o SWF.
8 - 14
Incorporando vídeo
Há três maneiras de adicionar vídeo a um site usando o Flash:
•
Incorpore o vídeo em um documento do Flash.
•
Use o Flash Media ou os componentes FLVPlayback para transferir ou
fazer download progressivo do vídeo a partir de um servidor.
•
Vincule o vídeo a um arquivo de vídeo externo e exporte-o como um
filme do QuickTime. Essa técnica só será útil se você estiver criando
filmes do QuickTime com controles de reprodução do Flash.
Incorporando vídeo diretamente em um documento do Flash
O Flash 8 aceita todos os formatos de arquivo de vídeo suportados pelo
Apple QuickTime ou pelo Microsoft Direct Show. Os formatos suportados
incluem arquivos MOV, MPEG e AVI. Se você incorporar vídeo
diretamente em um documento do Flash, o tamanho do arquivo aumentará,
quer o usuário final visualize o filme ou não.
Use o assistente Import Video para importar e incorporar vídeo em um
documento do Flash. No entanto, você também pode usar esse assistente
para apontar para um arquivo FLV para fazer transferência ou download
progressivo.
Opção Import video
8 - 15
Importando vídeo
Para importar vídeo para um documento do Flash:
1. Selecione File  Import  Import Video.
Assistente Video Import
2. Selecione o arquivo de vídeo para realizar uma importação usando a
caixa de diálogo Import.
3. Use o assistente Video Import para:

8 - 16
Incorporar o vídeo.

Determinar se o vídeo deverá ser incluído em um clipe de filme e
colocar uma instância dele no Stage

Importar o vídeo inteiro ou editá-lo primeiro e importá-lo em
seguida.

Definir um perfil de compactação para que o vídeo seja preparado
para as características de banda larga da Internet dos seus usuários.
8 - 17
Quando o arquivo de vídeo estiver na Library, você poderá arrastar uma
instância dele para o Stage.
Vídeo na Library
Se tiver incorporado o vídeo a um clipe de filme, arraste uma instância do
clipe de filme no Stage.
Se não tiver incorporado o vídeo a um clipe de filme, quando você arrastar
o arquivo de vídeo para o Stage, o Flash solicitará que você estenda a
Timeline para a quantidade de quadros necessários para a exibição correta
do vídeo.
Prompt para estender a Timeline
Por isso, é recomendável incorporar vídeo na Timeline de um clipe de filme.
8 - 18
Procedimento 8-2:
Importando vídeo
•
Importar vídeo
•
Colocar vídeo em um clipe de filme
•
Exibir vídeo no Stage
Etapas
Importando vídeo
3. Selecione File  Import  Import Video.
4. Na categoria Select Video, procure
{webroot}/mmcourses/frcc800/assets/café_townsend_home.flv.
5. Pressione Continue.
6. Na categoria Deployment, escolha Embed video in SWF and play in
timeline.
7. Na categoria Embedding, selecione Movie Clip no menu suspenso
Symbol Type.
8. Desmarque a caixa de seleção Place instance on stage.
9. Pressione Continue.
10. Pressione Import para importar o vídeo.
11. Na Library do documento, renomeie o clipe de filme
café_townsend_home.flv para homeVideo.
Exibindo vídeo no Stage
12. Crie uma nova camada acima da camada Guide: images e denomine-a
video.
13. Clique com o botão direito do mouse na camada video, ou clique em
control e na camada video, e escolha Lock Others no menu contextual.
14. Na Library do documento, arraste uma instância de homeVideo para o
Stage.
15. Usando o Property Inspector, coloque o vídeo em um x de 24.6 e um y
de 22.
8 - 19
16. Altere a largura para 185 e a altura para 124.4.
17. Selecione Control  Test Movie para executar o vídeo.
18. Feche o SWF.
19. Salve wt8-2.fla e deixe-o aberto para o próximo procedimento.
8 - 20
Componentes são dispositivos pré-criados que você pode arrastar e
soltar em um aplicativo Flash. Um componente possui um conjunto de
parâmetros modificáveis que podem ser alterados diretamente no
Property inspector. Na maioria dos casos, os componentes requerem o
uso de poucos comandos (ou não requerem o uso de comando algum)
do ActionScript para funcionar.
O Flash 8 Professional inclui um conjunto de componentes de mídia e o
componente FLVPlayback. Os componentes de mídia podem ser usados
para reproduzir arquivos MP3 e vídeos com formato FLV a serem
enviados ao Flash Player 7 ou superior. O componente FLVPlayback é
usado para enviar conteúdo de vídeo exclusivamente ao Flash Player 8.
Componentes FLVPlayback e de mídia
Para usar o componente FLVPlayback, arraste-o do painel Components
(Window  Components) para o Stage em um quadro-chave.
É recomendável que você atribua ao componente uma camada própria.
8 - 21
Adicionando mídia de fluxo ao componente FLVPlayback
Para especificar um vídeo para transferir ou fazer download progressivo a
partir de um servidor, altere as propriedades do componente FLVPlayback
no Properties inspector.
•
No Property inspector, alterne para a guia Parameters.
•
Especifique o vídeo a ser executado no parâmetro contentPath.
•
Se estiver transferindo o vídeo do Flash Communication Server ou do
Flash Video Streaming Service, defina o parâmetro isLive como true.
Caso contrário, mantenha o parâmetro definido como false. Quando o
parâmetro é definido como false, os arquivos FLV serão transferidos
do servidor por download progressivo.
•
Selecione skin no parâmentro skin.
A guia Parameters fica disponível no Property inspector quando você
seleciona um componente de mídia no Stage.
Parâmetros para o componente FLVPlayback
Aplicando aparências ao componente FLVPlayback
A aparência de um componente são os gráficos que, coletivamente, compõem
seu visual. O componente FLVPlayback inclui 33 opções de aparência.
Para selecionar uma aparência diferente para o seu componente, clique
duas vezes no parâmetro skin.
Escolhendo uma aparência
Selecione uma aparência no menu suspenso skin e clique em OK.
8 - 22
Todas as aparências do componente FLVPlayback são arquivos SWF
independentes. O arquivo SWF que produz a aparência deve estar no
mesmo diretório que o arquivo que contém o componente quando o
aplicativo Flash é implantado.
Você pode criar suas próprias aparências para o componente FLVPlayback.
Para obter mais informações sobre como criar suas próprias aparências
personalizadas, consulte:
www.macromedia.com/devnet/flash/articles/custom_flvcomp_04.html
8 - 23
Procedimento 8-3:
•
Usar uma instância do componente FLVPlayback
•
Usar o componente FLVPlayback para fazer download progressivo de
vídeo
•
Alterar as propriedades do componente FLVPlayback
•
Alterar a aparência do componente FLVPlayback
Etapas
1. Abra wt8-2.fla no diretório {webroot}/mmcourses/frcc800/walk.
Excluindo os arquivos de vídeo atuais
3. Selecione a instância de homeVideo na camada video e exclua-a.
4. Exclua o símbolo de homeVideo da Library do documento.
5. Exclua o objeto de vídeo café_townsend_home.flv da Library.
6. Expanda o painel Components.
7. Expanda a categoria FLVPlayback-Player 8.
8. Arraste uma instância do componente FLVPlayback no Stage.
Alterando as propriedades do componente FLVPlayback
9. No Property inspector, clique na guia Parameters.
10. Defina o x como 24.6.
11. Defina o y como 18.
12. Clique duas vezes no parâmetro contentPath.
13. Procure
{webroot}/mmcourses/frcc800/assets/café_townsend_home.flv.
14. Clique em OK.
15. Selecione o parâmetro maintainAspectRatio e defina-o como false.
16. Altere a largura do componente para 185 e a altura para 138.8.
8 - 24
Alterando a aparência do componente FLVPlayback
17. Clique duas vezes no parâmetro skin.
18. Selecione MojaveOverPlaySeekMute.swf.
19. Clique em OK.
20. Selecione Control  Test Movie para ver o vídeo.
21. Nos controles de reprodução do vídeo, clique em Play.
22. Feche o SWF.
8 - 25
Resumo da unidade
8 - 26
•
O Flash suporta os seguintes formatos de arquivo de som: MP3, AU,
WAV e AIFF.
•
Para incluir som em um documento do Flash. importe um arquivo de
som para a Library e, em seguida, arraste e solte o arquivo no Stage.
•
Você pode definir sons de eventos e fluxos de som para um documento.
Os fluxos de som são vinculados à Timeline.
•
Os fluxos de som devem residir em suas próprias camadas, e suas
Timelines devem ser estendidas até atingir a duração do arquivo de
som.
•
O Flash aceita qualquer formato de arquivo de vídeo suportado pelo
Apple QuickTime ou pelo Microsoft Direct Show; isso inclui os
formatos MOV, MPEG e AVI.
•
Há duas maneiras de adicionar vídeo a um site: incorporar o vídeo em
um documento do Flash ou usar componentes do Flash para transferir
ou fazer download progressivo do vídeo a partir de um servidor.
•
Incorpore vídeo em um documento do Flash com o assistente Video
Import. É recomendável incorporar vídeo em um clipe de filme.
•
Arraste uma instância de um componente FLVPlayback para o Stage
para transferir ou fazer download progressivo de vídeo.
•
É possível alterar as aparências do componente FLVPlayback. As
aparências são arquivos SWF que devem estar no mesmo diretório que
o arquivo SWF que contém o componente FLVPlayback.
Revisão da unidade
1. Qual é o melhor formato de compactação para sons curtos?
2. Qual é a diferença entre Event e Start no menu Sync do som no
Property inspector?
3. Como faço para incorporar vídeo em um documento do Flash?
4. Qual é a função do parâmetro isLive do componente FLVPlayback?
8 - 27
Laboratório 8:
Adicionando som e vídeo a Timelines
Neste laboratório, você adicionará som à Timeline do botão de navegação
na seção de menu. Você também adicionará vídeo ao componente
FLVPlayback na seção Chef Ipsum do site.
Objetivos
•
Importar um som
•
Alterar propriedades de som
•
Adicionar um som à Timeline de um botão
•
Usar o componente FLVPlayback
•
Alterar a aparência do componente FLVPlayback
Etapas detalhadas
Importando som e alterando suas propriedades
3. Selecione File  Import  Import to Library.
4. Importe o popcork.wav do diretório
5. Na Library do documento, clique duas vezes no ícone de popcork.wav
para abrir a caixa de diálogo Sound Properties.
6. Na caixa de diálogo Sound Properties, escolha ADPCM no menu
suspenso Compression.
7. Defina Sample rate como 11 kHz.
8. Defina os ADPCM Bits como 4 bits.
8 - 28
9. Pressione o botão Test para ouvir a nova compactação de som.
10. Pressione OK para salvar as configurações e sair da caixa de diálogo
Sound Properties.
11. Na Library, clique duas vezes no ícone de btnNav.
12. Na Timeline de btnNav, altere o nome de layer 1 para graphics.
13. Insira uma nova camada acima da camada graphics e atribua a ela o
nome sound.
14. Selecione o quadro Down na camada sound e insira um quadro-chave
usando o atalho de teclado F6.
15. Certifique-se de que o quadro Down da camada sound ainda esteja
realçado.
16. Adicione popcork.wav ao quadro Down arrastando uma instância do
som da Library para o Stage.
17. Salve seu arquivo e teste-o com Control  Test Movie.
18. Clique nos botões para garantir que o som seja reproduzido.
19. Feche o SWF.
8 - 29
Adicionando vídeo com o componente FLVPlayback
21. Abra o chefIpsumRaw.fla no diretório
22. Salve o arquivo como chefIpsum.fla na mesma pasta.
23. Selecione a camada static text e insira uma nova camada acima dela.
Atribua o nome video à camada.
24. Clique com o botão direito do mouse na camada video, ou clique em
control e na camada video, e escolha Lock Others no menu contextual.
25. Abra ou espanda o painel Components (Window  Components).
26. Expanda a categoria FLVPlayback-Player 8.
27. Na categoria FLVPlayback-Player 8, arraste uma instância do
componente FLVPlayback para o Stage.
28. Usando o Property inspector, defina a coordenada X como 306.
29. Defina a coordenada Y como 61.
30. Alterne para a guia Parameters no Property inspector.
31. Defina o parâmetro contentPath como../assets/chefIpsum.flv.
32. Defina o parâmetro maintainAspectRatio como false.
33. Clique duas vezes no parâmetro skin.
8 - 30
34. Defina a skin como MojaveOverPlaySeekMute.swf. Clique em OK
para sair da caixa de diálogo.
35. Defina a largura da instância do componente como 237 e a altura
como 178.
36. Salve o arquivo e teste-o com Control  Test Movie.
37. Feche o SWF.
38. Salve e feche o chefIpsum.fla
Etapas gerais
Importando som e alterando suas propriedades
3. Importe o popcork.wav do diretório
4. Altere a compactação de popcork.wav para ADPCM.
5. Altere os bits de Sample Rate e ADPCM para compactar popcork.wav
com o menor tamanho de arquivo possível mantendo uma qualidade
aceitável.
8 - 31
6. Pressione o botão Test para ouvir a nova compactação de som.
7. Pressione OK para salvar as configurações e sair da caixa de diálogo
Sound Properties.
8. Entre no modo de edição de símbolos de btnNav.
9. Insira uma nova camada acima da camada graphics e atribua a ela o
nome sound.
10. Insira um quadro-chave no estado Down da camada sound.
11. Adicione popcork.wav ao quadro Down.
12. Salve seu arquivo e teste-o com Control  Test Movie.
13. Clique nos botões para garantir que o som seja reproduzido.
14. Feche o SWF.
8 - 32
Adicionando vídeo com o componente FLVPlayback
16. Abra o chefIpsumRaw.fla no diretório
17. Salve o arquivo como chefIpsum.fla na mesma pasta.
18. Selecione a camada static text e insira uma nova camada acima dela.
Atribua o nome video à camada.
19. Adicione uma instância do componente FLVPlayback ao Stage a partir
do painel Components.
20. Usando o Property inspector, defina a coordenada X como 306 e a
coordenada Y como 61.
21. Alterne para a guia Parameters no Property inspector.
22. Defina o parâmetro contentPath
como ../assets/chefIpsum.flv.
23. Defina o parâmetro maintainAspectRatio como false.
8 - 33
24. Defina a skin como MojaveOverPlaySeekMute.swf.
25. Defina a largura da instância do componente como 237 e a altura
como 178.
26. Salve o arquivo e teste-o com Control  Test Movie.
27. Feche o SWF.
28. Salve e feche o chefIpsum.fla
8 - 34
Unidade 9:
Depois de concluir esta unidade, você deverá ser capaz de:
•
Publicar documentos Flash em vários formatos.
•
Publicar um arquivo HTML para incorporar um SWF do Flash.
•
Salvar um perfil de publicação.
•
Adicionar detecção do Flash Player.
Tópicos da unidade
•
Publicando na Web
•
Configurações de publicação
•
Publicando em formatos de arquivos diferentes
•
Especificando um SWF padrão a ser carregado
•
Adicionando a detecção da versão do Flash
•
O que afeta o tamanho do documento?
•
Técnicas para otimização de documentos Flash
9-1
Publicando na Web
Conforme você tem notado neste curso, a publicação de um documento
Flash pode ser tão simples quanto selecionar Control  Test Movie e criar
um arquivo SWF na mesma pasta do FLA.
Nesta unidade, você aprenderá:
•
A aplicar as configurações de publicação nos documentos.
•
A salvar configurações de publicação.
•
A publicar vários SWFs.
•
A publicar em um diretório diferente.
•
Técnicas para otimizar documentos na Web.
Esta unidade também resume as técnicas e os princípios aprendidos neste
curso dentro do contexto de publicação de documentos Flash.
9-2
Quando você estiver desenvolvendo e testando documentos Flash, utilizará
normalmente Control  Test Movie e utilizará as configurações de publicação
padrão para publicar um arquivo SWF e visualizá-lo em uma janela de teste.
Ao publicar um documento Flash para implementá-lo na Web, desejará
atribuir a ele propriedades com base nas características:
•
Do aplicativo que ele está atendendo.
•
Dos usuários e de como eles visualizarão e interagirão com o aplicativo.
Atribuindo configurações de publicação
Atribua configurações de publicação na implementação para:
•
Definir um formato de arquivo para os arquivos publicados.
•
Ativar a opção Flash version detection e descrever suas configurações.
Atribua essas configurações de publicação e publique documentos Flash
selecionando File  Publish Settings no menu principal.
9-3
Publicando em formatos de arquivos diferentes
Ao criar um novo documento Flash, as configurações de publicação são
definidas como valores padrão:
•
Os arquivos publicados têm o mesmo nome do arquivo FLA, mas com
as extensões .SWF e .HTML (por padrão).
•
Os arquivos SWF e HTML são publicados na mesma pasta do arquivo FLA.
Para publicar um documento a ser implementado na Web, utilize a guia
Formats da caixa de diálogo Publish Settings para definir formatos de
arquivos e nomes de caminhos de arquivo para os arquivos publicados.
Os formatos de arquivos permitidos na guia Formats controlam
dinamicamente quais as outras guias disponíveis na caixa de diálogo.
Você pode digitar um caminho de arquivo nos campos do arquivo ou
procurar manualmente clicando no ícone de pasta.
Opções de configurações de publicação
9-4
Selecionar formatos de arquivo
Publique um documento Flash em um ou vários formatos, com base em
como os usuários visualizarão e interagirão com o conteúdo depois de
implementado. Normalmente, você publicará os documentos Flash como
arquivos HTML e SWF.
Selecionar o formato SWF do Flash
O formato SWF é o que será publicado com mais freqüência nos
aplicativos Flash. O formato SWF requer a versão correta do Flash Player
para que seja visualizado.
Ao selecionar o formato Flash, uma guia Flash será exibida na caixa de
diálogo Publish Settings.
Configurações de publicação específicas do Flash
•
Version é a versão do Flash Player na qual você está publicando.
Isso deve ser definido antes do desenvolvimento do conteúdo.
9-5
•
Load order refere-se à ordem na qual as camadas são carregadas no
primeiro quadro do SWF. As opções são Bottom up e Top down.
O carregamento das camadas é normalmente visível apenas quando
você estiver fazendo download progressivo de um arquivo SWF.
•
A opção Protect from import evita que o arquivo SWF produzido
seja importado em um arquivo FLA. É possível especificar uma
senha no campo Password para permitir a importação.
•
JPEG quality é definida como 80%, por padrão. O Flash
compactará todas as imagens de bitmap como JPEGs, a menos que
especificado de outra forma na Library. Para arquivos Flash que
estiverem sendo implementados na Web, os bitmaps deverão ser
otimizados antes de serem importados. Nesta cirscunstância, defina
essa opção como 100%.
•
A escolha de Override sound settings anulará as configurações
individuais de compactação definidas na caixa de diálogo Sound
Properties e exportará todos os sons como formato MP3, 16 bps.
•
Local playback security refere-se à recuperação de propriedades
durante o desenvolvimento e teste em uma máquina local.
Selecionar o formato de arquivo HTML
Normalmente, você desejará que os usuários interajam com a Home page
do aplicativo como uma página HTML, mas a página será inteiramente
criada com o Flash.
Ao ativar o formato de arquivo HTML (.html) na caixa de diálogo
Publishing Settings, o formato de arquivo Flash (.swf) também será ativado.
Ao publicar um documento Flash utilizando essas configurações:
•
O Flash cria um arquivo SWF e uma página HTML.
•
O SWF é incorporado automaticamente no HTML.
Nota: Também é possível incorporar um SWF em uma página HTML
manualmente ou com o Dreamweaver. Entretanto, ao publicar em um
formato de arquivo HTML com o Flash, também será possível ativar a
detecção da versão do Flash. Você saberá mais sobre a detecção da
versão do Flash posteriormente nesta unidade.
Selecionar outros formatos de arquivo
Publique em outros formatos de arquivo com base nas necessidades dos
usuários.
Por exemplo, você pode publicar arquivos JPEG ou GIF para criar um
arquivo alternativo que será carregado quando um usuário não puder ou
não quiser instalar a versão necessária do Flash Player em seus
computadores.
A publicação em outros formatos limitará os recursos do Flash disponíveis
no arquivo criado. Por exemplo:
9-6
•
Um arquivo JPEG não pode fornecer interatividade ou animação.
•
Um arquivo GIF ficará muito grande, pois o Flash converte
automaticamente as animações de timeline para GIFs animados e
pode fornecer apenas animação limitada e nenhuma interatividade.
•
O Windows ou Macintosh Projector incluirá automaticamente o Flash
Player em um arquivo EXE ou HQX, para que os usuários não
precisem instalar o Flash Player para ver seus filmes. Os arquivos EXE
e HQX não são visíveis em uma página HTML.
•
O formato QuickTime publicará uma versão QuickTime do aplicativo
Flash com base na versão do QuickTime instalada no computador de
desenvolvimento. A maioria dos ActionScripts de controle da Timeline
básica continuará a funcionar, mas os ActionScripts mais avançados
não.
Nota: Normalmente você não publica em formatos de arquivos diferentes
de HTML e SWF. Em vez disso, utiliza a detecção da versão do Flash e faz
com que os usuários carreguem uma versão do Flash Player se precisarem
dela para visualizar e interagir com o conteúdo.
9-7
Salvando configurações de publicação
Dependendo das opções selecionadas, você terá opções adicionais de
configuração disponíveis. Por exemplo, ao selecionar GIF ou QuickTime
nos Formats, uma guia para cada uma dessas opções será exibida na parte
superior da seção Formats.
Opções adicionais de configuração são indicadas com guias
Ao clicar em uma guia, você terá configurações de publicação mais
específicas para configurar. Quase sempre essas opções serão as mesmas
em todos os arquivos de qualquer projeto. É possível salvar as
configurações como um Perfil de Publicação, que pode ser importado em
cada arquivo a ser publicado com as mesmas configurações, em vez de
reconfigurar as configurações de cada arquivo a ser publicado.
Create New Profile
Import/Export profile
Para adicionar um novo perfil, pressione o botão Create New Profile.
Atribua um nome ao perfil na caixa de diálogo Create New Profile.
9-8
Caixa de diálogo Create New Profile
Para utilizar o perfil com outros arquivos, você deverá primeiramente
exportá-lo pressionando o botão Import/Export profile e escolhendo Export.
Isso produzirá um arquivo XML que armazena todas as configurações de
publicação.
No arquivo com o qual você deseja utilizar o perfil, pressione o botão
Import/Export profile e importe o perfil de publicação a ser utilizado com o
documento.
9-9
Procedimento 9-1:
Publicando o aplicativo final
•
Explorar formatos de publicação diferentes
•
Salvar um perfil de publicação
•
Publicar SWFs em um diretório diferente
Etapas
Publicar SWFs
2.
Salve o arquivo como contact.fla.
3. Selecione File  Publish Settings.
4. Na categoria Formats, clique no campo de texto Flash.
5. Digite ../finishedApp/contact.swf
6. Desmarque a opção HTML.
7. Vá para a guia Flash.
8. Altere a Load Order para Top Down.
9. Defina a JPEG quality como 100.
10. Salve o perfil de publicação pressionando o botão Create New Profile.
11. Salve o perfil como frcc800.
12. Pressione Publish para publicar o contact.swf.
13. Pressione OK para fechar a caixa de diálogo Publish Settings.
14. Salve e feche o contact.fla.
9 - 10
Publicar os arquivos restantes
15. Abra, salve e publique os arquivos na tabela a seguir; importe o perfil
de publicação frcc800 de cada:
Nome do arquivo
Novo nome
SWF
Wt8-3.fla
home.fla
../finishedApp/home.swf
chefIpsum.fla
../finishedApp/chefIpsum.swf
specialEvents.fla
../finishedApp/specialEvents.swf
16. Abra o lab8.fla e salve-o como menu.fla.
18. Na guia Formats, digite ../finishedApp/menu.swf no campo
Flash.
19. Selecione a caixa de seleção HTML e
digite ../finishedApp/menu.html no campo HTML.
20. Pressione Publish.
21. Pressione OK.
22. Salve e feche o menu.fla.
9 - 11
Especificando um SWF padrão a ser carregado
O aplicativo Café Townsend consiste em vários arquivos SWF que estão
sendo carregados a partir de uma barra de navegação. Quando o usuário
clica em um botão, o arquivo SWF apropriado é carregado em uma
instância vazia do clipe de filme no Stage.
Também é possível criar uma ação que carregará um SWF externo assim
que o SWF principal for carregado no Flash Player. Isso será executado
adicionando a ação loadMovie no primeiro quadro da Timeline principal,
em vez de em um botão. Uma ação conectada a um quadro da Timeline é
executada assim que a reprodução atingir esse quadro.
Nesse caso, será necessário carregar um SWF que servirá como a home
page. Mas, primeiramente, será necessário publicar esse arquivo
juntamente com os outros SWFs que serão carregados quando um usuário
clicar em um botão.
A ação loadMovie em um quadro-chave
9 - 12
Adicionando a detecção da versão do Flash
Embora você possa publicar em formatos diferentes, o formato de arquivo
SWF é o que permite uma melhor experiência para o usuário e você
desejará se assegurar de que esses usuários possam visualizar e interagir
com os arquivos SWF criados.
Ative Detect Flash Version na guia HTML da caixa de diálogo Publish
Settings, para que os arquivos implementados verifiquem uma versão
específica do Flash antes de carregar as informações da página em um
navegador.
A versão do Flash Player que será detectada baseia-se na versão do Flash
Player definida na guia Flash da caixa de diálogo Publish Settings.
A guia HTML é exibida ao selecionar o formato de arquivo HTML na guia
Formats. Depois que a opção Detect Flash Version for ativada, o script que
detecta a versão do Flash Player será adicionado ao arquivo HTML
produzido pelo Flash. Se o usuário final não tiver a versão do Flash Player
especificada (ou acima), ele será redirecionado para o Web site da
Macromedia para instalar o Flash Player .
Detectar Versão do Flash
9 - 13
Procedimento 9-2:
Adicionando Detecção do Flash Player
•
Terminar a navegação na página principal
•
Adicionar a detecção do Flash Player a uma página HTML
•
Publicar o arquivo final
Etapas
Terminar a navegação
1. Abra o wt8-1.fla no diretório {webroot}/frcc800/walk.
2. Salve o arquivo como main.fla na mesma pasta.
3. Desbloqueie a camada buttons e selecione o botão home.
4. Abra ou expanda o painel Actions (Window  Actions).
5. Selecione a linha loadMovie de ActionScript no painel Actions.
6. Altere o URL para home.swf.
7. Selecione o botão Contact.
8. Selecione a linha loadMovie de ActionScript no painel Actions.
9. Altere o URL para contact.swf.
10. Selecione o botão Chef Ipsum.
11. Adicione uma ação loadMovie ao botão Chef Ipsum com o Script
Assist.
12. Defina o URL como chefIpsum.swf e o local como Target e container.
13. Selecione o botão Special Events e repita as etapas 10 e 11 acima,
definindo o URL como specialEvents.swf.
14. Selecione o botão Menu.
15. No painel Actions, adicione a ação getURL com o Script Assist.
16. Digite menu.html no campo de endereço e defina o destino como
_blank.
17. Pressione OK.
18. Na parte superior do painel Layers, adicione uma nova camada e
atribua a ela o nome actions.
19. Adicione uma ação loadMovie ao primeiro quadro da camada actions
com o Script Assist.
20. Defina o URL como home.swf e o local como Target e container.
21. Salve o main.fla.
9 - 14
Adicionar detecção do Flash Player.
23. Na categoria Formats, digite ../finishedApp/main.swf no campo
Flash.
24. Selecione a opção HTML e digite ../finsihedApp/main.html no
campo HTML.
25. Vá para a guia HTML.
26. Selecione a caixa de seleção Detect Flash Version.
27. Pressione Publish.
28. Pressione OK.
29. Salve e feche o main.fla.
30. Abra um navegador.
31. Na janela de endereço do navegador, digite
http://{webroot}/mmcourses/frcc800/finishedApp/main.html.
32. Teste a navegação.
33. Corrija todos os erros e publique novamente os arquivos afetados.
9 - 15
O que afeta o tamanho do documento?
Embora todas as propriedades do documento contribuam para determinar o
seu tamanho, algumas propriedades do documento podem afetar o tamanho
mais do que as outras. Estas são as seguintes:
9 - 16
•
Som
•
Vídeo
•
Imagens de bitmap
•
Várias animações sendo reproduzidas simultaneamente
•
Animações quadro a quadro
•
Desenhos que não sejam símbolos
•
Fontes incorporadas
•
Gradientes
•
Um grande número de quadros-chave
Técnicas para otimização de documentos Flash
O Flash oferece várias técnicas para otimização de documentos para
fornecer arquivos SWF compactos e de rápido carregamento. Algumas
recomendações são:
•
Utilizar símbolos em vez de formas exclusivas
•
Otimizar as formas para minimizar o número de curvas
•
Utilizar fontes de dispositivo em vez de incorporá-las
•
Carregar seus MovieClips externamente
•
Usar som com critério
•
Usar vídeo com sabedoria
•
Otimizar seus bitmaps
Usar símbolos
Conforme explicado na Unidade 3, utilize símbolos e faça referência a eles
como instâncias em vez de criar uma forma exclusiva sempre que for
necessário no Stage. O benefício do tamanho do arquivo é multiplicado
quanto mais você utiliza as instâncias de símbolos.
Símbolos da biblioteca
Nota: Você pode até mesmo compartilhar símbolos entre os documentos.
Consulte a documentação do Flash para saber como fazer isso.
9 - 17
Otimizar formas
É possível minimizar o número de curvas em uma forma desenhada para
reduzir o tamanho dela.
Selecione a forma e escolha Modify  Optimize e descreva como otimizar
curvas. O Flash reduz o número de curvas e isso cria um documento menor.
Caixa de diálogo Optimize Curves.
Utilizar fontes de dispositivo
Conforme explicado na Unidade 4, o texto criado pode ser exibido no
computador do usuário utilizando as fontes existentes, selecionando Use
Device Fonts no menu de processamento de fonte. Isso elimina a
necessidade de download de fontes no documento e pode reduzir
drasticamente o seu tamanho.
Ativar Use Device Fonts
9 - 18
Carregar SWFs relevantes ao conteúdo externo
Conforme explicado nesta unidade e na Unidade 6, você utiliza a ação
loadMovie para desenvolver documentos como uma série de SWFs
relevantes ao conteúdo. Isso permite um download mais rápido do que
quando todo o conteúdo é transferido por download como um grande SWF.
Para aprimorar ainda mais as experiências dos usuários, assegure-se de que
os documentos carreguem as propriedades e os componentes na ordem
mais eficiente possível.
Por exemplo, carregue primeiramente a navegação e o texto introdutório.
Por último, carregue a mídia gratuita, como animações atrativas, para que
os usuários não tenham que aguardar, caso não desejem.
Usar som com critério
Conforme explicado na Unidade 8, o som pode contribuir de forma
significativa para a experiência do usuário. Excesso de som, entretanto,
pode incomodar o usuário e aumentar rapidamente o tamanho do
documento.
Ao utilizar som, compacte os arquivos de som com a menor taxa de
amostragem possível, sem prejudicar muito a qualidade. Lembre-se de que
vários usuários estarão ouvindo o seu som em alto-falantes relativamente
baratos. Quando não houver necessidade de som estéreo, utilize mono para
reduzir o tamanho do arquivo pela metade.
Usar vídeo com sabedoria
Conforme visto também na Unidade 8, o vídeo pode contribuir para a
experiência do usuário, mas aumenta significativamente o tamanho de um
documento Flash. Utilize vídeo apenas quando ele acrescentar valor e tente
compactá-lo o máximo possível.
Otimizar bitmaps
Utilize um editor de imagens externo como o Macromedia Fireworks para
trabalhar com bitmaps, antes de importá-los no Flash. Isso garantirá que os
bitmaps fiquem pequenos e eficientes.
9 - 19
Resumo da unidade
9 - 20
•
Atribua configurações de publicação na implementação para definir
formatos de arquivos e nomes de caminhos para os arquivos
publicados.
•
Ao utilizar a detecção da versão do Flash, especifique a versão mais
anterior do Flash Player que o arquivo publicado deve suportar.
•
A detecção da versão do Flash pode ser ativada apenas ao publicar um
arquivo HTML com um arquivo SWF incorporado.
•
A versão do Flash Player detectada é definida na guia Flash da caixa de
diálogo Publish Settings.
•
Otimize o tamanho dos arquivos SWF publicados utilizando símbolos,
otimizando formas, utilizando fontes de dispositivo para exibição do
texto, compactando e utilizando a menor taxa possível de amostragem
para arquivos de som e utilizando vídeo apenas quando ele acrescentar
valor.
•
Otimize o tempo de carregamento dos arquivos SWF criando os
documentos como uma série de SWFs relevantes ao conteúdo externo
e carregando propriedades e componentes na ordem mais eficiente
possível.
Revisão da unidade
1. Quais formatos de arquivos você normalmente ativa ao publicar
documentos do Flash?
2. O que é um perfil de publicação?
3. Cite pelo menos três maneiras de minimizar o tamanho do arquivo em
um SWF que inclua texto, gráficos de vetores do Flash e som.
4. Cite duas maneiras de aumentar a eficiência do tempo de carregamento
de um arquivo SWF.
9 - 21
9 - 22
Apêndice A:
Guia de configuração do aluno
Este apêndice contém requisitos e instruções para que os alunos completem os exercícios
no Macromedia Flash 8:Rich Content Creation. Ele cobre o seguinte:
1. Requisitos de hardware
2. Requisitos de software
3. Instruções de configuração
Requisitos de hardware
O computador deve ter o seguinte hardware:
•
Windows: processador Intel Pentium III de 800 MHz (ou equivalente)
ou posterior.
•
Macintosh: PowerPC G3 de 600 MHz e posterior
•
256 MB de RAM (1 GB recomendado para executar mais de um
produto Studio 8 simultaneamente)
•
Monitor de 1024 x 768, 16 bits (32 bits recomendado)
•
710MB de espaço em disco disponível
Requisitos de software
É preciso ter os seguintes softwares instalados:
•
Windows (XP Professional, 2000)
Macintosh: Mac OS X 10.3, 10.4
•
Macromedia Flash 8 Professional
•
A versão mais recente do QuickTime
•
Um dos seguintes navegadores:
o
Internet Explorer 5.0 ou superior
o
Netscape Navigator 6.0 ou superior
o
AOL 8
o
Mozilla 1.2 ou superior
A-1
•
o
Firefox 1.0 ou superior
o
Safari 1.0 ou superior
o
Opera 7
A versão mais recente do Macromedia Flash Player (pelo menos a
versão 8.0 ou mais)
Nota: Para verificar sua versão do Flash Player, vá para
http:///www.macromedia.com, clique com o botão direito na faixa de
propaganda principal e selecione Sobre o Macromedia Flash Player
ou vá para http://www.macromedia.com/br/software/flash/about/.
Instalação e teste de software
Use as seguintes instruções para instalar e testar os softwares necessários.
Instalando os arquivos do curso
1. Crie uma pasta chamada mmcourses no diretório raiz do servidor
Web.
•
No Windows XP Professional: C:\inetpub\wwwroot
•
No OS X: {disco rígido}:Library:WebServer:Documents
•
Usando o ColdFusion {caminho de instalação do
cfusion}\wwwroot
Nota: Para então usar o servidor Web, o compartilhamento da Web
pessoal deve ser ativado em Preferências de sistema para OS X. Além
disso, permissões devem ser definidas para a conta do aluno para que os
alunos acessem os arquivos.
2. Copie o diretório frcc800 do CD-ROM para o diretório mmcourses
do servidor Web.
3. O diretório frcc800 contém os seguintes subdiretórios:
A-2
•
Assets: Contém recursos visuais para o aplicativo Café
Townsend.
•
finishedApp: Diretório vazio para a publicação final do
aplicativo na unidade 9.
•
Lab: Contém vários arquivos de início. Os alunos salvarão
os arquivos de laboratório nesse diretório.
•
Solution: Contém as versões completas de todos os
procedimentos, laboratórios e o aplicativo final.
•
Walk: Contém vários arquivos de início. Todos os
procedimentos serão salvos nesse diretório.
Guia de configuração do aluno
Instalando o Flash 8 Professional
Se uma cópia do Flash 8 Professional não estiver instalada:
1. Faça o download da versão de teste do Macromedia Flash 8
Professional de:
http://www.macromedia.com/cfusion/tdrc/index.cfm?product=flashpro
2. Instale o software.
3. Se tiver um número serial para o Flash 8 Professional, insira-o.
Caso contrário, selecione a versão de teste de 30 dias.
4. Teste a instalação executando o Flash 8 Professional.
A-3
A-4
Apêndice B:
Recursos adicionais
Este apêndice contém uma lista de recursos adicionais do Macromedia Flash 8.
Sites da Web
Flash Support Center
http://www.macromedia.com/support/flash
Página Flash Support Programs
http://www.macromedia.com/support/programs
Flash Developer Center
http://www.macromedia.com/devnet/flash/
Página dp produto Flash
http://www.macromedia.com/software/flash/
Documentação
A documentação do Flash está disponível nas versões de PDF eletrônico
e imprimível.
Para acessar a documentação da Web, selecione Help  Flash
Documentation Resource Center. Pode ser feito o download da
documentação dessa página em formato PDF.
Você também pode selecionar Help  Flash LiveDocs para visualizar as
versões on-line da ajuda do Flash.
Grupos de usuários
Os Grupos de usuários da Macromedia fornecem um fórum de suporte e
tecnologia para profissionais da Web de todos os níveis e profissões. Os
Grupos de usuários da Macromedia fortalecem a comunidade, aumentam
a troca de contatos, destacam as últimas inovações de tecnologia e
revelam as técnicas que transformam novatos em especialistas e
especialistas em gurus. Encontre um grupo de usuários perto de você!
http://www.macromedia.com/cfusion/usergroups/index.cfm
B-1
B-2
Apêndice C:
Atalhos de teclado
Este apêndice contém uma lista dos atalhos de teclado mais comuns no Flash. No OS X,
use cmd em vez de ctrl.
Atalhos de teclado
File
New...
Open...
Open from Site...
Close
Close All
Save
Save and Compact
Save As...
Save as Template...
Save All
Revert
Import
Import to Stage...
Import to Library...
Open External Library...
Import Video...
Export
Export Image...
Export Movie...
Publish Settings...
Publish Preview
Default - (HTML)
Flash
HTML
GIF
JPEG
PNG
Projector
QuickTime
Publish
Device Settings...
Page Setup...
Print...
Ctrl+N
Ctrl+O
Ctrl+W
Ctrl+Alt+W
Ctrl+S
Ctrl+Shift+S
Ctrl+R
Ctrl+Shift+O
Ctrl+Alt+Shift+S
Ctrl+Shift+F12
F12, Ctrl+F12
Shift+F12
Ctrl+P
C-1
Send...
Edit Sites...
Exit
Edit
Undo
Redo
Cut
Copy
Paste in Center
Paste in Place
Paste Special...
Clear
Duplicate
Select All
Deselect All
Find and Replace
Find Next
Timeline
Cut Frames
Copy Frames
Paste Frames
Clear Frames
Remove Frames
Select All Frames
Edit Symbols
Edit Selected
Edit in Place
Edit All
Preferences...
Customize Tools Panel...
Font Mapping...
Keyboard Shortcuts...
View
Go to
First
Previous
Next
Last
Zoom In
Zoom Out
Magnification
Fit in Window
25%
50%
100%
200%
400%
800%
Show Frame
Show All
Preview Mode
C-2
Ctrl+Q
Ctrl+Z
Ctrl+Y
Ctrl+X
Ctrl+C
Ctrl+V
Ctrl+Shift+V
Backspace, Clear,
Delete
Ctrl+D
Ctrl+A
Ctrl+Shift+A
Ctrl+F
F3
Ctrl+Alt+X
Ctrl+Alt+C
Ctrl+Alt+V
Alt+Backspace
Shift+F5
Ctrl+Alt+A
Ctrl+E
Ctrl+U
Home
Page Up
Page Down
End
Ctrl+=
Ctrl+-
Ctrl+1
Ctrl+4
Ctrl+8
Ctrl+2
Ctrl+3
Atalhos de teclado
Outlines
Fast
Anti-Alias
Anti-Alias Text
Full
Work Area
Rulers
Grid
Show Grid
Edit Grid...
Guides
Show Guides
Lock Guides
Edit Guides...
Clear Guides
Snapping
Snap Align
Snap to Grid
Snap to Guides
Snap to Pixels
Snap to Objects
Edit Snapping...
Hide Edges
Show Shape Hints
Show Tab Order
Insert
New Symbol...
Timeline
Layer
Layer Folder
Motion Guide
Frame
Keyframe
Blank Keyframe
Create Motion Tween
Timeline Effects
Assistants
Copy to Grid
Distributed Duplicate
Effects
Blur
Drop Shadow
Expand
Explode
Transform/Transition
Transform
Transition
Scene
Modify
Document...
Convert to Symbol...
Break Apart
Ctrl+Alt+Shift+O
Ctrl+Alt+Shift+F
Ctrl+Alt+Shift+A
Ctrl+Alt+Shift+T
Ctrl+Shift+W
Ctrl+Alt+Shift+R
Ctrl+'
Ctrl+Alt+G
Ctrl+;
Ctrl+Alt+;
Ctrl+Alt+Shift+G
Ctrl+Shift+'
Ctrl+Shift+;
Ctrl+Shift+/
Ctrl+/
Ctrl+H
Ctrl+Alt+H
Ctrl+F8
F5
Ctrl+J
F8
Ctrl+B
C-3
Bitmap
Swap Bitmap...
Trace Bitmap...
Symbol
Duplicate Symbol...
Swap Symbol...
Shape
Smooth
Straighten
Optimize...
Convert Lines to Fills
Expand Fill...
Soften Fill Edges...
Add Shape Hint
Remove All Hints
Combine Objects
Delete Envelope
Union
Intersect
Punch
Crop
Timeline
Distribute to Layers
Layer Properties...
Reverse Frames
Synchronize Symbols
Convert to Keyframes
Clear Keyframe
Convert to Blank Keyframes
Timeline Effects
Edit Effect
Remove Effect
Transform
Free Transform
Distort
Envelope
Scale
Rotate and Skew
Scale and Rotate...
Rotate 90° CW
Rotate 90° CCW
Flip Vertical
Flip Horizontal
Remove Transform
Arrange
Bring to Front
Bring Forward
Send Backward
Send to Back
Lock
Unlock All
Align
C-4
Ctrl+Alt+Shift+C
Ctrl+Shift+H
Ctrl+Shift+D
F6
Shift+F6
F7
Ctrl+Alt+S
Ctrl+Shift+9
Ctrl+Shift+7
Ctrl+Shift+Z
Ctrl+Shift+Up
Ctrl+Up
Ctrl+Down
Ctrl+Shift+Down
Ctrl+Alt+L
Ctrl+Alt+Shift+L
Atalhos de teclado
Left
Horizontal Center
Right
Top
Vertical Center
Bottom
Distribute Widths
Distribute Heights
Make Same Width
Make Same Height
To Stage
Group
Ungroup
Text
Style
Plain
Bold
Italic
Subscript
Superscript
Align
Align Left
Align Center
Align Right
Justify
Letter Spacing
Increase
Decrease
Reset
Scrollable
Check Spelling...
Spelling Setup...
Commands
Manage Saved Commands...
Get More Commands...
Run Command...
No Commands Found
ontrol
Play
Rewind
Go To End
Step Forward One Frame
Step Backward One Frame
Test Movie
Debug Movie
Test Scene
Test Project
Delete ASO Files
Delete ASO Files and Test Movie
Loop Playback
Play All Scenes
Enable Simple Frame Actions
Ctrl+Alt+1
Ctrl+Alt+2
Ctrl+Alt+3
Ctrl+Alt+4
Ctrl+Alt+5
Ctrl+Alt+6
Ctrl+Alt+7
Ctrl+Alt+9
Ctrl+Alt+Shift+7
Ctrl+Alt+Shift+9
Ctrl+Alt+8
Ctrl+G
Ctrl+Shift+G
Ctrl+Shift+P
Ctrl+Shift+B
Ctrl+Shift+I
Ctrl+Shift+L
Ctrl+Shift+C
Ctrl+Shift+R
Ctrl+Shift+J
Ctrl+Alt+Right
Ctrl+Alt+Left
Ctrl+Alt+Up
Enter
Ctrl+Alt+R
.
,
Ctrl+Enter
Ctrl+Shift+Enter
Ctrl+Alt+Enter
Ctrl+Alt+P
Ctrl+Alt+F
C-5
Enable Simple Buttons
Enable Live Preview
Mute Sounds
Window
Duplicate Window
Toolbars
Main
Controller
Edit Bar
Timeline
Tools
Properties
Properties
Filters
Parameters
Library
Common Libraries
Buttons
Classes
Learning Interactions
Actions
Behaviors
Debugger
Movie Explorer
Output
Project
Align
Color Mixer
Color Swatches
Info
Transform
Components
Component Inspector
Other Panels
Accessibility
History
Scene
Screens
Strings
Web Services
Workspace Layout
Default
Save Current...
Manage...
Hide Panels
Help
Flash Help
C-6
Ctrl+Alt+B
Ctrl+Alt+M
Ctrl+Alt+K
Ctrl+Alt+T
Ctrl+F2
Ctrl+F3
Ctrl+L, F11
F9
Shift+F3
Shift+F4
Alt+F3
F2
Shift+F8
Ctrl+K
Shift+F9
Ctrl+F9
Ctrl+I
Ctrl+T
Ctrl+F7
Alt+F7
Alt+F2
Ctrl+F10
Shift+F2
Ctrl+F11
Ctrl+Shift+F10
F4
F1
Atalhos de teclado
Painel de ferramentas
Arrow
V
Sub Select
A
Lasso
L
Line
N
Pen
P
Text
T
Oval
O
Rectangle
R
Pencil
Y
Brush
B
Ink Bottle
S
Paint Bucket
K
Dropper
I
Eraser
E
Hand
H
Magnifier
M,
Z
Free
Transform
Q
Fill
Transform
F
Object
Drawing
J
C-7
C-8

Macromedia Flash 8: Rich Content Creation

Transcrição

Documentos relacionados

Aplicabilidade da Ferramenta Macromedia Flash MX no

Aplicabilidade da ferramenta Macromedia Flash

Actualizar versão do Adobe Flash Player

Programador Web com Programador Web com/sem experiência m

Tutorial de inserção de Url em banners flash

imprimir currículo

Sem chamar a atenção (arquivo PDF) - Cleber Medeiros

Combinações de Sinalizador Acústico e Luz Flash

O Sensoriamento Remoto e a Cartografia na

Procedimento para Instalação do Plugin do Flash