Animated Symbols

[Dranix]

Olá mundo fake.
Já pensaram se para fazer um personagem andar em uma gif você só precisa-se escolher o square e ele vai?
Ou então que para fazer uma magia você só precisa-se colar uma única imagem no fireworks e ela se anima sozinha?

Bem podemos fazer isso com os fodões, mágicos, sagazes e supimpas Animated Symbols

Mas antes de irmos ao tutorial vocês precisam no mínimo saber fazer uma fake no fireworks, se você já sabe vá direto ao tutorial se não leia no mínimo esse tutorial:

A Bíblia - Fazendo Fakes usando o Fireworks - COMPLETO!
Descrição: Ensina a fazer fakes usando o programa Macromedia Fireworks.
- Criado por Zephirdd

Bem, vamos ao tutorial

Char Andando

Observem essa gif:

É o meu personagem andando 13 squares, o que daria trabalho pra caralho, certo?

Mas você pode fazer isso em apenas alguns segundos.
E se você quiser fazer ele andar 100 squares demoraria o mesmo tempo.

Agora chega de enrolar vamos ao que interessa.

Para começar você precisa abrir o fireworks criar um documento e colar seu char parado:

Alinhe ele no centro do square junto com sua lifebar.

Depois selecione as duas imagens (char e lifebar) e aperte Ctrl+Alt+Shift+Z assim as duas imagens vão se unir.


Depois duplique o frame:

Alinhe seu char dando o passo 1 no mesmo square em que ele estava parado.

Agora selecione o personagem e a lifebar e aperte Ctrl+Alt+Shift+Z para uni-los também, depois com a imagem unida ainda selecionada aperte Alt+Shift+F8

Vai abrir uma janela assim:

Nessa janela você pode selecionar os comandos que vão fazer o personagem andar.
Deixa eu explicar:

Só vamos usar os comandos com os quadrados verdes, o resto vocês podem esquecer.

Vamos entender para que cada um serve:

Você vai configurar eles nessa ordem: Move, Frames, Direction

Move:Aqui você vai definir o quanto o char vai andar, para começar você escolhe quantos squares o char vai andar e multiplica o numero por 32, ou seja:
Se o char vai andar 1 square o numero é 32
Se o char vai andar 2 squares o numero é 64
Se o char vai andar 3 squares o numero é 96
Se o char vai andar 4 squares o numero é 128
E assim por diante.

Frames:Como o nome diz é o número de frames que a animação vai durar, para definir o número você tem que pegar o número que você colocou no move e dividir por 4, ou seja:

Se o numero é 32 você coloca 8
Se o numero é 64 você coloca 16
Se o numero é 96 você coloca 24
Se o numero é 128 você coloca 32
E assim por diante.

Direction:Aqui é a direção para qual o personagem vai andar é só você clicar que você descobre as direções facilmente, de qualquer jeito fiz uma rosa dos ventos com as direções para ninguém se atrapalhar:

Fácil não é?
Configure tudo ao seu gosto e depois clique em ok provavelmente vai aparecer uma janela assim:

É só clicar ok e pronto.

Vá ao ultimo frame e duplique ele, procure o square em que o personagem vai parar de andar e alinhe o seu char parado:

Agora volte para o primeiro frame e de play, vai estar mais ou menos assim:

Sim ele não esta andando só deslizando, agora vamos dar o movimento a ele.

Volte ao frame 2 ele vai estar assim:

De um clique duplo no char, mas tem que ser exatamente no char cuidado para não clicar naquelas bolinhas.

Uma nova aba no fireworks vai se abrir:

Nela você vai encontrar seu char assim:

Agora essa parte é bem fácil, duplique o frame e vá ao frame 2 (ainda nessa aba que se abriu)

Depois clique no lugar que essa imagem indica:

(aonde esta o X vermelho)

Vai ficar assim:

E o seu char vai aparecer meio transparente:

Agora pegue o seu char dando o passo 2 já com a lifebar alinhada e posicione a lifebar dele por cima da outra, desta maneira:

Pronto é só clicar em done:

Agora de volta ao documento antigo vá até o frame 1 de play e:

TAM DAM

Pronto seu char pode andar quantos squares você quiser com muita facilidade.

Magias

Aqui vamos nós com a segunda parte do tutorial

Antes de tudo observem esta imagem:

É uma magia de explosão ocupando 64 squares, já pensaram em quanto tempo ia demorar pra fazer isso?

Sim muito tempo, mas do mesmo jeito que se pode usar os Animated Symbols para fazer o personagem andar você pode usar para fazer magias.

E é bem fácil, primeiro de tudo você precisa escolher a magia que vai usar você pode encontrar todas as magias e várias outras coisas neste topico.

Depois de escolher a magia vamos abrir o fireworks e o paint.
Eu vou usar como exemplo esta magia:

