Você está na página 1de 286

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

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

©2005 Macromedia, Inc.

Macromedia Flash 8: Rich Content Creation 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

Macromedia Flash 8: Rich Content Creation

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

mbolos

5-3

Utilizar

quadros-chave

5-4

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

Macromedia Flash 8: Rich Content Creation

Unidade 8: Adicionando som e vídeo

8-1

Trabalhando com som e vídeo

8-2

com Importando arquivos de som

Trabalhando

som

8-3

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

Atalhos de teclado

C-1

C-1

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

Macromedia Flash 8: Rich Content Creation

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:

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. Conceitos

Demonstrações ilustram novos conceitos. Demonstrações

Os procedimentos guiam você com a ajuda do instrutor. informações. Demonstrações ilustram novos conceitos. Laboratórios permitem que você pratique novas habilidades

Laboratórios permitem que você pratique novas habilidades por conta Laboratórios própria. própria.

Resumos fornecem uma breve sinopse do conteúdo da unidade. Resumos

Revisões testam o quanto você se lembra dos conceitos da unidade. Revisões

Macromedia Flash 8: Rich Content Creation

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

Introdução ao Macromedia Flash 8: Rich Content Creation

Introdução a aplicativos Rich Internet

Content Creation Introdução a aplicativos Rich Internet Desde a introdução da World Wide Web: • Servidores

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.

páginas para usuários em navegadores nos clientes. HTML Arquitetura de uma página estática No começo, HTML

HTML

Arquitetura de uma página estática

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.

Macromedia Flash 8: Rich Content Creation

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.

Introdução ao Macromedia Flash 8: Rich Content Creation

Demonstração 1-1:

Visualizando o site do Café Townsend

Demonstração 1-1: Visualizando o site do Café Townsend Observe conforme o seu instrutor apresenta o site

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.

Macromedia Flash 8: Rich Content Creation

Resumo da unidade

Macromedia Flash 8: Rich Content Creation Resumo da unidade • O curso é apresentado através de

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

Unidade 2:

Trabalhando no Flash

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

Macromedia Flash 8: Rich Content Creation

Introdução ao Macromedia Flash 8

8: Rich Content Creation Introdução ao Macromedia Flash 8 Use o software Macromedia Flash 8 para

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.

Trabalhando no Flash

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.

em vez de View Source. O menu é mostrado a seguir. Menu contextual do Flash Player

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.

Macromedia Flash 8: Rich Content Creation

Demonstração 2-1: Recursos do Flash

Rich Content Creation Demonstração 2-1: Recursos do Flash Nesta demonstração, o instrutor exibirá exemplos de como

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.

. 6. Use o calendário para selecionar a data de check-in. http://www.thewatergatehotel.com Continuação na próxima

http://www.thewatergatehotel.com

Continuação na próxima página

Trabalhando no Flash

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.

Macromedia Flash 8: Rich Content Creation

Documentos do Flash

Macromedia Flash 8: Rich Content Creation Documentos do Flash Geralmente, um documento do Flash contém muitas

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.

Trabalhando no Flash

Criando um novo documento

Trabalhando no Flash Criando um novo documento Por padrão, a página inicial é exib ida no

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.

você abre o Flash ou fecha todos os documentos do Flash. Página inicial do Flash Você

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.

que apresenta as mesmas opções que a tela inicial. Caixa de diálogo New Document © 2005

Caixa de diálogo New Document

Macromedia Flash 8: Rich Content Creation

Definindo preferências

Flash 8: Rich Content Creation Definindo preferências As preferências permitem personalizar o modo como os

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.

No OS X, escolha Flash Professional Preferences. Caixa de diálogo Preferences Desfazer em nível de

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.

Trabalhando no Flash

Procedimento 2-1:

Criando um documento do Flash

no Flash Procedimento 2-1: Criando um documento do Flash Etapas Neste procedimento, você: • Criará um

Etapas

Neste procedimento, você:

Criará um novo documento do Flash

Definirá níveis da ação desfazer

Salvará um arquivo

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.

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.

Macromedia Flash 8: Rich Content Creation

Definindo propriedades do documento

