Henrique P.L.

Salve, galera!

Neste tutorial vou mostrar os princípios básicos de como se usar o loadMovie.

• O que é o loadMovie?

O laodMovie é uma ação que permite chamar através dele SWFs externos entre outros.

• Qual é a vantagem de utilizá-lo?

Se o site for totalmente em Flash, por exemplo, e você necessita editar apenas uma sessão.
De vez ter que abrir o SWF matriz e ir editar uma coisa pequena você já edita direto em um arquivo destinto. É muito mais prático e organizado utilizar o loadMovie, além de deixar o site um tanto mais leve, pois o computador só vai ler a sessão que a pessoa acessar.

Deu pra entender mais ou menos?

Bom, vamos começar com o Tutorial, vocês entendem melhor quando o fizer. Ele é bem simples.

O tutorial a seguir vai ser ensinado do modo que eu fiz (Tamanhos, etc.), mas façam do jeito que vocês quiserem, o importante é entender o mecanismo.

Começando

• Faça um novo arquivo com as dimensões 400x300, com o Frame Rate 60.

• Agora faça um quadrado onde você vai por todo conteúdo que vai ser chamado pelo loadMovie.



• Em uma nova camada, crie 2 links, o Link 1 e o Link 2. Transforme-os em Botão [ Button ].

• Em uma nova camada, coloque Stop(); no Frame.

• Crie uma nova camada. No primeiro Frame, deixe-o em branco. Aperte F6 para criar o Frame 2 e nele coloque um retângulo representando a área em que o arquivo externo vai aparecer.
De preferência, faça com que esse arquivo externo tenha o mesmo tamanho que o retângulo que você fez. Transforme este retângulo em um Movie Clip com o centro dele apontado na extremidade de cima da esquerda.





Neste tutorial teremos 3 Frames. O primeiro é como se fosse o site estático, sem nenhum dos links abertos. O segundo vai ser o 1º link e o terceiro Frame, o 2º.

• Crie o terceiro Frame, colocando nele o mesmo conteúdo que estava no segundo.

• Na camada onde tinhamos colocado o STOP();, coloque-o também em seu 2º e 3º Frame.

• No retângulo do 2º Frame, coloque o nome ( istância ) dele como link1. Coloque link2 no retângulo do 3º Frame.

Bom, hora de criar os SWFs externos.

• Abra um novo arquivo com as dimensões que você colocou no retângulo onde o SWF externo vai aparecer. No meu caso, 250x160. Escreva qualquer coisa neles, só para você reconhecê-los. Salve-os com os nomes de 1 e 2. Não esqueça de testá-los [ Ctrl + Enter ] para que seja criado o SWF dos arquivos.





• Voltando para o Flash principal, no Frame 2 da camada dos retângulos, coloque a seguinte action:

loadMovie( "1.swf", "link1" );

Primeiro o loadMovie chama o arquivo, em seguida o target e por último o method. ( Não vamos utilizá-lo )

• Faça o mesmo no Frame 3, só que mudando os valores:

loadMovie( "2.swf", "link2" );

Lembrando que esta action deve estar no Frame, não no conteúdo do Frame.
Vale lembrar também que para que funcione, todos arquivos devem estar na mesma pasta. Caso não estejam, é preciso colocar o endereço.

Bom, vamos apertar Ctrl + Enter e testar pra ver se tá tudo certo!

Se deu tudo certo, parabéns!
Se não deu, não desista! Estou colocando o .fla para que vocês vejam o que erraram ou só por curiosidade.

CLIQUE AQUI PARA VER O RESULTADO FINAL

Espero que tenha ajudado vocês.

Abraços,

Henrique P.L.
Usuário de Flash desde 2003

Máscara

Olá pessoal, estou aqui com o meu 3º tutorial de Flash pra vocês que estão começando ou querem saber mais ampliem seus conhecimentos.

Neste tutorial eu irei ensinar como fazer uma máscara com um exemplo prático, então vamos abrindo o Flash!

O que é Máscara?
Máscara é um objeto que determina qual parte de determinado objeto irá aparecer. Com esse exemplo prático vocês pegam o jeito.

Bom, vamos começar!

• Abra um novo arquivo, pode escolher o tamanho que quiser. Eu usei 300x300 com Frame Rate 60.

