SlideShare une entreprise Scribd logo
1  sur  287
Télécharger pour lire hors ligne
Visão geral
Apresentação da disciplina:
O Flash surgiu como um programa para fazer animações para internet e
com o tempo ganhou outros recursos gráficos e habilidades de
programação. Foi na versão do Flash 4 que a linguagem de programação
Action Script ganhou grande popularidade com o software, pois era capaz
de fazer um tipo de conteúdo interativo para internet, lançado pela
empresa Macromedia. Com a compra da Macromedia pela empresa
Adobe, a ferramenta Flash evoluiu com o tempo ganhando cada vez mais
recursos gráficos e de programação, sendo uma ótima ferramenta para
design gráfico, animação, criação de programas e prototipagem de ideias.
Com toda essa evolução o Flash deixou de ser apenas um único
programa e passou a ser uma plataforma, conhecida como
PLATAFORMA FLASH.
Objetivos:
Nesta unidade, além de entender conceitos sobre a plataforma Flash,
vamos também, aprofundar conceitos sobre o Action Script. O Action
Script é uma linguagem de script orientada a objetos, com a sintaxe muito
parecida com Java Script, sendo utilizada no Flash para incrementar as
animações do objetos.
Conteúdo Programático:
 Flash CS5
o Fundamentos da Ferramentas;
o Linha do Tempo / Camadas;
o Animações;
o Elementos do FlasH;
o Motion Tween;
o Botões;
o Cenas;
o Importar e Exportar Arquivos.
 Action Script 3.0
o Fundamentos do Action Script;
o Funções Play, Stop;
o Carregamento de URLs;
o Carregamento de Filmes Externos;
o Criação de Sites.
 Elementos Multimídia
o Inserindo Músicas e Sons;
o Inserindo Elementos de Vídeos.
Metodologia:
Na unidade utilizaremos todos os recursos necessários e disponíveis para
o desenvolvimento da discussão do conteúdo, sendo assim, faremos uso
de:
 Textos da própria web-aula e de outros sites que possam contribuir para
a discussão;
 Vídeos que podem esclarecer ou aprofundar determinados conteúdos;
 Fóruns para discussão de tópicos onde seja possível a troca de ideias e
conteúdos entre os discentes e docentes;
 Avaliações virtuais onde será realizada a verificação do aprendizado;
 Entre outros recursos que poderão ser utilizados visando maior
entendimento da matéria.
Avaliação Prevista:
Cada web-aula conterá uma avaliação virtual composta de 5 questões
(sendo assim, temos 2 web-aulas com 5 questões cada). Quando houver
fórum de discussão o aluno será avaliado quanto ao conteúdo de sua
postagem, onde deverá comentar o tópico apresentando respostas
completas e com nível crítico de avaliação pertinente ao nível de pós-
graduação.
Critérios para Participação dos Alunos no Fórum:
Quando houver fórum de discussão o aluno será avaliado quanto ao
conteúdo de sua postagem, onde deverá comentar o tópico
apresentando respostas completas e com nível crítico de avaliação
pertinente ao nível de pós-graduação. Textos apenas concordando ou
discordando de comentários de outros participantes do fórum sem a
devida justificativa ou complementação não acrescentam em nada ao
debate da disciplina, sendo assim, devem ser evitados. Os textos
devem sempre vir acompanhados das justificativas para a opinião do
discente sobre o conteúdo discutido, para que assim, possamos dar
continuidade ao debate em nível adequado. Além disso, podem ser
utilizados citações de artigos, livros e outros recursos que
fundamentem a opinião ou deem sustentação a sua posição crítica
sobre o assunto. Deve ser respeitado o tópico principal do fórum,
evitando debates que não tem relação com o tema selecionado pelo
professor.
Página1 de 18
 PRÓXIMA
ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES
WEB
WEB AULA 1
Unidade 1 - Flash Professional CS5
1.1 Fundamentos da Ferramenta
Afinal de contas, o que é o Flash? Alguns dizem que ele serve para fazer animações,
outros dizem que é ótimo para fazer sites com mais interação, já outros dizem que o
Flash está “morto” e será abandonado.
Para entender isso melhor, vamos falar um pouco de como o Flash foi criado. O Flash
surgiu como um programa para fazer animações para internet, em uma época onde os
sites eram praticamente feitos de textos e umas poucas imagens.
Veja como era o site da empresa Adobe na época:
<http://web.archive.org/web/19961228111753/http://www2.adobe.com/>
Compare com o site da Adobe dos dias de hoje:
<http://www.adobe.com/>
Site da empresa Adobe em 1996 à esquerda e em 2012 à direita
Na verdade a primeira versão do programa era chamada de Splash lançado pela
empresa FutureWave Software em 1996:
Figura 1 - Tela de abertura da primeira versão do “Flash” – Splash (1996)
De lá pra cá, a maneira de fazer animação com o Flash não mudou muito, mas ele
ganhou outros recursos gráficos e habilidades de programação. Foi na versão do Flash
4 que a linguagem de programação Action Script ganhou grande popularidade com o
software, pois era capaz de fazer um tipo de conteúdo interativo para internet nunca
vistos antes, lançado pela empresa Macromedia.
Figura 2 - Tela de abertura da versão do Flash 4 (1999)
Página3 de 18
 ANTERIOR
 PRÓXIMA
A empresa Macromedia foi comprada pela empresa Adobe e a ferramenta Flash evoluiu
com o tempo ganhando cada vez mais recursos gráficos e de programação, sendo uma
ótima ferramenta para design gráfico, animação, criação de programas e prototipagem
de ideias.
Figura 3 - Tela de abertura da versão do Flash CS5 (2012)
Com toda essa evolução o Flash deixou de ser apenas um único programa e passou a
ser uma plataforma, conhecida como PLATAFORMA FLASH, tendo integração com
diversos outros programas da família Adobe e com outros recursos específicos.
Algo muito recorrente é a confusão feita quando se fala a palavra Flash, pois ela pode
significar várias coisas dentro da PLATAFORMA FLASH. Por exemplo:
Existem 03 ferramentas que levam o nome Flash:
 Flash Professional – Software original evoluiu e estamos abordando neste curso.
 Flash Catalyst – Software que surgiu mais tarde para criar projetos interativos sem depender de
conhecimentos avançados de programação.
 Flash Builder – Software para criar conteúdo flash apenas com linguagem de programação.
Todas essas 03 ferramentas são recursos diferentes para criar um arquivo conhecido
como Shockwave Flash, ou mais conhecido como SWF, que é o arquivo Flash compilado
com o conteúdo a ser publicado. No caso do Flash Professional, geralmente o arquivo
fonte é salvo no formato fla que através da ferramenta Flash Professional é capaz de
exportar um arquivo SWF.
ne do arquivo .fla ícone do arquivo .swf
Além das diferentes ferramentas existem também os “Players", também conhecidos
como Clientes ou Leitores de arquivos SWF. Eles são os programas que interpretam os
arquivos SWF para apresentar as animações e conteúdos feitos em Flash. Por padrão,
existem dois programas para reproduzir conteúdo Flash (SWF).
 Flash Player – leitor para ambiente de internet (mais conhecido).
 AIR – leitor para ambiente desktop (para aplicativos)
Página4 de 18
 ANTERIOR
 PRÓXIMA
Ícone do Flash Player
Ícone do AIR
O Flash Player é mais difundido como um plug-in para navegadores de internet. Esse
plug-in é amplamente distribuído e a grande maioria dos computadores pessoais tem o
Flash Player instalado. O Flash Player é útil para acessar conteúdos interativos na
internet como aplicativos web, leitores de vídeo, animações e jogos online.
Já o Air não é voltado para navegadores, ou seja, não é para ser acessado via internet.
Ele é um conteúdo Flash (SWF) transformado em um aplicativo que pode ser instalado
em computadores e plataformas móveis como celulares e tablets. O AIR possui
comunicação web, interação touchscreen e praticamente todas as funcionalidades do
que o Flash Player possui, mas com algumas coisas a mais.
Existe muita discussão sobre uma disputa entre o Flash e o HTML5.
Entre a discussão está o mito do flash não servir para celulares e tablets. De fato o
Flash Player, assim como praticamente todos os plug-ins de internet, não funciona nos
navegadores de boa parte dos celulares e tablets. Mas é possível criar conteúdo Flash
para esses dispositivos através de aplicativos feitos com o AIR e não mais com o Flash
Player.
Que tal discutir sobre isso no Forum?
Para trabalhar no Flash Professional, basta seguir alguns passos básicos:
 Planeje o que vai ser feito
o Organize antes o que você deseja fazer com a ferramenta e que recursos você irá usar (sons,
imagens, textos etc.)
 Adicione recursos de mídia
o Crie os desenhos, importe as imagens, os vídeos, sons e textos.
 Organize as coisas
o Organize os elementos de mídia no Palco e na Linha do tempo. Monte as animações
separadamente e junte tudo no Palco.
 Teste e publique o SWF
o É bom verificar se o SWF gerado está funcionando como desejado, e corrigir quaisquer erros
encontrados.
Para saber como fazer essas cosias vamos precisar entender melhor as ferramentas
que o Flash Professional nos oferece. Vamos lá.
Página5 de 18
 ANTERIOR
 PRÓXIMA
1.2 Elementos do Flash Professional
Por onde começar? Existem várias opções na tela inicial do Flash Professional, mas
estas opções são apenas templates, ou seja, configurações pré-definidas para a
exportação do SWF. Por padrão podemos sempre escolher a primeira opção da coluna
do meio (ActionsScript 3.0) para criar um novo arquivo vazio.
Figura 4 - Opções iniciais do Flash Professional CS5.5
Antes de começar a usar a ferramenta precisamos aprender sua interface, não é
mesmo?
Podemos dividir a interface do Flash Professional em 06 elementos principais:
Figura 5 - Imagem inicial do Flash Professional CS5.5
1. PALCO: onde são posicionados os objetos gráficos como
imagens e desenhos.
2. Barra de FERRAMENTAS: são os recursos para manipular os objetos, criar desenhos, textos entre
outras coisas.
3. LINHADE TEMPO:ondeestão as camadas e os quadros chaves dos objetos, mostrando a mudança
no tempo para animações.
4. PAINÉIS: são de diversos tipos, servem para controlar parâmetros específicos como cor, rotação e
escala, alinhamento e várias outras coisas.
5. BIBLIOTECA: onde ficam guardados os objetos salvos como símbolos e as coisas importadas no
programa como imagens, sons e vídeos.
6. PROPRIEDADES:mostraos parâmetros que podem ser configurados para cada objeto selecionado.
As propriedades dependem daquilo que está selecionado. É muito importante saber qual o tipo de
objeto que está selecionado, para identificar corretamente as propriedades que estão sendo
mostradas. De modo geral, podemos distinguir 03 tipos de propriedades:
 Propriedades do palco: são as propriedades do arquivo FLA em si. Tem parâmetros gerais sobre a
exportação do arquivo SWF.
 Propriedades dos objetos: são as propriedades de todos os objetos colocados no palco, podem
ser imagens, desenhos ou símbolos.
 Propriedades do quadro chave: são as propriedades do quadro-chave selecionado. Cuidado para
não confundir as propriedades do quadro-chave com as propriedades de um objeto selecionado.
Página6 de 18
 ANTERIOR
1.3 TIPOS DE OBJETOS
Que tipo de conteúdo existe dentro do Flash? Quais as
propriedades desses objetos? Alguns objetos são criados diretamente no Flash como
FORMAS, TEXTOS e SÍMBOLOS, outros objetos podem ser importados de arquivos
externos através dos atalhos: Arquivo/Importar/... ou pelo atalho CTRL + R.
1 . FORMAS: são as linhas e os preenchimentos que é possível desenhar
no Palco. Eles ficam com a aparência ¿rachurada¿ quando selecionados. São os objetos
mais simples que servem para fazer composições gráficas e desenhos.
2. TEXTOS: objetos com conteúdo de texto. Podem ser de 03 tipos:
a. Estático: são textos que aparecem como se fossem um desenho. Serão exportados
como uma forma.
b. Dinâmico: são os textos que podem ser mudados através do Action Script.
c. Entrada: são os textos para campos onde o usuário poderá digitar. Também é
acessado através do Action Script
3. IMAGENS: imagens podem ser usadas dentro do Flash, porém apenas como uma
figura ou preenchimento de algum desenho. As imagens não podem ser editadas em
suas propriedades, por isso é muito importante usar imagens no tamanho adequado
para seu projeto, evite redimensionar uma imagem dentro do Flash e evite usar
imagens muito grandes. Para ajustar a imagem, faça isso em outro software como o
Adobe Photoshop.
Os símbolos permitem repetir elementos gráficos sem aumentar o espaço de
armazenamento daquela imagem na publicação final em SWF.
4. SÍMBOLOS: Os símbolos são os elementos mais
importantes no Flash, pois permitem organizar de forma sistemática
todo o projeto. Um símbolo é um gráfico, botão ou clipe de filme que você cria uma vez
no Flash e pode duplicar o símbolo novamente sem criar um novo objeto. Todo símbolo
fica guardado na Biblioteca do Flash, quando é colocada uma cópia desse símbolo no
palco, as cópias ficam vinculadas ao símbolo original, ou seja, tudo que for mudado em
um objeto será mudado em outro também.
a. CLIPE DE FILME (MovieClip): são os símbolos mais comuns no Flash, pois são
objetos acessíveis pela linguagem de programação Action Script. Possuem uma Linha
de Tempo interna independente, ou seja, não depende do tempo principal da animação,
pode parar e voltar a reproduzir a qualquer momento. Além disso, permitem recursos
de efeito de imagem como:
I. Transformação 3D
II. Animação do tipo Motion
III. Modos de Mesclagem (Escurecer, Clarear, Multiplicar, etc)
IV. Filtros (Desfoque, sombra projetada, etc).
b. BOTÃO (Button): são símbolos úteis para criar uma peça que irá reagir com as
ações do Mouse. Bom para criar botões interativos que respondam a cliques do mouse,
rolagens ou outras ações. Possui uma Linha do Tempo especial com Quadros Chaves
para cada tipo de evento:
Quadros para os eventos do símbolo do tipo
Botão
I. O primeiro quadro é o estado Para cima (Up), representando o botão sempre que
oMouse não estiver sobre o botão.
II. O segundo quadro é o estado Sobre (Over), representando a aparência do botão
quando o Mouse estiver sobre o botão.
III. O terceiro quadro é o estado Para baixo(Down), representando a aparência do botão
quando clicado.
IV. O quarto quadro é o estado Ocorrência (Hit), definindo a área física que responde
aos eventos do Mouse. Esta imagem é invisível quando publicado em formato SWF. Algo
muito comum de se fazer é utilizar botões apenas com um retângulo nesse quadro
chave, para criar botões transparentes que podem ser colocados em cima de textos e
imagens para corresponder aos eventos do Mouse. Esses botões transparentes ficam
com a cor ciano no palco, apenas para reconhecimento.
Página7 de 18
 ANTERIOR
 PRÓXIMA
c. GRÁFICO (Graphic): são os símbolos que servem para guardar coisas. Use os
gráficos para imagens estáticas e para criar partes reutilizáveis de animação. Sua Linha
de Tempo é dependente de onde ele esteja, ou seja, ele irá reproduzir seu conteúdo
conforme a Linha de tempo onde o gráfico estiver inserido. O gráfico é muito útil para
controlar animações, pois possui propriedades para reprodução do seu conteúdo:
I. Loop – repete a animação de dentro do Gráfico em todos os
quadros que o símbolo ocupa.
II. Reproduzir uma vez – dispara a animação de dentro do Gráfico apenas uma vez,
dentro dos quadros que o símbolo ocupa.
III. Quadro simples– exibe apenas um dos quadros chaves de dentro da animação
do Gráfico.
Uma dúvida comum é quando usar Gráfico e quando usar Clipes de Filme. Depende do
contexto, por exemplo: Se você estiver fazendo um game em Flash, é bem provável
que os Clipes de Filme sejam a melhor opção, porque o game é completamente dinâmico
e pode ter animações controladas pela programação. Já se for o caso de uma animação
que será importada em outro programa Adobe, como o Adobe Premiere, é essencial
que todas as animações sejam feitas em Gráficos, caso contrário, as animações não
funcionarão no vídeo final.
Veja um pouco mais sobre símbolos no vídeo:
<https://www.youtube.com/watch?v=Fs3cpIz3ZgA&feature=relmfu>
5. COMPONENTES: os componentes são nada mais do que símbolos criados no flash,
mas com algum Action Script embutido neles para ser usado de forma mais fácil. Com
conhecimentos de Action Script é possível criar seus próprios componentes. Isso é útil
para facilitar o trabalho e tornar um código de programação reutilizável para outros
projetos. O atalho Ctrl+F7 abre os componentes padrões do Flash Professional.
6. VÍDEO: Vídeos podem se usados de duas maneiras no Flash:
a. Embeded: É quando o arquivo de vídeo é importado para dentro do arquivo FLA e é
exportado dentro do SWF, como se fosse um arquivo de imagem. Este vídeo será
reproduzido em alguma Linha de Tempo do Flash e por isso seu formato é mais pesado
e pode perder sincronia com o áudio. Este tipo de vídeo tem um uso um pouco restrito
e deve ser usado apenas para vídeo pequenos de curta duração.
b. Streaming: é quando o vídeo é externo ao arquivo SWF, ou seja, o Flash funciona
como um programa de lê vídeos. A diferença é que com o Flash você pode criar o player
de vídeo da maneira que quiser através da programação Action Script. O vídeo
carregado não depende em nada na Linha de tempo do Flash, é totalmente
independente.
7. SONS: Sons não são visíveis no Palco, eles aparecem apenas na biblioteca e podem
ser vinculados nas propriedades do Quadro Chave.
8. Existem 02 tipos de configuração para o som que é anexado a uma Linha de Tempo:
a. SOM TIPO Stream: o Tipo Stream irá sincronizar o tempo dos Quadros-chaves com o
tempo do som e pode ser ouvido em tempo de edição, ou seja, se a linha de tempo
terminar o som não será mais emitido. Este caso é mais indicado para animações e
falas de personagens onde o tempo do áudio precisa encaixar exatamente com a
imagem. Há uma leve perda de qualidade.
b. SOM TIPO Event: o Tipo Event é o som que é executado independente da imagem do
Quadro Chave. Ideal para efeitos sonoros e sons de feedbackpara eventos de interação
com o mouse, por exemplo. Não há perda de qualidade.
1.4 DESENHANDO NO FLASH
O Flash é uma ferramenta essencialmente vetorial, por isso ele pode ser leve para rodar
em site online. Mas afinal de contas o que é uma imagem vetorial? Existem dois
sistemas de imagem no computador o vetorial e o bitmap.
As ferramentas vetoriais são aquelas que trabalham com imagens 2D que são geradas
a partir de descrições geométricas de formas. Vetores são imagens diferentes das
imagens do tipo bitmap, ou mapa de bits, que são aquelas formadas por vários pontos,
pixels, cada um com uma cor.
Figura 6 - Imagem vetorial à esquerda e bitmap à direita
Imagem vetorial é um tipo de imagem gerada a partir de descrições geométricas de
formas, diferente das imagens que são geradas a partir de pontos minúsculos
diferenciados por suas cores. Uma imagem vetorial normalmente é composta por
curvas, elipses, polígonos, texto, entre outros elementos, isto é, utilizam informações
(vetores) matemáticos para sua descrição. Em um trecho de desenho sólido, de uma
cor apenas, um programa vetorial apenas repete o padrão, não tendo que armazenar
dados para cada pixel.
Por causa disso, os gráficos vetoriais geralmente são mais leves (ocupam menos
memória no disco rígido do computador) e não perdem qualidade ao serem ampliados,
já que as funções matemáticas adequam-se facilmente à escala, o que não ocorre com
outros tipos de imagem.
Agora vamos aprender como se desenha utilizando a ferramenta Flash. Podemos ver
que o flash possui diversas formas básicas tais como o retângulo, polígono e a elipse e
que através dessas imagens podemos combiná-las e transformá-las em desenhos e
formas mais complexas. Vamos ver como desenhar formas básicas e transformá-las.
Para se acessara ferramenta polígono devemos clicarna ferramenta retângulo e manter
o botão esquerdo do mouse pressionado.
Para desenhar qualquer uma destas formas, selecione-as, vá para sua área de trabalho
e clique e arraste na diagonal. Para desenhar círculos e quadrados desenhe com a tecla
SHIFT pressionada, se desenharmos com a tecla ALT pressionada desenhamos as duas
formas a partir do centro.
Quando desenhamos uma forma básica esta forma apresenta seu contorno e
preenchimento separados, para mover uma forma depois de pronta, não basta apenas
clicar em qualquer ponto, devemos clicar duas vezes no meio da forma, para selecionar
seu preenchimento e seu conteúdo.
Para podermos alterar um retângulo ou um polígono podemos fazer de duas maneiras:
clicando e arrastando o vértice do ângulo ou clicando e arrastando em qualquer ponto
do seu contorno.
Para aumentar ou diminuir o tamanho de qualquer forma, use a ferramenta Transform.
Clique na ferramenta Transform, depois clique na forma que deseja modificar o
tamanho, se esta forma tiver contorno e preenchimento, devemos clicar duas vezes
para selecionar.
Para retirar o contorno de uma elipse, de um clique com a ferramenta Selection e
pressione Delete, de retângulos ou polígonos, podemos remover só um lado do
contorno ou todos os lados.
Para remover só de um lado clique uma vez, na parte do contorno que quer apagar e
pressione Delete, para remover todos os lados clique duas vezes em qualquer parte do
contorno e pressione Delete.
Podemos também combinar as formas de duas maneiras aparando ou soldando as
formas. Para aparar as formas usamos uma forma para recortar outra. Para isso
devemos desenhar duas formas da mesma cor e sem retirar o contorno. Por exemplo.
Podemos clicar em um círculo da direita e posicione em cima de um outro círculo à
esquerda, desmarcando-o.
Página8 de 18
 ANTERIOR
 PRÓXIMA
Depois clicamos duas vezes no círculo da direita e arrastamos para seu lugar de origem.
O que fez uma forma recortar a outra foi o contorno, podemos usar também formas
sem contorno, mas com preenchimentos diferentes.
As formas criadas com o modo Desenho de objeto permanecem como objetos
separados que você pode manipular separadamente.
As formas criadas com o modo Mesclar desenho se fundem quando são superpostas. A seleção
da forma e sua movimentação causam a alteração da forma superposta.
Para soldar as formas devemos desenhar duas formas da mesma maneira e retirar o
contorno. Se clicarmos no objeto da direita e arrastarmos para cima da outra imagem,
depois que desmarcarmos eles se fundirão numa única imagem.
Para desenhar linhas e traçados temos quatro ferramentas:
O lápis é uma ferramenta de desenho muito útil, pois permite a pintura de detalhes,
desenhos a mão livre e muito mais. Existem vários modos de desenho com o lápis, e
os recursos de suavização do Flash são bem interessantes. Podemos usar o lápis como
um lápis normal, mas também podemos fazer com que os traços sejam
automaticamente suavizados, em curvas ou em retas.
Quando selecionamos a ferramenta lápis, aparecem na parte de baixo da caixa algumas
ferramentas de controle. A opção Straighten (correção) desenha uma linha sinuosa na
tela, você irá observar que os ângulos da linha vão ficar um pouco mais retos. A
opção Smooth (suavização) desenha uma linha parecida com a anterior, mas podemos
notar que quando terminar de desenhar a linha terá seus contornos suavizados. E a
opção Ink (tinta) não altera a aparência das linhas depois de desenhadas.
Figura 7 - Linhas desenhadas no modo Correção, Suavização e Tinta
A ferramenta pincel tem um funcionamento parecido com a ferramenta Lápis, com a
diferença que podemos escolher o formato do pincel. Na parte de baixo da barra de
ferramentas podemos escolher o tamanho do pincel e um modelo de pincel. Além do
tamanho e do traçado podemos alterar também o comportamento do desenho do
traçado em relação às outras formas, podemos pintar somente sobre áreas
preenchidas, só atrás de outras formas etc.
Figura 8 - Um traçado com pincel de largura variável desenhado com uma caneta
Podemos usar também a ferramenta Pen para desenharpolígonos irregulares ou formas
curvas. Para desenhar polígonos, selecione a ferramenta Pen e clique em vários pontos
da tela, para finalizar esta forma de um clique no ponto inicial do desenho. Para
desenhar formas curvas, selecione a Pen e quando clicar, dê uma pequena “arrastada”
com o mouse, finalize clicando no ponto inicial.
Para desenhar no flash, não é preciso de muita técnica, é a paciência que conta.
Podemos criar bons desenhos vetorizados com um resultado muito satisfatório. Usar o
flash nos permite desenhar um rosto humano, fazer um Cartum ou mesmo vetorizar
imagens e logomarcas.
Página9 de 18
 ANTERIOR
 PRÓXIMA
1.5 LinhaS de Tempo e Camadas
Como vamos trabalhar todos esses objetos do flash no tempo? Uma das principais
virtudes do Flash é justamente a capacidade de usar animações para montar seus
conteúdos. Para isso precisamos entender como funciona a Linha de Tempo e as
Camadas.
Figura 9 - Quadros chaves de uma bolinha pulando
Veja esta animação:
<https://www.youtube.com/watch?v=fnkrsgbceus&feature=youtu.be>
Linha de Tempo e Camada funcionam em conjunto, cada camada possui uma linha de
tempo que serve para organizar a passagem do tempo em formato de quadros, onde
cada quadro representa uma posição do movimento no tempo.
Figura 10 - Partes da Linha do tempo
ndicador de reprodução
Quadro-chave vazio
Camada
Ícone da camada de guia
Menu pop-up Exibição de quadros
Animação quadro a quadro
G. Animação interpolada
H. Botão Rolar até o indicador de reprodução
I. Botões de papel de transparência
J. Indicador de quadro atual
K. Indicador de taxa de quadros
L. Indicador de tempo decorrido em segundos
Você pode arrastar o indicador de reprodução para mudar a posição no tempo e fazer
as edições em cada quadro. Alguns atalhos são bem úteis para facilitar essa edição:
Figura 11 - Atalhos para manipular a Linha de Tempo
CTRL + Alt + C Copia Quadros selecionados
CTRL + Alt + V Cola Quadros
F5 Prolonga Quadros
F6 Insere Quadro Chave
F7 Insere Quadro Chave em Branco
SHIFT + F5 Remove Quadros
SHIFT + F6 Limpa Quadro Chave
> Avança um Quadro
<
Recua um Quadro
Página10 de 18
 ANTERIOR
 PRÓXIMA
