MXStudio » Francisco

Galeria de imagens com AS2 e XML

Francisco — Mon, 06 Oct 2008 19:03:43 +0000

Nesta galeria de imagens você move todas as imagens com o mouse e quando o passa sobre uma ela aumenta de tamanho. Obs.: a “modelo” da foto é minha princesinha!

Passo 1

Crie um novo MC (200 x 150px) para ser usado pelas fotos:

Passo 2

Arraste uma instância do MC para o Stage e nomeie-a como “moldura”.

Passo 3

Agora crie um arquivo XML com os paths (caminhos) das imagens:

Não esqueça de nomear as imagens conforme definimos no arquivo XML!

Passo 4

No primeiro frame do arquivo Flash, tecle F9 e digite o seguinte código:

//Importa duas classes que usaremos para carregar as imagens
//Estas duas linhas importam as libraries para os objetos BitmapData e Matrix,
//eles são usados para salvar as imagens no tamanho correto dentro de toda moldura (MC).

import flash.display.BitmapData;
import flash.geom.Matrix;

//Carrega o arquivo XML “imagens.xml”, de onde obteremos as imagens
var image_xml = new XML();
image_xml.ignoreWhite = true;
image_xml.load(“imagens.xml”);

//Array para os paths das imagens, nele armazenamos os caminhos das imagens
var images_path = new Array();

//Variável para nomes exclusivos dos MCs
var frames = 0;

//Quando o XML for carregado…
image_xml.onLoad = function() {
//Loop através de cada nó
for (i=0; i //Obtém path
_root.images_path[i] = image_xml.firstChild.firstChild.childNodes[i].attributes.title;
//Cria um MC para a imagem
_root.createEmptyMovieClip(“frames”+i,_root.getNextHighestDepth());
//Carrega a imagem, o primeiro parâmetro é o path, o segundo é o destino
_root.MCloader.loadClip(_root.images_path[i],_root["frames"+i]);
}
};

//

//Oculta o MC que está no Stage assim que o duplicarmos,
//mas não carrega nenhuma imagem
frame._alpha = 0;

//Cria um objeto MovieClipLoader para carregar as imagens
MCloader = new MovieClipLoader();

//Este objeto criará o Event Handler para o
//MCloader para nos avisar quando a imagem é carregada
listener = new Object();

//Anexa o Event Handler ao MCloader
MCloader.addListener(listener);

//Isto é chamado quando a imagem é carregada e…
listener.onLoadInit = function(target) {
//Cria um novo objeto BitmapData para salvar a imagem
var bmd:BitmapData = new BitmapData(500, 375);
//Obtém a escala da imagem assim que atinja o tamanho 500×375
var xscale = 500/target._width;
var yscale = 375/target._height;
//Esta matriz é usada para dimensionar
//a imagem quando nós a desenhamos no bitmap
var MT = new Matrix();
//Configura a escala da matriz com os valores entre parênteses
MT.scale(xscale,yscale);
//Desenha a imagem no bitmap e dimensiona usando a matriz
bmd.draw(target,MT);
//Loop 5 vezes para fazer 5 cópias de cada imagem
for (i=0; i<5; i++) {
//Duplica o MC
duplicateMovieClip(frame, “frame”+_root.frames, _root.getNextHighestDepth());
//Usa a variável “mc” para chamar a instância atual
mc = _root["frame"+_root.frames];
//Cria um novo MC sobre o duplicado
mc.createEmptyMovieClip(“pic”,10);
//Configura a posição deste novo MC
//Ou seja, a posição onde a imagem começa
mc.pic._x = -250;
mc.pic._y = -187.5;

//Anexa o BitmapData com a imagem

mc.pic.attachBitmap(bmd,1);
//Obtém uma escala randomica entre 2% e 7%
mc._xscale = mc._yscale=Math.random()*5+2;
//Obtém uma rotação randòmica entre 0º e 360º
mc._rotation = Math.random()*360;
//Configura o alpha proporcionalmente
//com a escala do MC
mc._alpha = mc._xscale*20;
//Configura a posição do MC randomicamente
mc._x = Math.random()*Stage.width;
mc._y = Math.random()*Stage.height;
//Event Handler para qualquer MC
mc.onEnterFrame = function() {
//Diferença entre a posição do mouse e o centro do Stage
difX = _xmouse-Stage.width/2;
difY = _ymouse-Stage.height/2;
//Move o MC proporcionalmente com suas escalas
this._x -= difX*this._xscale/100;
this._y -= difY*this._yscale/100;
//Se o mouse está sobre este MC…
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
//Altera sutilmente a escala até 100%
this._xscale = this._yscale += (100-this._xscale)/15;
//Altera sutilmente a rotação do MC até 0º
this._rotation += (0-this._rotation)/5;
//Altera sutilmente o alpha para 100%
this._alpha += (100-this._alpha)/5;
//Traz este MC para cima dos outros
this.swapDepths(_root.getNextHighestDepth());
}
//Se a imagem saiu da tela pela esquerda…
if (this._xStage.width) {
this._x -= Stage.width;
this._xscale = this._yscale=Math.random()*5+2;
this._rotation = Math.random()*360;
this._alpha = this._xscale*20;
}
if (this._yStage.height) {
this._y -= Stage.height;
this._xscale = this._yscale=Math.random()*5+2;
this._rotation = Math.random()*360;
this._alpha = this._xscale*20;
}
};
//Aumenta esta variável com uma unidade para criar novos nomes para duplicar
_root.frames++;
}
//Remove o MC que foi usado para carregar a imagem para que nós possamos usar novamente
target.removeMovieClip();

Neste código usamos um objeto chamado MCloader para carregar as imagens, ele é um objeto MovieClipLoader que usaremos para carregar todas as imagens e obter exatamente o momento em que ela é carrregada.

(Fonte: WebZo Studio, adaptado por Francisco Teodorico Pires de Souza)

Curvas com movimento do Mouse

Francisco — Mon, 16 Jun 2008 19:14:22 +0000

Objetivo:
arte-curvas-com-movimento-do-mouse1

Passo 1
Crie um novo documento no Flash (AS2).

Passo 2
No primeiro frame, copie e cole o código a seguir:

//DESENHO DE CURVA DE ACORDO COM O MOVIMENTO DO MOUSE

