DClick

Interpolação de cores no Flex


Olá!

Aconteceu aqui, uns tempos atrás, de a gente precisar criar objetos com cores em degradê no Flex. "Flasheiro" que sou, já conhecia a minha classe amiga Color. Porém, como a felicidade de um desenvolvedor sempre dura pouco, descobrimos que essa classe não faz parte da biblioteca padrão do Flex, e precisaria de alguma ginástica para levá-la do Flash para o Flex. Conclusão?! Implementamos a funcionalidade que precisávamos em uma classe simples e usamos.

Veja como ficou a classe e exemplos:

PLAIN TEXT
Actionscript:
  1. package br.com.dclick
  2. {
  3.     public class ColorUtils
  4.     {
  5.         public function ColorUtils()
  6.         {
  7.         }
  8.        
  9.         public static function dismemberColor( color:uint ):Object
  10.         {
  11.            
  12.             var o:Object = new Object();
  13.            
  14.             o.c = color;
  15.             o.r = Math.floor(color / (256*256));
  16.             o.g = Math.floor((color - (o.r * 256 * 256)) / 256);
  17.             o.b = Math.floor(color - (o.r * 256 * 256) - (o.g * 256 ));
  18.            
  19.             return o;
  20.            
  21.         }
  22.        
  23.         public static function interpolateColors( startColor:uint, endColor:uint, progress:Number ):uint
  24.         {
  25.            
  26.             var c1:Object = dismemberColor( startColor );
  27.             var c2:Object = dismemberColor( endColor );
  28.            
  29.             var r:uint = c1.r - Math.floor(((c1.r - c2.r) * progress));
  30.             var g:uint = c1.g - Math.floor(((c1.g - c2.g) * progress));
  31.             var b:uint = c1.b - Math.floor(((c1.b - c2.b) * progress));
  32.            
  33.             return ( r * 256 * 256 ) + ( g * 256 ) + b;
  34.            
  35.         }
  36.     }
  37. }

Exemplo de Uso 1:

Source:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
  3.     verticalGap="5" creationComplete="createObjects()"
  4.     paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
  5.  
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.controls.Button;
  10.             import br.com.dclick.ColorUtils;
  11.            
  12.             [Bindable]
  13.             private var cor1:uint = 0xFF0000;
  14.             [Bindable]
  15.             private var cor2:uint = 0xFFFF00;
  16.             [Bindable]
  17.             private var amount:uint = 20;
  18.             [Bindable]
  19.             private var gap:uint = 0;
  20.             [Bindable]
  21.             private var size:uint = 10;
  22.            
  23.            
  24.             private function createObjects():void
  25.             {
  26.  
  27.                 var xmlList:XMLList = xmlData..button;
  28.                
  29.                 container.removeAllChildren();
  30.                
  31.                 for (var i:uint; i <xmlList.length(); i++  )
  32.                 {
  33.                     var node:XML = xmlList[i];
  34.                
  35.                     var btn:Button = new Button();
  36.                     btn.label = node.@label;
  37.                     btn.setStyle( "color", 0xFFFFFF );
  38.                     btn.setStyle( "fillColors",
  39.                                   [
  40.                                     ColorUtils.interpolateColors( cor1, cor2, 1 / (xmlList.length()-1) * i),
  41.                                     ColorUtils.interpolateColors( cor1, cor2, 1 / (xmlList.length()-1) * i),
  42.                                     ColorUtils.interpolateColors( cor1, cor2, 1 / (xmlList.length()-1) * i),
  43.                                     ColorUtils.interpolateColors( cor1, cor2, 1 / (xmlList.length()-1) * i)
  44.                                   ]
  45.                                 );
  46.                     container.addChild( btn );
  47.                 }
  48.                
  49.             }
  50.            
  51.         ]]>
  52.     </mx:Script>
  53.    
  54.     <mx:XML xmlns="" id="xmlData">
  55.        
  56.         <buttons>
  57.             <button label="Test 1" />
  58.             <button label="Test 2" />
  59.             <button label="Test 3" />
  60.             <button label="Test 4" />
  61.             <button label="Test 5" />
  62.             <button label="Test 6" />
  63.         </buttons>   
  64.        
  65.     </mx:XML>
  66.    
  67.     <mx:ApplicationControlBar width="100%">
  68.  
  69.         <mx:Label text="Initial Color" />
  70.         <mx:ColorPicker id="cp1" change="cor1 = cp1.selectedColor; createObjects()" selectedColor="{cor1}"/>
  71.         <mx:Spacer width="20" />
  72.         <mx:Label text="End Color" />
  73.         <mx:ColorPicker id="cp2" change="cor2 = cp2.selectedColor; createObjects()" selectedColor="{cor2}"/>
  74.        
  75.     </mx:ApplicationControlBar>
  76.  
  77.     <mx:VBox id="container" width="100%" height="100%" />   
  78.        
  79. </mx:Application>

