Adobe flash cs5

Responsvel pelo Contedo:

Prof. Ms. Douglas Almendro

Reviso Textual:

Profa. Esp. Vera Ldia de S Cicaroni

5

Introduo ao flash

Surfando na Internet

Provedor

Histria da Internet

Nesta unidade trabalharemos o seguinte tpico de contedo:

Conceitos Iniciais: uma viso geral de conceitos bsicos de

internet, tecnologias atuais e emergentes para desenvolvimento de

aplicaes para internet e princpios bsicos de aplicaes

desenvolvidas em Flash.

Conhecendo o Ambiente de

Desenvolvimento Flash CS5

Vetor X Bitmap

Barra de Ferramentas

6

Hoje veremos alguns assuntos introdutrios da nossa disciplina e aproveito para

apresentar-lhes alguns conceitos que utilizaremos na estrutura de todas as nossas unidades.

Para obter um bom aproveitamento com o estudo desta unidade, vamos conferir sua

estrutura:

Contedo Terico: neste link, voc encontrar o material principal de estudos na forma de

texto escrito.

Atividade de Sistematizao: os exerccios disponibilizados so de autocorreo e visam a

que voc pratique o que aprendeu na disciplina e que identifique os pontos aos quais precisa

prestar mais ateno ou sobre os quais necessita pedir esclarecimentos a seu tutor. Alm disso,

as notas atribudas aos exerccios sero parte de sua mdia final na disciplina.

Atividade de Aprofundamento: uma atividade dissertativa.

Material Complementar: nestes links, voc poder ampliar seus conhecimentos.

Videoaula: nestes links, sero apresentadas algumas ferramentas na prtica e tambm a

resoluo de alguns exerccios de forma prtica.

Lembramos voc da importncia de realizar todas as atividades propostas dentro do

prazo estabelecido para cada Unidade, pois, dessa forma, voc evitar que o contedo se

acumule e que voc tenha problemas ao final do semestre.

Uma ltima recomendao: caso tenha problemas para acessar algum item da

disciplina ou dvidas com relao ao contedo, no deixe de entrar em contato com seu

professor tutor atravs do boto mensagens.

7

Certamente vocs esto ansiosos por saber do que trataremos nesta disciplina! O nome

Aplicaes para Internet tem por objetivo aplicar, na prtica, a criao de contedos e

aplicativos que utilizam textos, grficos, animaes e som para a Internet, com a utilizao da

ferramenta Adobe Flash CS5.5. Para isso, iremos, neste momento, introduzir o assunto, dando

bastante nfase aos conceitos tericos usados nesta rea para, em um segundo momento,

colocarmos em prtica, atravs de ferramentas, os conceitos aprendidos nesta unidade.

Bons estudos!

8

Nesta unidade trataremos do conceito de internet, da importncia da multimdia sobre

ela, e da manipulao inicial da ferramenta Flash.

A Internet comeou no incio de 1969 com o nome ARPANET (USA). Composta de

quatro computadores, tinha como finalidade demonstrar as potencialidades na construo de

redes usando computadores dispersos em uma grande rea. Em 1973, 50 universidades e

instituies militares tinham conexes.

Hoje uma teia de redes diferentes que se comunicam entre si e que so mantidas por

organizaes comerciais e governamentais. Mas, por mais estranho que parea, no h um

nico proprietrio que realmente possua a Internet. Segundo a Wikipdia, a Internet o

maior conglomerado de redes de comunicaes em escala mundial e dispe de milhes de

computadores interligados.

9

A comunicao entre eles d-se pelo protocolo de comunicao TCP/IP, que permite o

acesso a informaes e a todo e qualquer tipo de dados, desde que seja digital, percorridos

entre eles. Alm disso, ela pode transportar diversos tipos de recursos e servios, que variam

entre documentos, e-mails, servios de comunicao instantnea, compartilhamento de

arquivos, etc.

Fornecedor de acesso Internet a traduo para IAP (Internet access provider). IAP

