as3, web 2.0 gradient box

i use this to create nice, dynamic web 2.0 style gradient boxes for a lot of different applications. It typically has a dark stroke, and a 45 degree gradient - the darker color is in the upper left and the lighter color and inside stroke begin on the lower right.

i turned this into a class, since you really can't create this shape and dynamically scale it from a library symbol - the inside outline just doesn't work.

Code: Select all

package com.nudoru.utils {
   import flash.display.Sprite;
   import flash.display.GradientType;
   import flash.geom.Matrix;
   import flash.filters.DropShadowFilter;

   public class GradBox extends Sprite {
      
      private var _LightColor      :int;
      private var _DarkColor      :int;
      private var _OutlineColor   :int;

      public function GradBox(tgt:Sprite, x:int, y:int, w:int, h:int, sdw:Boolean=false, colorObj:Object=undefined):void {
         _LightColor = colorObj.lc ? colorObj.lc : 0xEEEEEE;
         _DarkColor = colorObj.dc ? colorObj.dc : 0xEAEAEA;
         _OutlineColor = colorObj.oc ? colorObj.oc : 0x999999;
         renderBox(tgt, x, y, w, h, sdw, _LightColor, _DarkColor, _OutlineColor);
      }
      
      private function renderBox(tgt:Sprite, x:int, y:int, w:int, h:int, sdw:Boolean, lc:int, dc:int, oc:int):Sprite {
         
         var tBox:Sprite = new Sprite();
         tBox.x = x;
         tBox.y = y;
         
         var box:Sprite= new Sprite();
         var colors:Array = [dc, lc];
         var alphas:Array = [1, 1];
         var ratios:Array = [0, 255];
         var matrix:Matrix = new Matrix;
         matrix.createGradientBox(w,h,45);
         box.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
         box.graphics.drawRect(0,0,w,h);
         box.graphics.endFill();
         
         var whiteline:Sprite = new Sprite();
         whiteline.graphics.lineStyle(0,lc,1);
         whiteline.graphics.drawRect(1,1,w-2,h-2);
         
         var darkline:Sprite = new Sprite();
         darkline.graphics.lineStyle(0,oc,1);
         darkline.graphics.drawRect(0,0,w,h);
         
         if(sdw) {
            var dropShadow:DropShadowFilter = new DropShadowFilter(3,45,0x000000,.3,7,7,1,2);
            var filtersArray:Array = new Array(dropShadow);
            box.filters = filtersArray;
         }

         tBox.addChild(box);
         tBox.addChild(whiteline);
         tBox.addChild(darkline);
         
         tgt.addChild(tBox);
         return tBox;
      }
      
   }
   
}


useage:

Code: Select all

import com.nudoru.utils.*;
var b:GradBox = new GradBox(myMC, 0, 0, 100, 500, true, {oc:0x666666, lc:0xffffff, dc:0xcccccc});


i've got a version that does round rects, if anyone would like me to post that version.

thanks, this is definitely cool. i'd like to get the rounded rect code too if you wouldnt mind!