O que será que acontece com a Linha de tempo quando se coloca um símbolo dentro
de outro?
Cada símbolo tem sua própria Linha do tempo e Camadas para organizar as coisas.
Podemos imaginar o Palco como um grande Símbolo do arquivo, onde vamos
preenchendo com outros Símbolos um dentro do outro. Essa é uma característica
poderosa do Flash, pois permite criar animações complexar misturando pequenos
fragmentos de animação, por exemplo: Para criar uma animação de um rosto para um
personagem você pode começar criando os olhos piscando dentro de um Símbolo,
depois juntar com os outros Símbolos do nariz, boca dentro de outro Símbolo e chamá-
lo de Rosto.
Pois é, isso pode parecer um pouco confuso, mas é essencial para facilitar o trabalho
no Flash.
Figura 12 - Múltiplas Linhas de Tempo dentro dos símbolos
A Linha de Tempo principal pode ser organizada em
Cenas. As Cenas servem para dividir o trabalho e a forma de organizar a animação. Em
geral, as Cenas são usadas apenas para realizar animações mais longas, pois em casos
de animações curtas, o melhor é organizar as coisas apenas com Símbolos.
Para inserir uma Cena, basta ir ao Menu: Inserir > Cena. Para gerenciar as Cenas é
preciso abrir o Painel Cenas pelo Menu: Janelas > Outros Painéis > Cenas, ou usar o
Atalho: SHIFT+F2.
Página11 de 18
 ANTERIOR
 PRÓXIMA
1.6 ANIMAÇÕES
Como funciona uma animação? Para uma animação funcionar é preciso pensar nas
posições principais de um objeto no decorrer do tempo, por exemplo: se uma bolinha
cai de uma mesa quais são os Quadros-chaves desse movimento?
Animação, do ponto de vista técnico, nada mais é do que um encadeamento de imagens
estáticas, de um objeto, um desenho, ou qualquer elemento gráfico, em uma sequência
que cria a ilusão de movimento contínuo.
Figura 13 - Quadros de uma animação
No processo de animação tradicional, conhecido como quadro a quadro, os animadores
precisam desenhar todos os quadros da animação. Animadores mais experientes
geralmente ficam encarregados dos quadros chave, que forma a sequencia básica de
um movimento e os “intervaladores” ficam encarregados de produzir os quadros
intermediários e completar a sequência. O Flash funciona como um “intervalador”,
preenchendo os quadros entre os quadros chaves que você definiu.
A maioria das pessoas que se inicia em animação pergunta quantos quadros são
necessários para completar uma determinada ação. Mas a dúvida real não é essa. Na
verdade, é preciso saber quanto tempo será preciso para expor essa determinada ação
de forma inteligível.
É o tempo que irá determinar o início e o fim de alguma ação que se deseja exibir, e
assim o cálculo de quadros necessários fica bem mais fácil e objetivo. Imagine que uma
xícara pode cair de uma mesa até se quebrar no chão. Normalmente isso pode
acontecer em 1 ou 2 segundos, que geral cerca de 40 quadros, mas se a ação, por
algum motivo, for apresentada em câmera-lenta, e durar 6 segundos, a quantidade de
quadros passa para aproximadamente 140.
Para fazer uma animação no Flash deve-se criar Quadros-chaves (F6) na Linha de
Tempo com as posições principais do movimento, os demais quadros serão criados
automaticamente pelo programa (quadros intermediários), esse procedimento é
conhecido como Interpolação dos Quadros Chaves.
Figura 14 - Significado dos Quadros Chaves
Sequências de animação são planejadas tendo como base três pontos principais: quadro
inicial,quadro final e quadros chaves. Por exemplo, um personagem desloca-se andando do
ponto A ao ponto B. Algo bastante simples. A sequência pede a criação de quadros
repetidos que façam a composição dos passos sequenciais em loop, ou seja, em
repetição. Esses quadros se repetirão até o fim do trajeto.
Um loop é uma sequência cíclica na qual o último quadro de um movimento encadeia-
se ao primeiro formando uma corrente contínua. Mas o personagem pode se deslocar
do ponto A para o ponto B, tropeçar em uma pedra no meio do caminho e continuar
andando. Esse evento de tropeçar, quebra a linearidade da sequência. É um quadro
chave, uma ação intermediária e precisa ser considerada com cuidado.
Página12 de 18
 ANTERIOR
 PRÓXIMA
Existem três técnicas básicas de interpolação de movimento: Interpolação Clássica
(Classic Tween), Interpolação de Forma (Shape Tween) e Interpolação de
Movimento (Motion Tween). A animação com armadura é um tipo de animação parecida
com a interpolação de movimento que falaremos mais adiante.
Figura 15 - Os tipos diferentes de animação
 Interpolação Clássica (Classic Tween)
o A interpolação clássica é a forma tradicional de criar animações no Flash. Ela é capaz de
animar a posição, rotação e escala dos Símbolos, além de parâmetros como Brilho,
Transparência entre outros. Basta clicar com o botão direito em cima de qualquer parte de
um Quadro-chave e escolher a opção Interpolação Clássica.
o Para fazer isso você precisa seguir algumas regrinhas simples.
 A animação deve ter um começo e um fim.
 Só pode haver 01 Símbolo por Camadapara animar. Caso contrário o Flash pode criar
um Símbolo automaticamente e o resultado não ser o esperado, ou simplesmente
aparecer uma linha tracejada e não funcionar.
 Use o Símbolo do Quadro final igual ao do Quadro inicial, de preferência.
 Interpolação de Forma (Shape Tween)
o A interpolação de forma ao contrário das demais não precisa de Símbolos, pelo contrário,
como o nome já diz é feita com os desenhos do Flash.
Para ligar esse tipo de animação, você precisa ter um desenho em um Quadro-chave inicial
e o mesmo desenho, com alguma modificação, no Quadro-chave final. Basta clicar com o
botão direito do mouse sobre o Quadro-chave inicial e escolher a opção “interpolação de
forma”, então o Flash irá tentar reposicionar os pontos vetoriais para que a transformação
aconteça, mas se o desenho for muito complexo geralmente essa técnica de animação não
se aplica.
 Interpolação de Movimento (Motion Tween)
o A interpolação de movimento é um pouco diferente das duas
anteriores, pois só funciona em versões do Action Script 3.0. Nesta técnica você não precisa
criar os Quadros-chaves previamente, basta clicar com o botão direito do mouse e selecionar
“interpolação de Movimento”. Depois é só alterar a posição, rotação e escala do objeto no
tempo que os quadros chaves serão criados. Diferente da interpolação clássica, a
interpolação de movimento usa propriedades dentro de um único Quadro-chave.
Existem algumas vantagens em usar a interpolação de movimento, como por
exemplo, a possibilidade de converter a animação em Action Script e usar isso como
um código. Outra vantagem é poder animar as 3 dimensões da rotação (3D) e
também usar o editor de movimento. Porém, a interpolação clássica também é muito
poderosa, pois permite uma edição rápida e um tipo de controle com Gráficos que
permite uma composição sem igual. O ideal é usar o melhor dos dois mundos.
Página13 de 18
 ANTERIOR
 PRÓXIMA
1.7 USANDO ARMADURAS E BONES
A animação com armadura é um processo muito comum em programas 3d como 3D
Studio Max, Maya e Blender. Porém, o conceito também pode ser aplicado a animações
2D também.
A ideia consiste em fazer a forma de um desenho ser vinculada aos bones (ossos) para
que o desenho distorça conforme o movimento dos bones. Funciona igual aos músculos
vinculados aos ossos nos seres vivos.
Para isso funcionar, você precisa primeiro criar uma forma no Flash, depois escolha a
ferramenta Bone como mostra o ícone ao lado.
Com essa ferramenta você poderá criar os ossos necessários para controlar o desenho.
Selecione todo o desenho que deseja vincular ao bone, e depois crie os elementos. Mas
cuidado, desenhos muito complexos geralmente não funcionam com esse tipo de
técnica, é preciso usar formas simples. Outra confusão é o bone funcionar apenas com
parte do desenho, quando o mesmo tem várias cores diferentes você pode acabar
selecionando apena suma parte sem querer.
Figura 16 - Desenho (em vermelho) deformado com os bonés (em rosa e verde)
O Flash cria um objeto de Armadura automaticamente
depois desse processo, use o CTRL+Z para começar de novo caso precise ou use o
comando Modificar/Separar em partes no menu (CTRL+B).
1.8 CONCEITOS DE ANIMAÇÃO
Devemos entender animação como um conhecimento que possui sua própria estética,
a estética do movimento. Isto significa que animação não é simplesmente um
encadeamento de desenhos, mas um encadeamento de desenhos dotados de toda uma
estética particular.
A estética do desenho consiste em saber como funcionam os movimentos dos corpos,
principalmente dos seres vivos, e a partir daí ter a criatividade e o talento de fazer que
tais movimentos expressem uma ideia. Se compararmos o andar de pessoas do gênero
masculino e feminino, vemos que o primeiro possui um movimento mais direto e firme.
Já o andar feminino é mais sinuoso e suave. Podemos descrever ambos os andares da
mesma forma, com um pé após o outro, contudo, suas diferenças estão nos detalhes.
Conseguir perceber as sutilezas do movimento é parte fundamental do trabalho de
animação.
Para entendermos como funciona toda essa estética, vamos observar alguns dos
conceitos mais pertinentes em animação. Vamos chamar esses conceitos de “repertório
básico de animação”. Sendo assim o repertório é formado por “quadros chaves, linha
de ação, compressão extensão e referência para animação ou rotoscopia”.
Quadros chaves
O primeiro item desse repertório certamente são os quadros-chaves. Como já foi
explicado anteriormente, nos quadros-chaves que são pensados os movimentos, eles
são os quadros da animação que diferencia as poses de um personagem. Podemos dizer
que com os quadros-chaves temos a leitura de todo o movimento, são eles que
descrevem o movimento.
Observando o movimento de uma bola que quica no chão, podemos descrever que ela
vem do alto, colido com o chão e volta. Então podemos pensar em três quadros-chaves
para esse movimento.
Figura 17- Quadros-chaves e quadros-chaves com os intervalos
Página14 de 18
 ANTERIOR
 PRÓXIMA
1- Linha de ação: A linha de ação é uma forma simplificada de se pensar os quadros
chaves de personagens ou criaturas complexas de se desenhar. Significa pensar o
desenho de um quadro em uma simples linha, ou seja, pensar o movimento da linha,
pois ela é uma forma mais fácil de ser desenhada.
Imagine ter que fazer todo um desenho de um personagem para testaruma ideia. Caso
o movimento não fique satisfatório, teria que fazer tudo de novo. Assim, tendo a linha
como a espinha dorsal do movimento, fica mais ágil pensar o movimento.
Além disso, com a linha de ação é possível pensar a expressão do movimento,
imaginando os gestos dos personagens, as curvaturas de seus corpos e leveza ou
brutalidade da ação.
Importante lembrar que a linha de ação não é necessariamente uma das linhas do
desenho, mas sim uma linha que sintetiza todas as outras linhas do desenho.
Figura 18 - Quadros de um cachorro correndo e suas linhas de ação
2 - Compressão extensão: Outro princípio muito importante na hora de fazer a animação
é notar que quando parte de um personagem move-se, como são os movimentos dos
braços, geralmente o resto do corpo também se movimenta para antecipar o
movimento, ou por uma questão de força, mesmo que levemente.
O que acontece é que para uma animação ficar com riqueza de detalhes, é preciso
manter em movimento todas as linhas do desenho durante a sequência.
Para isso, uma estratégia muito utilizada é comprimir e estendero objeto em animação,
conforme as forças que atuam no corpo do objeto ou personagem em movimento. Por
exemplo, quando um personagem pisa no chão ao andar, podemos achatá-lo um pouco
em função da força que ele fez ao pisar, e esticá-lo um pouco quando ele esticar a
perna ao continuar o movimento.
Claro que dependendo do efeito dramático desejado, isso pode variar. Como em uma
cena de espanto, o personagem pode ficar paralisado na tela, ou quando se pretende
um efeito cômico a compressão e extensão serão bem exageradas. Isso deve ser de
acordo com a atmosfera do jogo e a criação do personagem. O importante é manter as
linhas do desenho em movimento.
Figura 19 - Animação com compressão e extensão
3 - Referência para animação ou Rotoscopia: Quando é preciso criar uma animação muito
complexa, como uma dança, uma luta ou quando é preciso interpretar um movimento
expressivo, como feições faciais e gestos, o repertório do artista pode não ser suficiente
para realizar tal criação.
Sendo assim, o animador deve fazer uso de referências, como filmagens ou outras
animações. Muitos artistas 3D filmam sua própria imagem para interpretar os
personagens que irão animar. A partir daí, é possível usar o filme de referência,
encontrar os quadros chaves e toda estética do movimento.
Muitas animações são feitas com rotoscopia, que trata de criar toda uma animação
baseando-se em filmagens de atores reais. Na rotoscopia os quadros são feitos em cima
de cada imagem filmada, mas pode ser acrescentados objetos ou mudadas as
características dos atores.
Figura 20 - Imagem de referência e quadro desenhado em rotoscopia
Página15 de 18
 ANTERIOR
 PRÓXIMA
1.9 PLANEJANDO SUA ANIMAÇÃO COM UM STORYBOARD
Bom, até agora vimos como funciona a animação sobre aquilo que cerca o movimento
das coisas em si, ou seja, em função da estética do movimento e de como pensar os
quadros de animação.
Contudo existe outra parte do universo da animação bem mais abrangente, a do
planejamento da narrativa de animação, no qual é desenvolvido um documento
chamado storyboard para as cenas assistidas.
O storyboard é uma planificação de uma sequência em movimento. É quase uma história
em quadrinhos do projeto, mas com as anotações específicas de uma produção áudio-
visual, seja esse projeto um filme, um desenho animado ou um jogo.
Figura 21 - Exemplo de storyboard de um episódio dos Simpsons
Não há quantidade de quadros ou páginas que possa ser apontado como mínimo,
máximo, ou ideal em um storyboard. A estrutura de cada projeto é que determinará o
seu tamanho. Em um jogo de nave espacial com visão fixa, por exemplo, a necessidade
de um storyboard será mínima e serão necessários poucos quadros para se definir a
estrutura e dinâmica visual do jogo.
Sabendo de antemão os enquadramentos, linguagem, ângulos de narrativa e expressão
gráfica, é mais rápido para a equipe “falar a mesma língua” e concentrar os esforços
em uma meta comum.
De forma mais ampla, o storyboard também dá consistência ao projeto. A partir dele
começa-se a entender e visualizar o projeto como um todo, sua linha narrativa e
dinâmica visual, o que é um grande estímulo para a equipe envolvida.
No storyboard o importante não é a qualidade do desenho, mas sim o encadeamento das
ideias e a quantificação do trabalho de animação. Portanto, não é necessário
desenvolver as feições finais dos personagens e ilustrações com acabamento
rebuscado, o importante é estudar a sequência.
O storyboard é um documento vivo que pode ser revisto e reestudado, é com ele que a
equipe pode avaliar o todo, fazendo correções sem prejudicar o conjunto.
Página16 de 18
 ANTERIOR
 PRÓXIMA
1.10 DEIXANDO O FLASH DO SEU JEITO
Para ficar mais à vontade com a ferramenta Flash, você pode escolher algumas
preferências do programa. Vá até o menu Editar>Preferências ou use o atalho CTRL+U.
Como já vimos antes, uma característica do Flash é usar um objeto dentro de outro,
mas e quando a gente quiser usar o CTRL+Z para desfazer alguma coisa, o Flash vai
saber o que foi mudado aonde? Até certo ponto sim, essa é o formato padrão de
“CTRL+Z” no Flash, mas pode gerar problemas e não ser o mais interessante.
Já que o trabalho no Flash é preciso entrar e sair dos objetos a toda hora para edi tar
as propriedades, você pode guardar o CTRL+Z para cada objeto editado ao invés do
documento todo, ou seja, cada Símbolo e o Palco terá um histórico separado de edição
para ser desfeito.
Você encontra essa opção nas preferências:
 Desfazer em nível de documento
 Desfazer em nível de objeto
Figura 22 - Painel de preferências
Outra característica fácil de configurar no Flash é sua interface gráfica. Ela segue os
mesmos princípios de todos os programas da família Adobe, onde os painéis podem ser
arrastados e posicionados onde você desejar.
Por padrão, o Flash vem configurado com o tema Essentials. Você pode usar outro estilo
acessando o menu Janelas>Área de trabalho.
Figura 23 - Interface no modo Essentials
Figura 24 - Interface no modo Classic
Página17 de 18
 ANTERIOR
 PRÓXIMA
1.11 PUBLICANDO COM FLASH
Como comentado anteriormente, o Flash pode publicar para diversos formatos. Mas onde fica
essa configuração?
Figura 25 - Botão para configuração para publicação
As configurações mais importantes para a publicação do Flash é a versão do Player a ser
exportado e a versão do Action Script do arquivo FLA. Essas configurações podem mudar o
painel propriedades e limitar os recursos. Por exemplo, as animações de interpolação de
movimento e a armadura não podem ser usadas no Action Script 2.0. Já o Action Script 3.0 não
pode ser publicado em versões anteriores ao Flash Player 9.0.
Vale lembrar que a linguagem de programação é um recurso em evolução contínua, portanto
alguns recursos de programação podem não estar disponíveis dependendo da versão que você
usar, ou até os mesmos recursos podem ser interpretados ligeiramente diferentes em versões
mais antigas.
A exemplo disso, a publicação para Air Player contempla vários recursos de programação que o
Flash Player não possui, por exemplo, a possibilidade de salvar arquivos no computador do
usuário.
Figura 26 - Painel de publicação do Flash
1.12 BOAS PRÁTICAS COM O FLASH
Para usar bem o Flash vamos ver algumas dicas fundamentais para usar plenamente o programa:
 Use um nome intuitivo para as camadas. Descreva com clareza a finalidade ou o conteúdo de cada
camada ou pasta, quando for nomeá-los.
 Se estiver usando Action Script no arquivo, use uma camada exclusiva para o Script, outra camada
para os Rótulos (labels) e outra camada para os sons.
 Bloqueie as camadas que não estiver usando e que não têm conteúdo (Action Script, Rótulos e sons),
para evitar de criar conteúdo em um lugar que não queria.
 Use pastas na biblioteca para organizar os elementos semelhantes Normalmente, os nomes de
pastas usados são Botões, Clipes de filme, Gráficos, Recursos, Componentes etc.
 O Flash pode utilizar imagens e sons, procure configurar corretamente a compactação desses
arquivos para que haja um equilíbrio entre qualidade e tamanho de arquivo. Não redimensione uma
imagem no Flash apenas para caber no Palco, procure usar a imagem no tamanho necessário e
exato em pixels.
 Na internet, um conteúdo feito em flash não aparece bem em sites de pesquisa. É possível configurar
melhor o flash para aparecer com mais pertinência nas pesquisas online. Saiba mais:
<http://visibilidade.net/perguntas-frequentes/optimizar-site-flash-motores-de-busca.html>
Página18 de 18
 ANTERIOR
ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES
WEB
WEBAULA 1
Unidade 2 - ACTION SCRIPT 3.0
2.1 Fundamentos do Action Script
Você já tentou usar o Action Script no Flash? Caso já
tenha feito alguma coisa é provável que tenha escrito alguma coisa na Linha de Tempo
em algum Quadro-chave. Pois é, o Flash é uma ferramenta que permite misturar
elementos gráficos com programação, isso gera muitas dúvidas para quem trabalha
com o aspecto visual e também para quem está mais acostumado com ambientes de
programação puros como Java, C#, C++, entre outros.
Do ponto de vista do programador, devemos entender o Flash como uma ferramenta
que já cria e instância coisas sem precisar usar tanto código para isso, ou seja, os
ponteiros que serão usados para a aplicação já podem ser descritos no Palco do Flash.
Vamos entender como isso evoluiu.
Nas versões mais antigas do Flash, o Action Script 1.0 (AS1)
foi criado para fazer coisas muito simples dentro do programa, era uma maneira mais
trivial de executar coisas como, dar um “play” em uma animação, abrir um link, entre
outras coisas. Com o passar do tempo, o Flash foi sendo usado cada vez mais para
fazer coisas mais complexas e sua linguagem acompanhou isso, culminando no Action
Script 2.0 (AS2) que nada mais foi que a ampliação da biblioteca do AS1. O AS2 fazia
uma porção de coisas, mas em geral, era alvo de muitas reclamações da parte dos
programadores, pois é uma biblioteca pouco organizada.
Hoje o Flash possui duas bibliotecas distintas: o Action Script 2.0 e o Action Script 3.0
(AS3). De fato as duas linguagens operam em máquina virtual diferente, por isso os
projetos em Flash devem ser bem pensados a princípio, para decidir pelo AS2 ou pelo
AS3. Veja mais sobre o Action Script em:
<http://pt.wikipedia.org/wiki/Action_Script>
O Action Script é uma linguagem de script orientada a objetos, com a sintaxe muito
parecida com Java Script, pois ambas são baseadas no padrão ECMAScript.
O Flash é uma ferramenta essencialmente gráfica, para que possamos usá-lo de forma
eficiente com o Action Script, precisamos entender como vincular os códigos aos
gráficos no Flash.
Por comodidade, a ferramenta permite que se escrevam códigos na Linha de Tempo.
Essa forma de criar scripts no Flash permite desenvolver algo bem rápido, porém pode
deixar seu código pouco reutilizável ou bastante bagunçado em casos de projetos
maiores. A melhor forma de organizar os códigos é criando Classes em arquivos de
Actions Script, conhecidos como arquivos de extensão “.as”.
Cada Classe pode ser vinculada a um Símbolo no Flash ou ao Palco, desde que ela seja
uma derivada de uma Classe visual do Flash, geralmente das
Classes Sprite ou MovieClip. A classe vinculada ao Palco é sempre a classe principal,
ou seja, a de nível mais alto na hierarquia.
Figura 1 - Campo para vincular a Classe principal no Palco
As classes podem ser criadas no Flash, basta ir em Arquivo/ Novo e escolher a opção
Action Script 3.0. Escolha o nome da Classe e clique em ok. Um arquivo com a estrutura
básica de uma Classe em Action Script será criada.
Outra forma de vincular um Script a um objeto no Flash é mapeando o Script ao Símbolo
que está na Biblioteca. Você pode fazer isso no momento da criação do Símbolo
expandindo a tela de criação, ou depois nas propriedades, clicando com o botão direito
no Símbolo que está na Biblioteca.
Figura 2 - Painel de criação de Símbolos resumido e expandido
Exemplo de uma Classe em Action Script
No caso, o campo Class é o caminho para seu Script e o campo Base Class é o caminho
para a Classe que você deseja derivar sua nova Classe, você só precisa preencher o
segundo campo se estiver criando uma Classe automática do Flash, ou seja, sem um
arquivo externo de fato, caso contrário o Flash irá se orientar pelo o que estiverdescrito
no seu arquivo “.as”.
Para entender melhor a estrutura de classes do AS3, é recomendado olhar a referência
da linguagem (o link abaixo é referente a toda a plataforma Flash):
<http://help.adobe.com/pt_BR/FlashPlatform/reference/actionscript/3/ind
ex.html>
2.2 FLASH E ORIENTAÇÃO A OBJETO
Vamos revisar alguns conceitos de orientação a objetos: Objetos são os tipos de dados,
visíveis ou não, usados para representar as coisas no Flash, por exemplo:
/ nome é o objeto, e estamos mudando sua propriedade “lado”
nome.lado = 10;
Classes descrevem a natureza dos objetos, ou seja, todo objeto pertence a uma classe.
// programação orientada à objeto
class Nomedaclasse
{
function Nomedaclasse(){
//...
}
}
Métodos e propriedades são o que os objetos podem fazer dentro de uma Classe.
// nome é o objeto, e estamos mudando sua propriedade “lado” e
// chamando um método “virar”
nome.lado = 10;
nome.virar();
Podemos encarar as CLASSES como a natureza das coisas, os OBJETOS
como substantivos, as PROPRIEDADES como adjetivos e os MÉTODOS como verbos.
// nome é algo (substantivo) da natureza Pessoa, com o adjetivo
// “lado” que pode fazer algo como “virar”, que é um verbo
var nome:Pessoa = new Pessoa();
nome.lado = 10;
nome.virar();
Eventos são processos que ocorrem no programa que podem ser escutados para
realizar outros processos. No AS3 isso é fundamental, pois permite criar todo tipo de
interação com os objetos.
// addEventListener é um método para por um “escutador de evento” no
// objeto objeto. Event.ENTER_FRAME é apenas um valor que guarda o
// nome do evento a ser escutado e “loop” é o a função que será
// executada no mesmo momento que o evento ocorrer.
// A função loop recebe um valor do tipo Event. Existem vários tipos
// de evento no Flash.
objeto.addEventListener(Event.ENTER_FRAME, loop);
function loop(e:Event):void{
e.target.x += 5;
}
Criando um programa em Flash
function escrevaIsso (oque:String)
{
trace(oque);
}
escrevaIsso(“professor legal”);
Funções são comandos que guardam blocos de instruções que podem ser executados
quando as funções são chamadas.
Vamos ver como fazer isso na prática? Você pode criar um Símbolo do tipo Clipe de
Filme e colocá-lo no Palco do Flash. Para poder acessá-lo através da programação pela
Linha de Tempo é preciso dar um nome a essa instancia do Símbolo. Toda vez que
publicamos o SWF o Flash cria nomes automáticos para os objetos que você não
escolheu o nome, mas você pode definir esses nomes das instancias para poder usá-
los na programação.
Figura 3 - Campo para dar nomes às instancias de objetos no Flash
Selecione o Clipe de Filme criado e vá em
propriedades, digite o nome: objeto. O nome precisa ser sem acentos, sem espaços e
sem começar por um número. O Flash também diferencia maiúsculas de minúsculas.
Agora selecione o primeiro Quadro Chave e abra o Painel de Action Script com o
atalho F9.
Escreva exatamente o código acima e veja o que acontece. Seu objeto deverá começar
a andar horizontalmente, porque o evento Event.ENTER_FRAME é um evento
chamado a cada atualização de tela do Flash, portanto, a função loop irá mover 5 pixels
o seu target na coordenada x.
SINTAXE
No Flash os principais elementos de sintaxe são:
.
para ordenar objetos, propriedades,
métodos
; para encerrar uma instrução
( ) para passar uma instrução a uma função
{ } para criar um bloco de instruções
[ ]
para atingir um valor indexado ao objeto
(array)
// para documentar o código
:
para atribuir um tipo a uma variável ou
função
“ para valores do tipo texto (string)
No Flash os objetos mais usados geralmente são esses:
Tipos de
valores:
Formato
String “nome”
Movie clip nome
Button nome
Text field nome
Number 5
Boolean true / false
Object Nome
Function Nome
2.3 CARREGANDO UM MOVIECLIP DA BIBLIOTECA PARA O PALCO
Para carregar um objeto da Biblioteca para o palco, você precisa adicionar pelo menos
duas linhas de código:
//ActionScript 3 – no frame 1
var cao = new Cachorro();
addChild(cao);
Neste caso, “Cachorro” é uma Classe vinculada a um Símbolo na Biblioteca e o Script
foi colocado na Linha de Tempo principal.
Os objetos no AS3 podem ser reposicionados a qualquer momento usando o método
addChild, a maioria dos objetos visuais herdam esse método.
2.4 NAVEGANDO PELAS LINHAS DO TEMPO
Para controlar as animações através de Script é bem simples, você poderá usar 04
métodos básicos que pertencem à classe MovieClip: play, stop, gotoAndPlay e
gotoAndStop.
 play: inicia a reprodução de alguma Linha de Tempo a partir