outra maneira pela qual nos referimos ao ISP (Internet Service Provider), cuja a traduo

"Provedor de servios de Internet".

Como dissemos antes, voc se conecta Internet usando um provedor de Internet. O

ISP fornece um dispositivo, chamado modem. Um modem a abreviatura de

modulador/desmodulador e, simplesmente, converte os sinais digitais para analgico e vice-

versa. o dispositivo que se conecta ao ISP e permite que voc conecte seus prprios

dispositivos em casa.

A estrutura da Internet, portanto, esta: voc, de sua casa, empresa ou escola, liga-se a

um provedor; o provedor liga-se a um provedor maior (companhia de telecomunicaes);

este, por sua vez, mantm as principais ligaes da Internet, permitindo que voc acesse

computadores e se comunique com qualquer pessoa do mundo.

Vamos entender qual o caminho que a Internet faz at chegar sua casa. O caminho

passa por quatro passos principais, sempre identificados por um endereo de IP:

backbone;

provedor de acesso;

provedor de servio e

usurio final.

Backbones

So pontos das redes que compem o ncleo das redes de Internet. So pontos-chave

da Internet, que distribuem pelas redes as informaes baseadas na tecnologia TCP/IP.

Provedor de acesso

A partir dos backbones, a Internet passa para uma nova etapa, quando o seu sinal

chega aos provedores de acesso - as empresas que contratam o sinal de backbones para

distribuir aos seus usurios.

10

Provedor de servio

Esses dados de Internet que trafegaro na rede necessitam de um meio para o seu

transporte at os usurios, e so as empresas provedoras de servio as responsveis por esse

papel. Essas empresas recebem os dados do provedor de acesso e distribuem aos usurios por

variados meios, seja por linha telefnica, seja por fibra tica ou via rdio (por tecnologia sem

fio).

Usurio final

Ao chegar ao usurio final, o sinal de Internet passa a repetir todo o caminho

novamente, porm na forma inversa, j que voc, como usurio final, tambm envia sinais -

com as suas requisies - para a Internet.

Os dados enviados pelos usurios so transportados pelo provedor de servio,

enviados para o provedor de acesso e chegam novamente ao backbone. A partir do

backbone, o processo segue novamente o mesmo caminho inicial at o prximo destino, que

pode ser um arquivo a ser baixado.

Ao acessar o site do arquivo a ser baixado, ningum sabe o endereo IP completo da

mquina que hospeda esses arquivos ou sites. O que conhecemos apenas o endereo

www. Estes endereos de sites so baseados na tecnologia DNS, que, basicamente, cria

atalhos entre os endereos www e endereos IP. Assim, no necessrio que voc navegue

decorando endereos do tipo "192.168.000.03" para acessar o seu site preferido. Basta

conhecer o endereo www.

Vale a pena lembrar que, nesses processos, podem existir outros servidores

intermedirios com seus respectivos endereos IP, j que um provedor de acesso ou um

backbone pode distribuir o sinal por trs servidores diferentes, por exemplo.

At os anos 2000, a internet tinha apenas o papel informativo, pginas estticas.

Aps o ano de 2000, a internet passou a ter uma nova cara; passamos a ter uma internet mais

formativa, comunicativa, etc. e acessvel a, praticamente, qualquer dispositivo.

Esse fato de termos uma internet mais comunicativa deve-se s novas ferramentas

tecnolgicas, presentes nos mercados das linguagens de programao e de computao

grfica.

11

Uma das ferramentas que junta essas facilidades de se ter a criao de grficos e, ao

mesmo tempo, um dinamismo criativo e lgico de programao a ferramenta ADOBE

FLASH PROFESSIONAL CS5. Com ela, podemos criar e apresentar um contedo mais

interativo e mais rico nos ambientes da web.

O software Adobe Flash Professional CS5 o padro de mercado para autoria

interativa e fornecimento de experincias imersivas que se apresentam de modo consistente

entre computadores pessoais, dispositivos mveis e telas de, praticamente, qualquer tamanho

