├── LICENSE ├── README.md └── feathers └── extensions └── FadeImageSkin.as /LICENSE: -------------------------------------------------------------------------------- 1 | Original work Copyright 2012-2016 Bowler Hat LLC. All rights reserved. 2 | Modified work Copyright 2016 Marcel Piestansky 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | 1. Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | 2. Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 15 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 16 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 18 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 19 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 20 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 21 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 22 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 23 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | 25 | The views and conclusions contained in the software and documentation are those 26 | of the authors and should not be interpreted as representing official policies, 27 | either expressed or implied, of the copyright holders. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FadeImageSkin for Feathers 2 | 3 | Extension for Feathers library that enables alpha transition between different component state skins. 4 | 5 | ## Overview 6 | 7 | Usage is identical to the original [ImageSkin](https://github.com/BowlerHatLLC/feathers/blob/master/source/feathers/skins/ImageSkin.as): 8 | 9 | ```as3 10 | import feathers.extensions.FadeImageSkin; 11 | ... 12 | var skin:FadeImageSkin = new FadeImageSkin( upTexture ); 13 | skin.setTextureForState( ButtonState.DOWN, downTexture ); 14 | skin.setTextureForState( ButtonState.DISABLED, disabledTexture ); 15 | skin.scale9Grid = scale9Grid; 16 | button.defaultSkin = skin; 17 | ``` 18 | 19 | You can specify duration and transition for fade in and fade out Tweens. 20 | 21 | ```as3 22 | // These are all default values 23 | skin.fadeInDuration = 0.5; 24 | skin.fadeInTransition = Transitions.EASE_OUT; 25 | skin.fadeOutDuration = 0.5; 26 | skin.fadeOutTransition = Transitions.EASE_IN; 27 | ``` 28 | 29 | As with the original ImageSkin, you can set a color for each state: 30 | 31 | ```as3 32 | skin.setColorForState( ButtonState.UP, 0x0000FF ); 33 | skin.setColorForState( ButtonState.DOWN, 0xFF0000 ); 34 | ``` 35 | 36 | Furthermore, you can enable tweening of the color between each state which is useful if you are using a single texture. 37 | 38 | ```as3 39 | var skin:FadeImageSkin = new FadeImageSkin( defaultTexture ); 40 | skin.setColorForState( ButtonState.UP, 0x0000FF ); 41 | skin.setColorForState( ButtonState.DOWN, 0xFF0000 ); 42 | skin.tweenColorChange = true; 43 | skin.colorTweenDuration = 0.5; 44 | skin.colorTweenTransition = Transitions.EASE_OUT; 45 | button.defaultSkin = skin; 46 | ``` 47 | 48 | ## Requirements 49 | 50 | * [Starling Framework 2.0+](https://github.com/Gamua/Starling-Framework) 51 | * [Feathers 3.0+](https://github.com/BowlerHatLLC/feathers) 52 | 53 | ## Author 54 | [Marcel Piestansky](https://twitter.com/marpies) 55 | -------------------------------------------------------------------------------- /feathers/extensions/FadeImageSkin.as: -------------------------------------------------------------------------------- 1 | /* 2 | Original work Copyright 2012-2016 Bowler Hat LLC. All rights reserved. 3 | Modified work Copyright 2016 Marcel Piestansky 4 | 5 | Redistribution and use in source and binary forms, with or without modification, 6 | are permitted provided that the following conditions are met: 7 | 8 | 1. Redistributions of source code must retain the above copyright notice, this 9 | list of conditions and the following disclaimer. 10 | 11 | 2. Redistributions in binary form must reproduce the above copyright notice, 12 | this list of conditions and the following disclaimer in the documentation 13 | and/or other materials provided with the distribution. 14 | 15 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 16 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 18 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 19 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 25 | 26 | The views and conclusions contained in the software and documentation are those 27 | of the authors and should not be interpreted as representing official policies, 28 | either expressed or implied, of the copyright holders. 29 | */ 30 | package feathers.extensions { 31 | 32 | import feathers.controls.ButtonState; 33 | import feathers.controls.ToggleButton; 34 | import feathers.core.IFeathersControl; 35 | import feathers.core.IMeasureDisplayObject; 36 | import feathers.core.IStateContext; 37 | import feathers.core.IStateObserver; 38 | import feathers.core.IToggle; 39 | import feathers.events.FeathersEventType; 40 | 41 | import flash.geom.Rectangle; 42 | 43 | import starling.animation.Juggler; 44 | import starling.animation.Transitions; 45 | import starling.core.Starling; 46 | import starling.display.DisplayObjectContainer; 47 | import starling.display.Image; 48 | import starling.events.Event; 49 | import starling.textures.Texture; 50 | 51 | /** 52 | * A skin for Feathers components that displays a texture. Has the ability 53 | * to change its texture based on the current state of the Feathers 54 | * component that is being skinned. Uses two Image objects to achieve 55 | * a fading effect when the state skin changes. 56 | * 57 | * 58 | * function setButtonSkin( button:Button ):void 59 | * { 60 | * var skin:FadeImageSkin = new FadeImageSkin( upTexture ); 61 | * skin.setTextureForState( ButtonState.DOWN, downTexture ); 62 | * skin.setTextureForState( ButtonState.HOVER, hoverTexture ); 63 | * button.defaultSkin = skin; 64 | * } 65 | * 66 | * var button:Button = new Button(); 67 | * button.label = "Click Me"; 68 | * button.styleProvider = new AddOnFunctionStyleProvider( setButtonSkin, button.styleProvider ); 69 | * this.addChild( button ); 70 | */ 71 | public class FadeImageSkin extends DisplayObjectContainer implements IMeasureDisplayObject, IStateObserver { 72 | 73 | protected static const JUGGLER:Juggler = Starling.juggler; 74 | 75 | protected var mExplicitWidth:Number; 76 | protected var mExplicitHeight:Number; 77 | protected var mExplicitMinWidth:Number; 78 | protected var mExplicitMinHeight:Number; 79 | protected var mExplicitMaxWidth:Number = Number.POSITIVE_INFINITY; 80 | protected var mExplicitMaxHeight:Number = Number.POSITIVE_INFINITY; 81 | protected var mPreviousState:String; 82 | protected var mPreviousSkinTweenID:uint; 83 | protected var mActiveSkinTweenID:uint; 84 | protected var mColorTweenID:uint; 85 | protected var mToggleTransitionDC:uint; 86 | protected var mFadeInDuration:Number; 87 | protected var mFadeInTransition:String; 88 | protected var mFadeOutDuration:Number; 89 | protected var mFadeOutTransition:String; 90 | protected var mTweenColorChange:Boolean; 91 | protected var mColorTweenDuration:Number; 92 | protected var mColorTweenTransition:String; 93 | 94 | protected var mStateContext:IStateContext; 95 | protected var mStateToTexture:Object; 96 | protected var mStateToColor:Object = {}; 97 | protected var mScale9Grid:Rectangle; 98 | 99 | protected var mDefaultTexture:Texture; 100 | protected var mDisabledTexture:Texture; 101 | protected var mSelectedTexture:Texture; 102 | 103 | protected var mDefaultColor:uint; 104 | protected var mDisabledColor:uint; 105 | protected var mSelectedColor:uint; 106 | 107 | protected var mPrevSkin:Image; 108 | protected var mActiveSkin:Image; 109 | 110 | public function FadeImageSkin( texture:Texture ) { 111 | super(); 112 | 113 | mDefaultTexture = texture; 114 | mFadeInDuration = mFadeOutDuration = mColorTweenDuration = 0.5; 115 | mFadeInTransition = mColorTweenTransition = Transitions.EASE_OUT; 116 | mFadeOutTransition = Transitions.EASE_IN; 117 | mDefaultColor = uint.MAX_VALUE; 118 | mDisabledColor = uint.MAX_VALUE; 119 | mSelectedColor = uint.MAX_VALUE; 120 | 121 | mStateToTexture = {}; 122 | } 123 | 124 | /** 125 | * 126 | * 127 | * Public API 128 | * 129 | * 130 | */ 131 | 132 | /** 133 | * Gets the texture to be used by the skin when the context's 134 | * currentState property matches the specified state value. 135 | * 136 | *

