Oras, então por que raios um post chamado “aprender inglês de graça”??? Já vou explicar o por que desse post…

Durante minha adolescência, minha mãe vivia me falando que eu deveria aprender inglês, que isso seria importante para o meu futuro, que poderia me “abrir portas”, mas, prá ser bem sincero, no começo eu achei que era meio balela! Até convenci a minha mãe a me tirar do curso de inglês, mas isso é história para o meu outro blog…

O que eu queria dizer aqui é que a minha mãe tinha razão normalmente, sabedoria de mãe não se discute e eu realmente precisei tanto do inglês que eu acabei aprendendo, no começo, na marra! Vim morar em Londres com a minha esposa e, por conta disso, o inglês foi indispensável! Mas isso não quer dizer que você vai um dia morar em outro país, principalmente um país que se fale inglês como a língua oficial!!! Não, estou escrevendo esse post por um motivo muito, mas muito mais nobre: a possibilidade de aproveitar o conhecimento de outras pessoas, pessoas que falam inglês!

Sim, camarada, aproveitar prá aprender com gente que fala inglês!!! E o que você tem a ver com isso? Eu é que te faço uma pergunta: você veio até esse site prá aprender a mexer no flash ou caiu de paraquedas??? Se caiu de paraquedas faz o favor de clicar num anúncio, xii, eu sou proibido de falar isso tenta aprender alguma coisa mesmo assim. Se veio aqui com o intuito de aprender a mexer no flash, vou te contar uma coisa que pode estarrecê-lo:

EXISTEM ZILHARES DE EXCELENTES SITES DE TUTORIAS DE FLASH NA LÍNGUA INGLESA!!!

Não estou falando isso prá você nunca mais voltar aqui, não, muito pelo contrário, faço esses tutoriais porque eu curto muito ensinar o que eu aprendi sobre flash, seja fazendo cursos ou na raça. Estou falando isso porque, se você souber um pouco de inglês:

1 – Você não vai morrer;
2 – Vou poder colocar um pouco mais de conteúdo interessantíssimo em inglês aqui;
3 – Você vai poder falar I love you prá sua namorada/esposa/amante com propriedade;
4 – Você vai aprender muito mais sobre flash e vai descobrir quanto tempo você perdeu da sua vida sem estudar essa língua;
5 – Mas nem por isso, último, vai me agradecer por ter te dado essa dica!

Na minha opinião, se você quer ser bom em qualquer programa de computador, qualquer coisa relacionada a informática, saber inglês é um pré-requisito, sério! Se você soubesse quantos livros excelentes de flash estão disponíveis por aí, só que estão em inglês, você já estaria me agradecendo a partir de agora…

E, da mesma forma que eu não cobro nada por você ter vindo até aqui prá aprender flash, vou comentar dois serviços excelentes, nos quais você pode aprender inglês sozinho, em casa, na frente do seu computador!

O primeiro é o Livemocha! Excelente! E, além de inglês, você pode aprender espanhol, francês, alemão, russo e mais uma porrada de idiomas.

Ainda estou fazendo umas aulas de espanhol por lá, prá refrescar a memória e porque tenho alguns amigos espanhóis aqui. Prá você se animar, adianto que até a minha mãe, que tem mais de 60 anos, está aprendendo inglês nesse site.

O segundo é o site da BBC – Learning English. É um site muito bom, principalmente prá quem já tem um pouco de conhecimento em inglês… ótimos vídeos, desafios, atividades, enfim, muito bom prá quem quer realmente se aperfeiçoar na língua inglesa.

Para os “vigilantes do código de conduta dos blogueiros brasileiros”: isso não é um post pago! É só um post voltado a um aperfeiçoamento que, na minha opinião, vai abrir muitas portas para quem aqui visita!

Enfim, era isso… espero que pensem sobre o assunto! E pensem sobre o que podem estar perdendo…

Até mais!

**update**

Aparentemente, esse site não é mais gratuito… quando eu logo, pelo menos, eu tenho que pagar prá adicionar novos cursos, mas talvez seja assim porque eu não terminei o curso que eu comecei. Se alguém souber se ainda é gratuito prá quem acaba de se inscrever no site, deixa um comentário aí embaixo, ok?

Depois de algum tempo, voltei a fazer os tutoriais de actionscript 3, como havia prometido.

Hoje falarei um pouco sobre variáveis, para que vocês aprendam sobre alguns dos diferentes tipos que existem. Façam alguns testes e aguardem, pois tentarei fazer algo mais substancial na próxima vez. Por hora, strings, numbers, booleans, ints e uints serão abordados, o que já é um bom começo para quem não sabe nada.

