Escolar Documentos
Profissional Documentos
Cultura Documentos
ÍNDICE
ÍNDICE .......................................................................................................................................... 2
INTRODUÇÃO .............................................................................................................................. 3
A série............................................................................................................. 3
01 – MUDANDO O CURSOR DO MOUSE .................................................................................. 3
02 – ANIMAÇÃO COM GUIAS ..................................................................................................... 5
03 – MÁSCARAS COM BORDAS................................................................................................ 9
04 – O SENHOR BATATA ......................................................................................................... 11
05 – MUDANDO A COR DO CLIPE DE FILME ......................................................................... 15
06 – COLISÃO DE MOVIE CLIPS .............................................................................................. 18
07 – BANNER EXPANSÍVEL ..................................................................................................... 22
08 – ANIMAÇÕES ...................................................................................................................... 26
9 – RELÓGIO ANALÓGICO ....................................................................................................... 30
10 – CRIANDO UM EFEITO DE FOGO ..................................................................................... 34
CONCLUSÃO ............................................................................................................................. 38
2
INTRODUÇÃO
Atualmente é muito comum encontrar material que ensine a utilizar um software
em seu computador, basta apenas dedicação e você passa a conhecer sua
interface, seus botões e menus.
Alguns materiais como os do Apostilando.com “casam” a explicação com
exemplos reais. Mas para quem está começando muitas vezes isso é
insuficiente.
Então nós do Apostilando.com, criamos uma série chamada TRUQUES
MÁGICOS. A composição da série será de apostilas para você que já baixou
nossas apostilas e precisa exercitar a criatividade.
Cada material da série trará dentro de um determinado software dicas e
exemplos de uso do software, reforçando assim seu aprendizado sobre ele e
despertando sua criatividade. Obrigado e tenha um bom curso.
A série
A série em sua primeira edição 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 ações. Adicione a seguinte ação.
//esconde o cursor do mouse
Mouse.hide()
//Define a ação 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 botão direito no primeiro frame e escolha Create Motion Tween.
No Flash CS4 e CS5 esta opção cria a animação em linha azul. Caso
queira manter a mesma forma que era criada antes use a opção Create Classic
Tween.
5
Clique no quadro 10 e mude seu texto de posição. Observe que será traçado 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.
Você pode também usar a ferramenta Subselection Tool para manipular os nós
.
Podemos também 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 também fique mascarada.
04 – O SENHOR BATATA
11
programação. O que não é nosso foco.
O exemplo a seguir será a criação de uma versão em Flash do Clássico
Senhor Batata.
Inicialmente desenhe as partes de seu boneco de forma separada.
12
olhos_btn.onPress=function(){
startDrag(this);
}
//função 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 também a boca possa ser movida.
boca_btn.onPress=function(){
startDrag(this);
}
//função que para o arrasto ao soltar o mouse
boca_btn.onRelease = function(){
stopDrag();
}
13
startDrag(this);
}
//função que para o arrasto ao soltar o mouse
olhos_btn.onRelease = function(){
stopDrag();
boca_btn.onPress=function(){
startDrag(this);
}
//função que para o arrasto ao soltar o mouse
boca_btn.onRelease = function(){
stopDrag();
chapeu_btn.onPress=function(){
startDrag(this);
}
//função que para o arrasto ao soltar o mouse
chapeu_btn.onRelease = function(){
stopDrag();
nariz_btn.onPress=function(){
startDrag(this);
}
//função que para o arrasto ao soltar o mouse
nariz_btn.onRelease = function(){
stopDrag();
14
}
orelhadir_btn.onPress=function(){
startDrag(this);
}
//função que para o arrasto ao soltar o mouse
orelhadir_btn.onRelease = function(){
stopDrag();
orelhaesq_btn.onPress=function(){
startDrag(this);
}
//função que para o arrasto ao soltar o mouse
orelhaesq_btn.onRelease = function(){
stopDrag();
}
Crie novos elementos para seu jogo.
15
Crie três botões que mudarão as cores do Movie Clip.
Instancie os botões
16
Vamos agora adicionar a ação para nossos botões.
vermelho_btn.onPress=function(){
17
//aplica a mudança de cor
colorir.setRGB(0xFF0000);
}
verde_btn.onPress=function(){
//aplica a mudança de cor
colorir.setRGB(0x00CC00);
}
18
Crie uma camada chamada ações.
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
dinâmico 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 EXPANSÍVEL
O Banner Expansível é, a principio, um full banner (468x60) comum, porém,
quando o usuário passa o mouse em cima do mesmo, ele se expande, criando
uma boa interação e mostrando informações adicionais.
22
Faça um retângulo que será o fundo do seu banner. Faça um retângulo de
468x84, sem bordas. Converta-o em botão. Depois o arraste para a área Hit do
Botão.
on (rollOut) {
_root.gotoAndStop(1);
}
Crie uma nova camada. Arraste para baixo do botão e nela adicione uma
imagem.
23
Adicione uma nova camada a nomeie para actions e adicione uma ação
stop();.
Crie um quadro chave no quadro 15 e adicione outra ação stop. Para a camada
da imagem crie uma animação do quadro 10 ao quadro 15 que faça com que a
imagem desapareça em um alpha 0.
Na cena Rollover adicione a imagem ou texto que será parte de sua animação.
No quadro 1 ela deve ficar na parte superior e no quadro final de sua animação
deverá estar em toda a tela.
24
Crie uma camada para o botão invisível. Desenhe um retângulo que cubra todo
o palco converta-o em botão e deixe-o no quadro hit.
Clique sobre ele e pressione F9 para abrir o painel de ações. Digite
on (rollOut) {
gotoAndStop("cena1", 1)
}
on (release) {
getURL('www.apostilando.com.br', '_blank')
}
Para finalizar crie uma camada de ações e no último quadro adicione uma ação
stop();
25
08 – ANIMAÇÕES
Para quem já esta acostumado com o Flash sabe que para que uma animação
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 símbolo.
Crie um quadro chave no quadro 50 e crie uma animação de movimento
clássica (Botão direito do mouse em qualquer parte da animação e depois
Classic Tween).
Até aqui processo normal. Mas e se seu quisesse que ele fizesse um efeito de
frenagem e aceleração. O primeiro pensamento é que de criar novos quadros
chaves e mudar o objeto manualmente.
26
Não é preciso. Clique em qualquer parte de sua animação fora dos quadros
chaves.
Junto ao local onde se podem trabalhar os valores do Easy, temos um lápis
para podermos manipular o efeito.
Clique no lápis.
27
Para testar é preciso clique em OK e pressionar CTRL+ENTER.
Caso queira mudar a animação, basta mudar os pontos de posição. Para
retornar ao modo normal clique no botão RESET.
O Próprio Flash possui alguns efeitos prontos que vem a facilitar seu processo
de animação.
28
Será mostrado um painel com modelos de animação que você pode adicionar
aos seus símbolos. Bastam apenas estar com seu símbolo selecionado, depois
clicar sobre a animação desejada e clicar em Apply.
Será feito todo o caminho de sua animação.
29
9 – RELÓGIO ANALÓGICO
Neste exemplo vamos criar um relógio analógico.
Inicie um novo filme do Flash com ActionScript 2
Desenhe uma circunferência que será o fundo de nosso relógio.
Depois crie uma nova camada e acrescente os números do relógio. 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 símbolo e nomeie-o para minutos. Depois o edite e mude a sua
cor e tamanho.
31
Crie uma camada chamada minuto e posicione o símbolo em seu relógio.
32
Repita todo o processo para o ponteiro dos segundos.
Selecione os três ponteiro e chame o painel de alinhamento desmarque a
opção de alinhar ao palco e depois clique no alinhamento central.
33
Faça o mesmo para os demais ponteiros.
Crie uma nova camada chamada ações e dentro dela adicione.
//looping de animação
onEnterFrame = function() {
//cria a variável tempo do tipo Date
tempo = new Date();
//define a rotação 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 circunferência 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 ação.
//declara a variável
var copia:Number =1;
//loop de animação
_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.
CONCLUSÃO
38