Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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.
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
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
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:
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.
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:
• 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
HTML
Servidores de aplicativos
Clientes versáteis
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.
Resumo da unidade
• 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.
Objetivos da unidade
Após concluir esta unidade, você deverá ser capaz de:
• 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
Software Flash
O software Flash contém duas partes:
• Macromedia Flash 8
• Flash Player 8
Macromedia Flash 8
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.
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
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
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.
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.
Definindo preferências
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.
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
Definindo preferências
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.
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.
Menu Painéis
principal
Painel
Timeline
Painel
Tools
Stage
Property
inspector
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.
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.
Grupo de
painéis
Painel aberto
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.
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
O painel Properties
Property inspector
Painel Tools
Ferramenta Selection
Ferramenta Text
Ferramenta Eyedropper
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.
Painel Library
Painel Align
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
Procedimento 2-2:
Configurando a área de trabalho
Neste procedimento, você:
• 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.
Adicionando metadados
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.
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.
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.
Publish Settings
Exemplo de uso
Guias de arquivos
Procedimento 2-3:
Publicando um arquivo
Neste procedimento, você:
• Definirá a versão do Flash Player
• Adicionará conteúdo a um arquivo
• Visualizará um arquivo
• Publicará um arquivo
Etapas
1. Abra o wt2-2.fla no diretório {webroot}/mmcourses/frcc800/walk.
2. Salve o arquivo como wt2-3.fla no mesmo diretório.
Resumo da unidade
• 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.
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
Adicionando metadados
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.
Etapas gerais
Adicionando metadados
7. Abra a caixa de diálogo Document Properties.
8. Adicione um título e uma descrição para o arquivo.
9. Salve e feche o lab2.fla.
Objetivos da unidade
Após concluir esta unidade, você deverá ser capaz de:
• 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
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
Imagem de bitmap
Gráficos vetoriais
Imagem vetorial
Importando imagens
Posicionando imagens
Painel Align
3-4 ©2005 Macromedia, Inc.
Importando e criando gráficos
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.
Procedimento 3-1:
Importando gráficos
Neste procedimento, você:
• Importará um gráfico de bitmap
• Importará um gráfico vetorial
• Usará o painel Align
• Usará o Property inspector
Etapas
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.
Ícone Show/Hide
layer icon Ícone Lock/Unclock
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 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
Procedimento 3-2:
Trabalhando com camadas
Neste procedimento, você:
• Adicionará camadas a um documento
• Alterará a ordem das camadas
• Adicionará uma pasta de camadas para organizar as camadas
Etapas
Ferramenta Subselection
Ferramenta Selection
Ferramenta Eyedropper
Stroke
Fill
Barra de ferramentas
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.
Selecionando o traço
Traço transparente
Você pode remover o traço ou o preenchimento antes ou depois de
desenhar o objeto.
Agrupando formas
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
Procedimento 3-3:
Criando arte no Flash
Neste procedimento, você:
• 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
Criando gradientes
Gradiente linear
Transformando gradientes
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
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.
Símbolos
Símbolos de gráficos
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
Instâncias
Procedimento 3-5:
Criando símbolos e instâncias de gráficos
Neste procedimento, você executará as seguintes tarefas:
• 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
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.
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.
Procedimento 3-6:
Criando um efeito de máscara
Neste procedimento, você executará as seguintes tarefas:
• Desenhar um gráfico para usar como máscara
• Criar um efeito de máscara com uma camada
Etapas
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.
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?
6. Quais são as ferramentas que você usa para retirar amostras de cores de
imagens de bitmap no Stage?
Laboratório 3:
Importando e criando gráficos
Durante esta laboratório, você começará a criar a interface da seção Menu
do Café Townsend.
Objetivos
Etapas detalhadas
Organizando a biblioteca
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
Organizando a biblioteca
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.
Objetivos da unidade
Após concluir esta unidade, você deverá ser capaz de:
• 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
Ferramenta Text
Propriedades de texto
Exemplo de uso
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:
• 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:
• 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.
Procedimento 4-1:
Adicionando texto estático a um documento
Neste procedimento, você executará as seguintes tarefas:
• 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
• 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.
13. No painel Tools, alterne para a ferramenta Selection.
14. Alinhe todos os campos de texto de modo que a base das letras toquem
levemente suas respectivas guias como mostrado na tela abaixo.
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.
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.
Procedimento 4-2:
Adicionando texto de entrada a um documento
Neste procedimento, você executará as seguintes tarefas:
• 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
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.
37. Salve o wt4-2.fla e deixe-o aberto para o próximo procedimento.
Procedimento 4-3:
Adicionando efeitos de filtro a texto
Neste procedimento, você executará as seguintes tarefas:
• Adicionar um efeito de filtro a texto estático.
• Modificar a aparência do efeito de filtro.
Etapas
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.
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
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.
Resumo da unidade
• 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?
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
Etapas detalhadas
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:
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.
39. Salve e feche o lab4.fla.
Etapas gerais
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.
28. Salve e feche o lab4.fla.
Objetivos da unidade
Após concluir esta unidade, você deverá ser capaz de:
• 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
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
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
Utilizar símbolos
Utilizar quadros-chave
Inserir quadros-chave
Inserindo um quadro-chave
inserir quadros
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.
Procedimento 5-1:
Criando uma interpolação de movimento
Neste procedimento, você executará as seguintes tarefas:
• Adicionar quadros e quadros-chave a uma timeline
• Criar uma interpolação de movimento simples
• Criar um efeito de máscara animada
Etapas
Procedimento 5-2:
Usando um Motion Guide
Neste procedimento, você executará as seguintes tarefas:
• Adicionar uma camada Motion Guide
• Criar um caminho a ser seguido pela animação
• Ajustar uma animação a um caminho
Etapas
Exemplo de uso
Iniciar marcador
de transparência
Terminar
marcador de
transparência
Ativar/desativar
transparência
Gráfico com
transparência
Procedimento 5-3:
Criando interpolações de forma
Neste procedimento, você executará as seguintes tarefas:
• Utilizar quadros-chave vazios
• Utilizar marcadores de transparência
• Criar uma interpolação de forma
Etapas
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.
Revisão da unidade
1. Com que tipo de propriedades é possível trabalhar para criar uma
interpolação de movimento?
Laboratório 5:
Criando uma interpolação de movimento
Neste laboratório, você criará uma animação para a seção Special Events
do Web site Café Townsend.
Objetivos
Etapas detalhadas
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
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
Objetivos da unidade
Após concluir esta unidade, você deverá ser capaz de:
• 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
Usando o ActionScript
Actions
Toolbox
Actions
Pane
Script
Navigator
Ações
Ação
incluída
Procedimento 6-1:
Usando o ActionScript para parar uma animação
Neste procedimento, você executará as seguintes tarefas:
• Adicionar o ActionScript a um quadro
• Usar o Script Assist para adicionar o ActionScript
Etapas
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.
Estados do botão
Up
Over
Down
Hit
Exemplo de uso
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.
Procedimento 6-2:
Criando botões
Neste procedimento, você executará as seguintes tarefas:
• 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
ação loadMovie
Indicador
Target Path
parâmetros de loadMovie
Procedimento 6-3:
Usando o Script Assist para carregar SWF externos.
Neste procedimento, você executará as seguintes tarefas:
• 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
Testando o ActionScript
28. Selecione ControlÆ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.
32. Salve e feche o wt6-3.fla.
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.
Revisão da unidade
1. Nomeie os quatro quadros na linha de tempo de um botão e
descreva como eles serão utilizados.
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
Etapas detalhadas
Etapas gerais
Objetivos da unidade
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
Procedimento 7-1:
Fazendo um clipe de filme para interatividade
Neste procedimento, você executará as seguintes tarefas:
• 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
Exemplo de uso
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.
Procedimento 7-2:
Utilizando um clipe de filme para criar estados
visuais diferentes
Neste procedimento, você executará as seguintes tarefas:
• 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
Procedimento 7-3:
Controlando uma Timeline do clipe de filme com o
ActionScript
Neste procedimento, você executará as seguintes tarefas:
• 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
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ê.
Adicionar comportamentos
Adicionar um comportamento
• Selecione um comportamento nas categorias.
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:
Resumo da unidade
• 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?
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
Etapas detalhadas
Testando os comportamentos.
45. Selecione ControlÆ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.
49. Salve e feche o lab7.fla.
Etapas gerais
Testando os comportamentos.
35. Selecione ControlÆ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.
39. Salve e feche o lab7.fla.
Objetivos da unidade
Após concluir esta unidade, você deverá ser capaz de:
• 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
Definindo tipos
Opções Sync
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.
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.
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 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).
Procedimento 8-1:
Importando sons
Neste procedimento, você executará as seguintes tarefas:
• Importar um som para a Library
• Alterar propriedades de som
• Adicionar som à Timeline de um botão.
Etapas
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.
Importando vídeo
Vídeo na Library
Procedimento 8-2:
Importando vídeo
Neste procedimento, você executará as seguintes tarefas:
• 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.
Procedimento 8-3:
Usando o componente FLVPlayback
Neste procedimento, você executará as seguintes tarefas:
• 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
Resumo da unidade
• 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?
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
Etapas detalhadas
Etapas gerais
Objetivos da unidade
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
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.
Configurações de publicação
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.
Configurações de publicação
Import/Export profile
Procedimento 9-1:
Publicando o aplicativo final
Neste procedimento, você executará as seguintes tarefas:
• Explorar formatos de publicação diferentes
• Salvar um perfil de publicação
• Publicar SWFs em um diretório diferente
Etapas
Publicar SWFs
1. Abra o wt4-3.fla no diretório {webroot}/mmcourses/frcc800/walk.
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.
Procedimento 9-2:
Adicionando Detecção do Flash Player
Neste procedimento, você executará as seguintes tarefas:
• 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.
Usar 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.
Otimizar formas
Otimizar bitmaps
Resumo da unidade
• 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?
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
Requisitos de software
Sites da Web
Documentação
Grupos de usuários
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... Ctrl+N
Open... Ctrl+O
Open from Site...
Close Ctrl+W
Close All Ctrl+Alt+W
Save Ctrl+S
Save and Compact
Save As... Ctrl+Shift+S
Save as Template...
Save All
Revert
Import
Import to Stage... Ctrl+R
Import to Library...
Open External Library... Ctrl+Shift+O
Import Video...
Export
Export Image...
Export Movie... Ctrl+Alt+Shift+S
Publish Settings... Ctrl+Shift+F12
Publish Preview
Default - (HTML) F12, Ctrl+F12
Flash
HTML
GIF
JPEG
PNG
Projector
QuickTime
Publish Shift+F12
Device Settings...
Page Setup...
Print... Ctrl+P
Send...
Edit Sites...
Exit Ctrl+Q
Edit
Undo Ctrl+Z
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste in Center Ctrl+V
Paste in Place Ctrl+Shift+V
Paste Special...
Backspace, Clear,
Clear
Delete
Duplicate Ctrl+D
Select All Ctrl+A
Deselect All Ctrl+Shift+A
Find and Replace Ctrl+F
Find Next F3
Timeline
Cut Frames Ctrl+Alt+X
Copy Frames Ctrl+Alt+C
Paste Frames Ctrl+Alt+V
Clear Frames Alt+Backspace
Remove Frames Shift+F5
Select All Frames Ctrl+Alt+A
Edit Symbols Ctrl+E
Edit Selected
Edit in Place
Edit All
Preferences... Ctrl+U
Customize Tools Panel...
Font Mapping...
Keyboard Shortcuts...
View
Go to
First Home
Previous Page Up
Next Page Down
Last End
Zoom In Ctrl+=
Zoom Out Ctrl+-
Magnification
Fit in Window
25%
50%
100% Ctrl+1
200%
400% Ctrl+4
800% Ctrl+8
Show Frame Ctrl+2
Show All Ctrl+3
Preview Mode
Outlines Ctrl+Alt+Shift+O
Fast Ctrl+Alt+Shift+F
Anti-Alias Ctrl+Alt+Shift+A
Anti-Alias Text Ctrl+Alt+Shift+T
Full
Work Area Ctrl+Shift+W
Rulers Ctrl+Alt+Shift+R
Grid
Show Grid Ctrl+'
Edit Grid... Ctrl+Alt+G
Guides
Show Guides Ctrl+;
Lock Guides Ctrl+Alt+;
Edit Guides... Ctrl+Alt+Shift+G
Clear Guides
Snapping
Snap Align
Snap to Grid Ctrl+Shift+'
Snap to Guides Ctrl+Shift+;
Snap to Pixels
Snap to Objects Ctrl+Shift+/
Edit Snapping... Ctrl+/
Hide Edges Ctrl+H
Show Shape Hints Ctrl+Alt+H
Show Tab Order
Insert
New Symbol... Ctrl+F8
Timeline
Layer
Layer Folder
Motion Guide
Frame F5
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... Ctrl+J
Convert to Symbol... F8
Break Apart Ctrl+B
Bitmap
Swap Bitmap...
Trace Bitmap...
Symbol
Duplicate Symbol...
Swap Symbol...
Shape
Smooth
Straighten
Optimize... Ctrl+Alt+Shift+C
Convert Lines to Fills
Expand Fill...
Soften Fill Edges...
Add Shape Hint Ctrl+Shift+H
Remove All Hints
Combine Objects
Delete Envelope
Union
Intersect
Punch
Crop
Timeline
Distribute to Layers Ctrl+Shift+D
Layer Properties...
Reverse Frames
Synchronize Symbols
Convert to Keyframes F6
Clear Keyframe Shift+F6
Convert to Blank Keyframes F7
Timeline Effects
Edit Effect
Remove Effect
Transform
Free Transform
Distort
Envelope
Scale
Rotate and Skew
Scale and Rotate... Ctrl+Alt+S
Rotate 90° CW Ctrl+Shift+9
Rotate 90° CCW Ctrl+Shift+7
Flip Vertical
Flip Horizontal
Remove Transform Ctrl+Shift+Z
Arrange
Bring to Front Ctrl+Shift+Up
Bring Forward Ctrl+Up
Send Backward Ctrl+Down
Send to Back Ctrl+Shift+Down
Lock Ctrl+Alt+L
Unlock All Ctrl+Alt+Shift+L
Align
Left Ctrl+Alt+1
Horizontal Center Ctrl+Alt+2
Right Ctrl+Alt+3
Top Ctrl+Alt+4
Vertical Center Ctrl+Alt+5
Bottom Ctrl+Alt+6
Distribute Widths Ctrl+Alt+7
Distribute Heights Ctrl+Alt+9
Make Same Width Ctrl+Alt+Shift+7
Make Same Height Ctrl+Alt+Shift+9
To Stage Ctrl+Alt+8
Group Ctrl+G
Ungroup Ctrl+Shift+G
Text
Style
Plain Ctrl+Shift+P
Bold Ctrl+Shift+B
Italic Ctrl+Shift+I
Subscript
Superscript
Align
Align Left Ctrl+Shift+L
Align Center Ctrl+Shift+C
Align Right Ctrl+Shift+R
Justify Ctrl+Shift+J
Letter Spacing
Increase Ctrl+Alt+Right
Decrease Ctrl+Alt+Left
Reset Ctrl+Alt+Up
Scrollable
Check Spelling...
Spelling Setup...
Commands
Manage Saved Commands...
Get More Commands...
Run Command...
No Commands Found
ontrol
Play Enter
Rewind Ctrl+Alt+R
Go To End
Step Forward One Frame .
Step Backward One Frame ,
Test Movie Ctrl+Enter
Debug Movie Ctrl+Shift+Enter
Test Scene Ctrl+Alt+Enter
Test Project Ctrl+Alt+P
Delete ASO Files
Delete ASO Files and Test Movie
Loop Playback
Play All Scenes
Enable Simple Frame Actions Ctrl+Alt+F
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
M,
Magnifier
Z
Free
Q
Transform
Fill
F
Transform
Object
J
Drawing