Ainda estou me acostumando com esse novo programa de gravação dos tutoriais e, além disso, estou esquecendo os comandos do windows, já que estou usando um mac faz aproximadamente 1 ano. Desculpem-me se o vídeo ficou meio corrido, mas tentei fazer rápido para liberar rápido… está simples, mas é melhor começar com algo simples do que começar com uma voadora no peito e desestimular todo mundo acho que já fiz isso com o vídeo anterior!

Criei um arquivo flash (Actionscript 3) e fiz a programação direto na timeline (o que eu desaconselhei no vídeo anterior, mas que é mais fácil de se aprender nesse momento do aprendizado). Se quiser se aventurar e tentar fazer a mesma coisa no arquivo principal (document class), go ahead! É a mesma coisa, só precisa dar o trace no construtor, ok?

aprendendoFlash.com – Variáveis from Gledsley Muller on Vimeo.

Obviamente, o tempo está corrido pacas e nunca vai deixar de ser. Tentarei fazer o máximo possível para postar novidades ou tutoriais aqui sempre que der, ok?

Até mais e bons estudos!!!

Bons estudos e até mais!

Acabei de voltar de um um encontro de Tecnologia da Informação das universidades públicas de São Paulo – USP, UNESP e UNICAMP (quem quiser visitar o site do encontro, clique aqui). Foram 3 dias de muitas palestras, pôsteres, grupos de discussão e idéias novas!
Obviamente falaram um pouco sobre redes, programação, software livre e cursos para a comunidade.
Divagações à parte, pensei em reformular um pouco o Aprendendo Flash, começando a pegar um pouco no pé de quem quer programar. E pensando nisso, lembrei que eu tinha uma apostila sobre lógica de programação, mas que ela era de alguém da UNICAMP. Fui procurar no google e achei o site e o link para a apostila (clique aqui para baixar), mas fui consultar a licença de uso pra não ser injusto. Enfim, a apostila foi escrita pelo pessoal do Centro de Computação da UNICAMP (link para o site, aqui) e não é que eu conheci um cara de lá durante esse encontro?!?
Bom, o que eu quero dizer com isso?
A apostila foi escrita em português e explica o que é algoritmo (é só uma palavra assustadora para uma coisa “simples”), ensina o que é lógica de programação de uma maneira bem simples e sem depender de linguagem de programação alguma! Vale a pena dar uma lida antes de encostar a mão em qualquer linguagem de programação (no nosso caso, actionscript, seja lá qual for a versão), acreditem em mim! Não comecem a programar antes de ler essa apostila e fazer os exercícios!
No começo vai parecer ridículo, mas vocês (os futuros programadores) vão me agradecer no futuro…
Quem quer ficar só na parte de design do flash, vou postar umas coisas legais sobre cores e tal mais pra frente… ninguém será esquecido aqui no Aprendendo Flash! hehehehe
Leiam e deixem posts aqui, comentando sobre o que acharam…
Até mais!

Caso você tenha testado a sua animação, você viu que quando clicado, o botão fica como seu estado normal, não é? E nós não queremos isso! Fiz isso de propósito, para vocês irem se acostumando com “remendos” ou correções que temos que fazer às vezes.
Assim, vamos selecionar o frame Over das duas camadas, como na figura ao lado.

Com os dois frames selecionados, pressione Alt e com o mouse, arraste os dois frames para o frame Down e solte. Você pode notar que o símbolo do mouse ficará com um pequeno + desenhado nele.
Teste seu filme (Ctrl+Enter) e veja que agora seu botão, quando pressionado, fica igual a quando o mouse passa por cima dele.

*Essa técnica de copiar keyframes pressionando o Alt e arrastando será muito usada daqui pra frente e acaba economizando muito tempo de desenvolvimento.

Agora selecione o frame Down das duas camadas e abra o painel Scale and Rotate em Modify > Transform > Scale ou Rotate ou pelo atalho Crtl+Alt+S (esse é um atalho que vale a pena decorar – provavelmente você usará bastante mais pra frente). Bom, esse painel mexe com a proporção escalar do objeto, bem como a rotação em graus do mesmo. Em 100%, o objeto fica do mesmo tamanho (100% do seu tamanho, o que parece óbvio, mas não é). Cuidado para não colocar 0% e sumir com seu objeto hehehehe.
Vamos deixá-los com 10% a menos de tamanho. Então, deixe 90%. Com isso, quando passarmos o mouse por cima do botão ele mudará de cor e, quando apertarmos o botão, ele diminuirá de tamanho em 10% de seu tamanho original!
Mas agora temos um outro problema: pra que serve um botão que só diminui quando apertamos??? E é isso que precisamos fazer, arranjar um motivo para a existência desse botão
Então voltemos para a cena principal (lembre-se: é só dar um clique duplo em algum espaço vazio que não em cima do botão, ok?).

