Responsvel pelo Contedo:

Prof. Ms. Douglas Almendro

Reviso Textual:
Profa. Esp. Vera Ldia de S Cicaroni

Histria da Internet

Provedor

Surfando na Internet

Introduo ao flash

Vetor X Bitmap

Conhecendo o Ambiente de
Desenvolvimento Flash CS5

Barra de Ferramentas

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

princpios

bsicos

de

aplicaes

desenvolvidas em Flash.

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.

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!

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.

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 viceversa. 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.
9

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.

10

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.

11

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

12

Imagem vetorizada

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

Figura 2.
Barra de menu do Flash

Barra de ferramentas

Palco ou Stage

13

Figura 3.
Linha do tempo ou Timeline

Altera as opes de organizao da rea de

trabalho; tambm podemos criar nossos padres

rea de abas, indica os arquivos abertos

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.
14

Painis do Flash permitem

modificar propriedades e outros
recursos

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

Figura 4.

Ferramentas de seleo, transformao e 3D

Ferramentas de desenho e texto

Ferramentas de pintura, retoque e bones

Ferramentas de navegao

Opes de cor de contorno e preenchimento

rea de opes
(muda conforme a ferramenta selecionada)

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.

15

Figura 5.

Ferramentas de seleo e transformao

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.

1
2
3

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

cone alterado, o que permite modificar o objeto.

16

Ferramentas de seleo e transformao

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.

1
2
3
4

Ferramentas de seleo e transformao

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

17

Ferramentas de desenho e texto

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.

1
2
3

Ferramentas de desenho e texto

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.

18

Figura 10.

1
2
3
4
5

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.

Ferramentas de desenho e texto

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

19

Ferramentas de desenho e texto

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.

1
2
3
4
A
B

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.
20

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.

1
A

2
3
4

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
21

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.
Quando clicamos no objeto agrupado,
entramos no palco de edio do objeto,
saindo, dessa forma, do palco principal
ou Cena 1.

Para voltar cena 1,

basta clicar na opo
Scene 1.
22

 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.

23

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.
24

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!

25

Adobe Creative Team. Flash CS4 classroom in a book. Porto Alegre: Grupo A 2010. (ebook)
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)

26

_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________

27