Package | com.gestureworks.cml.elements |
Class | public class Dial |
Inheritance | Dial ![]() ![]() |
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.backgroundLineStroke = 3; dial1.backgroundAlpha = 5; // triangles graphics dial1.leftTriangleColor = 0x303030; dial1.rightTriangleColor = 0x303030; // center line graphics dial1.centerLineLineStroke = 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.backgroundLineStroke = 3; dial2.backgroundAlpha = 5; //triangles graphics dial2.leftTriangleColor = 0x303030; dial2.rightTriangleColor = 0x303030; //center line graphics dial2.centerLineLineStroke = 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
Property | Defined By | ||
---|---|---|---|
![]() | autoShuffle : Boolean
autoshuffles
| TouchContainer | |
background : Sprite
Defines the background which is a rectangle
| Dial | ||
backgroundAlpha : Number
Sets the background Transparency
| Dial | ||
backgroundLineStroke : Number
Sets the background Line Stoke
| Dial | ||
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 | ||
centerLineLineStroke : 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 | ||
![]() | childList : ChildList
Returns the object's childList. | TouchContainer | |
![]() | className : String
sets the class name of displayobject
| TouchContainer | |
![]() | cloneExclusions : Vector.<String> [read-only]
Returns a list of properties to exclude when cloning this object
| TouchContainer | |
![]() | cmlIndex : int
Returns the index created by the CML parser. | TouchContainer | |
continuous : Boolean
Specifies whether the dial is continuous or not
| Dial | ||
currentIndex : int = 0 | Dial | ||
currentString : String | Dial | ||
![]() | dimensionsTo : Object
Sets the dimensions of TouchContainer to given object
| TouchContainer | |
![]() | dropShadow : Boolean
Sets the drop shadow effect
| TouchContainer | |
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 | ||
![]() | group : String | TouchContainer | |
![]() | height : Number [override]
sets the height of the container
| TouchContainer | |
![]() | heightPercent : Number
sets the height of the container
| TouchContainer | |
![]() | id : String
Returns the object's id. | TouchContainer | |
invertDrag : Boolean = false | Dial | ||
![]() | layout : *
specifies the type of layout
| TouchContainer | |
![]() | layoutList : Dictionary | TouchContainer | |
leftTriangle : Graphic
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 | ||
leftTriangleScale : Number
Sets the scale of the left triangle
| Dial | ||
matrix : Matrix
Defines the matrix to control gradient appearance of background
| Dial | ||
maxItemsOnScreen : int
Sets the maximum Text Elements on dial
| Dial | ||
![]() | mouseChildren : Boolean [override]
sets the mousechildren value to true or false. | TouchContainer | |
mymask : Sprite
Defines the mask for background
| Dial | ||
![]() | paddingBottom : Number
Sets the number of pixels between the container's bottom border and the bottom of its content area. | TouchContainer | |
![]() | paddingLeft : Number
Sets the number of pixels between the component's left border and the left edge of its content area. | TouchContainer | |
![]() | paddingRight : Number
Sets the number of pixels between the component's right border and the right edge of its content area. | TouchContainer | |
![]() | paddingTop : Number
Sets the number of pixels between the container's top border and the top of its content area. | TouchContainer | |
![]() | position : *
Sets the position
| TouchContainer | |
![]() | relativeX : Boolean
When set true this containers children's x position will be laid out relatively
to each other. | TouchContainer | |
![]() | relativeY : Boolean
When set true this containers children's y position will be laid out relatively
to each other. | TouchContainer | |
rightTriangle : Graphic
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 | ||
rightTriangleScale : Number
Sets the scale of the right triangle
| Dial | ||
selectedTextColor : uint
Sets the text Color for selected text
| Dial | ||
![]() | sound : String | TouchContainer | |
![]() | state : Dictionary | TouchContainer | |
![]() | stateId : *
Returns the current state id. | TouchContainer | |
text : String
Sets array of text elements
| Dial | ||
textColor : uint
Sets the default text Color
| Dial | ||
textContainer : Sprite
Defines the text container
| Dial | ||
![]() | toBitmap : Boolean | TouchContainer | |
![]() | width : Number [override]
sets the width of the container
| TouchContainer | |
![]() | widthPercent : Number
sets the width of the container
| TouchContainer |
Method | Defined By | ||
---|---|---|---|
Dial()
Contructor
| Dial | ||
![]() | activateTouch():void | TouchContainer | |
![]() | addAllChildren():void
method searches the child and adds to the list
| TouchContainer | |
![]() | addChild(child:DisplayObject):DisplayObject [override]
Adds child to display list and, if not already added, the child list
| TouchContainer | |
![]() | addChildAt(child:DisplayObject, index:int):DisplayObject [override]
Adds child to display list and, if not already added, the child list
| TouchContainer | |
![]() | applyLayout(value:* = null):void
Apply the containers layout
| TouchContainer | |
![]() | childToList(id:String, child:*):void
child appended to the childlist
| TouchContainer | |
clear():void | Dial | ||
![]() | clone():*
Clone method
| TouchContainer | |
dispose():void [override]
Destructor
| Dial | ||
![]() | getElementById(id:String):*
Searches CML childList by id. | TouchContainer | |
![]() | getElementsByClassName(className:String):Array
Searches the CML childList by className. | TouchContainer | |
![]() | getElementsByTagName(tagName:Class):Array
Searches the CML childList by tagName as Class. | TouchContainer | |
init():void [override]
Initializes the configuration and display of dial elements
| Dial | ||
![]() | loadState(sId:* = null, recursion:Boolean = false):void
Loads state by index number. | TouchContainer | |
![]() | makeGestureList(value:XMLList):Object
Creates gestureList object from XML
| TouchContainer | |
![]() | parseCML(cml:XMLList):XMLList
Parse cml for local layouts. | TouchContainer | |
![]() | postparseCML(cml:XMLList):void
Abstract method allows the setting of a postparse CML routine. | TouchContainer | |
![]() | querySelector(selector:String):*
Searches the CML childList by selector. | TouchContainer | |
![]() | querySelectorAll(selector:*):Array
Search the CML childList by selector. | TouchContainer | |
![]() | removeChild(child:DisplayObject):DisplayObject [override]
Removes child from display list and, if not already removed, the child list
| TouchContainer | |
![]() | removeChildAt(index:int):DisplayObject [override]
Removes child from display list and, if not already removed, the child list
| TouchContainer | |
![]() | removeChildren(beginIndex:int = 0, endIndex:int = 2147483647):void [override]
Removes children from display list and, if not already removed, the child list
| TouchContainer | |
![]() | saveState(sId:* = null, recursion:Boolean = false):void
Save state by index number. | TouchContainer | |
![]() | searchChildren(value:*, returnType:Class = null):*
This method does a depth first search of childLists. | TouchContainer | |
![]() | setDimensionsToChild():void
method sets the dimensions of each child
| TouchContainer | |
![]() | tweenState(sId:* = null, tweenTime:Number = 1):void
Tween state by stateIndex from current to given state index. | TouchContainer | |
![]() | updatePadding():void
Updates child padding within this container
| TouchContainer | |
![]() | updatePercentDim():void
Updates child percent dimensions within this container
| TouchContainer | |
![]() | updateProperties(state:* = 0):void
Updates properties from state. | TouchContainer | |
![]() | updateRelativePos():void
Updates child relative positions within this container
| TouchContainer |
background | property |
public var background:Sprite
Defines the background which is a rectangle
backgroundAlpha | property |
backgroundAlpha:Number
Sets the background Transparency
The default value is 0
.
public function get backgroundAlpha():Number
public function set backgroundAlpha(value:Number):void
backgroundLineStroke | property |
backgroundLineStroke:Number
Sets the background Line Stoke
The default value is 1
.
public function get backgroundLineStroke():Number
public function set backgroundLineStroke(value:Number):void
centerLine | property |
public var centerLine:Sprite
Defines the center line of background
centerLineAlpha | property |
centerLineAlpha:Number
Sets the center line transparency of background
The default value is 0.2
.
public function get centerLineAlpha():Number
public function set centerLineAlpha(value:Number):void
centerLineColor | property |
centerLineColor:uint
Sets the center line color of background
The default value is 0x666666
.
public function get centerLineColor():uint
public function set centerLineColor(value:uint):void
centerLineLineStroke | property |
centerLineLineStroke:Number
Sets the center line line stroke of background
The default value is 1
.
public function get centerLineLineStroke():Number
public function set centerLineLineStroke(value:Number):void
centerLineOutlineAlpha | property |
centerLineOutlineAlpha:Number
Sets the outline transparency of center line of background
The default value is 0.4
.
public function get centerLineOutlineAlpha():Number
public function set centerLineOutlineAlpha(value:Number):void
centerLineOutlineColor | property |
centerLineOutlineColor:uint
Sets the center line outline color of background
The default value is 0xAAAAAAA
.
public function get centerLineOutlineColor():uint
public function set centerLineOutlineColor(value:uint):void
continuous | property |
continuous:Boolean
Specifies whether the dial is continuous or not
public function get continuous():Boolean
public function set continuous(value:Boolean):void
currentIndex | property |
public var currentIndex:int = 0
currentString | property |
public var currentString:String
filterDial | property |
filterDial:*
The Dial
object used to filter the text values of this Dial
based on
its current selection.
public function get filterDial():*
public function set filterDial(value:any):void
fontSize | property |
fontSize:Number
Sets the font size.
The default value is 20
.
public function get fontSize():Number
public function set fontSize(value:Number):void
gradientAlphas | property |
gradientAlphas:String
Sets the alpha transparency of gradient for background
The default value is [1, 1, 1]
.
public function get gradientAlphas():String
public function set gradientAlphas(value:String):void
gradientColors | property |
gradientColors:String
Sets the array of color values of gradient for background
The default value is [0x111111, 0xDDDDDD, 0x111111]
.
public function get gradientColors():String
public function set gradientColors(value:String):void
gradientHeight | property |
gradientHeight:Number
the height (in pixels) of the dial
public function get gradientHeight():Number
public function set gradientHeight(value:Number):void
gradientRatios | property |
gradientRatios:String
Sets the ratios of gradient for background
The default value is [0, 127.5, 255]
.
public function get gradientRatios():String
public function set gradientRatios(value:String):void
gradientRotation | property |
gradientRotation:Number
the rotation (in radians) that will be applied to the gradient
The default value is Math.PI / 2
.
public function get gradientRotation():Number
public function set gradientRotation(value:Number):void
gradientType | property |
gradientType:String
Sets the gardient type for background
The default value is GradientType.LINEAR
.
public function get gradientType():String
public function set gradientType(value:String):void
gradientWidth | property |
gradientWidth:Number
the width (in pixels) of the dial
public function get gradientWidth():Number
public function set gradientWidth(value:Number):void
gradientX | property |
gradientX:Number
how far (in pixels) the gradient is shifted horizontally
The default value is 25
.
public function get gradientX():Number
public function set gradientX(value:Number):void
gradientY | property |
gradientY:Number
how far (in pixels) the gradient is shifted vertically
The default value is 0
.
public function get gradientY():Number
public function set gradientY(value:Number):void
invertDrag | property |
public var invertDrag:Boolean = false
leftTriangle | property |
public var leftTriangle:Graphic
Defines the left triangle of background
leftTriangleAlpha | property |
leftTriangleAlpha:Number
Sets the left triangle Transparency of background
The default value is 1
.
public function get leftTriangleAlpha():Number
public function set leftTriangleAlpha(value:Number):void
leftTriangleColor | property |
leftTriangleColor:Number
Sets the left triangle color of background
The default value is 0x303030
.
public function get leftTriangleColor():Number
public function set leftTriangleColor(value:Number):void
leftTriangleScale | property |
leftTriangleScale:Number
Sets the scale of the left triangle
The default value is 1
.
public function get leftTriangleScale():Number
public function set leftTriangleScale(value:Number):void
matrix | property |
public var matrix:Matrix
Defines the matrix to control gradient appearance of background
maxItemsOnScreen | property |
maxItemsOnScreen:int
Sets the maximum Text Elements on dial
The default value is 5
.
public function get maxItemsOnScreen():int
public function set maxItemsOnScreen(value:int):void
mymask | property |
public var mymask:Sprite
Defines the mask for background
rightTriangle | property |
public var rightTriangle:Graphic
Defines the right triangle of background
rightTriangleAlpha | property |
rightTriangleAlpha:Number
Sets the right triangle Transparency of background
The default value is 1
.
public function get rightTriangleAlpha():Number
public function set rightTriangleAlpha(value:Number):void
rightTriangleColor | property |
rightTriangleColor:Number
Sets the right triangle color of background
The default value is 0x303030
.
public function get rightTriangleColor():Number
public function set rightTriangleColor(value:Number):void
rightTriangleScale | property |
rightTriangleScale:Number
Sets the scale of the right triangle
The default value is 1
.
public function get rightTriangleScale():Number
public function set rightTriangleScale(value:Number):void
selectedTextColor | property |
selectedTextColor:uint
Sets the text Color for selected text
The default value is 0xFFFFFF
.
public function get selectedTextColor():uint
public function set selectedTextColor(value:uint):void
text | property |
text:String
Sets array of text elements
The default value is 10
.
public function get text():String
public function set text(value:String):void
textColor | property |
textColor:uint
Sets the default text Color
The default value is 0x000000
.
public function get textColor():uint
public function set textColor(value:uint):void
textContainer | property |
public var textContainer:Sprite
Defines the text container
Dial | () | Constructor |
public function Dial()
Contructor
clear | () | method |
public function clear():void
dispose | () | method |
override public function dispose():void
Destructor
init | () | method |
override public function init():void
Initializes the configuration and display of dial elements