Arquivo

Textos com Etiquetas ‘Flash’

Sistema de partículas

25, novembro, 2009 BUENO Sem comentários

Assunto:

Desenvolvendo uma aplicação simples de partículas.

ActionScript:

Versão 3.0

Instruções Adicionais:

  1. Crie um novo Arquivo Flash AS3
  2. Primeiramente vamos criar um pequeno círculo que posteriormente será nossa particula.
  3. Transforme o círculo em um Movie Clip (F8), de nome “Bola”.
  4. Exclua o Movie Clip “Bola” do palco, repare que agora ele está apenas na biblioteca (Ctrl + L).
  5. Salve o arquivo como “particulas.fla”.
  6. Agora vamos criar a classe externa que irá controlar as particulas. Crie um novo Arquivo Actionscript (File -> Actionscript File “.as”) e insira o código abaixo:
    1. Repare que ao criarmos a classe, dizemos que ela vai herdar tudo que a classe Movie Clip contiver (extends MovieClip). Com isso, podemos acessar propriedades e métodos contidos no Movie Clip e nossa classe Particulas será uma filha da classe Movie Clip.
    2. Tenha o cuidado para salvar o arquivo na mesma pasta que o arquivo “particulas.fla”, salve com o mesmo nome descrito na classe (fique atento para as letras maiusculas e minusculas, isto também infuencia), no caso, “Particulas.as”.
  7. Código da classe “Particulas.as”:

    1. package{
    2.  
    3. import flash.display.*;
    4.  
    5. public class Particulas extends MovieClip{
    6. // Variáveis
    7. public var velocidadeX:Number;
    8. public var velocidadeY:Number;
    9. public var rotacao:Number;
    10.  
    11. // Metódo contrutor, inicializador da classe
    12. public function Particulas(){
    13. velocidadeX = 0;
    14. velocidadeY = 0;
    15. rotacao = 0;
    16. }
    17.  
    18. // Função de atualizar as variáveis
    19. public function atualizador(){
    20. this.x+=velocidadeX;
    21. this.y+=velocidadeY;
    22. this.rotation+=rotacao;
    23. }
    24. }
    25. }

    Continuação das Instruções Adicionais:

  8. Abra o arquivo “particulas.fla”.
  9. Depois precisamos que o Movie Clip “Bola” é do tipo Particulas, para isso, abra a biblioteca pressionando <Ctrl+L> e clique com o botão direito do mouse sobre o Movie Clip “Bola”, selecione “Propriedades”. No painel das propriedades do símbolo deixe como na figura abaixo (clique na imagem para ampliar).
  10. Particulas

  11. Assim, toda as vezes que instanciarmos um Movie Clip do tipo bola ele já trará todas as funções e métodos da classe “Particulas.as”.
  12. Após isso, apenas nos resta colocar o código para criar estas partículas e aplicar as funções presentes na classe. Segue abaixo o código.

Código AS3:

  1. import Particulas;
  2.  
  3. // Variaveis
  4. var pTotal:int=1000; //Total de partículas
  5. var aParticulas:Array=[];
  6.  
  7. // Registro de Eventos
  8. stage.addEventListener(Event.ENTER_FRAME, _anima);
  9.  
  10. //Funções
  11. function _anima(e:Event):void {
  12.  
  13. if (aParticulas.length<pTotal) {
  14. var bola_mc:Bola = new Bola();
  15. addChild(bola_mc);
  16. bola_mc.velocidadeX=Math.random()*10-5;
  17. bola_mc.velocidadeY=Math.random()*10-5;
  18. bola_mc.rotacao=Math.random()*90-10;
  19. bola_mc.x=stage.stageWidth/2;
  20. bola_mc.y=stage.stageHeight/2;
  21. aParticulas.push(bola_mc);
  22. }
  23.  
  24. for (var i:int = 0; i<aParticulas.length; i++) {
  25. aParticulas[i].atualizador();
  26. }
  27. }

DOWNLOAD:

Sistema de Partículas (56)

Alterando o ponteiro do mouse com perspectiva

23, outubro, 2009 BUENO Sem comentários

Assunto:

Alterando o ponteiro do mouse com perspectiva.

ActionScript:

Versão 2.0 e 3.0

Instruções Adicionais:

1. Inicie um novo arquivo.

