Packagecom.gestureworks.cml.element
Classpublic class Dial
InheritanceDial Inheritance ElementFactory Inheritance flash.display.Sprite

The Dial element provides a list of text elements in rotary selection tool.

The text can be moved from top to bottom or bottom to top through the drag event. The Dial has two different modes - Continous and Non-Continous. In continous dial mode the text elements move continously without stopping at the end or beginning through the drag event.In non-continous dial the motion stops when the first element or the last element reaches the center line. The text element closest to the center snaps to the center line and also changes its color.

It allows the user to set the dial mode from continous to non-continous or non-continous to continous by setting the continous flag to true or false. The number of elements on dial can be increased or decreased by setting the maxItemsOnScreen attribute. 

     
            // continuous dial
            var dial1:Dial = new Dial();
            
            // can add any text, increase or decrease the max items to the dial, can change the text color and selected color
            dial1.text = "Collection 1,Collection 2,Collection 3,Collection 4,Collection 5,Collection 6,Collection 7,Collection 8,Collection 9,Collection 10";
            dial1.maxItemsOnScreen = 5;
            dial1.continuous = true;
            dial1.textColor = 0xDDDDDD;
            dial1.selectedTextColor = 0x000000;
            dial1.x = 500;
            dial1.y = 250;
            
            // gradient matrix graphics 
            dial1.gradientType = "linear";
            dial1.gradientColors = "0x111111,0xDDDDDD,0x111111";
            dial1.gradientAlphas = "1,1,1";
            dial1.gradientRatios = "0,127.5,255";
            dial1.gradientWidth = 300;
            dial1.gradientHeight = 200;
            dial1.gradientX = 25;
            dial1.gradientY = 0;
            dial1.gradientRotation = 1.57;
            
            // background graphics
            dial1.backgroundLineStoke = 3;
            dial1.backgroundAlpha = 5;
            
            // triangles graphics
            dial1.leftTriangleColor = 0x303030;
            dial1.rightTriangleColor = 0x303030;
            
            // center line graphics
            dial1.centerLineLineStoke = 1;
            dial1.centerLineOutlineColor = 0xAAAAAAA;
            dial1.centerLineOutlineAlpha = 0.4;
            dial1.centerLineColor = 0x666666;
            dial1.centerLineAlpha = 0.2;
            
            // text
            var text:Text = new Text();
            text.x = 590;
            text.y = 200;
            text.text = "Dial-Continous";
            text.width = 3000;
            text.color = 0xCC0099;
            text.selectable = false;
            text.font = "OpenSansBold";
            addChild(text);
            
            // initialise method for dial
            dial1.init();            
            addChild(dial1);
        
            
            // non-continuous dial
            var dial2:Dial = new Dial();
            
            //can add any text, increase or decrease the max items to the dial, can change the text color and selected color
            dial2.text = "Collection 1,Collection 2,Collection 3,Collection 4,Collection 5,Collection 6,Collection 7,Collection 8,Collection 9,Collection 10";
            dial2.maxItemsOnScreen = 5;
            dial2.continuous = false;
            dial2.textColor = 0xDDDDDD;
            dial2.selectedTextColor = 0x000000;
            dial2.x = 900;
            dial2.y = 250;
            
            //gradient matrix graphics 
            dial2.gradientType = "linear";
            dial2.gradientColors = "0x111111,0xDDDDDD,0x111111";
            dial2.gradientAlphas = "1,1,1";
            dial2.gradientRatios = "0,127.5,255";
            dial2.gradientWidth = 300;
            dial2.gradientHeight = 200;
            dial2.gradientX = 25;
            dial2.gradientY = 0;
            dial2.gradientRotation = 1.57;
            
            //background graphics
            dial2.backgroundLineStoke = 3;
            dial2.backgroundAlpha = 5;
            
            //triangles graphics
            dial2.leftTriangleColor = 0x303030;
            dial2.rightTriangleColor = 0x303030;
            
            //center line graphics
            dial2.centerLineLineStoke = 1;
            dial2.centerLineOutlineColor = 0xAAAAAAA;
            dial2.centerLineOutlineAlpha = 0.4;
            dial2.centerLineColor = 0x666666;
            dial2.centerLineAlpha = 0.2;
            
            var text1:Text = new Text();
            text1.x = 980;
            text1.y = 200;
            text1.text = "Dial-NonContinous";
            text1.width = 3000;
            text1.color = 0xCC0099;
            text1.font = "OpenSansBold";
            text1.selectable = false;
            addChild(text1);
            
            dial2.init();
            addChild(dial2);