If a texture is not defined for a specific state, returns 137 | * null.

138 | * 139 | * @see #setTextureForState() 140 | */ 141 | public function getTextureForState( state:String ):Texture { 142 | return mStateToTexture[state] as Texture; 143 | } 144 | 145 | /** 146 | * Sets the texture to be used by the skin when the context's 147 | * currentState property matches the specified state value. 148 | * 149 | *

If a texture is not defined for a specific state, the value of the 150 | * defaultTexture property will be used instead.

151 | * 152 | * @see #defaultTexture 153 | */ 154 | public function setTextureForState( state:String, texture:Texture ):void { 155 | if( texture !== null ) { 156 | mStateToTexture[state] = texture; 157 | } else { 158 | delete mStateToTexture[state]; 159 | } 160 | updateTextureFromContext(); 161 | } 162 | 163 | /** 164 | * Gets the color to be used by the skin when the context's 165 | * currentState property matches the specified state value. 166 | * 167 | *

If a color is not defined for a specific state, returns 168 | * uint.MAX_VALUE.

169 | * 170 | * @see #setColorForState() 171 | */ 172 | public function getColorForState( state:String ):uint { 173 | if( state in mStateToColor ) { 174 | return mStateToColor[state] as uint; 175 | } 176 | return uint.MAX_VALUE; 177 | } 178 | 179 | /** 180 | * Sets the color to be used by the skin when the context's 181 | * currentState property matches the specified state value. 182 | * 183 | *

