Introdução a Programação

(1)

Sistema Universidade

Aberta do Brasil - UAB | IF Sul-rio-grandense

1. Conceitos Iniciais

Prezado(a) Aluno(a),

Antes de começar a conversar sobre Programação para Animação Web, gostaria de lhe apresentar alguns sites. Clique nos links abaixo para visualizar os sites e explore cada área deles. Ressalto que você não estará observan-do o conteúobservan-do, mas basicamente o visual. Debata com os seus colegas no fórum Conceitos Iniciais sobre estes sites, o que eles possuem em comum, as facilidades e as dificuldades de navegação.

http://www.alejandro.com.br/home.htm http://www.fullpowerenergy.com.br/index.htm http://www.magicbusiness.com.br/ http://www.tbwahakuhodo.co.jp/ http://www.porliniers.com/ http://waterlife.nfb.ca/

1.1 Animação

Com a grande quantidade de sites criados diariamente, é fundamental que se consiga prender a atenção do usu-ário. Um dos grandes recursos para tornar a página atrativa e interessante é a animação.

Você sabe o que significa animação? A palavra animação é baseada no verbo latino animare, que significa dar vida e nos remete ao conceito de tempo. Percebemos a passagem do tempo observando as alterações no mundo em que vivemos.

Quando você visualiza uma sequência de imagens em sucessões bem rápidas, ocorre um fenômeno chamado persistência retiniana, quando mesmo após a luz da última imagem ser removida os impulsos continuam sendo enviados pela retina, assim teremos a ilusão de movimento.

Com o cinema, as imagens adquiriram o desejado movimento. O filme consiste em uma série de fotogramas (imagens isoladas em um pedaço do filme) feitos em um intervalo de tempo muito pequeno (normalmente 1/24 segundos). Ao projetar estes fotogramas em uma tela, a persistência retiniana proporciona a ilusão do movi-mento.

Nesta disciplina, você irá conhecer o programa Flash desenvolvido para a criação de animações interativas para a Web. A velocidade e a tecnologia Streaming (o arquivo de animação é baixado progressivamente ao mesmo tempo em que é assistida pelo usuário) faz do Flash um programa adequado para a Web, e além disso, o progra-ma permite interação entre as aniprogra-mações através de uprogra-ma linguagem de prograprogra-mação chaprogra-mada Action Script.2.

Instalando o Flash CS5

Se antes de comprar você quiser conhecer e experimentar o Flash CS5, acesse o site http://www.adobe.com/ go/tryflash_br para baixar uma versão do aplicativo válida por 30 dias. Para isso, ao abrir o site, clique no botão “Faça download agora”.

Introdução A ProgrAmAção

PArA AnImAção web

(2)

Linguagem de Programação para Animação Web | Unidade A

Se você tiver uma conta Adobe basta colocar a sua ID e senha e clicar no botão “entrar”. Caso contrário é neces-sário um rápido cadastro clicando no botão “Crie uma conta Adobe”.

Após colocar a sua ID e Senha e clicar no botão “entrar”, abrirá uma nova janela mostrando o Download de dois arquivos.

(3)

No final aparecerá um botão “instalar agora” que ao clicar irá começar a instalação do Flash CS5.

Clique no botão “Sim” para abrir o arquivo instalador.

(4)

Após o término da extração localize a pasta que você informou e dê um duplo clique no arquivo.

Na janela que se abrirá, você deverá aceitar o Contrato de licença de software para continuar a instalação. Clique no botão “aCeiTaR”.

(5)

Na próxima tela escolha a opção “Instale como uma versão de avaliação” e selecione o idioma desejado. Clique no botão “aVanÇaR”.

Na próxima tela você poderá escolher alguns componentes para instalar junto com o Flash CS5. Clique no botão “inSTaLaR”.

(6)

(7)

Após o término da instalação você verá a janela abaixo. Para iniciar o Flash CS5 clique no botão “Adobe Flash Pro CS5” ou clique no botão “COnCLUÍdO” para encerrar a instalação.

Pronto, você tem agora a ferramenta principal que será utilizada durante toda nossa disciplina. Na seqüência será apresentada.

(8)

3. A Interface do Flash CS5

Para abrir o Flash CS5 clique no botão “iniciar” e depois no Adobe Flash Professional CS5. Ao abri-lo você verá a tela de entrada.

A tela de entrada é dividida em áreas importantes:

• Criar a partir do modelo: você terá acesso a modelos prontos de aplicações Flash. • Abrir um item recente: aqui ficam listados os últimos documentos que você abriu. • Criar novo: permite criar novos documentos, escolhendo na lista um tipo de projeto. • Aprender: você será redirecionado para uma página web com informações sobre o Flash.

