1 CONHECENDO O FLASH. Visão geral da lição

Transcrição

1 1 CONHECENDO O FLASH 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.

2 No Flash, o Stage é onde a ação acontece; a Timeline, ou linha do tempo, organiza frames e camadas; e os outros painéis permitem editar e controlar sua criação.

3 20 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book Inicie o Flash e abra um arquivo 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. 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 > Programas > Adobe Flash CS6. No Mac OS, dê um clique em Adobe Flash Professional 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.

4 LIÇÃO 1 Conhecendo o Flash 21 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 trabalhar com o ActionScript, mas ainda precisa escolher com qual versão seu arquivo é compatível. Escolher ActionScript 3.0 permite criar um novo documento 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.

5 22 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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. 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 Width e 600 para Height. Mantenha Ruler Units em Pixels. Deixe a velocidade dos Frames e a cor de Background do Stage nas configuraçõ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.

6 LIÇÃO 1 Conhecendo o Flash 23 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 atender à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 qualquer momento.

7 24 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 2 Se você deslocou alguns dos painéis e deseja retornar a uma das áreas de trabalho 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 novamente 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 conté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.

8 LIÇÃO 1 Conhecendo o Flash 25 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 pixels, as quais você define ao criar um novo documento.

9 26 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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 Nota: Você aprenderá mais sobre símbolos na Lição 3, Criando e Editando Símbolos. 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ência 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 ferramentas 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 Library, selecione o arquivo background.jpg na pasta Lesson01/01Start e clique em Open.

10 LIÇÃO 1 Conhecendo o Flash 27 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.

11 28 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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 reproduçã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 tempo 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 camadas 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, clicando nos pontos da camada abaixo dos ícones de opções de camada. Exibir ou ocultar camada Bloquear ou desbloquear todas as camadas Nome da camada 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.

12 LIÇÃO 1 Conhecendo o Flash 29 1 Selecione a camada existente na Timeline, chamada Layer 1. 2 Dê um clique duplo no nome da camada para renomeá-la e digite background. 3 Clique fora da caixa para aplicar o novo nome. 4 Clique no ponto abaixo do ícone de cadeado para bloquear a camada. Bloquear 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 indicar 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 adicionar 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.

13 30 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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, clique e arraste qualquer camada a fim de movê-la para uma nova posição na pilha de camadas.

14 LIÇÃO 1 Conhecendo o Flash 31 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 animaçã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 Selecione o frame 48 na camada photo1. 4 Escolha Insert > Timeline > Frame (F5). Você também pode clicar com o botã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 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 velocidade de projeção do documento Flash é 24 frames por segundo, essa animação dura dois segundos.

15 32 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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 frames na Timeline do Flash. Se tiver várias camadas e quiser inserir frames em todas, 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írculo preenchido com preto significa que há algo nessa camada específica, nesse determinado momento. A camada background, por exemplo, contém um keyframe 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, indicando 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.

16 LIÇÃO 1 Conhecendo o Flash 33 2 Escolha Insert > Timeline > Keyframe (F6). Um novo keyframe, indicado por um círculo vazio, aparece na camada photo2, no keyframe 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 mudanç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.

17 34 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book Entender os frames e os keyframes é essencial para dominar o Flash. Tenha certeza 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 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 facilmente 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 cursor, 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 escolha Modify > Timeline > Clear Keyframe (Shift+F6). O keyframe é removido da Timeline.

18 LIÇÃO 1 Conhecendo o Flash 35 Organize as camadas em uma Timeline Neste ponto, seu arquivo Flash de trabalho tem apenas três camadas: uma camada de fundo, background; uma camada photo1; e uma camada photo2. Você adicionará mais camadas a esse projeto e, com isso, como na maioria dos projetos, 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 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.

19 36 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 5 Selecione a camada photo3 e clique no botão New Folder ( ) na parte inferior 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 camadas, 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.

20 LIÇÃO 1 Conhecendo o Flash 37 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 frame. 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 diversas 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 selecionada 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 podem 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 pressionada. 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 pressionada 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, Paste Layers ou Duplicate Layers.

21 38 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book Utilize o inspetor de propriedades O inspetor de propriedades (Property inspector) fornece acesso rápido aos atributos que você provavelmente usará mais. O que aparece no inspetor de propriedades 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 coordenadas 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. Nota: Se o inspetor de propriedades não estiver aberto, escolha Window > Properties ou pressione Ctrl/ Command+F3. Posicione um objeto no Stage Você vai começar movimentando as fotos com o inspetor de propriedades. També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 esquerdo. 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 superior esquerdo.

