The following example shows you how to extends the ProgrammaticSkin and
add a gradient as background to a TitleWindow
usage :
WindowedApplication {
TitleWindow: ClassReference("com.gnstudio.skins.TitleWindowSkin");
}
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);
}
}
}
The following example shows you how to extends the ProgrammaticSkin and add an image as background of your WindowedApplication positioned at the center of the window;
usage :
WindowedApplication {
borderSkin: ClassReference("com.gnstudio.skins.ApplicationSkin");
}
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);
}
}
}
}
Use StyleManager class and setComponentStyle method to set global styles
Following code sets color, size and textPadding properties to each Button Component used in your own Flash Application.
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);
Problem: customize the HSlider / VSlider skin and add the handcursor to the track icon
Solution: create two skin actionscript classes to customize the trackSkin and a thumbSkin styles
Main MXML File:
<?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;
}
}
}
