Criando um novo documento

Você pode criar todos os tipos de diferentes elementos para a Web ou em CD-ROM e dispositivos usando o Flash. Primeiro, crie um arquivo na ferramenta de criação Flash, que você usa para a saída de arquivos SWF. Os arquivos SWF são os arquivos que você pode colocar online quando você incorporá-los em uma página Web. O Adobe Flash Player plug-in, em seguida, exibe o arquivo SWF, para que os visitantes do seu site podem ver ou interagir com o conteúdo.

O seu arquivo SWF pode conter som, vídeo MP3, animações, imagens, dados, e assim por diante. A vantagem de usar um arquivo SWF em outros formatos é que o Flash Player plug-in é incrivelmente comum. Vamps começar a construir uma bandeira:

1. Abra o Flash CS3 Professional.

Por padrão, o Flash exibe a página inicial (ver Figura 1), que permite que você selecione um documento recentemente editado, criar novos tipos de documentos (arquivos Flash, arquivos do ActionScript, e assim por diante) ou criar um novo documento usando um modelo pré-construídos.

Figura 1: Por padrão, o Flash exibe a página inicial quando é iniciado.

2. Clique Flash File (ActionScript 3.0) na coluna Criar novo na página inicial para criar um documento em branco. Se o Flash não exibe a página inicial (o recurso pode ter sido desativado antes, se você compartilha um computador), selecione Arquivo> Novo a partir do menu principal para criar um novo documento. Verifique se a guia Geral está ativa, selecione Arquivo Flash (ActionScript 3.0) e clique em OK.

 

Dica: Seu Flash recentes documentos estão listados no item Abrir uma coluna recente, que pode te salvar de busca no seu disco rígido para arquivos Flash.

3. Escolha Arquivo> Salvar como no menu principal. Nome do banner.fla novo arquivo e clique em Salvar quando terminar. Flash salva documentos editáveis como arquivos FLA. A partir do documento FLA, de exportação (ou compilar) os arquivos SWF que pode ser incorporado em uma página HTML. Flash Player, instalados na maioria dos computadores, joga os arquivos SWF que você exportar a partir do Flash.

É uma boa idéia para salvar um novo documento quando você começar a trabalhar com ele (e muitas vezes depois disso), assim você não perde nada do seu trabalho. Após terminar de salvar o arquivo, vá para o exercício seguinte, onde irá alterar as propriedades do documento

Alterando as propriedades do documento

Neste ponto, você está olhando para uma tela em branco rodeado por muitos controles (Figura 2). O grande quadrado branco é chamado de Palco, e é onde você coloca os ativos que você deseja exibir no arquivo SWF, como imagens, botões, textos ou animações. O Palco e os painéis são comummente chamado de espaço de trabalho do Flash ou ambiente de criação.

(+) Visualizar ampliadaFigura 2: O ambiente de criação Flash inclui uma fase onde você pode colocar e manipular ativos.

Ao redor do palco você vê uma série de painéis. O painel do lado esquerdo é chamado o painel de ferramentas (veja a Figura 3), e seja organizado em uma única coluna ou coluna dupla.

Dica: Clique na seta dupla na parte superior do painel para alternar entre o painel Ferramentas de uma única coluna e uma coluna dupla.

Este painel inclui ferramentas que você pode usar para criar e modificar documentos, tais como as ferramentas que você usa para desenhar e fazer seleções.

Figura 3: Use o painel de ferramentas para desenhar e fazer seleções. Você pode usar a ferramenta de seleção (seta preta) para fazer as seleções nestas tutoriais.

Um painel perto da parte inferior do aplicativo Flash é intitulado Propriedades (escolha Janela> Propriedades> Propriedades se você não ver o painel). Este painel é chamado de Inspetor de propriedades (veja a Figura 4), e permite que você altere várias

propriedades do que é selecionado no seu documento (como uma imagem ou um quadro) ou definir as propriedades do arquivo SWF inteiro (como no quadro taxa ou dimensões). Se você não tem quaisquer objetos ou quadros selecionados, o inspetor de propriedades permite que você modifique as propriedades do próprio documento.

1. Abra o inspetor Propriedades (escolha Janela> Propriedades> Propriedades) e clique no botão ao lado do tamanho da palavra a abrir a caixa de diálogo Propriedades.

Nota: Certifique-se de que você não tem um quadro selecionado. Clique no Palco se você não vir este botão.

Figura 4: Clique neste botão no Inspetor de propriedades para abrir a caixa de diálogo Propriedades. Você pode então alterar o tamanho e a cor do Stage.

O botão exibe as dimensões atuais do arquivo FLA. Por padrão, o tamanho do Palco em um novo documento do Flash é de 550 pixels de largura por 400 pixels de altura. Quando você clicar nesse botão, você abre o diálogo Propriedades do documento onde você pode alterar várias propriedades do documento inteiro (como as dimensões do palco, a cor, e taxa de quadros do documento).

2. Na caixa de diálogo Propriedades do Documento, digite 160 no texto de largura e 600 caixa na caixa de texto Altura.

Quando você digitar novos valores para estas caixas de texto, você redimensione as dimensões do seu documento FLA. Há uma razão que você precisa para usar essas dimensões específicas. Porque você está criando um banner, você deve usar um banner tamanho padrão. Neste tutorial, você está criando um "arranha-céu largo". Para uma lista de tamanhos de banner padrão, vá para a Advertising Bureau a página interativa na Unidade de Diretrizes de anúncios.

Dica: Você também pode criar banners de um modelo Adobe escolhendo File> New do menu principal. Selecione o botão de Modelos e escolher a categoria Publicidade para ver os modelos disponíveis.

3. Clique em OK quando terminar de introduzir novas dimensões na caixa de diálogo Propriedades do Documento para retornar ao ambiente de criação.

Quando você retornar ao ambiente de criação, observe como as dimensões de sua mudança do documento. Você também pode mudar a cor do documento atual do fundo e taxa de quadros no Inspetor de propriedades, sem ir para a caixa de diálogo Propriedades do Documento. Você vai encontrar informações sobre a taxa de quadros na parte 2 deste tutorial.

Lembre-se de salvar seu trabalho (File> Save) antes de continuar

Importação de gráficos em um documento

Quando você trabalha com Flash, muitas vezes você vai importar elementos em um documento. Talvez você tem um logótipo da empresa ou um designer gráfico que tem prestado para o seu trabalho. Você pode importar uma variedade de ativos para o Flash, incluindo som, vídeo, imagens bitmaps, e outros formatos gráficos (como PNG, JPEG, AI e PSD).

Os gráficos importados, se você importá-los para o Palco ou para a biblioteca, são armazenados no documento a biblioteca. A biblioteca guarda os bens importados para o documento e símbolos que você cria dentro do Flash. Um símbolo é um gráfico vetorial, botões, fontes, componente ou clipe de filme que você cria uma vez e pode reutilizar várias vezes como exemplos. Para mais informações sobre símbolos e instâncias no Flash, veja o vídeo tutorial chamado Criação e uso de símbolos e instâncias no Adobe CS3 Vídeo Workshop.

Para ver como é fácil importar imagens no Flash, nós temos aqui uma imagem de uma variedade gnome-jardim nos arquivos de origem tutorial. Antes de prosseguir, certifique-se que você baixar o arquivos de exemplo no início deste tutorial (se você não tiver feito isso) e extrair as imagens para a mesma pasta que o documento banner.fla.

No exercício seguinte, você irá selecionar o quadro em que você deseja importar o activo na Timeline. Depois, você pode importar a imagem para esse quadro, que aparece no palco.

1. Selecione o quadro 1 na Linha do tempo, e, em seguida, escolha Arquivo> Importar> Importar para o palco para importar uma imagem no documento atual do quadro selecionado. Você verá a caixa de diálogo Importar (ver Figura 5), que permite que você navegue até o arquivo que deseja importar.

 

Figura 5: Navegue até a pasta em seu disco rígido que contém um arquivo Adobe Photoshop ® CS3 chamada gnome.psd.

2. Navegue até a pasta onde você extraiu os arquivos de suporte, selecione o arquivo gnome.psd e clique em Abrir (Windows) ou importar (Macintosh).

As importações de imagem para o palco no frame que você selecionou, e também é armazenado na biblioteca do documento. Observe que você não precisa de Photoshop para importar este arquivo.

Nota: Você pode arrastar os ativos da biblioteca para o palco várias vezes, se você quiser ver várias instâncias da arte. Seu tamanho não aumenta se você usar várias instâncias no Palco. O arquivo SWF apenas armazena as informações do símbolo original ou recurso da biblioteca e trata cada caso como uma duplicata.

3. Escolha Janela> Biblioteca para abrir o painel Library.

Você verá a imagem que você acabou de importado, gnome.psd, na biblioteca do documento.

4. Clique na ferramenta Seleção e selecione a instância no Palco.

Se você olhar para o inspetor de propriedades você vai perceber que você pode modificar o gráfico de largura e altura, bem como a imagem de X e Y (também chamado de coordenadas) no Palco. Quando você seleciona um objeto no Palco, você pode ver e modificar as coordenadas atuais no Inspetor de propriedades (veja a Figura 6).

Figura 6: As coordenadas X e Y corresponde ao ponto de registro, que é o canto superior esquerdo do símbolo de clipe de filme aleatório.