22 LIÇÃO 1 Conhecendo o Flash 39 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 posicionar a segunda foto de um jeito interessante. Utilize X=80, Y=50 e Rotate de 6 para contrastá-la mais com a primeira foto.

23 40 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book Trabalhe com painéis Quase tudo que você faz no Flash envolve um painel. Nesta lição, você usa os painéis Library e Tools, o inspetor de propriedades, o painel Transform, o painel History e a Timeline. Em lições posteriores, você utilizará 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 escolher o painel a partir de um submenu, como Window > Other Panels > History. Por padrão, o inspetor de propriedades, 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 espaç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.

24 LIÇÃO 1 Conhecendo o Flash 41 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. 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. 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 navegaçã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 ferramenta Selection, a ferramenta com a seta preta no topo do painel Tools, principalmente 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. Algumas ferramentas estão organizadas em grupos no painel Tools; somente a última 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-

25 42 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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 acidentalmente 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. Selecione 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 computador 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 direita, para acessar o OS Color Picker ou alterar a porcentagem Alpha, o que determina o nível de transparência.

26 LIÇÃO 1 Conhecendo o Flash 43 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.

27 44 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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 selecionada. O menu expandido à direita mostra as ferramentas ocultas. Os quadrados pretos no menu expandido à direita indicam a ferramenta padrão que aparece 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 Selection (V) de seleção Subselection (A) Lasso (L) Ferramentas de texto e desenho Text (T) Ferramentas de retoque Ferramentas de navegação Line (L) Pencil (Y) Deco (U) Eyedropper (I) Eraser (E) Hand (H) Zoom (Z) Área de cores Stroke Color Área de opções Fill Color Black and white Swap colors Ajustar a Objects Smooth Straighten

28 LIÇÃO 1 Conhecendo o Flash Feche a ferramenta Text selecionando a ferramenta Selection ( ). 13 Se preferir, utilize o inspetor de propriedades ou o painel Transform para reposicionar ou girar o texto no Stage. Como alternativa, selecione a ferramenta 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ê precisa 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 History, escolha Window > Other Panels > History.

29 46 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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 History. 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. 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. 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 removidas 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.

30 LIÇÃO 1 Conhecendo o Flash O Flash faz automaticamente um ciclo do seu filme nesse modo de visualizaçã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. 47

31 48 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book Modifique o conteúdo e o Stage Quando você começou esta lição, criou um novo arquivo com o Stage configurado em 800 por 600 pixels. Contudo, mais tarde seu cliente pode pedir que a animaçã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 diferente, 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, encolhendo 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 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.

32 LIÇÃO 1 Conhecendo o Flash 49 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 original, o Flash redimensiona tudo, de modo a maximizar o conteúdo respeitando 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 diferentes 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, sistemas operacionais e hardware são propensos a falhas e travam nos momentos mais inesperados e inconvenientes. Você deve sempre salvar seu filme a intervalos 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 ferramenta Auto-Recovery cria um arquivo de backup em caso de falha no sistema.

33 50 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book Use Auto-Save A ferramenta Auto-Save, quando habilitada, salva seu arquivo Flash automaticamente 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 ferramenta Auto-Save. A ferramenta Auto-Recovery é um conjunto de preferências para todos os documentos do Flash, ao passo que a ferramenta Auto-Save é definida 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).

34 LIÇÃO 1 Conhecendo o Flash 51 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 minutos) 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.

35 52 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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 formato 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 desenvolvedores editem seu arquivo ou administrem suas características com facilidade, 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 Uncompressed 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.

36 LIÇÃO 1 Conhecendo o Flash 53 3 Arraste o arquivo photo4.jpg da pasta 01Start para a pasta LIBRARY na pasta 01_workingcopy. Renomeie-o como photo3.jpg. A substituição de photo3.jpg por uma nova imagem na pasta LIBRARY efetua 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.

37 54 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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 disponibiliza 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 verificar 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 exibidos à esquerda, enquanto suas configurações são mostradas à direita.

38 LIÇÃO 1 Conhecendo o Flash 55 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 é exibido 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, ferramentas 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á pesquisar 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 iniciante 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.

39 56 ADOBE FLASH PROFESSIONAL CS6 Classroom in a Book 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. 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 disponí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.

40 LIÇÃO 1 Conhecendo o Flash 57 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 é representado 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 pequenos 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 ferramenta 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 desfazer 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 informaçõ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.