See also

Menu
DropDownMenu
OrbMenu

Public Properties
 PropertyDefined By
 Inheritedalpha : Number
[override] [write-only] sets the alpha for display objects
ElementFactory
  background : Sprite
Defines the background which is a rectangle
Dial
  backgroundAlpha : Number
Sets the background Transparency
Dial
  backgroundLineStoke : Number
Sets the background Line Stoke
Dial
 Inheritedblur : Boolean
Sets the drop shadow effect
ElementFactory
 Inheritedbottom : Number
sets the bottom value
ElementFactory
  centerLine : Sprite
Defines the center line of background
Dial
  centerLineAlpha : Number
Sets the center line transparency of background
Dial
  centerLineColor : uint
Sets the center line color of background
Dial
  centerLineLineStoke : Number
Sets the center line line stroke of background
Dial
  centerLineOutlineAlpha : Number
Sets the outline transparency of center line of background
Dial
  centerLineOutlineColor : uint
Sets the center line outline color of background
Dial
 Inheritedclass_ : String
Object's css class;
ElementFactory
 InheritedclassName : String
sets the class name of displayobject
ElementFactory
 InheritedcmlIndex : int
sets the cml index
ElementFactory
  continuous : Boolean
Specifies whether the dial is continuous or not
Dial
  currentIndex : int = 0
Dial
  currentString : String
Dial
 InheriteddebugStyle : *
sets the debug style
ElementFactory
 InheriteddisplayEvents : String
Use for dispatch completes.
ElementFactory
 InheriteddropShadow : Boolean
Sets the drop shadow effect
ElementFactory
  filterDial : *
The Dial object used to filter the text values of this Dial based on its current selection.
Dial
  fontSize : Number
Sets the font size.
Dial
  gradientAlphas : String
Sets the alpha transparency of gradient for background
Dial
  gradientColors : String
Sets the array of color values of gradient for background
Dial
  gradientHeight : Number
the height (in pixels) of the dial
Dial
  gradientRatios : String
Sets the ratios of gradient for background
Dial
  gradientRotation : Number
the rotation (in radians) that will be applied to the gradient
Dial
  gradientType : String
Sets the gardient type for background
Dial
  gradientWidth : Number
Deprecated: Please Use width
the width (in pixels) of the dial
Dial
  gradientX : Number
how far (in pixels) the gradient is shifted horizontally
Dial
  gradientY : Number
how far (in pixels) the gradient is shifted vertically
Dial
 Inheritedheight : Number
[override] Sets width of the display object in pixels
ElementFactory
 InheritedheightPercent : String
sets the height percent of display object
ElementFactory
 InheritedhorizontalCenter : Number
sets the horizontal center of display object
ElementFactory
 Inheritedid : String
sets the id of child
ElementFactory
 Inheritedindex : int
sets the index of display object
ElementFactory
  invertDrag : Boolean = false
Dial
 Inheritedleft : Number
sets left value
ElementFactory
  leftTriangle : Sprite
Defines the left triangle of background
Dial
  leftTriangleAlpha : Number
Sets the left triangle Transparency of background
Dial
  leftTriangleColor : Number
Sets the left triangle color of background
Dial
  matrix : Matrix
Defines the matrix to control gradient appearance of background
Dial
  maxItemsOnScreen : int
Sets the maximum Text Elements on dial
Dial
  mymask : Sprite
Defines the mask for background
Dial
 InheritedpropertyStates : Array
Deprecated: Please Use state
ElementFactory
 Inheritedright : Number
sets the right value
ElementFactory
  rightTriangle : Sprite
Defines the right triangle of background
Dial
  rightTriangleAlpha : Number
Sets the right triangle Transparency of background
Dial
  rightTriangleColor : Number
Sets the right triangle color of background
Dial
 Inheritedscale : Number