De volta à cena principal, crie mais duas camadas: actions e animacao.

Na camada animação, vamos colocar um número em cada frame para indicar qual frame estamos. Pegue a ferramenta de texto (Text tool) e escreva 1 no primeiro frame da camada animacao.
Mas antes de continuar, crie um frame utilizando o atalho F5 no frame 5 da camada botao (você pode clicar com o botão da direita do mouse sobre o frame 5 da camada botao e selecionar Insert Frame). Isso fará com que o botão se “repita” até o frame 5 (para mais detalhes, cheque o tutorial Diferença entre frames…).

Agora, clique no frame 2 da camada animacao e arraste até o frame 5 (como na imagem ao lado). Iremos criar 4 quadros em branco (blank keyframes) de uma vez só.

Agora, utilizando o atalho F7, você criará 4 quadros em branco (você pode clicar com o botão da direita do mouse e selecionar Insert Blank keyframe também, mas comece a dar preferência para os atalhos).

Pronto! O que temos que fazer agora é selecionar cada um dos frames da camada animacao e inserir o número respectivo a ele. Assim, no frame 2 da camada animacao colocaremos o número 2. Faça o mesmo para os outros frames, terminando pelo número 5 no frame 5.

Com todos os números na camada animacao, vamos selecionar os frames de 2 a 5 da camada actions (ações) e criar quadros em branco.

Lembre-se do atalho F7! Sua linha do tempo tem que estar como a da figura ao lado.

Agora vamos para a parte mais legal da animação! hehehehe
Não se assustem, essa “programação” a gente já viu. Eu coloquei programação entre aspas porque mandar o flash parar com stop(); não dá nem pra falar que já estamos programando, né?
Então, selecione o frame 1 da camada actions e abra o painel de ações em Window > Actions ou pelo atalho F9. Escreva apenas stop(); e selecione o frame 2. No frame 2, repita o processo de escrever stop(); n> e faça isso em todos os frames da camada actions.

Sua linha do tempo tem que ficar como a da figura ao lado, com a ação stop(); em cada um dos frames da camada actions.

E agora, para finalizar, daremos a razão tão esperada para o nosso tão querido botão!
Selecione o botão com a ferramenta de seleção (Selection tool) e abra o painel de ações (atalho: F9).

Escreva:

on(release) {
play();
}

Nesse código, você está falando para o flash: quando o botão for solto, “toque”! hehehe, essa tradução ficou meio feia, mas o negócio é que a palavra release quer dizer soltar, liberar (o botão, no caso). Então, ao soltar o botão (clicar e soltar) a animação vai rodar (play, como no video cassete, som ou dvd).
Teste sua animação (Ctrl+Enter) que você terá uma idéia melhor do que está havendo.
Note que dentro das chaves {} você coloca a ordem para o flash. O on(release) diz a que momento você quer que aquilo seja feito!

Lição de casa: Criar uma bolinha que vai de um canto a outro da tela (com aquele loop infinito que conhecemos bem!) e criar dois botões – um de play(); e outro de stop(); – para que sua animação seja controlada por esses dois botões! E aí, fácil, né?

Então começaremos pela ferramenta retângulo (Rectangle Tool). Vamos aprender a fazer um retângulo com as bordas arredondadas.
Assim, com a ferramenta retângulo selecionada, podemos notar que no menu Options (opções) um pouco mais para baixo do menu Tools (Ferramentas) existe um botão que serve para arredondar a borda do retângulo (como indicado pela flecha azul). Selecione-o.

Ao selecioná-lo, uma janela abrirá (como na figura ao lado) e nela você poderá escolher a curvatura que deseja para seu retângulo. Como toda ferramenta, vale a pena você testar várias vezes e ver qual o número de pontos que lhe agrada mais (ou que convenha mais para seu trabalho). No caso, utilizaremos 5 pontos.

Agora, teremos então um botão como o da figura ao lado (eu escolhi o cinza, mas você poderia escolher qualquer cor para a sua animação).

Selecione todo o retângulo (tome cuidado para selecionar a linha de contorno também!) e transforme-o em um símbolo do tipo botão (Button) em Modify > Convert to Symbol ou pelo atalho F8. Preste atenção para escolher Button, como na figura ao lado! Renomei-o para botao (sem acento).

