Livro do Educador Flash CS 5.5

FlashWord
CS 5
Livro do
Educador
Flash CS 5.5
1
Autor: Walacy Machado
Revisão Técnica: Mikio Ishibashi
Revisão Gramatical: CCli - Centro de Consultoria Linguística -Ltda
Capa: Departamento de Marketing Microlins Franchising
Editoração: Departamento Pedagógico Microlins Franchising
Central de Franchising:
Av. Andrade Neves, nº 2538
Jardim Chapadão - Campinas/SP
CEP 13070-001
Telefone: (19) 3743-2000
www.microlins.com.br
Caro aluno, a Microlins® existe por você e para você.
Para dúvidas, críticas ou sugestões, utilize nosso endereço de e-mail:
[email protected]
Copyright® 2012 - Todos os direitos reservados a Multi Brasil Franqueadora e Participações Ltda.
É proibida a reprodução total ou parcial, por qualquer meio ou processo, inclusive quanto às características gráficas e/ou editoriais. A
violação de direitos autorais constitui crime (Código Penal, artigo 184 §§ e Lei nº 6.895, de 17/12/1980), ocasionando busca, apreensão e
indenizações diversas (Lei nº 9.610/98) conforme registro nº. 350.403, livro 646, página 63, 05/08/2005.
Produzido por Multi Brasil Franqueadora e Participações Ltda.
- CNPJ 10.835.410/0001-06
2
Flash CS 5
Amigo Educador.
Este curso visará preparar uma nova geração de profissionais para web
capacitados para iniciarem suas carreiras já com bons fundamentos.
Esperamos que o Sr(a). possa contribuir além do conteúdo presente neste
material com sua experiência profissional, suas vivências no mercado e que
acrescente dicas e detalhes que somente alguém que está envolvido nesta
profissão poderia compartilhar.
Desejamos boas aulas.
3
Sumário
Aula 01 ....................................................................................................................................7
1 - Conhecendo o programa ................................................................................................................................................7
1.1 - O que podemos fazer com o Flash? .............................................................................................................................7
1.2 - Atuais limitações ........................................................................................................................................................7
1.3 - O que é uma imagem vetorial e o que é uma imagem bitmap? ......................................................................................7
1.4 - A interface do programa e como ela se divide...............................................................................................................7
1.4.1 - A área de trabalho ...................................................................................................................................................7
1.4.2 - Timeline e frames ....................................................................................................................................................7
1.4.3 - Layers ou camadas ..................................................................................................................................................7
Exercícios ..........................................................................................................................................................................8
1.4.4 - Painéis extensíveis ...................................................................................................................................................8
1.4.5 - Menus ....................................................................................................................................................................8
1.5 - Conceito de animação.................................................................................................................................................8
Aula 02 ....................................................................................................................................9
2 - Ferramentas de ilustração ..............................................................................................................................................9
2.1 - Object drawing – Path ................................................................................................................................................9
2.2 - Object drawing - Primitive object .................................................................................................................................9
2.2.1 - Rectangle – Retângulo .............................................................................................................................................9
TDP...................................................................................................................................................................................9
2.2.2 - Oval .....................................................................................................................................................................10
2.2.3 - Polystar ................................................................................................................................................................10
2.3 - Ferramentas de seleção ............................................................................................................................................10
2.3.1 - Selection tool ........................................................................................................................................................10
2.3.2 - Subselection tool ...................................................................................................................................................10
2.3.3 - Lasso tool – Laço ...................................................................................................................................................10
2.4 - Merge objects ..........................................................................................................................................................10
2.5 - Object drawing mode ...............................................................................................................................................10
2.6 - Free transform .........................................................................................................................................................10
2.7 - Cores.......................................................................................................................................................................11
2.7.1 - Cores sólidas .........................................................................................................................................................11
2.7.1.1 - Paint bucket tool .................................................................................................................................................11
2.7.1.2 - Ink bottle tool .....................................................................................................................................................11
2.7.2 - Cores gradiente e 2.7.2.1 – Gradient transform ........................................................................................................11
2.7.3 - Erase tool ..............................................................................................................................................................11
Exercícios ........................................................................................................................................................................11
Aula 03 .......................................................................................................................................
13
3 - Aplicando texto ...........................................................................................................................................................13
3.1 - Text layout framework ..............................................................................................................................................13
3.1.2 - Text type ..............................................................................................................................................................13
3.1.3 - Painel Character ....................................................................................................................................................13
TDP.................................................................................................................................................................................13
3.1.3.1 - Embed fonts .......................................................................................................................................................14
3.1.4 - Advanced character ...............................................................................................................................................14
3.1.5 - Conteiner and flow ................................................................................................................................................14
3.1.5.1 - Colunas – Conteiner and flow ..............................................................................................................................14
3.1.6 - Color effect ...........................................................................................................................................................14
3.1.7 - Display..................................................................................................................................................................14
3.1.8 - Filters ...................................................................................................................................................................14
3.2 - Classic text ..............................................................................................................................................................15
Exercícios ........................................................................................................................................................................15
TDP.................................................................................................................................................................................16
4
Flash CS 5
Aula 04 ..................................................................................................................................16
4 - Símbolos ....................................................................................................................................................................16
4.1 - O que é um símbolo? ................................................................................................................................................16
4.2 - Entrando em um símbolo. Como editá-lo? ..................................................................................................................19
Exercícios ........................................................................................................................................................................19
Aula 05 ...................................................................................................................................21
5 - A timeline ...................................................................................................................................................................21
5.1 - Stage ......................................................................................................................................................................21
5.3 - O que são frames? ...................................................................................................................................................21
5.4 - Máscara de camada ..................................................................................................................................................21
TDP.................................................................................................................................................................................21
Exercícios ........................................................................................................................................................................22
Aula 06 ...................................................................................................................................23
6 - Animação clássica .......................................................................................................................................................23
6.1 - O que é Shape tween?..............................................................................................................................................23
TDP.................................................................................................................................................................................23
Exercícios ........................................................................................................................................................................24
6.2.2 - Ease .....................................................................................................................................................................24
TDP.................................................................................................................................................................................25
Aula 07 ...................................................................................................................................26
7 - Fazendo animação com o Motion tween ........................................................................................................................26
7.1 - Motion editor............................................................................................................................................................26
7.1.2 - Aplicando propriedades à animação via Motion editor ...............................................................................................26
7.2 - Motion presets..........................................................................................................................................................26
Exercícios ........................................................................................................................................................................27
TDP.................................................................................................................................................................................28
Aula 8 ....................................................................................................................................29
8 - Trabalhando com Bones ...............................................................................................................................................29
8.1 - Ferramenta Bone – Runtime ......................................................................................................................................29
Exercícios ........................................................................................................................................................................29
TDP.................................................................................................................................................................................30
Aula 9 .....................................................................................................................................30
9 - Multimídia...................................................................................................................................................................30
9.1 - Convertendo arquivo de vídeo para FLV .....................................................................................................................30
9.2 - Inserido vídeo no Flash .............................................................................................................................................30
9.3 - Inserindo áudio no Flash ...........................................................................................................................................31
Exercícios ........................................................................................................................................................................31
TDP.................................................................................................................................................................................32
Aula 10 ...................................................................................................................................32
10 - Básico em Actionscript ...............................................................................................................................................32
10.1 - Instanciando um símbolo ........................................................................................................................................32
10.2 - Comandos no painel Code snippets ..........................................................................................................................32
10.2.1 - Drag and drop .....................................................................................................................................................33
10.2.2 - Stop a movie clip .................................................................................................................................................33
Exercícios ........................................................................................................................................................................34
10.3 - Navegando na timeline ...........................................................................................................................................34
10.3.1 - Aplicando um Label ao frame ................................................................................................................................34
TDP.................................................................................................................................................................................35
Exercícios ........................................................................................................................................................................36
5
Aula 11 ...................................................................................................................................36
11 - 3D no Flash ..............................................................................................................................................................36
11.1 - 3D Rotation tool .....................................................................................................................................................36
11.2 - 3D Translation tool..................................................................................................................................................36
11.3 - Revisão ..................................................................................................................................................................36
11.4 - Trabalho de conclusão de curso ...............................................................................................................................36
Aula 12 ...................................................................................................................................37
12 - Publicando ................................................................................................................................................................37
TDP.................................................................................................................................................................................37
Exercícios ........................................................................................................................................................................37
6
Flash CS 5
Aula 01
1 - Conhecendo o programa
1.1 - O que podemos fazer com o Flash?
Professor, abra alguns portais e web sites no browser e mostre alguns exemplos de banners animados publicitários para seus alunos.
Se houver a possibilidade, demonstre na prática como se comporta um CD-ROM com conteúdo multimídia autoexecutável (é
possível encontrar inúmeros CDs nas bancas de jornal, como, por exemplo, de cursos de idiomas e videoaulas).
1.2 - Atuais limitações
Também, se existir a possibilidade, demonstre na prática a visualização de web sites em Flash em um tablet ou smartphone com
sistema Android. Mostre o mesmo site usando um iPad ou iPhone (uma dica: normalmente, os próprios alunos podem possuir um
desses dispositivos. Se possuírem, solicite emprestado para exemplificar. Se não tiverem, não há problema, peça a eles para verem
a diferença assim que tiverem a possibilidade de manusear um desses aparelhos).
Aborde o que é o W3C e a necessidade real dos novos padrões de internet. Tente também abordar o que é HTML5 e CCS3 de
maneira bem sucinta. Uma dica: acesse os sites do W3C - http://www.w3c.br/Home/WebHome - e peça para seus alunos fazerem
uma pesquisa acerca dos padrões WEB. Depois, se possível, peça uma pesquisa sobre o assunto web design responsivo. Cite os
demais cursos da escola que abordam web design, como Dreamweaver e Photoshop, por exemplo).
1.3 - O que é uma imagem vetorial e o que é uma imagem bitmap?
Professor, mostre exemplos de imagens vetoriais e de imagens bitmap e fale de suas extensões conhecidas (JPG, TIF, GIF etc.). Uma
dica: abra o Google Imagens ou algum site de banco de imagens confiável, como o Istockphoto, por exemplo, e mostre algumas imagens
vetoriais. Com o Flash aberto, não se atente a explicar a interface do Flash. Apenas crie um desenho vetorial simplório para demonstrar
aos seus alunos como usar as “alças” das curvas de Bézier.
Amplie e reduza esse desenho vetorial feito. Explique que, mesmo aumentando de tamanho, o desenho terá o mesmo tamanho em
kbytes. Abra uma foto e amplie a imagem para mostrar os pixels que a compõem.
1.4 - A interface do programa e como ela se divide
Senhor(a) professor(a), feche e abra novamente o Adobe Flash para que apareça a tela de boas-vindas. Mostre as opções de banners após
clicar na opção Advertise da tela de boas-vindas. Mostre as suas medidas disponíveis e enfatize que elas são padrões preestabelecidos
pelo mercado para formatos de banners publicitários comercializados. Professor, abra alguns dos tutoriais disponíveis na lista da opção
Learn.
Explique de forma sucinta o que vem a ser actionscript. Dica: apenas siga com exemplos de lógica de programação, sem se atentar aos
comandos da linguagem. Exemplifique, por exemplo, o que acontece se o usuário clicar em algum dos banners publicitários demonstrados
quando abriu um portal em seu browser. Diga que a ação por trás do que aconteceu após o clique é resultado de uma programação em
actionscript.
1.4.1 - A área de trabalho
Explique o que é a Scene e que pode haver no projeto mais Scenes. Demonstre por meio do comando Insert - Scene.
1.4.2 - Timeline e frames
Crie novos frames na timeline por meio do comando Insert - Timeline - Frame, ou pelo atalho F5.
1.4.3 - Layers ou camadas
Crie novas camadas pelo comando Insert - Timeline - Layer ou pelo botão New layer na timeline. Coloque formas geométricas
diferentes em cada camada. Marque cada uma com uma cor e depois as sobreponha.
7
1.4.4 - Painéis extensíveis
Professor, mostre na prática os painéis abrindo e revelando mais conteúdo. Arraste os painéis pela área de trabalho.
1.4.5 - Menus
Mostre de forma sucinta as opções em cascata dos menus superiores.
1.5 - Conceito de animação
Professor, mostre para sua turma uma sequência de imagens que forma uma animação. Importe-as em sequências em cada frame
da timeline e, se possível, copile e mostre um arquivo SWF com essa mesma animação em ação. Explique que quanto mais frames
por segundo são definidos no Flash mais rápida fica a animação.
Exercícios
1 - O que podemos fazer com o Flash CS5.5?
a) Apenas criar animações;
b) Apenas criar apresentações;
c) Apenas criar sites;
d) Criar experiências ricas em web sites. É possível criar animações, navegação personalizada e material publicitário
para internet.
2 - O que não é apropriado fazer com o Flash?
a) Criar sites dentro dos padrões W3C;
b) Criar sites utilizando total e unicamente a tecnologia Flash;
c) Usar o Flash para fazer animações;
d) Usar o Flash para fazer banners publicitários.
3 - O que é um vetor?
a) É um segmento de reta que segue uma direção única e orientada;
b) É uma semirreta;
c) É uma reta;
d) É uma linha.
4 - O que é um nó em um desenho vetorial?
a) Um Archor point;
b) São pontos entrelaçados;
c) Um pixel;
d) Uma linha reta.
5 - O que é uma imagem bitmap?
a) Uma imagem JPG;
b) Uma imagem de mapa de bitmaps é formada por minúsculos pontos de formas retangulares, chamados pixels.
c) Um monte de pixels emaranhados;
d) Um vetor.
8
Flash CS 5
6 - Qual é atalho de teclado para abrir um arquivo novo do Flash?
a) Ctrl + P;
b) Ctrl + O;
c) Ctrl + N;
d) Ctrl + A.
7 - O que é um frame?
a) Um quadradinho na timeline;
b) Um ponto em que se coloca o conteúdo do site;
c) Uma camada;
d) É um intervalo de tempo na timeline do Flash.
8 - Exemplifique o que é uma camada.
a) Folhas em transparência, dispostas umas sobre as outras. Cada uma dessas folhas possui seus próprios frames
de animação.
b) Frames em transparência, dispostos uns sobre os outros. Cada um desses frames possui suas próprias camadas de animação.
c) Palcos em transparência, dispostos uns sobre os outros. Cada um desses frames possui suas próprias camadas de animação.
d) Desenhos em transparência, dispostos uns sobre os outros. Cada um desses frames possui suas próprias camadas de animação.
9 - Quando um painel é estendido, o que ele revela?
a) Se expandem e não revelam nada;
b) Revelam truques do Flash;
c) Revelam opções antes ocultas para otimizar espaço;
d) Revelam outros painéis.
10 - Qual é o valor padrão de FPS no Flash?
a) 48 FPS;
b) 56 FPS;
c) 12 FPS;
d) 24 FPS.
TDP
Siga o passo a passo do livro do aluno para criar um documento novo.
Aula 02
2 - Ferramentas de ilustração
2.1 - Object drawing – Path
Prezado professor, inicie a aula com uma breve abordagem reforçando a necessidade de uso de objetos vetoriais para diminuição de
tamanho dos arquivos copilados do Flash.
Deixe os alunos cientes de que eles estarão aptos depois desta aula a criar desenhos vetoriais complexos.
2.2 - Object drawing - Primitive object
2.2.1 - Rectangle – Retângulo
Professor, procure fazer o retângulo e o que se pede no passo a passo do livro do aluno em tempo real, enquanto explica.
Explique para o aluno o papel das opções Position and size, no painel de propriedades das ferramentas. Relembre a eles o que são
as coordenadas cartesianas e como usar os valores de X e Y para definir uma posição de objeto no stage.
9
Incentive-os a repetirem o que o senhor executar quando desenhar no stage. Deixe claro ao aluno que objetos criados com essa
ferramenta são dotados de contorno e preenchimento, e que o Flash trata ambos como dois elementos independentes um do outro.
Crie um Primitive usando a ferramenta Rectangle primitive tool e mude diretamente no objeto a curvatura dos cantos usando a
Subselection tool, também no painel de propriedades.
2.2.2 - Oval
Professor, procure fazer o círculo e o que se pede no passo a passo do livro do aluno em tempo real, enquanto explica. Volte a
comentar sobre as propriedades Position and size, no painel de propriedades das ferramentas. Demonstre para eles a alteração
da largura e da altura de objetos pelo painel, usando os campos Width e Height. Entre nos conceitos de geometria se necessário,
explicando que todo círculo é formado por 360º. Aborde as diferenças entre um path fechado e um aberto.
2.2.3 - Polystar
Professor, procure fazer polígonos com variadas quantidades de lados, seguindo o que se pede no passo a passo do livro do aluno
em tempo real, enquanto explica. Desenhe estrelas, em diferentes formas e tamanhos, e peça aos alunos para imitá-lo.
2.3 - Ferramentas de seleção
2.3.1 - Selection tool
Use a ferramenta de seleção para mover os desenhos que acabou de fazer. Mostre que o contorno pode ser selecionado separadamente
do preenchimento, e até movido para fora do conjunto. Mude a curvatura de um vetor repousando o mouse com a ferramenta sobre
uma parte do traçado do objeto. Mostre como é mutável todo e qualquer desenho vetorial. Duplique um objeto movendo-o com a
tecla Ctrl pressionada.
2.3.2 - Subselection tool
Use a Subselection tool e faça algumas intervenções nos desenhos no stage. Comente que é possível dar forma a qualquer desenho,
acrescentando ou removendo nós e movendo-os.
2.3.3 - Lasso tool – Laço
Demonstre na prática a utilização da ferramenta. Selecione pedaços dos desenhos no stage em detrimento de outros e mova-os
após a seleção. Utilize o laço poligonal também. Selecione trechos dos objetos e apague-os. Faça com que os alunos notem que
podem dar qualquer forma a um desenho oriundo de uma forma primitiva.
2.4 - Merge objects
Demonstre na prática a sobreposição de objetos e o resultado disso. Mostre também que objetos em camadas diferentes não
interferem uns sobre os outros. Peça para seus alunos que o imitem. Dê um desafio a essa altura da aula. Peça para seus alunos
desenharem contornos de bandeiras, por exemplo. Peça a eles que usem o recurso de Merge objects para fazer composições.
2.5 - Object drawing mode
Peça a seus alunos que desenhem retângulos comuns com o botão Object drawing mode ativado. Peça também que façam
retângulos primitivos usando a Rectangle tool e a Rectangle primitive tool. Antes de explicar a diferença entre os dois tipos de
retângulos, incentive-os a descobrirem a diferença eles mesmos. Após ter elucidado a diferença, explique que um Shape é diferente
de um Primitive, mesmo que eles possuam comportamentos similares no stage.
2.6 - Free transform
Use a Free transform para modificar as dimensões de um objeto no stage. Explique como rotacionar um objeto e como mudar
seu eixo de rotação movendo o ponto central do objeto de lugar. Mostre a eles que, repousando o cursor sobre o objeto com essa
ferramenta, ele muda de ícone, podendo representar uma seta para cima e para baixo, para a distorção Skew (move uma face do
desenho para cima ou para baixo e também para esquerda e para direita) ou ainda um pequeno círculo que representa a rotação.
10
Flash CS 5
2.7 - Cores
2.7.1 - Cores sólidas
Volte novamente a falar sobre path fechados e abertos. Tente aplicar preenchimento de cor em um path aberto e depois em um
fechado para que os alunos notem a necessidade de fechar os paths para trabalhar com cores. Siga como descrito no passo a passo
do livro do aluno para elucidar o uso do recurso de cores do Flash.
Crie objetos com cores transparentes, sem cores de preenchimento, apenas com cor de contorno, objetos só com cor de preenchimento
e sem cores de contorno. Explique que o padrão hexadecimal de numeração de cores é o padrão usado para web. E é aplicável não só no
Flash, mas em todos os softwares de computação gráfica. Explique as diferenças entre cores para web e monitores: as cores RGB e as cores
de impressão, as cores CMYK. Use o laço poligonal para fazer uma seleção em um pedaço de um path e mude a cor apenas da seleção.
2.7.1.1 - Paint bucket tool
Faça uma demonstração prática da ferramenta.
2.7.1.2 - Ink bottle tool
Faça uma demonstração prática da ferramenta.
2.7.2 - Cores gradiente e 2.7.2.1 – Gradient transform
Após explicar o funcionamento de preenchimentos gradiente, proponha um desafio para a turma: fazer um desenho rudimentar e
colori-lo. Pode-se desenhar um cenário, casas, bandeiras etc, com a condição de que os alunos usem o recurso de preenchimento
gradiente no desenho.
2.7.3 - Erase tool
Faça uma demonstração prática da ferramenta.
Exercícios
1 - O que é um path?
a) Path é todo desenho vetorial feito no flash;
b) Path é todo desenho importado de outro programa;
c) Path é toda imagem bitmap;
d) Path é todo texto aplicado ao Flash.
2 - Qual é o atalho da Pen tool?
a) A letra “A”;
b) A letra “P”;
c) A letra “C”;
d) A letra “H”.
3 - Quais são as opções adicionais de utilização da Pen tool?
a) Delete e Convert archor point tool;
b) Add e Primitive;
c) Add, Delete e Convert archor point tool;
d) Add e Delete.
11
4 - Usando as opções da Primitive object tool, qual é a diferença entre Rectangle tool e Rectangle primitive tool?
a) Não há diferença;
b) No Rectangle primitive tool, o Flash entende o contorno e o preenchimento do retângulo como objetos únicos. No primeiro não: o
software entende como objetos distintos;
c) O segundo, após ser criado, não pode ter a propriedade de cantos arredondados modificada no painel de propriedades. O
primeiro sim. No Rectangle primitive tool, o Flash entende o contorno e o preenchimento do retângulo como objetos distintos. No
primeiro não: o software entende como um único elemento;
d) O primeiro, após ser criado, não pode ter a propriedade de cantos arredondados modificada no painel de
propriedades. O segundo sim. No Rectangle primitive tool, o Flash entende o contorno e o preenchimento do
retângulo como objetos distintos. No segundo não: o software entende como um único elemento.
5 - Com a opção Oval, da ferramenta Primitive object tool, nós podemos fazer formas de “donuts” ou “rosquinhas”.
Qual propriedade, no painel de propriedades, é responsável por isso?
a) Inner radius;
b) Inner corner;
c) Inner gradient;
d) Inner space.
6 - Ao criarmos um polygon, ou polígono, no painel de propriedades, precisamente em Tool settings, podemos
definir a quantidade de lados que o desenho terá. Qual o campo de propriedade é responsável por isso?
a) Number of polygons;
b) Number of sides;
c) Number of stars;
d) Number of faces.
7 - Somente poderá receber preenchimento de cor um path que for:
a) Um path fechado. Quando o Archor point inicial une-se ao final.
b) Um path aberto;
c) Um path aberto. Quando o Archor point inicial une-se ao final;
d) Quando for um Archor point.
8 - O que significa RGB?
a) Red, Green e Black;
b) Red, Grey e Black;
c) Red, Green e Bold;
d) São as cores primárias: vermelho (red), verde (green) e azul (blue).
9 - O que faz a Ink bottle tool?
a) Muda a cor do contorno de um path;
b) Muda a cor de preenchimento do path;
c) Muda a cor do preenchimento gradiente do path;
d) Muda a cor de todo o path.
10 - Quais os dois tipos de preenchimento gradiente?
a) Somente linear;
b) Somente radial;
c) Somente greyscale;
d) Linear e radial.
12
Flash CS 5
TDP
Professor, por favor, siga o passo a passo do trabalho de desenvolvimento prático no livro do aluno. Incentive seus alunos a tentarem
desenhar com a Pen tool a silhueta de algum objeto ou animal que eles desejarem, ou proponha você mesmo o desafio.
Aula 03
3 - Aplicando texto
3.1 - Text layout framework
Professor, por favor, mostre na prática como era o processo de criar um link sobre o texto em versões anteriores do programa para
que o aluno note a justificativa de se trabalhar com a versão atualizada do Flash. Para tanto, crie uma caixa de texto do tipo Classic
text/static text. Sobre esse texto, crie um botão. Deixe o botão transparente, colocando o Shape apenas no frame de Hil do botão.
Nesse botão, aplique a função ActionscriptgetURL e mande o link para um site que achar conveniente. Copile o SWF e mostre o link
em ação. Agora mostre o mesmo processo, só que com uso dos novos recursos do software. Crie um link diretamente na caixa de
texto, sem necessidade de botões, assim como é exemplificado no livro do aluno.
Ao abordar a necessidade de se usar a última versão de Flash player para usar os recursos TFL, apresente o conceito de Flash player
e sua utilidade aos seus alunos.
De forma resumida, um Flash player é:
O Flash player, ou Adobe Flash player, é um complemento para todos os browsers que tem como objetivo poder reproduzir
arquivos SWF e FLV neles. Somente com o Flash player instalado é possível um navegador de internet abrir um site ou um conteúdo
multimídia em Flash. Recomende aos alunos a instalação das atualizações de Flash player sempre que possível.
3.1.2 - Text type
Após a explicação sobre os três tipos de textos dentro do TFL, crie três caixas de texto no stage e aplique para cada uma um tipo
de texto. Copile o arquivo e mostre aos alunos as diferenças em tempo de execução dos três tipos diferentes.
3.1.3 - Painel Character
Durante a explicação sobre o painel Character, crie no stage uma caixa de texto e aplique um texto sobre ela, seguindo os passos
do livro do aluno. Mostre os recuos de parágrafo e de tabulação que aparecem quando se edita o texto, na caixa de texto. Saliente
a similaridade desses recursos de tabulação e dos encontrados no Microsoft Word, por exemplo.
Troque a fonte da caixa de texto e aplique diferentes estilos, enquanto explica para elucidar, na prática, o aluno. Entre no conceito
de arquivos de fonte. Explique que fontes tipo TTF não são indicadas, pois são fontes feitas a partir de imagens bitmap, e logo não
possuem muita qualidade, sem falar que a maioria delas é feita de forma amadora e nem sempre conta com todos os caracteres
para sua utilização, principalmente caracteres especiais. Fontes TTF são mais pesadas também.
Fontes Type -1 ou Postscript são fontes desenvolvidas para mídia impressa. Não convém usá-las em projetos de Flash, por mais que
a qualidades delas seja melhor. As fontes OTF são as mais indicadas, pois foram projetadas para web. Entretanto, alerte o aluno que
também há muitas fontes OTF de qualidade duvidosa.
13
Incentive-os a buscarem fontes em sites que comercializam fontes, ou a comprarem os pacotes de “fontfolio” de empresas
especializadas na criação de fontes tipográficas. Para converter texto em curva no Flash, é necessário selecionar o texto e aplicar
o comando Ctrl + B duas vezes.
3.1.3.1 - Embed fonts
Siga como elucidado no livro do aluno. Aproveite e inclua e exclua diversas fontes do projeto para que os alunos entendam a lógica.
Explique para os alunos que nem todos os Characters Ranges precisam ser embutidos no projeto, pois há caracteres de idiomas que
provavelmente o aluno não irá usar de uma vez no mesmo site, como caráter em hebraico, japonês, chinês etc.
3.1.4 - Advanced character
Durante a explicação, crie links em trechos do texto selecionado. Depois disso, copile os arquivos e demonstre a atuação de cada um
dos tipos diferentes de Target em um link. Caso o senhor não possua um arquivo HTML dividido em frames, pode usar os exemplos
das páginas a seguir para elucidar a ação dos diferentes tipos de alvo do link em atuação no navegador:
•
_BLANK: http://www.htmlcodetutorial.com/linking/_A_TARGET_95y98y108y97y110y107y.html
•
_PARENT: http://www.htmlcodetutorial.com/linking/outer.html
•
_TOP: http://www.htmlcodetutorial.com/linking/toptop.html
Pode ser que essas páginas não estejam mais disponíveis no futuro. Nesse caso, seria interessante possuir HTMLS prontos para
exemplificar esse recurso para os alunos. Se o horário permitir, faça uma breve demonstração do uso das propriedades Case, Digit
case, Digit width, Ligatures e Break.
Ajuste a posição da caixa de texto no stage, mudando os valores nos campos da aba Position and size.
3.1.5 - Conteiner and flow
Demonstre na prática que uma caixa de texto no modo Classic text se expande para acolher o texto inserido nela. Antes, éramos
obrigados a cortar o texto excedente da caixa e colá-lo manualmente em outra caixa, em versões anteriores.
3.1.5.1 - Colunas – Conteiner and flow
Desafio: peça para os alunos fazerem um layout simples de um site usando esses recursos. Peça para eles incluírem efeitos de texto
e imagens.
3.1.6 - Color effect
Aplique cada um dos efeitos em uma caixa de texto e mude suas propriedades. Sem entrar em detalhes, com os alunos crie uma
animação na timeline em que uma caixa de texto possua uma cor em um frame e assuma gradativamente outra cor, em outro frame.
3.1.7 - Display
Para elucidar esse efeito, aplique em uma camada abaixo da camada de texto algumas imagens ou algo para dar contraste com o
texto. Depois, aplique cada um dos Blend modes sobre a caixa de texto para que o aluno perceba o que acontece com ela quando
sobreposta a algum objeto com cores.
3.1.8 - Filters
Aplique um exercício prático aos alunos. Peça para eles aplicarem filtros às caixas de texto do layout que eles fizeram durante o TDP.
Depois, mostre a eles os demais botões da aba Filters: o Presets, no qual você pode salvar uma configuração de filtro, o Clipboard,
para copiar e colar, o Enable or disable filter, o botão na forma de olho para ocultar e revelar o filtro, o Reset filter, para reverter
uma configuração aplicada, e o Delete filter, para ser usado quando se quiser descartar um filtro aplicado.
14
Flash CS 5
3.2 - Classic text
Após a explicação referente aos três tipos de texto, faça uma demonstração prática do funcionamento de um texto dinâmico. Crie
uma caixa de texto como Classic text e escolha o tipo Dynamic text. Coloque uma instância nessa caixa de texto, no caso, a “Nome”.
No frame em que se encontra esse texto dinâmico, via painel Actionscript, inclua o seguinte código:
importflash.display.Sprite;
importflash.text.*;
vartexto:String = “Flash CS5.5”;
nome.text = texto;.
Não tente ensinar actionscript agora para os alunos, apenas demonstre que esse código irá pegar a variável e aplicar à caixa de
texto. Mostre que a caixa de texto está vazia para os alunos. Copile o arquivo e mostre o SWF com a caixa de texto preenchida com
o valor da variável.
Exercícios
1- Quais os dois modos de ferramenta de texto no Flash CS5?
a) Classic e TLF;
b) Old e TFL;
c) Classic e FLT;
d) Old e FTL.
2 - Para usar os recursos do TFL, precisamos copilar o arquivo com qual versão mínima de Flash player?
a) 8;
b) 9;
c) 10 ou superior;
d) 9 ou inferior.
3 - O Read only é o texto tipo:
a) Somente leitura;
b) Texto selecionável;
c) Um texto que você poderá modificar mesmo depois de o arquivo ser copilado;
d) Texto dinâmico.
4 - Para evitarmos problemas de visualização de fontes, por conta de elas não estarem instaladas na máquina do
usuário final, nós devemos:
a) Não converter o texto em curva;
b) Embutir o texto no arquivo copilado;
c) Substituir a fonte;
d) Apagar o texto.
5 - Devemos usar no Flash fontes do tipo:
a) TTF;
b) Type -1;
c) TTF e Type-1;
d) OTF.
15
6 - No painel Character, a opção Use device fonts faz:
a) O Flash player usar as fontes de sistema instaladas na máquina do usuário;
b) O Flash player instalar as fontes na máquina do usuário;
c) O Flash player desinstalar as fontes na máquina do usuário;
d) O Flash player exportar as fontes na máquina do usuário.
7 - Por que devemos embutir as fontes nos projetos de Flash?
a) Porque a fonte estará instalada no computador do usuário final de seu site;
b) Por que pode ser que a fonte não esteja instalada no computador do usuário final de seu site;
c) Porque a fonte será instalada no computador do usuário final de seu site;
d) Porque a fonte será substituída no computador do usuário final de seu site.
8 - Em Embed fonts, no campo Character range, nós:
a) Marcamos quais caracteres serão embutidos no arquivo;
b) Embutimos a fonte toda;
c) Selecionamos a família de fontes inteira para embutir no arquivo;
d) Marcamos quais os caracteres que não serão embutidos no arquivo.
9 - Qual modo de ferramenta de texto nos permite inserir hyperlinks diretamente em um trecho de texto?
a) Classic text;
b) Classic text e TLF;
c) TLF e Classic text;
d) TLF.
10 - Quais os tipos de texto no modo Classic text?
a) Read only, Selectable e Editable;
b) Static text, Dynamic text e Input text;
c) Static text, Selectable e Input text;
d) Read only, Dynamic text e Editable.
TDP
Professor, por favor, siga o passo a passo do trabalho de desenvolvimento prático no livro do aluno.
Aula 04
4 - Símbolos
4.1 - O que é um símbolo?
Professor, por favor, após a explicação sobre símbolos contida no item 4.1 do livro do aluno, dê exemplos de aplicações práticas com
os símbolos. Como, por exemplo, uma imagem de fundo que é usada repetidas vezes no projeto. Ao invés de ter sempre uma cópia
da imagem em si, convém convertê-la em um Graphic e usar suas instâncias quando precisar duplicá-la.
No exercício com texto dinâmico da aula anterior, o senhor criou um Dynamic text e o instanciou. Aborde novamente o assunto.
Explique que ainda que cada cópia de instância de um símbolo no projeto seja um mesmo elemento, cada instância pode ser
diferenciada apenas lhe aplicando um nome de instância, o que tem valor prático durante a programação de códigos actionscript.
16
Flash CS 5
Exemplifique da seguinte forma:
Fig. 4.3
Fig. 4.1
Fig. 4.2
Crie um símbolo Movie clip, e, nesse clipe de filme, crie três frames. Em cada frame, mude a cor do Shape, de forma que cada frame
tenha uma cor.
Coloque mais uma camada nesse clipe de filme e, no primeiro frame dessa camada, coloque o código:
Stop();
Fig. 4.4
Depois disso, volte ao stage e instancie o Movie clip como desejar. Como exemplo, ele foi batizado com o nome “bola”.
17
Fig. 4.5
Agora crie um botão. Deixe-o com uma cor diferente das que você usou nos três frames do Movie clip. Faça três cópias do mesmo
botão e instancie-os com os nomes “btn1”, “btn2” e “btn3”.
Fig. 4.6
O resultado deverá ser similar a isto:
Fig. 4.7
Agora crie mais uma camada no stage e, no primeiro frame, insira, pelo painel de código, o seguinte código actionscript:
18
Flash CS 5
Lembrando que não precisa se preocupar em explicar o código em sua totalidade aos alunos. O código por extenso:
importflash.display.Sprite;
importflash.text.*;
importflash.display.MovieClip;
btn1.addEventListener(MouseEvent.CLICK, trocaCor);
btn2.addEventListener(MouseEvent.CLICK, trocaCor);
btn3.addEventListener(MouseEvent.CLICK, trocaCor);
functiontrocaCor(event:MouseEvent):void {
switch (event.currentTarget.name)
{
case “btn1” :
bola.gotoAndStop(1);
break;
case “btn2” :
bola.gotoAndStop(2);
break;
case “btn3” :
bola.gotoAndStop(3);
break;
}
}
Agora clique alternadamente sobre os botões e mostre aos seus alunos a cor do Movie clip sendo alterada. Moral da história:
um único botão, com três instâncias, e cada um deles executando uma atividade diferente, pois foram instanciadas com nomes
diferentes.
4.2 - Entrando em um símbolo. Como editá-lo?
Na prática, esse item é uma continuação do exercício anterior. Demonstre como funciona a hierarquia dos símbolos. Use os símbolos
criados no exercício anterior.
Exercícios
1 - O que é um símbolo?
a) É todo o elemento que pode ser reaproveitado no projeto por meio de instâncias do original;
b) É todo o elemento que não pode ser reaproveitado no projeto por meio de instâncias do original;
c) É todo elemento clonado no palco;
d) É todo elemento no projeto.
2 - Quais os três tipos de símbolos?
a) Shape, Drawing object, path;
b) Graphic, Movie clip e Button;
c) Shape, Movie clip e Button;
d) Path, Movie clip e Button.
19
3 - Quais os três estados de um botão?
a) Up, Over e Hit;
b) Up, Down e Hit;
c) Up, Over, Down e Hit;
d) Up, Over e Down.
4 - Quais os quatro frames de um botão?
a) Up, Over e Hit;
b) Up, Down e Hit;
c) Up, Over, Down e Hit;
d) Up, Over e Down.
5 - Qual tecla de atalho nós usamos para converter um desenho em símbolo?
a) F5;
b) F6;
c) F7;
d) F8.
6 - O estado Up em um botão é o objeto em:
a) Repouso;
b) Quando o cursor do mouse repousa sobre ele;
c) Quando o cursor do mouse é clicado;
d) É o estado desativado.
7 - O que é uma instância?
a) Um objeto diferente do objeto original;
b) uma cópia simples do original;
c) Um clone do original;
d) Uma “sombra” do objeto original.
8 - Qual destes símbolos possui seus próprios frames de animação e camadas em seu interior?
a) Graphic;
b) Button;
c) Movie clip;
d) Todos os anteriores.
9 - O que faz um botão?
a) Objeto que, ao ser clicado, executa uma ação previamente programada;
b) Nada, pois é um objeto estático;
c) Converte objetos em símbolos;
d) Apenas retorna uma informação ao usuário.
10 - Quais símbolos podem receber nomes de instâncias?
a) Somente Movie clip;
b) Somente Graphic;
c) Todos os símbolos;
d) Somente Button.
20
Flash CS 5
TDP
Convertendo desenho em símbolo
Agora é a vez de o aluno criar seus símbolos. Por favor, siga o passo a passo presente no livro do aluno.
Criando símbolos dentro de símbolos
Continuação do exercício anterior. Por favor, siga o passo a passo presente no livro do aluno.
Aula 05
5 - A timeline
Professor, nesta aula abordaremos o painel Timeline e como trabalhar com camadas e frames.
5.1 - Stage
É importante abordar que a visualização do projeto pelo usuário final se resume apenas ao que estiver desenhado dentro da área
delimitada do stage. Crie pequenas animações simples com o Classic tween. Não precisa entrar em maiores detalhes sobre o recurso
da animação, justamente para fazer testes de animação mudando os valores de FPS do projeto, para que os alunos compreendam
a lógica por trás do Frame rate. Mude os valores de FPS diversas vezes e faça um Test movie (Ctrl + Enter) para exibir aos alunos
seus resultados.
5.2 - Camadas
Seguindo o livro do aluno, insista para que eles imitem o senhor durante os exemplos abordados para renomear, criar camadas,
agrupá-las e apagá-las. Professor, elucide de forma prática as necessidades durante a execução do projeto de ocultar e bloquear
camadas em sua criação. Se o senhor já possuir algum projeto de sua autoria, com um grande volume de camadas para exemplificar,
isso será de grande ajuda nos exemplos
5.3 - O que são frames?
Cada camada possui seus próprios frames. Precisamos deixar o aluno ciente de como funciona a lógica de animação por trás dos
frames. A quantidade de frames de um projeto é diretamente influenciada em seu tempo de exibição pelos valores FPS. Aborde com
exemplos em tempo real a utilização de keyframes, a extensão do tempo de exibição dos elementos de uma camada, aumentado
ou diminuindo frames, e a importância de utilizar blankeyframes.
5.4 - Máscara de camada
Faça uma demonstração prática da utilização de máscara de camada. Peça para os alunos aplicarem uma máscara após sua
explicação no projeto do exercício anterior.
21
Exercícios
1 - O que significa FPS?
a) Frames per stage;
b) Frames per symbol;
c) Frames per second;
d) Flash per second.
2 - O usuário final verá apenas no arquivo SWF copilado:
a) O que estiver na área delimitada do palco;
b) Tudo que estiver fora do palco;
c) Tudo que estiver dentro e fora do palco;
d) Só o que for símbolo instanciado.
3 - Para renomear uma camada, nós devemos:
a) Criar um símbolo nela;
b) Inserir frames nela;
c) Ocultá-la;
d) Clicar duas vezes no nome dela e digitá-lo novamente.
4 - Qual o botão para criarmos uma nova camada?
a) New document;
b) New layer;
c) Delete layer;
d) New folder.
5 - Se o volume de frames no projeto for grande, o que convém fazermos?
a) Apagar as camadas;
b) Ocultar as camadas;
c) Renomear as camadas;
d) Agrupar as camadas.
6 - O que são frames?
a) Quadradinhos na timeline;
b) É um intervalo de tempo dentro da animação;
c) É uma camada;
d) É um símbolo.
7 - O que é um keyframe?
a) É um quadro em que ocorre uma alteração na animação;
b) É um quadro vazio;
c) É um quadro de interpolação;
d) É um quadro novo.
22
Flash CS 5
8 - O que é um blank keyframe?
a) É um keyframe em branco;
b) É um frame com conteúdo;
c) É um frame com um símbolo instanciado;
d) É um keyframe.
9 - Qual o recurso que podemos utilizar para visualizar mais de um frame ao mesmo tempo?
a) Insert keyframe;
b) Insert blank keyframe;
c) Onion skin;
d) Insert frame.
10 - Qual o atalho para inserir mais frames na timeline?
a) F5;
b) F6;
c) F7;
d) F8.
TDP
Como os frames e camadas trabalham juntos?
Por favor, professor, siga o passo a passo do livro do aluno. Os arquivos desse exemplo estão disponibilizados. Verifique com a coordenação
da escola como ter acesso a esses arquivos e procure disponibilizá-los aos alunos para ganhar tempo na execução do exercício.
Se sobrar tempo, insista para que eles mesmos criem suas próprias animações ou façam intervenções nos desenhos cedidos.
Foque na importância de se preparar arquivos previamente para animação e no planejamento dela. Leve o debate aos alunos de
como se planejar quais partes do cenário ou da personagem serão animados, de acordo com o projeto, de como aproveitar quadros
e de como trabalhar intercalando as camadas.
A numeração de arquivos de uma mesma sequência de animação para que o Flash possa importá-los todos juntos é um bom
exemplo de organização e planejamento antes do desenvolvimento do projeto.
Ao final do exercício, peça para os alunos mudarem o tempo de exibição de alguns elementos inserindo ou removendo frames para
tornar a animação mais fluida. Se eles puderem fazer intervenções, criar mais frames de animação ou melhorar a personagem, melhor
ainda. Incentive a criatividade. É um bom momento para apresentar a eles os recursos do menu Modify - Transform enquanto desenham.
Aula 06
6 - Animação clássica
6.1 - O que é Shape tween?
Enfatize as condições necessárias para se criar um Shape tween, de o desenho ser um Shape ou Draw object e não poder ser um
Symbol. Explique a lógica por trás da interpolação de frames entre os keyframes. O Flash calcula o comportamento dos frames
intermediários, calculando o que foi alterado entre os keyframes.
23
6.2 - O que é Classic motion tween?
Diferente do Shape tween, esse estilo de animação necessita converter os desenhos em símbolos. Cite que esse estilo de animação
só adotou o nome “Classic” após a versão CS4 do pacote Adobe. Mostre na prática o que acontece na biblioteca do projeto, caso
seja feito um Classic motion tween sem converter os elementos em símbolos.
6.2.2 - Ease
Aproveite o exercício anterior para demonstrar na prática os efeitos do Easing out e Easing in.
6.4 - Edit easing
Após a explicação, peça para os alunos experimentarem diferentes configurações no gráfico do editor. Use o exercício da aula
anterior para que eles possam fazer suas experiências e descubram por si só os resultados.
Exercícios
1 - O que é uma interpolação de movimento?
a) É somente um Shape tween;
b) É somente uma Classic tween;
c) É somente uma Motion tween;
d) É quando o Flash se encarrega de criar os frames intermediários de animação entre dois keyframes.
2 - Qual é a condição para se fazer um Shape tween?
a) O objeto animado precisa ser um Shape;
b) O objeto animado precisa ser um Symbol;
c) O objeto animado precisa ser um Movie clip;
d) O objeto animado precisa ter contorno.
3 - Para criar animações usando o Classic motion tween, é aconselhável trabalhar com:
a) Shapes;
b) Bitmaps;
c) Symbols;
d) Drawing objects.
4 - Qual a tecla de atalho para criar um keyframe?
a) F6;
b) F7;
c) F8;
d) F9.
5 - Easing out faz:
a) A animação ir aumentando a velocidade até seu final;
b) A animação ir freando a velocidade até seu final;
c) A animação chegar ao seu final;
d) Parar a animação.
24
Flash CS 5
6 - Em uma animação Classic motion guide, precisamos de duas camadas. Por quê?
a) Uma para o objeto animado e outra para a linha guia;
b) Uma para a máscara e outra para o objeto;
c) Uma para o objeto e outra para o símbolo;
d) Uma para o Shape e outra para um símbolo.
7 - Para mudar a atenuação da animação, nós usamos:
a) Classic tween;
b) Motion guide;
c) Motion tween;
d) Edit easing.
8 - Qual ferramenta podemos usar para introduzir Archor points na linha de aceleração do Edit easing?
a) Erase tool;
b) Select tool;
c) Subselection tool;
d) Pen tool.
9 - Qual o comando que devemos acionar para criar um Shape tween?
a) Create a classic tween;
b) Create a motion tween;
c) Create a shape tween;
d) Create a motion guide.
10 - Em uma Clasic motion guide, assinalar o comando Orient to path faz:
a) O símbolo ser orientado pela linha guia;
b) O símbolo desviar da linha guia;
c) O símbolo ignorar a linha guia;
d) O símbolo frear na linha guia.
TDP
Criando um Shape tween
Por favor, siga o passo a passo mencionado no livro do aluno.
Motion guide
Por favor, siga o passo a passo mencionado no livro do aluno.
25
Aula 07
7 - Fazendo animação com o Motion tween
Professor, siga o exemplo descrito no livro do aluno desta aula. Enfatize aos alunos que eles devem imitá-lo em todo o processo.
Enfatize que a responsabilidade de criação dos símbolos em seus projetos é deles, e que não é muito saudável deixar tudo a cargo
do software. Quando eles estiverem criando seus símbolos, relembre-os de como converter um Shape em um Symbol usando o
atalho com a tecla F8. Além disso, siga o exemplo do livro do aluno.
7.1 - Motion editor
Siga o exemplo do livro do aluno. Peça aos alunos para que o imitem. Após o exemplo, mostre a eles que, além do Basic motion,
há também a aba Transformation, cuja lógica é similar. Entretanto, neste caso, mudamos as medidas do objeto. Com as opções
dessa aba, nós podemos determinar um keyframe para que o símbolo venha a ter tamanho, largura e altura diferentes do keyframe
anterior ou ainda para que aumente o tamanho do símbolo proporcionalmente por meio das opções Scale X e Scale Y.
7.1.2 - Aplicando propriedades à animação via Motion editor
Siga o exemplo no livro do aluno. Após a conclusão dele, peça aos alunos que testem a animação para verem o efeito em ação.
Podemos seguir a mesma lógica para aplicar filtros (Filters) e efeitos de cores (Color effects). Primeiro, criamos o efeito e depois o
aplicamos à animação criada pelo Motion editor. Faça demonstrações para eles usando esses recursos.
7.2 - Motion presets
Mais um exemplo no livro do aluno a ser seguido. Assim que este for finalizado, mostre aos alunos que, dentro do painel de Motion
presets, há duas pastas: uma são os padrões já feitos e disponíveis para trabalhar e é chamada Default presets; a outra pasta é dedicada
às animações criadas pelo usuário e é chamada Custom presets. Aproveite a oportunidade e ensine os alunos a criarem suas próprias
animações e depois deixá-las salvas para poderem usá-las novamente em outras ocasiões e projetos, ganhando assim em produtividade.
Fig. 7.1
Peça para os alunos fazerem uma animação usando o Motion tween. Se possível, peça a eles para usarem o Motion editor. Em
seguida, eles devem selecionar os frames da animação, todos eles, e depois, com a pasta Custom presets ativa, no painel Motion
presets, clicar no botão Save selection as preset. Peça para eles darem um nome à animação.
Pronto! A animação foi salva. Para concluir, diga a eles para criarem um novo símbolo e aplicarem a animação que criaram a esse
novo elemento.
26
Flash CS 5
Exercícios
1 - Desde qual versão do Flash o recurso Motion tween está disponível?
a) CS3;
b) MX;
c) CS4;
d) CS5.5.
2 - Para criar um Motion tween, nós devemos:
a) Clicar com o botão direito do mouse no símbolo e selecionar a opção Create motion tween;
b) Clicar, segurar e arrastar o símbolo pelo stage;
c) Instanciar o símbolo;
d) Clicar com o botão esquerdo do mouse no símbolo.
3 - Qual ferramenta usamos para mudar a curvatura da linha de animação em uma Motion tween?
a) Pen tool;
b) Selection tool;
c) Subselection tool;
d) Erase tool.
4 - Usamos o painel Motion editor para:
a) Fazer animações com precisão;
b) Converter objetos em símbolos;
c) Controlar somente a quantidade de frames da animação;
d) Iniciar a animação.
5 - Qual a vantagem de se aplicar propriedades à animação via Motion editor?
a) Pode-se aplicar o mesmo efeito, que fica salvo no painel, em outra animação;
b) Você apenas ganha precisão na propriedade;
c) Deixa a biblioteca limpa de símbolos desnecessários;
d) Nenhuma vantagem.
6 - O que são Motion presets?
a) Uma lista de animações prontas para o uso;
b) Uma lista de símbolos prontos para o uso;
c) Uma lista de Shapes prontos para o uso;
d) Uma lista de botões prontos para uso.
7 - Em Motion presets, em que pasta está salva a animação Fly in left?
a) Custom presets;
b) Default presets;
c) Meus documentos;
d) Downloads.
27
8 - Em Motion presets, em que pasta está salva as animações criadas pelo usuário?
a) Custom presets;
b) Default presets;
c) Meus documentos;
d) Downloads.
9 - Além de precisão na animação, o que mais pode fazer o painel Motion editor?
a) Apenas mudar os valores cartesianos;
b) Apenas mudar a atenuação da animação
c) Aplicar propriedades à animação, como filtros, efeitos de cores e atenuação;
d) Inserir frames à animação.
10 - Qual é o comando que devemos selecionar para salvar uma animação na lista do Custom presets em Motion presets?
a) Save selection as preset;
b) Create a motion tween;
c) Create a classic motion tween;
d) Create a motion guide tween.
TDP
Mudando a trajetória da animação com o Motion tween Professor, por favor, siga o passo a passo do livro do aluno. Após a conclusão
do exercício, mostre aos alunos os seguintes pontos a respeito do Tween motion: Não é burocrático. É desnecessário criar Motion
guide, pois você já edita a trajetória diretamente na linha da animação. É rápido porque você não perde tempo criando keyframes.
Você edita direto na timeline e o software cuida disso pra você. Se você quiser, o próprio software converte os Shapes ou imagens
em símbolos para você, porém esse recurso deve ser usado com parcimônia. Se houver tempo, peça aos alunos para criarem novos
keyframes e editarem a trajetória da animação de diferentes maneiras. Os recursos de Ease twenning valem tanto para a Classic
motion quanto para o Motion tween.
Code snippets
Fig. 7.2
Apresente o painel Code snippets aos seus alunos após a conclusão das tarefas. Até este momento do curso, não será citada
programação em actionscript, porém alguns comandos básicos serão apresentados e podem ser necessários vez ou outra. Por isso,
apresente a eles o comando STOP(); para parar a animação, o que evita um eterno looping após a compilação do arquivo em SWF.
28
Flash CS 5
Aula 8
8 - Trabalhando com Bones
Nesta aula, siga o exemplo do livro do aluno. Veja com a coordenação da escola como ter acesso aos arquivos utilizados nesta aula.
8.1 - Ferramenta Bone – Runtime
Continue usando o exemplo do livro do aluno. Utilize o mesmo arquivo da aula anterior.
Exercícios
1 - A ferramenta Bone é responsável por:
a) Criar articulação em objetos por meio das interações entre símbolos;
b) Apenas agrupar objetos;
c) Apenas desagrupar objetos;
d) Apenas unificar camadas.
2 - O que acontece quando unimos dois símbolos de camadas diferentes com a ferramenta Bone?
a) As camadas são unidas com o nome “Armature”;
b) Os símbolos são instanciados;
c) Os símbolos são descartados;
d) Surge um novo símbolo no stage junto aos dois originais.
3 - Se habilitarmos a opção Runtime, na ferramenta Bone, o que acontece?
a) Nada acontece;
b) O usuário final poderá mover com o cursor os símbolos e ele mesmo poderá fazer sua animação;
c) A animação das articulações será realizada sozinha pelo software;
d) Um novo keyframe será criado.
4 - Podemos editar o eixo de um símbolo com qual ferramenta?
a) Selection tool;
b) Subselection tool;
c) Erase tool;
d) Free transform tool.
5 - Qual ferramenta nós utilizamos para manipular o traçado de ligação dos eixos dos símbolos, após aplicarmos a
ferramenta Bone?
a) Selection tool;
b) Subselection tool;
c) Erase tool;
d) Free transform tool.
29
TDP
Criando personagem e animando-os
Foque, nesta parte da aula, no trabalho prático. Deixe que os alunos aproveitem o tempo para colocar em prática tudo o que já
viram até o momento. Auxilie-os na tarefa. Aos alunos que não souberem ou não tiverem facilidade de desenhar uma personagem,
diga que eles podem fazer desenhos simples, como um “stickman” (boneco de tracejados). Isso já ajuda!
Aula 9
9 - Multimídia
Professor, seria interessante iniciar a aula conversando com os alunos sobre as facilidades da inserção de vídeos em páginas de internet
e debatendo sobre aplicações úteis, sobre o recurso e sobre sua popularização com o advento da internet banda larga. Cite também sites
famosos que usam vídeos em seu conteúdo, como sites de jornais que colocam, além da notícia textual, o vídeo para complementar a
informação. Cite também sites de e-commerce que, ao lado dos produtos oferecidos, colocam vídeos promocionais deles.
9.1 - Convertendo arquivo de vídeo para FLV
Por favor, siga o exemplo citado no livro do aluno. Procure disponibilizar um arquivo de vídeo para os alunos ou usar um dos vídeos
de exemplo que já acompanham a instalação do Microsoft Windows, presente na pasta “Vídeos”, que se localiza dento da pasta
“Meus documentos”.
9.2 - Inserido vídeo no Flash
Siga com o exemplo do livro do aluno. Após a conclusão e teste desse exemplo, acrescente algumas informações sobre o Component
parameters, no painel de propriedades do componente. Algumas propriedades que podem ser abordadas:
•
Autoplay: quando assinalado, o vídeo, assim que é carregado, começa imediatamente. Se desmarcado, somente executa
o vídeo se o usuário apertar a tecla Pla;
•
Scalemode: determina a escala do player em relação às medidas do vídeo. A opção Maintain aspect ratio mantém a
proporção do vídeo executado, ou seja, se você aumentar o tamanho do componente de vídeo, este aumentará de tamanho
também proporcionalmente; a opção No scale é o tamanho real do vídeo, sem modificações; e Exact fit assinalado distorce as
dimensões do vídeo para ajustar as dimensões do vídeo componente, isso se você mudou manualmente as medidas dele;
Skin: com essa propriedade, podemos mudar a aparência do player do vídeo.
Fig. 9.1
•
30
Flash CS 5
•
Skin auto hide: com essa opção marcada, quando o usuário não estiver com o mouse sobre o vídeo, os botões do player
não serão exibidos.
 Skin background alpha: essa propriedade define a transparência do player;
 Skin background color: Já essa propriedade determina a cor do player;
 Volume: estabelece o volume na execução do vídeo.