do ponto onde ela está. O play é automático em todos os objetos do tipo MovieClip.
 stop: interrompe a reprodução de um MovieClip, muito usado no começo das aplicações
para interromper a reprodução da Linha de Tempo principal, para que esta possa ser
usada como telas ao invés de animações.
 gotoAndPlay: semelhante ao método play, porém permite que o a reprodução comece
a partir de um ponto dado, que pode ser um valor numérico do Quadro Chave ou um
texto indicado o rótulo do Quadro Chave.
 gotoAndStop: equivalente ao gotoAndPlay, porém para interromper a reprodução e
reposicionar a animação.
Figura 4 - Exemplo de Rótulo (Label)
Os Rótulos (Labels) são muito úteis para organizar as animações, pois permite criar
um vínculo entre as animações e o script de forma independente, pois caso seja
necessário reposicionar os rótulos, isso não irá afetar a programação e vice versa. Já
no caso de usar o valor do Quadro Chave.
Carregamento de arquivos externos por url
O Flash pode carregar diferentes arquivos externos: uma imagem, outro arquivo swf,
ou um arquivo de texto em XML para carregar dados.
Como fazer isso no Flash? Você precisa de dois objetos para fazer isso: um carregador
e um com a URL do arquivo que deseja carregar.
Veja o exemplo abaixo:
//carrega arquivo externo
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onCompleto);
var myrequest:URLRequest = new URLRequest("myfile.xml");
loader.load(myrequest);
function onCompleto(ev:Event){
var myxml:XML = new XML(ev.target.data);
trace(myxml);
}

 1
 2.5 CRIAÇÃO DE SITES
 O primeiro é o objeto responsável pelo
carregamento, logo após criar o carregador já adicionamos um escutador de
evento para quando o carregamento completar. Em seguida criamos o objeto que
referencia a URL do arquivo a ser carregado, repare que a url é passada no
construtor do objeto. Após essas declarações passamos a agir de fato usando o
método “load” do objeto carregador passando o objeto criado com a URL do
arquivo. Na função atribuída ao evento “COMPLETE” do carregador, indica que
será disparado quando o carregamento estiver completo, assim os dados
carregados estarão disponíveis para serem usados pelo Action Script, no caso,
para a criação de um objeto do tipo XML. O comando trace serve para criar
mensagens no Flash para ajudar no desenvolvimento.
 2.5.1 Criando um pré-carregador
 Para criar um pré-carregador do Flash podemos usar o seguinte Script no primeiro
Quadro da Linha de Tempo principal com uma caixa de texto (Textfield)
instanciada com o nome de loading.
stop();
var percent = 0;
var total = 0;
var loaded = 0;
function verificaLoading(ev:Event) {
loaded = loaderInfo.bytesLoaded;
total = loaderInfo.bytesTotal;
percent = int((loaded*100)/total);
loading.text = 'Carregado '+percent+'%';
if (percent>99) {
nextFrame();
removeEventListener(Event.ENTER_FRAME,verificaLoading);
}
 2.5.2 Exemplos legais com o Flash
 Faz o carregamento do arquivo em partes, ou seja, por Quadros. Então quando
mais vazio você deixar o primeiro quadro, mais rápido o Flash irá mostrar algum
conteúdo na tela quando for publicado na internet.
 Por isso logo no começo do Script já usamos o método stop(); para interromper
a reprodução automática. Em seguida, declaramos algumas variáveis que serão
usadas para uma conta matemática. Dentro da função verificaLoading temos a
lógica do processo, onde precisamos saber o quanto já foi carregado (loaded) o
quanto temos para carregar (total) e converter essas informações em um valor
de porcentagem (percent). Com essas informações é possível escrever no objeto
loading (TextField) alguma informação sobre o carregamento. Por final, existe
uma verificação condicional que caso o valor da porcentagem seja maior que
99%, a Linha de tempo principal irá avançar 01 Quadro e o escutador de evento
será retirado com o método removeEventListener, para não interferir mais.
 2.5.3 Criando um jogo simples
 Para criar um jogo bem simples no Flash podemos usar um Símbolo para
representar balões. Esses balões deverão aparecer na tela e o usuário deverá
clicar neles para pontuar. Então precisamos de dois elementos gráficos: 01
Símbolo de Balão e 01 caixa de texto para escrever os pontos.
 Ao salvar o Símbolo do Balão podemos atribuir o nome Balao para sua Classe.
Não precisamos criar a classe propriamente, o Flash irá cuidar disso. Vamos usar
essa classe apenas para referenciá-la no Action Script do jogo. Quando a classe
indicada não encontra o arquivo “.as” correspondente, o flash mostra uma
mensagem dizendo que ele vai gerar uma classe com aquele nome em tempo de
compilação. Apenas clique em OK.
 Figura 5 - Mensagem de criação automática de Classe pelo Flash

 Agora vamos adicionar o campo de texto no Palco do Flash. Use o tipo Classic
Text, mude seu comportamento de Static Text para Dynamic Text, escreva o
nome de sua instancia como pontos, no painel propriedades.
 Pronto, agora você pode selecionar o primeiro Quadro da Linha de Tempo
principal para escrever o Script.
}
function adicionaBalao () {
var balao:Balao = new Balao();
balao.x = Math.random() * stage.stageWidth;
balao.y = Math.random() * stage.stageHeight;
addChild(balao);
balao.addEventListener(MouseEvent.CLICK, clickbalao);
}
function clickbalao(e:MouseEvent){
var balao:Balao = e.target as Balao;
removeChild(balao);
points += 20;
pontos.text = points.toString();
}
 O código começa com a importação de duas classes da biblioteca do Flash. Isso
é necessário porque está sendo usado a referência Event.ENTER_FRAME e
MouseEvent.CLICK. Em seguida, são declaradas duas variáveis, um para
controlar o tempo em que os balões irão aparecer (count) e outro para controlar
os pontos feitos (points).
 Para o game funcionar, foi adicionado um escutador do evento ENTER_FRAME,
para poder checar a todo momento se será criado um novo balão. Dentro da
função loop, existe uma lógica que irá permitir criar um balão a cada 12
contagens. É usado a função adicionaBalao para fazer isso.
 Na função adicionaBalao o Símbolo criado na Biblioteca é instanciado no palco,
sua posição é sorteada usando o método random da classe Math, para contas
matemáticas. As posições possíveis respeitam o tamanho do Palco através da
referencia stage.stageWidth e stage.stageHeight. Todos os objetos visuais tem a
propriedade stage, que referencia o Palco. Em cada balão adicionado é colocado
um evento escutador para saber se ele foi clicado pelo mouse, por isso o tipo do
evento é MouseEvent.CLICK.
 Na função clickbalao é preciso criar um ponteiro para o objeto que executou o
evento, isso é feito através do e.target que será interpretado como um objeto do
tipo Balao, pois já sabemos isso de antemão. A tipagem do e.target é genérica e
o Flash não saberia dizer que métodos usar nesse objeto, por isso devemos criar
um ponteiro, para poder remover o balão do Palco através do método
removeChild.
 Após isso, os valores de points são somados e o valor é mostrado no objeto de
texto pontos.

 Webaula: Programando um Jogo em Flash
 O Plugin Silverlight está desabilitado ou não foi instalado em seu browser, faça o download
clicando aqui ou ative o mesmo.
 2.6 CRIANDO UM BOTÃO ARRASTÁVEL
 Para criar um botão para ser arrastado você precisa de um Símbolo. Todos os
objetos visuais do Flash podem receber eventos do mouse e seu comportamento
pode ser controlado por algumas propriedades básicas:
 objeto.mouseChildren:Boolean / Determina que os filhos deste símbolo são
reativos ao mouse ou não.
 objeto.buttonMode:Boolean / Determina se o objeto irá se comportar como
um botão mostrando o ícone de clique para o mouse.
 objeto.mouseEnabled:Boolean / Determina se os eventos de mouse serão
disparados ou não.
import flash.events.MouseEvent;
botao.addEventListener(MouseEvent.MOUSE_DOWN,pega);
stage.addEventListener(MouseEvent.MOUSE_UP,solta);
function pega (e:MouseEvent) {
botao.startDrag();
}
function solta(e:MouseEvent) {
botao.stopDrag();
}
 No código acima, a classe MouseEvent é importada para poder usar os valores
nas funções que estão escutando o evento.
 O objeto ‘botão’ deve existir no palco para que tudo funcione. Nele é adicionado
um escutador de evento para o evento de pressionar o mouse sobre ele.
 Na propriedade stage, que faz referência ao palco do Flash, é adicionado um
evento escutador para quando soltar o mouse. Isso é feito no Palco porque ao
deslocar o mouse a posição do botão pode sair de baixo do ponteiro do mouse
por razões de sincronismo entre o sistema operacional e a taxa de atualização do
Flash. Então para evitar isso é colocado um escutador no objeto inteiro do flash
o Palco.
 Por fim são declaradas as duas funções usadas nos escutadores, uma para
arrastar que usa o método startDrag (começe a arrastar) e outra que usa o
método stopDrag (pare de arrastar).

 2.7 OUTRAS DICAS
 Você pode usar outro programa para escrever o Action Scritp, um muito bom é o
software FlashDevelop, que também permite exportar conteúdo em SWF usando
ActionScript puro.
 <http://www.flashdevelop.org>
 Outra forma do Flash trabalhar é usar bibliotecas de programação pré compiladas
ou protegidas, ou seja, bibliotecas disponíveis na internet podem ser usadas para
facilitar o desenvolvimento. Por exemplo, você pode usar uma biblioteca de física
chamada Box2D para simular comportamentos e colisões entre os objetos, muito
usado em jogos em Flash. Outra biblioteca muito famosa é o Tweener, que
permite fazer animações usando apenas códigos simples.
 Para adicionaruma nova biblioteca vá nas propriedades do documento e selecione
o ícone com a chave de boca. Dentro você vai encontrar opões para importação
de arquivos em SWC.
 Figura 6 - Usando arquivos SWC

TECNOLOGIAS PARA APLICAÇÕES WEB
WEBAULA 1
UNIDADE 1: INTRODUÇÃO ÀS TECNOLOGIAS JAVA ENTERPRISE
EDITION(Conceitual)
O que é uma aplicação Java Web?
Segundo o Netbeans.org (2013), uma aplicação Java Web gera páginas Web
interativas, que podem conter vários tipos de linguagens de marcação (HTML, XHTML,
XML, entre outras) e conteúdo dinâmico.
Saiba mais sobre linguagens de marcação:
http://www.w3schools.com/html/html_intro.asp
http://www.w3schools.com/html/html_xhtml.asp
http://www.w3schools.com/xml/
Geralmente composta por componentes Web, como:
 JavaServer Pages (JSP);
 Servlets;
 JavaBeans.
Estes componentes servem para modificar e armazenar dados temporariamente,
interagir com bancos de dados e webservices e processar o conteúdo como resposta às
solicitações do cliente.
Java EE para aplicação Web
O Java EE (I), conforme definição de sua dona e mantenedora a empresa “Oracle”, é
um kit de desenvolvimento integrado livre usado para construir, testar e implementar
aplicativos Java Web. É uma plataforma amplamente usada que reduz o custo e a
complexidade do desenvolvimento, implantação e gerenciamento de aplicações de
várias camadas centradas no servidor.
O Java EE é uma especificação que agrupa diversas outras especificações.
Para fazer download da plataforma JEE e de sua documentação oficial
acesse:
http://www.oracle.com/technetwork/java/javaee/documentation/in
dex.html
Para consulta à especificação Java EE, acesse:
http://docs.oracle.com/javaee/6/api/
Para preparação de um ambiente de trabalho, o seguinte manual
pode ser utilizado em:
http://novatec.com.br/livros/javaparaweb/capitulo9788575222386.
pdf
Ambientes de Desenvolvimento
Uma IDE (Integrated Development Environment) ou simplesmente ambiente integrado
de desenvolvimento deverá ser utilizado para otimizar o processo de desenvolvimento
de uma aplicação Web. Essas IDE´s proporcionam maior produtividade em um
ambiente de programação, portanto, devem ser adotadas para uso não somente para
esta disciplina ou especialização, mas também em qualquer ambiente de
desenvolvimento que utilizar as tecnologias Java que serão abordadas nesta disciplina.
As IDE´s mais popularmente conhecidas e utilizadas que poderão ser adotadas são o
Eclipse e o Netbeans.
Saiba mais sobre as principais IDE´s em:
http://www.eclipse.org/ e http://netbeans.org/
O padrão MVC e Front Controller
O modelo MVC (Model View Controller) nada mais é do que um design pattern útil para
resolver problemas de modelagem de projetos, se usado de forma adequada. Mas
afinal, o que é um design pattern?
Design patterns ou padrões de projetos são soluções para
problemas enfrentados que alguém um dia teve e resolveu aplicando um modelo que
foi documentado e que você pode adaptar de acordo com sua necessidade de solução.
Mais sobre design patterns em:
http://www.dcc.ufrj.br/~schneide/PSI_981/gp_6/design_patterns.html
O MVC (model-view-controller) é um padrão de arquitetura que tem por objetivo isolar
a lógica do negócio da lógica de apresentação de uma aplicação. Esse padrão (ou
alguma variação) é amplamente adotado nas principais plataformas de
desenvolvimento atuais. Em particular, muito utilizado na plataforma Java.
O padrão MVC divide a aplicação em três tipos de componentes: modelo, visão e
controlador.
 Modelo: encapsula os dados e as funcionalidades da aplicação.
 Visão: é a responsável pela exibição das informações, cujos dados são obtidos no
modelo.
 Controlador: recebe as requisições do usuário e aciona o modelo e/ou a visão.
Vídeo: Introdução ao Design Pattern MVC:
https://www.youtube.com/watch?v=-ykX79QkRsI
Imagine todas as requisições sendo recebidas por um único componente, esta é a
proposta do padrãoFront Controller. Assim as tarefas que devem ser realizadas em
todas as requisições podem ser implantadas por esse componente, evitando a repetição
de código e facilitando a manutenção do sistema.
Web Container
Necessidades de uma aplicação Web
HTTP
Os usuários de uma aplicação Web utilizam navegadores (browsers) para interagir com
essa aplicação. A comunicação entre navegadores e uma aplicação web é realizada por
meio de requisições e respostas definidas pelo protocolo HTTP. No caso específico de
uma aplicação web Java noframework JSF 2.1 uma aplicação web nada mais é do que
um documento XHTML, que descreve para o navegador como exibir e formatar as
informações do documento. Sendo assim, os desenvolvedores de aplicação web devem
estar preparados para trabalhar com o protocolo HTTP.
URI´s
O protocolo HTTP permite a clientes e servidores interagir e trocar informações de uma
maneira simples e confiável. O HTTP utiliza o URI (Uniform Resource Indentifier) para
identificar dados na Internet. Os URI’s que especificam as localizações de documentos
são chamados URL’s (Uniform Resorce Locators). URL’s comuns fazem referência a
arquivos, diretórios ou objetos e podem realizar tarefas complexas, como pesquisa em
um banco de dados e pesquisas na Internet.
URL´s
Se você conhecer o URL de um recurso ou arquivo público disponível em qualquer lugar
da Web, você poderá acessá-lo por meio do HTTP.
Desmembrando uma URL
Tabela 1: detalhamento da url http://www.unopar.br/pesquisa/agenda.jsp.
Componentes do HTTP
http://
indica que o recurso
deve ser obtido
utilizando o protocolo
http.
www.unopar.br
é
o hostname totalmente
qualificado do servidor
(host) em que o recurso
reside. Ohostname é
convertido em um
endereço IP por servidor
(DNS) que mantém um
banco de dados dos
nomes de host e seus
endereços IP
correspondentes.
/pesquisa/agenda.jsp
o restante do URL
especifica o nome do
recurso solicitado e seu
caminho ou localização
no servidor Web.
Fonte: Do autor (2013)
Fazendo uma solicitação e recebendo uma resposta
Quando dado uma URL, um navegador Web realiza uma transação HTTP para recuperar
e exibir a página Web nesse endereço.
Deitel (2010) ilustra esta transação, mostrando a interação (vide figuras 1 e 2) entre o
navegador Web (cliente) e aplicativo de servidor Web (Servidor).
Figura 1: Cliente interagindo com o servidor Web. Passo 1: A Solicitação GET.
Fonte: Deitel (2010)
O navegador Web envia uma solicitação HTTP ao servidor. A solicitação na forma mais
simples é:
GET /pesquisa/agenda.jsp HTTP 1.1
A palavra get é um método HTTP indicando que o cliente deseja obter um recurso do
servidor. O restante da solicitação fornece o nome do caminho do recurso (por exemplo,
um documento XHTML), o nome do protocolo e o número da versão (HTTP/1.1).
Figura 2: Cliente interagindo com servidor Web. Passo 2: A resposta HTTP.
Fonte: Deitel (2010).
Qualquer servidor que entende o protocolo HTTP pode converter essa solicitação e
responder apropriadamente.
O servidor primeiro responde enviando uma linha do texto indicando a versão HTTP,
seguida por um código numérico e uma frase descrevendo o status da transação. Por
exemplo,
HTTP/1.1 200 OK
indica sucesso, enquanto
HTTP/1.1 404 Not Found
Lista completa dos códigos que indicam o status de uma transação HTTP
acesse:www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
O cabeçalho HTTP
O servidor envia um ou mais cabeçalhos HTTP que fornecem informações adicionais
sobre os dados que serão enviados. No caso abaixo, o servidor está enviando um
documento de texto XHTML, portanto, um cabeçalho HTTP seria lido:
Content-type: text/html
As informações deste cabeçalho especificam o tipo Multipurpose Internet Mail
Extensions (MIME) do conteúdo que o servidor está transmitindo ao navegador. O
MIME é um padrão Internet que especifica formatos de dados para que os programas
possam interpretar os dados corretamente. Por exemplo, o tipo MIME image/jpeg indica
que o conteúdo é uma imagem JPEG. Quando o navegador recebe esse tipo de MIME ele
tenta exibir a imagem.
Lista de tipos de MIME em:
Solicitações HTTP Get e Post
Os dois tipos de solicitação HTTP mais comuns são Get e Post (também conhecidos
como métodos de solicitação). Uma solicitação Get, em geral, pede um recurso
específico em um servidor. Os usos comuns das solicitações Get são recuperar uma
imagem ou um documento XHTML ou, ainda, buscar resultados de pesquisa com base
de um termo de pesquisa submetido pelo usuário. Uma solicitaçãoGet envia
informações ao servidor no URL, por exemplo:
www.google.com.br/search?q=unopar
Nesse caso, search é o nome do handler de formulário no servidor Google, ‘q’ é o nome
da variável no formulário de pesquisa do Google e ‘unopar’ é o termo de pesquisa. O
‘?’ separa a string de consulta do restante do URL em uma solicitação. Um par
de nome/valor é passado para o servidor com o nome e o valor separados por um sinal
de igual (=). Se mais de um par de nome/valor é for submetido, cada um é separado
do próximo por caractere & (“e” comercial). O servidor utiliza os dados passados em
uma string de consulta para recuperar um recurso XHTML cujo atributo method é
configurado como “get”, digitando o URL (possivelmente contendo uma string de
consulta) diretamente na barra de endereços do navegador ou por meio de
um hiperlink.
Uma solicitação POST geralmente posta (envia) dados para o servidor. Os usos comuns
das solicitações POST são enviar dados de formulário ou documentos a um servidor. A
solicitação POSTenvia dados como parte de mensagem HTTP, não como parte do URL.
Uma solicitação GET, em geral, limita a string de consulta (isto é, tudo à direita do ‘?’)
a um número específico de caracteres (2.083 no Internet Explorer; mais em outros
navegadores), assim, frequentemente é necessário enviar grandes volumes de
informação utilizando o método POST. Este último também é às vezes preferido porque
ele oculta os dados submetidos do usuário, incorporando-os as uma mensagem HTTP.
Importante:
Os dados enviados em uma solicitação POST não são parte do URL, e o usuário não
pode ver os dados por padrão. Mas há ferramentas disponíveis que exibem esses dados,
portanto você não deve supor que os dados sejam seguros somente porque uma
solicitação POST é usada.
Acesso simultâneo
Além de todas as particularidades observadas no protocolo HTTP, na grande maioria
dos casos, as aplicações Web devem ser acessadas por diversos usuários ao mesmo
tempo. Consequentemente, os desenvolvedores Web devem criar ou utilizar algum
mecanismo eficiente que permita esse tipo de acesso.
Conteúdo dinâmico
As páginas de uma aplicação Web devem ser geradas dinamicamente. Por exemplo,
quando um usuário de uma aplicação de e-mail acessa sua caixa de entrada, ele deseja
ver todos os e-mailsenviados até aquele momento. A página contendo a lista de e-
mails deve ser gerada novamente todas as vezes que essa página for requisitada. Logo,
os desenvolvedores Web devem criar ou utilizar um mecanismo eficiente que permita
que o conteúdo das páginas das aplicações Web seja gerado dinamicamente.
Figura 3: Necessidades de uma aplicação Web.
Fonte: Do autor (2013).
Solução
Resolver os três problemas apresentados (Manipulação de protocolo HTTP, Acesso
simultâneo e conteúdo dinâmico) consumiria boa parte do tempo de desenvolvimento,
além de exigir conhecimentos técnicos extremamente específicos por parte dos
programadores. Para facilitar o desenvolvimento da aplicação Web, a plataforma Java
oferece uma solução genérica que pode ser utilizada para desenvolver aplicações Web
que você verá a seguir:
Figura 4: O Web Container.
Fonte: Do autor (2013).
Uma aplicação Web Java deve ser implantada em um Web Container para obter os
recursos fundamentais que ela necessita. Um Web Container é responsável:
 Pelo envio e recebimento de mensagens HTTP.
 Por permitir que as aplicações sejam acessadas simultaneamente por vários usuários de
uma maneira eficiente.
 Por permitir que as páginas de uma aplicação Web sejam geradas dinamicamente.
Um dos Web Containers mais importantes do mercado é o Tomcat. Você também
poderá utilizar um servidor de aplicação Java EE como o Glassfish, pois ele contém
um Web Container internamente.
Mais sobre Web Containers em:
http://tomcat.apache.org/
http://glassfish.java.net/
00:00
00:00
Servlet
Como é comum na plataforma Java, foi definida uma especificação para padronizar a
interface dos recursos oferecidos pelos Web Containers. Essa especificação é chamada
de Servlet e atualmente está na versão 3.0. A especificação Servlet faz parte do Java
EE.
Para consulta à especificação Servlet acesse:
http://jcp.org/en/jsr/stage?listBy=public
Apesar das especificações, os Web Containers possuem algumas diferenças nas
configurações que devem ser realizadas pelos desenvolvedores, sendo assim, não há
100% de portabilidade, no entanto, a maior parte das configurações e do modelo de
programação é padronizado. Portanto, se você conhece bem um dos Web Containers,
também conhece bastante dos outros.
Para criar um Servlet, podemos seguir os seguintes passos:
 Criar uma classe.
 Herdar da classe javax.servlet.http.HttpServlet.
 Reescrever o método service().
 Utilizar a anotação @WebServlet para definir a URL que será utilizada para acessar