Com um clique duplo sobre o novo botão você entrará na área de edição do novo botão (da mesma forma que fizemos com o movie clip em tutoriais anteriores). Mas a linha do tempo (timeline) do símbolo botão é um pouco diferente. Ela possui apenas 4 frames (quadros) indicados pelos números:
1 – Up: é como o botão se comporta em seu estado normal;
2 – Over: é como ele se comporta quando passamos o mouse por cima dele;
3 – Down: é como ele se comporta quando clicamos nele;
4 – Hit: talvez o mais importante para evitar erros, é a área “clicável” do botão.

Agora que estamos começando a pegar o jeito de mexer com o flash, podemos começar a “apelar” mais para os atalhos, o que torna nossa vida mais fácil e nosso tempo de criação mais rápido. Com o frame Up do botão selecionado, aperte F6 três vezes. Com isso, criamos mais 3 keyframes idênticos ao do frame Up.
Lembre-se: F6 é o atalho para a criação de um keyframe, que pode ser feito clicando-se com o botão direito do mouse no frame em que se quer criá-lo e selecionando Insert Keyframe.

Crie uma nova camada e renomeie-a para texto. Renomeie a camada do retângulo para fundo (o fundo do botão).

Na camada texto, iremos colocar o texto que indicara o que o botão faz. No exemplo, coloquei botão só pra ilustrar como ficará. Caso o texto fique muito grande ou a cor não esteja do seu agrado, com o texto selecionado, abra o menu de propriedades (Window > Properties > Properties ou pelo atalho Ctrl+F3) e mude o tamanho da fonte ou sua cor.

Façamos a mesma coisa com a camada texto. Vamos criar mais três keyframes utilizando o atalho F6 (lembre-se de selecionar o frame Up da camada texto).

Faça um teste de sua animação (Ctrl+Enter) e note que o botão continua sempre da mesma forma, não mudando quando passamos o mouse por cima ou quando clicamos nele (mas o símbolo do mouse muda para uma mãozinha, indicando um botão ).

Agora, iremos mudar a cor de fundo o botão quando passamos o mouse por cima. Selecione só o fundo do botão (essa tarefa pode ser meio difícil quando estamos começando hehehehe). Com ele selecionado, abra o painel de mistura de cores (Color Mixer) em Window > Color Mixer ou Shift+F9.

Ainda com o fundo selecionado, mude a cor para outra mais escura. Note que no canto da direita existe um gradiente de cinza (no meu caso). Eu simplesmente deixei o cinza um pouco mais escuro, arrastando a flechinha preta para baixo.

r />

Note que agora o botão ficou com o fundo mais escuro no frame Over da camada fundo se compararmos com o frame Up da mesma camada.

Agora selecione o frame Over da camada texto e clique no texto. Com ele selecionado, abra o painel de propriedades (Window > Properties > Properties ou Ctrl+F3) e mude a cor da fonte.
Teste sua animação (Ctrl+Enter) e veja como seu botão fica quando o mouse passa por cima dele.

Esse é o fim da primeira parte… aguarde que logo mais eu postarei a segunda parte desse tutorial
Até mais!

Crie uma nova camada e renomeie-a para linha. Nessa camada, utilizando a ferramenta linha (Line tool), crie uma linha pequena (assim como na figura ao lado). Abra o painel de propriedades em Window > Properties > Properties ou Ctrl+F3 e, com a linha selecionada, mude para 10 o campo da espessura da linha (indicado pela flecha vermelha).

Ainda com a linha selecionada, transforme-a em um movie clip (Modify > Convert to Symbol ou F8). Nomeie-a linhaFora.

Com um duplo clique, entre no movie clip linhaFora e selecione a linha. Note que você se encontra agora dentro do movie clip, como indicado pela flecha vermelha. Com a linha selecionada, converta-a para um movie clip (Modify > Convert to Symbol ou F8). Nomeie-a linhaDentro.

No frame (quadro) 15 da camada 1 do movie clip linhaFora, insira um keyframe (quadro-chave). Clique com o botão da direita do mouse e selecione Insert Keyframe ou use o atalho F6.

Agora, selecionando um dos frames entre 1 e 15, clique com o botão da direita do mouse e selecione Create Motion Tween, como indicado na figura ao lado.

Selecione o frame 1 do movie clip linhaFora e abra o painel de propriedades em Window > Properties > Properties ou Ctrl+F3. No menu Rotate (indicado pela flecha vermelha), selecione CW (Clockwise – Sentido Horário).