5. Com a ocorrência de gráfico (do gnome) ainda selecionada, digite 0 na caixa de texto X e digite 0 na caixa de texto Y, se não forem já está definido para 0, como mostrado na Figura 7.

 

Figura 7: Coloque o coordenadas X e Y usando o Inspetor de propriedades. Defina os valores X e Y para 0 ..

Definir novas coordenadas se move do canto superior esquerdo da imagem para o canto superior esquerdo do Palco. Você pode arrastar a imagem bitmap ao redor do palco usando a ferramenta Seleção em vez de alterar as coordenadas no Inspetor de propriedades. Você deve usar o Inspetor de propriedades quando você precisa definir uma posição específica de um objeto, como fez nesta etapa.

Lembre-se de guardar o documento antes de prosseguir para o próximo exercício.

Nota: Você também pode importar arquivos de som em seus documentos FLA. Isso não é coberto neste tutorial, mas você pode encontrar mais informação se você fizer uma pesquisa sobre "a importação de som" no painel da Ajuda (F1

Introduzindo camadas e Linha do tempo

O painel do tempo está acima do Palco. O tempo ajuda a organizar os ativos em seu documento, e também controla o conteúdo de um documento ao longo do tempo. Para ajudar a controlar o conteúdo, os prazos em Flash contêm camadas e quadros. documentos do Flash podem desempenhar ao longo de um período de tempo, como vídeos ou som, que é medido utilizando frames. As camadas são como transparências que pilha em cima da outra, e cada camada pode conter imagens, textos ou animações que aparecem no palco. Você aprenderá mais sobre quadros e prazos na parte 2 deste tutorial.

O arquivo FLA que está a trabalhar tem uma camada (Layer 1) com o conteúdo em um único quadro (Quadro 1). Esta é a maneira padrão que abre um documento do Flash.

Neste exercício, você trava e renomeie a Camada 1. Muitas vezes você vai querer colocar objetos em uma determinada posição no Stage. Para ajudar você a manter os objetos no lugar, o Flash permite-lhe bloquear camadas para que você não pode selecionar os itens em uma camada e, acidentalmente, movê-los.

1. Selecione a Camada 1 na Linha do tempo e clique no ponto abaixo no ícone do cadeado, como mostrado na Figura 8.

 

Figura 8: uma camada de bloqueio assim que seu conteúdo não seja acidentalmente movido ou excluído do Palco. Você também pode impedir que, inadvertidamente, adicionando outros recursos para essa camada.

Com a sua camada apenas bloqueado, você precisará adicionar novas camadas antes de adicionar quaisquer outros objetos no Palco. Você não pode adicionar novos objetos de uma camada bloqueada.

2. Selecione a ferramenta Selection no painel Tools e dê um duplo clique no nome da Camada 1. Quando você clica duas vezes um nome de camada, você pode modificar o nome.

3. Tipo de fundo para o nome da camada para renomear a camada, e salvar o arquivo.

Quando você iniciar projetos de construção com muitas camadas, nomes de camadas, como Layer 1 e Layer 14, não ajudam a determinar o que é nessa camada. Dar um nome descritivo camadas é uma boa prática a adoptar.

Dica: Você também pode organizar camadas em pastas de camadas. Para obter mais informações, faça uma pesquisa sobre "pastas" camada no painel Help (F1).

Criando uma nova camada

Em praticamente qualquer projeto em Flash, onde você usa importados gráficos e animações, você vai precisar criar pelo menos algumas camadas. Você precisa separar os elementos certos para suas próprias camadas, especialmente quando você começa a animar objetos. Você pode também empilhar gráficos em cima uns dos outros, e até mesmo criar uma sensação de profundidade ou sobreposição, usando múltiplas camadas.

1. Selecione a camada de fundo sobre o cronograma e clique no botão Insert Layer para criar uma camada nova e vazia.

 

Figura 9: Clique em Insert Layer para inserir uma nova camada acima da camada selecionada atualmente.

2. Dê um duplo clique no nome da nova camada assim o nome da camada torna-se editável.

3. Tipo de animação para renomear a nova camada.

Gráficos no Palco pilha de acordo com as camadas da Timeline. Por exemplo, qualquer coisa que você colocar sobre a camada de animação aparecerá acima da imagem sobre a

camada de fundo. Você irá adicionar animação a esta segunda camada na parte 2 deste tutorial.

Certifique-se de salvar seu progresso antes de prosseguir.

Dica: Se você precisa reorganizar suas camadas, você pode usar a ferramenta Seleção para selecionar e arrastar uma camada acima ou abaixo de outras camadas da Timeline.

Importar para a biblioteca

Em um exercício anterior, você importou a imagem gnome.psd diretamente para o Palco. Também é possível importar bens diretamente para a biblioteca, em vez de para o palco, e então arraste o recurso em uma camada selecionada no Stage. Você pode usar esta técnica para importar um arquivo do Illustrator no exercício seguinte. Observe que você não precisa Illustrator instalado para importar esse arquivo.

1. Escolha Arquivo> Importar> Importar para biblioteca.

Uma caixa de diálogo aparece onde você pode selecionar um arquivo do seu disco rígido. Localize a pasta de arquivos deste tutorial fonte no seu disco rígido.

2. Selecione join_us.ai em arquivos do tutorial de origem e clique em Abrir (Windows) ou Importar para biblioteca (Macintosh). Outra janela será aberta onde você pode controlar como as importações de ilustração.

3. Certifique-se de todas as caixas são selecionadas (como mostrado na Figura 10), e clique em OK para importar o arquivo de AI.

 

Figura 10: Certifique-se de todas as caixas estão selecionadas, então você importa todas as partes deste arquivo.

Dica: Em algumas situações, você pode querer controlar o modo como as importações de ilustração, como por não importar certos elementos do arquivo. Para fazer isso, você pode desmarcar as camadas ou pastas que você não deseja importar para o Flash.

As importações de ilustração para a biblioteca, onde você pode manipulá-lo ainda mais, ou arrastá-lo para o palco quando estiver pronto. Um símbolo gráfico também é criado nessa época (ver Figura 11).

4. Abra o painel Library (Janela> Biblioteca).

O ativo para a ilustração que você acabou de importar para a biblioteca estão contidas em uma nova pasta (veja a Figura 11), o Flash cria um símbolo gráfico da figura chamada join_us.ai.

5. Dê um duplo clique no nome join_us.ai na biblioteca (assumindo que é o primeiro ativo você importou para a biblioteca), e join_us tipo mudar o nome do símbolo gráfico.

6. Clique na ferramenta de seleção no painel Ferramentas.7. Selecione o quadro 1 da camada de animação, em seguida, selecione o símbolo

join_us gráfico e arraste-o para o Palco. Mover a ilustração no palco para um pouco acima da cabeça do gnomo na imagem, como mostrado na Figura 11.

 

Figura 11: As importações de ilustração para a biblioteca como um símbolo gráfico e, em seguida, arrastar o símbolo gráfico no quadro 1 da camada de animação. Ajuste a imagem até que corresponda a esta figura.

Quando você arrastar algo para o palco, você vai vê-lo no arquivo SWF quando o arquivo de execuções. Você vai testar isso no exercício seguinte.

8. Escolha Arquivo> Salvar para salvar o documento antes de prosseguir

Teste o seu progresso

Para terminar, você pode testar seu documento em Flash. Isso testa o arquivo SWF no Flash Player. Por exemplo, você pode ver como seu código funciona no Flash Player, veja como animações jogar na interatividade do usuário tempo, testar, e muito mais. É muito mais rápido que o upload do seu trabalho para um servidor de cada vez que você quiser ver o arquivo SWF em ação:

1. Escolha Controlar> Testar filme a partir do menu principal.

O ambiente de teste é aberto e reproduz o documento no Flash Player. Você pode agora ver a versão do arquivo SWF compilado do seu documento FLA.

Muitas vezes você vai usar o comando Testar filme para ver o seu progresso quando você trabalha em um arquivo FLA.

2. Clique no botão fechar o arquivo SWF para retornar ao ambiente de criação.3. Localize a pasta em seu disco rígido onde você salvou banner.fla no início deste

tutorial.

Quando você abrir esta pasta, você deverá ver um arquivo SWF adicional chamado banner.swf. Esta é a versão compilada do documento banner.fla. Quando você quiser criar uma versão final do seu arquivo para upload, você vai querer fazer outras configurações de publicação em Flash antes de compilar o arquivo SWF. Você olha para estas definições na Parte 3 deste tutorial.

Para ver o arquivo completo e publicado para esta parte do tutorial, encontrar banner_pt1.fla na pasta de arquivos de origem que acompanham este tutorial.

Para onde ir a partir daqui

Em um período muito curto de tempo, você tem de configurar um documento FLA, importados e dispostos ativos em um arquivo FLA, camadas criadas e modificadas, e testou um arquivo SWF. Você está no seu caminho para a criação de um banner em flash, assim você pode colocá-la em uma página HTML usando o Dreamweaver. Nas Partes 2 e 3 deste tutorial, você irá criar e modificar símbolos, criar uma animação, adicionar alguns ActionScript simples para um botão que abre uma página web, e adicione o banner em um site.

Agora que você terminou a parte 1, continue com a parte 2: Usando o Flash para o Time-Parte 2 Primeiro: Adicionando símbolos, animação e ActionScript. No próximo tutorial, você aprenderá a criar símbolos, animação e até mesmo escrever algumas simples ActionScript para fazer a função banner

PARTE 2

Adição de texto

Você precisa adicionar algum texto para o seu banner para fins decorativos. Você pode adicionar diversos tipos de texto em um documento do Flash: texto estático, texto dinâmico ou de entrada de texto. O texto estático é útil quando você precisa adicionar texto decorativo para o Palco, ou qualquer texto que não precisa de mudar ou de carga de uma fonte externa. Use texto dinâmico quando você quiser carregar o texto de um arquivo ou banco de dados, ou alterar o texto quando o arquivo SWF é reproduzido no Flash Player. Use o texto de entrada quando você quiser que o usuário digita no campo de texto. Você pode pegar o texto e enviá-lo para um banco de dados, têm que manipular algo no arquivo SWF, e muito mais.

Você pode adicionar qualquer um desses tipos de texto usando a ferramenta Texto. Para este exercício, você irá adicionar algum texto estático para o Palco. Para adicionar texto estático, siga estes passos:

1. Abra o documento banner.fla você criou na Parte 1 deste tutorial, e renomeie o arquivo banner2.fla.

Nota: Se você não terminou Parte 1 deste tutorial, não tinha vontade de lê-lo, ou perdeu o seu arquivo, abra a pasta da fonte de arquivos ZIP arquivo que acompanha este tutorial. Dentro da pasta iniciar, encontre banner.fla e usar esse arquivo para iniciar o tutorial.

2. Escolha Inserir> Camada (ou clique no botão Inserir camada na Linha de tempo) para inserir uma nova camada. Dê um duplo clique no nome da camada e digitar o texto para renomear a camada.

3. Selecione a ferramenta de texto (que se parece com uma letra T grande), no painel Ferramentas.

4. Clique na parte superior do Stage e digite Overworked? no campo que está no palco.

5. Selecione o campo de texto usando a ferramenta Seleção. Uma caixa delimitadora aparece em torno do texto quando você selecioná-lo.

6. Abra o inspetor de propriedades (Janela> Propriedades> Propriedades) e verifique se Texto estático aparece no texto Tipo menu pop-up.

7. Alterar a fonte do texto a qualquer fonte que você preferir. Você pode alterar a fonte usando o menu pop-up Fonte (ao lado do ícone A, mostrado na Figura 1).

8. Alterar o tamanho da fonte para 24 pontos com o tamanho da fonte no menu pop-up, e ver se ele se encaixa dentro da faixa. Você pode precisar alterar o tamanho da fonte até que o texto se enquadra no Palco.

 

Figura 1: Alterar as configurações de texto no Inspetor de propriedades até que o texto se enquadra na faixa. Este texto tem a cara corajoso e uma sombra filtro aplicado (utilizando o painel de Filtros).

Quando terminar, o texto deve ser semelhante em tamanho e posição do texto na Figura 2.

Figura 2: Adicione algum texto estático para o banner.

9. Selecione a ferramenta Texto novamente e Underpaid tipo? abaixo o texto que você adicionou na etapa 4.

10. Selecione o campo de texto e abra o Inspetor de propriedades. Alterar o texto para a mesma fonte que você selecionou no passo 7. Em seguida, selecione um tamanho de fonte para que o texto é grande, mas ainda cabe no palco.

11. Repita os passos 6 e 7 para adicionar o Gnome frase? abaixo da anterior duas linhas de texto e, em seguida use a ferramenta Seleção para selecionar cada campo de texto e movê-los até sua posição assemelha-se ao texto na Figura 3.

Quando terminar, seu banner será semelhante a Figura 3.

Figura 3: Você deve ter três linhas de texto que se assemelham a essa imagem quando você terminar este exercício.

12. (Opcional) Abra o painel Align (Janela> Alinhar) para alinhar o texto ao centro do Palco. Selecione um bloco de texto no Palco, clique no botão para o palco no painel Alinhar e, em seguida, clique no botão Alinhar centro horizontal. (Passe o mouse sobre um botão no painel para ver qual o seu nome).

.

13. Escolha Arquivo> Salvar para salvar seu progresso antes de prosseguir.

Dica: Para efeitos de texto avançada, você pode criar um texto no Adobe Illustrator ®, salve o arquivo como, PNG ou SWF, AI, e importá-lo para o Flash

O uso de símbolos

Um símbolo é um objeto que você criar no Flash. Como você descobriu na parte 1, um símbolo pode ser um gráfico, botão ou clipe de filme que você reutilizar todo o FLA atuais ou outros arquivos FLA. Qualquer símbolo que você criou é automaticamente adicionado à biblioteca do documento (Janela> Biblioteca), assim você pode usá-lo muitas vezes dentro de um único arquivo FLA.

Quando você adicionar animação, você deve sempre animar símbolos no Flash, em vez de animar os gráficos primas (elementos gráficos que você chamar) ou bens-primas que você importa (como um arquivo PNG). Por exemplo, se você desenhar um círculo usando a ferramenta Oval em Flash, você deve converter esse círculo gráfico para um clipe de filme antes de animá-lo. Isso ajuda a reduzir o tamanho do arquivo SWF e torna mais fácil criar uma animação em Flash.

Na Parte 1 deste tutorial, você criou um símbolo gráfico quando você importou o arquivo join_us.ai em Flash. Neste tutorial, você deseja animar esse símbolo e, portanto, você precisa mudar para um símbolo de clipe de filme, que tem um cronograma. No exercício seguinte, você converte um símbolo gráfico em um símbolo de clipe de filme no exercício seguinte. Você vai animar este clipe de filme em exercícios posteriores.

1. Excluir o símbolo gráfico join_us do Palco.2. No painel Biblioteca, selecione o símbolo join_us gráfico e, em seguida, botão

direito do mouse (ou clique em opção) da instância.3. Selecione o tipo e em seguida, Clipe de filme a partir do menu de contexto para

alterar o tipo de símbolo é.

O ícone que representa o tipo de símbolo é a mudança do ícone do símbolo gráfico de um ícone de clipe de filme.

Figura 4: Utilize o Convert to Symbol caixa de diálogo para converter o conteúdo selecionado em um símbolo, dar-lhe um nome e adicioná-lo à biblioteca do documento.

4. Arraste e posicione uma nova instância do símbolo join_us clipe de filme no Palco.

Lembre-se que o nome do símbolo (na biblioteca) é diferente do que o seu nome de instância (no palco), porque você pode ter várias instâncias de um único símbolo no Palco. Por exemplo, você pode definir um nome de instância para o símbolo join_us usando o Inspetor de propriedades depois de arrastá-lo para o Palco do painel Biblioteca. Se você arrastar outra instância de se juntar a nós para o Palco, você atribuir a ele um nome de instância diferente. Você usa o nome da instância no ActionScript para fazer referência e manipular a instância com o código, e há algumas diretrizes de nomenclatura que deve seguir quando você atribui um nome de instância. (Discutirei isso mais tarde neste tutorial, na seção chamada Escrevendo ActionScript simples).

símbolos de clipe de filme têm seus próprios prazos. Isto significa que você pode animar cada instância de clipe de filme sobre a sua própria linha de tempo, e na Timeline principal do documento. Esta é a única para as ocorrências de clipe de filme. Você vai animar o clipe de filme no exercício seguinte.

Adicionando animação a um cronograma

Você já usou o tempo na parte 1 deste tutorial para inserir camadas e adicionar novos conteúdos para essas camadas. Na Parte 1, você adicionou ativos para o Palco e um quadro na Timeline. Você deve ter notado que depois que você adicionar conteúdo em um quadro, um círculo preenchido aparece no quadro para indicar conteúdo desse quadro. Sempre que há conteúdo novo ou alterado em um quadro, que é chamado de um quadro-chave e tem uma cheia de pontos pretos na armação. Um quadro-chave é um quadro onde você define as alterações na animação, ou um quadro que tem conteúdo sobre ele. Um quadro-chave vazio tem um círculo vazio. Para mais informações sobre os diferentes tipos de molduras, fazer uma pesquisa sobre "quadros e quadros-chave" (com aspas) no painel de Ajuda (F1).

Você cria uma animação em um documento do Flash, adicionando conteúdo a um cronograma. Quando a reprodução passa através de uma linha do tempo, os quadros individuais jogar; quando são jogados em uma rápida sucessão (como um flipbook ou sucessão de quadros em um rolo de filme), você pode criar uma animação.

Quando você cria uma animação quadro a quadro, cada quadro é um quadro-chave. Em uma animação interpolada, você define quadros-chave em pontos significativos da animação e deixar que o Flash crie o conteúdo dos quadros intermediários. O Flash exibe os quadros interpolados de uma animação em azul ou verde claro com uma seta desenhada entre os quadros principais. Como os documentos do Flash salvam as formas em cada quadro-chave, você deve criar quadros-chave somente nos pontos em que a animação algo for alterado.

Criando uma animação quadro a quadro

Para criar um quadro de animação quadro a quadro, siga estes passos:

1. Escolha Modificar> Documento.

O Documento de caixa de diálogo Propriedades. Esta é a caixa de diálogo que você usou para alterar as dimensões do banner na parte 1. Agora você deseja alterar a taxa de quadros para o banner.

2. Altere o número na caixa de texto frame rate para 18. Clique em OK para aplicar a nova configuração.

A maior taxa de quadros significa que a execução da animação suave, mais do que quando você tinha que definir a 12 quadros por segundo (fps). Mudar o fps definição significa que a linha do tempo principal e cronogramas de clipe de filme todo o jogo na taxa de quadros especificados.

Nota: Uma taxa de quadros maior também significa que há um aumento da demanda ligeiramente no computador do usuário (ou CPU) para renderizar os quadros extra por segundo.

3. Dê um duplo clique no símbolo join_us instância no Palco.

Isso abre o símbolo no modo de edição de símbolo (ver Figura 5). Neste modo, você vê o cronograma do símbolo de clipe de filme, que é executado

independentemente do cronograma para o documento FLA principal (aquele que você viu antes de clicar duas vezes no símbolo). Isto significa que você pode ter animações que tocar e parar de forma independente a partir de animações na timeline principal. Lembre-se que um clipe de filme ainda joga na taxa de quadros do documento (18 fps).

Figura 5: No modo de edição de símbolo, o símbolo que você está editando parece normal, enquanto outros itens no Palco estão desactivados. As alterações feitas neste modo de aplicar a cada instância do símbolo no arquivo FLA.

Quando você entrar neste modo, isso significa que você editar o símbolo em si, não apenas a única instância no Palco. Todas as alterações feitas neste tempo (que é o clipe de filme Linha de tempo) se aplicam a todas as instâncias do símbolo que você usa no arquivo FLA.

Você pode dizer que você está editando um símbolo olhando para a barra de edição (ver Figura 6).

Figura 6: Use a barra de edição para navegar em um documento. A barra de edição pode ser acima ou abaixo da linha do tempo. O ícone da direita (neste caso, join_us) indica o símbolo atual que está sendo editado.

Cena 1 refere-se a linha do tempo principal do documento FLA. Você pode clicar nesse botão para retornar à Timeline principal. Os nomes depois que ele aponte para o símbolo que você está editando. Se o símbolo é aninhada dentro de outros símbolos, esse caminho pode conter vários nomes. Na Figura 6, você pode ver que você está editando o símbolo que se junte a nós na Linha do tempo principal (Cena 1).

4. Com a ferramenta Seleção, clique e arraste em torno do conteúdo que está dentro do clipe de filme e pressione F8 para convertê-la em outro novo símbolo de clipe de filme.

5. No to Symbol, caixa de diálogo tipo de converter o nome nested_mc na caixa de texto Nome, clipe de filme selecionado, e clique em OK.

Um novo clipe de filme é adicionado à biblioteca. Também note que duas camadas na linha do tempo estão agora vazias. Você pode dizer que estas camadas estão vazias porque os quadros têm círculos vagos, que representam nenhum conteúdo, ea camada superior tem um círculo preenchido (o que significa que tem um conteúdo). Nas etapas seguintes você excluir as camadas que deixaram de conter obra de arte.

6. Selecione o texto bg camada sobre o cronograma e, em seguida, clique no botão Excluir camada abaixo do nome da camada (parece uma lata de lixo).

7. Repita a etapa 6 para a camada da estrela. Depois que você terminar, você deve ter apenas uma camada sobre o texto fg chamado cronograma. Você pode renomear essa camada de estrelas , se desejar.

8. Selecione o Frame 15 e escolha Inserir> Quadro-chave.

Dica: Pressione F6 para inserir rapidamente um novo quadro-chave.

Este comando insere um novo quadro, o que significa que você pode modificar o conteúdo desse quadro para criar animação. Atualmente, o conteúdo do quadro 15 é repetido a partir do conteúdo no Quadro 1. Quando você modifica o Quadro 15, em uma etapa futura, as modificações não vão alterar o conteúdo no Quadro 1.

9. Selecione o Frame 30 e pressione F6 para inserir um novo quadro-chave. O quadro-chave duplica o conteúdo do quadro 15. Isso significa que o conteúdo em todos os três quadros é a mesma.

10. Selecione a instância de clipe de filme no quadro 15, e abra o Inspetor de propriedades (Janela> Propriedades> Propriedades).

Nota: Certifique-se de selecionar a instância no Quadro 15, não apenas o quadro. Você pode selecionar o primeiro quadro na Timeline (ou mover o cursor de reprodução para o Quadro 15) e, em seguida, selecione a instância de clipe de filme no Stage para ver o contexto correto do Inspetor de propriedades, como mostrado na Figura 7.

11. Selecione Brilho da Cor do menu pop-up.12. Altere o valor controle deslizante para 75% (ver Figura 7).

 

Figura 7: Alterar o brilho da instância do clipe de filme.

As mudanças de luminosidade para a instância no quadro 15. Os casos em quadros 1 e 30 não se alteram. Isto significa que agora você pode adicionar uma interpolação de movimento que anima o valor de brilho entre os quadros 1 e 15, e depois de Quadros 15 a 30. Depois de jogar 30 quadros, a reprodução loops de volta para o Quadro 1 ea animação começa de novo.

Dica: Você também pode alterar a tonalidade ou valores alfa usando o mesmo procedimento. tweens Alpha são mais do processador do que pré-adolescentes que mudar o brilho ou o tom da animação. Tente evitar intensivo procedimentos processador sempre que possível.

13. Selecione a instância no Palco no Quadro 15 novamente e selecione a ferramenta Free Transform, no painel Ferramentas. Selecione o canto inferior direito alça e arrastá-lo para o centro da imagem para torná-lo menor (ver Figura 8).

 

Figura 8: Redimensionar o exemplo, usando a ferramenta Free Transform.

14. Clique e arraste a alternância vermelho (reprodução) da esquerda para a direita na linha do tempo.

A estrela deve saltar entre grandes e escuros, para pequenas e "brilhante" (ou de cor clara). Este é essencialmente um quadro a animação quadro a quadro, pois as mudanças gráficas entre os quadros, sem qualquer "interpolação" aplicada: você tem uma série de gráficos que mudam quando a reprodução alcançar o quadro. No entanto, neste caso queremos aplicar uma interpolação a esta animação, porque é muito agitado e uma transição suave ficará mais agradável. Para aprender a aplicar uma interpolação, a ler!

Criando uma animação

Você pode criar vários tipos de animação em um arquivo FLA. Nesta seção da série maratona tutorial, você irá criar uma animação ou interpolação de movimento. A interpolação de movimento é uma animação onde você define as propriedades como posição, tamanho e rotação de uma instância em um ponto no tempo, e então você alterar essas propriedades em outro momento. Nesta animação, você alterar o brilho eo tamanho da instância (já definidas no exercício anterior).

Para obter informações sobre diferentes tipos de tweens, faça uma busca em "Sobre a animação interpolada" (com aspas) no painel de Ajuda do Flash (F1).

1. Selecione qualquer quadro entre 1 e 15 e, em seguida, selecione a partir do Tween Motion menu pop-up no Inspetor de propriedades.

A extensão de quadros muda de cor e aparece uma seta entre os quadros 1 e 15 (ver Figura 9). Observe como as opções no Inspetor de propriedades são diferentes quando você seleciona um quadro em comparação com quando você seleciona uma instância de clipe de filme (veja a Figura 7 anteriores).

Dica: Você também pode clicar com o botão direito (Windows) ou Option (Mac) no frame e selecione Create Motion Tween no menu de contexto em seu lugar.

2. Selecione qualquer quadro entre 15 e 30 e, em seguida, selecione a partir do Tween Motion menu pop-up no Inspetor de propriedades para criar uma segunda animação.

 

Figura 9: Crie uma interpolação de movimento entre os quadros 1 e 15 e, em seguida 15 e 30, no filme clip cronograma da.

3. Clique na reprodução e arraste-o Timeline do clipe de filme para testar (ou esfregue) a animação.

4. Selecione Controlar> Testar filme.

Dica: A maneira mais rápida para testar o arquivo SWF é usar atalhos de teclado. Pressione Ctrl + Enter (Windows) ou Command + Return (Mac) para testar o arquivo.

O ambiente de teste é aberto, onde poderá ver a animação. Observe como ele faz um loop, aparecendo a fade in e out, devido à alteração no brilho. Por padrão, os retornos reprodução para o Quadro 1 e repete a animação após atingir o quadro final da linha do tempo do clipe de filme. Isto significa que a animação loops vezes menos que você diga para parar. Você vai descobrir como fazer isso mais tarde na seção chamada Escrevendo ActionScript simples.

Criando um botão

Quando você criar um banner, você precisa permitir que o usuário clique em qualquer lugar da área do banner e abrir uma nova janela do navegador. Você pode criar botões com muita facilidade em Flash. Seu botão pode ter um gráfico com gráficos de sobreposição, sons, animações e até mesmo dos seus próprios. Ou você pode criar um botão invisível. botões invisíveis são úteis quando você quer criar "pontos quentes" em seu site ou fazer todo o banner clicável sem obscurecer seus gráficos. No exercício seguinte, você vai adicionar um botão invisível sobre os gráficos do seu banner.

Dica: Para obter mais informações sobre como criar botões visíveis com gráficos e efeitos de sobreposição, busca "a criação de botões" (com aspas) no painel de Ajuda do Flash (F1).

Antes de iniciar este exercício, verifique se você está na linha de tempo principal, não no modo de edição de símbolo do clipe de filme join_us. Se estiver, clique em Cena 1 na barra de edição (entre a Linha do Tempo eo Palco por padrão).

1. Selecione a camada superior na linha do tempo principal (isto deve ser a camada de texto), e, em seguida, escolha Inserir> Camada para criar uma nova camada. Renomeie a nova camada de botão.

2. Selecione a ferramenta Retângulo na caixa de ferramentas (ícone do botão se parece com um quadrado).

3. Localize a seção Cores do painel Ferramentas e clique no ícone do lápis para selecionar o controle de cores Stroke.

4. Seleccione Sem cor, como mostrado na Figura 10. Isso anula contorno do retângulo.

 

Figura 10: Escolha Não Cor para o controle de cor do traço.

Nota: A cor do retângulo de preenchimento, o controle de outra cor, não importa.

5. Clique e arraste o mouse diagonalmente até o Palco para criar um retângulo.

O tamanho (e cor) do retângulo não importa, você irá redimensioná-lo posteriormente usando o Inspetor de propriedades.

6. Clique na ferramenta de seleção no painel Ferramentas e, em seguida, clique no retângulo no Palco para selecioná-lo.

Um padrão axadrezado aparece sobre o retângulo quando você selecioná-lo.

7. Abra o inspetor de propriedades (Janela> Propriedades> Propriedades). Altere o valor na caixa de texto W (largura) e 160 e H caixa de texto (altura) para 600. Em seguida, altere a caixa de texto X e Y da caixa de texto, tanto para 0 (veja a Figura 11).

 

Figura 11: Alterar a largura e altura do retângulo e defina a localização do retângulo para cobrir o palco.

8. Com o retângulo ainda selecionado no Palco, pressione F8 para mudar o retângulo em um símbolo.

9. Na caixa de diálogo Símbolo para converter, tipo btn invisível na caixa de texto Nome, botão Select e, em seguida, clique em OK.

10. Dê um duplo clique no novo botão no Stage para entrar no modo de edição de símbolo.

O retângulo está no primeiro quadro para cima do botão que você criou. Este é o estado acima do botão que os usuários vêem quando o botão fica no palco. Em vez disso, você quer que o botão não ter nada visível no Palco. Portanto, você precisa mover o retângulo para o quadro Hit, que é a área de ocorrência do botão (na região ativa que um usuário pode clicar para ativar as ações do botão).

11. Clique no quadro-chave no quadro acima e mantenha pressionado o botão do mouse enquanto arrasta o quadro-chave para o quadro Hit (ver Figura 12).

 

Figura 12: Clique e arraste o quadro-chave retângulo do quadro até o quadro Hit na Timeline.

Agora, apesar de toda a área do banner é clicável, não há nenhuma aparência do botão em sua bandeira.

12. Clique em Cena 1 para retornar à Timeline principal. Agora há um retângulo verde azulado sobre a área do banner. Refere-se a área Hit do botão invisível. Se é perigoso, você pode ocultar a camada de botão no ambiente de criação. Na Timeline, clique no ponto que está sob o ícone de olho na camada botão para ocultar o conteúdo dessa camada

Writing simple ActionScript

You need to add some simple ActionScript 3.0 code to your banner in order for the invisible button to open a website or send information about how many clicks the banner has received.

There are several different places you can add ActionScript in a Flash document. You can select an instance, and add ActionScript that attaches directly to that instance. To access the code, you would need to find and select that instance again. You can also add ActionScript to a frame (or multiple frames) on the Timeline. It's a good idea to add all of your code to a single frame on the Timeline because it's much easier to find, update, and organize when you're working on a file. Do not attach your ActionScript to instances, which you cannot do using ActionScript 3.0 anyway.

Note: You can also keep your ActionScript in external class files that import into the FLA file you're working on. This is sometimes the best way to organize your ActionScript, particularly when you work on larger projects and especially important in ActionScript 3.0. This topic goes beyond the scope of this tutorial, however.

Notice how your Join Us motion tween continually loops when you test it. By default, the playhead on the Timeline loops if you have content on more than one frame. Therefore, if you have content on several frames in a movie clip or on the main Timeline, it will play and loop forever. You can stop the playhead from looping by adding a single line of ActionScript. For example, if you add this ActionScript to a frame, the playhead stops when it reaches that frame:

stop();

You don't need to add this ActionScript to your banner. However, you can add this ActionScript to other FLA files you create to stop a timeline. The stop action is an example of ActionScript that you should be aware of when you use Flash so that you can stop looping SWF files when necessary.

Before you add any code, you need to give the button a unique instance name. The instance name enables you to target the button with ActionScript code. If you don't name the button, your code doesn't have any way of targeting the button from a timeline. The first step is to assign the invisible button an instance name. Then you can add code that targets that button using its name.

1. Select the invisible button on the Stage.

2. Open the Property inspector (Window > Properties > Properties) and find the <Instance Name> text box in the Property inspector.

3. Type inv_btn into the <Instance Name> text box.

Note: An instance name is different from the symbols name (which is what you type in the Name text box in the Convert to Symbol dialog box). An instance name cannot have spaces or special characters but can contain underscores. Also, instance names are case-sensitive.

4. Choose Insert > Timeline > Layer to insert a new layer and then rename the new layer as actions.

5. Open the Actions panel (Window > Actions) and then select Frame 1 of the Actions layer.

6. Type, or copy and paste, the following ActionScript into the script pane (the editable text field) in the Actions panel:

7. inv_btn.addEventListener(MouseEvent.CLICK, buttonClickHandler);

8. function buttonClickHandler(event:MouseEvent):void {9. navigateToURL(new

URLRequest("http://www.deseloper.com/gnome"));10. trace("You clicked me.");11. }

In the first line of code, you see inv_btn, which is the instance name of the button you just added to the banner file. You’re adding a listener to inv_btn. In the first line of code, you register an event listener for the click event (MouseEvent.CLICK), because that’s what you event want to “listen” for with this banner. A click event can occur when a user clicks a button, and when this event is dispatched the button’s click event handler is called (buttonClickHandler, also in the first line).

The buttonClickHandler argument is what Flash Player calls once the event you’re listening for (the user’s click) actually happens. This argument is the name of a function found in the following line, and you call this function when a user clicks the button. So, now you need to define that function in your code.

So, the second line of code is the buttonClickHandler function. The function contains information about what happens when someone clicks the banner’s button. You added two lines of information inside the curly braces of the buttonClickHandler function. You have code to navigate the browser to a URL, and you request the URL for a particular web page: http://www.deseloper.com/gnome. Then there’s a second line of code with a trace statement. This statement is just for testing purposes – you know that the button code works if you see this text appear in the Output panel in Flash.

12. Select Control > Test Movie to test your code.

When you click the banner, You clicked me should appear in the Output panel. Also, a browser window should appear that opens the targeted website. If this doesn’t occur, open the finished FLA file for this tutorial (available in the finish

folder of this article’s source files) and compare your code to the code in this document.

13. Return to the FLA file, and open the Actions panel. Highlight the trace statement, and click the Apply line comment button (demonstrated in Figure 13.)

 

Figure 13: Comment out a line of code using the Apply line comment button.

If you retest your code, now the commented out line will not execute, so the Output panel does not open after you click the banner. This line of code was used in the earlier step to check whether the button code executes when you click the button. Now that you know your button code works, you could comment out that line of test code (you can also delete it, if you don’t need to use or modify this code again).

The script in this example is a simple piece of ActionScript 3.0 code that reacts to a button click. There is much more information available about the ActionScript language in the Flash documentation (F1). Refer to the documentation's Table of Contents for books and reference guides on ActionScript. A good place to start is Programming ActionScript 3.0 in Flash Help. There are also a few video tutorials that contain ActionScript 3.0 code in the Creative Suite 3 Video Workshop, and articles in the Flash Developer Center

Teste o seu progresso

Agora você tem um banner em Flash com gráficos e animação, que reage a cliques de botão. Você completou seu primeiro interativos e animados documento do Flash!

Vamos dar uma olhada no banner em ação, dentro de uma janela do navegador:

1. Volte para o seu documento banner2 e escolha Arquivo> Configurações de Publicação.

2. Selecione a guia Flash da caixa de diálogo Configurações de publicação.3. Seleccione acesso à rede apenas a partir do local de reprodução de Segurança no

menu pop-up, para evitar avisos de segurança possível. Para obter mais informações sobre as opções de segurança de reprodução local, procure "segurança de arquivo local" (com aspas) no painel de Ajuda do Flash (F1).

4. Escolha Arquivo> Publish Preview (HTML).

O navegador padrão no seu computador abre e exibe a bandeira. Por padrão, o banner é exibido no canto superior esquerdo do documento HTML.

5. Clique no banner para abrir a página web. Uma nova janela do navegador deve abrir e exibir um site.

6. Feche as duas janelas do navegador e retorne ao ambiente de criação Flash.

Se você está feliz com o documento, salve as alterações e vá para a parte 3 deste tutorial. Você pode querer alterar a animação ou texto, ou modifique o código conforme necessário.

A versão final do arquivo está disponível nos arquivos de origem que acompanham este tutorial. Procure na pasta acabada para uma chamada banner_pt2.fla arquivo.

Para onde ir a partir daqui

Nesta segunda parte da série de tutoriais, você adicionou texto, animação, botões e código para o documento e, em seguida testado um arquivo SWF. Um pouco de trabalho em um curto período de tempo! E, agora você tem um banner animado, clicável que você pode exportar e adicionar a uma página web. Na Parte 3 deste tutorial, você vai publicar o seu trabalho e levar o arquivo e adicioná-lo a um site Dreamweaver.

Continue até a terceira parte deste artigo, chamado de Usando o Flash para o Primeira Vez - Parte 3: Publicando e adicionar um arquivo Flash em uma página web. Na Parte 3, você vai aprender sobre o tamanho do arquivo, padrões de banner, configurações de publicação, e como adicionar o banner para uma página da Web do Dreamweaver.

PARTE 3

Considerando o seu público

Quando você criar um banner, muitas vezes você precisa seguir algumas orientações para a apresentação que a bandeira de um determinado site ou serviço. Para os fins deste artigo, seguindo as diretrizes estabelecidas publicidade não é uma preocupação grande porque você não está enviando o banner de uma empresa para fins de publicidade (e cada serviço pode variar e oferecer direções, ou fornecer um kit como esse da DoubleClick). Esta seção explora brevemente algumas das considerações que você possa ter ao criar um banner em um projeto de vida real, ou um projeto de ampla distribuição. Quando você criar um banner que você enviar para uma empresa de publicidade, muitas vezes você precisa se certificar que o arquivo encontra o tamanho do arquivo especificado, dimensão, destino versão do Flash Player e diretrizes taxa de quadros. Às vezes você tem que considerar outras regras sobre os tipos de mídia que você pode usar, código do botão que você usa no arquivo FLA, e assim por diante.

Você criou a bandeira e redimensionou as suas dimensões. Ao fazer isso, você realmente definir o banner com dimensões padronizadas e estabelecidas para que a Interactive Advertising Bureau chama de "arranha-céu largo." O tamanho do arquivo também é razoável para um anúncio em Flash deste tamanho. Você vai descobrir como

reduzir o tamanho do arquivo em um próximo exercício. Para obter informações sobre as dimensões padrão de publicidade (e muitas outras orientações úteis), veja a Advertising Bureau de Normas e Diretrizes página interativa. No entanto, garantir que você confirme as diretrizes de publicidade para o serviço de publicidade, clientes, ou site que você está anunciando em primeiro lugar. Orientações podem incluir padrões de tamanho, dimensões, uso de som e vídeo, e botões.

O que é mais importante (para os fins deste artigo) é que você entender como criar conteúdo em Flash e exportá-lo a partir do Flash, e adicioná-lo para seu próprio site. A lição a tirar de orientações banner é que você precisa considerar o seu público. Sempre que você criar um site em Flash, você deve pensar sobre o tipo de pessoas que vão ver o seu conteúdo como você faria quando você criar qualquer website. É o seu público uma vasta gama de indivíduos com vários tipos de computadores que usam diferentes versões do Flash Player (ou nenhum)? Ou é o seu público principalmente Flash colegas desenvolvedores e empresas de mídia nova? Seu público deve afetar a versão do Flash Player você alvo. Por exemplo, se você acha que um público diversificado (muitas vezes um grande público com uma ampla gama de recursos de computador) vai visitar o seu site, você deve direcionar uma versão anterior do Flash Player, como a versão 8. Se você acha que outros profissionais da web irá visitar o site, em seguida, uma versão mais recente do Flash Player (com um sistema de detecção) deve ser fino. Para obter informações sobre a penetração do Flash Player, consulte as estatísticas mundiais sobre a onipresença do site da Adobe. Você irá definir o seu Flash Player e adicionar um sistema de detecção do Flash Player em exercícios futuros.

Nota: Se você enviar seu banner para uma empresa de host, que normalmente tem exigências especiais sobre como adicionar código do botão para o seu arquivo FLA. Muitas vezes eles querem que você adicionar uma variável específica (como clickTAG) em vez de uma URL. Consulte o serviço, cliente de publicidade, ou orientações site para corrigir o código do botão para adicionar ao seu arquivo FLA. Algumas empresas também limitar o frames por segundo (fps), taxa que você pode usar no arquivo SWF. Quando você cria um banner, tente manter a sua taxa de FPS mais baixo possível. Definitivamente usar 18 fps ou menos, idealmente ficar com 12 fps.

Verificando as configurações de publicação

Muitas vezes você precisa salvar banners para versões anteriores do Flash Player, mas nesta parte do tutorial, vamos explorar a caixa de diálogo Configurações de publicação para que você compreenda como alterar suas configurações no caso de você precisar para o provedor ou o público-alvo .

Nas partes anteriores deste tutorial, você fez alterações na caixa de diálogo Configurações do documento. Você pode definir as dimensões ea taxa de fps para o arquivo SWF. Nesta seção final, você vai ter certeza de que o Flash Player configuração que você deseja alvo está correto, e que você exportar os arquivos que você precisa. Muitos autores Flash fazer essas configurações quando criar o arquivo FLA porque estão cientes do que precisam para a saída e de destino:

1. Abra o arquivo que você salvou banner2.fla de completar a parte 2 desta série. Se você não tem banner2.fla, banner_pt3.fla aberto a partir da fonte de arquivos ZIP arquivo que acompanha este tutorial. Olhe dentro da pasta inicial.

2. Selecione Arquivo> Salvar como e, em seguida, renomeie o arquivo como banner3.fla.

3. Selecione Arquivo> Configurações de publicação. A caixa de diálogo Configuração de publicação aberta, onde você pode alterar várias configurações diferentes de como você deseja publicar seus arquivos.

4. Clique na guia Formatos e certifique-se que o Flash (. Swf) caixa de seleção está marcada.

5. Desmarque a caixa de seleção de HTML. Para este exercício, você não precisa para a saída de uma página HTML. Você só precisa do arquivo SWF que você possa inseri-lo em uma página HTML existente usando o Dreamweaver.

6. Clique na guia Flash e selecione o Flash Player 9 da versão pop-up menu se ele não estiver selecionado. Quando você adicionar anúncios em Flash para uma página HTML, você pode selecionar um player versão anterior. Este é o menu que você usa para fazer isso. Observe que você pode precisar reverter para uma versão anterior do ActionScript, se este for o caso.

7. Selecione ActionScript 3.0 a partir do menu versão do ActionScript pop-up, se não estiver selecionado. Se você nunca usar uma versão anterior do ActionScript para o seu anúncio, você alterar a versão do ActionScript usando este menu.

8. Selecione a caixa de seleção Compactar Filme da seção Opções (que deve ser selecionada por padrão). Você não precisa fazer quaisquer outras seleções na guia Flash.

9. Quando terminar, clique em OK para aceitar as alterações ao documento.10. Selecione Arquivo> Publicar quando você tiver terminado de editar o seu

arquivo FLA. Isto publica o arquivo SWF para o diretório onde você salvou o arquivo FLA.

11. Vá até a pasta onde você publicou o arquivo do banner SWF. Verifique o tamanho do arquivo do documento (que é chamado banner3.swf).

Como mencionei anteriormente, o tamanho do arquivo não é uma grande preocupação para este tutorial, porque você não está enviando o banner com um serviço de publicidade. Se você precisa ou quer reduzir o tamanho do arquivo do seu banner, você pode ir para a caixa de diálogo Configurações de publicação de novo (File> Publish Settings) e clique na guia Flash. Você pode reduzir a qualidade da imagem bitmap que você usa no fundo, alterando a qualidade JPEG para um número menor. Você pode mover o cursor para 60 e clique em Publicar. Quando você verificar o arquivo SWF, novamente, o tamanho do arquivo será menor.

Há outras maneiras de reduzir o tamanho de um arquivo SWF. Se você precisa criar um arquivo para um tamanho máximo de arquivo específico, certifique-se de publicar o seu trabalho regularmente e verifique o tamanho do arquivo atual. As imagens de bitmap, sons e vídeo rapidamente aumentar o tamanho de um arquivo SWF.

Se você não tiver instalado o Dreamweaver, então este tutorial acaba aqui para você. Se este for o caso, você pode retornar à caixa de diálogo Configurações de publicação do presente exercício e não esqueça de selecionar a caixa de seleção HTML na guia Formatos. Quando você publicar o documento, um arquivo HTML é exportado com o arquivo SWF. Você pode abrir este arquivo, copiar o código HTML que você precisa, e colá-lo em seu site. Observe que esse arquivo contém algumas tags extras que você não vai precisar se você tiver um site já existente, como <head> e <body> tags. Você vai precisar do código e scripts que incorporar o arquivo SWF em uma página web, e você

também pode fazer o upload do arquivo JS que as exportações com o HTML e arquivos SWF para ativar o arquivo SWF dentro de páginas vistas usando o Internet Explorer.

Se você tiver o Dreamweaver, siga em frente. Nos exercícios seguintes, você vai colocar o banner e editar em uma página web.

Adicionando Flash para um site do Dreamweaver

Você pode ter uma página web já criada para um banner. Nós criamos uma página para você, que está pronto para ter um banner deste tamanho colocados sobre ele. Certifique-se de baixar o arquivo gnome_part3.zip no início deste artigo. Abra o arquivo ZIP e encontrar a pasta do site dentro da pasta de início. Dentro dessa pasta estão os documentos, é necessário editar. Você vai modificar a página gnome.html no exercício seguinte.

Nota: Você pode encontrar uma versão final do site na pasta do site aninhada dentro da pasta de acabamento.

1. 1. Abra a página chamada gnome.html no Dreamweaver CS3. Você pode encontrar esse documento no site da pasta> início do artigo de arquivos de origem deste.

2. Guarde uma cópia desse arquivo na mesma pasta que o arquivo SWF que você publicou no exercício anterior (banner3.swf).

3. Salve uma cópia do e rightnav.css peek.jpg na mesma pasta que o arquivo SWF que você publicou no exercício anterior. Olhe dentro da pasta do site começar a>. Este documento acrescenta estilos (como a cor do texto e as margens) para o arquivo gnome.html.

4. Verifique se você está em Split (Exibir> Código e design). Quando no modo Split, você pode ver e editar o código que você está trabalhando e também selecionar o arquivo SWF facilmente no modo Design.

5. Em gnome.html, selecione o grande espaço reservado de imagem 160 x 600 no lado direito da página web (veja a Figura 1). Isto é onde você deseja adicionar o banner em Flash para a página da web.

 

(+) Visualizar ampliadaFigura 1: Selecione o espaço reservado imagem grande do lado direito da página da Web no Dreamweaver.

6. Pressione a tecla Backspace ou Delete para apagar a imagem. Deixe o cursor de entrada de texto em que a posição no documento HTML.

7. Selecione Inserir> Media> Flash. Isso abre a caixa Selecionar arquivo de diálogo, onde você pode selecionar o arquivo SWF do banner que você criou.

8. Selecione o arquivo SWF banner3.swf, que deve estar na mesma pasta que sua página web (veja o Passo 2).

9. Clique em OK.10. No Acessibilidade Tag objeto de diálogo Atributos, insira um título na caixa de

texto Título. Você pode inserir Banner para os trabalhadores da União site gnome, ou o que apropriadamente descreve a sua bandeira. Clique em OK para inserir o arquivo SWF na página web. (Veja o documento gnome.html no site da pasta> terminar para fazer referência ao código que é adicionado ao documento.)

Nota: Opcionalmente, você também pode inserir uma chave de acesso para conteúdo Flash que você inserir. Digite uma tecla de letra do teclado e um na caixa de texto Chave de Acesso. Por exemplo, se você digitar U, os usuários podem usar Control + U para acessar o arquivo SWF no navegador. Você também pode adicionar uma ordem de tabulação para o arquivo SWF. Se você tem um monte de links ou objetos de formulário na página, você pode ter o

arquivo SWF (s) entre a ordem de tabulação desses objetos (quando o usuário pressiona a tecla Tab para percorrer os elementos de página).

11. (Opcional) Selecione o arquivo SWF e clique em Executar no Inspetor de propriedades para ver a animação do banner. Clique em Parar quando terminar a exibição do arquivo SWF.

12. Escolha Arquivo> Salvar para salvar as alterações ao documento.13. Agora você deve ver a cópia de diálogo Dependent Files, que copia um arquivo

JS para que o arquivo SWF é reproduzido de forma adequada no Internet Explorer. Clique em OK para copiar este arquivo para a pasta que contém os arquivos SWF e HTML.

14. Selecione Arquivo> Visualizar no navegador iexplore> (Windows) ou Safari (Macintosh), ou selecione o seu navegador preferido, para visualizar o seu site (que agora contém a bandeira SWF) em uma janela do navegador.

Nota: Se você não vê o seu banner, certifique-se de ter o Flash Player 9 instalado.

Sobre a edição de ida e volta

Até agora você pode querer mudar algo no seu banner em Flash. Digamos que você queira alterar a taxa de frame ou adicionar mais algum texto. É fácil voltar ao Flash para editar o documento do Dreamweaver.

1. Em gnome.html, selecione o arquivo SWF no modo de design do Dreamweaver e, em seguida, abra o Inspetor de propriedades (Janela> Propriedades). O Inspetor de propriedades exibe comandos para o arquivo SWF.

2. Clique no botão Editar no Inspetor de propriedades (ver figura 2).

 

Figura 2. Selecione o arquivo SWF e clique no botão Editar no Inspetor de propriedades.

O Flash abre o documento FLA associadas no ambiente de criação Flash, ou abre uma janela para você localizar o documento FLA associados, e depois abri-lo no Flash.

3. Faça as suas edições em Flash. Observe que "Edição De Dreamweaver" aparece no ambiente de criação para indicar que você está editando um arquivo a partir do ambiente Dreamweaver.

4. Clique no botão ao lado Feito edição do Dreamweaver (ver Figura 3).

 

Figura 3. Você pode editar o documento FLA diretamente do Dreamweaver. Clique em Concluído quando tiver terminado.

5. Flash atualiza o arquivo FLA, publica o arquivo SWF, o Flash fecha, e então retorna para o documento do Dreamweaver. O documento é atualizado no Dreamweaver.

6. Para visualizar as alterações para o arquivo SWF no Dreamweaver, quer ver seu site em um navegador (Arquivo> Visualizar no navegador> (navegador)) ou selecione o arquivo SWF no modo Design e clique em Executar no Inspetor de propriedades

Verificação de Flash Player

A maioria das pessoas que visitam o site vai ter o Flash Player 8 ou o Flash Player 9 instalado plug-in. Em circunstâncias raras, o visitante pode não ter o plug-in instalado. Você pode fazer várias coisas diferentes quando um visitante sem Flash Player visitas do seu site. Quando você tem um site que usa Flash principalmente para a funcionalidade, você pode querer enviar o usuário para uma página personalizada com links para o site da Adobe onde o usuário pode baixar o player.

O comportamento Verificar Plugin no Dreamweaver permite que você verifique se os visitantes do seu site ter o Flash Player plug-in instalado. Após o controlo do comportamento de um plug-in, você pode encaminhar o visitante para URLs diferentes, dependendo se eles têm o mínimo necessário plug-in. Por exemplo, se o visitante não tem o Flash Player, você pode abrir uma página que vincula o visitante do site da Macromedia para baixar a versão mais recente:

1. Em gnome.html, clique dentro da <body> tag (clique no espaço antes do colchete angular de fechamento) e abra o painel Behaviors no Dreamweaver (Janela> Comportamentos).

2. Clique no botão Adicionar (+) e selecione Verificar plug-in a partir do menu pop-up comportamentos.

3. Selecione Flash a partir do menu pop-up Plugin.4. Deixe o Se encontrado, vá para caixa de texto URL em branco. Este controles

caixa de texto da página que o visitante com o plug-in especificado vê. Deixando a caixa de texto em branco garante que os usuários permanece na mesma página, se tiver o Flash Player instalado.

5. Digite uma URL para o contrário, vá para caixa de texto URL. Você precisa especificar uma URL alternativa para os visitantes que não têm o Flash Player plug-in. Tipo noflash.html na caixa de texto.

Nota: Eu forneceu um documento noflash.html para você com os arquivos de origem, incluídos nos arquivos de exemplo que acompanham este tutorial, que está dentro da pasta do site encontradas em ambas as pastas de início e término. Ou salve este documento na mesma pasta que o documento gnome.html que você está trabalhando ou criar seu próprio arquivo neste local. O ideal é você criar uma página web personalizada para os usuários sem Flash Player.

6. Selecione a sempre ir para URL Primeiro caso de detecção é caixa de seleção não é possível. Quando selecionada, essa opção significa "assumir que o

visitante tem o plug-in a menos que o browser indica explicitamente que o plug-in não está presente." Porque você adicionar um anúncio alternativo para os visitantes, sem o plug-in, esta opção é preferível para este exercício. A Figura 4 mostra a seleção que você deveria ter feito até este ponto para adicionar a detecção do Flash Player.

 

Figura 4: Faça essas opções para adicionar detecção do Flash Player no Dreamweaver usando um comportamento.

7. Clique em OK. Quando terminar, o Dreamweaver adiciona o seguinte código ao <body>:

id="container" <body onLoad="MM_checkPlugin('Shockwave Flash','','noflash.html',true);return document.MM_returnValue">

Você pode encontrar o produto acabado arquivos no diretório do arquivo de origem, dentro da pasta de acabamento.

Você também pode adicionar detecção do Flash Player no Flash authoring se você não estiver usando o Dreamweaver:

1. Vá para a caixa de diálogo Configurações de publicação (Arquivo> Configurações de publicação) e certifique-se que você selecione HTML na guia Formatos.

2. Selecione a guia HTML.3. Selecione a caixa de seleção Detectar versão do Flash e tipo uma versão do

Flash Player para detectar.

Resumo

Agora que você terminou o seu primeiro site em Flash e inserido em uma página da Web do Dreamweaver. Você aprendeu como criar um novo arquivo, o conteúdo de importação, criação de novos ativos em Flash, adicionar animação simples e ActionScript, e publicar o seu trabalho para a web. Você também aprendeu a usar o Dreamweaver para inserir o arquivo SWF em uma página da Web existente, provavelmente um que é semelhante a uma simples página que você criou no passado.

Esta etapa inicial do aprendizado Flash e adicionar um arquivo SWF em uma página web é importante quando você está aprendendo a usar o Flash. Você agora tem os fundamentos sob o seu cinto e compreender a natureza essencial e fluxo de trabalho de criação de conteúdo em Flash. Esperamos que você vai se sentir melhor equipado para aprender a criar cada vez mais interativa, divertida, funcional ou instrucional de conteúdo usando o Flash.

Para onde ir a partir daqui

No último exercício, você adicionou um script de detecção do Flash. Dreamweaver plug-in comportamento funciona bem, mas há certos momentos em que você pode precisar de personalizar as ações um pouco mais. Além disso, você pode querer testar outros cenários, tais como a velocidade de conexão. Os seguintes recursos podem ajudá-lo:

Quatro passos para melhorar o seu teste de interface em Flash

por Schultz Kristopher

À medida que a web começa a mudar a partir das interfaces mais tradicionais HTML mais comum hoje a utilização de tecnologias Rich Internet Application, como o Adobe Flash e Ajax, os desenvolvedores precisam estar cientes de como a mecânica destes impacto das tecnologias de interfaces forma dinâmica deve ser testado. Por exemplo, uma distinção importante sobre as interfaces baseadas em Flash é que eles mudam sua aparência dinâmica e freqüência de entrada do processo do usuário localmente em tempo real um modelo muito diferente do server-centric metáfora "página" que as interfaces tradicionais utilizam HTML, que requer um viagem de volta para o servidor para quase todos os interação do usuário. Outra diferença importante é que o conteúdo Flash é processado por um motor comum para todas as plataformas e navegadores. Em contrapartida, a variedade de navegadores web processar o conteúdo HTML de forma ligeiramente diferente em diferentes plataformas.

Apesar destas diferenças, muitas pessoas assumem que o teste de uma interface baseada em Flash é simplesmente uma questão de aplicar as mesmas técnicas e critérios de sucesso que eles estão acostumados a fazer para interfaces HTML. Isso geralmente resulta em uma interface que funciona exatamente como o esperado durante os testes, mas demonstra um comportamento de buggy, quando acessados por usuários do mundo real.

Neste artigo, apresento quatro práticas que você deve seguir ao teste de uma interface em Flash e descrever os problemas que estas práticas são destinadas a expor. Se você seguir estas práticas fielmente, você irá garantir um

desempenho sólido e consistente de suas interfaces baseadas em Flash e melhores experiências de usuário para seus visitantes.

Etapa 1: Teste em velocidades de conexão múltipla

Esta etapa apresenta o seguinte:

problemas de desempenho do download Streaming falhas de animação falhas de lógica de código, incluindo:

o Acesso a dados dinâmicos antes de ele carregao Invocar métodos em objetos antes que eles são inicializadoso Incorretas suposições sobre uma ordem de execução fixa para

operações assíncronaso Saltar para quadros tempo antes de terem carregado

Testes sobre as velocidades de conexão múltipla é a prática mais importante a seguir ao teste de interfaces em Flash. É também o que os desenvolvedores HTML tradicionais tendem a rejeitar. Testando HTML interfaces desta forma realiza principalmente um objetivo: confirmar que o desempenho do download é aceitável para todos os usuários. Com o Flash, ensaios sobre várias velocidades de conexão revela muito mais do que apenas problemas de desempenho do download.

Se você testar apenas a partir do seu disco rígido local ou um servidor web em sua rede local, que está em perigo de mascarar problemas que podem ocorrer apenas sob certas condições de conexão do mundo real. Quando você testar localmente, coisas como a comunicação do servidor, o carregamento da imagem, e SWF streaming acontece quase instantaneamente. Nestas condições, é fácil inadvertidamente escrever código que dependa desta vez a resposta imediata, sem perceber.

Um exemplo ajuda a ilustrar este conceito. Se você usar a instrução gotoAndPlay (20) no primeiro frame do filme é o seu cronograma, ele provavelmente vai funcionar mais como esperado quando testar localmente ou mesmo em banda larga. No entanto, se você testar o mesmo arquivo mais de uma conexão de modem, o filme provavelmente vai se comportar de forma incorreta. Isto é porque a natureza de streaming de conteúdo em Flash permite que o código no quadro 1 a correr antes os quadros depois de ter terminado o seu cronograma de carga. Uma tentativa de enviar a reprodução para um quadro que não foi carregado irá falhar.

Uma forma muito útil em torno esse problema é fazer uso freqüente do built-in Simulate Download recurso no Flash, que pode ser encontrado no menu Exibir da janela do SWF que aparece depois de escolher Control> Test Movie (ver Figura 1). Como o recurso de simular Download permite visualizar o desempenho de seu filme sobre várias velocidades de conexão, é uma boa maneira de identificar problemas relacionados à velocidade inicial.

Figura 1. Usando o recurso de simular Download

Mas cuidado. O recurso de simulação de download não é perfeito, você ainda precisa testar seu filme através de ligações reais de velocidade diferentes. A coisa mais importante a lembrar é que os erros relacionados com a velocidade de conexão são muito mais fáceis de resolver se você encontrá-los mais cedo. O mantra "Teste de teste, no início, muitas vezes" é particularmente relevante para esta prática.

Etapa 2: Testar em vários navegadores

Esta etapa apresenta o seguinte:

Problemas com a incorporação Flash Player Problemas com URLs relativas Problemas com Flash a comunicação entre navegador

Embora o teste de cross-browser é essencial com o HTML tradicional, as razões para fazê-lo com conteúdo em Flash são muito diferentes. Cross-browser testes com HTML revela a exibição da página e problemas de scripting do lado do cliente. Como o Flash Player lida com esses dois aspectos para interfaces baseadas em Flash, o navegador não tem qualquer influência sobre eles.

O navegador, no entanto, influenciar a forma como o conteúdo do Flash é incorporado na página. navegadores diferentes requerem marcação código HTML diferentes para carregar e exibir arquivos Flash. Além disso, o modo Flash Player resolve URLs relativos ao tentar carregar ativos externos como imagens e dados XML ou ao saltar para locais novo web usando getURL ()varia de navegador para navegador.

Testar em vários navegadores confirma que o conteúdo do Flash foi incorporado corretamente na página e que todos os URLs incorporados no arquivo Flash está trabalhando de forma consistente em todos os navegadores.

Claro, se comunica sua interface em Flash com o navegador usando JavaScript, testes cross-browser também é necessário expor as diferenças entre a maneira como vários navegadores lidar com esta forma de comunicação.

Nota: Para evitar problemas de dicas URL relativa, consulte o seguinte Flash TechNote: URLs relativos não são referenciados corretamente em um filme do Flash.

Passo 3: Teste em todas as versões do Flash Player

Esta etapa apresenta o seguinte:

erros de publicação detecção de problemas Flash

Como o Flash Player lida com quase todos os aspectos da exposição e funcionalidade de uma interface baseada em Flash, você precisa testar sua interface em várias versões do Flash Player. Isso geralmente é suficiente para teste em apenas duas versões: a versão do jogador que você definiu como sua versão mínima exigida ea versão do jogador que precedeu a versão necessária.

Por exemplo, se a sua interface requer Flash Player 6, então você deve testar nos primeiros lançamento dessa versão (Flash Player 6r21) e em qualquer lançamento da versão anterior (o Flash Player 5r30). Se a sua interface requer uma versão específica posterior, de uma versão especial, por exemplo, 6R65 Flash Player, então você ainda deve testar em versões mencionadas anteriormente, bem como a liberação necessária.

No nosso exemplo, isso significaria testes em versões do Flash Player 5r30, 6r21 e 6R65. Através de testes em todas as versões do Flash Player, você será capaz de expor os erros de edição (como a publicação para Flash 7, quando você quis publicar para o Flash 6), bem como de quaisquer problemas com qualquer funcionalidade de detecção do Flash Player você pode estar usando.

Nota: Você pode encontrar um arquivo de versões antigas do player Flash TechNote seguinte: Flash os jogadores disponíveis em arquivo para fins de teste.

Passo 4: Teste de "fraco" máquinas

Esta etapa apresenta o seguinte:

Problemas com o desempenho de reprodução "Este script parece estar a correr devagar", alerta

Resultados de páginas HTML tradicionais toma o poder do computador muito pequeno. Como resultado, os desenvolvedores web têm quase nunca teve de considerar como o poder do computador do usuário final influencia a qualidade

da experiência do usuário da web. Este não é o caso com o conteúdo do Flash, que se comporta muito mais como um CD-ROM ou videogame. O usuário de hardware do processador, memória RAM e placa de vídeo, os impactos da experiência significativa.

Muito parecido com os CD-ROMs e jogos de vídeo, interfaces baseadas em Flash devem ser projetados com uma exigência mínima de hardware específico em mente. Como você projetar e construir sua interface, repetidamente, verificar o desempenho do seu trabalho em uma máquina que corresponde a especificação mínima para garantir que você não é sobrecarregar o hardware com seus gráficos, animação ou opções de codificação.

Nota: Para obter muita informação útil sobre o código e melhorar o desempenho gráfico, consulte a seção "Otimizando arquivos FLA para saída SWF"em DeHaan do artigo Jen, Flash 8 Best Practices. Para obter instruções detalhadas sobre como usar o Flash 8 cache de bitmap para melhorar o desempenho, consulte Guy Watson cache de bitmap Usando em Flash.

Para onde ir a partir daqui

Ao seguir estas quatro práticas de teste importante, você irá garantir que as interfaces baseadas em Flash que você construir para si ou para seus clientes, e apresentar ao mundo, para uma experiência de usuário que você inicialmente prevista.

Para obter mais informações sobre o Flash Player, visite o Flash Player Developer Center e ler sobre as últimas sobre as melhores práticas, scripts de detecção, segurança e muito mais.

Best Practices for Flash Player Detection http://www.adobe.com/devnet/flash/articles/fp8_detection.html