2. Crie um objeto que será o novo ponteiro do mouse e converta-o em movieclip.

3. Instancie-o como cursor.

4. Caso estiver trabalhando com actionscript 2, cópie e cole o código AS2 no movieclip cursor, se não, crie uma nova layer com o nome action e cole o código do AS3.

5. Pronto, Ctrl+Enter.

Código AS2:

  1. onClipEvent(load){
  2.  Mouse.hide();
  3. }
  4. onClipEvent(enterFrame){
  5.  _x = _root._xmouse;
  6.  _y = _root._ymouse;
  7.  _rotation = _root._xmouse/Stage.width*100;
  8. }

Código AS3:

  1. import flash.display.Stage;
  2. import flash.ui.Mouse;
  3. import flash.events.*;
  4.  
  5. Mouse.hide();
  6.  
  7. // criando o event listener
  8. addEventListener(Event.ENTER_FRAME, fncOnEnterFrame);
  9. function fncOnEnterFrame(evt:Event):void {
  10.  cursor.x= mouseX;
  11.  cursor.y= mouseY;
  12.  cursor.rotation = mouseX/stage.stageWidth*100;
  13. }

DOWNLOAD:

Arquivos Fonte (37)

Centralizando MovieClips no Stage

23, outubro, 2009 BUENO Sem comentários

Assunto:

Centralizando movieclips atacados da biblioteca no Stage.

ActionScript:

Versão 2.0

Instruções Adicionais:

1. Inicie um novo arquivo.

2. Crie um quadrado e converta-o em movieclip.

3. Instancie-o na biblioteca como posicao.

4. Nomeie a primeira layer como action.

5. Precione F9 para acessar o console de actions e cole o código abaixo.

6. Pronto, Ctrl+Enter.

Código:

  1. var palavra = "BUENO";
  2.  
  3. var posInicial = 0;
  4. var comprimento = 0;
  5. var distancia = 10;
  6.  
  7. for (i=1; i<=palavra.length; i++) {
  8.  attachMovie("posicao","mcPosicao"+i,i);
  9.  comprimento += _root["mcPosicao"+i]._width+distancia;
  10. }
  11.  
  12. posInicial = (Stage.width-comprimento)/2;
  13.  
  14. for (j=1; j<=palavra.length; j++) {
  15.  _root["mcPosicao"+j]._x = j*(_root["mcPosicao"+j]._width+distancia)+(posInicial-(_root["mcPosicao"+j]._width/2)-5);
  16.  _root["mcPosicao"+j]._y = Stage.height/2;
  17. }

DOWNLOAD:

Arquivo fonte (22)

Limitando o campo de digitação (Input Text)

14, outubro, 2009 BUENO Sem comentários

Assunto:

Limitando o campo de entrada de texto.

ActionScript:

Versão 2.0

Instruções Adicionais:

1. Inicie um novo arquivo.

2. Crie um campo dinâmico no Stage e instancie-o com o nome desejado.

3. Redimencione este campo para o tamanho desejado e aplique as formatações de texto.

4. Crie uma nova layer e nomei-a como action.

5. Precione F9 para acessar o console de actions e cole o código abaixo substituindo o nome_do_campo.

6. Pronto, Ctrl+Enter.

Código:

  1. // Ouvinte que é executado a cada notifição efetuada no campo em questão
  2. nome_do_campo.onChanged = function() {
  3.  // Efetua uma conferência, que quando a rolagem do texto for maior do que 1 ele removerá o último carácter digitado
  4.  while (this.maxscroll>1) {
  5.   this.text = this.text.substr(0, this.text.length-1);
  6.  }
  7. };

Criando gráficos dinâmicos a partir de dados obtidos de um XML

14, outubro, 2009 BUENO Sem comentários

Assunto:

Metódo para criar gráficos dinâmicos utilizando dados obtidos de um XML.

ActionScript:

Versão 2.0