A interface do programa Flash é composta por três partes principais: O palco, a linha do tempo e a caixa de ferramentas. Assim:

• O palco (stage) é um espaço no qual são realizadas as tarefas de edição de gráfico.

• A linha do tempo (timeline) é onde são organizados os elementos no palco. É composta por camadas (a direita) e organização dos fotogramas (a esquerda).

• A barra de ferramentas disponibiliza as ferramentas para edição gráfica.

Ainda encontramos na interface, a barra de menu que contém todos os recursos presentes no aplicativo e o painel propriedades onde são exibidas as propriedades de um elemento, frame ou objeto. Vamos conhecer com mais detalhes a interface do Flash nas próximas unidades.

(9)

Palco

O retângulo branco no centro da janela do Flash é chamado de palco (Stage), que é a área em que o filme será exibido. Nele serão colocados os conteúdos gráficos que farão parte do filme como, por exemplo: textos, ima-gens, vídeos.Para facilitar a inserção de elementos no palco, podemos utilizar as réguas e as grades que você irá encontrar no menu exibir.

A área cinza fora do palco é utilizada para colocar elementos que não estarão visíveis para a audiência.

Podemos redimensionar o palco para que ele se ajuste à janela do aplicativo. Você encontrará esta opção no menu Exibir, na opção ampliação e ajustar a Janela.

Alterando as propriedades do palco

(10)

Linguagem de Programação para Animação Web | Unidade A Altere o tamanho do palco para 600 px de largura e 300 px de altura. Para isso clique no botão editar ao lado do tamanho 550 x 400 px. Altere também a cor do palco. Basta clicar no retângulo branco e escolher a nova cor.

entendendo a linha do tempo

A linha do tempo (timeline) fica abaixo do palco. Ela controla e organiza o conteúdo de um documento com o passar do tempo em camadas e quadros.

Na parte inferior da linha do tempo, o Flash nos mostra o número do frame selecionado (1), a velocidade de projeção em frames por segundo (24,00 fps) e o tempo transcorrido do filme (0,0s).

Camadas

A linha do tempo também possui camadas, como se fossem tiras de filmes empilhadas, sendo possível desenhar e editar objetos em uma camada sem comprometer a outra. Estas camadas são empilhadas na ordem que apa-recem na linha do tempo. No exemplo, foram criadas 3 camadas onde o retângulo vermelho e o círculo amarelo pertencem a Camada 1, o quadrado verde pertence a Camada 2 e o retângulo azul pertence a camada 3. Para criar uma camada, basta clicar no botão inferior à esquerda (nova camada). Podemos ainda mostrar ou ocultar todas as camadas clicando no “olho” (mostrar ou ocultar todas as camadas), ou individualmente clicando nos pontos abaixo do botão. Para bloquear uma camada clique no ponto abaixo do cadeado, evitando fazer altera-ções acidentalmente.

Inserindo quadros (frames)

Para criar uma animação é necessário criar vários quadros (frames). Para isso basta selecionar o último quadro e pressionar a tecla F5. O Flash adiciona os frames até o quadro desejado. No exemplo foi escolhido como último

(11)

CrIAndo QuAdroS-CHAVe (KeYFrAme).

Um quadro-chave indica uma alteração no conteúdo do palco. Os quadros-chave são indicados por um círculo que será branco quando não houver nada neste quadro onde ele foi inserido e preto quando houver algum conteúdo neste quadro. Para adicionar um quadro chave basta clicar com o botão direito do mouse no quadro desejado e escolher inserir quadro-chave.

4. Abrindo Arquivos no Flash CS5

Para abrir um arquivo no Flash CS5 você deverá clicar no botão “abrir”, disponível na tela de entrada, ou através do menu “arquivo” na opção “abrir”. Antes de abrir os exemplos localize na Biblioteca o arquivo exemplos_flash.rar e descompacte-o em uma pasta a sua escolha. Clicando no Abrir, localize a pasta Carro e abra o arquivo VitrineCarro.fla. Para testar e executar o filme pressione as teclas Ctrl + enter. Faça o mesmo com os outros dois exemplos que estão nas pastas puzzle e Znax. Quando testamos um filme criamos um arquivo SWF (Shockwave Flash) que é um formato de aplicações Web. Atualmente, é compatível com a maioria dos navega-dores Web por meio de plugins.

Na Unidade B você irá conhecer a barra de ferramentas onde irá trabalhar com textos no Flash utilizando a fer-ramenta Texto (Text), além de conhecer inúmeras ferfer-ramentas de desenho. Até lá!