Visão geral
Apresentação da disciplina:
O Flash surgiu como um programa para fazer animações para internet e
com o tempo g...
o Carregamento de Filmes Externos;
o Criação de Sites.
 Elementos Multimídia
o Inserindo Músicas e Sons;
o Inserindo Elem...
discente sobre o conteúdo discutido, para que assim, possamos dar
continuidade ao debate em nível adequado. Além disso, po...
Na verdade a primeira versão do programa era chamada de Splash lançado pela
empresa FutureWave Software em 1996:
Figura 1 ...
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 habilidad...
A empresa Macromedia foi comprada pela empresa Adobe e a ferramenta Flash evoluiu
com o tempo ganhando cada vez mais recur...
Algo muito recorrente é a confusão feita quando se fala a palavra Flash, pois ela pode
significar várias coisas dentro da ...
 Flash Catalyst – Software que surgiu mais tarde para criar projetos interativos sem depender de
conhecimentos avançados ...
Ícone do AIR
O Flash Player é mais difundido como um plug-in para navegadores de internet. Esse
plug-in é amplamente distr...
Que tal discutir sobre isso no Forum?
Para trabalhar no Flash Professional, basta seguir alguns passos básicos:
 Planeje ...
Antes de começar a usar a ferramenta precisamos aprender sua interface, não é
mesmo?
Podemos dividir a interface do Flash ...
1. PALCO: onde são posicionados os objetos gráficos como
imagens e desenhos.
2. Barra de FERRAMENTAS: são os recursos para...
1 . FORMAS: são as linhas e os preenchimentos que é possível desenhar
no Palco. Eles ficam com a aparência ¿rachurada¿ qua...
importantes no Flash, pois permitem organizar de forma sistemática
todo o projeto. Um símbolo é um gráfico, botão ou clipe...
quando clicado.
IV. O quarto quadro é o estado Ocorrência (Hit), definindo a área física que responde
aos eventos do Mouse...
Veja um pouco mais sobre símbolos no vídeo:
<https://www.youtube.com/watch?v=Fs3cpIz3ZgA&feature=relmfu>
5. COMPONENTES: o...
1.4 DESENHANDO NO FLASH
O Flash é uma ferramenta essencialmente vetorial, por isso ele pode ser leve para rodar
em site on...
formas mais complexas. Vamos ver como desenhar formas básicas e transformá-las.
Para se acessara ferramenta polígono devem...
Depois clicamos duas vezes no círculo da direita e arrastamos para seu lugar de origem.
O que fez uma forma recortar a out...
O lápis é uma ferramenta de desenho muito útil, pois permite a pintura de detalhes,
desenhos a mão livre e muito mais. Exi...
Podemos usar também a ferramenta Pen para desenharpolígonos irregulares ou formas
curvas. Para desenhar polígonos, selecio...
ndicador de reprodução
Quadro-chave vazio
Camada
Ícone da camada de guia
Menu pop-up Exibição de quadros
Animação quadro a...
> Avança um Quadro
<
Recua um Quadro
Página10 de 18
 ANTERIOR
 PRÓXIMA
O que será que acontece com a Linha de tempo quan...
A Linha de Tempo principal pode ser organizada em
Cenas. As Cenas servem para dividir o trabalho e a forma de organizar a ...
No processo de animação tradicional, conhecido como quadro a quadro, os animadores
precisam desenhar todos os quadros da a...
Sequências de animação são planejadas tendo como base três pontos principais: quadro
inicial,quadro final e quadros chaves...
 Interpolação Clássica (Classic Tween)
o A interpolação clássica é a forma tradicional de criar animações no Flash. Ela é...
o A interpolação de movimento é um pouco diferente das duas
anteriores, pois só funciona em versões do Action Script 3.0. ...
Para isso funcionar, você precisa primeiro criar uma forma no Flash, depois escolha a
ferramenta Bone como mostra o ícone ...
encadeamento de desenhos, mas um encadeamento de desenhos dotados de toda uma
estética particular.
A estética do desenho c...
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
cha...
Claro que dependendo do efeito dramático desejado, isso pode variar. Como em uma
cena de espanto, o personagem pode ficar ...
Página15 de 18
 ANTERIOR
 PRÓXIMA
1.9 PLANEJANDO SUA ANIMAÇÃO COM UM STORYBOARD
Bom, até agora vimos como funciona a ani...
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...
No storyboard o importante não é a qualidade do desenho, mas sim o encadeamento das
ideias e a quantificação do trabalho d...
Outra característica fácil de configurar no Flash é sua interface gráfica. Ela segue os
mesmos princípios de todos os prog...
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....
1.12 BOAS PRÁTICAS COM O FLASH
Para usar bem o Flash vamos ver algumas dicas fundamentais para usar plenamente o programa:...
ESPECIALIZAÇÃO DE TECNOLOGIAS PARA APLICAÇÕES
WEB
WEBAULA 1
Unidade 2 - ACTION SCRIPT 3.0
2.1 Fundamentos do Action Script...
O Action Script é uma linguagem de script orientada a objetos, com a sintaxe muito
parecida com Java Script, pois ambas sã...
Exemplo de uma Classe em Action Script
No caso, o campo Class é o caminho para seu Script e o campo Base Class é o caminho...
Métodos e propriedades são o que os objetos podem fazer dentro de uma Classe.
// nome é o objeto, e estamos mudando sua pr...
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. Par...
“ para valores do tipo texto (string)
No Flash os objetos mais usados geralmente são esses:
Tipos de
valores:
Formato
Stri...
 stop: interrompe a reprodução de um MovieClip, muito usado no começo das aplicações