// cria o MC para a curva
createEmptyMovieClip(“minhaCurva”,10);
seguir = new Object();
// cria um novo objeto
//
// A função a seguir, disparada ao movimento do mouse, desenha a curva
seguir.onMouseMove = function() {
//minhaCurva.clear();
// habilite a linha acima para ver a diferença no resultado
minhaCurva.lineStyle(2,0×336600,50);
/*
A linha acima configura o estilo da linha da curva que será desenhada.
O primeiro parâmetro de lineStyle indica a espessura da linha;
O segundo parâmetro a cor da linha, em hexadecimal;
O terceiro parâmetro é o valor do alpha (transparência)
Outros parâmetros podem ser utilizados, procure maiores informações no Help do Flash.
*/
minhaCurva.moveTo(100,100);
/*
Move a posição atual do desenho para a posição x = 100 e y = 100, neste caso.
Faça um teste: altere um parâmetro de cada vez para entender melhor o seu significado.
Por exemplo: mude o x para 1000 e tecle Ctrl+Enter. Volte ao valor original e faça outro
teste alterando o valor de y.
*/
minhaCurva.curveTo(_root._xmouse,_root._ymouse,400,300);
/*
O primeiro parâmetro define a posição horizontal do ponto de controle relativo ao ponto de
registro do MC “pai”.
O segundo parâmetro, analogamente define a posição vertical.
O terceiro parâmetro esepcidfica a posição horizontal do próximo ponto de âncora relativo
ao ponto de registro do MC “pai”.
O quarto parãmetro é análogo ao anterior, mas para a posição vertical.
*/
};
// Inclui um ouvinte ao evento de mouse
Mouse.addListener(seguir);

Passo 3
Tecle Ctrl+Enter para testar.

Apêndice – Flash

Francisco — Mon, 28 Apr 2008 17:33:26 +0000

Olá, pessoal

Este artigo não deve ser considerado como um tutorial, pois seu objetivo é apenas auxiliar a execução de tarefas básicas no Flash, descritas nos tutoriais, para evitar redundâncias nos mesmos. Sempre que for necessário novos itens serão acrescentados aqui.

1. LAYERS

1.1. Criar uma layer

.: No menu, selecione Insert > Timeline > Layer ou
.: Clique no botão Insert Layer

1.2. Renomear uma layer

.: Dê um clique duplo sobre o nome dela e digite o novo nome.

1.3. Transformar uma layer em Máscara

.: Clique com o botão direito do mouse sobre a layer que deseja transformar em máscara e escolha a opção Mask. Obs.: máscara é uma espécie de janela através da qual vemos o que está por baixo da mesma.

2. FRAMES

2.1. Criar um frame

.: Clique no frame desejado com o botão direito do mouse e selecione a opção Insert frame no menu de contexto que surge ou
.: Clique no frame desejado com o botão esquerdo do mouse e selecione, no menu, Insert > Timeline > Frame ou
.: Clique no frame desejado com o botão esquerdo do mouse e tecle F5

2.2. Criar um keyframe

.: Clique no frame desejado com o botão direito do mouse e selecione a opção Insert Keyframe no menu de contexto que surge ou
.: Clique no frame desejado com o botão esquerdo do mouse e selecione, no menu, Insert > Timeline > Keyframe ou
.: Clique no frame desejado com o botão esquerdo do mouse e tecle F6

2.3. Criar um keyframe branco

.: Clique no frame desejado com o botão direito do mouse e selecione a opção Insert Blank Keyframe no menu de contexto que surge ou
.: Clique no frame desejado com o botão esquerdo do mouse e selecione, no menu, Insert > Timeline > Blank Keyframe ou
.: Clique no frame desejado com o botão esquerdo do mouse e tecle F7

3. OBJETOS

3.1. Definir propriedades do objeto

.: Com o objeto selecionado (texto, figura geométrica, etc), no painel Properties, defina as propriedades que deseja.

3.2. Desenhar retângulos

.: Selecione a Rectangle Tool (R), clique e arraste para desenhar e depois defina as propriedades desejadas no painel Properties.

Clique aqui para ver a Rectangle Tool (R)
Cliqueaqui para ver o painel Properties

3.3. Criar símbolos

No menu, selecione Insert > New Symbol (Ctrl+F8), na janela Create New Symbol, no campo Name, digite o nome do objeto e selecione no RadioBox da categoria Type o tipo desejado (Movie Clip, Button ou Graphic).

3.4. Duplicar objetos na Library

Com o painel Library aberto (Window > Library; Ctrl+L), clique com o botão direito do mouse sobre o item que deseja duplicar e escolha no menu de contexto a opção Duplicate.

Clique aqui para ver o botão Library.

4. BOTÕES

4.1. Text Tool

4.2. Rectangle Tool

4.3. Library

5. TWEENS

5.1. Criar Tween Motion ou Tween Shape

.: Clique entre os dois keyframes que deseja aplicar o tween com o botão direito do mouse e escolha, no menu de contexto, a opção desejada (Create Shape Tween ou Create Motion Tween) ou

.: Clique entre os dois keyframes que deseja aplicar o tween com o botão esquerdo do mouse e então, no painel Properties, clique no comboBox da categoria Tween selecionando o desejado ou

.: Clique entre os dois keyframes que deseja aplicar o tween com o botão esquerdo do mouse e então, no menu, navegue até Insert > Timeline > Create Shape Tween ou Insert > Timeline > Create Motion Tween, conforme desejar.

Observe que para diferenciar um do outro, o Flash utliza cores diferentes para nos frames:

Motion Tween

Shape Tween

6. ACTIONSCRIPT

6.1. Inserir código

.: Certifique-se que o frame onde será inserido o código é um keyframe, em seguida, tecle F9 para abrir o painel Actions e digite os comandos no mesmo.

Menu DropDown Animado

Francisco — Thu, 24 Apr 2008 17:42:06 +0000

Passo 1

Com um novo documento Flash aberto, começaremos criando o efeito que aplicaremos quando o mouse passar sobre (over) um item de submenu. Crie um Símbolo de MovieClip e nomeie-o como Efeito Submenu.

Passo 2

Crie uma nova layer e nomeie as duas existentes como AS e Retângulo.