e resoluo.

http://www.adobe.com/br/products/flash/whatisflash/

Da a facilidade e a aderncia, no mercado, desta ferramenta nos ambientes web.

O Flash fornece a possibilidade de criar contedos de multimdia (elementos de

navegao como menus, imagens, botes, jogos, formulrios, sites, animaes, etc.) de alta

qualidade, interativos e animados.

O Flash possui trs tipos de arquivos bsicos:

FLA: arquivo fonte; pode ser alterado e visualizado.

SWF: arquivo pronto para a visualizao e publicao; no pode ser alterado.

AS: arquivo com o cdigo (funes, classes) escrito em ActionScript

Para visualizar os filmes criados no Flash (.swf), necessria uma aplicao chamada

Flash Player. Os navegadores atuais possuem este plug-in; tambm possvel o usurio

instalar parte ou fazer atualizaes.

Para baixar, acesse: http://get.adobe.com/br/flashplayer/

O Flash trabalha com desenhos vetoriais. Isso possibilita a criao de aplicativos com

alta qualidade e tamanhos de arquivos reduzidos.

importante destacar que toda aplicao Flash tem que ser totalmente carregada para

que seja possvel visualiz-la, mas, mesmo assim, uma boa opo para animaes e

aplicaes iterativas, visto que, depois de carregada, ela funciona perfeitamente mostrando

toda a sua eficincia e qualidade.

12

Os vetores so bem maleveis, podem ser redimensionados sem perderem a qualidade

de visualizao e tambm geram arquivos bem menores do que quando usamos Bitmaps. As

imagens/desenhos vetoriais utilizam equaes matemticas.

Quando falamos de Bitmap, no temos a mesma flexibilidade. Se os redimensionamos,

eles perdem a qualidade e temos a ocorrncia do que conhecido como Estouro de pontos,

ou seja, podemos ver os pixels (pontos) que compem a imagem. Alm disso, quanto mais

imagens, maior o tamanho do arquivo.

Figura 1.

Imagem Bitmap Imagem vetorizada

13

As figuras abaixo mostram a rea de Trabalho do Flash CS5.

Figura 2.

Barra de menu do Flash

Barra de ferramentas Palco ou Stage

14

Figura 3.

Linha do tempo ou Timeline

rea de abas, indica os arquivos abertos

Altera as opes de organizao da rea de trabalho; tambm podemos criar nossos padres

Painis do Flash permitem

modificar propriedades e outros

recursos

Alguns atalhos muito teis no Flash

F4 - oculta ou exibe todos os painis.

Ctrl+F2 oculta ou exibe a barra de ferramentas.

Ctrl+F3 oculta ou exibe o painel de propriedades.

Ctrl+J configura opes do documento atual.

Alt+Shift+F9 oculta ou exibe o painel de cores.

OBS: A barra de ferramentas e os painis podem ser

exibidos atravs do Menu Window.

15

A figura a seguir mostra os itens da barra de menu separados por tarefas.

Figura 4.

Ferramentas de seleo e transformao

1. Seleo (V) - usada para selecionar, arrastar e transformar elementos grficos e de texto;

seleciona reas retangulares somente.

2. Subseleo (A) - usada para selecionar objetos e alter-los usando seus pontos

3. Transformao Livre (Q) - ao selecionar um objeto com esta ferramenta, pode-se aumentar,

diminuir, mover e rotacionar o objeto selecionado

4. Transformao de Gradiente (F) - permite regular o degrad em um objeto. Existe a

necessidade de a cor de preenchimento do objeto j ser um degrad.

5. Rotao 3D (W) - aplica rotao somente a objetos do tipo smbolo no espao 3D;

basicamente manipula formas em 2D no espao 3D.

6. Translao 3D (G) - aplica movimentao no espao 3D somente a objetos do tipo smbolo,;

basicamente manipula formas em 2D no espao 3D.

7. Lasso (L) - permite selecionar reas com formatos irregulares.