If a color is not defined for a specific state, the value of the 184 | * defaultTexture property will be used instead.

185 | * 186 | *

To clear a state's color, pass in uint.MAX_VALUE.

187 | * 188 | * @see #defaultColor 189 | * @see #getColorForState() 190 | */ 191 | public function setColorForState( state:String, color:uint ):void { 192 | if( color !== uint.MAX_VALUE ) { 193 | mStateToColor[state] = color; 194 | } else { 195 | delete mStateToColor[state]; 196 | } 197 | updateColorFromContext(); 198 | } 199 | 200 | /** 201 | * 202 | * 203 | * Private API 204 | * 205 | * 206 | */ 207 | 208 | private function getImage( texture:Texture, image:Image ):Image { 209 | if( image ) { 210 | image.texture = texture; 211 | } else { 212 | image = new Image( texture ); 213 | } 214 | if( mScale9Grid !== null && (image.scale9Grid === null || !image.scale9Grid.equals( mScale9Grid )) ) { 215 | image.scale9Grid = mScale9Grid; 216 | } 217 | return image; 218 | } 219 | 220 | private function resizeImage( image:Image ):void { 221 | if( mExplicitWidth === mExplicitWidth && //!isNaN 222 | image.width !== mExplicitWidth ) { 223 | image.width = mExplicitWidth; 224 | } 225 | if( mExplicitHeight === mExplicitHeight && //!isNaN 226 | image.height !== mExplicitHeight ) { 227 | image.height = mExplicitHeight; 228 | } 229 | } 230 | 231 | private function delayedTransition():void { 232 | mToggleTransitionDC = 0; 233 | updateTextureFromContext(); 234 | updateColorFromContext(); 235 | } 236 | 237 | /** 238 | * 239 | * 240 | * Protected API 241 | * 242 | * 243 | */ 244 | 245 | protected function updateTextureFromContext():void { 246 | if( mStateContext === null ) { 247 | if( mDefaultTexture !== null && mActiveSkin === null ) { 248 | mActiveSkin = new Image( mDefaultTexture ); 249 | addChildAt( mActiveSkin, 0 ); 250 | } 251 | return; 252 | } 253 | var currentState:String = mStateContext.currentState; 254 | if( mPreviousState !== currentState ) { 255 | var texture:Texture = mStateToTexture[currentState] as Texture; 256 | if( texture === null && 257 | mDisabledTexture !== null && 258 | mStateContext is IFeathersControl && !IFeathersControl( mStateContext ).isEnabled ) { 259 | texture = mDisabledTexture; 260 | } 261 | var isToggle:Boolean = mStateContext is IToggle; 262 | if( texture === null && 263 | mSelectedTexture !== null && 264 | isToggle && 265 | IToggle( mStateContext ).isSelected ) { 266 | texture = mSelectedTexture; 267 | } 268 | if( texture === null ) { 269 | texture = mDefaultTexture; 270 | } 271 | 272 | /* By default, state change from DOWN to UP_AND_SELECTED has this flow: 273 | * DOWN -> UP -> UP_AND_SELECTED 274 | * This delayed call prevents immediate change to UP state when it is not needed. 275 | * Is there a better way to prevent it? Please, show me. */ 276 | if( mToggleTransitionDC > 0 ) { 277 | JUGGLER.removeByID( mToggleTransitionDC ); 278 | mToggleTransitionDC = 0; 279 | } 280 | if( isToggle && 281 | ((mPreviousState == ButtonState.DOWN && currentState == ButtonState.UP) || 282 | (mPreviousState == ButtonState.DOWN_AND_SELECTED && currentState == ButtonState.UP_AND_SELECTED)) ) { 283 | mPreviousState = null; 284 | mToggleTransitionDC = JUGGLER.delayCall( delayedTransition, 0.05 ); 285 | return; 286 | } 287 | 288 | mPreviousState = currentState; 289 | var prevSkin:Image = null; 290 | var activeSkin:Image = null; 291 | if( mActiveSkin !== null ) { 292 | /* Active image already has the texture we want to transition to */ 293 | if( mActiveSkin.texture == texture ) return; 294 | /* The current skin becomes previous so that it can be faded out */ 295 | if( mActiveSkin.texture !== null ) { 296 | mPrevSkin = getImage( mActiveSkin.texture, mPrevSkin ); 297 | mPrevSkin.color = mActiveSkin.color; 298 | resizeImage( mPrevSkin ); 299 | addChildAt( mPrevSkin, 0 ); 300 | prevSkin = mPrevSkin; 301 | } 302 | } else if( mPrevSkin !== null ) { 303 | mPrevSkin.removeFromParent(); 304 | } 305 | /* If there is a new skin then assign it to Image */ 306 | if( texture !== null ) { 307 | mActiveSkin = getImage( texture, mActiveSkin ); 308 | mActiveSkin.color = 0xFFFFFF; 309 | resizeImage( mActiveSkin ); 310 | addChild( mActiveSkin ); 311 | activeSkin = mActiveSkin; 312 | } else if( mActiveSkin !== null ) { 313 | mActiveSkin.removeFromParent(); 314 | mActiveSkin.texture = null; 315 | } 316 | animate( activeSkin, prevSkin ); 317 | } 318 | } 319 | 320 | protected function updateColorFromContext():void { 321 | if( mStateContext === null ) { 322 | if( mDefaultColor !== uint.MAX_VALUE && mActiveSkin !== null && mActiveSkin.texture !== null ) { 323 | mActiveSkin.color = mDefaultColor; 324 | } 325 | return; 326 | } 327 | var color:uint = uint.MAX_VALUE; 328 | var currentState:String = mStateContext.currentState; 329 | if( currentState in mStateToColor ) { 330 | color = mStateToColor[currentState] as uint; 331 | } 332 | if( color === uint.MAX_VALUE && 333 | mDisabledColor !== uint.MAX_VALUE && 334 | mStateContext is IFeathersControl && !IFeathersControl( mStateContext ).isEnabled ) { 335 | color = mDisabledColor; 336 | } 337 | if( color === uint.MAX_VALUE && 338 | mSelectedColor !== uint.MAX_VALUE && 339 | mStateContext is IToggle && 340 | IToggle( mStateContext ).isSelected ) { 341 | color = mSelectedColor; 342 | } 343 | if( color === uint.MAX_VALUE ) { 344 | color = mDefaultColor; 345 | } 346 | if( color !== uint.MAX_VALUE && mActiveSkin !== null && mActiveSkin.texture !== null ) { 347 | if( mTweenColorChange ) { 348 | if( mColorTweenID > 0 ) { 349 | JUGGLER.removeByID( mColorTweenID ); 350 | } 351 | mColorTweenID = JUGGLER.tween( mActiveSkin, mColorTweenDuration, { 352 | color: color, 353 | transition: mColorTweenTransition, 354 | onComplete: function():void { 355 | mColorTweenID = 0; 356 | } 357 | } ); 358 | } else { 359 | mActiveSkin.color = color; 360 | } 361 | } 362 | } 363 | 364 | protected function animate( activeSkin:Image, prevSkin:Image ):void { 365 | if( prevSkin !== null ) { 366 | prevSkin.alpha = 1; 367 | if( mPreviousSkinTweenID > 0 ) { 368 | JUGGLER.removeByID( mPreviousSkinTweenID ); 369 | } 370 | mPreviousSkinTweenID = JUGGLER.tween( prevSkin, mFadeOutDuration, { 371 | alpha: 0, 372 | transition: mFadeOutTransition, 373 | onComplete: function ():void { 374 | mPreviousSkinTweenID = 0; 375 | } 376 | } ); 377 | } 378 | if( activeSkin !== null ) { 379 | activeSkin.alpha = 0; 380 | if( mActiveSkinTweenID > 0 ) { 381 | JUGGLER.removeByID( mActiveSkinTweenID ); 382 | } 383 | mActiveSkinTweenID = JUGGLER.tween( activeSkin, mFadeInDuration, { 384 | alpha: 1, 385 | transition: mFadeInTransition, 386 | onComplete: function ():void { 387 | mActiveSkinTweenID = 0; 388 | } 389 | } ); 390 | } 391 | } 392 | 393 | protected function onStateContextChanged():void { 394 | updateTextureFromContext(); 395 | updateColorFromContext(); 396 | } 397 | 398 | /** 399 | * 400 | * 401 | * Getters / Setters 402 | * 403 | * 404 | */ 405 | 406 | /** 407 | * When the skin observes a state context, the skin may change its 408 | * Texture based on the current state of that context. 409 | * Typically, a relevant component will automatically assign itself as 410 | * the state context of its skin, so this property is considered to be 411 | * for internal use only. 412 | * 413 | * @default null 414 | * 415 | * @see #setTextureForState() 416 | */ 417 | public function get stateContext():IStateContext { 418 | return mStateContext; 419 | } 420 | 421 | public function set stateContext( value:IStateContext ):void { 422 | if( mStateContext === value ) { 423 | return; 424 | } 425 | if( mStateContext ) { 426 | mStateContext.removeEventListener( FeathersEventType.STATE_CHANGE, onStateContextChanged ); 427 | } 428 | mStateContext = value; 429 | if( mStateContext ) { 430 | mStateContext.addEventListener( FeathersEventType.STATE_CHANGE, onStateContextChanged ); 431 | } 432 | updateTextureFromContext(); 433 | updateColorFromContext(); 434 | } 435 | 436 | /** 437 | * The value passed to the width property setter. If the 438 | * width property has not be set, returns NaN. 439 | * 440 | * @see #width 441 | */ 442 | public function get explicitWidth():Number { 443 | return mExplicitWidth; 444 | } 445 | 446 | override public function set width( value:Number ):void { 447 | if( mExplicitWidth === value ) { 448 | return; 449 | } 450 | if( value !== value && mExplicitWidth !== mExplicitWidth ) { 451 | return; 452 | } 453 | mExplicitWidth = value; 454 | if( mActiveSkin !== null ) { 455 | if( value === value ) { //!isNaN 456 | mActiveSkin.width = value; 457 | } else { // return to the original width of the texture 458 | mActiveSkin.readjustSize(); 459 | } 460 | } 461 | dispatchEventWith( Event.RESIZE ); 462 | } 463 | 464 | override public function get width():Number { 465 | return mActiveSkin ? mActiveSkin.width : NaN; 466 | } 467 | 468 | /** 469 | * The value passed to the height property setter. If the 470 | * height property has not be set, returns 471 | * NaN. 472 | * 473 | * @see #height 474 | */ 475 | public function get explicitHeight():Number { 476 | return mExplicitHeight; 477 | } 478 | 479 | override public function set height( value:Number ):void { 480 | if( mExplicitHeight === value ) { 481 | return; 482 | } 483 | if( value !== value && mExplicitHeight !== mExplicitHeight ) { 484 | return; 485 | } 486 | mExplicitHeight = value; 487 | if( mActiveSkin !== null ) { 488 | if( value === value ) { //!isNaN 489 | mActiveSkin.height = value; 490 | } else { //return to the original height of the texture 491 | mActiveSkin.readjustSize(); 492 | } 493 | } 494 | dispatchEventWith( Event.RESIZE ); 495 | } 496 | 497 | override public function get height():Number { 498 | return mActiveSkin ? mActiveSkin.height : NaN; 499 | } 500 | 501 | /** 502 | * The value passed to the minWidth property setter. If the 503 | * minWidth property has not be set, returns 504 | * NaN. 505 | * 506 | * @see #minWidth 507 | */ 508 | public function get explicitMinWidth():Number { 509 | return mExplicitMinWidth; 510 | } 511 | 512 | public function get minWidth():Number { 513 | if( mExplicitMinWidth === mExplicitMinWidth ) { //!isNaN 514 | return mExplicitMinWidth; 515 | } 516 | return 0; 517 | } 518 | 519 | public function set minWidth( value:Number ):void { 520 | if( mExplicitMinWidth === value ) { 521 | return; 522 | } 523 | if( value !== value && mExplicitMinWidth !== mExplicitMinWidth ) { 524 | return; 525 | } 526 | mExplicitMinWidth = value; 527 | dispatchEventWith( Event.RESIZE ); 528 | } 529 | 530 | /** 531 | * The value passed to the maxWidth property setter. If the 532 | * maxWidth property has not be set, returns 533 | * NaN. 534 | * 535 | * @see #maxWidth 536 | */ 537 | public function get explicitMaxWidth():Number { 538 | return mExplicitMaxWidth; 539 | } 540 | 541 | /** 542 | * The maximum width of the component. 543 | */ 544 | public function get maxWidth():Number { 545 | return mExplicitMaxWidth; 546 | } 547 | 548 | /** 549 | * @private 550 | */ 551 | public function set maxWidth(value:Number):void { 552 | if( mExplicitMaxWidth === value ) { 553 | return; 554 | } 555 | if( value !== value && mExplicitMaxWidth !== mExplicitMaxWidth ) { 556 | return; 557 | } 558 | mExplicitMaxWidth = value; 559 | dispatchEventWith( Event.RESIZE ); 560 | } 561 | 562 | /** 563 | * The value passed to the minHeight property setter. If 564 | * the minHeight property has not be set, returns 565 | * NaN. 566 | * 567 | * @see #minHeight 568 | */ 569 | public function get explicitMinHeight():Number { 570 | return mExplicitMinHeight; 571 | } 572 | 573 | public function get minHeight():Number { 574 | if( mExplicitMinHeight === mExplicitMinHeight ) { //!isNaN 575 | return mExplicitMinHeight; 576 | } 577 | return 0; 578 | } 579 | 580 | public function set minHeight( value:Number ):void { 581 | if( mExplicitMinHeight === value ) { 582 | return; 583 | } 584 | if( value !== value && mExplicitMinHeight !== mExplicitMinHeight ) { 585 | return; 586 | } 587 | mExplicitMinHeight = value; 588 | dispatchEventWith( Event.RESIZE ); 589 | } 590 | 591 | /** 592 | * The value passed to the maxHeight property setter. If 593 | * the maxHeight property has not be set, returns 594 | * NaN. 595 | * 596 | * @see #maxHeight 597 | */ 598 | public function get explicitMaxHeight():Number { 599 | return mExplicitMaxHeight; 600 | } 601 | 602 | /** 603 | * The maximum height of the component. 604 | */ 605 | public function get maxHeight():Number { 606 | return mExplicitMaxHeight; 607 | } 608 | 609 | /** 610 | * @private 611 | */ 612 | public function set maxHeight(value:Number):void { 613 | if( mExplicitMaxHeight === value ) { 614 | return; 615 | } 616 | if( value !== value && mExplicitMaxHeight !== mExplicitMaxHeight ) { 617 | return; 618 | } 619 | mExplicitMaxHeight = value; 620 | dispatchEventWith( Event.RESIZE ); 621 | } 622 | 623 | /** 624 | * The default texture that the skin will display. If the component 625 | * being skinned supports states, the texture for a specific state may 626 | * be specified using the setTextureForState() method. If 627 | * no texture has been specified for the current state, the default 628 | * texture will be used. 629 | * 630 | *