Agora, volte para a cena principal dando um duplo clique em qualquer espaço em branco do movie clip linhaFora (em algum espaço do palco que não tenha um objeto selecionado).
Crie uma nova camada actions e tranque-a.
Clique com o botão da direita do mouse e selecione Insert Blank Keyframe.

Abra o painel de ações em Window > Actions ou pelo atalho F9 e digite stop();
Agora teste sua animação! Note que a linha roda como uma hélice, enquanto a bolinha se transforma em um quadrado e pára.
Dessa forma, podemos notar que a linha do tempo da linha é independente da linha do tempo principal (a que colocamos a bolinha se transformando em quadrado).
É isso aí! Continue treinando… e até a próxima!

Lição de casa: crie um cata-vento que aumenta de tamanho, mas que fique girando sem parar.
Lição extra: pegue o helicóptero do tutorial Movendo o helicóptero… e coloque as hélices pra funcionar!

Primeiro, crie uma bolinha, como na figura ao lado. Renomeie a camada para bolinha. Não faça mais nada na bolinha (NÃO crie um movie clip com ela!).

No frame 15, insira um novo quadro-chave em branco, clicando com o botão da direita do mouse e selecionando Insert Blank Keyframe ou pelo atalho F7.

No frame 15, desenhe um quadrado, mas NÃO o transforme em movie clip (e nem em nenhum outro símbolo!).

Agora, selecione o frame 1 e abra o painel de propriedades Window > Properties > Properties ou Ctrl+F3. No menu Tween (indicado pela flecha vermelha), selecione Shape.

Agora, teste seu filme e veja o resultado!
Você acabou de criar um Tweening Shape! Note que existe uma diferença na cor dos frames, que agora estão verdes, ao contrário do azul arroxeado do Tweening Motion (ou Motion Tween). Mas preste muita atenção:
Você só pode criar esse efeito com desenhos que não foram convertidos em símbolo!!!
Então, não converta seus desenhos em movie clip, graphic ou button se quiser produzir esse efeito!
Aí está, mais um tutorial simples que dá um efeito bastante interessante na sua animação.
DICA: tente evitar desenhos com contornos. Muitas vezes esse efeito em desenhos com contornos não “cai” muito bem. Teste para ver, ok?
Até a próxima!

Note que o helicóptero já está convertido em um movie clip.

Nossa animação terá 100 frames (quadros) e para tanto, cada deslocamento de uma extremidade a outra levará 20 frames.

Dessa forma, clique com o botão da direita do mouse sobre o frame 20 e selecione Insert Keyframe (ou utilize o atalho F8).

Selecione o helicóptero e, pressionando Shift, arraste-o com o mouse para o canto superior direito.

Agora, clique com o botão da direita do mouse sobre o frame 40 e selecione Insert Keyframe.
Feito isso, selecione o helicóptero e arraste-o para o canto inferior da direita

Crie um keyframe no frame 60 e, selecionando o helicóptero, arraste-o para o canto inferior da esquerda.

O frame 60 deve ficar como o da figura ao lado.

Faça o mesmo com o frame 80, selecione-o e insira um novo keyframe.

Depois de selecionar o helicóptero nesse frame, arraste-o para o canto superior da esquerda (no mesmo lugar onde ele iniciou).

Para o último frame da nossa animação, insira um keyframe no frame 100.

Arraste o helicóptero para o centro do palco (stage).

Agora “pedimos” ao flash para ele fazer o “trabalho sujo”. Com o botão da direita do mouse, selecione Create Motion Tween em todos os intervalos dos keyframes. Na linha do tempo (timeline) todos os keyframes ficarão ligados por flechas, como vimos nos tutoriais anteriores.

Se testarmos agora a nossa animação (Ctrl+Enter) veremos aquele looping que queríamos parar no tutorial passado. Então, mãos à obra!

Com o botão da direita do mouse, selecione Insert Blank Keyframe (ou pelo atalho F7) na camada actions.

E agora, colocaremos o actionscript que manda o flash parar o filme. Clique em Window>Actions ou use o atalho F9 para abrir o painel de ações. Certifique-se de ter selecionado o frame 100 da camada actions e escreva stop(); e teste o filme.
Pronto! Temos aí o nosso helicóptero vasculhando todos os cantos de nosso palco! Agora cabe a você pensar o que poderia ser mudado.
Dica: criando dois keyframes contíguos, podemos alterar a posição horizontal do helicóptero, fazendo com que ele só ande de frente. Tente fazer isso e veja como fica!
Até a próxima!