Sets both the x and y scale values
ElementFactory
 InheritedscaleX : Number
[override] Sets width of the display object in pixels
ElementFactory
 InheritedscaleY : Number
[override] Sets width of the display object in pixels
ElementFactory
  selectedTextColor : uint
Sets the text Color for selected text
Dial
 Inheritedstate : Array
property states array
ElementFactory
  text : String
Sets array of text elements
Dial
  textColor : uint
Sets the default text Color
Dial
  textContainer : Sprite
Defines the text container
Dial
 Inheritedtop : Number
sets top value
ElementFactory
 InheritedverticalCenter : Number
sets the vertical center of display object
ElementFactory
 Inheritedwidth : Number
[override] Sets width of the display object in pixels
ElementFactory
 InheritedwidthPercent : String
sets the percent of width of display object
ElementFactory
Public Methods
 MethodDefined By
  
Dial()
Contructor
Dial
  
clear():void
Dial
 Inherited
clone():*
Returns clone of self
ElementFactory
  
displayComplete():void
[override] CML display initialization callback
Dial
  
dispose():void
[override] Dispose method nullify attributes and remove listener
Dial
  
init():void
[override] Initializes the configuration and display of dial elements
Dial
 Inherited
parseCML(cml:XMLList):XMLList
parses cml file
ElementFactory
 Inherited
postparseCML(cml:XMLList):void
post parses the cml file
ElementFactory
 Inherited
updateProperties(state:Number = 0):void
this method updates the properties
ElementFactory
Property Detail
backgroundproperty
public var background:Sprite

Defines the background which is a rectangle

backgroundAlphaproperty 
backgroundAlpha:Number

Sets the background Transparency

The default value is 0.


Implementation
    public function get backgroundAlpha():Number
    public function set backgroundAlpha(value:Number):void
backgroundLineStokeproperty 
backgroundLineStoke:Number

Sets the background Line Stoke

The default value is 1.


Implementation
    public function get backgroundLineStoke():Number
    public function set backgroundLineStoke(value:Number):void
centerLineproperty 
public var centerLine:Sprite

Defines the center line of background

centerLineAlphaproperty 
centerLineAlpha:Number

Sets the center line transparency of background

The default value is 0.2.


Implementation
    public function get centerLineAlpha():Number
    public function set centerLineAlpha(value:Number):void
centerLineColorproperty 
centerLineColor:uint

Sets the center line color of background

The default value is 0x666666.


Implementation
    public function get centerLineColor():uint
    public function set centerLineColor(value:uint):void
centerLineLineStokeproperty 
centerLineLineStoke:Number

Sets the center line line stroke of background

The default value is 1.


Implementation
    public function get centerLineLineStoke():Number
    public function set centerLineLineStoke(value:Number):void
centerLineOutlineAlphaproperty 
centerLineOutlineAlpha:Number

Sets the outline transparency of center line of background

The default value is 0.4.


Implementation
    public function get centerLineOutlineAlpha():Number
    public function set centerLineOutlineAlpha(value:Number):void
centerLineOutlineColorproperty 
centerLineOutlineColor:uint

Sets the center line outline color of background

The default value is 0xAAAAAAA.


Implementation
    public function get centerLineOutlineColor():uint
    public function set centerLineOutlineColor(value:uint):void
continuousproperty 
continuous:Boolean

Specifies whether the dial is continuous or not


Implementation
    public function get continuous():Boolean
    public function set continuous(value:Boolean):void
currentIndexproperty 
public var currentIndex:int = 0

currentStringproperty 
public var currentString:String

filterDialproperty 
filterDial:*

The Dial object used to filter the text values of this Dial based on its current selection.


Implementation
    public function get filterDial():*
    public function set filterDial(value:any):void
fontSizeproperty 
fontSize:Number

Sets the font size.

The default value is 20.


Implementation
    public function get fontSize():Number
    public function set fontSize(value:Number):void
gradientAlphasproperty 
gradientAlphas:String

Sets the alpha transparency of gradient for background

The default value is [1, 1, 1].


Implementation
    public function get gradientAlphas():String
    public function set gradientAlphas(value:String):void
gradientColorsproperty 
gradientColors:String