Ferramentas de seleo, transformao e 3D

rea de opes

(muda conforme a ferramenta selecionada)

Opes de cor de contorno e preenchimento

Ferramentas de navegao

Ferramentas de pintura, retoque e bones

Ferramentas de desenho e texto

16

Figura 5.


Opes da ferramenta Seleo

Ao escolher esta opo e selecionar um objeto no palco, sero ativadas as seguintes opes na

parte inferior da barra de ferramentas:

1. Quando ativado gruda o objeto selecionado ao objeto prximo pelo ponto de registro.

2. Suaviza as formas arredondadas do objeto.

3. Acerta o objeto em contornos retos.

Figura 6.

OBS: aproximando a ferramenta de seleo de um desenho no palco (sem selecion-lo), seu

cone alterado, o que permite modificar o objeto.

1

5

4

3

2

6

7

1

2

3

17


Opes da ferramenta Transformao Livre

Ao escolh-la e selecionar um objeto no palco, sero ativadas as seguinte opes na parte

inferior da barra de ferramentas:

1. Ativa a opo da ferramenta de somente girar ou inclinar o objeto.

2. Ativa a opo da ferramenta de somente dimensionar o objeto.

3. Ativa a opo da ferramenta de distorcer o objeto.

4. Ativa a opo Envelope da ferramenta; com essa opo ativada, podemos modificar o

objeto em diferentes locais.

Figura 7.


Opes da ferramenta Lao

Ao selecion-la, sero ativadas as seguintes opes na parte inferior da barra de ferramentas:

1. Ativa a varinha mgica, utilizada em objetos que possuem pixel (pontos), geralmente

imagens externas ao Flash.

2. Configura a tolerncia de pontos que a varinha mgica ir capturar.

3. Ativa a opo de lao como polgono, permitindo fazer selees retas.

Figura 8.

1

2

3

4

1

2

3

18


Caneta (P) - desenha linhas retas ou curvas.

Para desenhar linhas retas, basta clicar no lugar onde ela deve iniciar e clicar onde deve

terminar. Se mantiver tambm a tecla Shift pressionada, as retas sero restritas a ngulos

mltiplos de 45.

Para desenhar curvas, basta clicar no lugar onde a linha deve iniciar e onde ela deve terminar,

porm movendo o mouse com o boto pressionado.

1. Modifica a reta atravs dos pontos.

2. Deleta pontos.

3. Adiciona pontos.

Figura 9.


Desenha formas geomtricas.

1. Desenha retngulos e quadrados; para criar um quadrado, pressionamos a tecla SHIFT

ao arrastar o mouse.

2. Desenha ovais ou crculos; para criar um crculo, pressionamos a tecla SHIFT ao

arrastamos o mouse.

3. Semelhante ferramenta Retngulo, porm, aps criar o objeto, pode alter-lo atravs

de seus pontos.

4. Semelhante ferramenta Oval, porm, aps criar o objeto, pode alter-lo atravs de

seus pontos.

5. Desenha polgonos e estrelas.

1

2

3

19

Figura 10.

Lpis (Y). Desenhos mo livre. Esta ferramenta possui alguns modificadores como

opo.

Texto (T). Insere textos.

Linha (N). Desenha linhas retas. Quando pressionamos a tecla SHIFT, podemos fazer

linhas em ngulos mltiplos de 45.

Pincel (B), pinturas livres. Esta ferramenta possui alguns modificadores como opo.

Spray (B). Permite preencher uma rea como com um spray. Esta ferramenta tambm

permite adicionar animaes que sero

borrifadas no palco.

Deco (U). Permite aplicar decoraes (videira, fogo, rvore, etc.); podemos alterar as

propriedades de cada tipo de efeito.


Opes da Ferramenta Lpis

1. Aps fazer o desenho, o Flash tenta acerta o contorno.

2. Aps fazer o desenho, o Flash tenta suavizar o contorno arrumando as curvas.

3. Desenho livre. O Flash faz somente pequenas correes no traado, procurando

