Se clicares com a tecla direita do rato na animação, podes ver muitas opções, como por exemplo, o zoom, o que fica muito feio, se quiseres desactivar estas opções em vez de colocares aquele código podes colocar o seguinte, assim como um background transparente:
F8 - Symbol properties: mudar para movieclip, botão ou gráfico Ctrl+b - Break apart: quando uma imagem está agrupada ou é um movieclip, botão ou gráfico, ela separa. Ctrl+L - Library: espécie de armazém, que faz uma lista dos movieclips, botões e gráficos que foram feitos e podem ou não estar a ser utilizados Ctrl+Shift+V - Paste in place: depois de teres copiado, em vez de colares, podes colar no sitio exacto onde copiaste a primeira imagem Ctrl+g - agrupar Ctrl+shift+g - desagrupar Ctrl+Alt+Shift+R - adicionar e remover régua Ctrl+Enter - este é importante, depois de salvares o ficheiro, usa esta hotkey para visualizares e publicares ao mesmo tempo a animação (salva-se em .fla e publica-se em .swf). Quando se publica vai para o mesmo local onde se salvou o ficheiro .fla
Extensões
.fla - este é o documento onde fazes e editas as animações, uma comparação que gosto de fazer é que o .jpg está para o .psd (do photoshop), assim como o .swf está para o .fla. Os ficheiros .jpg e .swf são ambos ficheiros não editáveis (bom, no .jpg podes fazer coisas, mas editar aquela própria imagem já feita com os layers e tudo não podes, é o que se sucede no .swf). O ficheiro .fla é editável (assim como o ficheiro .psd).
Apesar de na tua página de internet, só usares o .swf (assim como .jpg) e nunca os editáveis. .swf - esta é a tua animação, são estes tipos de ficheiros que colocas online.
Publicar
Vai até File > Publish Settings, e podes publicar a animação que fizeste em vários tipos de extensões.
Tem cuidado com as extensões: .gif, .jpg e .png, porque se salvares a tua animação nestes formatos podem ficar extremamente grandes (o que demora um eternidade a abrir e ser visualizada)
Se escolheres .gif, a tua animação só funcionará para o scene 1, se tiveres colocado um action como, por exemplo, um stop, ou usares um movieclip, esse formato não é capaz de ler essas coisas e especialmente, se for um botão e tiver os efeitos de over, também não será possível nesta extensão. .jpg - ficará só a primeira imagem que se vê na animação, será apenas uma imagem estática. .png - é idêntico ao .jpg windows projector (.exe) - isto é bom para cds interactivos, mas ficam muito pesados. macintosh projector - este é o mesmo que o anterior, mas em vez de ser para windows é para macintosh quick time (.mov) - ficará ainda mais pesado, e penso que se verá como uma espécie de filme. real player - o mesmo mas com o programa real player
Apenas a extensão .swf é que será um pequeno ficheiro, porque "junta" todos os objectos usados e elimina o que não interessa, o que torna muito mais leve. Mas não é editável, convem sempre guardar o .fla.
Queres fazer algo deste género com movimento? (visualizar com o internet explorer)
Começa por fazer um smilie (por exemplo), no stage. Quando fazes uma forma, como um círculo, podes eliminar o contorno clicando duas vezes nele e clicando no delete do teclado, ou mudando a cor do contorno (ver ferramentas).
No timeline, clica no alt do teclado, não largues e clica no frame com o circulozinho preto, que é o que tem o objecto que fizeste, arrasta para a frente até ao nº de frames que desejares, quanto mais frames, mais devagar será o movimento. Eu coloquei 35 frames.
Agora, no primeiro frame: existe o tal círculozinho preto no timeline, no último está um rectângulo na vertical e os outros todos estão a cinzento. Tecla direita do rato, algures nesse espaço e Create Motion Tween, agora mudou para uma espécie de azul a picotado. Vai até ao último frame e tecla direita do rato: Insert Keyframe.
Em vez de picotado, está agora uma linha e uma setinha. Selecciona o último frame e coloca o objecto para o sitio que queres que ele se desloque. Salva o ficheiro e clica ctrl e enter para pré-visualizar.
Cria um novo layer para todas os actions para não ficar uma confusão. Mas depois, os actions ficarão em frames diferentes claro.
No final do flash, o frame que for o último de todos, senão for colocado um Stop, continua tudo repetidamente a dar, de volta ao inicio em loop (a não ser que seja esse o que se pretende), mas em principio convém colocar um stop no ultimo frame, por isso, seleciona-o, tecla direita do rato e insert blank keyframe, tecla direita de novo e actions:
Quando colocas uma action num frame, aparecerá a letra "a" no rectângulozinho:
Usa a "janela" da esquerda para ver cada action e selecciona a que pretendes para aparecer o actionscript todo.
Se já sabes o actionscript e não queres usar essa janela da esquerda (onde tem o basic actions, actions, operators, etc) no canto superior direito, como indica a imagem seguinte, podes depois escrever o actionscript.
Adicionei números para melhor explicar cada ferramenta.
Seleciona um objecto, ou se selecionares e arrastares, fará algo do género da imagem acima
Seleciona um objecto dentro de um movieclip ou altera algo quando está agrupado
Linhas
Seleciona partes
Vectores
Tipos de letra e texto
Círculos e formas ovais
Quadrados, rectângulos (carrega no shift para ser proporcional)
Linhas livres
Brush (pincel)
Contorno (a cor será o n° 17), clica no objecto para aparecer aquela cor, muda a cor e clica de novo o objecto para mudar de contorno. Adiciona contorno se o objecto não tiver
Paint Bucket, como noutros programas, preenche com a cor do n°18 todo um espaço
Selecção de cor
Borracha
Move o stage
Zoom: clica as vezes que quiseres com o botão esquerdo do rato para aumentar e clica no alt e botão esquerdo para diminuir.
Cor do contorno
Cor principal
As opções que vão mudando de acordo com a ferramenta selecionada, algumas não têm estas opções. Nº1: tem a escala e rotação. Nº4: magic wand and selecção de polígonos. Nº8: ângulo do canto: se escolheres 9, o rectangulo passará a ter cantos redondos. Nº9: quando desenhas uma curva ou uma linha, essa opção designa o tipo de cada uma. Nº10: tamanho e tipo de pincel. Nº12: (estás a vontade para experimentar este) Nº14: alguns tipos de borracha. Nº16: alternativa para distanciar o zoom em vez de carregar no alt como sugerido anteriormente.
Se tiveres um objecto, seleciona-o e carrega F8 ou vai até Insert > Convert to symbol. Uma caixa irá aparecer:
Uma vez mudado o objecto para um movieclip, botão ou gráfico, ele vai aparecer na Library, que é uma espécie de armazagem. Carrega CTRL+L ou vai até Window > Library. Depois de teres feito a animação ou o que queres que faças no programa, podes ir à Library e eliminar os ficheiros que não estão em uso, porque no final, vai ficar tudo uma confusão. Também se pode organizar por pastas. Existem também outras opções no canto superior direito.
Portanto, se tornaste o objecto num movieclip, clica duas vezes nele. Por causa do menu (onde está o File, Edit, View, Insert, Modify, etc.), existem dois botoões maiores: Scene 1 e Symbol 1, é o local onde te situas, estarás dentro do Symbol 1, para sair, clica no Scene 1 e voltas ao stage. Dentro do movieclip podes editar o objecto e adicionar layers, actions, motion tweens, etc. é como estar noutra especie de Stage (Scene 1), mas como uma animação acaba por se tornar muito complexa, é melhor ir organizando e fazendo movieclips.
Se tornares o teu objecto num botão em vez de movieclip, duplo clique nele, e podes, por exemplo, fazer clique com o botão direito do rato no over e insert keyframe
Podes alterar a cor do botão. Sai do botão (clica na Scene 1), cria novo layer na mesma frame onde está o botão (ou també,m funciona, se não quiseres fazer um novo layer): create blank keyframe (ou passa esta parte se não criaste o novo layer), e actions, clica no Basic Actions > getURL e por baixo existem uns espaços em branco para preencher, o URL é o link que vai abrir, como um site, se for para o exterior, não esquecer o http://, e a window é tipo o target em HTML. Escolhe _blank para abrir numa nova janela. As variables podes deixar como está, penso que seja para enviar informação escondida.
Se escolheste o expert mode em vez do normal e em vez de clicar naqueles sitios todos para as actions podes simplesmente adicionar:
on (release) {
getURL ("http://google.pt", "_blank");
}
Altera http://google.pt para o site que queres.
Depois disto tudo, podes fazer algo como o botão que está em baixo, que fiz só para exemplo, a cor normal é o azul, mas quando o rato passa por cima fica verde, se carregares e largares abre um site.
Para fazeres algo deste género, com texto ou imagens.
Comecei com esta imagem, que é apenas um texto com uma cor cinzenta.
De seguida, criei mais 14 layers (total de 15 layers), onde em todos esses layers, fui pintando uma letra de preta: Layer 01 é a imagem anterior, layer 02, é a letra P pintada de preto (e o resto cinzento), layer 03, letra P cinzenta de novo, e a R de preto e o resto cinzento, e assim sucessivamente.
Como nos mostra esta imagem, o layer 05 mostra a letra V pintada de preto. Depois no icon para saltar para o Image Ready, que está assinalado a vermelho, passa-se para esse programa.
Na figura seguinte, temos os layers e onde se vai fazer a animação. Duplica o frame, e nos layers, omite o que está seleccionado e coloca visivel o seguinte (ou o que quiseres que se veja a seguir), repete o processo para os layers todos.
Podes fazer layouts no Photoshop e quando tens de recortar bocadinhos de imagens, para não fazeres uma a uma ou com o crop, poderás utilizar a Slice tool. Consiste cortar esse mesmo layout, ou o que quer que seja, em fatias, e ele salva automáticamente todas para uma pasta.
Se fizeres, por exemplo, um layout tipo o próximo exemplo:
Para cortar cada parte e salvar todas as imagens, sem sobrar aqueles espaços se fizesses manualmente, basta pegar na slice tool:
E começar a seleccionar (clique do rato e arrastar), para editar é só alterar para a Slice Select Tool. Tem em atenção espaços que possam não ficar seleccionados, utiliza o zoom para uma melhor selecção.
No canto superior esquerdo de cada slice, aparece o nº do slice a azul. Para visualizar os slices ou omitir basta ir a View > Show Extras, ou View > Show > Slices.
Por fim, Save for Web, e podes salvar em html, onde o próprio programas fará tabelas com as imagens e o nome que se salvar esse ficheiro é o nome que ficarão todas as imagens.
Dica: para seleccionar as extensões das imagens, se elas ficarem .jpg e quiseres antes em .gif, ou vice-versa, é salvar outro ficheiro qualquer sozinho, sem slices, com essa extensão e depois voltar a esse e quando salvar ele detecta a última extensão que um ficheiro foi guardado.
Nota: é preferível não usar tabelas para o layout como o Photoshop as crias, mas é um bom comeåo. Esse código html que o photoshop cria também não é dos melhores, por não ser válido em html, um exemplo é não ter o alt="descrição" ou apenas alt="", nas imagens.
Aparte: para o efeito que está no layout, basta ver o tutorial Cristais 3d, mas o Lens Flare foi 105mm Prime, de seguida, como diz esse tutorial, Artistic > Fresco e Stylize > Extrude, neste em vez de Pyramides são Blocks e coloquei: size: 2, depth: 70, random e solid front faces.
Depois blending options > gradient overlay e selecionar um dos gradients ou fazer um e escolher o blend mode adequado.
