Swift 3D + Flash MX parte I

Animação básica usando Swift 3D e Flash
MX ,

Muitas vezes navegando pela web, achamos muitos sites feitos
em flash, com a aparencía de 3D, daí temos 2 saídas, ou
a pessoa que fez é um bom enganador, ou ele não usou somente o
Flash, aqui por exemplo faremos a primeira de muitas outras animações
usando esses dois Softwares juntos, então o primeiro passo é abrir
o nosso querido Flash MX e mãos a obra.

Nesse primeiro tutorial, vamos aprender a fazer uma imagem no
flash, exportar ela pro Swift 3D, fazer a animação por lá
e depois voltar para o Flash, e terminar de animar,
Pode dar um trabalhinho, mas o resultado final é bem satisfatório.

Vamos então desenhar um circulo no flash, na cor que vocês
escolherem, depois de desenhar esse circulo vamos clicar fora dele no palco,
pra tirar toda a seleção dele e apertaremos as teclas Ctrl + G
para formar um grupo por cima desse circulo, então na paleta de cores,
vamos escolher outra cor, e desenhatremos outro circulo dentro desse primeiro,
conforme a figura abaixo:

Agora que fizemos os dois, vamos voltar pra cena principal, clicando
alí em “Scene_1″, você notarão que os dois circulos
estarão no mesmo frame porem o verde estará agrupado e o azul
não estará, então clicaremos no circulo verde e vamos apertar
a tecla Ctrl + B para desagrupa-lo, então clocaremos no circulo azul
e logo depois no verde denovo, e deletaremos ele do palco, assim teremos aquele
circulo azul, vazado no meio, veja o exemplo:

Agora com a ferramenta de Texto, colocaremos no meio desse circulo
uma letra qualquer, pode ser a letra inicial do seu nome, no meu caso vou usar
“C” de Carneirinho, vou posicionar a letra no centro do circulo, e
apertar denovo Ctrl + B para desagrupar a fonte, pra ter esse resultado final:

Agora com essa coisa linda no palco do flash, e desagrupadas,
nós vamos clicar no menu File >> Export Image e salvar essa imagem
como “animacao” (sem aspas) e no modo de imagem, vamos escolher a
extensão para *.EPS, então ele criará essa imagem em vetor,
que com esta extensão poderá ser importada para dentro do Swift
3D, agora é hora de trabalhar no Swift, vamos abrir o Software, e criar
um novo arquivo, clicando em File >> New , logo depois vamos clicar em
File >> Import … vocês vão procurar pelo seu arquivo eps,
clicar nele e pedir para importar, ele virá assim na sua tela:

Ao clicar no nosso simbolo dentro do palco surgirá uma
telinha do lado esquerdo do Swift 3D, com a opção “Scale”,
alí estarão os valores e x, y e o fator z que não temos
no Flash MX, or padrão ele importa tudo como 1.0, mas na hora de animar,
pode ficar algo cortado dos lados, então pelo menos nos valores x e y,
abaixaremos esse valor para 0.80, conforme a figura abaixo:

Vocês vão notar que conforte vcs mudam de campo,
que ele diminui alí no palco, vai ficar um pouco menorzinho, então
quando importamos algo para o swift 3D, ele vem com todos os objetos Agrupados,
então vamos desagrupalos, clicando no menu Arrange >> Ungroup,
ou clicando no objeto no palco e apertando a tecla Ctrl + U, com ele desagrupados
agora , poderemos ver que se clicarmos na letra ou no circulo, ele mostrará
apenas um dos objetos, então vamos clicar primeiro na letra, ela aparecerá
naquela bola embaixo, onde poderemos ter a opção de rotaciona-la,
girar na horizontal, vertical ,etc. vamos primeiro fazer uma rotação
lateral, cliquem na sua letra e cliquem no botão “Lock Horizontal”
esse botão como diz o nome, ele trava todos os movimentos deixando liberado
só o horizontal, dê uma olhada no exemplo:

Do lado esquerdo com a opção “Lock Horizontal”
acionada, podemos clicar nessa bola atraz da minha letra e movimentando ela
pra esquerda e fdireita, vocês vão perceber ela se movimentando
no centro do palco, para uma melhor visualização vamos clicar
em View >> Zoom View Port >> e vamos colocar o zoom em 200%, assim
veremos a nossa letra bem grande, você vão notar que clicando nela
vai aparecer uma telinha alí do lado erquerdo assim:

Aí em Bevels, você terá um monte de coisas
interessantes pra fazer, um monte de efeitos pra ac=plicar na sua letra, clicando
alí em “Square” Vamos achar a opção Bevels, e
colocar o valor pra ela de 0.035 e apertar a tecla enter, olhando no palco,
vocês vão notar que uma quinazinha se formou nos cantos da nossa
letra:

Bacana não é mesmo?Agora continuando o nosso “Tour”
pelo software, vamor começar brincar de mudar as cores da nossa letra,
o swift já vem com muitas cores prontas, na versão 3 tem até
umas transparentes, cores de texturas, metálicas, refletivas, etc.Vocês
vão achar essas cores aqui:

Alí tem varias janelas com vários tipos de texturas
e cores, para aplicar é a coisa mais difícil do mundo, basta vc
clicar na cor e arrstar ela pra cima do seu objeto no placo, experimentem e
baguncem bem as cores da sua letrinha, olhem como a minha ficou:

Agora é hora de animar a nossa letra, em outros capitulos
vou mostrar como funciona a timeline do swift 3D, mas nesse vou mostrar algumas
animações prontas, que aliás são excelentes e as
que mais uso no Swift 3D, assim como as cores tambem temos as animações
alí no botão “Show Animations”, ao clicar nesse botão,
abrirá um monte de amostars de animações alí, no
nosso caso vamos pegar a segunda animação com oo nome de “ER
- Horizontal Right” e arrastar ela pra cima da nossa letra, aqui que fica
o painel das animações:

Como podem ver na figura acima, é a segunda animação
de cima da esquerda para a direita que escolhí para animar a minha letra,
no palco vocês notarão a mudança na timeline, indicando
que alí tem uma animação e tambem notarão que tem
um botãozinho para reproduzir a animação, se clicarem nele,
vocês já verão a sua letra se movendo.

Agora para fixar tudo o que aprendemos até agora, vamos
fazer o mesmo com o arco envolta da letra, com uma pequena diferença,
agora não vamos usar o bevels e sim o “Outer Round” esse em
vez de fazer um canto quadradinho, ele vai te fazer um canto arredondado, vamos
deixar o valor dele como 0.050 conforme a figura abaixo:

Quem quiser pode mudar a cor da argola tb, meu resultado com
a argola foi esse:

Agora por fim, falta animar tambem essa argola, vamos usar a
animação “ER – Horizontal Left” que é a primeira
que tem, e famos arrastar pra cima da argola, então quando clicarmos
na reprodução vocês verão a argola girando para um
lado e a letra para o outro, até aqui sem segredos.

Se vocês repararem ao lado daquela bola que controlamos
a posição do nosso objeto no palco, tem uma outra com dois pontos
de luz, aí vc tambem pode mover o ponto de luz enquando a animação
está rodando mesmo, para deixar a iluminação conforme desejar.

Agora é hora de exportar essa animação denovo
para o Flash MX, então lá encima teremos a janelinha “Preview
And Export Editor”, cliquem nela, no menu “Raster” teremos as
formas de importação, alí temos JPG, SWF PNG, entre outras,
mas vamos deixar como SWF, clicando em Vector, teremos a opção
“Fill Options” .Alí vocês vão escolher as opções
se querem com sobra tal, com qual preenchimento, etc.Eu aconselho por enquanto
a só brincarem com a ferramenta “Fill Options” cliquem na segunda
opção que é “Cartoon Average Color Fill”, cliquem
no segundo frame da animação, depois cliquem em “Generate
Selected Frames”, alí ele vai te gerar uma amostra do segundo frame,
porem vão notar que ele virá com uma cor meio basicona, quando
mais a cor for básica, menor será o tamanho final em Kbs, do seu
arquivo, agora apram a janelinha denovo do Fill Options, e vá na ultima
opção “Area Gradient Shading” e clique novamente em
“Generate Selected Frames”, vocês vão perceber uma diferença
boa na qualidade da imagem, porem seu arquivo vai ficar um pouquinho mais pesado,
se alguem não estiver achando a paleta ela fica aquí:

Agora que chegou no resultado que eu acho que pra mim é
o ideal, eu vou clicar no botão “Generate All Frames” para
ele gerar todos os frames da minha animação para que eu possa
exportar para o flash, em alguns computadores pode demorar até uns 10
minutos, mas é mais rápido que fazer na mão, então
vamos gerar todos os frames.

Quando terminar de exportar, ele terá tambem nessa area
um botão de reprodução pra vocês visualizarem como
ficará sua animação, se ficar como desejarem, você
podem clicar em “Export All frames” se estiverem usando o swift 3,
aparecerá pra vocês salvarem como swft, se for na versão
2, salvará como swf direto, é só dar um nome, escolher
uma pastinha e salvar.

Quem quiser pode salvar essa animação para ser
editada mais tarde, é só clicar em File >> save, e escolher
algum lugar para salvar ele com a extensão “*.t3d”, agora é
hora de voltar ao querido, Flash MX.

Podem apagar aqueles desenhos da argola com a letra, porque eles
já estão salvos como EPS, no flash vá em File >>
Export to Library, daí vocês vão importar o arquivo que
salvaram com a extensão SWFT ou SWF, ele será salvo direto na
biblioteca do flash, quadro-a-quadro como Movie Clip.

Vamos abrir a biblioteca e arrastar uma cópia desse movieclip
para o palco e fazer uma animação bem simples para testar nosso
trabalho, vamos clicar no primeiro frame e na barra de propriedades, vamos colocar
o tween para motion, e no frame 30 vamos fazer uma cópia desse frame,
clicando sobre o frame e apertando a tecla F6, então agora temos uma
cópia do primeiro frame no frame 20, vamos clicar no primeiro frame e
com a ferramenta “Freee Transform Tool”, vamos clicar no nosso movieclip
dentro do palco, ele aparecerá um monte de pontos onde vocês podem
mexer no tamanho dele, com a tecla Shift apertada, vamos encolher ele pelas
pontas, em seguida vamos clicar na ferrantenta “Arrow Tool” (seta
preta), e vamos clicar no movieclip denovo, nas propriedades, vamos abri a caixinha
“Color”, vamos até Alpha e deixaremos o valor para 0%, então
o que criamos é uma animação simples, qe vai começar
vindo transparente do fundo do palco até aparecer grande na tela, pra
finalizar, só coloquem a ação stop(); no seu ultimo quadro,
o tamanho do meu arquivo swf ficou em apenas 33k, o arquivo de vocês deverá
ser igual a esse:

Baixe aqui o fla desse exemplo zipado AQUI

Até a próxima !!!

Gustavo Henrique Carneirinho