O primeiro passo é pegar a magia escolhida e colar ela no paint, deixe ela sozinha em um canto para você não se atrapalhar.

Como vocês sabem a animação de uma magia é composta de varias imagens, que juntas formam o efeito completo da magia, cada magia pode ter um numero diferente de imagens, a que eu vou usar no tutorial tem 8:

Pegue a imagem número 1 e a mande para o fireworks.

Use a Magic Wand Tool para remover os espaços em branco, porem você tem que deixar os espaços rosa.

Agora selecione a magia no fireworks e aperte alt+shift+F8.

Essa mesma janela vai se abrir:

Assim como para fazer o personagem andar, nós só vamos usar alguns comandos:

Agora para configurá-los é simples:

Move:Já que você não quer que a magia se mova, deixe como 0.

Frames:Lembram que cada magia tem um número de imagens?

No caso da explosão é 8 então você coloca 8 nos frames, porém se você usar outra magia o número pode ser diferente.

Então, o meu vai ficar assim:

Clique em OK, e assim como você fez com o char, na magia você vai dar um duplo clique(cuidado pra não clicar naquelas bolinhas).

Essa mesma aba vai se abrir:

Agora se você olhar lá pra baixo vai ter um botão assim:

Clique no Fit Canvas, a tela vai diminuir e vai ficar do exato tamanho da magia.

Agora ao invés de duplicar os frames você vai adicionar frames em branco:

Vai abrir uma janela para adicionar frames, não clique em nada, só altere o número.

Para saber que número colocar você tem que se lembrar do número de imagens da magia:

A minha tem 8 então vou colocar 7:

Lembrando que você tem que colocar sempre um número a menos que o total de imagens.

Clique em ok.

Agora o arquivo tem 8 frames, o primeiro está com a imagem número da magia.

Eu sei que eu já mostrei essa imagem umas 500 vezes ._. mas...

Pegue a imagem de número 2 e cole no frame 2.
Cole a imagem número 3 no frame 3.
E assim por diante.
Lembre-se de usar os espaços rosa para saber onde alinhar.

Volte ao frame 1 e verifique se a animação esta correta.

Se estiver tudo certo pegue a Magic Wand Tool e tire os espaços rosa de todos os frames:

Depois é só clicar no botão done:

Pronto você fez um Animated Symbol da magia.

Agora vamos Aprender como colocar ele no mapa da fake.

Primeiro faça um cenario e coloque grids de 32x32 de uma cor forte, de preferência vermelho.

Eu vou fazer um cenário bem simples já que é só pra demonstrar mesmo:

Agora coloque o Animated Symbol da magia no cenário.
E lembre que quando você colocar essa mensagem vai aparecer:

Agora copie o seu cenário para os outros frames que apareceram.


Para saber como alinhar a magia você tem que dar um zoom:

Esta vendo esses pontos azuis?

Eles tem que estar sempre no lugar onde duas grids se cruzam.

Agora de play e:

Pronto, uma explosão.

Agora se você quer colocar mais explosões você tem que duplicar a imagem.
Mas atenção, para duplicar a imagem você não pode usar o ctrl+c ctrl+v
você seleciona a magia e aperta ctrl+shift+D.

Agora pode colocar explosões onde quiser:

Simples não é ?

Agora vou dar uma dica muito útil você tem que reciclar seus Animated Symbols

Ou seja se você já fez uma magia em forma de Animated Symbol você pode salvar ela, assim da na sua próxima fake ela via estar pronta para o uso.



Agora não perca a próxima parte do tutorial que vou ensinar a fazer água, fogo, magma, energy fields, e outras coisas se animarem sem você ter que trocar a imagem toda hora

Se alguém tiver alguma duvida (provavelmente vão ter é um tutorial complicado) podem me adicionar no msn:

[email protected]

ou mandar uma MP.

[Dranix]

Char passando por baixo de Elementos do cenário.

Como de costume vamos começar com uma imagem:

Olha que perfeição, o char passando por debaixo de várias coisas e a sua lifebar por cima, talvez alguns de vocês não saibam mas isso em uma fake faz toda a diferença.

Para começar faça um cenário que tenha coisas que o personagem possa passar por baixo:

(Como de costume fiz um cenário simples só pra servir de exemplo.)

E depois faça seu char andando em alguns lugares:

Agora você precisa da imagem separada de tudo que vai ficar acima do char, mas como?

Bem cada um tem seu jeito, vou ensinar o meu aqui e se gostarem podem usar:

Mini-Tutorial
Retirando partes do cenário no Map Editor

Esse método só funciona no Remere Map Editor, primeiro ache esse tile:

Ele costuma ficar na paleta grounds dentro da paleta RAW.

Usando ele como chão faça um quadrado do exato tamanho do seu cenário, e nele coloque todos objetos que ficam acima do char, na mesma posição do cenário original:

Passe esse cenário de fundo vermelho para o Fireworks e com a Magic Wand Tool retire o fundo vermelho:

Para funcionar melhor deixe a tolerance como 25:

Pronto, você tem a imagem recortada.

Agora já com a imagem recortada, coloque ela sobre o seu cenario e alinhe tudo de um jeito que fique impossivel perceber que são 2 imagens:

La encima na janela de layers deve estar assim:

Lembrando que você tem que distribuir o cenário e a outra imagem para o resto dos frames.

Se você der play, vai estar assim:

Você deve estar se perguntando:

Ué, mas eu coloquei a imagem acima do Animated Symbol e mesmo assim ficou por baixo?

Pois é :/

Os Animated Symbols tem esse problema, eles tem prioridade acima de todas as outras imagens do layer, mas, já que é só do layer que ele está, nada nos impede de criar outro não é ?

Para começar la na aba de Layers há um botão assim:

Clique nele e depois crie um novo layer:

Uma janela assim vai se abrir:

Nela você escolhe o nome do seu layer, e sempre, mais sempre mesmo desmarque a opção Share across frames.

Quando você der OK, um novo Layer vai surgir, mude a imagem com as coisas que ficam acima do char para ele:

De play e:

Quase perfeito, só falta a life bar sobre o resto do cenário não é?

Para fazer isso faça o seguinte:

Primeiro crie um Animated Symbol da Life Bar com as mesmas configurações que você usou no seu char, alinhe esta lifebar, sobre a lifebar do seu char.

Deixe a life bar no layer 2:

Agora de play e veja a mágica:

[Vismao]

@tutorial: first part
Muito boa idéia, cara, eu vou fazer aqui, depois te mando o resultado =D

@tutorial: second part
tah legal cara! mas eu particularmente não gostei tanto, tanto, mas segue que tah ficando o legal,

AGUARDANDO THE NEXT PART! @_@

EDIT:
Resultado:


Po Dranix, tiro um peso das minhas costas, depois eu tenho umas dúvidas pra perguntar pra você por msn, me aceita lah

Ps¹: Vai ajudar bastante GIFers, mesmo!

ABRAÇOS,

Vismao!

[Tiozin]

Muito bom esse tutorial, hein???
Não sei os outros, mas eu nem fazia idéia disso :eek:
Um dos tutos mais utéis que já fizeram pra quem já manja de fakes...
Pode ser uma mão na roda para os que fazem gifs!!!
Até eu que num faço gif consegui

Nota: reparem como meu out anda marcando o ritmo com o braço >>

[Lorofous]

Muito bom. Vai ajudar bastante aqueles gifers que fazem o char andar todo desalinhado e tremendo (eu).
Parabéns.

P.S.: Essa parte dois vai ser o que? :confused:

..:: Lorofous ::..

[Dranix]

Ainda bem que todos estão gostando, realmente é muito útil, quando eu descobri isso eu comecei a fazer a fake na metade do tempo que eu fazia normalmente.

Muito bom. Vai ajudar bastante aqueles gifers que fazem o char andar todo desalinhado e tremendo (eu).
Parabéns.

P.S.: Essa parte dois vai ser o que? :confused:

..:: Lorofous ::..

Eu acho que eu vou colocar:
-Como fazer magias se animarem sozinhas
-Como fazer fogo, água, magma e outras coisas desse tipo se mexerem sem você ter que trocar toda hora.
-Como fazer o char passar por baixo de arvores, pilares ou qualquer coisa que fique acima do char de uma maneira bem facil.
-Como fazer flechas spears se mexerem de um jeito mais simples, e como fazer os danos subirem.

Se eu lembrar de mais alguma coisa eu edito aqui.

[Panike]

Dranix, ta muito bom, adorei

[Marcotonio]

Animated Symbols
Where is your god now?

Épico. Cara, é sério, você acaba de dar o passo mais importante na história do Mundo Fake desde o Fakerlab Wardrobe.

Não há mais por que aprender fakes em flash, eu queria aprender só para poder fazer Animated Symbols. Não fazia ideia de que o Fireworks possuía essa função.

É bem complexo de se aprender, mas quem estudar direitinho vai simplesmente destruir com suas próximas fakes.

Meus parabéns por dar início à nova era das gifs.

Agora será possível automatizar tudo, de maré a candelabros, de rodas de moinho a NPCs que ficam apenas andando de um lado pro outro.

Os detalhes vão crescer!

s=D|--<
Edit:

Esqueci de perguntar: pra quê serve o Fit Canvas durante a criação do Symbol da magia? Não entendi, pra mim foi um passo dispensável. =P

[Smyle]

Simplesmente ótimo!!
Excelente tutoial Dranix! Vai me ajudar muito quando eu for fazer gifs...
Fiz um teste aqui:

Mais uma vez, meus parabéns!! ^^'
APROVADO!

~Arknose

[Dranix]

Parte três postada