manter o original.

Figura 11.

1

2

3

4

5

1

2

3

20


Opes da Ferramenta Pincel

A. Modifica o tamanho do pincel.

B. Modifica a forma do pincel.

1. Pinta o objeto normalmente.

2. Pinta somente o preenchimento, preserva o contorno.

3. Pinta atrs do objeto, preserva o contorno e preenchimento

4. Pinta somente uma rea selecionada; a rea deve ser previamente selecionada.

5. Pinta dentro do objeto; leva em considerao a cor da rea clicada, ou seja, pinta a

regio que possui a cor do primeiro clique.

Figura 12.

Ferramentas de pintura e retoque

Tinteiro (S). Insere contorno em objetos que no tenham contorno ou, simplesmente,

troca a cor do contorno j existente.

Balde de tinta (K). Altera a cor de preenchimento do objeto.

Conta-gotas (I). Utilizada para capturar as cores dos objetos.

Borracha (E). Apaga os objetos; possui opes semelhantes ao pincel.

Bone (M). Adiciona bones aos smbolos e formas. Permite que ocorrncias de smbolo e

objetos se movam de forma complexa e natural, como uma ao em cadeia.

Associao (M). Associa pontos dos bones a pontos de controle das formas; com essa

ferramenta podemos configurar o movimento para que ele fique satisfatrio.

1

2

3

4

5

A

B

21

Ferramentas de navegao

Zoom (Z). Aproxima e afasta a rea de desenho.

Mo (H). Move a rea de desenho para a direo desejada.

Ferramentas de pintura e retoque

Opes da ferramenta Borracha

A. Especifica a forma da borracha.

B. Apaga a regio correspondente cor clicada inicialmente.

1. Apaga normalmente o objeto

2. Apaga somente o preenchimento.

3. Apaga somente o contorno do objeto.

4. Apaga somente o preenchimento de uma rea previamente selecionada.

5. Apaga dentro do objeto; leva em considerao a cor da rea clicada, ou seja, ir

pintar a regio que possui a cor do primeiro clique.

Figura 13.

Opes de cor e preenchimento

Traado (Cor do contorno ou trao)

Preenchimento (Cor de fundo ou preenchimento)

Este cone indica que o contorno/preenchimento est sem cor

1

2

3

4

5

A

B

22

Outras opes

Quando ativado, gruda os objetos arrastados aos objetos prximos.

Quando ativado, cria objetos de desenho ou formas agrupadas.

Algumas observaes:

Quando desenhamos, no palco, sem o uso de camadas ou elementos agrupados, corremos o

risco de unir ou recortar objetos sobrepostos.

Quando arrastamos um objeto sobre outro e depois o arrastamos para fora novamente,

podem acontecer duas aes:

Se os objetos possuem a mesma cor, no ser possvel separ-los, pois, com cores

iguais, o Flash une os objetos.

Se os objetos possuem cores diferentes, ao arrastar o objeto superior, estaremos

recortando a rea que ele ocupava do objeto inferior.

Para solucionar este problema, podemos agrupar os objetos aps finalizarmos uma tarefa ou

podemos trabalhar com camadas que sero estudadas mais adiante.

Para agrupar elementos no Flash, primeiro selecione os elementos a serem agrupados e, em

seguida, pressione as teclas Ctrl+G.

Para desagrupar, selecione o objeto agrupado e pressione Ctrl+B.

Como visto anteriormente, para resolver o problema de unir ou recortar objetos

sobrepostos, podemos utilizar o recurso de agrupar os elementos finalizados, porm

surge outro problema: como fazer para alterar um objeto agrupado?

Podemos resolver isso de duas formas: a primeira seria desagrupar o objeto, voltando o

risco de unir e recortar com os demais; a segunda seria dar um duplo clique no objeto

agrupado para edit-lo; esta seria a melhor opo.

Figura 14.

Para voltar cena 1, basta clicar na opo Scene 1.