a servlet. Essa anotação existe somente após a especificação servlet 3.0. Antes essa
configuração era realizada a partir do arquivo web.xml.
O método servisse ( ) é executado toda vez que uma requisição HTTP é realizada para
uma URL definida na anotação @WebServlet. Esse método recebe dois parâmetros. O
primeiro é a referência do objeto da classe HttpServletRequest que armazena todos os
dados da requisição. O segundo parâmetro é a referência do objeto da classe
HttpServletResponse que armazenará o conteúdo gerado pela servlet.
Conteúdo na Resposta
Para inserir conteúdo texto na resposta HTTP que será enviada para o navegador do
usuário, devemos utilizaros métodos getWriter( ) e println( ). Geralmente, o conteúdo
inserido na resposta HTTP é texto HTML, conforme o exemplo abaixo:
Mais sobre Servlets:
http://www.devmedia.com.br/desvendando-os-servlets-3-0-java- magazine-
81/17436
http://www.oracle.com/technetwork/java/index-jsp-135475.html
http://www.javabeat.net/2008/12/new-features-in-servlets-3-0/
Aplicação Web Java
A estrutura de pastas (diretórios) de uma aplicação Web Java deve seguir algumas
regras para que possa ser implantada em um Web Container. Imagine um novo projeto
de aplicação Web cujo nome seja “AgendaJSF”, a estrutura do projeto deverá ser a
seguinte:
 AgendaJSF/
o WEB-INF/
 classes/
 lib/
 web.xml
Obs: um diretório META-INF poderá fazer parte da estrutura caso seja necessário
configurar um arquivo contexto.xml para conexão com banco de dados.
A tabela abaixo apresenta de forma detalhada a estrutura da aplicação Java Web:
Geralmente, as IDE’s criam toda a estrutura de diretório exigidas pelos Web Containers.
Na prática, não temos o trabalho de criar esses diretórios manualmente.
Processando Requisições
Após implantar a aplicação Web Java em um Web Container, as requisições e respostas
HTTP já estão sendo processadas pelo Web Container, que também já permite o acesso
de múltiplos usuários a esta aplicação.
Em seguida, devemos definir como o conteúdo das páginas da aplicação é gerado, para
isso, podemos criar um Servlet.
Frameworks
Atualmente, é improvável que um projeto de desenvolvimento de uma aplicação Web
utilize diretamente Servlets, pois a produtividade seria pequena e a manutenção
custosa. Vários frameworksforam criados para facilitar o desenvolvimento e a
manutenção de aplicações Web. Apesar de serem baseados em Servlets,
esses frameworks oferecem recursos adicionais para as aplicações. Segue uma lista dos
principais frameworks para aplicações Web Java:
 JSF
 Struts 1.x
 Struts 2.x
 Spring MVC
Visão Geral do JSF 2
Atualmente, o principal framework para desenvolvimento de aplicações Web em Java é
o JSF (JavaServer Faces). O JSF é fortemente baseado nos padrões MVC e Front
Controller e fornece um conjunto de componentes de interface com o usuário, ou
componentes JSF, que simplificam o design de páginas Web. Esses componentes são
semelhantes aos componentes SWING utilizados para construir aplicativos GUI.
No JSF o controle é composto por um servlet denominado FacesServlet, por arquivos
de configuração e por um conjunto de manipuladores de ações e observadores de
eventos. OFacesServlet é responsável por receber as requisições da Web, redirecioná-
las para o modelo e então remeter uma resposta.
Os arquivos de configuração são responsáveis por realizar associações e mapeamento
de ações, também são responsáveis pela definição de regras de navegação. Os
manipuladores de eventos são responsáveis por receber os dados vindos da camada de
visão, acessar o modelo, e então devolver [ao usuário] o resultado
para FacesServlet (COMPONENTES..., 2013, grifo nosso).
O modelo representa os objetos de negócio e executa uma lógica de negócio ao receber
os dados vindos da camada de visualização. Finalmente, a visão é composta
por component trees (Hierarquia de componentes UI), tornando possível unir um
componente ao outro para formar interfaces mais complexas.
JSF: Vantagens
O JSF oferece ganhos no desenvolvimento de aplicações web por diversos motivos:
 Permite que o desenvolvedor crie UIs através de um conjunto de componentes UIs
predefinidos;
 Reutiliza componentes na página;
 Associa os eventos do lado do cliente com os manipuladores de eventos do lado do
servidor;
 Fornece separação de funções que envolvam a construção de aplicações Web;
 Projetado para ser flexível, sem limitar-se a nenhuma linguagem “markup” em particular,
nem a protocolos ou tipos de clientes;
 Permite a criação de componentes próprios a partir de classes de componentes
(COMPONENTES..., 2013, grifo nosso).
Embora os componentes JSF padrão sejam suficientes para a maioria dos aplicativos
Web básicos, você também pode escrever bibliotecas de componentes personalizados.
Bibliotecas de componentes adicionais são disponibilizadas por vários projetos de
código-fonte aberto e de fornecedores independentes.
JavaDoc: JavaServer Faces
http://docs.oracle.com/cd/E17802_01/products/products/jsp/2.1/docs/jsp-2_1-
pfd2/index.html
Mais JSF no site da Oracle:
http://www.oracle.com/technetwork/java/javaee/jsp/index.html
Processamento de uma requisição
Em uma aplicação JSF, toda requisição realizada a partir de um navegador é recebida
pela Faces Servlet. Ao receber uma requisição, a Faces Servlet executa os seguintes
passos:
 Restore View: na primeira requisição de um usuário, uma nova árvore de
componentes que representa a tela desse usuário é gerada. Nas demais
requisições (postback) desse mesmo usuário, a árvore de componentes que
representa a tela anteriormente enviada a ele é reconstruída.
 Apply Request Values: Nesta etapa, a árvore construída na etapa anterior é
percorrida e cada um dos seus componentes é “decodificado”. No processo de
decodificação, cada componente extrai da requisição atual os dados associados a
essa componente e se atualiza com essas informações.
Ainda nessa etapa, os eventos de ação (como um clique em um link ou em um botão,
por exemplo) são identificados. Por padrão, esses eventos são adicionados às filas
correspondentes para serem tratados posteriormente (na fase Invoke Application).
 Process Validation: Nesta fase, os componentes que possuem valores
submetidos pelo usuário por meio de formulários são convertidos e validados
(caso haja algum validador registrado para esse componente).
Se ocorrer algum erro de conversão ou validação, mensagens de erro são adicionadas
no contexto da requisição atual e o fluxo é redirecionado para a fase Render Response.
Caso contrário, processo continua na fase UpdateModel Values. Ainda nesta fase, os
eventos de mudança de valor são identificados e tratados ao final do processo.
 UpdateModel Values: Os valores contidos em cada componente da árvore, já
convertidos e validados na fase anterior, são armazenados em propriedades de
objetos definidos pela aplicação (managed beans).
 Invoke Application: Uma vez que os dados dos componentes já foram
convertidos, validados e armazenados nos objetos do modelo, as tarefas
correspondentes ao evento que disparou a requisição (normalmente um clique
em um botão ou link) serão executadas.
Também nesta fase, a próxima tela a ser apresentada ao usuário é determinada pelo
resultado do método que implementa a lógica de negócio executado nesta fase.
 Render Response: Nesta etapa, a próxima tela é gerada e enviada ao
navegador do usuário. Uma representação desta tela também é armazenada a
fim de ser usada na fase Restore Viewda próxima requisição.
Abaixo o diagrama ilustra a estrutura geral de uma aplicação JSF. O processamento de
uma requisição enviada por um navegador começa na Faces Servlet logo após sua
chegada. A Faces Servlet controla a execução das seis etapas descritas anteriormente.
Figura 9: Estrutura geral de uma aplicação JSF.
Os managed beans estão à disposição da Faces Servlet durante todo o processamento
da requisição. Por exemplo, nas etapas Render Response e Restore View, a Faces
Servlet aciona os managed beanspara recuperar os dados que devem ser usados na
construção ou reconstrução da árvore de componentes.
Na etapa Update Model, a Faces Servlet armazena nos managed beans os dados já
convertidos e validados. Na etapa Invoke Application, a Faces Servlet dispara um
método em um managed beanresponsável pelo processamento da regra de negócio
correspondente à requisição atual. Todas as regras de negócio são implementadas no
modelo, que também administra os dados da aplicação.
Os managed beans acionam o modelo para executar alguma regra de negócio,
recuperar ou alterar os dados administrados pelo modelo. As telas da aplicação são
definidas na camada de visão. A Faces Servlet acessa essa camada toda vez que
necessita construir ou reconstruir a árvore de componentes de uma determinada tela.
Isso ocorre nas etapas Restore View e Render Response.
00:00
00:00
DAO – Data Access Object
A maioria das aplicações empresariais usa normalmente sistemas de gerenciamento de bancos de dados
relacional (RDBMS, relational database management system) como armazenamento persistente.
Entretanto, os dados empresariais podem residir em outros tipos de repositórios, comomainframes ou
sistemas legados, repositórios LDAP (Lightweight Directory Access Protocol), bancos de dados orientados
a objetos (OODB) e arquivos simples.
Misturar a lógica de persistência com a lógica de aplicação cria uma dependência direta entre a
implementação da aplicação e do armazenamento persistente. Tal dependência torna difícil migrar a
aplicação de um tipo de fonte de dados para outro.
Quando as fontes de dados são alteradas, os componentes devem ser modificados para tratar o novo
tipo de fonte de dados (ACESSO..., 2013).
Isso pode ser feito de forma mais fácil usando o padrão de projetos DAO para abstrair
e encapsular todo o acesso ao armazenamento persistente. O DAO gerencia a conexão
com a fonte de dados para obter e armazenar dados.
Os principais objetivos de um DAO são:
 Encapsular o acesso e a manipulação de dados em uma camada separada;
 Implementar mecanismos de acesso a dados para acessar e manipular dados em uma
armazenamento persistente;
 Desacoplar a implementação do armazenamento persistente do restante da aplicação;
 Organizar os recursos de lógica de acesso a dados e encapsular recursos proprietários
para facilitar a capacidade de manutenção e a portabilidade.
Estrutura do DAO
Elementos do DAO
 [Pessoa – a pessoa] é um objeto que requer acesso à fonte de dados para obter e
armazenar dados.
 DAO – é o objeto de função principal desse padrão. Ele abstrai a implementação de
acesso a dados subjacente para o cliente a fim de permitir um acesso transparente à
fonte de dados.
 Base de Dado – representa uma implementação de fonte de dados.
 ResultSet – representa os resultados de uma execução de consulta.
 Tipo de Dado – representa um objeto de transferência usado com um carregador de
dados (ACESSO..., 2013).
Para saber mais sobre DAO acesse:
http://javafree.uol.com.br/artigo/871452/Introducao-ao-pattern-DAO.html
http://www.javabuilding.com/academy/patterns/dao.html
http://www.oficinadanet.com.br/artigo/java/criando-um-cadastro-de-usuario-em-java
Fórum
Aplicações Web possuem uma série de necessidades a serem tratadas ao serem
implementadas. Quais seriam as vantagens em desenvolver uma aplicação Web
utilizando Java e o Framework JSF? Outras tecnologias poderiam ser adotadas em
conjunto com este Framework? Como você planejaria o desenvolvimento de uma
aplicação Web utilizando os conceitos vistos?
RESUMO
Nessa unidade foram apresentados vários conceitos sobre aplicações Web e as soluções
existentes na plataforma Java, especificamente nas tecnologias Java Enterprise Edition,
bem como os possíveis ambientes de desenvolvimento que podem ser utilizados além
do ambiente de uma aplicação Web Java encapsulado em um Web Container.
Finalmente, foi destacado o uso do Framework JSF como ferramenta para facilitar a
construção das aplicações Web.
ACESSO a banco de dados com JDBC (Java Database Connectivity) e o Padrão de
Projeto DAO (Data Access Object). Disponível em:
<http://www.ceunes.ufes.br/downloads/2/mariateixeira-
java.introdu%C3%A7%C3%A3o%20a%20banco%20de%20dados.pdf>. Acesso em:
março 2013.
COMPONENTES visuais de especificação em JSF. Disponível em:
<http://www.webartigos.com/artigos/componentes-visuais-de-especificacao-em-
jsf/53689/>. Acesso em: março 2013.
DEITEL Paul. Java Como Programar. 8. ed. São Paulo: Pearson Prentice Hall, 2010.
NETBEANS. Disponível em: <http://netbeans.org/>. Acesso em: Março, 2013.
SUGESTÃO DE LEITURA
CORDEIRO, Gilliard. Aplicações Java para web com JSF e JPA. 1. ed. São Paulo:
Casa do Código, 2010.
GONÇALVES, Edson. Dominando Java Server Faces e Facelets Utilizando Spring
2.5, Hibernate e JPA. 1. ed. São Paulo: Ciência Moderna,2008.
TECNOLOGIAS PARA APLICAÇÕES WEB
WEBAULA 1
UNIDADE 2: INTRODUÇÃO ÀS TECNOLOGIAS JAVA ENTERPRISE
EDITION(Prático-Conceitual)
Configurando uma aplicação JSF
Uma aplicação JSF deve respeitara estrutura geral de uma aplicação Web Java descrita
na Unidade 1.
Os códigos criados e demonstrados abaixo farão parte de uma aplicação Web Java
chamada “AgendaJSF” criada na IDE Netbeans que será utilizada como demonstração
de uma Aplicação usando JSF. Sugiro que vocês implementem tal aplicação para fixação
dos conceitos vistos até esse ponto.
JSF na prática
Criando um projeto
 Arquivo – Novo Projeto – Java Web – Aplicação Web.
 Nome do Projeto – AgendaJSF.
 Clique em próximo.
Selecione o servidor GlassFish (Instalado junto com o Netbeans) ou servidor Apache
Tomcat (se disponível); selecione a versão do Java EE (mais recente) e clique em
próximo.
Selecione o framework “JavaServer Faces” e na aba “Componentes” selecione
“PrimeFaces”, clique em finalizar.
A estrutura básica do projeto criado deverá ser algo semelhante à figura 5:
Web.xml
A Faces Servlet deve ser configurada no arquivo WEB-INF/web.xml, indicando a classe
que a implementa e o padrão de URL que será associada a essa servlet.
No exemplo abaixo, todas as requisições serão processadas pela Faces Servlet.
Mais sobre o arquivo web.xml em:
http://docs.oracle.com/cd/E14571_01/web.1111/e13712/web_xml.htm
faces-config.xml
Um arquivo faces-config.xml deverá ser adicionado ao diretório WEB-INF. Nesse
arquivo, podemos alterar diversas configurações do JSF.
Mais sobre o arquivo faces.config.xml em:
http://docs.oracle.com/cd/B31017_01/web.1013/b28967/appendixa010.htm#ADFDG
010
Bibliotecas
Para utilizar os recursos do JSF, é necessário que a aplicação possua uma
implementação JSF. Esta pode ser adicionada manualmente no diretório WEB-INF/lib
da aplicação.
Se um servidor Java EE for utilizado, a inclusão de uma implementação JSF
manualmente não será necessária, já que este servidor já a possui.
Obs: Ao utilizar o Netbeans como IDE para implementação de aplicações Java Web, ao
selecionar o tipo de projeto “Aplicação Web”, haverá em umas das guias de
configuração inicial a opção para selecionar os frameworks que você deseja utilizar
(vide figura 3), ao optar pelo framework JavaServer Faces na guia “componentes” (vide
figura 4), haverá opção para incluir outros pacotes como PrimeFaces, RichFaces e
ICEFaces. Estes pacotes adicionam componentes visuais prontos que poderão ser
utilizados na aplicação Java Web.
Mais sobre PrimeFaces em: http://www.primefaces.org/.
Mais sobre RichFaces em: http://www.jboss.org/richfaces.
Mais sobre IceFaces em: http://www.icesoft.org/java/.
Managed Beans
Os managed beans são objetos fundamentais de uma aplicação JSF o qual utiliza-se de
Pojo’s como parte do controller, sendo assim, uma managed bean é um Pojo
responsável por intermediar a comunicação entre as páginas de uma aplicação web e
o modelo ou visão.
Ao trabalhar com JSF, boa parte do esforço da implementação será dedicado
aos managed beans, consequentemente as futuras alterações e correções estarão
intimamente ligadas a estes objetos. Suas principais funções são:
 Fornecer os dados que serão exibidos na tela;
 Receber os dados enviados nas requisições;
 Executar tarefas de acordo com as ações do usuário.
