Escolar Documentos
Profissional Documentos
Cultura Documentos
NDICE
NDICE .......................................................................................................................................... 2
INTRODUO .............................................................................................................................. 3
A srie............................................................................................................. 3
01 MUDANDO O CURSOR DO MOUSE .................................................................................. 3
02 ANIMAO COM GUIAS ..................................................................................................... 5
03 MSCARAS COM BORDAS................................................................................................ 9
04 O SENHOR BATATA ......................................................................................................... 11
05 MUDANDO A COR DO CLIPE DE FILME ......................................................................... 15
06 COLISO DE MOVIE CLIPS .............................................................................................. 18
07 BANNER EXPANSVEL ..................................................................................................... 22
08 ANIMAES ...................................................................................................................... 26
9 RELGIO ANALGICO ....................................................................................................... 30
10 CRIANDO UM EFEITO DE FOGO ..................................................................................... 34
CONCLUSO ............................................................................................................................. 38
2
INTRODUO
Atualmente muito comum encontrar material que ensine a utilizar um software
em seu computador, basta apenas dedicao e voc passa a conhecer sua
interface, seus botes e menus.
Alguns materiais como os do Apostilando.com casam a explicao com
exemplos reais. Mas para quem est comeando muitas vezes isso
insuficiente.
Ento ns do Apostilando.com, criamos uma srie chamada TRUQUES
MGICOS. A composio da srie ser de apostilas para voc que j baixou
nossas apostilas e precisa exercitar a criatividade.
Cada material da srie trar dentro de um determinado software dicas e
exemplos de uso do software, reforando assim seu aprendizado sobre ele e
despertando sua criatividade. Obrigado e tenha um bom curso.
A srie
A srie em sua primeira edio abordar exemplos para os seguintes
softwares:
Adobe Photoshop;
Adobe Flash
Adobe Dreamweaver
PHP
Microsoft Word
Microsoft Excel
3
Converta ele Movie Clip (F8), instancie ele como cursor_mc.
Crie uma nova camada e nomeie-a para AS. Pressione a tecla F9 para chamar
o painel de aes. Adicione a seguinte ao.
//esconde o cursor do mouse
Mouse.hide()
//Define a ao para mover o mouse
_root.onMouseMove = function(){
setProperty(cursor_mc,_x,_xmouse);
setProperty(cursor_mc,_y,_ymouse);
4
Salve seu projeto e pressione CTRL+ENTER para testar.
Clique com boto direito no primeiro frame e escolha Create Motion Tween.
No Flash CS4 e CS5 esta opo cria a animao em linha azul. Caso
queira manter a mesma forma que era criada antes use a opo Create Classic
Tween.
5
Clique no quadro 10 e mude seu texto de posio. Observe que ser traado o
caminho do objeto.
6
Ao clicar com a ferramenta Convert Anchor Point em um dos pontos da linha
poder manipular a linha como curvas de Bezier.
.
Podemos tambm substituir nosso caminho por outra forma.
Com a ferramenta Oval Tool, desenhe uma forma oval sem preenchimento e
com uma cor de contorno.
7
Com a ferramenta Free Transform Tool, incline-a.
8
Depois selecione o caminho criado anteriormente e cole a forma recortada.
Copie a elipse e crie uma nova camada. Cole a elipse no mesmo local (Edit,
Past to Place).
Mude a cor desta camada para um gradiente radial com o centro transparente
9
e um contorno opaco na mesma cor do palco.
10
Arraste a camada imagem, para que ela tambm fique mascarada.
04 O SENHOR BATATA
11
programao. O que no nosso foco.
O exemplo a seguir ser a criao de uma verso em Flash do Clssico
Senhor Batata.
Inicialmente desenhe as partes de seu boneco de forma separada.
12
olhos_btn.onPress=function(){
startDrag(this);
}
//funo que para o arrasto ao soltar o mouse
olhos_btn.onRelease = function(){
stopDrag();
}
Isso faz com que apenas os olhos possam ser movidos.
Vamos adicionar agora para que tambm a boca possa ser movida.
boca_btn.onPress=function(){
startDrag(this);
}
//funo que para o arrasto ao soltar o mouse
boca_btn.onRelease = function(){
stopDrag();
}
13
startDrag(this);
}
//funo que para o arrasto ao soltar o mouse
olhos_btn.onRelease = function(){
stopDrag();
boca_btn.onPress=function(){
startDrag(this);
}
//funo que para o arrasto ao soltar o mouse
boca_btn.onRelease = function(){
stopDrag();
chapeu_btn.onPress=function(){
startDrag(this);
}
//funo que para o arrasto ao soltar o mouse
chapeu_btn.onRelease = function(){
stopDrag();
nariz_btn.onPress=function(){
startDrag(this);
}
//funo que para o arrasto ao soltar o mouse
nariz_btn.onRelease = function(){
stopDrag();
14
}
orelhadir_btn.onPress=function(){
startDrag(this);
}
//funo que para o arrasto ao soltar o mouse
orelhadir_btn.onRelease = function(){
stopDrag();
orelhaesq_btn.onPress=function(){
startDrag(this);
}
//funo que para o arrasto ao soltar o mouse
orelhaesq_btn.onRelease = function(){
stopDrag();
}
Crie novos elementos para seu jogo.
15
Crie trs botes que mudaro as cores do Movie Clip.
Instancie os botes
16
Vamos agora adicionar a ao para nossos botes.
vermelho_btn.onPress=function(){
17
//aplica a mudana de cor
colorir.setRGB(0xFF0000);
}
verde_btn.onPress=function(){
//aplica a mudana de cor
colorir.setRGB(0x00CC00);
}
18
Crie uma camada chamada aes.
19
No exemplo usei para o documento que esta embaixo como documento, e
para os demais disquete, impressora, cd e hd.
O objetivo ser ao arrastar o documento ser escrito na caixa de texto
dinmico para onde o arquivo ser enviado.
20
}else if(documento.hitTest(impressora)==true){
trace("impressora")
resposta_txt.text="Seu documento foi enviado para a
impressora";
}else if(documento.hitTest(cd)==true){
trace("cd")
resposta_txt.text="Seu documento foi enviado para o CD";
}else if(documento.hitTest(hd)==true){
trace("hd")
resposta_txt.text="Seu documento foi enviado para seu
computador";
}
}
21
07 BANNER EXPANSVEL
O Banner Expansvel , a principio, um full banner (468x60) comum, porm,
quando o usurio passa o mouse em cima do mesmo, ele se expande, criando
uma boa interao e mostrando informaes adicionais.
22
Faa um retngulo que ser o fundo do seu banner. Faa um retngulo de
468x84, sem bordas. Converta-o em boto. Depois o arraste para a rea Hit do
Boto.
on (rollOut) {
_root.gotoAndStop(1);
}
Crie uma nova camada. Arraste para baixo do boto e nela adicione uma
imagem.
23
Adicione uma nova camada a nomeie para actions e adicione uma ao
stop();.
Crie um quadro chave no quadro 15 e adicione outra ao stop. Para a camada
da imagem crie uma animao do quadro 10 ao quadro 15 que faa com que a
imagem desaparea em um alpha 0.
Na cena Rollover adicione a imagem ou texto que ser parte de sua animao.
No quadro 1 ela deve ficar na parte superior e no quadro final de sua animao
dever estar em toda a tela.
24
Crie uma camada para o boto invisvel. Desenhe um retngulo que cubra todo
o palco converta-o em boto e deixe-o no quadro hit.
Clique sobre ele e pressione F9 para abrir o painel de aes. Digite
on (rollOut) {
gotoAndStop("cena1", 1)
}
on (release) {
getURL('www.apostilando.com.br', '_blank')
}
Para finalizar crie uma camada de aes e no ltimo quadro adicione uma ao
stop();
25
08 ANIMAES
Para quem j esta acostumado com o Flash sabe que para que uma animao
fique com um efeito legal preciso um bom tempo de trabalho. O que s vezes
at se sabe mas se esquece, que o Flash possui alguns recursos que vem a
facilitar este trabalho.
Vamos aos nossos exemplos.
Inicie um novo arquivo no Flash tipo ActionScript 3 e salve-o.
Adicione um texto ou qualquer outro objeto e converta-o em smbolo.
Crie um quadro chave no quadro 50 e crie uma animao de movimento
clssica (Boto direito do mouse em qualquer parte da animao e depois
Classic Tween).
At aqui processo normal. Mas e se seu quisesse que ele fizesse um efeito de
frenagem e acelerao. O primeiro pensamento que de criar novos quadros
chaves e mudar o objeto manualmente.
26
No preciso. Clique em qualquer parte de sua animao fora dos quadros
chaves.
Junto ao local onde se podem trabalhar os valores do Easy, temos um lpis
para podermos manipular o efeito.
Clique no lpis.
27
Para testar preciso clique em OK e pressionar CTRL+ENTER.
Caso queira mudar a animao, basta mudar os pontos de posio. Para
retornar ao modo normal clique no boto RESET.
O Prprio Flash possui alguns efeitos prontos que vem a facilitar seu processo
de animao.
28
Ser mostrado um painel com modelos de animao que voc pode adicionar
aos seus smbolos. Bastam apenas estar com seu smbolo selecionado, depois
clicar sobre a animao desejada e clicar em Apply.
Ser feito todo o caminho de sua animao.
29
9 RELGIO ANALGICO
Neste exemplo vamos criar um relgio analgico.
Inicie um novo filme do Flash com ActionScript 2
Desenhe uma circunferncia que ser o fundo de nosso relgio.
Depois crie uma nova camada e acrescente os nmeros do relgio. No
exemplo adicione apenas o 3, 6, 9 e 12, pois ficam nos centros dos objeto, se
precisar use linhas guias para auxili-lo.
Bloquei estas camadas e crie uma nova camada chamada hora, dentro dela
desenhe o ponteiro das horas. Depois o converta em Movie Clipe com ponto de
registro na parte de baixo.
30
Duplique seu smbolo e nomeie-o para minutos. Depois o edite e mude a sua
cor e tamanho.
31
Crie uma camada chamada minuto e posicione o smbolo em seu relgio.
32
Repita todo o processo para o ponteiro dos segundos.
Selecione os trs ponteiro e chame o painel de alinhamento desmarque a
opo de alinhar ao palco e depois clique no alinhamento central.
33
Faa o mesmo para os demais ponteiros.
Crie uma nova camada chamada aes e dentro dela adicione.
//looping de animao
onEnterFrame = function() {
//cria a varivel tempo do tipo Date
tempo = new Date();
//define a rotao do movie clip de acordo com as horas
hora._rotation = tempo.getHours()%12*360/12;
minuto._rotation = tempo.getMinutes()*360/60;
segundo._rotation = tempo.getSeconds()*360/60;
}
34
Em um novo projeto ActionScript2 desenhe uma circunferncia e preencha com
um gradiente radial com a cor #FFFF00 nas duas cores, apenas na cor final
determine com alpha 0.
35
Crie um quadro chave no quadro 20 e aplique um Tint preto, diminua bem seu
tamanho e sua ele.
36
Volte cena principal e adicione a seguinte ao.
//declara a varivel
var copia:Number =1;
//loop de animao
_root.onEnterFrame=function(){
//incrementa
copia++
if (copia>50){
copia=1
}
fogo_mc._x=100+Math.random()*21;
duplicateMovieClip("fogo_mc",qualquer,copia);
}
Para dar uma tom mais realista aplique um efeito de Blur em seu Movie Clip.
37
Salve seu filme e teste.
CONCLUSO
38