8: Rich Content Creation Definindo propriedades do documento Para definir as propriedades do doc umento, use

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

de diálogo Document Properties. Botão Size Frame Rate É possível usar a caixa de diálogo Document

É 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.

no documento. Além disso, é nessa caixa de diálogo que os metadados são adicionados. 2 -

Trabalhando no Flash

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.

a probabilidade de um arquivo SWF ser incluído em resultados de busca significativos. © 2005 Macromedia,

Macromedia Flash 8: Rich Content Creation

Trabalhando com a interface do Flash

A interface do ambiente de desenvolvimento do Flash é semelhante à interface de outros produtos
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.
Menu
Painéis
principal
Painel
Timeline
Painel
Tools
Stage
Property
inspector

Menu principal

Ambiente de desenvolvimento do Flash

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.

Trabalhando no Flash

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 – Apenas a barra de título do painel é exibida.

Closed – 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 Painel aberto
Submenu Window
Painéis reduzidos
Painel aberto

Estados dos painéis

©2005 Macromedia, Inc.

2 - 13

Grupo de

painéis

Macromedia Flash 8: Rich Content Creation

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

arraste-o para outro local e solte o mouse. Pinça Desencaixando um painel com a pinça Quando

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.

de painéis, selecione Window Workspace Layout Manage. Renomeando e excluindo layouts de área de trabalho 2
de painéis, selecione Window Workspace Layout Manage. Renomeando e excluindo layouts de área de trabalho 2

Renomeando e excluindo layouts de área de trabalho

Trabalhando no Flash

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

Macromedia Flash 8: Rich Content Creation

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 a seguir mostra as propriedades do próprio Stage. Property inspector 2 - 16 ©

Property inspector

Trabalhando no Flash

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 Selection

Ferramenta Oval

Ferramenta Oval

Ferramenta Eyedropper

Ferramenta Eyedropper

Controle Stroke color

Controle Fill color

Eyedropper Controle Stroke color Controle Fill color Ferramenta Text Ferramenta Rectangle/Polystar Ferramentas do

Ferramenta TextEyedropper Controle Stroke color Controle Fill color Ferramenta Rectangle/Polystar Ferramentas do painel Tools ©

FerramentaControle Stroke color Controle Fill color Ferramenta Text Rectangle/Polystar Ferramentas do painel Tools © 2005

Rectangle/Polystar

Ferramentas do painel Tools

Macromedia Flash 8: Rich Content Creation

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.

Trabalhando no Flash

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.

esse painel no ambiente de desenvolvimento. O painel Library é mostrado a seguir. © 2005 Macromedia,

Macromedia Flash 8: Rich Content Creation

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.

do Stage, ou em relação a outras propriedades. O painel Align é mostrado a seguir. 2

Trabalhando no Flash

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.

no Stage. O painel Color Mixer é mostrado a seguir. Color Mixer Na Unidade 3, você

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.

documentos. O painel Color Swatches é mostrado a seguir. Painel Color Swatches Na Unidade 3, você

Painel Color Swatches

Na Unidade 3, você aprenderá mais sobre o painel Color Swatches.

Macromedia Flash 8: Rich Content Creation

Procedimento 2-2:

Configurando a área de trabalho

Creation Procedimento 2-2: Configurando a área de trabalho Etapas Neste procedimento, você: • Alterará as

Etapas

Neste procedimento, você:

Alterará as propriedades do documento

Adicionará metadados a um arquivo

Criará e salvará o layout de um painel

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

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.

Trabalhando no Flash

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.

Macromedia Flash 8: Rich Content Creation

Desenvolvendo documentos do Flash

8: Rich Content Creation Desenvolvendo documentos do Flash Durante o último procedimento, você criou um documento

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.

Trabalhando no Flash

Publicando documentos

Trabalhando no Flash Publicando documentos É necessário publicar um arquivo FLA para criar um arquivo SWF

É 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.

Macromedia Flash 8: Rich Content Creation

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.

A caixa de diálogo Publish Settings é mostrada a seguir. Publish Settings Nota: Nesta unidade, você

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.

Trabalhando no Flash

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.