Para maiores informações sobre POJO:
http://www.roseindia.net/ejb/introduction-to-pojo.shtml
http://www.guj.com.br/java/206651-o-que-e-pojo-afinal
Criando um Managed Bean
Um managed bean pode ser definido de duas maneiras. A primeira maneira é criar uma
classe Java e registrá-la no arquivo faces-config.xml (JFS 1.2). Conforme abaixo:
No registro de um managed bean devemos definir o nome, a classe e o escopo
do managed bean. O nome será utilizadopara acessar esse managed bean nas páginas
da aplicação. O escopo será explicado mais adiante.
Importante:
O escopo definido no exemplo abaixo por meio da annotation “@RequestScoped”
poderá ser alterado conforme a necessidade da aplicação. Para mais informações sobre
escopo, acesse:
http://dnassuncao.wordpress.com/2010/08/14/jsf-2-0-na-pratica-%E2%80%93-
parte-ii/
http://www.devmedia.com.br/escopos-de-managed-beans-no-jsf-2-0-artigo-java-
magazine-90/20436
A segunda forma é criar uma classe Java com a anotação @ManagedBean do pacote
javax.faces.bean. Essa anotação só pode ser utilizada a partir da versão 2.1 do JSF.
Exemplo:
Propriedades
Considere o código Java 2. Para acessar o valor do atributo pessoa com valores obtidos
a partir de uma tela JSF precisamos definir um método de leitura (getPessoa). Esse
método deve seguir a convenção de nomenclatura Java (Camel Case). Para alterar esse
mesmo atributo, precisamos definir um método de escrita (setPessoa) que segue a
mesma convenção de nomenclatura do método anterior.
Com os métodos de acesso e demais métodos do managed bean já implementados,
podemos exibir e/ou inserir o valor do atributo pessoa utilizando expression
language (#{}), conforme o código abaixo (linhas 19, 25, 31, 37):
Para alterar o valor do atributo pessoa do managed bean, podemos vinculá-lo, por
exemplo, a uma caixa de texto em um formulário.
Ações
Para implementar as lógicas que devem ser executadas assim que o usuário clicar em
um botão oulink, basta criar métodos nas classes do managed bean, como por exemplo
os métodos inserirOk() e buscarOk() do código Java 3 abaixo.
Componentes Visuais
No JSF 2, as telas são definidas em arquivos XHTML. Os componentes visuais que
constituem as telas são adicionados por meio de tags. A especificação do JSF define
uma grande quantidade de tags e as classifica em bibliotecas. As principais bibliotecas
de tags do JSF são:
 Core (http://java.sun.com/jsf/core)
 HTML (http://java.sun.com/jsf/html)
 Facelets (http://java.sun.com/jsf/facelets)
Estrutura básica de uma página JSF
A estrutura básica de uma página JSF é muito semelhante à estrutura de uma página
HTML como o código abaixo.
O conteúdo da página é definido no corpo da tag . Esse conteúdo é dividido em duas
partes: o cabeçalho, delimitado pela tag (e não pela tag ), e o corpo, delimitado
pela tag (e não pela tag).
As bibliotecas de tags que serão utilizadas para construir a página devem ser
“importadas” a partir do pseudoatributo xmlns aplicado à tag. Observe no exemplo
acima que as três principais bibliotecas do JSF foram importadas.
Documentação completa das tags das bibliotecas vistas acima em:
http://www.jcp.org/en/jsr/detail?id=314
Telas
Uma vez que o managed bean foi criado, podemos associá-lo a um ou mais formulários
que exibirá ou realizará a inserção dos dados da pessoa.
Para inserir ou consultar um determinado registro de pessoa, podemos associar os
métodos inserirOk() e buscarOk() a botões existentes em páginas criadas
especificamente para estes fins, tais botões, inserir e consultar respectivamente
deverão executar as ações de inserção e busca conforme os trechos de códigos da
página inserir.xhtml e consultar.xhtml apresentados abaixo:
Na linha 42, do trecho de código XHTML 3 logo acima – definição de componente do
tipo commandButton com ação definida para invocar o método inserirOk() do managed
bean “agenda”.
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada
1ª prova pós web 1ª chamada

Contenu connexe

Tendances

Tutorial: Como criar aplicações no App Studio?
Tutorial: Como criar aplicações no App Studio?Tutorial: Como criar aplicações no App Studio?
Tutorial: Como criar aplicações no App Studio?Lhaís Rodrigues
 
Fluxo de trabalho com Illustrator e Flash
Fluxo de trabalho com Illustrator e FlashFluxo de trabalho com Illustrator e Flash
Fluxo de trabalho com Illustrator e FlashFábio Flatschart
 
Adobe Flash contado em poucos cliques
Adobe Flash contado em poucos cliquesAdobe Flash contado em poucos cliques
Adobe Flash contado em poucos cliquesdamiana guedes
 
Manual prezi-aluno
Manual prezi-alunoManual prezi-aluno
Manual prezi-alunomanjosp
 
Curso de Joomla na Pratica
Curso de Joomla na PraticaCurso de Joomla na Pratica
Curso de Joomla na PraticaGrupo Treinar
 
Tutorial prezi de Teles Cristine
Tutorial prezi de Teles CristineTutorial prezi de Teles Cristine
Tutorial prezi de Teles Cristinetcristinne
 
Aprenda Joomla! 1.5 fácil!
Aprenda Joomla! 1.5 fácil!Aprenda Joomla! 1.5 fácil!
Aprenda Joomla! 1.5 fácil!Jennifer Payne
 
Wordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do PublicadorWordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do PublicadorRenato Vieira
 
Microsoft office 2010,libre office
Microsoft office 2010,libre officeMicrosoft office 2010,libre office
Microsoft office 2010,libre officeFilipe Hiluy
 
Análise de Interface_Geane Poteriko
Análise de Interface_Geane PoterikoAnálise de Interface_Geane Poteriko
Análise de Interface_Geane Poterikogepoteriko
 
Prezi vs power point
Prezi vs power pointPrezi vs power point
Prezi vs power pointLuciano Rêgo
 

Tendances (19)

Tutorial: Como criar aplicações no App Studio?
Tutorial: Como criar aplicações no App Studio?Tutorial: Como criar aplicações no App Studio?
Tutorial: Como criar aplicações no App Studio?
 
File3
File3File3
File3
 
Beginning Iphone
Beginning IphoneBeginning Iphone
Beginning Iphone
 
Fluxo de trabalho com Illustrator e Flash
Fluxo de trabalho com Illustrator e FlashFluxo de trabalho com Illustrator e Flash
Fluxo de trabalho com Illustrator e Flash
 
Apostila para usos do Prezi
Apostila para usos do Prezi Apostila para usos do Prezi
Apostila para usos do Prezi
 
Tutorial do PREZI
Tutorial do PREZI Tutorial do PREZI
Tutorial do PREZI
 
Adobe Flash contado em poucos cliques
Adobe Flash contado em poucos cliquesAdobe Flash contado em poucos cliques
Adobe Flash contado em poucos cliques
 
Manual prezi-aluno
Manual prezi-alunoManual prezi-aluno
Manual prezi-aluno
 
Manual prezi
Manual preziManual prezi
Manual prezi
 
Bibliotecas animacao flash
Bibliotecas animacao flashBibliotecas animacao flash
Bibliotecas animacao flash
 
Prezi Avançado
Prezi Avançado Prezi Avançado
Prezi Avançado
 
Curso de Joomla na Pratica
Curso de Joomla na PraticaCurso de Joomla na Pratica
Curso de Joomla na Pratica
 
Tutorial prezi de Teles Cristine
Tutorial prezi de Teles CristineTutorial prezi de Teles Cristine
Tutorial prezi de Teles Cristine
 
Aprenda Joomla! 1.5 fácil!
Aprenda Joomla! 1.5 fácil!Aprenda Joomla! 1.5 fácil!
Aprenda Joomla! 1.5 fácil!
 
Introdução e instalação de plug ins wp para melhorar o marketing político do ...
Introdução e instalação de plug ins wp para melhorar o marketing político do ...Introdução e instalação de plug ins wp para melhorar o marketing político do ...
Introdução e instalação de plug ins wp para melhorar o marketing político do ...
 
Wordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do PublicadorWordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do Publicador
 
Microsoft office 2010,libre office
Microsoft office 2010,libre officeMicrosoft office 2010,libre office
Microsoft office 2010,libre office
 
Análise de Interface_Geane Poteriko
Análise de Interface_Geane PoterikoAnálise de Interface_Geane Poteriko
Análise de Interface_Geane Poteriko
 
Prezi vs power point
Prezi vs power pointPrezi vs power point
Prezi vs power point
 

Similaire à 1ª prova pós web 1ª chamada

Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Fábio Flatschart
 
Flex 4 para desenvolvedores flash
Flex 4 para desenvolvedores flashFlex 4 para desenvolvedores flash
Flex 4 para desenvolvedores flashIgor Costa
 
Silverlight 4 e Expression Blend 4
Silverlight 4 e Expression Blend 4Silverlight 4 e Expression Blend 4
Silverlight 4 e Expression Blend 4Rodrigo Kono
 
Novos profissionais, novas ferramentas e novos mercados
Novos profissionais, novas ferramentas e novos mercadosNovos profissionais, novas ferramentas e novos mercados
Novos profissionais, novas ferramentas e novos mercadosFábio Flatschart
 
Internet I - Aula 05 - Primeiro App FireFox OS!
Internet I - Aula 05 - Primeiro App FireFox OS!Internet I - Aula 05 - Primeiro App FireFox OS!
Internet I - Aula 05 - Primeiro App FireFox OS!Manoel Afonso
 
Desenvolvendo aplicações RIA - Marcel Araujo
Desenvolvendo aplicações RIA - Marcel AraujoDesenvolvendo aplicações RIA - Marcel Araujo
Desenvolvendo aplicações RIA - Marcel AraujoTchelinux
 
T@rget Trust - Formação: Animador Flash
T@rget Trust - Formação: Animador FlashT@rget Trust - Formação: Animador Flash
T@rget Trust - Formação: Animador FlashTargettrust
 
Introdução ao Wordpress
Introdução ao WordpressIntrodução ao Wordpress
Introdução ao WordpressAline Corso
 
Adobe flash platform bem 2009
 Adobe flash platform bem 2009 Adobe flash platform bem 2009
Adobe flash platform bem 2009FabricioManzi
 
Artigo de php
Artigo de phpArtigo de php
Artigo de phprobson
 
Desenvolvimento web: PHP orientado a objetos
Desenvolvimento web: PHP orientado a objetosDesenvolvimento web: PHP orientado a objetos
Desenvolvimento web: PHP orientado a objetosLucas Vegi
 

Similaire à 1ª prova pós web 1ª chamada (20)

Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
 
Flex 4 para desenvolvedores flash
Flex 4 para desenvolvedores flashFlex 4 para desenvolvedores flash
Flex 4 para desenvolvedores flash
 
Adobe flash cs3
Adobe flash cs3Adobe flash cs3
Adobe flash cs3
 
Minicurso as3 games
Minicurso as3 gamesMinicurso as3 games
Minicurso as3 games
 
Flash
FlashFlash
Flash
 
Adobe Flash
Adobe FlashAdobe Flash
Adobe Flash
 
Semana 7 e_8_c
Semana 7 e_8_cSemana 7 e_8_c
Semana 7 e_8_c
 
Silverlight 4 e Expression Blend 4
Silverlight 4 e Expression Blend 4Silverlight 4 e Expression Blend 4
Silverlight 4 e Expression Blend 4
 
Novos profissionais, novas ferramentas e novos mercados
Novos profissionais, novas ferramentas e novos mercadosNovos profissionais, novas ferramentas e novos mercados
Novos profissionais, novas ferramentas e novos mercados
 
Proinfo unidade 6
Proinfo unidade 6Proinfo unidade 6
Proinfo unidade 6
 
Internet I - Aula 05 - Primeiro App FireFox OS!
Internet I - Aula 05 - Primeiro App FireFox OS!Internet I - Aula 05 - Primeiro App FireFox OS!
Internet I - Aula 05 - Primeiro App FireFox OS!
 
Desenvolvendo aplicações RIA - Marcel Araujo
Desenvolvendo aplicações RIA - Marcel AraujoDesenvolvendo aplicações RIA - Marcel Araujo
Desenvolvendo aplicações RIA - Marcel Araujo
 
T@rget Trust - Formação: Animador Flash
T@rget Trust - Formação: Animador FlashT@rget Trust - Formação: Animador Flash
T@rget Trust - Formação: Animador Flash
 
Introdução ao Wordpress
Introdução ao WordpressIntrodução ao Wordpress
Introdução ao Wordpress
 
File3
File3File3
File3
 
Adobe flash platform bem 2009
 Adobe flash platform bem 2009 Adobe flash platform bem 2009
Adobe flash platform bem 2009
 
Tcc
TccTcc
Tcc
 
Artigo de php
Artigo de phpArtigo de php
Artigo de php
 
Desenvolvimento web: PHP orientado a objetos
Desenvolvimento web: PHP orientado a objetosDesenvolvimento web: PHP orientado a objetos
Desenvolvimento web: PHP orientado a objetos
 
O que e
O que eO que e
O que e
 

Dernier

QUIZ - GEOGRAFIA - 8º ANO - FASES DO CAPITALISMO.pptx
QUIZ - GEOGRAFIA - 8º ANO - FASES DO CAPITALISMO.pptxQUIZ - GEOGRAFIA - 8º ANO - FASES DO CAPITALISMO.pptx
QUIZ - GEOGRAFIA - 8º ANO - FASES DO CAPITALISMO.pptxAntonioVieira539017
 
Verbos - transitivos e intransitivos.pdf
Verbos -  transitivos e intransitivos.pdfVerbos -  transitivos e intransitivos.pdf
Verbos - transitivos e intransitivos.pdfKarinaSouzaCorreiaAl
 
1. CIENCIAS-HUMANAS-GLOBALIZAÇÃO, TEMPO E ESPAÇO-V1.pdf
1. CIENCIAS-HUMANAS-GLOBALIZAÇÃO, TEMPO E ESPAÇO-V1.pdf1. CIENCIAS-HUMANAS-GLOBALIZAÇÃO, TEMPO E ESPAÇO-V1.pdf
1. CIENCIAS-HUMANAS-GLOBALIZAÇÃO, TEMPO E ESPAÇO-V1.pdfRitoneltonSouzaSanto
 
Peixeiras da Coruña. O Muro da Coruña. IES Monelos
Peixeiras da Coruña. O Muro da Coruña. IES MonelosPeixeiras da Coruña. O Muro da Coruña. IES Monelos
Peixeiras da Coruña. O Muro da Coruña. IES MonelosAgrela Elvixeo
 
Como fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresComo fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresEu Prefiro o Paraíso.
 
aula 1.pptx Ementa e Plano de ensino Filosofia
aula 1.pptx Ementa e  Plano de ensino Filosofiaaula 1.pptx Ementa e  Plano de ensino Filosofia
aula 1.pptx Ementa e Plano de ensino FilosofiaLucliaResende1
 
Termo de audiência de Mauro Cid na ìntegra
Termo de audiência de Mauro Cid na ìntegraTermo de audiência de Mauro Cid na ìntegra
Termo de audiência de Mauro Cid na ìntegrafernando846621
 
Apresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxApresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxtaloAugusto8
 
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...Colaborar Educacional
 
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...Unidad de Espiritualidad Eudista
 
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptxSlides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptxLuizHenriquedeAlmeid6
 
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123JaineCarolaineLima
 
Depende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxDepende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxLuzia Gabriele
 
Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974AnaRitaFreitas7
 
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXA CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXHisrelBlog
 
Ressonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptxRessonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptxPatriciaFarias81
 
O-P-mais-importante.pptx de Maria Jesus Sousa
O-P-mais-importante.pptx de Maria Jesus SousaO-P-mais-importante.pptx de Maria Jesus Sousa
O-P-mais-importante.pptx de Maria Jesus SousaTeresaCosta92
 
Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024gilmaraoliveira0612
 

Dernier (20)

QUIZ - GEOGRAFIA - 8º ANO - FASES DO CAPITALISMO.pptx
QUIZ - GEOGRAFIA - 8º ANO - FASES DO CAPITALISMO.pptxQUIZ - GEOGRAFIA - 8º ANO - FASES DO CAPITALISMO.pptx
QUIZ - GEOGRAFIA - 8º ANO - FASES DO CAPITALISMO.pptx
 
Verbos - transitivos e intransitivos.pdf
Verbos -  transitivos e intransitivos.pdfVerbos -  transitivos e intransitivos.pdf
Verbos - transitivos e intransitivos.pdf
 
1. CIENCIAS-HUMANAS-GLOBALIZAÇÃO, TEMPO E ESPAÇO-V1.pdf
1. CIENCIAS-HUMANAS-GLOBALIZAÇÃO, TEMPO E ESPAÇO-V1.pdf1. CIENCIAS-HUMANAS-GLOBALIZAÇÃO, TEMPO E ESPAÇO-V1.pdf
1. CIENCIAS-HUMANAS-GLOBALIZAÇÃO, TEMPO E ESPAÇO-V1.pdf
 
Peixeiras da Coruña. O Muro da Coruña. IES Monelos
Peixeiras da Coruña. O Muro da Coruña. IES MonelosPeixeiras da Coruña. O Muro da Coruña. IES Monelos
Peixeiras da Coruña. O Muro da Coruña. IES Monelos
 
Como fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresComo fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de Gestores
 
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdfAbordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
 
(42-ESTUDO - LUCAS) DISCIPULO DE JESUS
(42-ESTUDO - LUCAS)  DISCIPULO  DE JESUS(42-ESTUDO - LUCAS)  DISCIPULO  DE JESUS
(42-ESTUDO - LUCAS) DISCIPULO DE JESUS
 
aula 1.pptx Ementa e Plano de ensino Filosofia
aula 1.pptx Ementa e  Plano de ensino Filosofiaaula 1.pptx Ementa e  Plano de ensino Filosofia
aula 1.pptx Ementa e Plano de ensino Filosofia
 
Termo de audiência de Mauro Cid na ìntegra
Termo de audiência de Mauro Cid na ìntegraTermo de audiência de Mauro Cid na ìntegra
Termo de audiência de Mauro Cid na ìntegra
 
Apresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxApresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptx
 
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
 
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
 
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptxSlides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
 
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
 
Depende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxDepende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsx
 
Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974
 
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXA CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
 
Ressonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptxRessonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptx
 
O-P-mais-importante.pptx de Maria Jesus Sousa
O-P-mais-importante.pptx de Maria Jesus SousaO-P-mais-importante.pptx de Maria Jesus Sousa
O-P-mais-importante.pptx de Maria Jesus Sousa
 
Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024
 

1ª prova pós web 1ª chamada

  • 1. Visão geral Apresentação da disciplina: O Flash surgiu como um programa para fazer animações para internet e com o tempo ganhou outros recursos gráficos e habilidades de programação. Foi na versão do Flash 4 que a linguagem de programação Action Script ganhou grande popularidade com o software, pois era capaz de fazer um tipo de conteúdo interativo para internet, lançado pela empresa Macromedia. Com a compra da Macromedia pela empresa Adobe, a ferramenta Flash evoluiu com o tempo ganhando cada vez mais recursos gráficos e de programação, sendo uma ótima ferramenta para design gráfico, animação, criação de programas e prototipagem de ideias. Com toda essa evolução o Flash deixou de ser apenas um único programa e passou a ser uma plataforma, conhecida como PLATAFORMA FLASH. Objetivos: Nesta unidade, além de entender conceitos sobre a plataforma Flash, vamos também, aprofundar conceitos sobre o Action Script. O Action Script é uma linguagem de script orientada a objetos, com a sintaxe muito parecida com Java Script, sendo utilizada no Flash para incrementar as animações do objetos. Conteúdo Programático:  Flash CS5 o Fundamentos da Ferramentas; o Linha do Tempo / Camadas; o Animações; o Elementos do FlasH; o Motion Tween; o Botões; o Cenas; o Importar e Exportar Arquivos.  Action Script 3.0 o Fundamentos do Action Script; o Funções Play, Stop; o Carregamento de URLs;
  • 2. o Carregamento de Filmes Externos; o Criação de Sites.  Elementos Multimídia o Inserindo Músicas e Sons; o Inserindo Elementos de Vídeos. Metodologia: Na unidade utilizaremos todos os recursos necessários e disponíveis para o desenvolvimento da discussão do conteúdo, sendo assim, faremos uso de:  Textos da própria web-aula e de outros sites que possam contribuir para a discussão;  Vídeos que podem esclarecer ou aprofundar determinados conteúdos;  Fóruns para discussão de tópicos onde seja possível a troca de ideias e conteúdos entre os discentes e docentes;  Avaliações virtuais onde será realizada a verificação do aprendizado;  Entre outros recursos que poderão ser utilizados visando maior entendimento da matéria. Avaliação Prevista: Cada web-aula conterá uma avaliação virtual composta de 5 questões (sendo assim, temos 2 web-aulas com 5 questões cada). Quando houver fórum de discussão o aluno será avaliado quanto ao conteúdo de sua postagem, onde deverá comentar o tópico apresentando respostas completas e com nível crítico de avaliação pertinente ao nível de pós- graduação. Critérios para Participação dos Alunos no Fórum: Quando houver fórum de discussão o aluno será avaliado quanto ao conteúdo de sua postagem, onde deverá comentar o tópico apresentando respostas completas e com nível crítico de avaliação pertinente ao nível de pós-graduação. Textos apenas concordando ou discordando de comentários de outros participantes do fórum sem a devida justificativa ou complementação não acrescentam em nada ao debate da disciplina, sendo assim, devem ser evitados. Os textos devem sempre vir acompanhados das justificativas para a opinião do
  • 3. discente sobre o conteúdo discutido, para que assim, possamos dar continuidade ao debate em nível adequado. Além disso, podem ser utilizados citações de artigos, livros e outros recursos que fundamentem a opinião ou deem sustentação a sua posição crítica sobre o assunto. Deve ser respeitado o tópico principal do fórum, evitando debates que não tem relação com o tema selecionado pelo professor. Página1 de 18  PRÓXIMA ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES WEB WEB AULA 1 Unidade 1 - Flash Professional CS5 1.1 Fundamentos da Ferramenta Afinal de contas, o que é o Flash? Alguns dizem que ele serve para fazer animações, outros dizem que é ótimo para fazer sites com mais interação, já outros dizem que o Flash está “morto” e será abandonado. Para entender isso melhor, vamos falar um pouco de como o Flash foi criado. O Flash surgiu como um programa para fazer animações para internet, em uma época onde os sites eram praticamente feitos de textos e umas poucas imagens. Veja como era o site da empresa Adobe na época: <http://web.archive.org/web/19961228111753/http://www2.adobe.com/> Compare com o site da Adobe dos dias de hoje: <http://www.adobe.com/> Site da empresa Adobe em 1996 à esquerda e em 2012 à direita
  • 4. Na verdade a primeira versão do programa era chamada de Splash lançado pela empresa FutureWave Software em 1996: Figura 1 - Tela de abertura da primeira versão do “Flash” – Splash (1996)
  • 5. De lá pra cá, a maneira de fazer animação com o Flash não mudou muito, mas ele ganhou outros recursos gráficos e habilidades de programação. Foi na versão do Flash 4 que a linguagem de programação Action Script ganhou grande popularidade com o software, pois era capaz de fazer um tipo de conteúdo interativo para internet nunca vistos antes, lançado pela empresa Macromedia. Figura 2 - Tela de abertura da versão do Flash 4 (1999) Página3 de 18  ANTERIOR  PRÓXIMA
  • 6. A empresa Macromedia foi comprada pela empresa Adobe e a ferramenta Flash evoluiu com o tempo ganhando cada vez mais recursos gráficos e de programação, sendo uma ótima ferramenta para design gráfico, animação, criação de programas e prototipagem de ideias. Figura 3 - Tela de abertura da versão do Flash CS5 (2012) Com toda essa evolução o Flash deixou de ser apenas um único programa e passou a ser uma plataforma, conhecida como PLATAFORMA FLASH, tendo integração com diversos outros programas da família Adobe e com outros recursos específicos.
  • 7. Algo muito recorrente é a confusão feita quando se fala a palavra Flash, pois ela pode significar várias coisas dentro da PLATAFORMA FLASH. Por exemplo: Existem 03 ferramentas que levam o nome Flash:  Flash Professional – Software original evoluiu e estamos abordando neste curso.
  • 8.  Flash Catalyst – Software que surgiu mais tarde para criar projetos interativos sem depender de conhecimentos avançados de programação.  Flash Builder – Software para criar conteúdo flash apenas com linguagem de programação. Todas essas 03 ferramentas são recursos diferentes para criar um arquivo conhecido como Shockwave Flash, ou mais conhecido como SWF, que é o arquivo Flash compilado com o conteúdo a ser publicado. No caso do Flash Professional, geralmente o arquivo fonte é salvo no formato fla que através da ferramenta Flash Professional é capaz de exportar um arquivo SWF. ne do arquivo .fla ícone do arquivo .swf Além das diferentes ferramentas existem também os “Players", também conhecidos como Clientes ou Leitores de arquivos SWF. Eles são os programas que interpretam os arquivos SWF para apresentar as animações e conteúdos feitos em Flash. Por padrão, existem dois programas para reproduzir conteúdo Flash (SWF).  Flash Player – leitor para ambiente de internet (mais conhecido).  AIR – leitor para ambiente desktop (para aplicativos) Página4 de 18  ANTERIOR  PRÓXIMA Ícone do Flash Player
  • 9. Ícone do AIR O Flash Player é mais difundido como um plug-in para navegadores de internet. Esse plug-in é amplamente distribuído e a grande maioria dos computadores pessoais tem o Flash Player instalado. O Flash Player é útil para acessar conteúdos interativos na internet como aplicativos web, leitores de vídeo, animações e jogos online. Já o Air não é voltado para navegadores, ou seja, não é para ser acessado via internet. Ele é um conteúdo Flash (SWF) transformado em um aplicativo que pode ser instalado em computadores e plataformas móveis como celulares e tablets. O AIR possui comunicação web, interação touchscreen e praticamente todas as funcionalidades do que o Flash Player possui, mas com algumas coisas a mais. Existe muita discussão sobre uma disputa entre o Flash e o HTML5. Entre a discussão está o mito do flash não servir para celulares e tablets. De fato o Flash Player, assim como praticamente todos os plug-ins de internet, não funciona nos navegadores de boa parte dos celulares e tablets. Mas é possível criar conteúdo Flash para esses dispositivos através de aplicativos feitos com o AIR e não mais com o Flash Player.
  • 10. Que tal discutir sobre isso no Forum? Para trabalhar no Flash Professional, basta seguir alguns passos básicos:  Planeje o que vai ser feito o Organize antes o que você deseja fazer com a ferramenta e que recursos você irá usar (sons, imagens, textos etc.)  Adicione recursos de mídia o Crie os desenhos, importe as imagens, os vídeos, sons e textos.  Organize as coisas o Organize os elementos de mídia no Palco e na Linha do tempo. Monte as animações separadamente e junte tudo no Palco.  Teste e publique o SWF o É bom verificar se o SWF gerado está funcionando como desejado, e corrigir quaisquer erros encontrados. Para saber como fazer essas cosias vamos precisar entender melhor as ferramentas que o Flash Professional nos oferece. Vamos lá. Página5 de 18  ANTERIOR  PRÓXIMA 1.2 Elementos do Flash Professional Por onde começar? Existem várias opções na tela inicial do Flash Professional, mas estas opções são apenas templates, ou seja, configurações pré-definidas para a exportação do SWF. Por padrão podemos sempre escolher a primeira opção da coluna do meio (ActionsScript 3.0) para criar um novo arquivo vazio. Figura 4 - Opções iniciais do Flash Professional CS5.5
  • 11. Antes de começar a usar a ferramenta precisamos aprender sua interface, não é mesmo? Podemos dividir a interface do Flash Professional em 06 elementos principais: Figura 5 - Imagem inicial do Flash Professional CS5.5
  • 12. 1. PALCO: onde são posicionados os objetos gráficos como imagens e desenhos. 2. Barra de FERRAMENTAS: são os recursos para manipular os objetos, criar desenhos, textos entre outras coisas. 3. LINHADE TEMPO:ondeestão as camadas e os quadros chaves dos objetos, mostrando a mudança no tempo para animações. 4. PAINÉIS: são de diversos tipos, servem para controlar parâmetros específicos como cor, rotação e escala, alinhamento e várias outras coisas. 5. BIBLIOTECA: onde ficam guardados os objetos salvos como símbolos e as coisas importadas no programa como imagens, sons e vídeos. 6. PROPRIEDADES:mostraos parâmetros que podem ser configurados para cada objeto selecionado. As propriedades dependem daquilo que está selecionado. É muito importante saber qual o tipo de objeto que está selecionado, para identificar corretamente as propriedades que estão sendo mostradas. De modo geral, podemos distinguir 03 tipos de propriedades:  Propriedades do palco: são as propriedades do arquivo FLA em si. Tem parâmetros gerais sobre a exportação do arquivo SWF.  Propriedades dos objetos: são as propriedades de todos os objetos colocados no palco, podem ser imagens, desenhos ou símbolos.  Propriedades do quadro chave: são as propriedades do quadro-chave selecionado. Cuidado para não confundir as propriedades do quadro-chave com as propriedades de um objeto selecionado. Página6 de 18  ANTERIOR 1.3 TIPOS DE OBJETOS Que tipo de conteúdo existe dentro do Flash? Quais as propriedades desses objetos? Alguns objetos são criados diretamente no Flash como FORMAS, TEXTOS e SÍMBOLOS, outros objetos podem ser importados de arquivos externos através dos atalhos: Arquivo/Importar/... ou pelo atalho CTRL + R.
  • 13. 1 . FORMAS: são as linhas e os preenchimentos que é possível desenhar no Palco. Eles ficam com a aparência ¿rachurada¿ quando selecionados. São os objetos mais simples que servem para fazer composições gráficas e desenhos. 2. TEXTOS: objetos com conteúdo de texto. Podem ser de 03 tipos: a. Estático: são textos que aparecem como se fossem um desenho. Serão exportados como uma forma. b. Dinâmico: são os textos que podem ser mudados através do Action Script. c. Entrada: são os textos para campos onde o usuário poderá digitar. Também é acessado através do Action Script 3. IMAGENS: imagens podem ser usadas dentro do Flash, porém apenas como uma figura ou preenchimento de algum desenho. As imagens não podem ser editadas em suas propriedades, por isso é muito importante usar imagens no tamanho adequado para seu projeto, evite redimensionar uma imagem dentro do Flash e evite usar imagens muito grandes. Para ajustar a imagem, faça isso em outro software como o Adobe Photoshop. Os símbolos permitem repetir elementos gráficos sem aumentar o espaço de armazenamento daquela imagem na publicação final em SWF. 4. SÍMBOLOS: Os símbolos são os elementos mais
  • 14. importantes no Flash, pois permitem organizar de forma sistemática todo o projeto. Um símbolo é um gráfico, botão ou clipe de filme que você cria uma vez no Flash e pode duplicar o símbolo novamente sem criar um novo objeto. Todo símbolo fica guardado na Biblioteca do Flash, quando é colocada uma cópia desse símbolo no palco, as cópias ficam vinculadas ao símbolo original, ou seja, tudo que for mudado em um objeto será mudado em outro também. a. CLIPE DE FILME (MovieClip): são os símbolos mais comuns no Flash, pois são objetos acessíveis pela linguagem de programação Action Script. Possuem uma Linha de Tempo interna independente, ou seja, não depende do tempo principal da animação, pode parar e voltar a reproduzir a qualquer momento. Além disso, permitem recursos de efeito de imagem como: I. Transformação 3D II. Animação do tipo Motion III. Modos de Mesclagem (Escurecer, Clarear, Multiplicar, etc) IV. Filtros (Desfoque, sombra projetada, etc). b. BOTÃO (Button): são símbolos úteis para criar uma peça que irá reagir com as ações do Mouse. Bom para criar botões interativos que respondam a cliques do mouse, rolagens ou outras ações. Possui uma Linha do Tempo especial com Quadros Chaves para cada tipo de evento: Quadros para os eventos do símbolo do tipo Botão I. O primeiro quadro é o estado Para cima (Up), representando o botão sempre que oMouse não estiver sobre o botão. II. O segundo quadro é o estado Sobre (Over), representando a aparência do botão quando o Mouse estiver sobre o botão. III. O terceiro quadro é o estado Para baixo(Down), representando a aparência do botão
  • 15. quando clicado. IV. O quarto quadro é o estado Ocorrência (Hit), definindo a área física que responde aos eventos do Mouse. Esta imagem é invisível quando publicado em formato SWF. Algo muito comum de se fazer é utilizar botões apenas com um retângulo nesse quadro chave, para criar botões transparentes que podem ser colocados em cima de textos e imagens para corresponder aos eventos do Mouse. Esses botões transparentes ficam com a cor ciano no palco, apenas para reconhecimento. Página7 de 18  ANTERIOR  PRÓXIMA c. GRÁFICO (Graphic): são os símbolos que servem para guardar coisas. Use os gráficos para imagens estáticas e para criar partes reutilizáveis de animação. Sua Linha de Tempo é dependente de onde ele esteja, ou seja, ele irá reproduzir seu conteúdo conforme a Linha de tempo onde o gráfico estiver inserido. O gráfico é muito útil para controlar animações, pois possui propriedades para reprodução do seu conteúdo: I. Loop – repete a animação de dentro do Gráfico em todos os quadros que o símbolo ocupa. II. Reproduzir uma vez – dispara a animação de dentro do Gráfico apenas uma vez, dentro dos quadros que o símbolo ocupa. III. Quadro simples– exibe apenas um dos quadros chaves de dentro da animação do Gráfico. Uma dúvida comum é quando usar Gráfico e quando usar Clipes de Filme. Depende do contexto, por exemplo: Se você estiver fazendo um game em Flash, é bem provável que os Clipes de Filme sejam a melhor opção, porque o game é completamente dinâmico e pode ter animações controladas pela programação. Já se for o caso de uma animação que será importada em outro programa Adobe, como o Adobe Premiere, é essencial que todas as animações sejam feitas em Gráficos, caso contrário, as animações não funcionarão no vídeo final.
  • 16. Veja um pouco mais sobre símbolos no vídeo: <https://www.youtube.com/watch?v=Fs3cpIz3ZgA&feature=relmfu> 5. COMPONENTES: os componentes são nada mais do que símbolos criados no flash, mas com algum Action Script embutido neles para ser usado de forma mais fácil. Com conhecimentos de Action Script é possível criar seus próprios componentes. Isso é útil para facilitar o trabalho e tornar um código de programação reutilizável para outros projetos. O atalho Ctrl+F7 abre os componentes padrões do Flash Professional. 6. VÍDEO: Vídeos podem se usados de duas maneiras no Flash: a. Embeded: É quando o arquivo de vídeo é importado para dentro do arquivo FLA e é exportado dentro do SWF, como se fosse um arquivo de imagem. Este vídeo será reproduzido em alguma Linha de Tempo do Flash e por isso seu formato é mais pesado e pode perder sincronia com o áudio. Este tipo de vídeo tem um uso um pouco restrito e deve ser usado apenas para vídeo pequenos de curta duração. b. Streaming: é quando o vídeo é externo ao arquivo SWF, ou seja, o Flash funciona como um programa de lê vídeos. A diferença é que com o Flash você pode criar o player de vídeo da maneira que quiser através da programação Action Script. O vídeo carregado não depende em nada na Linha de tempo do Flash, é totalmente independente. 7. SONS: Sons não são visíveis no Palco, eles aparecem apenas na biblioteca e podem ser vinculados nas propriedades do Quadro Chave. 8. Existem 02 tipos de configuração para o som que é anexado a uma Linha de Tempo: a. SOM TIPO Stream: o Tipo Stream irá sincronizar o tempo dos Quadros-chaves com o tempo do som e pode ser ouvido em tempo de edição, ou seja, se a linha de tempo terminar o som não será mais emitido. Este caso é mais indicado para animações e falas de personagens onde o tempo do áudio precisa encaixar exatamente com a imagem. Há uma leve perda de qualidade. b. SOM TIPO Event: o Tipo Event é o som que é executado independente da imagem do Quadro Chave. Ideal para efeitos sonoros e sons de feedbackpara eventos de interação com o mouse, por exemplo. Não há perda de qualidade.
  • 17. 1.4 DESENHANDO NO FLASH O Flash é uma ferramenta essencialmente vetorial, por isso ele pode ser leve para rodar em site online. Mas afinal de contas o que é uma imagem vetorial? Existem dois sistemas de imagem no computador o vetorial e o bitmap. As ferramentas vetoriais são aquelas que trabalham com imagens 2D que são geradas a partir de descrições geométricas de formas. Vetores são imagens diferentes das imagens do tipo bitmap, ou mapa de bits, que são aquelas formadas por vários pontos, pixels, cada um com uma cor. Figura 6 - Imagem vetorial à esquerda e bitmap à direita Imagem vetorial é um tipo de imagem gerada a partir de descrições geométricas de formas, diferente das imagens que são geradas a partir de pontos minúsculos diferenciados por suas cores. Uma imagem vetorial normalmente é composta por curvas, elipses, polígonos, texto, entre outros elementos, isto é, utilizam informações (vetores) matemáticos para sua descrição. Em um trecho de desenho sólido, de uma cor apenas, um programa vetorial apenas repete o padrão, não tendo que armazenar dados para cada pixel. Por causa disso, os gráficos vetoriais geralmente são mais leves (ocupam menos memória no disco rígido do computador) e não perdem qualidade ao serem ampliados, já que as funções matemáticas adequam-se facilmente à escala, o que não ocorre com outros tipos de imagem. Agora vamos aprender como se desenha utilizando a ferramenta Flash. Podemos ver que o flash possui diversas formas básicas tais como o retângulo, polígono e a elipse e que através dessas imagens podemos combiná-las e transformá-las em desenhos e
  • 18. formas mais complexas. Vamos ver como desenhar formas básicas e transformá-las. Para se acessara ferramenta polígono devemos clicarna ferramenta retângulo e manter o botão esquerdo do mouse pressionado. Para desenhar qualquer uma destas formas, selecione-as, vá para sua área de trabalho e clique e arraste na diagonal. Para desenhar círculos e quadrados desenhe com a tecla SHIFT pressionada, se desenharmos com a tecla ALT pressionada desenhamos as duas formas a partir do centro. Quando desenhamos uma forma básica esta forma apresenta seu contorno e preenchimento separados, para mover uma forma depois de pronta, não basta apenas clicar em qualquer ponto, devemos clicar duas vezes no meio da forma, para selecionar seu preenchimento e seu conteúdo. Para podermos alterar um retângulo ou um polígono podemos fazer de duas maneiras: clicando e arrastando o vértice do ângulo ou clicando e arrastando em qualquer ponto do seu contorno. Para aumentar ou diminuir o tamanho de qualquer forma, use a ferramenta Transform. Clique na ferramenta Transform, depois clique na forma que deseja modificar o tamanho, se esta forma tiver contorno e preenchimento, devemos clicar duas vezes para selecionar. Para retirar o contorno de uma elipse, de um clique com a ferramenta Selection e pressione Delete, de retângulos ou polígonos, podemos remover só um lado do contorno ou todos os lados. Para remover só de um lado clique uma vez, na parte do contorno que quer apagar e pressione Delete, para remover todos os lados clique duas vezes em qualquer parte do contorno e pressione Delete. Podemos também combinar as formas de duas maneiras aparando ou soldando as formas. Para aparar as formas usamos uma forma para recortar outra. Para isso devemos desenhar duas formas da mesma cor e sem retirar o contorno. Por exemplo. Podemos clicar em um círculo da direita e posicione em cima de um outro círculo à esquerda, desmarcando-o. Página8 de 18  ANTERIOR  PRÓXIMA
  • 19. Depois clicamos duas vezes no círculo da direita e arrastamos para seu lugar de origem. O que fez uma forma recortar a outra foi o contorno, podemos usar também formas sem contorno, mas com preenchimentos diferentes. As formas criadas com o modo Desenho de objeto permanecem como objetos separados que você pode manipular separadamente. As formas criadas com o modo Mesclar desenho se fundem quando são superpostas. A seleção da forma e sua movimentação causam a alteração da forma superposta. Para soldar as formas devemos desenhar duas formas da mesma maneira e retirar o contorno. Se clicarmos no objeto da direita e arrastarmos para cima da outra imagem, depois que desmarcarmos eles se fundirão numa única imagem. Para desenhar linhas e traçados temos quatro ferramentas:
  • 20. O lápis é uma ferramenta de desenho muito útil, pois permite a pintura de detalhes, desenhos a mão livre e muito mais. Existem vários modos de desenho com o lápis, e os recursos de suavização do Flash são bem interessantes. Podemos usar o lápis como um lápis normal, mas também podemos fazer com que os traços sejam automaticamente suavizados, em curvas ou em retas. Quando selecionamos a ferramenta lápis, aparecem na parte de baixo da caixa algumas ferramentas de controle. A opção Straighten (correção) desenha uma linha sinuosa na tela, você irá observar que os ângulos da linha vão ficar um pouco mais retos. A opção Smooth (suavização) desenha uma linha parecida com a anterior, mas podemos notar que quando terminar de desenhar a linha terá seus contornos suavizados. E a opção Ink (tinta) não altera a aparência das linhas depois de desenhadas. Figura 7 - Linhas desenhadas no modo Correção, Suavização e Tinta A ferramenta pincel tem um funcionamento parecido com a ferramenta Lápis, com a diferença que podemos escolher o formato do pincel. Na parte de baixo da barra de ferramentas podemos escolher o tamanho do pincel e um modelo de pincel. Além do tamanho e do traçado podemos alterar também o comportamento do desenho do traçado em relação às outras formas, podemos pintar somente sobre áreas preenchidas, só atrás de outras formas etc. Figura 8 - Um traçado com pincel de largura variável desenhado com uma caneta
  • 21. Podemos usar também a ferramenta Pen para desenharpolígonos irregulares ou formas curvas. Para desenhar polígonos, selecione a ferramenta Pen e clique em vários pontos da tela, para finalizar esta forma de um clique no ponto inicial do desenho. Para desenhar formas curvas, selecione a Pen e quando clicar, dê uma pequena “arrastada” com o mouse, finalize clicando no ponto inicial. Para desenhar no flash, não é preciso de muita técnica, é a paciência que conta. Podemos criar bons desenhos vetorizados com um resultado muito satisfatório. Usar o flash nos permite desenhar um rosto humano, fazer um Cartum ou mesmo vetorizar imagens e logomarcas. Página9 de 18  ANTERIOR  PRÓXIMA 1.5 LinhaS de Tempo e Camadas Como vamos trabalhar todos esses objetos do flash no tempo? Uma das principais virtudes do Flash é justamente a capacidade de usar animações para montar seus conteúdos. Para isso precisamos entender como funciona a Linha de Tempo e as Camadas. Figura 9 - Quadros chaves de uma bolinha pulando Veja esta animação: <https://www.youtube.com/watch?v=fnkrsgbceus&feature=youtu.be> Linha de Tempo e Camada funcionam em conjunto, cada camada possui uma linha de tempo que serve para organizar a passagem do tempo em formato de quadros, onde cada quadro representa uma posição do movimento no tempo. Figura 10 - Partes da Linha do tempo
  • 22. ndicador de reprodução Quadro-chave vazio Camada Ícone da camada de guia Menu pop-up Exibição de quadros Animação quadro a quadro G. Animação interpolada H. Botão Rolar até o indicador de reprodução I. Botões de papel de transparência J. Indicador de quadro atual K. Indicador de taxa de quadros L. Indicador de tempo decorrido em segundos Você pode arrastar o indicador de reprodução para mudar a posição no tempo e fazer as edições em cada quadro. Alguns atalhos são bem úteis para facilitar essa edição: Figura 11 - Atalhos para manipular a Linha de Tempo CTRL + Alt + C Copia Quadros selecionados CTRL + Alt + V Cola Quadros F5 Prolonga Quadros F6 Insere Quadro Chave F7 Insere Quadro Chave em Branco SHIFT + F5 Remove Quadros SHIFT + F6 Limpa Quadro Chave
  • 23. > Avança um Quadro < Recua um Quadro Página10 de 18  ANTERIOR  PRÓXIMA O que será que acontece com a Linha de tempo quando se coloca um símbolo dentro de outro? Cada símbolo tem sua própria Linha do tempo e Camadas para organizar as coisas. Podemos imaginar o Palco como um grande Símbolo do arquivo, onde vamos preenchendo com outros Símbolos um dentro do outro. Essa é uma característica poderosa do Flash, pois permite criar animações complexar misturando pequenos fragmentos de animação, por exemplo: Para criar uma animação de um rosto para um personagem você pode começar criando os olhos piscando dentro de um Símbolo, depois juntar com os outros Símbolos do nariz, boca dentro de outro Símbolo e chamá- lo de Rosto. Pois é, isso pode parecer um pouco confuso, mas é essencial para facilitar o trabalho no Flash. Figura 12 - Múltiplas Linhas de Tempo dentro dos símbolos
  • 24. A Linha de Tempo principal pode ser organizada em Cenas. As Cenas servem para dividir o trabalho e a forma de organizar a animação. Em geral, as Cenas são usadas apenas para realizar animações mais longas, pois em casos de animações curtas, o melhor é organizar as coisas apenas com Símbolos. Para inserir uma Cena, basta ir ao Menu: Inserir > Cena. Para gerenciar as Cenas é preciso abrir o Painel Cenas pelo Menu: Janelas > Outros Painéis > Cenas, ou usar o Atalho: SHIFT+F2. Página11 de 18  ANTERIOR  PRÓXIMA 1.6 ANIMAÇÕES Como funciona uma animação? Para uma animação funcionar é preciso pensar nas posições principais de um objeto no decorrer do tempo, por exemplo: se uma bolinha cai de uma mesa quais são os Quadros-chaves desse movimento? Animação, do ponto de vista técnico, nada mais é do que um encadeamento de imagens estáticas, de um objeto, um desenho, ou qualquer elemento gráfico, em uma sequência que cria a ilusão de movimento contínuo. Figura 13 - Quadros de uma animação
  • 25. No processo de animação tradicional, conhecido como quadro a quadro, os animadores precisam desenhar todos os quadros da animação. Animadores mais experientes geralmente ficam encarregados dos quadros chave, que forma a sequencia básica de um movimento e os “intervaladores” ficam encarregados de produzir os quadros intermediários e completar a sequência. O Flash funciona como um “intervalador”, preenchendo os quadros entre os quadros chaves que você definiu. A maioria das pessoas que se inicia em animação pergunta quantos quadros são necessários para completar uma determinada ação. Mas a dúvida real não é essa. Na verdade, é preciso saber quanto tempo será preciso para expor essa determinada ação de forma inteligível. É o tempo que irá determinar o início e o fim de alguma ação que se deseja exibir, e assim o cálculo de quadros necessários fica bem mais fácil e objetivo. Imagine que uma xícara pode cair de uma mesa até se quebrar no chão. Normalmente isso pode acontecer em 1 ou 2 segundos, que geral cerca de 40 quadros, mas se a ação, por algum motivo, for apresentada em câmera-lenta, e durar 6 segundos, a quantidade de quadros passa para aproximadamente 140. Para fazer uma animação no Flash deve-se criar Quadros-chaves (F6) na Linha de Tempo com as posições principais do movimento, os demais quadros serão criados automaticamente pelo programa (quadros intermediários), esse procedimento é conhecido como Interpolação dos Quadros Chaves. Figura 14 - Significado dos Quadros Chaves
  • 26. Sequências de animação são planejadas tendo como base três pontos principais: quadro inicial,quadro final e quadros chaves. Por exemplo, um personagem desloca-se andando do ponto A ao ponto B. Algo bastante simples. A sequência pede a criação de quadros repetidos que façam a composição dos passos sequenciais em loop, ou seja, em repetição. Esses quadros se repetirão até o fim do trajeto. Um loop é uma sequência cíclica na qual o último quadro de um movimento encadeia- se ao primeiro formando uma corrente contínua. Mas o personagem pode se deslocar do ponto A para o ponto B, tropeçar em uma pedra no meio do caminho e continuar andando. Esse evento de tropeçar, quebra a linearidade da sequência. É um quadro chave, uma ação intermediária e precisa ser considerada com cuidado. Página12 de 18  ANTERIOR  PRÓXIMA Existem três técnicas básicas de interpolação de movimento: Interpolação Clássica (Classic Tween), Interpolação de Forma (Shape Tween) e Interpolação de Movimento (Motion Tween). A animação com armadura é um tipo de animação parecida com a interpolação de movimento que falaremos mais adiante. Figura 15 - Os tipos diferentes de animação
  • 27.  Interpolação Clássica (Classic Tween) o A interpolação clássica é a forma tradicional de criar animações no Flash. Ela é capaz de animar a posição, rotação e escala dos Símbolos, além de parâmetros como Brilho, Transparência entre outros. Basta clicar com o botão direito em cima de qualquer parte de um Quadro-chave e escolher a opção Interpolação Clássica. o Para fazer isso você precisa seguir algumas regrinhas simples.  A animação deve ter um começo e um fim.  Só pode haver 01 Símbolo por Camadapara animar. Caso contrário o Flash pode criar um Símbolo automaticamente e o resultado não ser o esperado, ou simplesmente aparecer uma linha tracejada e não funcionar.  Use o Símbolo do Quadro final igual ao do Quadro inicial, de preferência.  Interpolação de Forma (Shape Tween) o A interpolação de forma ao contrário das demais não precisa de Símbolos, pelo contrário, como o nome já diz é feita com os desenhos do Flash. Para ligar esse tipo de animação, você precisa ter um desenho em um Quadro-chave inicial e o mesmo desenho, com alguma modificação, no Quadro-chave final. Basta clicar com o botão direito do mouse sobre o Quadro-chave inicial e escolher a opção “interpolação de forma”, então o Flash irá tentar reposicionar os pontos vetoriais para que a transformação aconteça, mas se o desenho for muito complexo geralmente essa técnica de animação não se aplica.  Interpolação de Movimento (Motion Tween)
  • 28. o A interpolação de movimento é um pouco diferente das duas anteriores, pois só funciona em versões do Action Script 3.0. Nesta técnica você não precisa criar os Quadros-chaves previamente, basta clicar com o botão direito do mouse e selecionar “interpolação de Movimento”. Depois é só alterar a posição, rotação e escala do objeto no tempo que os quadros chaves serão criados. Diferente da interpolação clássica, a interpolação de movimento usa propriedades dentro de um único Quadro-chave. Existem algumas vantagens em usar a interpolação de movimento, como por exemplo, a possibilidade de converter a animação em Action Script e usar isso como um código. Outra vantagem é poder animar as 3 dimensões da rotação (3D) e também usar o editor de movimento. Porém, a interpolação clássica também é muito poderosa, pois permite uma edição rápida e um tipo de controle com Gráficos que permite uma composição sem igual. O ideal é usar o melhor dos dois mundos. Página13 de 18  ANTERIOR  PRÓXIMA 1.7 USANDO ARMADURAS E BONES A animação com armadura é um processo muito comum em programas 3d como 3D Studio Max, Maya e Blender. Porém, o conceito também pode ser aplicado a animações 2D também. A ideia consiste em fazer a forma de um desenho ser vinculada aos bones (ossos) para que o desenho distorça conforme o movimento dos bones. Funciona igual aos músculos vinculados aos ossos nos seres vivos.
  • 29. Para isso funcionar, você precisa primeiro criar uma forma no Flash, depois escolha a ferramenta Bone como mostra o ícone ao lado. Com essa ferramenta você poderá criar os ossos necessários para controlar o desenho. Selecione todo o desenho que deseja vincular ao bone, e depois crie os elementos. Mas cuidado, desenhos muito complexos geralmente não funcionam com esse tipo de técnica, é preciso usar formas simples. Outra confusão é o bone funcionar apenas com parte do desenho, quando o mesmo tem várias cores diferentes você pode acabar selecionando apena suma parte sem querer. Figura 16 - Desenho (em vermelho) deformado com os bonés (em rosa e verde) O Flash cria um objeto de Armadura automaticamente depois desse processo, use o CTRL+Z para começar de novo caso precise ou use o comando Modificar/Separar em partes no menu (CTRL+B). 1.8 CONCEITOS DE ANIMAÇÃO Devemos entender animação como um conhecimento que possui sua própria estética, a estética do movimento. Isto significa que animação não é simplesmente um
  • 30. encadeamento de desenhos, mas um encadeamento de desenhos dotados de toda uma estética particular. A estética do desenho consiste em saber como funcionam os movimentos dos corpos, principalmente dos seres vivos, e a partir daí ter a criatividade e o talento de fazer que tais movimentos expressem uma ideia. Se compararmos o andar de pessoas do gênero masculino e feminino, vemos que o primeiro possui um movimento mais direto e firme. Já o andar feminino é mais sinuoso e suave. Podemos descrever ambos os andares da mesma forma, com um pé após o outro, contudo, suas diferenças estão nos detalhes. Conseguir perceber as sutilezas do movimento é parte fundamental do trabalho de animação. Para entendermos como funciona toda essa estética, vamos observar alguns dos conceitos mais pertinentes em animação. Vamos chamar esses conceitos de “repertório básico de animação”. Sendo assim o repertório é formado por “quadros chaves, linha de ação, compressão extensão e referência para animação ou rotoscopia”. Quadros chaves O primeiro item desse repertório certamente são os quadros-chaves. Como já foi explicado anteriormente, nos quadros-chaves que são pensados os movimentos, eles são os quadros da animação que diferencia as poses de um personagem. Podemos dizer que com os quadros-chaves temos a leitura de todo o movimento, são eles que descrevem o movimento. Observando o movimento de uma bola que quica no chão, podemos descrever que ela vem do alto, colido com o chão e volta. Então podemos pensar em três quadros-chaves para esse movimento. Figura 17- Quadros-chaves e quadros-chaves com os intervalos
  • 31. Página14 de 18  ANTERIOR  PRÓXIMA 1- Linha de ação: A linha de ação é uma forma simplificada de se pensar os quadros chaves de personagens ou criaturas complexas de se desenhar. Significa pensar o desenho de um quadro em uma simples linha, ou seja, pensar o movimento da linha, pois ela é uma forma mais fácil de ser desenhada. Imagine ter que fazer todo um desenho de um personagem para testaruma ideia. Caso o movimento não fique satisfatório, teria que fazer tudo de novo. Assim, tendo a linha como a espinha dorsal do movimento, fica mais ágil pensar o movimento. Além disso, com a linha de ação é possível pensar a expressão do movimento, imaginando os gestos dos personagens, as curvaturas de seus corpos e leveza ou brutalidade da ação. Importante lembrar que a linha de ação não é necessariamente uma das linhas do desenho, mas sim uma linha que sintetiza todas as outras linhas do desenho. Figura 18 - Quadros de um cachorro correndo e suas linhas de ação 2 - Compressão extensão: Outro princípio muito importante na hora de fazer a animação é notar que quando parte de um personagem move-se, como são os movimentos dos braços, geralmente o resto do corpo também se movimenta para antecipar o movimento, ou por uma questão de força, mesmo que levemente. O que acontece é que para uma animação ficar com riqueza de detalhes, é preciso manter em movimento todas as linhas do desenho durante a sequência. Para isso, uma estratégia muito utilizada é comprimir e estendero objeto em animação, conforme as forças que atuam no corpo do objeto ou personagem em movimento. Por exemplo, quando um personagem pisa no chão ao andar, podemos achatá-lo um pouco em função da força que ele fez ao pisar, e esticá-lo um pouco quando ele esticar a perna ao continuar o movimento.
  • 32. Claro que dependendo do efeito dramático desejado, isso pode variar. Como em uma cena de espanto, o personagem pode ficar paralisado na tela, ou quando se pretende um efeito cômico a compressão e extensão serão bem exageradas. Isso deve ser de acordo com a atmosfera do jogo e a criação do personagem. O importante é manter as linhas do desenho em movimento. Figura 19 - Animação com compressão e extensão 3 - Referência para animação ou Rotoscopia: Quando é preciso criar uma animação muito complexa, como uma dança, uma luta ou quando é preciso interpretar um movimento expressivo, como feições faciais e gestos, o repertório do artista pode não ser suficiente para realizar tal criação. Sendo assim, o animador deve fazer uso de referências, como filmagens ou outras animações. Muitos artistas 3D filmam sua própria imagem para interpretar os personagens que irão animar. A partir daí, é possível usar o filme de referência, encontrar os quadros chaves e toda estética do movimento. Muitas animações são feitas com rotoscopia, que trata de criar toda uma animação baseando-se em filmagens de atores reais. Na rotoscopia os quadros são feitos em cima de cada imagem filmada, mas pode ser acrescentados objetos ou mudadas as características dos atores. Figura 20 - Imagem de referência e quadro desenhado em rotoscopia
  • 33. Página15 de 18  ANTERIOR  PRÓXIMA 1.9 PLANEJANDO SUA ANIMAÇÃO COM UM STORYBOARD Bom, até agora vimos como funciona a animação sobre aquilo que cerca o movimento das coisas em si, ou seja, em função da estética do movimento e de como pensar os quadros de animação. Contudo existe outra parte do universo da animação bem mais abrangente, a do planejamento da narrativa de animação, no qual é desenvolvido um documento chamado storyboard para as cenas assistidas. O storyboard é uma planificação de uma sequência em movimento. É quase uma história em quadrinhos do projeto, mas com as anotações específicas de uma produção áudio- visual, seja esse projeto um filme, um desenho animado ou um jogo. Figura 21 - Exemplo de storyboard de um episódio dos Simpsons
  • 34. Não há quantidade de quadros ou páginas que possa ser apontado como mínimo, máximo, ou ideal em um storyboard. A estrutura de cada projeto é que determinará o seu tamanho. Em um jogo de nave espacial com visão fixa, por exemplo, a necessidade de um storyboard será mínima e serão necessários poucos quadros para se definir a estrutura e dinâmica visual do jogo. Sabendo de antemão os enquadramentos, linguagem, ângulos de narrativa e expressão gráfica, é mais rápido para a equipe “falar a mesma língua” e concentrar os esforços em uma meta comum. De forma mais ampla, o storyboard também dá consistência ao projeto. A partir dele começa-se a entender e visualizar o projeto como um todo, sua linha narrativa e dinâmica visual, o que é um grande estímulo para a equipe envolvida.
  • 35. No storyboard o importante não é a qualidade do desenho, mas sim o encadeamento das ideias e a quantificação do trabalho de animação. Portanto, não é necessário desenvolver as feições finais dos personagens e ilustrações com acabamento rebuscado, o importante é estudar a sequência. O storyboard é um documento vivo que pode ser revisto e reestudado, é com ele que a equipe pode avaliar o todo, fazendo correções sem prejudicar o conjunto. Página16 de 18  ANTERIOR  PRÓXIMA 1.10 DEIXANDO O FLASH DO SEU JEITO Para ficar mais à vontade com a ferramenta Flash, você pode escolher algumas preferências do programa. Vá até o menu Editar>Preferências ou use o atalho CTRL+U. Como já vimos antes, uma característica do Flash é usar um objeto dentro de outro, mas e quando a gente quiser usar o CTRL+Z para desfazer alguma coisa, o Flash vai saber o que foi mudado aonde? Até certo ponto sim, essa é o formato padrão de “CTRL+Z” no Flash, mas pode gerar problemas e não ser o mais interessante. Já que o trabalho no Flash é preciso entrar e sair dos objetos a toda hora para edi tar as propriedades, você pode guardar o CTRL+Z para cada objeto editado ao invés do documento todo, ou seja, cada Símbolo e o Palco terá um histórico separado de edição para ser desfeito. Você encontra essa opção nas preferências:  Desfazer em nível de documento  Desfazer em nível de objeto Figura 22 - Painel de preferências
  • 36. Outra característica fácil de configurar no Flash é sua interface gráfica. Ela segue os mesmos princípios de todos os programas da família Adobe, onde os painéis podem ser arrastados e posicionados onde você desejar. Por padrão, o Flash vem configurado com o tema Essentials. Você pode usar outro estilo acessando o menu Janelas>Área de trabalho. Figura 23 - Interface no modo Essentials
  • 37. Figura 24 - Interface no modo Classic Página17 de 18
  • 38.  ANTERIOR  PRÓXIMA 1.11 PUBLICANDO COM FLASH Como comentado anteriormente, o Flash pode publicar para diversos formatos. Mas onde fica essa configuração? Figura 25 - Botão para configuração para publicação As configurações mais importantes para a publicação do Flash é a versão do Player a ser exportado e a versão do Action Script do arquivo FLA. Essas configurações podem mudar o painel propriedades e limitar os recursos. Por exemplo, as animações de interpolação de movimento e a armadura não podem ser usadas no Action Script 2.0. Já o Action Script 3.0 não pode ser publicado em versões anteriores ao Flash Player 9.0. Vale lembrar que a linguagem de programação é um recurso em evolução contínua, portanto alguns recursos de programação podem não estar disponíveis dependendo da versão que você usar, ou até os mesmos recursos podem ser interpretados ligeiramente diferentes em versões mais antigas. A exemplo disso, a publicação para Air Player contempla vários recursos de programação que o Flash Player não possui, por exemplo, a possibilidade de salvar arquivos no computador do usuário. Figura 26 - Painel de publicação do Flash
  • 39. 1.12 BOAS PRÁTICAS COM O FLASH Para usar bem o Flash vamos ver algumas dicas fundamentais para usar plenamente o programa:  Use um nome intuitivo para as camadas. Descreva com clareza a finalidade ou o conteúdo de cada camada ou pasta, quando for nomeá-los.  Se estiver usando Action Script no arquivo, use uma camada exclusiva para o Script, outra camada para os Rótulos (labels) e outra camada para os sons.  Bloqueie as camadas que não estiver usando e que não têm conteúdo (Action Script, Rótulos e sons), para evitar de criar conteúdo em um lugar que não queria.  Use pastas na biblioteca para organizar os elementos semelhantes Normalmente, os nomes de pastas usados são Botões, Clipes de filme, Gráficos, Recursos, Componentes etc.  O Flash pode utilizar imagens e sons, procure configurar corretamente a compactação desses arquivos para que haja um equilíbrio entre qualidade e tamanho de arquivo. Não redimensione uma imagem no Flash apenas para caber no Palco, procure usar a imagem no tamanho necessário e exato em pixels.  Na internet, um conteúdo feito em flash não aparece bem em sites de pesquisa. É possível configurar melhor o flash para aparecer com mais pertinência nas pesquisas online. Saiba mais: <http://visibilidade.net/perguntas-frequentes/optimizar-site-flash-motores-de-busca.html> Página18 de 18  ANTERIOR
  • 40. ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES WEB WEBAULA 1 Unidade 2 - ACTION SCRIPT 3.0 2.1 Fundamentos do Action Script Você já tentou usar o Action Script no Flash? Caso já tenha feito alguma coisa é provável que tenha escrito alguma coisa na Linha de Tempo em algum Quadro-chave. Pois é, o Flash é uma ferramenta que permite misturar elementos gráficos com programação, isso gera muitas dúvidas para quem trabalha com o aspecto visual e também para quem está mais acostumado com ambientes de programação puros como Java, C#, C++, entre outros. Do ponto de vista do programador, devemos entender o Flash como uma ferramenta que já cria e instância coisas sem precisar usar tanto código para isso, ou seja, os ponteiros que serão usados para a aplicação já podem ser descritos no Palco do Flash. Vamos entender como isso evoluiu. Nas versões mais antigas do Flash, o Action Script 1.0 (AS1) foi criado para fazer coisas muito simples dentro do programa, era uma maneira mais trivial de executar coisas como, dar um “play” em uma animação, abrir um link, entre outras coisas. Com o passar do tempo, o Flash foi sendo usado cada vez mais para fazer coisas mais complexas e sua linguagem acompanhou isso, culminando no Action Script 2.0 (AS2) que nada mais foi que a ampliação da biblioteca do AS1. O AS2 fazia uma porção de coisas, mas em geral, era alvo de muitas reclamações da parte dos programadores, pois é uma biblioteca pouco organizada. Hoje o Flash possui duas bibliotecas distintas: o Action Script 2.0 e o Action Script 3.0 (AS3). De fato as duas linguagens operam em máquina virtual diferente, por isso os projetos em Flash devem ser bem pensados a princípio, para decidir pelo AS2 ou pelo AS3. Veja mais sobre o Action Script em: <http://pt.wikipedia.org/wiki/Action_Script>
  • 41. O Action Script é uma linguagem de script orientada a objetos, com a sintaxe muito parecida com Java Script, pois ambas são baseadas no padrão ECMAScript. O Flash é uma ferramenta essencialmente gráfica, para que possamos usá-lo de forma eficiente com o Action Script, precisamos entender como vincular os códigos aos gráficos no Flash. Por comodidade, a ferramenta permite que se escrevam códigos na Linha de Tempo. Essa forma de criar scripts no Flash permite desenvolver algo bem rápido, porém pode deixar seu código pouco reutilizável ou bastante bagunçado em casos de projetos maiores. A melhor forma de organizar os códigos é criando Classes em arquivos de Actions Script, conhecidos como arquivos de extensão “.as”. Cada Classe pode ser vinculada a um Símbolo no Flash ou ao Palco, desde que ela seja uma derivada de uma Classe visual do Flash, geralmente das Classes Sprite ou MovieClip. A classe vinculada ao Palco é sempre a classe principal, ou seja, a de nível mais alto na hierarquia. Figura 1 - Campo para vincular a Classe principal no Palco As classes podem ser criadas no Flash, basta ir em Arquivo/ Novo e escolher a opção Action Script 3.0. Escolha o nome da Classe e clique em ok. Um arquivo com a estrutura básica de uma Classe em Action Script será criada. Outra forma de vincular um Script a um objeto no Flash é mapeando o Script ao Símbolo que está na Biblioteca. Você pode fazer isso no momento da criação do Símbolo expandindo a tela de criação, ou depois nas propriedades, clicando com o botão direito no Símbolo que está na Biblioteca. Figura 2 - Painel de criação de Símbolos resumido e expandido
  • 42. Exemplo de uma Classe em Action Script No caso, o campo Class é o caminho para seu Script e o campo Base Class é o caminho para a Classe que você deseja derivar sua nova Classe, você só precisa preencher o segundo campo se estiver criando uma Classe automática do Flash, ou seja, sem um arquivo externo de fato, caso contrário o Flash irá se orientar pelo o que estiverdescrito no seu arquivo “.as”. Para entender melhor a estrutura de classes do AS3, é recomendado olhar a referência da linguagem (o link abaixo é referente a toda a plataforma Flash): <http://help.adobe.com/pt_BR/FlashPlatform/reference/actionscript/3/ind ex.html> 2.2 FLASH E ORIENTAÇÃO A OBJETO Vamos revisar alguns conceitos de orientação a objetos: Objetos são os tipos de dados, visíveis ou não, usados para representar as coisas no Flash, por exemplo: / nome é o objeto, e estamos mudando sua propriedade “lado” nome.lado = 10; Classes descrevem a natureza dos objetos, ou seja, todo objeto pertence a uma classe. // programação orientada à objeto class Nomedaclasse { function Nomedaclasse(){ //... } }
  • 43. Métodos e propriedades são o que os objetos podem fazer dentro de uma Classe. // nome é o objeto, e estamos mudando sua propriedade “lado” e // chamando um método “virar” nome.lado = 10; nome.virar(); Podemos encarar as CLASSES como a natureza das coisas, os OBJETOS como substantivos, as PROPRIEDADES como adjetivos e os MÉTODOS como verbos. // nome é algo (substantivo) da natureza Pessoa, com o adjetivo // “lado” que pode fazer algo como “virar”, que é um verbo var nome:Pessoa = new Pessoa(); nome.lado = 10; nome.virar(); Eventos são processos que ocorrem no programa que podem ser escutados para realizar outros processos. No AS3 isso é fundamental, pois permite criar todo tipo de interação com os objetos. // addEventListener é um método para por um “escutador de evento” no // objeto objeto. Event.ENTER_FRAME é apenas um valor que guarda o // nome do evento a ser escutado e “loop” é o a função que será // executada no mesmo momento que o evento ocorrer. // A função loop recebe um valor do tipo Event. Existem vários tipos // de evento no Flash. objeto.addEventListener(Event.ENTER_FRAME, loop); function loop(e:Event):void{ e.target.x += 5; } Criando um programa em Flash function escrevaIsso (oque:String) { trace(oque); } escrevaIsso(“professor legal”); Funções são comandos que guardam blocos de instruções que podem ser executados quando as funções são chamadas.
  • 44. Vamos ver como fazer isso na prática? Você pode criar um Símbolo do tipo Clipe de Filme e colocá-lo no Palco do Flash. Para poder acessá-lo através da programação pela Linha de Tempo é preciso dar um nome a essa instancia do Símbolo. Toda vez que publicamos o SWF o Flash cria nomes automáticos para os objetos que você não escolheu o nome, mas você pode definir esses nomes das instancias para poder usá- los na programação. Figura 3 - Campo para dar nomes às instancias de objetos no Flash Selecione o Clipe de Filme criado e vá em propriedades, digite o nome: objeto. O nome precisa ser sem acentos, sem espaços e sem começar por um número. O Flash também diferencia maiúsculas de minúsculas. Agora selecione o primeiro Quadro Chave e abra o Painel de Action Script com o atalho F9. Escreva exatamente o código acima e veja o que acontece. Seu objeto deverá começar a andar horizontalmente, porque o evento Event.ENTER_FRAME é um evento chamado a cada atualização de tela do Flash, portanto, a função loop irá mover 5 pixels o seu target na coordenada x. SINTAXE No Flash os principais elementos de sintaxe são: . para ordenar objetos, propriedades, métodos ; para encerrar uma instrução ( ) para passar uma instrução a uma função { } para criar um bloco de instruções [ ] para atingir um valor indexado ao objeto (array) // para documentar o código : para atribuir um tipo a uma variável ou função
  • 45. “ para valores do tipo texto (string) No Flash os objetos mais usados geralmente são esses: Tipos de valores: Formato String “nome” Movie clip nome Button nome Text field nome Number 5 Boolean true / false Object Nome Function Nome 2.3 CARREGANDO UM MOVIECLIP DA BIBLIOTECA PARA O PALCO Para carregar um objeto da Biblioteca para o palco, você precisa adicionar pelo menos duas linhas de código: //ActionScript 3 – no frame 1 var cao = new Cachorro(); addChild(cao); Neste caso, “Cachorro” é uma Classe vinculada a um Símbolo na Biblioteca e o Script foi colocado na Linha de Tempo principal. Os objetos no AS3 podem ser reposicionados a qualquer momento usando o método addChild, a maioria dos objetos visuais herdam esse método. 2.4 NAVEGANDO PELAS LINHAS DO TEMPO Para controlar as animações através de Script é bem simples, você poderá usar 04 métodos básicos que pertencem à classe MovieClip: play, stop, gotoAndPlay e gotoAndStop.  play: inicia a reprodução de alguma Linha de Tempo a partir do ponto onde ela está. O play é automático em todos os objetos do tipo MovieClip.
  • 46.  stop: interrompe a reprodução de um MovieClip, muito usado no começo das aplicações para interromper a reprodução da Linha de Tempo principal, para que esta possa ser usada como telas ao invés de animações.  gotoAndPlay: semelhante ao método play, porém permite que o a reprodução comece a partir de um ponto dado, que pode ser um valor numérico do Quadro Chave ou um texto indicado o rótulo do Quadro Chave.  gotoAndStop: equivalente ao gotoAndPlay, porém para interromper a reprodução e reposicionar a animação. Figura 4 - Exemplo de Rótulo (Label) Os Rótulos (Labels) são muito úteis para organizar as animações, pois permite criar um vínculo entre as animações e o script de forma independente, pois caso seja necessário reposicionar os rótulos, isso não irá afetar a programação e vice versa. Já no caso de usar o valor do Quadro Chave. Carregamento de arquivos externos por url O Flash pode carregar diferentes arquivos externos: uma imagem, outro arquivo swf, ou um arquivo de texto em XML para carregar dados. Como fazer isso no Flash? Você precisa de dois objetos para fazer isso: um carregador e um com a URL do arquivo que deseja carregar. Veja o exemplo abaixo: //carrega arquivo externo var loader:URLLoader = new URLLoader(); loader.addEventListener(Event.COMPLETE, onCompleto); var myrequest:URLRequest = new URLRequest("myfile.xml"); loader.load(myrequest);
  • 47. function onCompleto(ev:Event){ var myxml:XML = new XML(ev.target.data); trace(myxml); }   1  2.5 CRIAÇÃO DE SITES  O primeiro é o objeto responsável pelo carregamento, logo após criar o carregador já adicionamos um escutador de evento para quando o carregamento completar. Em seguida criamos o objeto que referencia a URL do arquivo a ser carregado, repare que a url é passada no construtor do objeto. Após essas declarações passamos a agir de fato usando o método “load” do objeto carregador passando o objeto criado com a URL do arquivo. Na função atribuída ao evento “COMPLETE” do carregador, indica que será disparado quando o carregamento estiver completo, assim os dados carregados estarão disponíveis para serem usados pelo Action Script, no caso, para a criação de um objeto do tipo XML. O comando trace serve para criar mensagens no Flash para ajudar no desenvolvimento.  2.5.1 Criando um pré-carregador  Para criar um pré-carregador do Flash podemos usar o seguinte Script no primeiro Quadro da Linha de Tempo principal com uma caixa de texto (Textfield) instanciada com o nome de loading. stop(); var percent = 0; var total = 0; var loaded = 0; function verificaLoading(ev:Event) { loaded = loaderInfo.bytesLoaded; total = loaderInfo.bytesTotal; percent = int((loaded*100)/total); loading.text = 'Carregado '+percent+'%';
  • 48. if (percent>99) { nextFrame(); removeEventListener(Event.ENTER_FRAME,verificaLoading); }  2.5.2 Exemplos legais com o Flash  Faz o carregamento do arquivo em partes, ou seja, por Quadros. Então quando mais vazio você deixar o primeiro quadro, mais rápido o Flash irá mostrar algum conteúdo na tela quando for publicado na internet.  Por isso logo no começo do Script já usamos o método stop(); para interromper a reprodução automática. Em seguida, declaramos algumas variáveis que serão usadas para uma conta matemática. Dentro da função verificaLoading temos a lógica do processo, onde precisamos saber o quanto já foi carregado (loaded) o quanto temos para carregar (total) e converter essas informações em um valor de porcentagem (percent). Com essas informações é possível escrever no objeto loading (TextField) alguma informação sobre o carregamento. Por final, existe uma verificação condicional que caso o valor da porcentagem seja maior que 99%, a Linha de tempo principal irá avançar 01 Quadro e o escutador de evento será retirado com o método removeEventListener, para não interferir mais.  2.5.3 Criando um jogo simples  Para criar um jogo bem simples no Flash podemos usar um Símbolo para representar balões. Esses balões deverão aparecer na tela e o usuário deverá clicar neles para pontuar. Então precisamos de dois elementos gráficos: 01 Símbolo de Balão e 01 caixa de texto para escrever os pontos.  Ao salvar o Símbolo do Balão podemos atribuir o nome Balao para sua Classe. Não precisamos criar a classe propriamente, o Flash irá cuidar disso. Vamos usar essa classe apenas para referenciá-la no Action Script do jogo. Quando a classe indicada não encontra o arquivo “.as” correspondente, o flash mostra uma mensagem dizendo que ele vai gerar uma classe com aquele nome em tempo de compilação. Apenas clique em OK.  Figura 5 - Mensagem de criação automática de Classe pelo Flash   Agora vamos adicionar o campo de texto no Palco do Flash. Use o tipo Classic Text, mude seu comportamento de Static Text para Dynamic Text, escreva o nome de sua instancia como pontos, no painel propriedades.  Pronto, agora você pode selecionar o primeiro Quadro da Linha de Tempo principal para escrever o Script.
  • 49. } function adicionaBalao () { var balao:Balao = new Balao(); balao.x = Math.random() * stage.stageWidth; balao.y = Math.random() * stage.stageHeight; addChild(balao); balao.addEventListener(MouseEvent.CLICK, clickbalao); } function clickbalao(e:MouseEvent){ var balao:Balao = e.target as Balao; removeChild(balao); points += 20; pontos.text = points.toString(); }  O código começa com a importação de duas classes da biblioteca do Flash. Isso é necessário porque está sendo usado a referência Event.ENTER_FRAME e MouseEvent.CLICK. Em seguida, são declaradas duas variáveis, um para controlar o tempo em que os balões irão aparecer (count) e outro para controlar os pontos feitos (points).  Para o game funcionar, foi adicionado um escutador do evento ENTER_FRAME, para poder checar a todo momento se será criado um novo balão. Dentro da função loop, existe uma lógica que irá permitir criar um balão a cada 12 contagens. É usado a função adicionaBalao para fazer isso.  Na função adicionaBalao o Símbolo criado na Biblioteca é instanciado no palco, sua posição é sorteada usando o método random da classe Math, para contas matemáticas. As posições possíveis respeitam o tamanho do Palco através da referencia stage.stageWidth e stage.stageHeight. Todos os objetos visuais tem a propriedade stage, que referencia o Palco. Em cada balão adicionado é colocado um evento escutador para saber se ele foi clicado pelo mouse, por isso o tipo do evento é MouseEvent.CLICK.
  • 50.  Na função clickbalao é preciso criar um ponteiro para o objeto que executou o evento, isso é feito através do e.target que será interpretado como um objeto do tipo Balao, pois já sabemos isso de antemão. A tipagem do e.target é genérica e o Flash não saberia dizer que métodos usar nesse objeto, por isso devemos criar um ponteiro, para poder remover o balão do Palco através do método removeChild.  Após isso, os valores de points são somados e o valor é mostrado no objeto de texto pontos.   Webaula: Programando um Jogo em Flash  O Plugin Silverlight está desabilitado ou não foi instalado em seu browser, faça o download clicando aqui ou ative o mesmo.  2.6 CRIANDO UM BOTÃO ARRASTÁVEL  Para criar um botão para ser arrastado você precisa de um Símbolo. Todos os objetos visuais do Flash podem receber eventos do mouse e seu comportamento pode ser controlado por algumas propriedades básicas:  objeto.mouseChildren:Boolean / Determina que os filhos deste símbolo são reativos ao mouse ou não.  objeto.buttonMode:Boolean / Determina se o objeto irá se comportar como um botão mostrando o ícone de clique para o mouse.  objeto.mouseEnabled:Boolean / Determina se os eventos de mouse serão disparados ou não. import flash.events.MouseEvent; botao.addEventListener(MouseEvent.MOUSE_DOWN,pega); stage.addEventListener(MouseEvent.MOUSE_UP,solta); function pega (e:MouseEvent) { botao.startDrag(); } function solta(e:MouseEvent) { botao.stopDrag(); }
  • 51.  No código acima, a classe MouseEvent é importada para poder usar os valores nas funções que estão escutando o evento.  O objeto ‘botão’ deve existir no palco para que tudo funcione. Nele é adicionado um escutador de evento para o evento de pressionar o mouse sobre ele.  Na propriedade stage, que faz referência ao palco do Flash, é adicionado um evento escutador para quando soltar o mouse. Isso é feito no Palco porque ao deslocar o mouse a posição do botão pode sair de baixo do ponteiro do mouse por razões de sincronismo entre o sistema operacional e a taxa de atualização do Flash. Então para evitar isso é colocado um escutador no objeto inteiro do flash o Palco.  Por fim são declaradas as duas funções usadas nos escutadores, uma para arrastar que usa o método startDrag (começe a arrastar) e outra que usa o método stopDrag (pare de arrastar).   2.7 OUTRAS DICAS  Você pode usar outro programa para escrever o Action Scritp, um muito bom é o software FlashDevelop, que também permite exportar conteúdo em SWF usando ActionScript puro.  <http://www.flashdevelop.org>  Outra forma do Flash trabalhar é usar bibliotecas de programação pré compiladas ou protegidas, ou seja, bibliotecas disponíveis na internet podem ser usadas para facilitar o desenvolvimento. Por exemplo, você pode usar uma biblioteca de física chamada Box2D para simular comportamentos e colisões entre os objetos, muito usado em jogos em Flash. Outra biblioteca muito famosa é o Tweener, que permite fazer animações usando apenas códigos simples.  Para adicionaruma nova biblioteca vá nas propriedades do documento e selecione o ícone com a chave de boca. Dentro você vai encontrar opões para importação de arquivos em SWC.  Figura 6 - Usando arquivos SWC
  • 52.  TECNOLOGIAS PARA APLICAÇÕES WEB WEBAULA 1 UNIDADE 1: INTRODUÇÃO ÀS TECNOLOGIAS JAVA ENTERPRISE EDITION(Conceitual) O que é uma aplicação Java Web? Segundo o Netbeans.org (2013), uma aplicação Java Web gera páginas Web interativas, que podem conter vários tipos de linguagens de marcação (HTML, XHTML, XML, entre outras) e conteúdo dinâmico.
  • 53. Saiba mais sobre linguagens de marcação: http://www.w3schools.com/html/html_intro.asp http://www.w3schools.com/html/html_xhtml.asp http://www.w3schools.com/xml/ Geralmente composta por componentes Web, como:  JavaServer Pages (JSP);  Servlets;  JavaBeans. Estes componentes servem para modificar e armazenar dados temporariamente, interagir com bancos de dados e webservices e processar o conteúdo como resposta às solicitações do cliente. Java EE para aplicação Web O Java EE (I), conforme definição de sua dona e mantenedora a empresa “Oracle”, é um kit de desenvolvimento integrado livre usado para construir, testar e implementar aplicativos Java Web. É uma plataforma amplamente usada que reduz o custo e a complexidade do desenvolvimento, implantação e gerenciamento de aplicações de várias camadas centradas no servidor. O Java EE é uma especificação que agrupa diversas outras especificações. Para fazer download da plataforma JEE e de sua documentação oficial acesse: http://www.oracle.com/technetwork/java/javaee/documentation/in dex.html Para consulta à especificação Java EE, acesse: http://docs.oracle.com/javaee/6/api/ Para preparação de um ambiente de trabalho, o seguinte manual pode ser utilizado em: http://novatec.com.br/livros/javaparaweb/capitulo9788575222386. pdf Ambientes de Desenvolvimento Uma IDE (Integrated Development Environment) ou simplesmente ambiente integrado de desenvolvimento deverá ser utilizado para otimizar o processo de desenvolvimento de uma aplicação Web. Essas IDE´s proporcionam maior produtividade em um ambiente de programação, portanto, devem ser adotadas para uso não somente para esta disciplina ou especialização, mas também em qualquer ambiente de desenvolvimento que utilizar as tecnologias Java que serão abordadas nesta disciplina. As IDE´s mais popularmente conhecidas e utilizadas que poderão ser adotadas são o Eclipse e o Netbeans. Saiba mais sobre as principais IDE´s em: http://www.eclipse.org/ e http://netbeans.org/ O padrão MVC e Front Controller
  • 54. O modelo MVC (Model View Controller) nada mais é do que um design pattern útil para resolver problemas de modelagem de projetos, se usado de forma adequada. Mas afinal, o que é um design pattern? Design patterns ou padrões de projetos são soluções para problemas enfrentados que alguém um dia teve e resolveu aplicando um modelo que foi documentado e que você pode adaptar de acordo com sua necessidade de solução. Mais sobre design patterns em: http://www.dcc.ufrj.br/~schneide/PSI_981/gp_6/design_patterns.html O MVC (model-view-controller) é um padrão de arquitetura que tem por objetivo isolar a lógica do negócio da lógica de apresentação de uma aplicação. Esse padrão (ou alguma variação) é amplamente adotado nas principais plataformas de desenvolvimento atuais. Em particular, muito utilizado na plataforma Java. O padrão MVC divide a aplicação em três tipos de componentes: modelo, visão e controlador.  Modelo: encapsula os dados e as funcionalidades da aplicação.  Visão: é a responsável pela exibição das informações, cujos dados são obtidos no modelo.  Controlador: recebe as requisições do usuário e aciona o modelo e/ou a visão. Vídeo: Introdução ao Design Pattern MVC: https://www.youtube.com/watch?v=-ykX79QkRsI Imagine todas as requisições sendo recebidas por um único componente, esta é a proposta do padrãoFront Controller. Assim as tarefas que devem ser realizadas em todas as requisições podem ser implantadas por esse componente, evitando a repetição de código e facilitando a manutenção do sistema. Web Container Necessidades de uma aplicação Web HTTP Os usuários de uma aplicação Web utilizam navegadores (browsers) para interagir com essa aplicação. A comunicação entre navegadores e uma aplicação web é realizada por meio de requisições e respostas definidas pelo protocolo HTTP. No caso específico de uma aplicação web Java noframework JSF 2.1 uma aplicação web nada mais é do que um documento XHTML, que descreve para o navegador como exibir e formatar as informações do documento. Sendo assim, os desenvolvedores de aplicação web devem estar preparados para trabalhar com o protocolo HTTP. URI´s
  • 55. O protocolo HTTP permite a clientes e servidores interagir e trocar informações de uma maneira simples e confiável. O HTTP utiliza o URI (Uniform Resource Indentifier) para identificar dados na Internet. Os URI’s que especificam as localizações de documentos são chamados URL’s (Uniform Resorce Locators). URL’s comuns fazem referência a arquivos, diretórios ou objetos e podem realizar tarefas complexas, como pesquisa em um banco de dados e pesquisas na Internet. URL´s Se você conhecer o URL de um recurso ou arquivo público disponível em qualquer lugar da Web, você poderá acessá-lo por meio do HTTP. Desmembrando uma URL Tabela 1: detalhamento da url http://www.unopar.br/pesquisa/agenda.jsp. Componentes do HTTP http:// indica que o recurso deve ser obtido utilizando o protocolo http. www.unopar.br é o hostname totalmente qualificado do servidor (host) em que o recurso reside. Ohostname é convertido em um endereço IP por servidor (DNS) que mantém um banco de dados dos nomes de host e seus endereços IP correspondentes. /pesquisa/agenda.jsp o restante do URL especifica o nome do recurso solicitado e seu caminho ou localização no servidor Web. Fonte: Do autor (2013) Fazendo uma solicitação e recebendo uma resposta Quando dado uma URL, um navegador Web realiza uma transação HTTP para recuperar e exibir a página Web nesse endereço. Deitel (2010) ilustra esta transação, mostrando a interação (vide figuras 1 e 2) entre o navegador Web (cliente) e aplicativo de servidor Web (Servidor). Figura 1: Cliente interagindo com o servidor Web. Passo 1: A Solicitação GET.
  • 56. Fonte: Deitel (2010) O navegador Web envia uma solicitação HTTP ao servidor. A solicitação na forma mais simples é: GET /pesquisa/agenda.jsp HTTP 1.1 A palavra get é um método HTTP indicando que o cliente deseja obter um recurso do servidor. O restante da solicitação fornece o nome do caminho do recurso (por exemplo, um documento XHTML), o nome do protocolo e o número da versão (HTTP/1.1). Figura 2: Cliente interagindo com servidor Web. Passo 2: A resposta HTTP. Fonte: Deitel (2010). Qualquer servidor que entende o protocolo HTTP pode converter essa solicitação e responder apropriadamente. O servidor primeiro responde enviando uma linha do texto indicando a versão HTTP, seguida por um código numérico e uma frase descrevendo o status da transação. Por exemplo, HTTP/1.1 200 OK indica sucesso, enquanto HTTP/1.1 404 Not Found Lista completa dos códigos que indicam o status de uma transação HTTP acesse:www.w3.org/Protocols/rfc2616/rfc2616-sec10.html O cabeçalho HTTP
  • 57. O servidor envia um ou mais cabeçalhos HTTP que fornecem informações adicionais sobre os dados que serão enviados. No caso abaixo, o servidor está enviando um documento de texto XHTML, portanto, um cabeçalho HTTP seria lido: Content-type: text/html As informações deste cabeçalho especificam o tipo Multipurpose Internet Mail Extensions (MIME) do conteúdo que o servidor está transmitindo ao navegador. O MIME é um padrão Internet que especifica formatos de dados para que os programas possam interpretar os dados corretamente. Por exemplo, o tipo MIME image/jpeg indica que o conteúdo é uma imagem JPEG. Quando o navegador recebe esse tipo de MIME ele tenta exibir a imagem. Lista de tipos de MIME em: Solicitações HTTP Get e Post Os dois tipos de solicitação HTTP mais comuns são Get e Post (também conhecidos como métodos de solicitação). Uma solicitação Get, em geral, pede um recurso específico em um servidor. Os usos comuns das solicitações Get são recuperar uma imagem ou um documento XHTML ou, ainda, buscar resultados de pesquisa com base de um termo de pesquisa submetido pelo usuário. Uma solicitaçãoGet envia informações ao servidor no URL, por exemplo: www.google.com.br/search?q=unopar Nesse caso, search é o nome do handler de formulário no servidor Google, ‘q’ é o nome da variável no formulário de pesquisa do Google e ‘unopar’ é o termo de pesquisa. O ‘?’ separa a string de consulta do restante do URL em uma solicitação. Um par de nome/valor é passado para o servidor com o nome e o valor separados por um sinal de igual (=). Se mais de um par de nome/valor é for submetido, cada um é separado do próximo por caractere & (“e” comercial). O servidor utiliza os dados passados em uma string de consulta para recuperar um recurso XHTML cujo atributo method é configurado como “get”, digitando o URL (possivelmente contendo uma string de consulta) diretamente na barra de endereços do navegador ou por meio de um hiperlink. Uma solicitação POST geralmente posta (envia) dados para o servidor. Os usos comuns das solicitações POST são enviar dados de formulário ou documentos a um servidor. A solicitação POSTenvia dados como parte de mensagem HTTP, não como parte do URL. Uma solicitação GET, em geral, limita a string de consulta (isto é, tudo à direita do ‘?’) a um número específico de caracteres (2.083 no Internet Explorer; mais em outros navegadores), assim, frequentemente é necessário enviar grandes volumes de informação utilizando o método POST. Este último também é às vezes preferido porque ele oculta os dados submetidos do usuário, incorporando-os as uma mensagem HTTP. Importante: Os dados enviados em uma solicitação POST não são parte do URL, e o usuário não pode ver os dados por padrão. Mas há ferramentas disponíveis que exibem esses dados, portanto você não deve supor que os dados sejam seguros somente porque uma solicitação POST é usada. Acesso simultâneo Além de todas as particularidades observadas no protocolo HTTP, na grande maioria dos casos, as aplicações Web devem ser acessadas por diversos usuários ao mesmo tempo. Consequentemente, os desenvolvedores Web devem criar ou utilizar algum mecanismo eficiente que permita esse tipo de acesso.
  • 58. Conteúdo dinâmico As páginas de uma aplicação Web devem ser geradas dinamicamente. Por exemplo, quando um usuário de uma aplicação de e-mail acessa sua caixa de entrada, ele deseja ver todos os e-mailsenviados até aquele momento. A página contendo a lista de e- mails deve ser gerada novamente todas as vezes que essa página for requisitada. Logo, os desenvolvedores Web devem criar ou utilizar um mecanismo eficiente que permita que o conteúdo das páginas das aplicações Web seja gerado dinamicamente. Figura 3: Necessidades de uma aplicação Web. Fonte: Do autor (2013). Solução Resolver os três problemas apresentados (Manipulação de protocolo HTTP, Acesso simultâneo e conteúdo dinâmico) consumiria boa parte do tempo de desenvolvimento, além de exigir conhecimentos técnicos extremamente específicos por parte dos programadores. Para facilitar o desenvolvimento da aplicação Web, a plataforma Java oferece uma solução genérica que pode ser utilizada para desenvolver aplicações Web que você verá a seguir: Figura 4: O Web Container.
  • 59. Fonte: Do autor (2013). Uma aplicação Web Java deve ser implantada em um Web Container para obter os recursos fundamentais que ela necessita. Um Web Container é responsável:  Pelo envio e recebimento de mensagens HTTP.  Por permitir que as aplicações sejam acessadas simultaneamente por vários usuários de uma maneira eficiente.  Por permitir que as páginas de uma aplicação Web sejam geradas dinamicamente. Um dos Web Containers mais importantes do mercado é o Tomcat. Você também poderá utilizar um servidor de aplicação Java EE como o Glassfish, pois ele contém um Web Container internamente. Mais sobre Web Containers em: http://tomcat.apache.org/ http://glassfish.java.net/ 00:00 00:00 Servlet Como é comum na plataforma Java, foi definida uma especificação para padronizar a interface dos recursos oferecidos pelos Web Containers. Essa especificação é chamada de Servlet e atualmente está na versão 3.0. A especificação Servlet faz parte do Java EE. Para consulta à especificação Servlet acesse: http://jcp.org/en/jsr/stage?listBy=public
  • 60. Apesar das especificações, os Web Containers possuem algumas diferenças nas configurações que devem ser realizadas pelos desenvolvedores, sendo assim, não há 100% de portabilidade, no entanto, a maior parte das configurações e do modelo de programação é padronizado. Portanto, se você conhece bem um dos Web Containers, também conhece bastante dos outros. Para criar um Servlet, podemos seguir os seguintes passos:  Criar uma classe.  Herdar da classe javax.servlet.http.HttpServlet.  Reescrever o método service().  Utilizar a anotação @WebServlet para definir a URL que será utilizada para acessar a servlet. Essa anotação existe somente após a especificação servlet 3.0. Antes essa configuração era realizada a partir do arquivo web.xml. O método servisse ( ) é executado toda vez que uma requisição HTTP é realizada para uma URL definida na anotação @WebServlet. Esse método recebe dois parâmetros. O primeiro é a referência do objeto da classe HttpServletRequest que armazena todos os dados da requisição. O segundo parâmetro é a referência do objeto da classe HttpServletResponse que armazenará o conteúdo gerado pela servlet. Conteúdo na Resposta Para inserir conteúdo texto na resposta HTTP que será enviada para o navegador do usuário, devemos utilizaros métodos getWriter( ) e println( ). Geralmente, o conteúdo inserido na resposta HTTP é texto HTML, conforme o exemplo abaixo:
  • 61. Mais sobre Servlets: http://www.devmedia.com.br/desvendando-os-servlets-3-0-java- magazine- 81/17436 http://www.oracle.com/technetwork/java/index-jsp-135475.html http://www.javabeat.net/2008/12/new-features-in-servlets-3-0/ Aplicação Web Java A estrutura de pastas (diretórios) de uma aplicação Web Java deve seguir algumas regras para que possa ser implantada em um Web Container. Imagine um novo projeto de aplicação Web cujo nome seja “AgendaJSF”, a estrutura do projeto deverá ser a seguinte:  AgendaJSF/ o WEB-INF/  classes/  lib/  web.xml Obs: um diretório META-INF poderá fazer parte da estrutura caso seja necessário configurar um arquivo contexto.xml para conexão com banco de dados. A tabela abaixo apresenta de forma detalhada a estrutura da aplicação Java Web:
  • 62. Geralmente, as IDE’s criam toda a estrutura de diretório exigidas pelos Web Containers. Na prática, não temos o trabalho de criar esses diretórios manualmente. Processando Requisições Após implantar a aplicação Web Java em um Web Container, as requisições e respostas HTTP já estão sendo processadas pelo Web Container, que também já permite o acesso de múltiplos usuários a esta aplicação. Em seguida, devemos definir como o conteúdo das páginas da aplicação é gerado, para isso, podemos criar um Servlet. Frameworks Atualmente, é improvável que um projeto de desenvolvimento de uma aplicação Web utilize diretamente Servlets, pois a produtividade seria pequena e a manutenção
  • 63. custosa. Vários frameworksforam criados para facilitar o desenvolvimento e a manutenção de aplicações Web. Apesar de serem baseados em Servlets, esses frameworks oferecem recursos adicionais para as aplicações. Segue uma lista dos principais frameworks para aplicações Web Java:  JSF  Struts 1.x  Struts 2.x  Spring MVC Visão Geral do JSF 2 Atualmente, o principal framework para desenvolvimento de aplicações Web em Java é o JSF (JavaServer Faces). O JSF é fortemente baseado nos padrões MVC e Front Controller e fornece um conjunto de componentes de interface com o usuário, ou componentes JSF, que simplificam o design de páginas Web. Esses componentes são semelhantes aos componentes SWING utilizados para construir aplicativos GUI. No JSF o controle é composto por um servlet denominado FacesServlet, por arquivos de configuração e por um conjunto de manipuladores de ações e observadores de eventos. OFacesServlet é responsável por receber as requisições da Web, redirecioná- las para o modelo e então remeter uma resposta. Os arquivos de configuração são responsáveis por realizar associações e mapeamento de ações, também são responsáveis pela definição de regras de navegação. Os manipuladores de eventos são responsáveis por receber os dados vindos da camada de visão, acessar o modelo, e então devolver [ao usuário] o resultado para FacesServlet (COMPONENTES..., 2013, grifo nosso).
  • 64. O modelo representa os objetos de negócio e executa uma lógica de negócio ao receber os dados vindos da camada de visualização. Finalmente, a visão é composta por component trees (Hierarquia de componentes UI), tornando possível unir um componente ao outro para formar interfaces mais complexas. JSF: Vantagens O JSF oferece ganhos no desenvolvimento de aplicações web por diversos motivos:  Permite que o desenvolvedor crie UIs através de um conjunto de componentes UIs predefinidos;  Reutiliza componentes na página;  Associa os eventos do lado do cliente com os manipuladores de eventos do lado do servidor;  Fornece separação de funções que envolvam a construção de aplicações Web;  Projetado para ser flexível, sem limitar-se a nenhuma linguagem “markup” em particular, nem a protocolos ou tipos de clientes;  Permite a criação de componentes próprios a partir de classes de componentes (COMPONENTES..., 2013, grifo nosso). Embora os componentes JSF padrão sejam suficientes para a maioria dos aplicativos Web básicos, você também pode escrever bibliotecas de componentes personalizados.
  • 65. Bibliotecas de componentes adicionais são disponibilizadas por vários projetos de código-fonte aberto e de fornecedores independentes. JavaDoc: JavaServer Faces http://docs.oracle.com/cd/E17802_01/products/products/jsp/2.1/docs/jsp-2_1- pfd2/index.html Mais JSF no site da Oracle: http://www.oracle.com/technetwork/java/javaee/jsp/index.html Processamento de uma requisição Em uma aplicação JSF, toda requisição realizada a partir de um navegador é recebida pela Faces Servlet. Ao receber uma requisição, a Faces Servlet executa os seguintes passos:  Restore View: na primeira requisição de um usuário, uma nova árvore de componentes que representa a tela desse usuário é gerada. Nas demais requisições (postback) desse mesmo usuário, a árvore de componentes que representa a tela anteriormente enviada a ele é reconstruída.  Apply Request Values: Nesta etapa, a árvore construída na etapa anterior é percorrida e cada um dos seus componentes é “decodificado”. No processo de decodificação, cada componente extrai da requisição atual os dados associados a essa componente e se atualiza com essas informações. Ainda nessa etapa, os eventos de ação (como um clique em um link ou em um botão, por exemplo) são identificados. Por padrão, esses eventos são adicionados às filas correspondentes para serem tratados posteriormente (na fase Invoke Application).  Process Validation: Nesta fase, os componentes que possuem valores submetidos pelo usuário por meio de formulários são convertidos e validados (caso haja algum validador registrado para esse componente). Se ocorrer algum erro de conversão ou validação, mensagens de erro são adicionadas no contexto da requisição atual e o fluxo é redirecionado para a fase Render Response. Caso contrário, processo continua na fase UpdateModel Values. Ainda nesta fase, os eventos de mudança de valor são identificados e tratados ao final do processo.  UpdateModel Values: Os valores contidos em cada componente da árvore, já convertidos e validados na fase anterior, são armazenados em propriedades de objetos definidos pela aplicação (managed beans).  Invoke Application: Uma vez que os dados dos componentes já foram convertidos, validados e armazenados nos objetos do modelo, as tarefas correspondentes ao evento que disparou a requisição (normalmente um clique em um botão ou link) serão executadas. Também nesta fase, a próxima tela a ser apresentada ao usuário é determinada pelo resultado do método que implementa a lógica de negócio executado nesta fase.
  • 66.  Render Response: Nesta etapa, a próxima tela é gerada e enviada ao navegador do usuário. Uma representação desta tela também é armazenada a fim de ser usada na fase Restore Viewda próxima requisição. Abaixo o diagrama ilustra a estrutura geral de uma aplicação JSF. O processamento de uma requisição enviada por um navegador começa na Faces Servlet logo após sua chegada. A Faces Servlet controla a execução das seis etapas descritas anteriormente. Figura 9: Estrutura geral de uma aplicação JSF. Os managed beans estão à disposição da Faces Servlet durante todo o processamento da requisição. Por exemplo, nas etapas Render Response e Restore View, a Faces Servlet aciona os managed beanspara recuperar os dados que devem ser usados na construção ou reconstrução da árvore de componentes. Na etapa Update Model, a Faces Servlet armazena nos managed beans os dados já convertidos e validados. Na etapa Invoke Application, a Faces Servlet dispara um método em um managed beanresponsável pelo processamento da regra de negócio
  • 67. correspondente à requisição atual. Todas as regras de negócio são implementadas no modelo, que também administra os dados da aplicação. Os managed beans acionam o modelo para executar alguma regra de negócio, recuperar ou alterar os dados administrados pelo modelo. As telas da aplicação são definidas na camada de visão. A Faces Servlet acessa essa camada toda vez que necessita construir ou reconstruir a árvore de componentes de uma determinada tela. Isso ocorre nas etapas Restore View e Render Response. 00:00 00:00 DAO – Data Access Object A maioria das aplicações empresariais usa normalmente sistemas de gerenciamento de bancos de dados relacional (RDBMS, relational database management system) como armazenamento persistente. Entretanto, os dados empresariais podem residir em outros tipos de repositórios, comomainframes ou sistemas legados, repositórios LDAP (Lightweight Directory Access Protocol), bancos de dados orientados a objetos (OODB) e arquivos simples. Misturar a lógica de persistência com a lógica de aplicação cria uma dependência direta entre a implementação da aplicação e do armazenamento persistente. Tal dependência torna difícil migrar a aplicação de um tipo de fonte de dados para outro. Quando as fontes de dados são alteradas, os componentes devem ser modificados para tratar o novo tipo de fonte de dados (ACESSO..., 2013). Isso pode ser feito de forma mais fácil usando o padrão de projetos DAO para abstrair e encapsular todo o acesso ao armazenamento persistente. O DAO gerencia a conexão com a fonte de dados para obter e armazenar dados. Os principais objetivos de um DAO são:  Encapsular o acesso e a manipulação de dados em uma camada separada;  Implementar mecanismos de acesso a dados para acessar e manipular dados em uma armazenamento persistente;  Desacoplar a implementação do armazenamento persistente do restante da aplicação;  Organizar os recursos de lógica de acesso a dados e encapsular recursos proprietários para facilitar a capacidade de manutenção e a portabilidade. Estrutura do DAO
  • 68. Elementos do DAO  [Pessoa – a pessoa] é um objeto que requer acesso à fonte de dados para obter e armazenar dados.  DAO – é o objeto de função principal desse padrão. Ele abstrai a implementação de acesso a dados subjacente para o cliente a fim de permitir um acesso transparente à fonte de dados.  Base de Dado – representa uma implementação de fonte de dados.  ResultSet – representa os resultados de uma execução de consulta.  Tipo de Dado – representa um objeto de transferência usado com um carregador de dados (ACESSO..., 2013). Para saber mais sobre DAO acesse: http://javafree.uol.com.br/artigo/871452/Introducao-ao-pattern-DAO.html http://www.javabuilding.com/academy/patterns/dao.html http://www.oficinadanet.com.br/artigo/java/criando-um-cadastro-de-usuario-em-java Fórum Aplicações Web possuem uma série de necessidades a serem tratadas ao serem implementadas. Quais seriam as vantagens em desenvolver uma aplicação Web utilizando Java e o Framework JSF? Outras tecnologias poderiam ser adotadas em conjunto com este Framework? Como você planejaria o desenvolvimento de uma aplicação Web utilizando os conceitos vistos? RESUMO Nessa unidade foram apresentados vários conceitos sobre aplicações Web e as soluções existentes na plataforma Java, especificamente nas tecnologias Java Enterprise Edition, bem como os possíveis ambientes de desenvolvimento que podem ser utilizados além do ambiente de uma aplicação Web Java encapsulado em um Web Container. Finalmente, foi destacado o uso do Framework JSF como ferramenta para facilitar a construção das aplicações Web.
  • 69. ACESSO a banco de dados com JDBC (Java Database Connectivity) e o Padrão de Projeto DAO (Data Access Object). Disponível em: <http://www.ceunes.ufes.br/downloads/2/mariateixeira- java.introdu%C3%A7%C3%A3o%20a%20banco%20de%20dados.pdf>. Acesso em: março 2013. COMPONENTES visuais de especificação em JSF. Disponível em: <http://www.webartigos.com/artigos/componentes-visuais-de-especificacao-em- jsf/53689/>. Acesso em: março 2013. DEITEL Paul. Java Como Programar. 8. ed. São Paulo: Pearson Prentice Hall, 2010. NETBEANS. Disponível em: <http://netbeans.org/>. Acesso em: Março, 2013. SUGESTÃO DE LEITURA CORDEIRO, Gilliard. Aplicações Java para web com JSF e JPA. 1. ed. São Paulo: Casa do Código, 2010. GONÇALVES, Edson. Dominando Java Server Faces e Facelets Utilizando Spring 2.5, Hibernate e JPA. 1. ed. São Paulo: Ciência Moderna,2008. TECNOLOGIAS PARA APLICAÇÕES WEB WEBAULA 1 UNIDADE 2: INTRODUÇÃO ÀS TECNOLOGIAS JAVA ENTERPRISE EDITION(Prático-Conceitual) Configurando uma aplicação JSF Uma aplicação JSF deve respeitara estrutura geral de uma aplicação Web Java descrita na Unidade 1. Os códigos criados e demonstrados abaixo farão parte de uma aplicação Web Java chamada “AgendaJSF” criada na IDE Netbeans que será utilizada como demonstração de uma Aplicação usando JSF. Sugiro que vocês implementem tal aplicação para fixação dos conceitos vistos até esse ponto.
  • 70. JSF na prática Criando um projeto  Arquivo – Novo Projeto – Java Web – Aplicação Web.  Nome do Projeto – AgendaJSF.  Clique em próximo. Selecione o servidor GlassFish (Instalado junto com o Netbeans) ou servidor Apache Tomcat (se disponível); selecione a versão do Java EE (mais recente) e clique em próximo.
  • 71. Selecione o framework “JavaServer Faces” e na aba “Componentes” selecione “PrimeFaces”, clique em finalizar. A estrutura básica do projeto criado deverá ser algo semelhante à figura 5:
  • 72. Web.xml A Faces Servlet deve ser configurada no arquivo WEB-INF/web.xml, indicando a classe que a implementa e o padrão de URL que será associada a essa servlet. No exemplo abaixo, todas as requisições serão processadas pela Faces Servlet. Mais sobre o arquivo web.xml em: http://docs.oracle.com/cd/E14571_01/web.1111/e13712/web_xml.htm faces-config.xml Um arquivo faces-config.xml deverá ser adicionado ao diretório WEB-INF. Nesse arquivo, podemos alterar diversas configurações do JSF.
  • 73. Mais sobre o arquivo faces.config.xml em: http://docs.oracle.com/cd/B31017_01/web.1013/b28967/appendixa010.htm#ADFDG 010 Bibliotecas Para utilizar os recursos do JSF, é necessário que a aplicação possua uma implementação JSF. Esta pode ser adicionada manualmente no diretório WEB-INF/lib da aplicação. Se um servidor Java EE for utilizado, a inclusão de uma implementação JSF manualmente não será necessária, já que este servidor já a possui. Obs: Ao utilizar o Netbeans como IDE para implementação de aplicações Java Web, ao selecionar o tipo de projeto “Aplicação Web”, haverá em umas das guias de configuração inicial a opção para selecionar os frameworks que você deseja utilizar (vide figura 3), ao optar pelo framework JavaServer Faces na guia “componentes” (vide figura 4), haverá opção para incluir outros pacotes como PrimeFaces, RichFaces e ICEFaces. Estes pacotes adicionam componentes visuais prontos que poderão ser utilizados na aplicação Java Web. Mais sobre PrimeFaces em: http://www.primefaces.org/. Mais sobre RichFaces em: http://www.jboss.org/richfaces. Mais sobre IceFaces em: http://www.icesoft.org/java/. Managed Beans Os managed beans são objetos fundamentais de uma aplicação JSF o qual utiliza-se de Pojo’s como parte do controller, sendo assim, uma managed bean é um Pojo
  • 74. responsável por intermediar a comunicação entre as páginas de uma aplicação web e o modelo ou visão. Ao trabalhar com JSF, boa parte do esforço da implementação será dedicado aos managed beans, consequentemente as futuras alterações e correções estarão intimamente ligadas a estes objetos. Suas principais funções são:  Fornecer os dados que serão exibidos na tela;  Receber os dados enviados nas requisições;  Executar tarefas de acordo com as ações do usuário. Para maiores informações sobre POJO: http://www.roseindia.net/ejb/introduction-to-pojo.shtml http://www.guj.com.br/java/206651-o-que-e-pojo-afinal Criando um Managed Bean Um managed bean pode ser definido de duas maneiras. A primeira maneira é criar uma classe Java e registrá-la no arquivo faces-config.xml (JFS 1.2). Conforme abaixo: No registro de um managed bean devemos definir o nome, a classe e o escopo do managed bean. O nome será utilizadopara acessar esse managed bean nas páginas da aplicação. O escopo será explicado mais adiante. Importante: O escopo definido no exemplo abaixo por meio da annotation “@RequestScoped” poderá ser alterado conforme a necessidade da aplicação. Para mais informações sobre escopo, acesse: http://dnassuncao.wordpress.com/2010/08/14/jsf-2-0-na-pratica-%E2%80%93- parte-ii/ http://www.devmedia.com.br/escopos-de-managed-beans-no-jsf-2-0-artigo-java- magazine-90/20436 A segunda forma é criar uma classe Java com a anotação @ManagedBean do pacote javax.faces.bean. Essa anotação só pode ser utilizada a partir da versão 2.1 do JSF. Exemplo:
  • 75. Propriedades Considere o código Java 2. Para acessar o valor do atributo pessoa com valores obtidos a partir de uma tela JSF precisamos definir um método de leitura (getPessoa). Esse método deve seguir a convenção de nomenclatura Java (Camel Case). Para alterar esse mesmo atributo, precisamos definir um método de escrita (setPessoa) que segue a mesma convenção de nomenclatura do método anterior. Com os métodos de acesso e demais métodos do managed bean já implementados, podemos exibir e/ou inserir o valor do atributo pessoa utilizando expression language (#{}), conforme o código abaixo (linhas 19, 25, 31, 37):
  • 76. Para alterar o valor do atributo pessoa do managed bean, podemos vinculá-lo, por exemplo, a uma caixa de texto em um formulário. Ações Para implementar as lógicas que devem ser executadas assim que o usuário clicar em um botão oulink, basta criar métodos nas classes do managed bean, como por exemplo os métodos inserirOk() e buscarOk() do código Java 3 abaixo.
  • 77. Componentes Visuais No JSF 2, as telas são definidas em arquivos XHTML. Os componentes visuais que constituem as telas são adicionados por meio de tags. A especificação do JSF define uma grande quantidade de tags e as classifica em bibliotecas. As principais bibliotecas de tags do JSF são:  Core (http://java.sun.com/jsf/core)  HTML (http://java.sun.com/jsf/html)  Facelets (http://java.sun.com/jsf/facelets) Estrutura básica de uma página JSF A estrutura básica de uma página JSF é muito semelhante à estrutura de uma página HTML como o código abaixo. O conteúdo da página é definido no corpo da tag . Esse conteúdo é dividido em duas partes: o cabeçalho, delimitado pela tag (e não pela tag ), e o corpo, delimitado pela tag (e não pela tag). As bibliotecas de tags que serão utilizadas para construir a página devem ser “importadas” a partir do pseudoatributo xmlns aplicado à tag. Observe no exemplo acima que as três principais bibliotecas do JSF foram importadas.
  • 78. Documentação completa das tags das bibliotecas vistas acima em: http://www.jcp.org/en/jsr/detail?id=314 Telas Uma vez que o managed bean foi criado, podemos associá-lo a um ou mais formulários que exibirá ou realizará a inserção dos dados da pessoa. Para inserir ou consultar um determinado registro de pessoa, podemos associar os métodos inserirOk() e buscarOk() a botões existentes em páginas criadas especificamente para estes fins, tais botões, inserir e consultar respectivamente deverão executar as ações de inserção e busca conforme os trechos de códigos da página inserir.xhtml e consultar.xhtml apresentados abaixo: Na linha 42, do trecho de código XHTML 3 logo acima – definição de componente do tipo commandButton com ação definida para invocar o método inserirOk() do managed bean “agenda”.