package com.gnstudio.skins
{

    import flash.display.GradientType;
    import flash.display.InterpolationMethod;
    import flash.display.SpreadMethod;
    import flash.geom.Matrix;
    
    import mx.graphics.RectangularDropShadow;
    import mx.skins.RectangularBorder;

    public class TitleWindowSkin extends RectangularBorder{

        
       	private var cornerRadius:Number = 6;
	private var borderColor:uint = 0xFFFFFF;
	private var borderThickness:Number = 1;
        
        override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void{
        	
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            
            graphics.clear()
            
            if(getStyle("cornerRadius")){
          	
          	cornerRadius = getStyle("cornerRadius");
            
            }
            if(getStyle("borderColor")){
          	
          	borderColor = getStyle("borderColor");
            
            }
            if(getStyle("borderThickness")){
          	
          	borderThickness = getStyle("borderThickness");
            
            }
			
            var fillType:String = GradientType.LINEAR;
            var colors:Array = [0x000000,0x111111,0x333333];
            var alphas:Array = [1,.75, .50];
            var ratios:Array = [0,128, 255];
            var matrix:Matrix = new Matrix();
            matrix.createGradientBox(unscaledWidth,unscaledHeight*2, Math.PI/2, 0, 0);
            var spreadMethod:String = SpreadMethod.REPEAT;
            var interpolationMethod:String = InterpolationMethod.LINEAR_RGB;
			
            graphics.lineStyle(borderThickness, borderColor);
            graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod,interpolationMethod);
			
            graphics.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,cornerRadius,cornerRadius,cornerRadiu

s,cornerRadius);

        }

    }
}

package com.gnstudio.skins
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.Event;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	
	import mx.controls.Image;
	import mx.skins.ProgrammaticSkin;

	public class ApplicationSkin extends ProgrammaticSkin{
		
		[Embed(source="skin/application/bckg.jpg")]
		private var imageClass:Class
		
		private var _image:Bitmap;
		private var _bitmapData:BitmapData;
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
        	
			super.updateDisplayList(unscaledWidth, unscaledHeight);
            
          		var backgroundColor:uint = getStyle("backgroundColor");
           
			if(!_image){
            	
				_image = new imageClass()
            			_bitmapData = new BitmapData(_image.width, _image.height);
				var matrix:Matrix = new Matrix();
				_bitmapData.draw(_image,matrix);   
            	
			}
           
            
 			if(unscaledWidth && unscaledWidth){
        		
 				graphics.clear();
				graphics.beginFill(backgroundColor);
				graphics.drawRect(0, 0, unscaledWidth,unscaledHeight);
				graphics.endFill();
   				
				var x:Number = unscaledWidth/2 - _bitmapData.width/2;
				var y:Number = unscaledHeight/2 - _bitmapData.height/2;
				var bd:BitmapData = new BitmapData(unscaledWidth,unscaledHeight,true,backgroundColor);
				bd.copyPixels(_bitmapData,new Rectangle(0,0,_bitmapData.width,_bitmapData.height),new Point(x,y));
				graphics.beginBitmapFill(bd, new Matrix(), false, true);
				graphics.drawRect(x, y, _bitmapData.width, _bitmapData.height);
   					
			}
        	 	
		}
       	
	}
}

import fl.managers.StyleManager;
import fl.controls.Button

// Set a global textFormat for every Button Component
var tf:TextFormat= new TextFormat();
tf.color = 0x0000FF;
tf.size = 16;
StyleManager.setComponentStyle(Button, "textFormat", tf);

// Set a global style property for every Button Component
var styleProperty:String = "textPadding";
var value:Number = 30;
StyleManager.setComponentStyle(Button,styleProperty,value);    

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	backgroundColor="#999999">

	<mx:Script>
		<![CDATA[
			
			// The Custom Image for the Slider Thumb 
			[Embed(source="assets/slider/slider_arrow.png")]
	    		public static const SLIDER_ARROW:Class;
	    
		]]>
	</mx:Script>
	
	
	
	<!--  STANDARD SLIDER  --> 
	<mx:HSlider width="100" height="1"
	 			 liveDragging="true"
	 			 />			
	 			 
	<mx:Spacer height="70" />
	
	
	<!--  SLIDER  WITH CUSTOM SKINS  --> 
	<mx:HSlider width="100" height="1"
	 			 trackSkin="skins.IconSliderTrack"
	 			 thumbSkin="{SLIDER_ARROW}"
	 			 sliderThumbClass="skins.IconSliderThumb"
	 			 liveDragging="true"
	 			 />
	
	
</mx:Application>



//==============================================================================
//skins/IconSliderTrack.as
//==============================================================================
package skins
{   
    import mx.core.UIComponent;   
  
    public class IconSliderTrack extends UIComponent   
    {   
           
        /**
        * Modify the default track layout
        * 
        */
        override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void{   
            super.updateDisplayList(unscaledWidth, unscaledHeight);   
  			this.graphics.moveTo(0,0);   
            this.graphics.lineStyle(5,0x656565);   
	        
	        // Draw a curve instead of the classic line 
	      	this.graphics.curveTo(unscaledWidth, 40, unscaledWidth, 0)
	        
	        // Draw a Bold Line 
	        // NOTE: if you want to use this comment the previous line 
	        //this.graphics.lineTo(unscaledWidth,0);
	        
        }   
    }   
} 


//==============================================================================
//skins/IconSliderThumb.as
//==============================================================================
package skins {
	
    import mx.controls.sliderClasses.SliderThumb;

    public class IconSliderThumb extends SliderThumb {
        
        public function IconSliderThumb() {
            super();
            
            /**
            *  You need to manually update the thumb width 
            *  and height to the Thumg image dimensions,
            *  otherwise its displayed size won't be right.
            *  NOTE: try to comment following line to see the result 
            */             
            this.width = 36;
            this.height = 35;
            this.buttonMode = true;
        }
    }
}