Passo 3

Com o frame 1 da layer Retângulo selecionado, clique na Rectangle Tool (R) e desenhe um retângulo sem contorno (stroke) com 100px de largura e 20px de altura, posicionando-o em X: 0 e Y: 0 através do painel Properties.

Passo 4

Clique no frame 1 da layer Retângulo e altere a altura (H) do retângulo que acabamos de desenhar nela para 1 e posicione-o em Y: 10.

Passo 5

Crie um Tween Shape entre o frame 1 e 6 da layer Retângulo.

Passo 6

Crie um keyframe no frame 6 da layer AS e inclua o seguinte comando nele:

stop();

Pronto, nosso efeito MouseOver está finalizado e utilizaremos mais adiante.

Passo 7

Crie um Símbolo de Botão e denomine-o Subitem 1.

Passo 8

Crie mais uma layer e renomeie as duas agora existentes como Texto e Hit e Efeito Over. Crie novos keyframes no frame Hit da layer Texto e Hit e no frame Over da layer Efeito Over.

Passo 9

Clique no frame Up da layer Texto e Hit, selecione a Text Tool e digite o Static Text: Subitem 1, posicionando-o em X: 0 e Y: 0.

Passo 10

Clique no frame Hit da layer Texto e Hit, selecione a Rectangle Tool e desenhe um retângulo com 100px de largura e 20px de altura posicionando-o em X: 0 e Y: 0 através do painel Properties.

Passo 11

Crie um keyframe no frame Over da layer Efeito Over e arraste uma instância do MC (MovieClip) Efeito Submenu que criamos inicialmente, posicionando-o em X: 0 e Y:0.

Passo 12

Duplique o botão Subitem1 e altere seu nome e texto para Subitem2. Analogamente, crie o botão Subitem3. Agora temos 3 botões que usaremos a seguir.

Passo 13

Crie um novo símbolo MC e nomeie-o como Submenu. Crie 5 novas layers e denomine-as como: Subitem 1, Traço 1, Subitem 2, Traço 2, Subitem 3 e Base.

Passo 14

Clique no frame 1 da layer Subitem 1 e arraste uma instância do botão Subitem1 para o Stage, posicionando-o em X: 0 e Y: 0. Siga procedimento análogo para os botões Subitem2 e Subitem3, modificando apenas suas posições Y, respectivamente para 20 e 40.

Passo 15

Nas layers Traço 1 e Traço 2, com o auxílio da Line Tool (N), desenhe os traços divisórios com espessura (stroke) 1 e comprimento (W) 100. Posicione-os em X:0 e Y: 20 e X:0 e Y:40, respectivamente.

Passo 16

Com o auxílio da Rectangle Tool (R), crie um retângulo, sem contorno (stroke), com 100px de largura (W) e 60px de altura (H) no frame 1 da layer Base, posicionando-o em X: 0 e Y: 0.

Passo 17

Crie um novo símbolo MC e nomeie como Item Notícias. Crie mais uma layer e renomeie-as para Texto e Base.

Passo 18

Na layer Texto, com a Text Tool (T), insira o texto Notícias (é nosso item principal do menu) e posicione-o em X: 24 e Y: 1. Na layer Base, com o Rectangle Tool (R), desenhe um retângulo, sem contorno (stroke), com 100px de largura (W) e 20px de altura (H), posicionando-o em X: 0 e Y: 0.

Passo 19

Crie um novo símbolo MC e nomeie como Menu Notícias. Crie mais duas layers e renomeie-as para: Título, Máscara e Subitens.

Passo 20

No frame 1 da layer Título, arraste uma instância do mc Item Notícias para a posição X: 0 e Y:0. Atribua hit como nome de instância deste objeto.

Passo 21

Clique no frame 1 da layer Máscara e com a Rectangle Tool (R), desenhe um retângulo, sem contorno (stroke), com 100px de largura (W) e 60px de altura (H), posicionando-o em X: 0 e Y: 20.

Passo 22

Clique no frame 1 da layer Subitens e arraste uma instância do MC Submenu para o Stage, posicionando-a em X: 0 e Y: -60. Atribua drop como nome de instância deste objeto.

Passo 23

Transforme a layer Máscara em uma máscara.

Passo 24

Antes de prosseguirmos, vamos alterar um “pequeno detalhe”: no menu File > Publishing Settings… (Ctrl+Shift+F12), na aba Flash, altere Actionscript version para Actionscript 2.0.

Passo 25

Clique no mc Item Notícias, e altere o instance behavior para Button. A seguir, tecle F9 e digite o código a seguir:

on (rollOver) {
if (!drop.roll) {
drop.roll = true;
} else {
drop.roll = false;
}
}

Passo 26

Clique no mc Submenu, tecle F9 e digite o código a seguir:

onClipEvent (load) {
roll = false;
menu = false;
open = false;
this._visible = false;
y_start = this._y;
y_stop = 20;
y_max = y_stop+this._height;
}