• Faça um retângulo com borda de 1 ou 2 pxs com uma cor escura, como preto [ #000000 ] ou até um cinza escuro [ #666666 ou até #999999 ]. A cor interna pode ser um cinza claro [ #CCCCCC ].



• Selecione apenas a parte interna do retângulo ( Tudo menos a borda, a parte cinza claro ), aperte Ctrl + X para recortar, crie uma nova camada e aperte Ctrl + V para colar. Deixei a camada com a parte interna do retângulo por baixo e centralize ambas. [ Para centralizar, vá em Window/Align ]



• Com a camada da parte clara interna, crie um MovieClip e dê a ele o nome que você quiser.



• Clique duas vezes sobre ele para entrar nele e, logo em seguida, crie uma nova camada, acima da do conteúdo, com um retângulo achatado abaixo do retângulo principal, igual ao da figura abaixo. Ah, e faça um Motion Tween nele. [ Se você não sabe fazer um Motion Tween, clique aqui ]



• Em ambas camadas, aperte F6 para criar um novo frame e arraste-os até mais ou menos o frame 115. ( Eu sou meio exagerado ).



• No frame 115, na camada do retângulo achatado, use a ferramente Free Transform [ Q ] e puxe-o verticalmente até ficar do mesmo tamanho do retângulo principal. O retângulo que era achatado, durante esses 114 frames, vai se esticar aos poucos.



• Agora a parte mais importante: clique com o direito na camada do MovieClip ( A parte onde contém o nome da camada ) e clique em Mask [ Máscara ].



Você pode observar que agora a camada de baixo está contida na de cima, só vai aparecer alguma coisa da camada do conteúdo o que estiver sendo visto na de cima, é como a fechadura de uma porta, você só vê o que a fechadura permite.

Se você testar seu filme você vai ver uma animação mais ou menos igual a essa:

>• Clique aqui para ver a animação

Tirando o fato que a sua não irá retornar, só vai ir e ficar no loop, caso não tenha colocado um stop(); no último frame.

A máscara pode ser usada também em Preloaders ( Carregadores ) e muitas outras coisas.
Outro exemplo de máscara:

• Jarra

Bom, eu acho que é basicamente isso, espero ter ajudado vocês e que vocês tenham aprendido mais uma coisa!

Abraços,

Henrique P.L.
Usuário de Flash desde 2003

Alô, pessoal!
Estou aqui para ajudar vocês a entenderem o poder que cada ferramenta do Flash tem e vou dar-lhes uma noção de como usá-las.
Basicamente, vou dar uma resumo do que são as ferramentas a seguir:



Vamos dar uma olhada em suas opções também e vamos ver a função dos dois "quadrados de cor".

Bom, então vamos começar.

1 - Arrow Tool ( Seta ) - Tecla de Atalho: V
A função do Arrow é selecionar os objetos ou pelo menos parte deles por meio de clique ou por meio de área [ Segura-se o mouse e puxa-se até seleciona a área desejada ].

2 - Subselection Tool ( Subseleção ) - Tecla de Atalho: A
Esta ferramenta possui a capacidade de modificar a forma dos objetos, como círculos e objetos criados pela ferramenta Pen ( Ferramenta 05 ).
Para usá-la é necessário que você dê um clique inicial no objeto para que apareça os possíveis pontos de seleção pra daí depois sim, modificar ao seu modo.

3 - Line Tool ( Linha ) - Tecla de Atalho: N
Esta é uma ferramenta clássica que tenho certeza que vocês já usaram em algum momento da vida de vocês, seja no Paint, Power Point, Photoshop ou Fireworks.
Não tem segredo usá-la, é uma simples reta.
Você pode modificar sua grossura e cor na janela de Propriedades [ Ctrl + F3 ].

4 - Lasso Tool ( Laço ) - Tecla de Atalho: L
Demarca a área do objeto que você deseja que seja selecionada. É só traçar a área desejada para ser selecionada arrastando o mouse e unir as "pontas" da seleção no final.

E ainda possui alguns modos extras, como o Poligonal Lasso Tool que funciona como uma ferramenta Pen ( Ferramenta 05 ) só que de seleção. Esse modo se encontra na janela "Options" que fica logo abaixo das cores.

5 - Pen Tool ( Caneta ) - Tecla de Atalho: P
Com ela você determina os pontos das vértices do objeto e o modela. Depois de modelado ainda é possível mudar suas formas com a ferramenta de Subseleção ( Ferramenta 02 ).

6 - Text Tool ( Texto ) - Tecla de Atalho: T
Não há segredo em usá-la, vocês já devem tido alguma experiência com ela.
Você faz a área do texto com o mouse, no menu de Propriedades você modifica tudo o que você quer, como a fonte, seu tamanho e sua cor. Até sua direção e a distância entre as letras.

7 - Oval Tool ( Círculo ) - Tecla de Atalho: O
Cria objetos ovais, tais como o círculo, não tem segredo de como usar.
Uma dica: Para manter a medidas iguais, segure SHIFT enquanto faz o círculo.

8 - Rectangle Tool ( Retângulo ) - Tecla de Atalho: R
É o mesmo sistema que a Oval Tool, você faz do tamanho que quiser, escolhendo a cor da borda e do preenchimento.
É possível deixar as vértices do retângulos suavizadas na parte de Options usando o Round Rectangle Radius. Quanto maior for o valor colocado, maior será a curva, a suavização.

9 - Pencil Tool ( Lápis ) - Tecla de Atalho: Y
É uma ferramenta de desenho, cujo qual você pode mudar a largura e ainda tem opções de desenho, como as a seguir:



Straighten: O desenho fica "quadrado" com linhas sempre retas.
Smooth: O desenho possui suaves formas e curvas.
Ink: O desenho fica exatamente do modo que você desenhar, não há alterações.

10 - Brush Tool ( Pincel ) - Tecla de Atalho: B
É como uma Pencil ( Lápis ) só que mais variável em questão de forma.
Além de possuir várias formas, tem propriedades interessantes.



Paint Normal: Pinta normalmente toda área da tela de pintura.
Paint Fills: Pinta tudo menos as bordas.
Paint Behind: Pinta atrás dos objetos.
Paint Selection: Pinta apenas o que está selecionado.
Paint Inside: Pinta apenas a parte interna de um objeto.

11 - Free Transform Tool ( Transformação Livre ) - Tecla de Atalho: Q
Aumenta, diminui, vira, rotaciona, inverte e faz muito mais com um objeto.
Possui propriedades muito úteis.



1 - Rotate and Skew: Permite girar o objeto em até 360º.
2 - Scale: Toda transformação irá crescer proporcionalmente com essa opção ativada.
3 - Distort: Permite distorcer a imagem de um modo que dê impressão de perspectiva.
4 - Envelope: Permite modelar o objeto com diversos pontos de transformação.

12 - Fill Transform Tool ( Transformação de Preenchimento ) - Tecla de Atalho: F
Esta ferramenta permite que você altere o rumo de um degradê, tanto em posição quanto em direção. Funciona mais ou menos como um Free Transform Tool ( Ferramenta 11 ).

13 - Ink Bottle Tool ( Frasco de Tinta ) - Tecla de Atalho: S
Tem o poder de colocar borda em tudo que possa ser selecionado, é só clicar sobre o objeto e clicar. Caso, por exemplo, um círculo estiver meio selecionado, apenas a parte que não está selecionada terá borda.

14 - Paint Bucket Tool ( Balde de Tinta ) - Tecla de Atalho: K
É uma das ferramentas mais conhecidas - É o balde de tinta.
Ele pinta qualquer superfície que tenha uma área finita, ou seja, dentro da área da tela.

15 - Eyedropper Tool ( Conta-gotas ) - Tecla de Atalho: I
Ela tem o poder de "roubar" o tom das cores de todos lugares e colocá-la como "Fill Color" ( Veja cores ). Ferramenta muito útil para se tomar conhecimento de diversas cores.

16 - Eraser Tool ( Borracha ) - Tecla de Atalho: E
Uma simples borracha que pode apagar todos objeto selecionável. É possível modificar seu formato e até há algumas propriedades específicas.

17 - Hand Tool ( Mão ) - Tecla de Atalho: H
Serve como um Scroll. Ele move a página quando ela é muito grande, é só arrastar com o mouse.

18 - Zoom Tool ( Zoom ) - Tecla de Atalho: M,Z
Tem a utilidade de aumentar o tamanho da tela ou diminuir. Para aumentar, basta dar um clique. Agora para diminuir é necessário segurar Alt e dar o clique.


Cores



1 - Stroke Color ( Cor da Borda ) - Define a cor da borda do objeto e a cor do lápis.
2 - Fill Color ( Cor do Preenchimento ) - Define a cor do preenchimento ( Tudo menos a borda e o lápis ) do Objeto.

E essas são as ferramentas do nosso querido Flash! Espero que eu tenha ajudado vocês a compreenderem melhor o programa.

Abraços,

Henrique P.L.
Usuário de Flash desde 2003

Alô, galera!

Estou aqui trazendo agora um tutorial bem interativo: Como mover um Objeto pelas setas do teclado.

Neste tutorial, eu irei introduzir um ActionScript mais avançado do que de costume, um tipo de Action que eu quase não domino ainda.
O que nós iremos fazer exatamente agora é:

Criar um círculo que, ao apertar uma das setas do teclado, irá de movimentar de acordo com a direção. Queremos reproduzir as setas do teclado em desenho que, quando realmente apertar uma seta, mude a cor da seta desenhada.

Como sempre, falando parece ser muito difícil, mas vocês vão ver que não é muito.

Bom, vamos começar então. Eu acho melhor vocês seguires as instruções, depois que vocês pegarem o jeito vocês podem configurar como quiserem.

Vamos lá.

• Crie um novo arquivo com o tamanho de 500x500 com o Frame Rate 60.

• Faça um círculo de mais ou menos 100x100 de tamanho e transforme-o em um MovieClip. Dê a ele a intância ( nome ) de bola.



• Em uma nova camada, desenhe as setas do teclado e transforme cada uma, individualmente, em um MovieClip. Istancie cada uma com o nome de sua respectiva posição: baixo; cima; direita; esquerda.



• Após feito isso, entre em uma das setas e crie uma nova camada, que será nossa camada para por Actions. O MovieClip terá 3 frames: a 1ª para a tecla estática, ou seja, do jeito que ela irá ficar inicialmente; e a 2ª e 3ª para a seta quando for pressionada a seta corresponde no teclado. No primeiro frame, na camada de Actions, coloque um stop(); no primeiro frame e isole-o.



Nos dois últimos frames deste MovieClip, deixe a seta um pouco mais escura para haver diferença ao pressionar as setas.



• Pronto, agora vem o clímax deste tutorial: as Actions.

Volte para a Cena, crie uma nova camada chamada Actions e coloque a seguinte Action nela: ( Não se assustem )


bola.onEnterFrame = function () {

if (Key.isDown(Key.RIGHT)) {
direita.gotoAndPlay(2);
this._x += 5;
} else if (Key.isDown(Key.LEFT)) {
esquerda.gotoAndPlay(2);
this._x -= 5;
}

if (Key.isDown(Key.UP)) {
cima.gotoAndPlay(2);
this._y -= 5;
} else if (Key.isDown(Key.DOWN)) {
baixo.gotoAndPlay(2);
this._y += 5;
}
if (this._x<0) {
this._x = 1;
}
if (this._x>500) {
this._x = 500;
}
if (this._y<0) {
this._y = 1;
}
if (this._y>500) {
this._y = 500;
}
}

Ok, agora eu tentar explicar o que é o que aqui.

bola.onEnterFrame = function () {: Começa uma função do MovieClip com istância bola.
if (Key.isDown(Key.RIGHT)) {: Se caso ( if ) for pressionada a tecla ( Key.isDown ) para a direita ( Key.RIGHT )...
direita.gotoAndPlay(2);: Objeto de istância direita ( Seta para direita ) vai para o segundo Frame...
this._x += 5;: E o Objeto indicado ( this. ), que no caso é o MovieClip bola, anda horizontalmente ( _x ) e positivamente ( + [ + é pra direita, - pra esquerda ] ) 5 pixels.
} else if (Key.isDown(Key.LEFT)) {: Se pelo contrário ( else if ) a seta esquerda for pressionada ( (Key.isDown(Key.LEFT)) )...
esquerda.gotoAndPlay(2);: O MovieClip de istância esquerda ( A seta para a esquerda ) vai para o segundo Frame...
this._x -= 5;: E o Objeto indicado ( this. ) anda horizontalmente ( _x ) e negativamente ( -, que é igual a esquerda ) 5 pixels.

Após essas linhas terão os mesmos comandos, só que para cima e para baixo, sendo a movimentação vertical ( _y ) e - = cima e + = baixo.

if (this._x<0) {: Se o Objeto indicado ( this. ) estiver em uma posição menor que 0 ( Fora do palco da animação )...
this._x = 1;: O Objeto indicado ( this. ) vai horizontalmente para o pixel 1, ou seja, a borda.

Do mesmo modo...

}
if (this._x>500) {
this._x = 500;
}

E verticalmente também...

}
if (this._y<0) {
this._y = 1;
}
if (this._y>500) {
this._y = 500;
}

Isso serve para criar uma parede invisível, limita o espaço da bola, ela não poderá sair do palco, deu pra entender?

Bom, podem agora apertar Ctrl + Enter para testar seu filme, ele deve ficar mais ou menos assim:

• Clique aqui para ver o resultado final esperado

Espero que vocês tenham entendido isso, se tiverem qualquer dúvida, podem postar aqui.


Clique aqui para ver o .fla deste Tutorial

Abraços,

Henrique P.L.
Usuário de Flash desde 2003

Alô, pessoal!
Estou aqui com mais um tutorial básico, agora mexendo com um pouco de Action Script.
Confiram aí um efeito de RollOver e RollOut.

• O que é RollOver e RollOut?

RollOver é, resumidamente, a ação do mouse de passar o mouse em cima do objeto em que esta action estiver dentro.

RollOut é o oposto do RollOver, ou seja, é a ação do mouse ao tirá-lo do objeto em que esta action estiver dentro.

Conforme o andamente do tutorial você irão entender melhor o que eu estou dizendo.
Bom, mãos à obra:



• Crie um novo arquivo e deixe o tamanho do palco que quiser, eu deixei 250x200 no meu.

• Mude o fps de sua animação para o número que quiser, eu utilizei 60.
( Se você não sabe como fazer isso, confira meu outro tutorial, chamado "Motion Tween" )

• Faça qualquer objeto, como por exemplo um círculo ou um retângulo. Vá em Insert/Convert to Symbol [ Inserir/Converter para Símbolo ] ou F8 e crie um MovieClip. Dê istância ( nome ) à ele. Por exemplo, objeto.





• Dentro deste MovieClip, faça uma animação, do frame 1 ao que você desejar, do objeto aumentando ou diminuindo de tamanho. Depois faça o mesmo movimento só que inverso, como se estivesse voltando à sua forma original.

• Faça um novo Layer [ Camada ] e nele coloque um Stop(); no Frame 1 e no Frame em que acaba a ação dele aumentar ou diminuir. É para ficar mais ou menos assim:



• Certo, agora saindo de dentro do Movie Clip, crie uma nova camada acima da do objeto e nela, faça um retângulo de qualquer cor, não importa, pois ele não irá aparecer, ele será nossa área de clique, nosso link invisível.



• Vá em Insert/Convert to Symbol [ Inserir/Converter para Símbolo ] ou F8 e crie um Button. Em suas propriedades, deixe Alpha 0%.



• Agora chegou a hora, vamos usar um pouco de Action Script: Vá em Window/Actions [ Janela/Ações ] ou F9 e mude a janela para o Expert Mode.



• Vamos começar. Escreva:

on (rollOver) {
objeto.gotoAndPlay(2);
}
on (rollOut) {
objeto.gotoAndPlay(9);
}

Explicando:

on (rollOver) {
Ao [ on ] passar o mouse em cima. [ RollOver ]

objeto.gotoAndPlay(2);
}
MovieClip de nome "objeto" vai para a frame 2 e termina a ação [ { ]

on (rollOut) {
Ao [ on ] tirar o mouse em cima. [ RollOut ]

objeto.gotoAndPlay(9);
}
MovieClip de nome "objeto" vai para a frame 9 e termina a ação [ { ]


O número 9 que eu coloquei no "gotoAndPlay" do RollOut é da minha animação, sua pode ser um número diferente.
O que é preciso saber é que o número da frame que ter que ir é um depois do Stop();, e o 2 é invariável.
O primeiro Frame é o objeto estático, imóvel. Ao passar o mouse em cima, aquele MovieClip vai para a Frame 2, que vai rodar até o próximo Stop();, que, no caso aqui, é a Frame 9.

Para se tornar uma verdadeiro botão com função, é preciso colocar o on (release){} [ Ao clicar ].
Bom, este é para ser o resultado final, não exatamente assim, mas seguindo a idéia.

Clique aqui para visualizar o resultado final

Este efeito pode ser usado em botões que precisam de um retorno na animação após tirar o mouse e tem outras diversas funções.

Bom, eu acho que é isso, pessoal!
Espero ter ajudado vocês e até a próxima!

Abraços,

Henrique P.L.
Usuário de Flash desde 2003