Tutorial básico sobre flash ~Completo e com imagens :>~
Olá usuários, novatos, recém-chegados , moderadores e sub-moderadores e pessoas sem cadastro no fórum, resolvi fazer um tópico ensinando como se meche no flash :>
ps: Isso é o básico de todo o flash , qualquer diferensa foi porque eu usei o flash mx 6, e hoje em dia ta no 8
O flash é um programa aonde é possível fazer animações , jogos , tocador de música, efeitos lekais em imagens , gifs etc
Aqui você vai aprender o básico sobre ele.
1.0 ->Usuário , este é o flash , flash , este é o usuário.
2.0 -> Para que serve isso?
3.0 -> o básico de animação.
4.0 -> Iniciando em actionscript
1.0
http://img62.imageshack.us/img62/7849/oque6oi.jpg
Legenda
- Toolbar , aonde seleciona as ferramentas
- Linha do tempo , aonde se controla o tempo da animação
- Frames , cada um é uma imagem
- Isso é um menu aonde você pode por as janelas para organizar :]
- Propriedades , aonde você escolhe algumas opções
- Action , a parte mais complicada do flash , onde se "programa" a animação/jogo
- Palco é aonde acontecem as coisas
- Aqui você seleciona as cenas
- Aqui você seleciona seus símbolos (aprenderemos sobre eles mais tarde)
- A porcentagem do zoom
2.0
Nessa parte vamos aprender separadamente as coisas do flash
2.1 -> palco
O palco é aonde acontece tudo.
http://img57.imageshack.us/img57/399...dopalco4bc.jpg
- Tamanho da tela
- O modo de publicação do arquivo
- cor de fundo
- Frames por segundo , quem joga tibia sabe o que é isso , é o número de imagens por segundo.
2.2->Toolbar
http://img230.imageshack.us/img230/4079/toolbaar5hy.jpg
Está é a toolbar.
Legenda:
- O mouse principal
- O mouse de subseleção , nao sei direito para que serve.
- Ferramenta de linha , faz uma linha reta
- Ferramenta de laço, seleciona livremente os seus desenhos
- Ferramenta de caneta , serve para fazer linhas de um jeito mais rápido, e também tem como entortá-las
- Ferramenta de texto , serve para escrever textos
- Ferramenta oval
- Ferramenta retangulo
- Lápis , desenha livremente
- Pincel , faz linhas consideradas tintas , e não traços
- Ferramenta de transformação livre , aumenta, diminui , gira e torce os seus desenhos
- Ferramenta tinteiro , pinta as suas linhas
- Ferramenta tinta , pinta
- Ferramenta de conta gotas , seleciona a cor desejada, sendo linha ou tinta
- Ferramenta de borracha , apaga ¬¬
- Ferramenta de mão , arrasta o palco
- Ferramenta de lupa , dá zoom
- Cor de lápis . seleciona a cor das linhas
- Cor de tinta , seleciona a cor das tintas ¬¬
2.3 - livraria
http://img61.imageshack.us/img61/5589/livraria6hl.jpg
Aqui é aonde você salva alguns desenhos que você vai utilizar na sua animação/ jogo.
Na livraria existem 3 tipos de objetos:
- Gráfico - Algum desenho inanimado
- Clipe de filme - um pequeno objeto com alguma animação ou ação
- Botão - um botão , ué
2.4 - Linha do tempo
http://img91.imageshack.us/img91/6795/timeline8aq.jpg
Legenda
- Camadas, é para a organização apenas :P
- Se você selecionar aquilo a camada fica invisível (apenas na edição)
- Bloqueia a edição na camada
- Mostra o "esqueleto" da camada
- São os frames , cada um é uma imagem , para adicionar um em branco aperte f7 , para criar um igual ao ultimo f6 e um frame pulado f5
- Número do frame selecionado
- Número de frames por segundo
- Tempo de filme
3.0
No primeiro frame desenhe um bonequinho como este:
http://img134.imageshack.us/img134/7742/boneco17as.jpg
agora aperte f6 e modifique ele um pouco, aperte f6 novamente e modifique mais.F6 novamente, etc etc.
É assim que funciona.
Exemplo de animação.
3.1 - Trabalhando com símbolos
Aperte control+l para abrir sua livraria e clique no sinal http://img159.imageshack.us/img159/6776/simbolo4dy.jpg para criar um novo.
Primeiro vamos aprender a usar um movie clip
Faça algum objeto animado , preferencialmente que nao tenha muitos movimentos.
Volte ào palco e arraste o movie clip que você criou para lá. Repare que o movie clip fica "por cima" de tudo que você desenha.
Para botões é meio diferente, ele tem 4 frames, o "up" que é o normal , o over, que é quando o mouse está em cima ,o down , que é quando o mouse está clicando nele e o hit, que é a área dele.
Se você quiser botões, vá no menu windows/common libraries/buttons , lá tem vários tipos de botões de exemplo
Gráficos é o mais básico , só um desenho normal
3.2 - importanto sons
Vá em arquivo / importar para livraria
http://img54.imageshack.us/img54/5206/som9kw.jpg
selecione o som desejado.
Ele aparecerá na livraria.Selecione o frame que você quer por o som e arraste ele da livraria para o palco , como um símbolo normal.
Se você quiser alguns sons , vá em windows /common library e sounds
3.3 - tweens
Uma das coisas mais úteis no flash são as motions.
Servem para fazer um movimento direto que você tem preguiça de fazer frame por frame
Existe a motion , que é para símbolos e a shape , para desenhos
Para você fazer uma , o único objeto nos frames tem que ser o desejado , e apenas um por ves.
Exemplo de motion tween
Exemplo de shape tween
Agora vou ensinar como se faz.
importanteO objeto tem que ser o único dos frames desejados , se quiser fazer mais de um objeto tem que por em camadas diferentes!!!
http://img67.imageshack.us/img67/1173/motion8bt.jpg
Vou dar um exemplo
Primeiro , desenhe um quadrado no frame um.
Selecione-o e aperte f8 (converter para símbolo) e salve como movie clip.
Agora pule para o frame 8 e aperte f6, mas mude o quadrado para o qualquer lugar da tela que nao seja perto de onde ele estava no primeiro.Selecione todos os frames e vá no menu de propriedades.
Lá tem uma coisa
Tween:
Como o nosso quadrado é um símbolo , escolha motion.
De control+enter e veja como ficou.
Agora uma shape .
Desenhe um quadrado no primeiro frame .
Pule 8 frames e dê f7. Desenhe uma bola em outro lugar da tela, selecione os frames e novamente o menu
Tween:
Selecione shape, pois o nosso quadrado e nossa bola não são simbolos.
Dê control+enter e veja como ficou.
3.4 - Máscaras
Uma máscara , é , praticamente , um simbol invertido.
A única parte à mostra é o símbol.
Exemplo de máscara
Para fazer uma máscara é bem simples.
Crie duas camadas.
Na de baixo , ponha um monte de desenhos, da sua escolha
No de cima , desenhe uma bola, selecione-a e transforme-a em símbolo (f8)
Faça umas motions tweens dela andando pela tela , ou movimente livremente do seu gosto :]
Agora clique com o botão direito na camada de cima e selecione "máscara" ou "mask" como mostra na imagem
http://img47.imageshack.us/img47/6263/mask9xg.jpg
Após isso , dê control enter e veja como ficou.
4.0
Action script , são as açoes que você dá para o seu vídeo / jogo.
Tem alguns comandos muito complicados , mas o que nós vamos aprender agora são os básicos.
http://img146.imageshack.us/img146/8...nscript2bn.jpg
4.1 -> play, stop , rewind
Vamos aprender a fazer os comandos básicos de controlar um filme.
Faça a sua animação avontade, agora vá no primeiro frame , clique com o botão direito nele e selecione ações e adicione a seguinte ação.
Isso significa que o filme vai parar no primeiro frame.
Adicione um botão de play, que pode ser feito por você ou pego na livraria de botões , que eu já insinei aonde se pega.
clique com o botão direito no botão e adicione os comandos:
Código HTML:
on (press) {
play();
}
isso vai fazer , que quando você clicar no botão , o filme vai continuar.
Agora vá no ultimo frame e ponha a ação stop(); nele também.
Mas em vez de fazer um botão play , pegue um botão de rebobinar e ponha as seguintes ações nele:
Código HTML:
on (press) {
gotoAndPlay(2);
}
Isso significa que quando você clicar nele vai voltar para o frame dois e vai continuar.
Você também pode por gotoAndStop(1) , que faz ele parar no frame 1.
3.2 - rato feio :<
Você quer fazer que a sua animação tenha um mouse diferente do normal?
Isso é simples :P
crie um clip event que você quer que seja o mouse (ele tem que estar presente em todos os frames)
e ponha as seguintes ações nele
Código HTML:
onClipEvent (enterFrame) {
startDrag(this, true);
}
~
Bom , que eu me lembre que tem que ensina é só isso , qualquer duvida posta aqui no tópico , que se eu souber , eu respondo