In the following example, the default texture is specified in the 631 | * constructor:

632 | * 633 | * 634 | * var skin:FadeImageSkin = new FadeImageSkin( texture ); 635 | * 636 | *

In the following example, the default texture is specified by 637 | * setting the property:

638 | * 639 | * 640 | * var skin:FadeImageSkin = new FadeImageSkin(); 641 | * skin.defaultTexture = texture; 642 | * 643 | * @default null 644 | * 645 | * @see #disabledTexture 646 | * @see #selectedTexture 647 | * @see #setTextureForState() 648 | * @see http://doc.starling-framework.org/current/starling/textures/Texture.html starling.textures.Texture 649 | */ 650 | public function get defaultTexture():Texture { 651 | return mDefaultTexture; 652 | } 653 | 654 | /** 655 | * @private 656 | */ 657 | public function set defaultTexture( value:Texture ):void { 658 | if( mDefaultTexture === value ) { 659 | return; 660 | } 661 | mDefaultTexture = value; 662 | updateTextureFromContext(); 663 | } 664 | 665 | /** 666 | * The texture to display when the stateContext is 667 | * an IFeathersControl and its isEnabled 668 | * property is false. If a texture has been specified for 669 | * the context's current state with setTextureForState(), 670 | * it will take precedence over the disabledTexture. 671 | * 672 | *