onClipEvent (enterFrame) {

mouse_x = _parent._xmouse;
mouse_y = _parent._ymouse;
menu_left = this._x;
menu_right = this._x+this._width;
menu_top = 0;
menu_bottom = this._y+this._height;
if (menu_left menu = true;
} else {
menu = false;
}// end if
if ((roll || open) && (!open || menu)) {
this._visible = true;
speed = (y_max-menu_bottom)*0.500000;
if (y_stop-1 this._y = y_stop;
open = true;
roll = false;
} else {
_y = _y+speed;
}// end if
}
// end if
if (open && !menu) {
speed = (y_max-menu_bottom)*0.700000+1;
if (this._y _y = y_start;
open = false;
this._visible = false;
} else {
_y = _y-speed;
}// end if
}
// end if

Nosso item de menu está pronto para usar.

Passo 27

Vá para a Scene 1, arraste o mc Menu Notícias para o Stage, tecle Ctrl+Enter para ver o item de menu funcionando.

Utilize esse mesmo procedimento para criar os outros itens de menu, tomando o cuidado para que as bases (retângulos de fundo dos itens de menu) tenham o mesmo tamanho (aqui usamos largura 100px, lembra-se?), pois caso contrário haverá sobreposição dos itens do submenu.

Globo Rodando

Francisco — Fri, 04 Apr 2008 13:04:04 +0000

Passo 1

Abra o Flash e inicie um novo projeto com o tamanho e configurações de frame rate que desejar (eu usei 12 fps).

Passo 2

Encontre uma imagem de um globo e a importe (Ctrl+R) para o Flash. Você pode copiar a imagem a seguir, se quiser.

Passo 3

Com o globo selecionado, pressione Ctrl+B (Break Apart) para separar as partes da imagem. Crie uma nova layer acima da layer 1, selecione-a e desenhe um círculo pouco menor que o tamanho do globo.

Passo 4

Use a Selection Tool (V) e dê um clique duplo na layer 1 para renomeá-la como globo.

Passo 5

Dê um clique duplo na layer 2 e renomeie-a como mapa mundi.

Passo 6

Importe a imagem do mapa mundi a seguir para o Flash (selecione a layer mapa mundi e pressione Ctrl+R para importá-la para o Stage, ou através do menu, File > Import to Stage).

Passo 7

Pressione Alt+Shift para duplicar a imagem e reposicione-a para que fique como segue.

Passo 8

Selecione as duas imagens do mapa mundi, pressione F8 (Convert to Symbol) para convertê-las num símbolo de MovieClip.

Passo 9

Clique sobre a Selection Tool (V) e dê um clique duplo no MC no Stage. Agora você está dentro do MC.

Passo 10

Enquanto os “mapa mundis” estão ainda selecionados, pressione novamente F8 para convertê-los em um Símbolo Gráfico.

Passo 11

Clique no frame 30 e pressione F6. Então, usando o mouse ou as teclas de direção, posicione o mapa_mundi_gr como a seguir:

Passo 12

Dê um clique com o botão direito do mouse em qualquer frame entre os dois keyframes na timeline e opte por Create Motion Tween no menu de contexto.

Passo 13

Crie uma nova layer, clique no frame 30 e pressione F6 e abra o Action Script Panel (F9). Digite o seguinte código:

gotoAndPlay(1);

Passo 14

Volte para a cena principal (Scene 1).

Passo 15

Crie uma nova layer acima da mapa mundi e nomeie-a como círculo. Trave-a e oculte a layer do mapa mundi, selecione a layer 3 e clique na Oval Tool (O). Para cor de contorno (Stroke), escolha nenhuma, para cor de preenchimento (Fill) escolha uma qualquer e desenhe um círculo um pouco menor que o círculo do globo. Selecione a layer círculo e a converta em uma máscara (clique com o botão direito do mouse sobre ela e escolha a opção correspondente)

Passo 16

Oculte a layer mapa mundi.

Passo 17

Crie uma layer acima da layer círculo e nomeie-a como brilho.

Passo 18

Selecione novamente a Oval Tool (O), desenhe um círculo com aproximadamente 100×30 pixels posicionado sobre o globo. Com o círculo ainda selecionado, abra o Color Mixer Panel (Shift+F9) e configure como segue:

Passo 19

Tecle Ctrl+Enter para ver o efeito final.

(Fonte: FlashFridge)

Movimento Aleatório

Francisco — Tue, 04 Mar 2008 00:00:00 +0000

MOVIMENTO ALEATÓRIO

Passo 1Importe uma imagem (File > Import > Import to Stage) e a converta em um MovieClip (MC), para isso, clique na imagem e tecle F8 nomeando-a (preste atenção para configurar Type como MovieClip!) como desejar. Eu usei um Peão como exemplo.Passo 2

Para criar um movimento aleatório, basta incluir (ou subtrair) um número aleatório de _x e _y do nosso MC. Clique no MC (isso é muito importante, pois o código só funcionará se anexado ao MC!) e insira o seguinte código:

onClipEvent(enterFrame){
// random(7)-3 gera um número aleatório entre -3 e 3
_x+=random(7)-3; // soma ao valor inicial de _x um número aleatório entre 3 e -3
_y+=random(7)-3; // análogo ao comentário acima
}

Passo 3

Teste o MC (Ctrl+Enter) para ver o resultado:

Passo 4

Agora vamos tornar esse movimento um pouco mais suave reduzindo as trocas de direção do MC. Para isso configuraremos as variáveis de direção e incrementaremos as propriedades _x e _y com elas. Troque o código anterior pelo que segue:

onClipEvent(load){
xDir=random(3)-1; // sorteia um número aleatóriamente entre -1 e 1
yDir=random(3)-1;
}
onClipEvent(enterFrame){
_x+=xDir; // atribui o valor definido acima à propriedade _x do MC
_y+=yDir; // análogo à linha anterior
if (random(10) == 0){ // se o número obtido for igual a 0
xDir=random(3)-1; // sorteia novamente
}
if (random(10) == 0){
yDir=random(3)-1;
}
}

Passo 5

Teste o MC (Ctrl+Enter) para ver o resultado:

Observe a diferença entre os dois.

Quando você roda o MC, deve ter notado que algumas vezes ele para. Isto acontece porque o random(3)-1 retorna -1, 0 ou 1. Quando xDir e yDir são ambos iguais a 0, o MC dá uma pausa. Se você deseja que isso não aconteça, deve modificar o código anterior para o que segue:

onClipEvent(load){
xDir=1;
yDir=1;
}
onClipEvent(enterFrame){
_x+=xDir;
_y+=yDir;
if (random(10) == 0){ // se o número sorteado for igual a zero
xDir*=-1; // troca o sinal do xDir atual (multiplica o seu valor por um negativo)
}
if (random(10) == 0){ // análogo ao anterior
yDir*=-1;
}
// Se nenhuma das condições for satisfeita o código simplesmente acrescenta xDir e yDir ao _x e _y, respectivamente e continua o loop.
}

Passo 6

Teste o MC (Ctrl+Enter) para ver o resultado:

Download (arquivo fonte )

(Fontes: WebDesign Library, FlashSandBox)

Painel de Torneio

Francisco — Wed, 03 Oct 2007 00:00:00 +0000

PAINEL DE TORNEIO

Veremos como construir um painel de torneio com diversas informações ocupando um pequeno espaço da tela.

Passo 1

Para economizarmos tempo, preparei o arquivo inicial com as imagens, botões, layers nomeadas, etc. Faça o download do arquivo fonte:

Arquivo fonte

Passo 2

Salve o arquivo “Painel de Torneio (Inicial).fla” como “Painel de Torneio.fla” para manter a cópia original em caso de problemas.

Passo 3

Na layer Rótulos, crie keyframes (Insert > Timeline > Keyframe; F7) nos frames 1, 2, 8 a 13.

Passo 4

Através do Painel Properties, nomeie os 8 keyframes criados como: Apresentação, Enxadristas, Classificação, Rodada1, Rodada2, Rodada3, …, Rodada5

Passo 5

Clique no frame 1 da layer Texto 1 (dentro da pasta Título, que por sua vez está dentro da pasta Apresentação) e arraste uma instância do símbolo graphic “Título do Torneio” para o Stage, posicionando-o em X: 276 Y: 154.

Passo 6

Clique no frame 1 da layer Texto 2 (dentro da pasta Título, que por sua vez está dentro da pasta Apresentação) e arraste uma instância do símbolo graphic “Etapa” para o Stage, posicionando-o em X: 330 Y: 177.

Passo 7

Clique no frame 1 da layer Texto 3 (dentro da pasta Título, que por sua vez está dentro da pasta Apresentação), clique na Text Tool (T), a seguir no Stage, digitando o seguinte texto: “10 de Fevereiro de 2007″, pocisionando como segue:

Passo 8

Clique no frame 1 da layer Texto 4 (dentro da pasta Título, que por sua vez está dentro da pasta Apresentação), clique na Text Tool (T), a seguir no Stage, digitando o seguinte texto: “Inscrições Gratuitas até 07Fe2007″, pocisionando como segue:

Passo 9

Clique no frame 1 da layer BI que está logo abaixo da layer Texto 4 e arraste uma instância do Botão Invisível da Library para o Stage. Redimensione e reposicione este botão como mostrado a seguir:

Obs.: este será o botão invisível que, quando clicado, levará o usuário ao site da Academia de Xadrez.

Passo 10

Clique no frame 1 da layer Link (está abaixo da layer BI), clique na Text Tool (T), a seguir no Stage, digitando o seguinte texto: “www.academiadexadrez.com”, pocisionando como segue:

Obs.: se achar necessário, clique na coluna do olho na layer BI para deixar o Botão Invisível “invisível” para não atrapalhar seu trabalho de edição.

Passo 11

Clique no frame 1 da layer Logo que está logo abaixo da layer Link e arraste uma instância do LOGO_06 da Library para o Stage. Reposicione-o como mostrado a seguir:

Ao final destes procedimentos, deve ter obtido algo parecido com isso:

Passo 12

Clique no frame 1 da layer Base (está logo abaixo da layer Resultados, que por sua vez está dentro da pasta Rodadas) e arraste uma instância do objeto graphic Base Maior da Library para o Stage. Reposicione-o como mostrado a seguir:

Passo 13

Na mesma layer, clique no frame 13 e tecle F5 para estender a Base Maior até o mesmo.

Passo 14

Dentro da pasta Abas, procure pela layer Apresentação. Clique no primeiro frame desta layer e arraste uma instância do objeto graphic “Base Menor” da Library para o Stage. Reposicione-o e mude sua cor como mostrado a seguir:

Passo 15

Repita esse procedimento para as layers Enxadristas, Classificação, Rodada 1, Rodada 2, …, Rodada 5, posicionando as abas como segue:

Enxadristas
X: 125 Y: 69

Classificação
X: 155 Y: 69

Rodada 1
X: 295 Y: 308

Rodada 2
X: 325 Y: 308

Rodada 3
X: 355 Y: 308

Rodada 4
X: 385 Y: 308

Rodada 5
X: 415 Y: 308

Ao final deve ter algo parecido com a figura a seguir:

Passo 16

Clique no frame 1 da layer “Letra” que está acima da layer “Apresentação” e a seguir na ferramenta Text Tool (T), para inserirmos a legenda dentro da primeira aba. Clique em qualquer lugar do Stage e digite “A”. Posicione, através do Panel Properties essa letra na seguinte posição:

Passo 17

Siga o mesmo procedimento para as layers “Letra” que estão acima das layers “Enxadristas” e “Classificação” as letras “E” e “C” nas seguintes posições:

Enxadristas (E)
X: 132 Y: 55

Classificação (C)
X: 162 Y: 55

Passo 18

Analogamente (o nome da layer agora é “Número”) vamos identificar as abas inferiores com os números das rodadas:

Rodada 1 (1)
X: 302 Y: 300

Rodada 2 (2)
X: 332 Y: 300

Rodada 3 (3)
X: 362 Y: 300

Rodada 4 (4)
X: 392 Y: 300

Rodada 5 (5)
X: 422 Y: 300

Passo 19

Clique no frame 1 da layer AS, tecle F9 para abrir o Panel Actions e digite o seguinte código:

stop();

Com isso finalizamos a apresentação. Vamos agora desenvolver a seção Enxadristas.

Passo 20

Na pasta Enxadrista 1, clique no frame 2 da layer Foto e tecle F7 para criar um keyframe. Siga o mesmo procedimento para as layers Nick, Nome, País, Rating.

Passo 21

Clique no frame 2 da layer Foto onde acabamos de criar o keyframe e arraste uma instância de “adams” para o Stage, posicionando-o em como segue:

Passo 22

Clique no frame 2 da layer Nick onde acabamos de criar o keyframe, clique em qualquer lugar no Stage e digite “ADAMS”. A seguir, clique fora do texto com o mouse e clique sobre ele novamente para posicioná-lo como segue:

Passo 23

Clique no frame 2 da layer Nome onde acabamos de criar o keyframe, clique em qualquer lugar no Stage e digite “Michael Adams”. A seguir, clique fora do texto com o mouse e clique sobre ele novamente para posicioná-lo como segue:

Passo 24

Clique no frame 2 da layer País onde acabamos de criar o keyframe, clique em qualquer lugar no Stage e digite “Inglaterra”. A seguir, clique fora do texto com o mouse e clique sobre ele novamente para posicioná-lo como segue:

Passo 25

Clique no frame 2 da layer Rating onde acabamos de criar o keyframe, clique em qualquer lugar no Stage e digite “2755″. A seguir, clique fora do texto com o mouse e clique sobre ele novamente para posicioná-lo como segue:

Passo 26

Siga os procedimentos análogos para Enxadrista 2 com as seguintes configurações no frame 3:

- Foto: anand
- Nick: ANAND (X: 147 Y: 270)
- Nome: Viswanathan Anan
- País: Índia
- Rating: 2792

Passo 27

Siga os procedimentos análogos para Enxadrista 3 com as seguintes configurações no frame 4:

- Foto: kasim
- Nick: KASIMDZHANOV (X: 105 Y: 270)
- Nome: Rustam Kasimdzhanov
- País: Uzbequistão
- Rating: 2683

Passo 28

Siga os procedimentos análogos para Enxadrista 4 com as seguintes configurações no frame 5:

- Foto: kasparov
- Nick: KASPAROV (X: 128 Y: 270)
- Nome: Rustam Kasimdzhanov
- País: Uzbequistão
- Rating: 2849

Passo 29

Siga os procedimentos análogos para Enxadrista 5 com as seguintes configurações no frame 6:

- Foto: kramnik
- Nick: KRAMNIK (X: 134 Y: 270)
- Nome: Vladimir Kramnik
- País: Rússia
- Rating: 2769

Passo 30

Siga os procedimentos análogos para Enxadrista 6 com as seguintes configurações no frame 7:

- Foto: morozevich
- Nick: MOROZEVICH (X: 117 Y: 270)
- Nome: Alexander Morozevich
- País: Rússia
- Rating: 2758

Passo 31

Na pasta Navegação, clique no frame 3 da layer Recua e arraste uma instância do símbolo Button rounded grey play (X: 400 Y: 280). Use o Modify > Transform > Flip Horizontal para inverter o sentido da seta. A seguir clique no frame 7 e tecle F5 para estender os frames desta layer.

Passo 32

Na pasta Navegação, clique no frame 2 da layer Avança e arraste uma instância do símbolo Button rounded grey play (X: 431 Y: 280). A seguir clique no frame 6 e tecle F5 para estender os frames desta layer.

Passo 33

Na pasta Navegação, clique no frame 3 da layer BI acima da layer Avança e arraste uma instância do símbolo Botão Invisível (X: 384 Y: 267). A seguir clique no frame 7 e tecle F5 para estender os frames desta layer.

Passo 34

Na pasta Navegação, clique no frame 2 da layer BI acima da layer Recua e arraste uma instância do símbolo Botão Invisível (X: 416 Y: 267). A seguir clique no frame 6 e tecle F5 para estender os frames desta layer.

Vamos agora preparar as abas desta seção…

Passo 35

Clique na layer Apresentação (dentro da Pasta Abas), clique no frame 2, tecle F6, clique na aba que surgiu no Stage e configure, no Panel Properties, a propriedade Color como None. A seguir, clique no frame 13 e tecle F5.

Passo 36

Clique no frame 13 da layer Letra que está acima da layer Apresentação e tecle F5 para estender os frames até ele.

Passo 37

Clique no frame 2 da layer BI que está acima da layer Letra e tecle F7 para criar um keyframe. Arraste uma instância do Botão Invisível (X: 97 Y: 49) para este keyframe. A seguir, selecione o frame 13 desta layer e tecle F5.

Vamos agora configurar a aba Enxadristas…

Passo 38

Clique no frame 8 da layer Enxadristas (3 layers abaixo da layer Apresentação que acabamos de configurar) e tecle F6 para copiar o keyframe. A seguir, selecione o frame 13 e tecle F5.

Passo 39

Clique no frame 2 da mesma layer, tecle F6 e altere a propriedade Color, no Panel Propertie para Tint (#CCCCCC).

Passo 40

Clique no frame 13 da layer Letra (que está acima da layer Enxadrista) e tecle F5.

Passo 41

Arraste uma instância do Botão Invisível para o frame 1 da layer BI (acima da layer Letra do passo anterior) e posicione em X: 127 Y: 49. Clique no frame 8 e tecle F6. A seguir no frame 13 e tecle F5. Selecione o frame 2 e crie um keyframe em branco teclando F7.

Vamos agora configurar a aba Classificação…

Passo 42

Clique no frame 9 da layer Classificação (3 layers abaixo da layer Enxadristas que acabamos de configurar) e tecle F6 para copiar o keyframe. A seguir, selecione o frame 13 e tecle F5.

Passo 43

Clique no frame 8 da mesma layer, tecle F6 e altere a propriedade Color, no Panel Propertie para Tint (#CCCCCC).

Passo 44

Clique no frame 13 da layer Letra (que está acima da layer Classificação) e tecle F5.

Passo 45

Arraste uma instância do Botão Invisível para o frame 1 da layer BI (acima da layer Letra do passo anterior) e posicione em X: 157 Y: 49. Clique no frame 9 e tecle F6. A seguir no frame 13 e tecle F5. Selecione o frame 8 e crie um keyframe em branco teclando F7.

Vamos configurar a aba Rodada 1…

Passo 46

Clique no frame 10 da layer Rodada 1 (está dentro da pasta Abas) e tecle F6. A seguir, selecione o frame 13 e tecle F5.

Passo 47

Clique no frame 9 da mesma layer, tecle F6 e altere a propriedade Color, no Panel Propertie para Tint (#CCCCCC).

Passo 48

Clique no frame 13 da layer Número (que está acima da layer Rodada 1) e tecle F5.

Passo 49

Arraste uma instância do Botão Invisível para o frame 1 da layer BI (acima da layer Letra do passo anterior) e posicione em X: 297 Y: 295. Clique no frame 10 e tecle F6. A seguir no frame 13 e tecle F5. Selecione o frame 9 e crie um keyframe em branco teclando F7.

Passo 50

Configure as outras rodadas de maneira análoga à anterior. Você pode se basear onde estão os keyframes observando a figura:

Posições dos Botões Invisíveis das Rodadas:

Rodada 2 (X: 327 Y: 295)
Rodada 3 (X: 357 Y: 295)
Rodada 4 (X: 387 Y: 295)
Rodada 5 (X: 417 Y: 295)

A codificação para navegar através dos enxadristas vamos inserir posteriormente, ok? Vamos configurar a seção Classificação…

Passo 51

Na layer Título (está na pasta Cabeçalho Comum), clique no frame 8 e tecle F7, então arraste uma instância do símbolo graphic Título de Torneio para o Stage (X: 270 Y: 105). Clique no frame 13 e a seguir tecle F5.

Passo 52

Siga procedimento análogo para posicionar uma instância do símbolo graphic Etapa (X: 324 Y: 127).

Passo 53

Na pasta classificação, preencha as respectivas layers com Static Texts posicionando o texto como segue:

Observação: acostume-se a colocar cada objeto em sua respectiva layer, pois é a melhor maneira de se trabalhar.

Passo 54

Crie um keyframe nos frames número 8 das layers BI, Link e Logo que estão dentro da pasta Classificação e arraste uma instância do LOGO_06 da Library para o frame 8 da layer Logo (X: 91 Y: 85). Digite o texto “www.academiadexadrez.com” no frame 8 da layer Link (X: 101 Y: 276). Arraste um Botão Invisível para o frame 8 da layer BI, redimensionando-o para W: 170 H: 205 e reposicione para X: 91 Y: 85. A seguir, selecione os frames 13 destas 3 layers (clique no primeiro, segure o Shift e clique no último) e tecle F5.

Passo 55

Descendo um pouco mais, encontramos a layer Título e Resultados, que está sob a pasta Rodadas. Crie keyframes nos frames 9 dessas layers e em cada uma digite o texto correspondente:

Siga o mesmo procedimento nos frames 10 a 13 e insira, respectivamente, o seguinte conteúdo:

Passo 56

Vamos renomear os Botões Invisíveis através do Panel Properties com seus respectivos nomes:

apresentacao_bt
enxadristas_bt
classificacao_bt
r1_bt
r2_bt
r3_bt
r4_bt
r5_bt
academia_bt (BI do logotipo)

Passo 57

Volte para a layer AS e digite o seguinte código no primeiro frame:

stop();
//
academia_bt.onRelease = function(){
getURL(“http://www.academiadexadrez.com”,_blank)
}
apresentacao_bt.onRollOver = function(){
gotoAndPlay(“Apresentacao”);
}
enxadristas_bt.onRollOver = function(){
gotoAndPlay(“Enxadristas”);
}
classificacao_bt.onRollOver = function(){
gotoAndPlay(“Classificacao”);
}
r1_bt.onRollOver = function(){
gotoAndPlay(“Rodada1″);
}
r2_bt.onRollOver = function(){
gotoAndPlay(“Rodada2″);
}
r3_bt.onRollOver = function(){
gotoAndPlay(“Rodada3″);
}
r4_bt.onRollOver = function(){
gotoAndPlay(“Rodada4″);
}
r5_bt.onRollOver = function(){
gotoAndPlay(“Rodada5″);
}

Faça uma cópia deste código nos frames 2 a 13 da layer As.

Passo 58

No frame 2 da layer AS, acrescente ao final do código as seguintes linhas de comando:

avanca_bt.onRelease = function(){
nextFrame();
}

Nos frames 3 a 6, acrescente:

avanca_bt.onRelease = function(){
nextFrame();
}
recua_bt.onRelease = function(){
prevFrame();
}

E no frame 7, apenas:

recua_bt.onRelease = function(){
prevFrame();
}

Pronto, já pode gerar o swf e navegar pelo painel.

Carregar swf externo com AS3

Francisco — Tue, 04 Sep 2007 00:00:00 +0000

CARREGAR SWF EXTERNO COM AS3

Neste tutorial veremos como carregar um swf externo com o AS3, pois o LoadMovie não é mais suportado nesta versão do ActionScript.

O logotipo é o swf externo que foi carregado dentro de um outro swf que denominei “carregador”.

Passo 1

Crie um novo documento Flash (fla) com as dimensões 550×400 px.

Passo 2

Crie uma layer e nomeie as duas do seu arquivo como “AS” e “Fundo”.

Passo 3

Selecione o primeiro frame da layer “AS” (clique nele), abra o painel Actions (tecle F9) e digite o seguinte código:

// cria uma instância do Loader
var carregador:Loader = new Loader();
// armazena na variável “arquivo” o nome do swf externo a ser carregado
var arquivo:String = “arquivoExterno.swf”;
// cria uma instância do URLRequest, que carregará o swf armazenado na variável “arquivo”
var requisicao:URLRequest = new URLRequest(arquivo);
// define onde o swf exteno será carregado
carregador.x = 175;
carregador.y = 80;
// Carrega o swf solicitado
carregador.load(requisicao);
// Inclui o swf carregado no Stage
this.addChild(carregador);

Passo 4

Crie um novo documento Flash com as dimensões 200×237 e salve-o com o nome “arquivoExterno.swf”.

Passo 5

Insira uma imagem qualquer (pois é apenas um exemplo) e gere o swf (Ctrl+Enter).

Passo 6

Gere o swf do carregador.fla (Ctrl+Enter) e verá que o “arquivoExterno.swf” foi carregado na posição definida por nós.

Download dos arquivos

Controle de Movimento de Objeto com Botão

Francisco — Thu, 16 Aug 2007 00:00:00 +0000

CONTROLE DE MOVIMENTO DE OBJETO COM BOTÃO

Veremos como criar movimento de um objeto via actionscript assim como seu controle através de botões (Direita, Esquerda, Pare).

Passo 1

Abra um novo documento Flash.

Passo 2

Tecle Ctrl+J (ou selecione Modify > Document). Configure o Frame rate de seu filme para 16 fps (frames per second). Defina #E1EDFF como cor de fundo e clique em OK.

Passo 3

Importe uma figura para servir como objeto a ser movimentado no filme. Para fazer isso, navegue pelo menu até File > Import > Import to Stage… (Ctrl+R)

Passo 4

Redimensine a imagem, se for necessário, com a Free Transform Tool (Q). Clique sobre a Selection Tool (V), selecione o objeto (no meu caso o Cavalo), tecle F8 (para convertê-lo em um símbolo de MovieClip).

Passo 5

Posicione uma instância do cavalo_mc como indicado abaixo:

Passo 6

Clique nos frames 16,17 e 34 e pressione F6 no teclado para criar keyframes.

Passo 7

Volte para o frame 16, selecione a Selection Tool (V) e posicione o cavalo_mc como segue:

Passo 8

Clique sobre a Selection Tool (V) e a seguir no frame 16 e pressione Ctrl+C (Copy). Então, clique no frame 17, pressione a tecla delete no teclado e depois tecle Ctrl+Shift+V (Paste in Place).

Passo 9

Ainda no frame 17, selecione a Free Transform Tool (Q), pressione e segure a tecla Shift e inverta a orientação do cavalo (seu perfil, pois agora faremos a volta do movimento).

Obs.: outra alternativa para obter o mesmo efeito é, com o cavalo selecionado, no menu optar por Modify > Transform > Flip Horizontal.

Passo 10

Clique na Selection Tool (V) e a seguir no frame 17 e tecle Ctrl+C (Copy). Então, clique no frame 34, pressione a tecla delete e depois disto, Ctrl+Shift+V (Paste in Place).

Passo 11

Ainda no frame 34, clique na Selection Tool (V) e posicione o cavalo na posição mostrada a seguir:

Passo 12

Clique com o botão direito do mouse em qualquer frame entre o 1 e o 16 e escolha, no menu de contexto o Create Motion Tween. Sigaa o mesmo procedimento entre os frames 17 e 34.

Passo 13

Crie 3 novas layers abaixo da layer Cavalo e a nomeie como: Botão Direita, Botão Esquerda e Botão Parar. Coloque os botões criados por você nas respectivas layers.

Obs.: crie a arte para estes botões como desejar.

Passo 14

Com a Selection Tool (V), clique uma vez no botão “Parar” para selecioná-lo e abra o Action Script Panel (F9). Então, insira o seguinte código:

on (release) {
stop();
}

Passo 15

Selecione o botão “Direita” e insira o seguinte código:

on (release) {
gotoAndPlay(“Direita”);
}

Passo 16

Selecione o botão “Esquerda” e insira o seguinte código:

on (release) {
gotoAndPlay(“Esquerda”);
}

Passo 17

Crie uma nova layer acima da layer Cavalo e nomeie-a como Rótulos.

Passo 18

Clique no frame 2 da layer Rótulos, crie um keyframe (F6) e no Properties Panel (Ctrl+F3), digite no campo Frame: Direita.

Passo 19

Clique no frame 2 da layer Rótulos, crie um keyframe (F6) e no Properties Panel (Ctrl+F3), digite no campo Frame: Direita.

Passo 21

Clique no primeiro frame desta layer e insira o seguinte código através do Actions panel (F9):

stop();

Passo 22

Clique no frame 16 e faça o mesmo que o passo anterior para que o filme pare ao chegar neste frame.

Passo 23

Teste seu filme com Ctrl+Enter.

Download (arquivo fonte )

(Fonte: FlashVault)

Colocando objetos no Stage (Display Object)

Francisco — Thu, 16 Aug 2007 00:00:00 +0000

COLOCANDO OBJETOS NO STAGE (DISPLAY OBJECTS)

Este tutorial mostrará como desenhar objetos em MCs usando a Drawing API e colocando-os no Stage.

Passo 1

Crie um novo arquivo fla e nomeie-o como desejar. No campo Document class do painel Properties, digite exemplo (vamos definir essa classe a seguir, portanto, ignore a janela com mensagem de erro que surgirá).

Passo 2

Crie um arquivo as e nomeie-o como exemplo.as. Salve-o na mesma pasta em que salvou o arquivo fla que o usará!

Passo 3

Digite o seguinte código nele:

class=“codigo”>package{
import flash.display.MovieClip;
public class exemplo extends MovieClip{
// Não esqueça que o nome da classe e nome da função deve ser o mesmo nome do nome do arquivo “.as”, neste caso, “exemplo”
public var mc1:MovieClip = new MovieClip();
public var mc2:MovieClip = new MovieClip();
/*

Duas variáveis são definidas representando duas instâncias da classe MovieClip.
A definição de variáveis antes da definição de funções as tornarão acessíveis para todas as funções dentro da classe.
Tornando-as públicas, também serão acessíveis através de códigos externos à classe também.
Observa a sintaxe para a definição das variáveis:
var nome_variavel : tipo_variavel = valor;
mc1 e mc2 representarão dois MovieClips
*/

public function exemplo (){
// Define a função principal da classe, Esta função sempre será executada.
mc1.graphics.lineStyle(1);
mc1.graphics.beginFill(0xff0000);
mc1.graphics.drawCircle(100,100,50);
/*

Desenha um círculo (com borda preta, 1 px de espessura e preenchido com vermelho)
O método drawing é o mesmo da versão anterior do AS, mas observe qeu ele está agora na classe Graphics.
Entretanto a sintaxe é:
MovieClip.graphics.drawingAPI_methods;
Se você não não usou Drawing API em versões anteriores do AS, sugiro que você leia algo a respeito.
Você encontrará informações sobre o assunto (classe Graphics) no LiveDocs.
*/

this.addChild(mc1);
/*

addChild é um novo comando introduzido no AS3.
Objetos que serão mostrados agora são armazenados em uma lista.
addChild incluirá novos objetos da lista.
O objeto inserido mais recentemente na lista é posicionado no topo da lista, ou seja é mostrado em primeiro plano.
Neste caso, como o retângulo (veja a seguir) é inserido depois, ele aparecerá em primeiro plano.
Não existem mais MovieClip.depth ou MovieClip.swapDepths.
Para aprender mais sobre o assunto leia sobre DisplayObjectContainer.
Em outras palavras, você pode considera “Colocando objetos no Stages.fla” é o MovieClip raiz (root) onde incluímos
o mc1 (círculo)no Display List deste MC (root)
*/

mc2.graphics.lineStyle(1);
mc2.graphics.beginFill(0xffff00);
mc2.graphics.drawRect(100,100,150,100);
/*

Desenha um retângulo (borda preta, 1 px de espessura e preenchido com amarelo) no MC mc2 e o inclui no Display List.
Quando for mostrado, o mc2 estará em primeiro plano, à frente do círculo.
*/

this.addChild(mc2);
}
}
}

Passo 4

Tecle Ctrl+Enter para gerar o swf do seu arquivo fla e obterá um resultado como a seguir: