Transição "gradient".

[yarcub]

Precisa de uma ajuda.

Eu tenho como background um gradient que gerei com o beginGradientFill.
O que queria era fazer uma transição para outro gradient (mudando apenas a cor do topo)

Instalei a nova versão do FuseKit (2.1) e fiquei com a ideia que era possível. Mas ñ consegui encontrar nada sobre isso.

Este foi o código que usei para preencher o gradient.

Código: [Seleccione]

var mc:MovieClip = this.createEmptyMovieClip("fundo",this.getNextHighestDepth());

var bgcolors:Array = [0x00A6D6, 0xFFFFFF];

drawBackground(bgcolors,mc);

button1.onRelease = function(){
   /*
   * ????
   */
}

function drawBackground(myColors:Array,mc:MovieClip){
   var wSize:Number = Stage.width;
   var hSize:Number = Stage.height;
   var fillType:String = "linear";
   var alphas:Array = [100, 100];
   var ratios:Array = [0, 255]
   var matrix:Object = {matrixType:"box", x:0, y:0, w:wSize, h:hSize, r:90/180*Math.PI};
   
   mc.lineStyle(1, 0xFFFFFF, 0);
   mc.beginGradientFill(fillType, myColors, alphas, ratios, matrix);
   mc.lineTo(wSize, 0);
   mc.lineTo(wSize, hSize);
   mc.lineTo(0, hSize);
   mc.lineTo(0, 0);
   mc.endFill();  
}

[alftuga]

hello olha isto precisa de ser melhorado mas acho que é um principio

Código: [Seleccione]


import mx.transitions.Tween;
import com.robertpenner.easing.Linear;
import flash.geom.Matrix;
//
var mc:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
//
var aCor:Object = new Object();
aCor.a1 = 0xffffff;
aCor.a2 = 0x000000;
//
var matriz:Matrix = new Matrix();
matriz.createGradientBox(200, 200, -Math.PI/2);
//
var twn1:Tween = new Tween(aCor, "a1", Linear.easeNone, aCor.a1, aCor.a2, 6000, true);
var twn2:Tween = new Tween(aCor, "a2", Linear.easeNone, aCor.a2, aCor.a1, 6000, true);
twn1.onMotionChanged = function() {
var effecto:String = "linear";
var cores:Array = new Array(aCor.a1, aCor.a2);
var alphas:Array = new Array(100, 100);
var rats:Array = new Array(0, 255);
mc.beginGradientFill(effecto, cores, alphas, rats, matriz);
mc.moveTo(0, 0);
mc.lineTo(200, 0);
mc.lineTo(200, 200);
mc.lineTo(0, 200);
mc.lineTo(0, 0);
mc.endFill();
};



[yarcub]

Oi, obrigado pelo disponibilidade.
A ideia que tinha era mais ou menos isso, fiquei confuso pq estava a tentar usar como o alvo do tween apenas o número hexadecimal. E acho que ele só aceita propriedades de objectos(?).
Não cheguei a experimentar no Fuse, mas o método deve ser o mesmo.

Acabei por apontar noutra direcção, que me parece menos exigente para o processador e mais fácil de gerir. As cores vão ser carregadas de um XML.

Criei uma classe Background que aceita no construtor a referência onde vai criar os fundos e tem como métodos:
+addBackground(gradColors:Array):Number
Aceita um array com as duas cores do gradiente, guarda num array interno.
Depois cria um mc vazio e guarda a referencia tb num array interno.
Por fim, retorna o comprimento do array.
+draw(n:Number);
Desenha o gradiente no mc que está na posicao n do array.
+bringFront(n:Number)
Coloca o mc que está na posição n e coloca-o na depth mais alta.
+clear(n:Number)
Apaga tudo o que tenha sido feito com a drawing API naquele mc.


A ideia é que quando quero trocar de fundo, trago o mc final para cima com alpha zero e depois faço um tween até 100. No final faço um clear do que estava anteriormente no topo.

É mais ou menos isto que tenho em mente.
Se tiverem umas dicas de como optimizar isto digam.  :wink:

[yarcub]

Para ficarem com uma ideia de como ficou +/-.
exemplo

Código: [Seleccione]

import com.mosesSupposes.fuse.*;

class oop.Background{
   /******************************************************************
   * PROPERTIES
   ******************************************************************/
   private var _colorsArray:Array = [];
   private var _bgArray:Array = [];
   private var _ref:Object = {};
   private var _count:Number = 0;
   private var _current:Object = {};
   /******************************************************************
   *CONSTRUCTOR
   ******************************************************************/
   function Background(ref:Object){
      ZigoEngine.register (Fuse, PennerEasing, FuseFMP);
      _ref = ref;
   }
   /******************************************************************
   * PUBLIC METHODS
   ******************************************************************/
   public function init():Void{
      _current = draw(0);
      trace("Background initialized")
   }
   
   public function addBackground(gradColors:Array):Number{
      var bgRef:Object
      bgRef = _ref.createEmptyMovieClip("bg"+_count, _ref.getNextHighestDepth());
      _colorsArray.push(gradColors);
      _bgArray.push(bgRef);
      _count++;
      return _count;
   }
   
   public function changeTo(n:Number):Void{
      var tempRef:Object = {}
      var myFuse = new Fuse();
     
      tempRef = _bgArray[n];
      if(tempRef!=_current){
         draw(n);
         tempRef._alpha = 0;
         myFuse.push({target:tempRef,alpha:100,ease:"easeOutBounce",seconds:1});
         myFuse.push({scope:this,func:destroyFuse,args:[myFuse, tempRef]})
         bringFront(tempRef);
         myFuse.start();
         trace("animation started");
      }
   }
   /*******************************************************************
   * PRIVATE METHODS
   * ******************************************************************/
   private function draw(n:Number):Object{
      var colors:Array = _colorsArray[n];
      var bgRef:Object = _bgArray[n];
      var wSize:Number = Stage.width;
      var hSize:Number = Stage.height;
      var fillType:String = "linear";
      var alphas:Array = [100, 100];
      var ratios:Array = [0, 255]
      var matrix:Object = {matrixType:"box", x:0, y:0, w:wSize, h:hSize, r:90/180*Math.PI};
     
      bgRef.lineStyle(1, 0xFFFFFF, 0);
      bgRef.beginGradientFill(fillType, colors, alphas, ratios, matrix);
      bgRef.lineTo(wSize, 0);
      bgRef.lineTo(wSize, hSize);
      bgRef.lineTo(0, hSize);
      bgRef.lineTo(0, 0);
      bgRef.endFill();
     
      return bgRef;
      trace(bgRef+" gradient draw completed");
   }
   
   private function bringFront(tempRef:Object):Void{
      if(tempRef.getDepth() < _current.getDepth()){
         tempRef.swapDepths(_current);
         trace(_current+"<--->"+tempRef);
      }
   }
   
   private function clear():Void{
      _current.clear();
      trace(_current+" cleared");
   }
   
   private function destroyFuse(w_Fuse, tempRef):Void
   {
      clear();
      _current = tempRef;
      w_Fuse.destroy();
      delete w_Fuse;
      trace("End of animation");
   }
}

Código: [Seleccione]

var mygrad:oop.Background = new oop.Background(mc);
                           
mygrad.addBackground([0x00CC00,0xFFFFFF]);
mygrad.addBackground([0xFF0000,0xFFFFFF]);
mygrad.addBackground([0xFFFF99,0xFFFFFF]);
mygrad.addBackground([0x99FFCC,0xFFFFFF]);

mygrad.init();
mygrad.changeTo(0)

[alftuga]

Hello yarcub assim é que gosto de ver as coisas
so um promenor
no teu methodo
addBackground

podias por um terçeiro parametro so para controlar a posição no array assim podias a qualquer momento eventualmente mudar a posição e ordem deles não ?

isto é so acrecentar alguma coisita mas ficarias ai com uma ferramenta potente.

se vais carregar uns dados de um xml se calhar tb pode fazer sentido criar uma class que gera o array e injectar o array directamente dentro da class Background assim separavas mesmo os dados do visual.

Ou então em vez de injectares os dados metes a class background a escuta da class dos dados. Repara que se fazes isso a qualquer momento a mudança de dados é actualizada na class background.
E ai na class dos dados acrecentas methodos de ordenação do array.
Assim mexes no dados mas não tocas na class view Background.

Fazendo assim outras view eventuais que poderão aparecer no layout poderão aproveitar esses dados....

[Grettir]

Muy bien...sim sr...cheira a MVC Pattern ?!?!

Fiquem bem

[yarcub]

Só cheira mesmo.  

alftuga, vou seguir a tua dica.

Ou então em vez de injectares os dados metes a class background a escuta da class dos dados. Repara que se fazes isso a qualquer momento a mudança de dados é actualizada na class background.
E ai na class dos dados acrecentas methodos de ordenação do array.
Assim mexes no dados mas não tocas na class view Background.

[alftuga]

não é MVC porque não tem controlador e não é preciso do facto de não existir interação utilizador.
Mas sim é um patern e dependendo como é implementado pode ser um Observer.
Não te esqueças de criar uns gestores de escutas em condições do estilo desligar e ligar os listeners.

[alftuga]

[fora de assunto]
um abraço para voçés!