In the following example, the disabled texture is changed:

673 | * 674 | * 675 | * var skin:FadeImageSkin = new FadeImageSkin( upTexture ); 676 | * skin.disabledTexture = disabledTexture; 677 | * button.skin = skin; 678 | * button.isEnabled = false; 679 | * 680 | * @default null 681 | * 682 | * @see #defaultTexture 683 | * @see #selectedTexture 684 | * @see #setTextureForState() 685 | * @see http://doc.starling-framework.org/current/starling/textures/Texture.html starling.textures.Texture 686 | */ 687 | public function get disabledTexture():Texture { 688 | return mDisabledTexture; 689 | } 690 | 691 | /** 692 | * @private 693 | */ 694 | public function set disabledTexture( value:Texture ):void { 695 | mDisabledTexture = value; 696 | } 697 | 698 | /** 699 | * The texture to display when the stateContext is 700 | * an IToggle instance and its isSelected 701 | * property is true. If a texture has been specified for 702 | * the context's current state with setTextureForState(), 703 | * it will take precedence over the selectedTexture. 704 | * 705 | *

In the following example, the selected texture is changed:

706 | * 707 | * 708 | * var skin:FadeImageSkin = new FadeImageSkin( upTexture ); 709 | * skin.selectedTexture = selectedTexture; 710 | * toggleButton.skin = skin; 711 | * toggleButton.isSelected = true; 712 | * 713 | * @default null 714 | * 715 | * @see #defaultTexture 716 | * @see #disabledTexture 717 | * @see #setTextureForState() 718 | * @see http://doc.starling-framework.org/current/starling/textures/Texture.html starling.textures.Texture 719 | */ 720 | public function get selectedTexture():Texture { 721 | return mSelectedTexture; 722 | } 723 | 724 | /** 725 | * @private 726 | */ 727 | public function set selectedTexture( value:Texture ):void { 728 | mSelectedTexture = value; 729 | } 730 | 731 | /** 732 | * Scaling grid used for the internal images. 733 | * 734 | * @see http://doc.starling-framework.org/current/starling/display/Image.html#scale9Grid starling.display.Image 735 | */ 736 | public function get scale9Grid():Rectangle { 737 | return mScale9Grid; 738 | } 739 | 740 | /** 741 | * @private 742 | */ 743 | public function set scale9Grid( value:Rectangle ):void { 744 | mScale9Grid = value; 745 | 746 | if( mActiveSkin !== null ) { 747 | mActiveSkin.scale9Grid = value; 748 | } 749 | } 750 | 751 | /** 752 | * The duration of the fade in Tween, in seconds. 753 | * 754 | * @default 0.5 755 | */ 756 | public function get fadeInDuration():Number { 757 | return mFadeInDuration; 758 | } 759 | 760 | /** 761 | * @private 762 | */ 763 | public function set fadeInDuration( value:Number ):void { 764 | mFadeInDuration = value; 765 | } 766 | 767 | /** 768 | * The duration of the fade out Tween, in seconds. 769 | * 770 | * @default 0.5 771 | */ 772 | public function get fadeOutDuration():Number { 773 | return mFadeOutDuration; 774 | } 775 | 776 | /** 777 | * @private 778 | */ 779 | public function set fadeOutDuration( value:Number ):void { 780 | mFadeOutDuration = value; 781 | } 782 | 783 | /** 784 | * Name of the transition used to fade in current skin. 785 | * 786 | * @default starling.animation.Transitions.EASE_OUT 787 | * 788 | * @see http://doc.starling-framework.org/current/starling/animation/Transitions.html starling.animation.Transitions 789 | */ 790 | public function get fadeInTransition():String { 791 | return mFadeInTransition; 792 | } 793 | 794 | /** 795 | * @private 796 | */ 797 | public function set fadeInTransition( value:String ):void { 798 | mFadeInTransition = value; 799 | } 800 | 801 | /** 802 | * Name of the transition used to fade out previous skin. 803 | * 804 | * @default starling.animation.Transitions.EASE_IN 805 | * 806 | * @see http://doc.starling-framework.org/current/starling/animation/Transitions.html starling.animation.Transitions 807 | */ 808 | public function get fadeOutTransition():String { 809 | return mFadeOutTransition; 810 | } 811 | 812 | /** 813 | * @private 814 | */ 815 | public function set fadeOutTransition( value:String ):void { 816 | mFadeOutTransition = value; 817 | } 818 | 819 | /** 820 | * Determines if a color change is animated when component's state changes. 821 | * Useful when having a single skin texture for all states but various colors. 822 | * 823 | * @default false 824 | */ 825 | public function get tweenColorChange():Boolean { 826 | return mTweenColorChange; 827 | } 828 | 829 | /** 830 | * @private 831 | */ 832 | public function set tweenColorChange( value:Boolean ):void { 833 | mTweenColorChange = value; 834 | } 835 | 836 | /** 837 | * Duration of the tween that changes the skin color. 838 | * 839 | * @default 0.5 840 | */ 841 | public function get colorTweenDuration():Number { 842 | return mColorTweenDuration; 843 | } 844 | 845 | /** 846 | * @private 847 | */ 848 | public function set colorTweenDuration( value:Number ):void { 849 | mColorTweenDuration = value; 850 | } 851 | 852 | /** 853 | * Transition of the tween that changes the skin color. 854 | * 855 | * @default starling.animation.Transitions.EASE_OUT 856 | * 857 | * @see http://doc.starling-framework.org/current/starling/animation/Transitions.html starling.animation.Transitions 858 | */ 859 | public function get colorTweenTransition():String { 860 | return mColorTweenTransition; 861 | } 862 | 863 | /** 864 | * @private 865 | */ 866 | public function set colorTweenTransition( value:String ):void { 867 | mColorTweenTransition = value; 868 | } 869 | 870 | /** 871 | * The default color to use to tint the skin. If the component 872 | * being skinned supports states, the color for a specific state may 873 | * be specified using the setColorForState() method. If 874 | * no color has been specified for the current state, the default 875 | * color will be used. 876 | * 877 | *