Exemplo de Uso 2:

Source:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
  3.     verticalGap="0" creationComplete="createObjects()"
  4.     paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
  5.  
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import br.com.dclick.ColorUtils;
  10.            
  11.             [Bindable]
  12.             private var cor1:uint = 0xFF0000;
  13.             [Bindable]
  14.             private var cor2:uint = 0xFFFF00;
  15.             [Bindable]
  16.             private var amount:uint = 20;
  17.             [Bindable]
  18.             private var gap:uint = 0;
  19.             [Bindable]
  20.             private var size:uint = 10;
  21.            
  22.            
  23.             private function createObjects():void
  24.             {
  25.  
  26.                 canvas.graphics.clear();
  27.                
  28.                 for( var i:uint = 0; i <amount; i++ )
  29.                 {
  30.  
  31.                     var itemColor:uint = ColorUtils.interpolateColors( cor1, cor2, i / (amount-1) );
  32.                     canvas.graphics.beginFill( itemColor, 1 );
  33.                     canvas.graphics.drawRect(0, i * (size + gap), canvas.width, size );
  34.                     canvas.graphics.endFill();
  35.                    
  36.                 }
  37.                
  38.             }
  39.            
  40.         ]]>
  41.     </mx:Script>
  42.    
  43.     <mx:ApplicationControlBar width="100%">
  44.    
  45.         <mx:Form>
  46.             <mx:FormItem label="Color 1">
  47.                 <mx:ColorPicker id="cp1" change="cor1 = cp1.selectedColor; createObjects()" selectedColor="{cor1}"/>
  48.             </mx:FormItem>
  49.             <mx:FormItem label="Color 2">
  50.                 <mx:ColorPicker id="cp2" change="cor2 = cp2.selectedColor; createObjects()" selectedColor="{cor2}"/>
  51.             </mx:FormItem>
  52.             <mx:FormItem label="Amount">
  53.                 <mx:HSlider id="hsAmount" liveDragging="true" minimum="2" maximum="100" value="{amount}" change="amount = hsAmount.value; createObjects();" />
  54.             </mx:FormItem>
  55.             <mx:FormItem label="Size">
  56.                 <mx:HSlider id="hsSize" liveDragging="true" minimum="5" maximum="30" value="{size}" change="size = hsSize.value; createObjects();" />
  57.             </mx:FormItem>
  58.             <mx:FormItem label="Gap">
  59.                 <mx:HSlider id="hsGap" liveDragging="true" minimum="0" maximum="10" value="{gap}" change="gap = hsGap.value; createObjects();" />
  60.             </mx:FormItem>
  61.         </mx:Form>
  62.  
  63.     </mx:ApplicationControlBar>
  64.  
  65.     <mx:Canvas id="canvas" width="100%" height="100%" />   
  66.        
  67. </mx:Application>

Abraço.

Por Paulo Amorim em 21/August/2008 | Comentar | Trackback


No Translations

3 comentários para “Interpolação de cores no Flex”


Essa classe foi salvadora mesmo! Muito bom!!!!

Por Nelson Vasconcelos em 21/August/2008 às 11:37.


Muito bom mesmo Paulo, parabéns.

Por Rodrigo Facholi em 21/August/2008 às 11:45.


Muito legal Paulo, parabéns!

Por Henrique Marino em 5/September/2008 às 11:53.

Adicionar comentário

(requerido)
(requerido, não será publicado)