Código AS:

  1. #include "mc_tween2.as"
  2. import mx.effects.Tween;
  3.  
  4. corpo0._alpha = 0;
  5.  
  6. System.useCodepage = true;
  7. var graf_xml:XML = new XML();
  8. graf_xml.ignoreWhite = true;
  9. graf_xml.onLoad = function(ok:Boolean) {
  10.  if (ok) {
  11.   trace("Arquivo XML encontrado.");
  12.   gerarGrafico(this.firstChild.childNodes);
  13.  } else {
  14.   trace("Arquivo XML não encontrado.");
  15.  }
  16. };
  17. graf_xml.load("grafico.xml");
  18.  
  19. function gerarGrafico(xmlNode) {
  20.  var len:Number = xmlNode.length;
  21.  var total:Number = 0;
  22.  var perc:Number = 0;
  23.  for (i=1; i<len; i++) {
  24.   this.corpo0.duplicateMovieClip("corpo"+i,getNextHighestDepth());
  25.   this.texto0.duplicateMovieClip("texto"+i,getNextHighestDepth());
  26.  }
  27.  for (a=0; a<len; a++) {
  28.   total += parseInt(xmlNode[a].childNodes[0].childNodes);
  29.   this["corpo"+a].valor = parseInt(xmlNode[a].childNodes[0].childNodes);
  30.   this["corpo"+a]._x = (this.corpo0._x)+(a*(this["corpo"+a]._width+20));
  31.   this["corpo"+a]._alpha = 0;
  32.   this["corpo"+a]._yscale = 0;
  33.   this["corpo"+a].id = a;
  34.   this["texto"+a]._x = this["corpo"+a]._x+(this["corpo"+a]._width/2)-(this["texto"+a]._width/2);
  35.  }
  36.  for (j=0; j<len; j++) {
  37.   perc = Math.round((this["corpo"+j].valor*100)/total);
  38.   this["corpo"+j].perc = perc;
  39.   this["corpo"+j].alphaTo(100,0.3);
  40.   this["corpo"+j].tween = new Tween(this["corpo"+j], 100, perc, 1500);
  41.   this["corpo"+j].enabled = false;
  42.   this["corpo"+j].onTweenUpdate = function(p) {
  43.    _root["texto"+this.id].s_txt.text = this.perc+"%";
  44.    if (this.perc<0) {
  45.     _root["texto"+this.id]._y = this._y+this._height+_root["texto"+this.id]._height;
  46.    } else {
  47.     _root["texto"+this.id]._y = this._y-this._height;
  48.    }
  49.    this._yscale = p;
  50.   };
  51.   this["corpo"+j].onTweenEnd = function(p) {
  52.    this.onTweenUpdate(p);
  53.    this.enabled = true;
  54.   };
  55.  
  56.   this["corpo"+j]._color = new Color(this["corpo"+j]);
  57.  
  58.   this["corpo"+j].onRollOver = function() {
  59.    this._color.setTransform({rb:204, gb:0, bb:0});
  60.    this.onRelease = function() {
  61.     titulo_txt.text = xmlNode[this.id].childNodes[1].childNodes;
  62.     valor_txt.text = "QTDE: "+xmlNode[this.id].childNodes[0].childNodes+" - PORCENTAGEM: "+this._yscale+"%";
  63.     desc_txt.text = xmlNode[this.id].childNodes[2].childNodes;
  64.    };
  65.   };
  66.   this["corpo"+j].onRollOut = this["corpo"+j].onReleaseOutside=function () {
  67.    this._color.setTransform({rb:0, gb:0, bb:0});
  68.    info_txt.removeTextField();
  69.   };
  70.   this["corpo"+j].tween.easingEquation = mx.transitions.easing.Elastic.easeOut;
  71.  }
  72. }

Código XML:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <grafico>
  3.  <dado>
  4.   <valor>235</valor>
  5.   <titulo>TITULO1</titulo>
  6.   <desc>DESCRICAO1</desc>
  7.  </dado>
  8.  <dado>
  9.   <valor>150</valor>
  10.   <titulo>TITULO2</titulo>
  11.   <desc>DESCRICAO2</desc>
  12.  </dado>
  13.  <dado>
  14.   <valor>183</valor>
  15.   <titulo>TITULO3</titulo>
  16.   <desc>DESCRICAO3</desc>
  17.  </dado>
  18. </grafico>

DOWNLOAD:

Arquivo fonte (43)

Utilizando a classe Selection

14, agosto, 2009 BUENO Sem comentários

Assunto:

A classe Selection permite que você defina e controle o campo de texto no qual está localizado o ponto de inserção, ou seja, o campo que possui o foco. Os índices do intervalo de seleção são baseados em zero (por exemplo, a primeira posição é 0, a segunda é 1 e assim por diante).