A value of uint.MAX_VALUE means that the 878 | * color property will not be changed when the context's 879 | * state changes.

880 | * 881 | *

In the following example, the default color is specified:

882 | * 883 | * 884 | * var skin:FadeImageSkin = new FadeImageSkin(); 885 | * skin.defaultColor = 0x9f0000; 886 | * 887 | * @default uint.MAX_VALUE 888 | * 889 | * @see #disabledColor 890 | * @see #selectedColor 891 | * @see #setColorForState() 892 | */ 893 | public function get defaultColor():uint { 894 | return mDefaultColor; 895 | } 896 | 897 | /** 898 | * @private 899 | */ 900 | public function set defaultColor( value:uint ):void { 901 | if( mDefaultColor === value ) { 902 | return; 903 | } 904 | mDefaultColor = value; 905 | updateColorFromContext(); 906 | } 907 | 908 | /** 909 | * The color to tint the skin when the stateContext is 910 | * an IFeathersControl and its isEnabled 911 | * property is false. If a color has been specified for 912 | * the context's current state with setColorForState(), 913 | * it will take precedence over the disabledColor. 914 | * 915 | *

A value of uint.MAX_VALUE means that the 916 | * disabledColor property cannot affect the tint when the 917 | * context's state changes.

918 | * 919 | *

