Visão geral da lição
Nesta lição você vai aprender a:
·Criar um novo arquivo no Flash
·Ajustar as configurações do Stage e as propriedades do documento ·Adicionar camadas (layers) à Timeline
·Gerenciar keyframes na Timeline
·Trabalhar com imagens importadas no painel Library ·Mover e reposicionar objetos no Stage
·Abrir e trabalhar com painéis
·Selecionar e utilizar ferramentas no painel Tools ·Visualizar sua animação Flash
·Salvar seu arquivo Flash
·Acessar recursos online para o Flash
Esta lição levará menos de uma hora para ser concluída. Copie a pasta Lesson01 do CD do Adobe Flash Professional CS6 Classroom in a Book para a sua unidade de disco se ainda não tiver feito isso.
CONHECENDO O FLASH
1
Inicie o Flash e abra um arquivo
Na primeira vez em que iniciar o Flash, você verá uma tela Welcome com links para modelos de arquivo, tutoriais e outros recursos padrão. Nesta lição, você vai criar uma animação simples para mostrar algumas fotografias de férias. Você vai adicionar as fotos e um título enquanto aprende a posicionar elementos no Stage e ao longo da Timeline. É importante compreender que o Stage é usado para organizar seus elementos visuais no espaço, e que a Timeline é usada para organizar seus elementos no tempo.
1 Inicie o Adobe Flash Professional CS6. No Windows, escolha Iniciar > Pro- gramas > Adobe Flash CS6. No Mac OS, dê um clique em Adobe Flash Pro- fessional CS6 na pasta Applications ou no Dock.
2 Escolha File > Open. Na caixa de diálogo Open, selecione o arquivo 01End.
fla na pasta Lesson01/01End e clique em Open para visualizar o projeto final.
3 Escolha File > Publish Preview > HTML.
O Flash cria os arquivos necessários (um arquivo HTML e um SWF) para exibir a animação final em seu navegador padrão. Uma animação na qual aparecem fotos uma a uma e, no final, um título é reproduzido.
4 Feche o navegador.
●Nota: Você também pode iniciar o Flash dando um clique duplo em um arquivo Flash (*.fla ou.xfl), como o arquivo 01End.fla, dado como exemplo do projeto finalizado.
●Nota: Se seu computador não apresenta uma fonte contida no projeto final, o Flash abre uma caixa de diálogo de alerta.
Você pode escolher um substituto no modo manual, se preferir, ou clicar Use Default, que o Flash faz isso automaticamente.
Crie um novo documento
Você vai criar uma animação simples que visualizou há pouco, ao iniciar um novo documento.
1 No Flash, escolha File > New.
A caixa de diálogo New Document é exibida.
2 Na guia General, escolha Action Script 3.0.
ActionScript 3.0 é a versão mais recente da linguagem de criação de scripts Flash, utilizada para adicionar interatividade. Nesta lição, você não vai tra- balhar com o ActionScript, mas ainda precisa escolher com qual versão seu arquivo é compatível. Escolher ActionScript 3.0 permite criar um novo do- cumento configurado para ser reproduzido no navegador de seu desktop (como o Chrome, o Safari ou o Firefox) usando o Flash Player.
As outras opções dizem respeito a ambientes de reprodução alternativos.
Por exemplo, o AIR para Android e o AIR para iOS criam novos documentos configurados para reprodução com o Air em um dispositivo móvel Android ou Apple.
3 À direita na caixa de mensagens, você pode escolher as dimensões do Stage inserindo novos valores em pixels para Width e Height. Insira 800 para Wi- dth e 600 para Height. Mantenha Ruler Units em Pixels.
Deixe a velocidade dos Frames e a cor de Background do Stage nas configu- rações padrão. Você pode editar essas propriedades do documento sempre, conforme será explicado ainda nesta lição.
4 Clique em OK.
O Flash cria um arquivo ActionScript 3.0 novo, contendo todas as configura- ções especificadas.
5 Escolha File > Save. Nomeie o arquivo como 01_workingcopy.fla e, no menu suspenso Format/Save as Type, selecione Flash CS6 document (*.fla). Salve- -o na pasta 01Start. Salvar o arquivo imediatamente é um bom hábito de trabalho, em especial para o caso de o aplicativo ou o computador travarem.
Você sempre deve salvar o arquivo Flash com a extensão.fla para identificá-lo como um arquivo de origem Flash.
Conheça a área de trabalho
A área de trabalho do Adobe Flash Professional inclui os menus de comando na parte superior da tela e uma variedade de ferramentas e painéis para editar e adicionar elementos ao seu filme. Você pode criar todos os objetos para sua animação no Flash ou importar elementos que você criou no Adobe Illustrator, Adobe Photoshop, Adobe After Effects e outros aplicativos compatíveis.
Por padrão, o Flash exibe a barra de menus, a Timeline, o Stage, o painel Tools, o inspetor de propriedades e alguns outros painéis. À medida que trabalha no Flash, você pode abrir, fechar, encaixar, desencaixar e mover painéis pela tela para adaptá-los a seu estilo de trabalho ou à resolução de sua tela.
●Nota: Para projetos simples, como a animação usada como exemplo nesta lição, criar um único documento FLA é o bastante. Contudo, para projetos mais complexos que requeiram coordenação com diversos
desenvolvedores ou projetos que deverão ser reproduzidos em diferentes ambientes (desktop e dispositivo móvel), é melhor usar o painel Project (Window > Project) para criar um novo projeto. Um projeto ajuda a organizar um grande número de “assets”. Você aprenderá a utilizar o painel Project na Lição 10, “Publicando Documentos Flash”.
Painel Tools
Camadas Stage Timeline Inspetor de propriedades
Escolha uma nova área de trabalho
O Flash oferece também uma nova configuração do painel capaz de melhor aten- der às necessidades de diferentes usuários. As diversas configurações do painel são listadas no menu suspenso, no canto superior direito da área de trabalho do Flash, ou no menu superior em Window > Workspace.
1 Clique no botão Essentials, no canto superior direito da área de trabalho, e escolha uma das áreas de trabalho predefinidas.
Os diversos painéis são redispostos e redimensionados de acordo com sua importância para cada usuário. Por exemplo, as áreas de trabalho Animator e Designer colocam a Timeline no topo da tela, para facilitar o acesso a qual- quer momento.
2 Se você deslocou alguns dos painéis e deseja retornar a uma das áreas de tra- balho predefinidas, escolha Window > Workspace > Reset e o nome da área de trabalho predefinida.
3 Para retornar à área de trabalho padrão, selecione Window > Workspace >
Essentials. Neste Classroom in a Book, usaremos a área de trabalho Essentials.
Salve sua área de trabalho
Se você encontrar uma disposição de painéis que considere adequada para seu estilo de trabalho, poderá salvar essa área de trabalho específica e utilizá-la nova- mente a qualquer momento.
1 Clique no botão Workspace, no canto superior direito da área de trabalho do Flash, e escolha New Workspace.
A caixa de diálogo New Workspace é exibida.
2 Digite um nome para a sua nova área de trabalho. Clique em OK.
A configuração atual de painéis é salva. Sua área de trabalho é acrescentada às opções do menu suspenso no Workspace e pode ser acessada quando for necessário.
Stage
O grande retângulo branco no meio da janela do Flash é chamado de Stage.
Como um palco ou uma tela, o Stage é a área em que o filme é exibido. Ele con- tém o texto, as imagens e o vídeo que aparecem na tela – mova os elementos para dentro e para fora do Stage a fim de exibi-los e ocultá-los. Você pode usar réguas (View > Rulers) ou grades (View > Grid > Show Grid) para posicionar itens no Stage, além do painel Align e de outras ferramentas que conhecerá nas lições do livro.
Por padrão, você também visualiza a área cinza fora do Stage, na qual você pode inserir elementos que não estarão visíveis para o público. A área cinza é chamada de Pasteboard. Para ver somente o Stage, escolha View > Pasteboard a fim de desmarcar essa opção. Por enquanto, deixe a opção selecionada.
Para redimensionar o Stage de modo que ele se ajuste completamente à janela do aplicativo, escolha View > Magnification > Fit in Window. Você também pode escolher opções de ampliação diferentes no menu pop-up acima do Stage.
Altere as propriedades do Stage
Agora você vai alterar a cor do Stage. A cor do Stage e outras propriedades do documento, como dimensões do Stage e velocidade dos frames, estão disponí- veis no inspetor de propriedades, que é o painel vertical à direita do Stage.
1 Na parte inferior do inspetor de propriedades, observe que as dimensões do Stage estão configuradas em 800 × 600 pixels, as quais você define ao criar um novo documento.
2 Clique no botão Background Color e escolha uma nova cor para o Stage na paleta de cores. Escolha cinza-escuro (#333333).
Seu Stage agora tem dimensão e cor diferentes. As propriedades do Stage podem ser alteradas a qualquer momento.
Trabalhe com o painel Library
Acesse o painel Library pela guia à direita do inspetor de propriedades. O painel Library é onde você armazena e organiza símbolos criados no Flash e também arquivos importados, incluindo bitmaps, elementos gráficos, arquivos de som e videoclipes. Símbolos são elementos gráficos frequentemente utilizados para animação e interatividade.
Painel Library
O painel Library permite organizar itens de biblioteca em pastas, ver a frequên- cia com que um item é utilizado em um documento e classificar itens por tipo.
Ao importar itens para o Flash, você pode fazê-lo diretamente para o Stage ou para a biblioteca. Entretanto, qualquer item importado para o Stage também é adicionado à biblioteca, e o mesmo ocorre com os símbolos que você cria. Você pode então acessar facilmente os itens para adicioná-los ao Stage novamente, editá-los ou ver suas propriedades.
Para exibir o painel Library, escolha Window > Library, ou pressione Ctrl+L (Windows) ou Command+L (Mac OS).
Importe um item para o painel Library
Independentemente de você criar elementos gráficos diretamente com as ferra- mentas de desenho do Flash e depois salvá-los como símbolos ou importar mídia como imagens JPEG, ou arquivos de som MP3, os itens são sempre armazenados na Library. Nesta lição você vai importar várias imagens JPEG a serem usadas na animação para a Library.
1 Escolha File > Import > Import To Library. Na caixa de diálogo Import to Li- brary, selecione o arquivo background.jpg na pasta Lesson01/01Start e clique em Open.
●Nota: Você aprenderá mais sobre símbolos na Lição 3,
“Criando e Editando Símbolos”.
2 O Flash importa a imagem JPEG selecionada e a insere no painel Library.
3 Continue a importar photo1.jpg, photo2.jpg e photo3.jpg da pasta 01Start.
Não importe a última imagem, photo4.jpg. Você vai utilizá-la mais tarde, ainda nesta lição.
Você pode manter pressionada a tecla Shift para selecionar diversos arquivos e importá-los de uma só vez.
4 O painel Library exibe todas as imagens JPEG importadas com seus nomes de arquivo e uma miniatura. Essas imagens agora podem ser usadas no seu documento Flash.
Adicione um item do painel Library ao Stage
Para usar uma imagem importada, arraste-a do painel Library para o Stage.
1 Escolha Window > Library para abrir o painel Library, se ele já não estiver aberto.
2 Selecione o item background.jpg no painel Library.
3 Arraste-o e posicione-o mais ou menos no centro do Stage.
●Nota: Você também pode escolher File > Import
> Import to Stage, Ctrl+R (Windows) ou Command+R (Mac) para importar uma imagem para a Library e inseri-la no Stage, em uma única operação.
Entenda a Timeline
A Timeline fica abaixo do Stage. Como ocorre com filmes, os documentos Flash medem o tempo em frames (quadros). À medida que o filme é reproduzido, o indicador de reprodução, mostrado como uma linha vertical vermelha, avança pelos frames na Timeline. Você pode alterar o conteúdo no Stage para diferentes frames. Para exibir o conteúdo de um frame no Stage, mova o cabeçote de repro- dução para esse frame na Timeline.
Na parte inferior da Timeline, o Flash indica o número do frame selecionado, a velocidade de projeção (quantos frames são reproduzidos por segundo) e o tem- po transcorrido no filme.
Frame atual
Velocidade do frame Tempo transcorrido
A Timeline também contém camadas (layers) que o ajudam a organizar a arte- -final no seu documento. Agora seu projeto tem apenas uma camada, chamada Layer 1. Pense nelas como várias tiras de filme empilhadas uma sobre a outra.
Cada camada contém uma imagem diferente que aparece no Stage, e você pode desenhar e editar objetos em uma camada sem afetar os objetos em outra. As ca- madas são empilhadas na ordem em que se sobrepõem, de modo que os objetos na camada inferior, na Timeline, estão na parte inferior da pilha do Stage. Você pode ocultar, bloquear ou exibir os conteúdos das camadas como linhas, clican- do nos pontos da camada abaixo dos ícones de opções de camada.
Nome da camada
Exibir ou ocultar camada Bloquear ou desbloquear todas as camadas Mostrar todas as camadas como contorno
Renomeie uma camada
Uma boa ideia é separar seu conteúdo em camadas (layers) diferentes e nomeá- -las individualmente para indicar seu conteúdo, assim, você pode localizar com facilidade a camada que precisará mais tarde.
1 Selecione a camada existente na Timeline, chamada Layer 1.
2 Dê um clique duplo no nome da camada para renomeá-la e digite back- ground.
3 Clique fora da caixa para aplicar o novo nome.
4 Clique no ponto abaixo do ícone de cadeado para bloquear a camada. Blo- quear uma camada evita que você faça alterações nela acidentalmente.
O ícone lápis com uma barra diagonal é exibido após o nome da camada in- dicar que você não pode editá-la, porque ela está bloqueada.
Adicione uma camada
Um documento Flash novo contém apenas uma camada, mas você pode adicio- nar quantas forem necessárias. Os objetos nas camadas superiores se sobrepõem aos objetos nas camadas inferiores.
1 Selecione a camada background na Timeline.
2 Escolha Insert > Timeline > Layer. Você também pode clicar no botão New Layer ( ), abaixo da Timeline. Uma nova camada aparece acima da camada background.
3 Dê um clique duplo na nova camada para renomeá-la e digite photo1. Clique fora da caixa para aplicar o novo nome.
Sua Timeline agora tem duas camadas. A camada background contém a foto de fundo e a camada photo1 acima dela está vazia.
4 Selecione a camada photo1.
5 Escolha Window > Library para abrir o painel Library, se ele já não estiver aberto.
6 Arraste o item chamado photo1.jpg da Library para o Stage.
O JPEG da photo1 aparece no Stage sobre o JPEG da camada background.
7 Escolha Insert > Timeline > Layer ou clique no botão New Layer ( ), abaixo da Timeline, para adicionar uma terceira camada.
8 Renomeie a terceira camada como photo2.
Trabalhe com camadas
Se não quiser uma camada, você pode excluí-la selecionando-a e clicando no botão Delete, abaixo da Timeline.
Se quiser reorganizar as camadas, cli- que e arraste qualquer camada a fim de movê-la para uma nova posição na pilha de camadas.
Insira frames
Por enquanto você tem uma foto de fundo e outra sobreposta no Stage, mas a duração da animação inteira é de apenas um frame (quadro). Para criar uma ani- mação mais longa, você deve adicionar mais frames.
1 Selecione o frame 48 na camada background.
2 Escolha Insert > Timeline > Frame (F5). Você também pode clicar com o botão direito do mouse (Windows) ou com a tecla Ctrl pressionada (Mac) e escolher Insert Frame no menu de contexto que aparece.
O Flash adiciona frames à camada background até o ponto selecionado, o frame 48.
3 Selecione o frame 48 na camada photo1.
4 Escolha Insert > Timeline > Frame (F5). Você também pode clicar com o bo- tão direito do mouse ou com a tecla Ctrl pressionada e escolher Insert Frame no menu de contexto.
O Flash adiciona frames à camada photo1 até o ponto selecionado, o frame 48.
5 Selecione o frame 48 na camada photo2 e insira frames nessa camada.
Você agora tem três camadas, todas com 48 frames na Timeline. Como a veloci- dade de projeção do documento Flash é 24 frames por segundo, essa animação dura dois segundos.
Selecione vários frames
Assim como você mantém pressionada a tecla Shift a fim de selecionar vários arquivos na área de trabalho, o mesmo pode ser feito para selecionar vários fra- mes na Timeline do Flash. Se tiver várias camadas e quiser inserir frames em to- das, mantenha a tecla Shift pressionada e clique no ponto em que quer adicionar os frames às camadas. Depois, escolha Insert > Timeline > Frame.
Crie um keyframe
Um keyframe (quadro-chave) assinala uma alteração de conteúdo no Stage. Na Timeline, os keyframes são indicados por um círculo. Um círculo vazio significa que não há nada nessa camada específica, nesse determinado momento. Um cír- culo preenchido com preto significa que há algo nessa camada específica, nesse determinado momento. A camada background, por exemplo, contém um keyfra- me preenchido (círculo preto) no primeiro frame. A camada photo1 também contém um keyframe preenchido no seu primeiro frame. As duas contêm fotos.
A camada photo2, porém, contém um keyframe vazio no primeiro frame, indi- cando que ela está vazia no momento.
Keyframe vazio
Keyframe preenchido
Você vai inserir um keyframe na camada photo2, naquele ponto no tempo em que quer que a próxima foto apareça.
1 Selecione o frame 24 na camada photo2. Quando você seleciona um frame, o Flash exibe o número dele abaixo da Timeline.
2 Escolha Insert > Timeline > Keyframe (F6).
Um novo keyframe, indicado por um círculo vazio, aparece na camada pho- to2, no keyframe 24.
3 Selecione o novo keyframe no frame 24, na camada photo2.
4 Arraste o arquivo photo2.jpg da sua biblioteca para o Stage.
O círculo vazio no frame 24 é preenchido, indicando que agora há uma mu- dança na camada photo2. No frame 24, sua foto é exibida no Stage. Clique e arraste o indicador de reprodução vermelho no topo da Timeline para executar um “scrub” ou para visualizar o que está acontecendo no Stage em qualquer ponto da Timeline. Você verá que a foto de background e a photo1 permanecem no Stage por toda a Timeline, mas a photo2 aparece apenas no frame 24.
Entender os frames e os keyframes é essencial para dominar o Flash. Tenha cer- teza de que você entende a maneira como a camada photo2 contém 48 frames e dois keyframes – um keyframe vazio no frame 1 e um keyframe preenchido no frame 24.
A camada photo2 não tem conteúdo nos frames 1-23
A camada photo2 apresenta conteúdo
nos frames 24-48
Mova um keyframe
Se quiser que sua photo2.jpg apareça antes ou depois, mova o keyframe no qual ela aparece para frente ou para trás na Timeline. Qualquer keyframe pode ser fa- cilmente movido ao longo da Timeline, basta selecioná-lo e arrastá-lo para uma nova posição.
1 Selecione o keyframe no frame 24, na camada photo2.
2 Mova o cursor do mouse para ver um ícone de caixa aparecer perto do cur- sor, o que indica que você pode reposicionar o keyframe.
3 Clique e arraste o keyframe até o frame 12 na camada photo2.
O photo2.jpg agora aparece no Stage, mais cedo, na animação.
Remova keyframes
Se quiser remover um keyframe, não pressione a tecla Delete! Isso excluirá o conteúdo desse keyframe do Stage. Em vez disso, selecione o keyframe e es- colha Modify > Timeline > Clear Keyframe (Shift+F6). O keyframe é removido da Timeline.
Organize as camadas em uma Timeline
Neste ponto, seu arquivo Flash de trabalho tem apenas três camadas: uma ca- mada de fundo, background; uma camada photo1; e uma camada photo2. Você adicionará mais camadas a esse projeto e, com isso, como na maioria dos proje- tos, precisará gerenciar múltiplas camadas. Pastas de camadas ajudam a agrupar camadas relacionadas a fim de manter sua Timeline organizada e gerenciável, tal como as pastas para documentos relacionados no seu computador. Embora criar as pastas possa demorar um pouco, você vai economizar tempo mais tarde porque saberá exatamente onde procurar uma camada específica.
Crie pastas de camadas
Para esse projeto, você vai continuar a adicionar camadas para fotos extras e inseri-las em uma pasta de camadas.
1 Selecione a camada photo2 e clique no botão Add New Layer ( ) na parte inferior da Timeline.
2 Nomeie a camada como photo3.
3 Insira um keyframe no frame 24.
4 Arraste o photo3.jpg da biblioteca até o Stage.
Você tem agora quatro camadas. As três de cima possuem fotos de cenas de Coney Island, que aparecem em diferentes keyframes.
5 Selecione a camada photo3 e clique no botão New Folder ( ) na parte infe- rior da Timeline.
Uma nova pasta de camada aparece acima da camada photo3.
6 Nomeie a pasta como photos.
Adicione camadas às pastas de camada
Agora, você vai adicionar as camadas de foto à pasta de fotos. Ao organizar as ca- madas, lembre que o Flash as exibe na ordem em que elas aparecem na Timeline, com a camada superior na frente e a inferior atrás.
1 Arraste a camada photo1 para a pasta de fotos.
Observe como a linha em negrito indica o destino da sua camada. Quando uma camada é inserida dentro de uma pasta, o nome da camada é recuado.
2 Arraste a camada photo2 para a pasta de fotos.
3 Arraste a camada photo3 para a pasta de fotos.
Todas as camadas de fotos devem estar na pasta de fotos.
Você pode recolher a pasta clicando na seta. Expanda a pasta clicando na seta novamente. Esteja ciente de que, se excluir uma pasta de camadas, você também excluirá todas as camadas dentro dela.
Mude a aparência da Timeline
Você pode ajustar a aparência da Timeline ao seu fluxo de trabalho. Se quiser ver mais camadas, selecione Short no menu pop-up Frame View, no canto superior direito da Timeline. A opção Short diminui a altura das linhas das células do fra- me. As opções Preview e Preview in Context exibem miniaturas dos conteúdos de suas keyframes na Timeline.
Você também pode alterar a largura das células do frame ao selecionar Tiny, Small, Normal, Medium ou Large.
Recortar, Copiar, Colar e Duplicar Camadas
Quando você estiver gerenciando diver- sas camadas e pastas de camadas, pode utilizar os comandos recortar, copiar, colar e duplicar camadas para facilitar o fluxo de trabalho e aumentar sua eficiência.
Todas as propriedades da camada sele- cionada são copiadas e coladas, inclusive seus frames, keyframes, qualquer anima- ção e até o nome e o tipo da camada. As pastas de camadas e seus conteúdos po- dem ser copiados e colados.
Para recortar ou copiar qualquer camada ou pasta de camadas, basta selecionar a camada e clicar nela com o botão direito do mouse ou com a tecla Ctrl pressiona- da. No menu de contexto exibido, feche Cut Layers ou Copy Layers.
Clique na Timeline com o botão direito do mouse ou com a tecla Ctrl pressiona- da e escolha Paste Layers. A camada ou camadas que você recortou ou copiou são coladas na Timeline. Use Duplicate Layers para copiar e colar em uma única operação.
Você também pode recortar, copiar, colar ou duplicar camadas a partir do menu superior do Flash. Escolha Edit > Timeline > e, então, Cut Layers, Copy Layers, Pas- te Layers ou Duplicate Layers.
Utilize o inspetor de propriedades
O inspetor de propriedades (Property inspector) fornece acesso rápido aos atri- butos que você provavelmente usará mais. O que aparece no inspetor de pro- priedades depende daquilo que você selecionou. Por exemplo, se não há nada selecionado, o inspetor de propriedades inclui as opções para um documento comum do Flash, como a alteração das cores ou das dimensões do Stage; se há um objeto selecionado no Stage, o inspetor de propriedades mostra as coordena- das x e y, bem como a largura e a altura, entre outras informações. Você vai usar o inspetor de propriedades para mover suas fotos para o Stage.
Posicione um objeto no Stage
Você vai começar movimentando as fotos com o inspetor de propriedades. Tam- bém vai usar o painel Transform para girar as fotos.
1 No frame 1 da Timeline, selecione o photo1.jpg que você arrastou até o Stage na camada photo1. Um contorno azul indica que o objeto está selecionado.
2 No inspetor de propriedades, digite 50 para o valor de X e 50 para o valor de Y. Pressione Enter/Return para aplicar os valores. Você também pode clicar e arrastar o cursor do mouse nos valores de X e de Y para alterar suas posições.
A foto move-se para o lado esquerdo do Stage.
Os valores de X e de Y são medidos no Stage, a partir do canto superior esquer- do. O valor de X começa em 0 e aumenta para a direita, e o de Y começa em 0 e aumenta para baixo. O ponto de registro para fotos importadas é o canto supe- rior esquerdo.
●Nota: Se o inspetor de propriedades não estiver aberto, escolha Window > Properties ou pressione Ctrl/
Command+F3.
3 Escolha Window > Transform para abrir o painel Transform.
4 No painel Transform, escolha Rotate e digite -12 na caixa Rotate ou clique no valor e arraste para alterar a rotação. Pressione Enter/Return para aplicar o valor.
A foto selecionada no Stage roda 12 graus no sentido anti-horário.
5 Selecione o frame 12 da camada photo2. Agora clique em photo2.jpg, no Stage.
6 Utilize o inspetor de propriedades e o painel Transform para girar e posicio- nar a segunda foto de um jeito interessante. Utilize X=80, Y=50 e Rotate de 6 para contrastá-la mais com a primeira foto.
Trabalhe com painéis
Quase tudo que você faz no Flash envolve um painel. Nesta lição, você usa os painéis Libra- ry e Tools, o inspetor de pro- priedades, o painel Transform, o painel History e a Timeline.
Em lições posteriores, você uti- lizará os painéis Actions, Color, Motion e outros que permitem controlar vários aspectos de seu projeto. Como os painéis são uma parte importante da área de trabalho do Flash, vale a pena saber gerenciá-los.
Para abrir um painel no Flash, escolha o respectivo nome no menu Window. Em alguns casos, talvez você precise es- colher o painel a partir de um submenu, como Window >
Other Panels > History.
Por padrão, o inspetor de pro- priedades, o painel Library e o painel Tools aparecem juntos
no lado direito da tela, a Timeline e o Motion Editor estão na parte inferior, e o Stage está na parte superior. Mas você pode mover um painel para a posição que lhe for mais conveniente.
·Para desencaixar um painel no lado direito da tela, arraste-o pela guia para uma nova posição.
·Para encaixar um painel, arraste-o pela guia até o encaixe numa nova posição na tela. Você pode arrastá-lo para cima, para baixo ou posicioná-lo entre outros painéis. Um realce azul indica onde você pode encaixar um painel.
·Para agrupar um painel com outro, arraste sua guia para dentro da guia do outro painel.
·Para mover um grupo de painéis, arraste o grupo por sua barra cinza na parte superior.
Você também pode exibir a maioria dos painéis como ícones para economizar es- paço e ter acesso rápido. Clique nas setas que apontam para cima e para a direita a fim de recolher e transformar os painéis em ícones. Clique nas setas novamente para expandir os painéis.
7 Selecione o frame 24 na camada photo3. Agora, clique em photo3.jpg, no Stage.
8 Utilize o inspetor de propriedades e o painel Transform para posicionar e girar a terceira foto. Utilize X=120, Y=55 e Rotate −2 para dar a suas fotos aparência diferente.
Utilize o painel Tools
O painel Tools – o longo e estreito painel no lado direito da área de trabalho – contém ferramentas de seleção, de desenho e texto, de pintura e edição, de nave- gação e opções de ferramentas. Você vai utilizar o painel Tools com frequência para alternar as ferramentas projetadas para cada tarefa. Você vai utilizar a ferra- menta Selection, a ferramenta com a seta preta no topo do painel Tools, princi- palmente para selecionar e clicar em itens no Stage ou na Timeline. Ao selecionar uma ferramenta, verifique na área de opções, na parte inferior do painel, outras opções e configurações apropriadas para sua tarefa.
Selecione e utilize uma ferramenta
Ao selecionar uma ferramenta, as opções disponíveis na parte inferior do painel Tools e do inspetor de propriedades mudam. Por exemplo, quando você seleciona a ferramenta Rectangle, o modo Object Drawing e as opções Snap To Objects são exibidos. Ao selecionar a ferramenta Zoom, as opções Enlarge e Reduce aparecem.
O painel Tools contém ferramentas demais para exibir todas de uma só vez. Al- gumas ferramentas estão organizadas em grupos no painel Tools; somente a úl- tima ferramenta selecionada é exibida. Um pequeno triângulo no canto inferior direito do botão da ferramenta indica que há outras nesse grupo. Clique e man-
●Nota: Quando as imagens são redimensionadas ou giradas no Flash, elas podem parecer um pouco distorcidas. Você pode ajustar o foco clicando duas vezes no ícone bitmap do painel da Library. Na caixa de diálogo Bitmap Properties, selecione Allow Smoothing.
tenha pressionado o ícone da ferramenta visível para ver as outras ferramentas disponíveis e, então, selecione uma no menu pop-up.
Você vai usar a ferramenta Text para adicionar um título a sua animação.
1 Selecione a camada de cima na Timeline e clique no botão New Layer.
2 Nomeie a nova camada como text.
3 Bloqueie as outras camadas abaixo dela para que você não adicione aciden- talmente nada a elas.
4 Na Timeline, mova o cabeçote de reprodução para o frame 36 e selecione-o na camada text.
5 Escolha Insert > Timeline > Keyframe (F6) para inserir um novo keyframe no frame 36, na camada text.
Você vai criar um texto para que ele apareça no frame 36, nessa camada.
6 No painel Tools, selecione a ferramenta Text, indicada pelo T maiúsculo.
7 No inspetor de propriedades, escolha Classic Text no menu suspenso. Sele- cione Static Text do menu suspenso inferior.
Classic Text é um modo de adicionar textos simples que não requerem opções sofisticadas, como colunas múltiplas ou exibição ao redor de outros objetos. Static Text é a opção para qualquer texto com propósitos de exibi- ção. Dynamic e Input Text são opções para texto especial com objetivos mais interativos e podem ser controladas com o ActionScript. Você vai aprender mais sobre opções avançadas de texto na Lição 7, “Usando Textos.”
8 Selecione uma fonte e um tamanho no inspetor de propriedades. Seu com- putador talvez não tenha as mesmas fontes que as mostradas nesta lição, mas escolha uma com aparência aproximada.
9 Clique no quadrado colorido, no inspetor de propriedades, para escolher uma cor de texto. Você pode clicar no disco de cores, na parte superior di- reita, para acessar o OS Color Picker ou alterar a porcentagem Alpha, o que determina o nível de transparência.
Cor atual Transparência
Seletor de cores
Opções de cores
10 Certifique-se de que o keyframe vazio no frame 36 da camada de título está selecionado e clique no Stage em que você quer adicionar texto. Você pode dar um clique e começar a digitar ou dar um clique e arrastar para definir a largura do campo de texto.
11 Digite um título que descreva as fotos exibidas no Stage.
Visão geral do painel Tools
O painel Tools contém ferramentas de seleção, de desenho e pintura e de navegação. A área de opções no painel Tools permite modificar a ferramenta se- lecionada. O menu expandido à direita mostra as ferramentas ocultas. Os quadra- dos pretos no menu expandido à direita indicam a ferramenta padrão que apare- ce no painel. As letras maiúsculas entre parênteses indicam os atalhos de teclado para essas ferramentas. Observe como são agrupadas por semelhança de função.
Ferramentas
de seleção Selection (V) Subselection (A)
Ferramentas de texto e desenho
Lasso (L)
Text (T) Line (L)
Pencil (Y)
Deco (U) Ferramentas
de retoque
Eyedropper (I) Eraser (E) Hand (H) Zoom (Z) Ferramentas
de navegação
Stroke Color Área de cores
Fill Color Black and white Swap colors Área de
opções
1 2
3
4
5
6 7
1
2
3
4
5
6
7
Ajustar a Objects Smooth Straighten
12 Feche a ferramenta Text selecionando a ferramenta Selection ( ).
13 Se preferir, utilize o inspetor de propriedades ou o painel Transform para re- posicionar ou girar o texto no Stage. Como alternativa, selecione a ferramen- ta Selection e arraste seu texto a uma nova posição no Stage. Os valores de X e Y no inspetor de propriedades são atualizados à medida que você arrasta o texto no Stage.
14 Sua animação para esta lição está concluída! Compare a Timeline em seu arquivo com a Timeline no arquivo final, 01End.fla.
Desfaça ações no Flash
Em um mundo perfeito, tudo ocorreria como o planejado. Mas às vezes você pre- cisa desfazer uma ou duas ações e começar de novo. Você pode desfazer ações no Flash utilizando o comando Undo ou o painel History.
Para desfazer uma só ação no Flash, escolha Edit > Undo ou pressione Ctrl/
Command+Z. Para refazer uma ação que você desfez, escolha Edit > Redo.
Para desfazer várias ações no Flash, é mais fácil utilizar o painel History, que exibe uma lista de todas as últimas 100 ações que você realizou desde que abriu o documento. Fechar um documento limpa seu histórico. Para abrir o painel His- tory, escolha Window > Other Panels > History.
Por exemplo, se não estiver satisfeito com o texto adicionado, você pode desfazer seu trabalho e retornar seu documento Flash ao estado anterior.
1 Escolha Edit > Undo para desfazer a sua última ação. Escolha o comando Undo várias vezes para voltar até o número de passos listados no painel His- tory. Você pode alterar o número máximo de comandos Undo selecionando Flash > Preferences.
2 Escolha Window > Other Panels > History para abrir o painel History.
3 Arraste o controle deslizante do painel History até a ação anterior ao seu erro. As ações abaixo desse ponto são desativadas no painel History e re- movidas do projeto. Para refazer uma ação, mova o controle deslizante para baixo.
Visualize seu filme
Ao trabalhar em um projeto, uma boa ideia é visualizá-lo com frequência para conferir se você está alcançando o efeito desejado. Para ver rapidamente como uma animação ou filme aparecerá para um espectador, escolha Control > Test Movie > no Flash Professional. Você também pode pressionar Ctrl+Enter ou Command+Return para visualizar seu filme.
1 Escolha Control > Test Movie> no Flash Professional.
O Flash cria um arquivo SWF no mesmo local do seu arquivo FLA e abre e reproduz esse arquivo em uma janela em separado. Um arquivo SWF é o arquivo compactado e publicado que você vai fazer o upload na Internet e executar em um navegador no desktop.
●Nota: Se desfizer ações no painel History e então fizer outras ações, as ações desfeitas não estarão mais disponíveis.
O Flash faz automaticamente um ciclo do seu filme nesse modo de visuali- zação. Se você não quiser que o filme faça um loop, escolha Control > Loop para desmarcar a opção.
2 Feche a janela de visualização.
3 Clique no Stage com a ferramenta Selection. Na parte inferior do inspetor de propriedades, observe que o History SWF exibe e mantém um registro do tamanho do arquivo, data e hora da última publicação do arquivo SWF. Isso o ajudará a acompanhar a evolução de seu trabalho e das revisões feitas.
Modifique o conteúdo e o Stage
Quando você começou esta lição, criou um novo arquivo com o Stage configura- do em 800 por 600 pixels. Contudo, mais tarde seu cliente pode pedir que a ani- mação esteja disponível em diversos tamanhos, para caber em layouts diferentes.
Por exemplo, ele pode querer criar uma versão menor, com uma proporção dife- rente, para um anúncio em banner. Ou, então, ele talvez queira criar uma versão que rode no AIR para dispositivos Android, que têm dimensões específicas.
Por sorte, você tem a possibilidade de modificar o Stage mesmo após todos os conteúdos terem sido inseridos. Quando você altera as dimensões do Stage, o Flash disponibiliza a opção de redimensionar o conteúdo com o Stage, encolhen- do ou aumentando todo o seu conteúdo respeitando as proporções originais.
Redimensione o Stage e o Content
Você vai criar outra versão deste projeto animado em dimensões diferentes do Stage.
1 Na parte inferior do inspetor de propriedades, observe que as dimensões do Stage estão configuradas em 800 × 600 pixels. Clique no botão Edit ao lado do tamanho do Stage (o ícone da chave-inglesa).
A caixa de diálogo Document Settings aparece.
2 Nas caixas Width e Height, digite as novas dimensões em pixels. Coloque 400 em Width (largura) e 300 em Height (altura).
Observe que, quando você insere novos valores para Width e Height, a opção de redimensionar o conteúdo no Stage é habilitada.
3 Marque a opção Scale content with stage.
4 Clique em OK.
O Flash altera as dimensões do Stage e automaticamente redimensiona todo o conteúdo. Se as novas dimensões não são proporcionais ao tamanho ori- ginal, o Flash redimensiona tudo, de modo a maximizar o conteúdo respei- tando a proporção. Isso significa que se o seu novo Stage é mais largo que o original, uma parte do espaço do Stage se expande à direita. Se o seu novo Stage é mais alto que o original, uma parte do espaço do Stage se expande na parte inferior.
5 Escolha File > Save As e Flash CS6 Document em Format. Nomeie o arquivo como file01_workingcopy_resized.fla.
Agora você tem dois arquivos Flash idênticos em conteúdo, mas com dife- rentes dimensões de Stage. Feche esse arquivo e abra 01_workingcopy.fla outra vez para prosseguir com a lição.
Salve seu filme
O mantra da produção multimídia é “salve logo, salve sempre”. Aplicativos, sis- temas operacionais e hardware são propensos a falhas e travam nos momentos mais inesperados e inconvenientes. Você deve sempre salvar seu filme a interva- los regulares para garantir que, se ocorrer uma falha, você não perderá uma parte significativa do trabalho.
O Flash pode ajudá-lo contra os riscos de perder trabalho. A ferramenta Auto- -Save salva seu arquivo automaticamente a intervalos predefinidos, e a ferramen- ta Auto-Recovery cria um arquivo de backup em caso de falha no sistema.
Use Auto-Save
A ferramenta Auto-Save, quando habilitada, salva seu arquivo Flash automatica- mente a intervalos regulares que você mesmo define. Você pode especificar que o Auto-Save salve seu arquivo Flash a intervalos que variam de 1 a 1440 minutos (24 horas).
1 Na parte inferior do inspetor de propriedades, clique no botão Edit ao lado do tamanho do Stage (o ícone da chave-inglesa).
A caixa de diálogo Document Settings aparece.
2 Marque a opção Auto-Save e digite um intervalo apropriado para salvar o trabalho.
3 Clique em OK.
Agora você pode ficar tranquilo. Seu arquivo Flash existente será substituído pelo documento aberto a cada intervalo predeterminado. Um documento aberto que contenha mudanças não salvas é sinalizado com um asterisco no final do nome de arquivo, no alto da janela do documento.
Use Auto-Recovery para fazer backup
A ferramenta Auto-Recovery funciona de modo um pouco diferente da ferra- menta Auto-Save. A ferramenta Auto-Recovery é um conjunto de preferências para todos os documentos do Flash, ao passo que a ferramenta Auto-Save é defi- nida para um documento específico por vez.
A ferramenta Auto-Recovery salva um arquivo de backup para que, se houver uma falha no sistema, você possa acessar um arquivo de autorrecuperação.
1 Escolha Flash > Preferences (Mac) ou Edit > Preferences (Windows).
A caixa de diálogo Preferences é exibida.
2 Escolha a categoria General na coluna à esquerda.
3 Selecione a opção Auto-Recovery e digite um período de tempo (em minu- tos) como intervalo para o Flash criar um arquivo de backup.
4 Clique em OK.
O Flash cria um novo arquivo no mesmo local em que está seu arquivo FLA, com RECOVER_ no início do nome do arquivo.
Este arquivo existe enquanto seu documento está aberto. Quando você fecha o documento ou sai do Flash com segurança, este arquivo é excluído.
Salve um documento XFL
Você já salvou seu filme Flash como arquivo FLA, no entanto existe a opção de salvá-lo em um formato não compactado, conhecido como formato XFL. O for- mato XFL, na verdade, é uma pasta de arquivos, não um único documento. Ele exibe os conteúdos de seu filme Flash de maneira a permitir que outros desen- volvedores editem seu arquivo ou administrem suas características com facili- dade, sem precisar abrir o filme no aplicativo Flash. Por exemplo, todas as fotos importadas de seu painel Library aparecem em uma pasta Library no formato XFL. Você pode editar a biblioteca de fotos ou acrescentar novas fotos a ela. O Flash efetua as substituições no filme automaticamente.
1 Escolha File > Save As.
2 Nomeie o arquivo como 01_workingcopy.xfl e selecione Flash CS6 Uncom- pressed Document (*.xfl). Clique em Save.
O Flash cria uma pasta nomeada como 01_workingcopy, contendo todos os arquivos de seu filme Flash.
3 Selecione o documento Flash escolhendo File > Close.
Modifique um documento XFL
Nesta etapa, você aprenderá a modificar a pasta Library do documento XFL para efetuar as alterações em seu filme Flash.
1 Abra a pasta LIBRARY na pasta 01_workingcopy.
A pasta contém todas as fotos que você importou para o seu filme Flash.
2 Selecione o arquivo photo3.jpg e o exclua.
3 Arraste o arquivo photo4.jpg da pasta 01Start para a pasta LIBRARY na pas- ta 01_workingcopy. Renomeie-o como photo3.jpg.
A substituição de photo3.jpg por uma nova imagem na pasta LIBRARY efe- tua essa alteração automaticamente no filme Flash.
4 Para abrir um documento XFL, dê um clique duplo no arquivo xfl.
A última imagem na keyframe 24 de sua Timeline é substituída pela imagem photo4.jpg com que você fez a substituição.
Publique seu filme
Quando estiver pronto para compartilhar seu filme, publique-o pelo Flash. Para alguns projetos, isso equivale a publicar um arquivo HTML e um arquivo SWF na Internet para que seu público consiga visualizá-los em um navegador no desktop. Para outros, essa ação talvez envolva publicar um arquivo de aplicativo para seu público baixar e visualizar em um dispositivo móvel. O Flash disponi- biliza opções de publicação em diversas plataformas. Você aprenderá mais sobre opções de publicação na Lição 10, “Publicando Documentos Flash”.
Para esta lição, você vai criar um arquivo HTML e um arquivo SWF. O arquivo SWF é seu filme Flash final e o arquivo HTML informa o navegador Web sobre como exibir o arquivo SWF. Você precisa carregar os dois arquivos na mesma pasta, no seu servidor Web. Sempre teste o filme depois de carregá-lo para veri- ficar se ele funciona adequadamente.
1 Escolha File > Publish Settings ou clique no botão Publish Settings, na seção Profile do inspetor de propriedades.
A caixa de diálogo Publish Settings aparece. Os formatos de saída são exibi- dos à esquerda, enquanto suas configurações são mostradas à direita.
2 Marque as opções Flash e HTML Wrapper, se ainda não estiverem marcadas.
3 Selecione HTML Wrapper.
As opções para o arquivo HTML determinam como o arquivo SWF é exibi- do no navegador. Nesta lição, mantenha todas as configurações padrão. Se a caixa Loop estiver selecionada, desmarque-a.
4 Clique em Publish no final da caixa de diálogo Publish Settings.
5 Clique em OK para fechar a caixa de diálogo.
6 Navegue até a pasta Lesson01/01Start para ver os arquivos Flash criados.
Localize os recursos para usar o Flash
Para informações completas e atualizadas sobre como utilizar painéis, ferramen- tas e outros recursos do aplicativo Flash, visite o site da Adobe. Escolha Help >
Flash Support Center.
Uma vez conectado ao site Adobe Flash Professional Help, você poderá pesqui- sar por respostas nos documentos de suporte, bem como encontrar links para tutoriais úteis, fóruns, guias de produtos, atualizações e muito mais.
Fique à vontade para pesquisar na Internet por recursos adicionais, além do site da Adobe. Inúmeros sites, blogs e fóruns dedicados a usuários do Flash, do ini- ciante ao avançado, estão disponíveis na rede.
●Nota: Se o Flash detectar que você não está conectado à Internet quando o aplicativo foi inicializado, escolha Help > Flash Help para abrir as páginas Help HTML instaladas com o Flash. Para informações adicionais atualizadas, visualize os arquivos Help online ou faça o download do PDF para referência.
Verifique se há atualizações
A Adobe fornece atualizações para seu Creative Suite periodicamente. Você pode obter essas atualizações por meio do Adobe Updater, desde que tenha uma conexão ativa com a Internet.
1 No Flash, escolha Help > Updates.
O Adobe Application Manager verifica automaticamente as atualizações dis- poníveis para seu software Adobe.
2 Na caixa de diálogo Adobe Application Manager, selecione as atualizações que você quer instalar e clique em Download And Install Updates a fim de instalá-las.
●Nota: Para configurar suas preferências para futuras atualizações, escolha Help>Updates e então clique em Preferences no Adobe Application Manager. Selecione o aplicativo para o qual você quer que o Adobe Application Manager verifique as atualizações disponíveis. Clique em OK para aceitar as novas configurações.
Perguntas de revisão
1 O que é o Stage?
2 Qual é a diferença entre um frame e um keyframe?
3 O que é uma ferramenta oculta e como ela é acessada?
4 Identifique dois métodos para desfazer ações no Flash e os descreva.
5 Como localizar respostas a perguntas que você tem sobre o Flash?
Respostas
1 O Stage é a área que os espectadores veem quando um filme é reproduzido.
Ele contém o texto, as imagens e o vídeo que aparecem na tela. Objetos que você armazena no Pasteboard (extensão da área de trabalho), fora do Stage, não aparecem no filme.
2 Um frame é uma medida do tempo na Timeline. Um keyframe é represen- tado na Timeline por um círculo e indica uma modificação no conteúdo, no Stage.
3 Como há ferramentas demais para serem todas exibidas de uma só vez no painel Tools, algumas são agrupadas e somente uma no grupo é exibida. (A ferramenta utilizada mais recentemente é a única exibida.) Triângulos pe- quenos aparecem nos ícones de ferramenta para indicar que ferramentas ocultas estão disponíveis. Para selecionar uma ferramenta oculta, clique e mantenha pressionado o ícone da ferramenta mostrada e selecione a ferra- menta oculta no menu.
4 Você pode desfazer ações no Flash utilizando o comando Undo ou o painel History. Para desfazer uma só ação por vez, escolha Edit > Undo. Para desfa- zer várias ações de uma vez, arraste o controle deslizante no painel History.
5 Escolha Help > Flash Support Center para navegar ou pesquisar por infor- mações sobre como utilizar o Flash CS6 e o ActionScript 3.0. Utilize esse site como ponto de partida para tutoriais úteis, dicas e outros recursos para usuários do Flash.