Sets the array of color values of gradient for background

The default value is [0x111111, 0xDDDDDD, 0x111111].


Implementation
    public function get gradientColors():String
    public function set gradientColors(value:String):void
gradientHeightproperty 
gradientHeight:Number

the height (in pixels) of the dial


Implementation
    public function get gradientHeight():Number
    public function set gradientHeight(value:Number):void
gradientRatiosproperty 
gradientRatios:String

Sets the ratios of gradient for background

The default value is [0, 127.5, 255].


Implementation
    public function get gradientRatios():String
    public function set gradientRatios(value:String):void
gradientRotationproperty 
gradientRotation:Number

the rotation (in radians) that will be applied to the gradient

The default value is Math.PI / 2.


Implementation
    public function get gradientRotation():Number
    public function set gradientRotation(value:Number):void
gradientTypeproperty 
gradientType:String

Sets the gardient type for background

The default value is GradientType.LINEAR.


Implementation
    public function get gradientType():String
    public function set gradientType(value:String):void
gradientWidthproperty 
gradientWidth:Number
Deprecated: Please Use width

the width (in pixels) of the dial


Implementation
    public function get gradientWidth():Number
    public function set gradientWidth(value:Number):void
gradientXproperty 
gradientX:Number

how far (in pixels) the gradient is shifted horizontally

The default value is 25.


Implementation
    public function get gradientX():Number
    public function set gradientX(value:Number):void
gradientYproperty 
gradientY:Number

how far (in pixels) the gradient is shifted vertically

The default value is 0.


Implementation
    public function get gradientY():Number
    public function set gradientY(value:Number):void
invertDragproperty 
public var invertDrag:Boolean = false

leftTriangleproperty 
public var leftTriangle:Sprite

Defines the left triangle of background

leftTriangleAlphaproperty 
leftTriangleAlpha:Number

Sets the left triangle Transparency of background

The default value is 1.


Implementation
    public function get leftTriangleAlpha():Number
    public function set leftTriangleAlpha(value:Number):void
leftTriangleColorproperty 
leftTriangleColor:Number

Sets the left triangle color of background

The default value is 0x303030.


Implementation
    public function get leftTriangleColor():Number
    public function set leftTriangleColor(value:Number):void
matrixproperty 
public var matrix:Matrix

Defines the matrix to control gradient appearance of background

maxItemsOnScreenproperty 
maxItemsOnScreen:int

Sets the maximum Text Elements on dial

The default value is 5.


Implementation
    public function get maxItemsOnScreen():int
    public function set maxItemsOnScreen(value:int):void
mymaskproperty 
public var mymask:Sprite

Defines the mask for background

rightTriangleproperty 
public var rightTriangle:Sprite

Defines the right triangle of background

rightTriangleAlphaproperty 
rightTriangleAlpha:Number

Sets the right triangle Transparency of background

The default value is 1.


Implementation
    public function get rightTriangleAlpha():Number
    public function set rightTriangleAlpha(value:Number):void
rightTriangleColorproperty 
rightTriangleColor:Number

Sets the right triangle color of background

The default value is 0x303030.


Implementation
    public function get rightTriangleColor():Number
    public function set rightTriangleColor(value:Number):void
selectedTextColorproperty 
selectedTextColor:uint

Sets the text Color for selected text

The default value is 0xFFFFFF.


Implementation
    public function get selectedTextColor():uint
    public function set selectedTextColor(value:uint):void
textproperty 
text:String

Sets array of text elements

The default value is 10.


Implementation
    public function get text():String
    public function set text(value:String):void
textColorproperty 
textColor:uint

Sets the default text Color

The default value is 0x000000.


Implementation
    public function get textColor():uint
    public function set textColor(value:uint):void
textContainerproperty 
public var textContainer:Sprite

Defines the text container

Constructor Detail
Dial()Constructor
public function Dial()

Contructor

Method Detail
clear()method
public function clear():void

displayComplete()method 
override public function displayComplete():void

CML display initialization callback

dispose()method 
override public function dispose():void

Dispose method nullify attributes and remove listener

init()method 
override public function init():void

Initializes the configuration and display of dial elements





Tue Apr 16 2013, 03:24 PM -06:00