In the following example, the disabled color is changed:

920 | * 921 | * 922 | * var skin:FadeImageSkin = new FadeImageSkin(); 923 | * skin.defaultColor = 0xffffff; 924 | * skin.disabledColor = 0x999999; 925 | * button.skin = skin; 926 | * button.isEnabled = false; 927 | * 928 | * @default uint.MAX_VALUE 929 | * 930 | * @see #defaultColor 931 | * @see #selectedColor 932 | * @see #setColorForState() 933 | */ 934 | public function get disabledColor():uint { 935 | return mDisabledColor; 936 | } 937 | 938 | /** 939 | * @private 940 | */ 941 | public function set disabledColor( value:uint ):void { 942 | if( mDisabledColor === value ) { 943 | return; 944 | } 945 | mDisabledColor = value; 946 | updateColorFromContext(); 947 | } 948 | 949 | /** 950 | * The color to tint the skin when the stateContext is 951 | * an IToggle instance and its isSelected 952 | * property is true. If a color has been specified for 953 | * the context's current state with setColorForState(), 954 | * it will take precedence over the selectedColor. 955 | * 956 | *

In the following example, the selected color is changed:

957 | * 958 | * 959 | * var skin:FadeImageSkin = new FadeImageSkin(); 960 | * skin.defaultColor = 0xffffff; 961 | * skin.selectedColor = 0xffcc00; 962 | * toggleButton.skin = skin; 963 | * toggleButton.isSelected = true; 964 | * 965 | * @default uint.MAX_VALUE 966 | * 967 | * @see #defaultColor 968 | * @see #disabledColor 969 | * @see #setColorForState() 970 | */ 971 | public function get selectedColor():uint { 972 | return mSelectedColor; 973 | } 974 | 975 | /** 976 | * @private 977 | */ 978 | public function set selectedColor( value:uint ):void { 979 | if( mSelectedColor === value ) { 980 | return; 981 | } 982 | mSelectedColor = value; 983 | updateColorFromContext(); 984 | } 985 | 986 | } 987 | 988 | } 989 | --------------------------------------------------------------------------------