Macromedia Flash 8: Rich Content Creation

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.

e a guia wt2-3swf correspondente são mostradas a seguir. Guias de arquivos Para fechar a janela

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.

Trabalhando no Flash

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.

HTML com o SWF incorporado no navegador padrão do sistema. Usando Publish Preview © 2005 Macromedia,

Usando Publish Preview

Macromedia Flash 8: Rich Content Creation

Procedimento 2-3:

Publicando um arquivo

Content Creation Procedimento 2-3: Publicando um arquivo Etapas Neste procedimento, você: • Definirá a versão

Etapas

Neste procedimento, você:

Definirá a versão do Flash Player

Adicionará conteúdo a um arquivo

Visualizará um arquivo

Publicará um arquivo

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.

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.

Trabalhando no Flash

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.

Macromedia Flash 8: Rich Content Creation

Resumo da unidade

Macromedia Flash 8: Rich Content Creation Resumo da unidade • Use o ambiente de desenvolvimento do

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.

Trabalhando no Flash

Revisão da unidade

Trabalhando no Flash Revisão da unidade 1. Nomeie três tipos de propriedades de documentos descritas nesta

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?

Macromedia Flash 8: Rich Content Creation

Laboratório 2:

Criando um novo documento e definindo propriedades

2: Criando um novo documento e definindo propriedades Objetivos Durante este laboratório, você criará um

Objetivos

Durante este laboratório, você criará um documento do Flash e explorará a ferramenta de criação do Flash 8.

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

Criando um novo documento

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.

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.

Trabalhando no Flash

Trabalhando no Flash Etapas gerais 14. Clique em OK. 15. Salve e feche o lab2.fla .

Etapas gerais

14. Clique em OK.

15. Salve e feche o lab2.fla.

Criando um novo documento

1. Crie um novo documento do Flash.

2. Salve o documento como lab2.fla no diretório

{webroot}/mmcourses/frcc800/lab.

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.

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.

Macromedia Flash 8: Rich Content Creation

Unidade 3:

Importando e criando gráficos

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

Macromedia Flash 8: Rich Content Creation

Tipos de imagens

Macromedia Flash 8: Rich Content Creation Tipos de imagens Como você aprendeu na última unidade, um

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.

quantidade de dados. A fotografia a seguir é uma imagem de bitmap. Imagem de bitmap 3

Imagem de bitmap

Importando e criando gráficos

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

Criado por

arquivo

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.

Flash. A imagem a seguir é a mesma anterior salva em formato vetorial. Imagem vetorial ©

Imagem vetorial

Macromedia Flash 8: Rich Content Creation

Adicionando recursos gráficos e de imagem

Content Creation Adicionando recursos gráficos e de imagem Há duas maneiras de adicionar recursos gráficos e

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.

pode usar o painel Align e o Property inspector para organizar os recursos. Painel Align 3

Painel Align

Importando e criando gráficos

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.

serão alinhados em relação a suas bordas e seus centros. Property inspector Com o Property Inspector,

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.

Macromedia Flash 8: Rich Content Creation

Procedimento 3-1:

Importando gráficos

Rich Content Creation Procedimento 3-1: Importando gráficos Etapas Neste procedimento, você: • Importará um

Etapas

Neste procedimento, você:

Importará um gráfico de bitmap

Importará um gráfico vetorial

Usará o painel Align

Usará o Property inspector

1. Abra o wt2-2.fla no diretório {webroot}/mmcourses/frcc800/walk.

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

{webroot}/mmcourses/frcc800/assets.

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.

Importando e criando gráficos

Usando camadas

Importando e criando gráficos Usando camadas Use camadas para organizar os recu rsos de um documento

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.

a seguir, há três camadas, cada uma com um recurso. Três camadas com objetos Ao trabalhar

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.

Macromedia Flash 8: Rich Content Creation

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.

e arrastar camadas para a lixeira a fim de excluí-las. Ícone Show/Hide layer icon Ícone Lock/Unclock

Ícone Show/Hide

layer icon

Ícone Lock/Unclock