para interromper a reprodução da Lin...
function onCompleto(ev:Event){
var myxml:XML = new XML(ev.target.data);
trace(myxml);
}

 1
 2.5 CRIAÇÃO DE SITES
 O p...
if (percent>99) {
nextFrame();
removeEventListener(Event.ENTER_FRAME,verificaLoading);
}
 2.5.2 Exemplos legais com o Fla...
}
function adicionaBalao () {
var balao:Balao = new Balao();
balao.x = Math.random() * stage.stageWidth;
balao.y = Math.ra...
 Na função clickbalao é preciso criar um ponteiro para o objeto que executou o
evento, isso é feito através do e.target q...
 No código acima, a classe MouseEvent é importada para poder usar os valores
nas funções que estão escutando o evento.
 ...

TECNOLOGIAS PARA APLICAÇÕES WEB
WEBAULA 1
UNIDADE 1: INTRODUÇÃO ÀS TECNOLOGIAS JAVA ENTERPRISE
EDITION(Conceitual)
O que...
Saiba mais sobre linguagens de marcação:
http://www.w3schools.com/html/html_intro.asp
http://www.w3schools.com/html/html_x...
O modelo MVC (Model View Controller) nada mais é do que um design pattern útil para
resolver problemas de modelagem de pro...
O protocolo HTTP permite a clientes e servidores interagir e trocar informações de uma
maneira simples e confiável. O HTTP...
Fonte: Deitel (2010)
O navegador Web envia uma solicitação HTTP ao servidor. A solicitação na forma mais
simples é:
GET /p...
O servidor envia um ou mais cabeçalhos HTTP que fornecem informações adicionais
sobre os dados que serão enviados. No caso...
Conteúdo dinâmico
As páginas de uma aplicação Web devem ser geradas dinamicamente. Por exemplo,
quando um usuário de uma a...
Fonte: Do autor (2013).
Uma aplicação Web Java deve ser implantada em um Web Container para obter os
recursos fundamentais...
Apesar das especificações, os Web Containers possuem algumas diferenças nas
configurações que devem ser realizadas pelos d...
Mais sobre Servlets:
http://www.devmedia.com.br/desvendando-os-servlets-3-0-java- magazine-
81/17436
http://www.oracle.com...
Geralmente, as IDE’s criam toda a estrutura de diretório exigidas pelos Web Containers.
Na prática, não temos o trabalho d...
custosa. Vários frameworksforam criados para facilitar o desenvolvimento e a
manutenção de aplicações Web. Apesar de serem...
O modelo representa os objetos de negócio e executa uma lógica de negócio ao receber
os dados vindos da camada de visualiz...
Bibliotecas de componentes adicionais são disponibilizadas por vários projetos de
código-fonte aberto e de fornecedores in...
 Render Response: Nesta etapa, a próxima tela é gerada e enviada ao
navegador do usuário. Uma representação desta tela ta...
correspondente à requisição atual. Todas as regras de negócio são implementadas no
modelo, que também administra os dados ...
Elementos do DAO
 [Pessoa – a pessoa] é um objeto que requer acesso à fonte de dados para obter e
armazenar dados.
 DAO ...
ACESSO a banco de dados com JDBC (Java Database Connectivity) e o Padrão de
Projeto DAO (Data Access Object). Disponível e...
JSF na prática
Criando um projeto
 Arquivo – Novo Projeto – Java Web – Aplicação Web.
 Nome do Projeto – AgendaJSF.
 Cl...
Selecione o framework “JavaServer Faces” e na aba “Componentes” selecione
“PrimeFaces”, clique em finalizar.
A estrutura b...
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...
Mais sobre o arquivo faces.config.xml em:
http://docs.oracle.com/cd/B31017_01/web.1013/b28967/appendixa010.htm#ADFDG
010
B...
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,...
Propriedades
Considere o código Java 2. Para acessar o valor do atributo pessoa com valores obtidos
a partir de uma tela J...
Para alterar o valor do atributo pessoa do managed bean, podemos vinculá-lo, por
exemplo, a uma caixa de texto em um formu...
Componentes Visuais
No JSF 2, as telas são definidas em arquivos XHTML. Os componentes visuais que
constituem as telas são...
Documentação completa das tags das bibliotecas vistas acima em:
http://www.jcp.org/en/jsr/detail?id=314
Telas
Uma vez que ...
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
Próximos SlideShares
Carregando em…5
×

1ª prova pós web 1ª chamada

777 visualizações

Publicada em

Atividade da Pós em Desenvolvimento WEB.

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
777
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

1ª prova pós web 1ª chamada

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 37. Figura 24 - Interface no modo Classic Página17 de 18
  38. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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”.

×