Não há nenhuma função construtora para a classe Selection, pois só pode haver um campo focalizado por vez.

ActionScript:

Versão 2.0

Código:

  1. //especifica a formatação da caixa de texto
  2. formata = new TextFormat();
  3. with (formata) {
  4.  //definição de fonte
  5.  font = "Verdana";
  6.  //atribuindo o estilo negrito
  7.  bold = true;
  8.  //atribuindo tamanho 13
  9.  size = 13;
  10.  //atribuindo cor preto
  11.  color = 0000000;
  12.  //incorporando caracteres
  13.  embedFonts = true;
  14. }
  15. //cria o campo TextField
  16. this.createTextField("campo",1,100,100,200,20);
  17. //determina o tipo como entrada (input)
  18. campo.type = "input";
  19. //determina a suavição de bordas para avançado
  20. campo.antiAliasType = AntiAliasType.ADVANCED;
  21. //ativa a borda do campo
  22. campo.border = true;
  23. //determina o máximo de caracteres permitido no campo
  24. campo.maxChars = 15;
  25. //toda vez que o campo (input) recebe um evento (teclado/mouse) ele aplica a formatação no mesmo.
  26. campo.onChanged = function() {
  27.  this.setTextFormat(formata);
  28. }
  29. //cria uma variavel para armazenar a informação selecionada
  30. var trecho:String;
  31. var selecao = new Object();
  32. selecao.onMouseUp = function() {
  33.  trecho = "";//limpa a váriavel que armazena o que foi selecionado
  34.  numInicial = Selection.getBeginIndex();//pega onde o texto selecionado inicia
  35.  numFinal = Selection.getEndIndex();//pega onde o texto selecionado termina
  36.  trecho = campo.text.substring(numInicial, numFinal);
  37.  trace(trecho);
  38. }
  39. Mouse.addListener(selecao);

Randomizar array utilizando prototype

14, agosto, 2009 BUENO 1 comentário

Assunto:

Propriedade; em função de construtor, a propriedade prototype refere-se a um objeto que é o protótipo da classe construída. Cada instância da classe que é criada pela função de construtor herda todas as propriedades e métodos do objeto protótipo.

ActionScript:

Versão 2.0

Código:

  1. Array.prototype.randomize = function() {
  2.  return this.sort(function (a, b) {
  3.  return (Math.floor(Math.random() * 2) == 0) ? 1 : -1;
  4.  });
  5. };
  6.  
  7. myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  8.  
  9. trace(myArray.randomize());

FadeIn e FadeOut

13, agosto, 2009 BUENO Sem comentários

Assunto:

Efeito FadeIn e FadeOut da classe TransitionManager.

ActionScript:

Versão 3.0

Código:

  1. import fl.transitions.*;
  2. import fl.transitions.easing.*;
  3. var clique:Number=0;
  4.  
  5. var bt:MovieClip = new MovieClip();
  6. bt.graphics.beginFill(0x000000);
  7. bt.graphics.drawRect(-25, -25, 50, 50);
  8. bt.graphics.endFill();
  9. bt.x=stage.stageWidth/2;
  10. bt.y=stage.stageHeight/2;
  11. addChild(bt);
  12.  
  13. var mc:MovieClip = new MovieClip();
  14. mc.graphics.beginFill(0xFF0000);
  15. mc.graphics.drawRect(-100, -100, 200, 200);
  16. mc.graphics.endFill();
  17. mc.x=stage.stageWidth/2;
  18. mc.y=stage.stageHeight/2;
  19. addChild(mc);
  20.  
  21. bt.addEventListener(MouseEvent.CLICK, mouseOverBox);
  22. function mouseOverBox(event:MouseEvent):void {
  23.     if (clique==0) {
  24.         clique=1;
  25.         TransitionManager.start(mc, {type:Fade, direction:Transition.OUT, duration:3, easing:Strong.easeOut});
  26.     } else {
  27.         clique=0;
  28.         TransitionManager.start(mc, {type:Fade, direction:Transition.IN, duration:3, easing:Strong.easeOut});
  29.     }
  30. }

Migração do ActionScript 2 para ActionScript 3

13, agosto, 2009 BUENO Sem comentários