Professional Documents
Culture Documents
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:
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.
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.
É 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
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.
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.
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.
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).
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.
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.
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.
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
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.
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.
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).
Figura 9: Clique em Insert Layer para inserir uma nova camada acima da
camada selecionada atualmente.
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.
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.
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.
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.
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.
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:
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.
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 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.
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.
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.
2. Altere o número na caixa de texto frame rate para 18. Clique em OK para aplicar
a nova configuração.
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).
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.
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.
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.
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!
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).
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.
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.
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).
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.
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.
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
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:
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.
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
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.
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.
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).
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.
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.
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).
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.
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
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.
Você também pode adicionar detecção do Flash Player no Flash authoring se você não
estiver usando o Dreamweaver:
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.
À 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.
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.
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.
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.
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.
• erros de publicação
• detecção de problemas Flash
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.
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.