9.3 - Inserindo áudio no Flash
Após ensinar os alunos a incluírem som a uma keyframe, conforme exemplo no livro do aluno, mostre a eles os recursos do painel
de propriedade aplicados a áudio.
Na aba Sound, no painel de propriedades, nós veremos as seguintes opções:
Em Effects, há a possibilidade de escolher um efeito para o áudio, como, por exemplo, ele começar baixinho e ir subindo de volume
gradativamente (Fade in), ou o inverso (Fade out). Se selecionar None, não é aplicado efeito nenhum.
Mas o campo mais importante aqui é o Sync, que possui as seguintes opções:
•
Event: o som será executado mediante um evento, seja o keyframe com o áudio ser atingido ou um clique de um botão,
e o som não irá cessar mesmo que a animação pare. Se, por acaso, o arquivo copilado estiver em looping toda vez que o keyframe
com o áudio for alcançado, um novo som será executado e sobreposto ao som original.
•
Start: executa assim que o keyframe é atingido, igual ao Event. Porém, se estiver em looping, não será criada outra instância do som, ou seja, não haverá mais de uma instância do áudio em questão sobreposta.
•
Stop: para o áudio.
•
Stream: sincroniza o áudio com a animação. Assim que a animação termina, o áudio também é encerrado. Se estiver em
looping, o áudio volta do começo junto à animação.
A opção Repeat determina a repetição do áudio e a Looping estabelece que o som deve se repetir assim que se encerrar em um ciclo.
Exercícios
1 - Qual é o formato de vídeo nativo do Flash?
a) MKV;
b) AVI;
c) RMVB;
d) FLV.
2 - Qual o programa que usamos para converter um arquivo de vídeo no formato FLV?
a) Adobe Acrobat;
b) Adobe Media Encoder
c) Adobe Photoshop;
d) Adobe Premiere.
3 - Para inserir um vídeo no Flash, nós precisamos de:
a) Componentes;
b) Símbolos;
c) Shapes;
d) Bitmaps.
31
4 - Para configurar o componente no palco, precisamos:
a) Do painel Actionscript;
b) Do painel Motion presets;
c) Da aba Component parameters, no painel de componentes;
d) Do painel Motion editor.
5 - Os formatos de áudio suportados pelo Flash são:
a) OGG, ASND, AIFF, mp3, AIFF;
b) OGG, AIFF, mp3, AIFF, WAV;
c) ASND, AIFF, mp3, AIFF, WAV;
d) Mp4, mp3, AIFF, WAV
TDP
Inserindo áudio e vídeo
Professor, assim que as demonstrações a respeito das propriedades, tanto do componente de vídeo quanto do áudio, terminarem,
peça aos alunos que refaçam todos os passos dos exemplos. Peça também que eles façam pequenas modificações, escolham outras
propriedades e façam experiências testando os recursos.
Aula 10
10 - Básico em Actionscript
Professor, nosso curso está quase no fim. Nesta aula, vamos abordar os comandos básicos de actionscript por intermédio do painel
Code snippets para que o aluno já possa projetar e executar seus próprios projetos e ter um pouco mais de independência. Além dos
exemplos explanados no livro do aluno, se houver tempo hábil, seria interessante dissecar mais alguns comandos para os alunos.
10.1 - Instanciando um símbolo
Converse com os alunos sobre a necessidade de, sempre que possível, instanciar os símbolos em um projeto. Os arquivos usados
no exemplo estão disponibilizados, porém, se possível, peça aos alunos para criarem seus próprios símbolos, acompanhe o processo
e veja quais os alunos que apresentam dificuldades nessa atividade. Nesta altura do curso, os fundamentos de desenhos básicos já
devem ser dominados por todos os alunos.
10.2 - Comandos no painel Code snippets
Faça um overview por todos os grupos de comandos dentro do painel Code snippets. Procure fazer isso de forma sucinta. Os grupos
que os alunos mais utilizaram até este momento são os que englobam os fundamentos primordiais do Flash.
•
O grupo Actions se resume a ações específicas sobre recursos e componentes do Flash;
•
Timeline navigation se propõe a englobar os comandos básicos de navegação da timeline, como GotoAndStop, GotoAndPlay, NextFrame, 12
32
Flash CS 5
•
Frame etc.;
•
Animation tange o que se refere à animação de MCS.
•
Load and unload, por sua vez, agrupa comando de carregamento de imagens ou SWFS externos etc.;
•
Audio and video trata de recursos multimídia e o grupo Event handlers é relacionado aos eventos de mouse.
Mencione a grande diferença de programação que havia entre o código AS 2.0 e o 3.0. Por exemplo, para capturar um evento de
mouse, um clique em um objeto, se utilizava o seguinte código:
bola.onRelease = function()
{
trace(“cliquei na bola”);
};
No AS3, o mesmo código é:
bola.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
functionfl_MouseClickHandler(event:MouseEvent):void
{
trace(“cliquei na bola “);
}
No caso, não é que o código em AS2 era mais fácil, e sim que era muito desorganizado, pois no AS2.0 podíamos inserir códigos
diretamente em botões, Movie clips, em frames, de frames dentro de outros Movie clips e, para completar, havia inúmeras maneiras
de se fazer a mesma coisa. Já no AS3.0 não. Ele é orientado a objeto, é bem organizado e você só trabalha com as classes de que
precisa, otimizando o desempenho.
Pois veja só! No exemplo acima em AS2, se clicarmos no Movie clip “Bola” será entendido que essa ação de mouse é igual a uma
função. Porém, e se houver outros símbolos que, quando clicados, executam a mesma coisa? Nesse caso, vamos ter que criar uma
função chamada por um evento OnRelease para cada símbolo? A solução seria chamar uma função única para dentro da função.
bola.onRelease = function () {
chama();
}
bola2.onRelease = function () {
chama();
}
bola3.onRelease = function () {
chama();
}
function chama()
{
trace(“cliquei na bola”);
}
Ok! Isso funciona, mas não é o ideal, pois ainda assim teríamos que criar uma função para cada símbolo apenas para chamar
outra função.Aproveite a ocasião e posicione o aluno a respeito do que são funções. Funções são blocos de códigos que podem ser
reaproveitados a qualquer momento e por qualquer elemento no projeto. A utilização de funções permite a economia de linhas de
comando e de tempo de produção. Além da facilidade de organização.
10.2.1 - Drag and drop
Siga o exemplo do livro do aluno.
10.2.2 - Stop a movie clip
Primeira interação do aluno com o painel de Actionscript. Professor, procure situar o aluno de modo que ele consiga diferenciar
funções de simples comandos. Obviamente, por conta de o aluno ainda não estar preparado para lidar com lógica de programação,
33
não será necessário esmiuçar comando por comando, porém o aluno deve entender a lógica por trás da utilização do painel Code
snippets como facilitador na programação.
O aluno deve ser capaz de utilizar os comandos que envolvem pelo menos os grupos Actions e Timeline navigation. Neste trecho
da aula, ele perceberá a importância de ter um símbolo instanciado no stage.
Realize as etapas conforme o livro do aluno e peça para os alunos que o imitem.
10.3 - Navegando na timeline
Mais um exemplo a ser seguido no livro do aluno. Nesta etapa, o aluno entenderá que ele possui, por meio de comandos, o controle
da navegação na timeline. Dê exemplos práticos de como isso será útil no dia a dia profissional dele.
10.3.1 - Aplicando um Label ao frame
Após o exercício anterior, mude os frames de posição na timeline, seja aumentando ou reduzindo frames, e execute o arquivo
copilado. Os alunos vão notar que os comandos não funcionam como deveriam, uma vez que a posição dos keyframes mudaram.
Explique o motivo do problema e dê a solução por meio da utilização de Labels nos keyframes.
Exercícios
1 - Qual o nome do painel facilitador de comandos actionscript?
a) Motion editor;
b) Motion presets;
c) Code snippets;
d) Components.
2 - Instanciar um símbolo é:
a) Dar um nome a ele;
b) Cloná-lo;
c) Apagá-lo;
d) Agrupá-lo.
3 - Instâncias de um mesmo símbolo podem receber comandos diferentes desde que:
a) Possuam nomes de instâncias diferentes;
b) Possuam nomes de instâncias iguais;
c) Possuam nomes de instâncias semelhantes;
d) Possuam nomes de instâncias que comecem com a mesma letra.
4 - Quando inserimos um comando actionscript pelo painel Code snippets, automaticamente uma camada é criada.
Qual o nome dela?
a) Armature;
b) Actions;
c) Code;
d) Actionscript.
5 - Em actionscript, um clique do usuário é um(a):
a) Requisição;
b) Reclamação;
c) Evento;
d) Interação.
34
Flash CS 5
6 - O comando actionscript para capturar o clique do usuário é Mouse click event. No painel Code snippet, ele está
em qual grupo?
a) Actions;
b) Timeline navigation;
c) Animation;
d) Event handlers.
7 - Os comandos de uma função precisam ficar dentro de:
a) Parênteses;
b) Chaves;
c) Colchetes;
d) Aspas.
8 - O comando actionscript para parar a timeline é:
a) stop();;
b) start();;
c) gotoAndPlay();;
d) gotoAndStop();.
9 - Comandos para manipulação da navegação da timeline ficam em qual grupo, no Code snippets?
a) Actions;
b) Timeline navigation;
c) Animation;
d) Event handlers.
10 - Por que devemos, sempre que possível, aplicar um Label a um frame?
a) Porque pode acontecer de, durante a criação do projeto, ser necessário incluir ou remover frames da timeline;
b) Para somente organizar o projeto;
c) Para tornar o frame um símbolo;
d) Para parar a timeline no frame especifico.
TDP
Painel Code snippets
Siga o passo a passo mencionado no livro do aluno.
Play a movie clip
Nesta tarefa, o aluno deve ser capaz de, sozinho, refazer os passos que o senhor executou na tarefa anterior, substituindo o
comando Stop por Play.
35
Aula 11
11 - 3D no Flash
Nesta aula, abordaremos as duas ferramentas 3D do Flash: a 3D Rotation tool e a 3D Translate tool. Faça demonstrações do uso
da ferramenta animando um símbolo.
11.1 - 3D Rotation tool
Faça uma demonstração da ferramenta seguindo o exemplo do livro do aluno. Note que, quando acionada a ferramenta, sobre
o símbolo haverá quatro círculos entrelaçados, representando quatro esferas. O círculo de cor verde representa o eixo X. Com a
ferramenta 3D, pode-se mover a rotação pelo eixo horizontal do objeto. O círculo em vermelho rotaciona pelo eixo Y, na vertical.
O círculo azul interior move a rotação do objeto em 2D, e o círculo vermelho exterior move a rotação do objeto pelo eixo Z, o eixo
de profundidade.
11.2 - 3D Translation tool
Faça uma demonstração prática do uso dessa ferramenta para os alunos e peça a eles que o imitem.
11.3 - Revisão
A próxima aula será a aula final do curso, portanto aproveite este tempo para tirar dúvidas dos alunos ou fazer uma breve revisão
do conteúdo abordado do curso.
11.4 - Trabalho de conclusão de curso
Use o final da aula para conversar sobre um projeto de conclusão do curso. Incentive os alunos a escolherem um desafio. Pode ser
a criação de um web site, uma animação ou uma apresentação. Eles devem tentar usar o máximo de recursos aprendidos no curso
para esse projeto. Auxilie-os na escolha do desafio e ajude-os a planejar a execução dele.
Exercícios
1 - Quais as duas ferramentas de animação 3D do Flash?
a) 3D Rotation tool e 3D Translation tool;
b) Free transform e Lasso tool;
c) Free transform e Subselection tool;
d) Text tool e Pen tool.
2 - Quais os três eixos da ferramenta 3D Translation tool?
a) A, B e C;
b) X, Y e Z;
c) W, X e Y;
d) Z, A e B.
3 - A cor correspondente ao eixo horizontal é:
a) Azul;
b) Verde;
c) Vermelho;
d) Roxo.
36
Flash CS 5
4 - Alterando os valores X e Y, nós alteramos também:
a) A largura e altura do objeto;
b) A profundidade do objeto;
c) As bordas do objeto;
d) A posição cartesiana do objeto.
5 - No eixo Z, quanto maior o valor...
a) Mais próximo o objeto;
b) Mais distante o objeto;
c) Mais para esquerda o objeto;
d) Mais para direita o objeto.
TDP
3D Rotation tool
O aluno precisa ser independente nesta tarefa. Acompanhe de perto apenas se chamado para tirar dúvidas. Confira o resultado final
dos alunos.
Aula 12
12 - Publicando
Com o livro do aluno, faça um overview sobre as opções e configurações da janela Publish settings.
Use o restante da aula para ajudar os alunos a completarem os seus projetos do trabalho de conclusão do curso. Se o tempo permitir,
peça que cada um de seus alunos apresente à classe o seu projeto. Deixe que eles debatam o que pode ser melhorado em seus
projetos.
Obrigado, amigo professor, pela sua dedicação até o momento.
Saudações.
Exercícios
1 - Qual o atalho para a janela Publish settings?
a) F6;
b) Ctrl + Enter;
c) Ctrl + Shift + F12;
d) Alt + Shift + F12.
37
2 - Por que convém copular o arquivo com as versões recentes de Flash player?
a) Para aproveitar todos os recursos do software;
b) Para forçar o usuário a atualizar sua versão de Flash player;
c) Para instalar a versão mais recente na máquina do usuário;
d) Para desinstalar a versão mais recente na máquina do usuário.
3 - Qual a desvantagem de utilizar a versão mais recente de Flash player?
a) Aproveitar todos os recursos do software;
b) Para ver o conteúdo, o usuário deverá atualizar sua versão de Flash player, caso não a tenha;
c) Instalar a versão mais recente na máquina do usuário;
d) Desinstalar a versão mais recente na máquina do usuário.
4 - Qual a atual versão de linguagem actionscript do Flash?
a) 1.5;
b) 2.0;
c) 3.0;
d) CS5.5.
5 - Em qual campo escolhemos o nome do arquivo SWF copilado?
a) Profile;
b) Player;
c) Script;
d) Output file.
38