excluí-las. Ícone Show/Hide layer icon Ícone Lock/Unclock Ícone Layer type Ícone View as outlines Ícone Trash
excluí-las. Ícone Show/Hide layer icon Ícone Lock/Unclock Ícone Layer type Ícone View as outlines Ícone Trash

Ícone Layer type

Ícone View as outlines

Lock/Unclock Ícone Layer type Ícone View as outlines Ícone Trash Ícone Insert Layer Ícone Insert Layer
Lock/Unclock Ícone Layer type Ícone View as outlines Ícone Trash Ícone Insert Layer Ícone Insert Layer

Ícone Trash

Ícone Insert Layer

Ícone View as outlines Ícone Trash Ícone Insert Layer Ícone Insert Layer Folder Painel Layers Você

Í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.

Importando e criando gráficos

Importando e criando gráficos Conteúdo da camada visto como contornos Se você clicar duas vezes no

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.

aberta, e você poderá alterar o nome e o comportamento da camada. Layer Properties © 2005

Layer Properties

Macromedia Flash 8: Rich Content Creation

Procedimento 3-2:

Trabalhando com camadas

Content Creation Procedimento 3-2: Trabalhando com camadas Etapas Neste procedimento, você: • Adicionará camadas a

Etapas

Neste procedimento, você:

Adicionará camadas a um documento

Alterará a ordem das camadas

Adicionará uma pasta de camadas para organizar as camadas

1. Abra o wt3-1.fla no diretório {webroot}/mmcourses/frcc800/walk.

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:

Importando e criando gráficos

Importando e criando gráficos 13. Salve o wt3-2.fla e deixe-o aberto para o próximo procedimento. ©

13. Salve o wt3-2.fla e deixe-o aberto para o próximo procedimento.

Macromedia Flash 8: Rich Content Creation

Criando gráficos vetoriais no Flash

Rich Content Creation Criando gráficos vetoriais no Flash Você pode criar gráficos vetoriais diretamente 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 Subselection

do Flash são exibidas a seguir: Ferramenta Subselection Ferramenta Selection Ferramenta Oval Ferramenta

Ferramenta Selection

a seguir: Ferramenta Subselection Ferramenta Selection Ferramenta Oval Ferramenta Rectangle/polystar Ferramenta

Ferramenta Oval

Ferramenta Rectangle/polystar

Selection Ferramenta Oval Ferramenta Rectangle/polystar Ferramenta Eyedropper Stroke Fill Barra de ferramentas 3 -

Ferramenta Eyedropper

Oval Ferramenta Rectangle/polystar Ferramenta Eyedropper Stroke Fill Barra de ferramentas 3 - 12 © 2005

Stroke

Ferramenta Rectangle/polystar Ferramenta Eyedropper Stroke Fill Barra de ferramentas 3 - 12 © 2005 Macromedia, Inc.

Fill

Ferramenta Rectangle/polystar Ferramenta Eyedropper Stroke Fill Barra de ferramentas 3 - 12 © 2005 Macromedia, Inc.

Barra de ferramentas

Importando e criando gráficos

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.

Property inspector mostra as propriedades do preenchimento. Oval com preenchimento selecionado © 2005 Macromedia, Inc.

Oval com preenchimento selecionado

Macromedia Flash 8: Rich Content Creation

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.

lmente arrastar o traço, separando-o do preenchimento. Oval com traço selecionado Selecionando o traço e o

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.

Importando e criando gráficos

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.

do preenchimento na seção Color da barra de ferramentas. Traço transparente Você pode remover o traço

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.

Macromedia Flash 8: Rich Content Creation

O modelo de desenho de objetos

8: Rich Content Creation O modelo de desenho de objetos O Macromedia Flash 8 utiliza dois

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.

separados. O modelo Merge Drawing é o padrão no Flash. Object Drawing ligado/desligado 3 - 16

Object Drawing ligado/desligado

Importando e criando gráficos

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.

um arco de círculo, quando posicionado sobre uma linha. Arco de círculo na linha • Uma

Arco de círculo na linha

Uma seta com um ângulo reto, quando posicionado sobre um canto.

com um ângulo reto, quand o posicionado sobre um canto. Ângulo reto em canto Agora que