Quando clicamos no objeto agrupado, entramos no palco de edio do objeto, saindo, dessa forma, do palco principal ou Cena 1.

23

Com as ferramentas de desenho, podemos pressionar a tecla Shift para fazer desenhos

perfeitos.

Com a ferramenta retngulo + Shift, desenhamos quadrados perfeitos.

Com a ferramenta oval + Shift, desenhamos crculos perfeitos.

Com a ferramenta Linha + Shift, desenhamos linhas com ngulos mltiplos de 45.

Quando fazemos um desenho e no conseguimos aplicar um preenchimento, porque

as linhas no esto totalmente unidas. Quando isso ocorrer, utilize o zoom na ligao

que deseja mexer e faa a unio do traado.

OBS: Para utilizar esses recursos, devemos manter pressionada a tecla Shift enquanto fazemos

o desenho com o mouse.

rea de Trabalho (Palco ou Stage)

A rea de Trabalho (Stage) o local onde colocamos os objetos da cena, arrumamos, damos

forma, criatividade e movimentos.

Figura 15.

Todo objeto que estiver na rea

de Trabalho estar visvel em seu

filme final

Os objetos que estiverem fora permanecero l, mas no sero visualizados em seu filme final.

24

Painel de Propriedades

Para tornar o Painel de Propriedades visvel/invisvel, basta acessar o menu Window-

>Properties ou Ctrl+F3.

O Painel de Propriedades exibe as propriedades alterveis da ferramenta ou objeto que

est selecionado.

Figura 16. Veja que as opes dos exemplos acima so diferentes.

Visualizando o Resultado

Para visualizar o resultado de seu trabalho, basta pressionar Ctrl+Enter.

Mais teclas de atalho

Ctrl+Enter Visualiza o resultado do projeto (gera o arquivo final swf).

Ctrl+G Agrupa os objetos.

Ctrl+B Separa os objetos.

Ctrl+1 Mantm a visualizao do palco em 100%.

Ctrl+2 Centraliza o palco.

Ctrl+ Aumenta a visualizao.

Ctrl - Diminui a visualizao.

Ctrl+Z Desfaz a ltima ao.

Ctrl+Y Refaz a ltima ao desfeita.

Ctrl+D Duplica um objeto no Palco.

25

Como complemento desta unidade, sugiro a leitura do captulo I dos livros:

ADOBE CREATIVE TEAM. Adobe Flash Cs4 Professional. So Paulo:

Bookman Companhia Ed., 2009.

ADOBE CREATIVE TEAM. Adobe Flash Cs5 Professional. So Paulo:

Bookman Companhia Ed, 2010.

Sugiro, tambm, a seguinte leitura:

CARLOS ANTONIO JOS OLIVIERO . Flash Cs4 Para Windows. So

Paulo: Erica, 2009.

Boa leitura a todos!

26

Adobe Creative Team. Flash CS4 classroom in a book. Porto Alegre: Grupo A 2010. (e-

book)

FURMANKIEWICZ, E. ADOBE Flash Cs4 professional: Classroom In a Book: guia oficial

de treinamento. So Paulo: Bookman, 2010.

NIELSEN, J. Projetando websites. 6.ed. Rio de Janeiro: Campus, 2000.

Adobe Creative Team. Adobe flash professional CS3 classroom in a book. Porto

Alegre: Grupo A, 2008. (e-book)

Adobe Creative Team. Adobe flash professional CS5 classroom in a book. Porto

Alegre: Grupo A, 2011. (e-book)

CHANDLER, H. M. Manual de produo de jogos digitais. 2.ed. Porto Alegre: Grupo A,

2012. (e-book)

DEITEL, H. M. Ajax, rich internet applications e desenvolvimento web para

programadores. Porto Alegre: Pearson, 2009. (e-book)

RUSSELL, C., Macromedia flash 5 avanado: para windows e macintosh. So Paulo:

Pearson, 2001. (e-book)

27

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

Adobe flash cs5

Documents

Transcript of Adobe flash cs5