Flash introdução

1,141 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,141
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flash introdução

  1. 1. adobe flash
  2. 2. introdução adobe flash (antigo macromedia flash), é um software de animação vetorial que pode ser utilizado também para se criar aplicações interativas como banners de sites ou até mesmo jogos. existem portais especializados em jogos feitos em flash pode-se descobrir se algo é feito em flash clicando com o botão direito do mouse sobre
  3. 3. introdução para se visualizar um conteúdos flash no navegador (chrome, firefox, etc) é necessário que o plugin flash player esteja instalado. para se fazer jogos em flash é necessário o uso da linguagem de programação actionscript, porém nesta disciplina apenas estudaremos como se fazem animações básicas. nas próximas aulas criaremos um personagem no illustrator, importaremos no flash e vamos animá-lo.
  4. 4. criando um novo documento quando o flash é aberto é exibida uma janela onde pode-se configurar um novo documento, mas em qualquer outro momento pode-se criar um novo documento no menu file.
  5. 5. interface menu superior com funções que veremos ao longo do tempo. atenção ao menu window, que seguindo o padrão do illustrator e demais programas da adobe, nos permite abrir diferentes barras de ferramentas e configurações. menu de ferramentas. timeline, a linha do tempo das nossas animações. canvas, onde trabalhamos. menus extras que veremos no decorrer das aulas
  6. 6. tools podemos dividir a barra tools nas seguintes secções: seleção e modificação a selection tool (V) serve, como próprio nome indicar para selecionar, mover e manipular os objetos no canvas. com ela podemos selecionar partes ou o contorno de uma forma, ou o seu interior por exemplo. podemos alterar a forma, ou simplesmente mover o objeto. a sub selection tool (A) permite-nos selecionar as âncoras dos objetos e, assim, ter um controle mais fino do contorno de um objeto. a free transform tool (F), permite-nos aplicar transformações ao objeto como: aumentar o tamanho, fazer flips horizontais ou verticais e criar distorção na forma. com esta ferramenta selecionada temos, também, acesso, na parte inferior da barra, às opções: - rotate & skew; - scale; - distort; - envelop. criação visionamento cores opções
  7. 7. tools a gradient tool (segura o botão do mouse sobre a free transform tool para mostrar), permitenos controlar o gradiente de um objeto. com esta ferramenta selecionada podemos controlar: o ponto de focagem, o centro, a largura, o tamanho e a rotação do gradiente. a lasso tool (H) permite-nos selecionar um objeto ou partes e de um objeto desenhando-se a área de interesse. com a pen tool (P), desenhamos as linhas resultantes da introdução dos pontos de âncora. um clique para novo pontos, dois cliques para parar. clica, segura e arrasta para criar uma bézier. com a anchor point tool (=), inserimos mais âncoras nas linhas desenhadas. com a delete anchor point tool (-), eliminamos âncoras. com a convert anchor point tool (C), alteramos a forma dos contornos.
  8. 8. tools text tool (T), para inserir texto basta selecionar a ferramenta e clicar onde queremos inserir o texto. quando selecionamos esta ferramenta temos acesso, na barra de propriedades às opções: - static text (texto estático); - dynamic text (texto dinâmico, para manipular com action script); - input text (campos de texto). podemos controlar o posicionamento e o tamanho do texto através dos campos: with of instance (W) e height of instance (H), assim como o seu posicionamento relativo aos eixos X (horizontal) e Y (vertical).
  9. 9. tools a line tool (N) é usada para desenhar linhas retas no canvas. segurando a tecla shift, tornase mais fácil criar linhas retas horizontais, verticais ou diagonais. com a rectangle tool (R) desenhamos retângulos ou quadrados (mantendo segurada a tecla shift). é, também, possível desenhar retângulos com cantos arredondados utilizando a opção do painel de properties. podemos, igualmente, definir o tipo de linha, a cor e espessura do contorno, a cor do preenchimento. com a rectangle primitive tool (R), desenhamos igualmente retângulos ou quadrados, mas podemos posteriormente arredondar os cantos. com oval tool (O), desenhamos elipses ou círculos desde que tenhamos a tecla shift pressionada. no painel properties temos as mesmas opções que as referentes à rectangle tool. com a oval primitive tool (O), podemos definir ovais e círculos e definir o raio e os ângulos no objecto. *após se desenhar qualquer shape ele deixa de ser entendido pelo programa como um rectangle, oval, ou o que for, e passa a ser apenas um vetor qualquer.
  10. 10. tools com oval tool (O), desenhamos elipses ou círculos desde que tenhamos a tecla shift segurada. no painel properties temos as mesmas opções que as referentes à rectangle tool. com a oval primitive tool, podemos definir ovais e círculos e definir o raio e os ângulos para fatiar o objeto. a polystar tool permite-nos desenhar polígonos ou estrelas. no painel properties podemos definir se desejamos um polígono ou uma estrela e determinar o seu número de lados, assim como, as restantes propriedades comuns às ferramentas deste grupo.
  11. 11. tools a pencil tool (Y) é usada para desenhar diretamente no canvas. possui opções de ajuste: - straighten, ajusta as linhas desenhadas de modo a que sejam sempre rectilíneas; - smooth, Suaviza as linhas desenhadas, dando-lhes uma forma curva; - ink, não suaviza as linhas nem as torna rectas. OBS: object drawing (presente em line, rectangle, oval, pencil, brush e pen tool), pressionado faz com que toda a linha desenhada passe a ser selecionável como um objeto único, evitando que ela mescle com outra linha, do contrário ela poderá ser segmentada em diversos objetos ou mesclar com uma linha desenhada no mesmo lugar. os efeitos são levemente diferentes para cada ferramenta.
  12. 12. tools a brush tool (B) serve para criar preenchimentos e não linhas de contorno. é uma ferramenta configurável, sendo possível escolher o tamanho e a forma do pincel. Podemos, igualmente definir a suavidade da pincelada no painel properties. na barra de ferramentas podemos determinar os modos de utilização: 1 - brush modes, ver abaixo. - brush size: tamanho do pincel; - brush shape: formato do pincel; - use presure: torna o tamanho do pincel dependente da pressão aplicada na mesa gráfica (se estiver utilizando uma). brush modes: - paint normal, pinta sem diferenciação entre linhas de contorno ou preenchimento; - paint fills, pinta sobre o preenchimento, não afectando as linhas de contorno que fica sempre por cima; - paint behind, pinta por detrás dos objectos desenhados no palco; - paint inside, pinta o interior das formas sem afectar o seu contorno.
  13. 13. tools ink bottle tool (S), permite acrescentar ou alterar a cor de contorno de um objecto no canvas. paint bucket tool (K), permite atribuir cor à um contorno fechado ou mudar a cor de um existente. eyedropper tool (I) permite selecionar qualquer cor presente no canvas. depois de selecionada a cor a ferramenta transforma-se na paint bucket tool, o que permite a imediata aplicação da cor. eraser tool (E) apaga os elementos do canvas e pode ser configurada da mesma forma que a ferramenta brush tool.
  14. 14. tools a hand tool (H), permite mover o canvas. a zoom tool (M, Z), permite permite variar a dimensão do canvas entre 8 a 2000 %. stroke color, permite definir as cores de contorno. fill color, permite definir as cores de preenchimento. swap colors, permite mudar as cores entre o contorno e o preenchimento no color, permite não atribuir ou retirar a cor de um objecto.
  15. 15. timeline a timeline (linha de tempo) é um dos componentes principais do flash. é na timeline que definimos a animação e a organizamos no espaço e no tempo com as layers que são como folhas transparentes sobrepostas.
  16. 16. timeline layers cada layer é independente e pode ter os seus próprios elementos e a sua própria animação, sons, vídeos, texto, ou actionscript. layer 3 layer 2 layer 1 cria nova layer deleta layer
  17. 17. timeline configurações marcando na coluna do olho aparece um X deixando aquela layer invisível marcando na coluna do cadeado bloqueiamos a layer marcando na coluna do quadrado tornamos apenas os contornos dos objetos visíveis
  18. 18. timeline keyframes cada frame é um momento de tempo e para se adicionar algum estado àquele momento adiciona-se um keyframe. o retângulo e linha vermelha indicam qual frame estamos visualizando agora para criarmos um keyframe clicamos com o botão direito sobre um momento do tempo e selecionamos insert keyframe
  19. 19. timeline tutoriais (em inglês): http://www.adobe.com/devnet/flash/articles/concept_timeline.html http://www.leonelcunha.com/formacao/HTML/flash/timeline.html http://www.youtube.com/watch?v=zQQxaSdUoCc
  20. 20. exercício deve ser feita a animação de uma bolinha picando e deformando, conforme exemplo. enviar por email matheusknebel@gmail.com

×