Permalink
Browse files

merge master

  • Loading branch information...
joshtynjala committed Jun 21, 2018
2 parents f8e4d32 + ffd54b6 commit f0bb3014c759a9281ecea3c0d63dc40aabda98bb
View
@@ -15,7 +15,7 @@ before_script:
- wget -O AIRSDK_Compiler.tbz2 http://airdownload.adobe.com/air/mac/download/latest/AIRSDK_Compiler.tbz2
- tar -xjf AIRSDK_Compiler.tbz2 -C air_sdk
- mkdir -p air_sdk/frameworks/libs/player/11.1/
- wget -O playerglobal.swc http://download.macromedia.com/get/flashplayer/updaters/19/playerglobal19_0.swc
- wget -O playerglobal.swc https://fpdownload.macromedia.com/get/flashplayer/installers/archive/playerglobal/playerglobal19_0.swc
- cp -f playerglobal.swc air_sdk/frameworks/libs/player/11.1/
- export AIR_HOME="$TRAVIS_BUILD_DIR/air_sdk"
# starling
View
@@ -11,8 +11,8 @@ Say hello to [Feathers UI](https://feathersui.com/), a library of light-weight,
## Quick Links
* [Website](https://feathersui.com/)
* [Beta Help](https://feathersui.com/beta/help/)
* [Beta API Reference](https://feathersui.com/beta/api-reference/)
* [Help](https://feathersui.com/help/)
* [API Reference](https://feathersui.com/api-reference/)
* [Discussion Forum](http://forum.starling-framework.org/forum/feathers)
* [Github Project](https://github.com/BowlerHatLLC/feathers)
View
@@ -2,7 +2,7 @@
Noteworthy changes in official, stable releases of [Feathers UI](https://feathersui.com/).
## 3.5.0 - In Development
## 3.5.0 - June 2018
* AnchorLayout: fixed issue where measurement could be incorrect when using horizontalCenter or verticalCenter.
* BitmapFontTextEditor, TextBlockTextEditor: added Shift+Home, Shift+End, Shift+Up, and Shift+Down keyboard shortcuts.
@@ -44,6 +44,8 @@ Noteworthy changes in official, stable releases of [Feathers UI](https://feather
* Themes: fixed issue where pivots in texture atlas caused some skins to appear at incorrect locations with Starling 2.3.
* TiledColumnsLayout: fixed issue where the columns could be incorrectly aligned horizontally when alignment should not be possible.
* TiledColumnsLayout: fixed issue where an incorrect number of visible columns was calculated when distributeHeights is true.
* TiledColumnsLayout: if distributeWidths is set to true, useSquareTiles is changed to false automatically (or distributeWidths would have no effect).
* TiledRowsLayout: if distributeHeights is set to true, useSquareTiles is changed to false automatically (or distributeHeights would have no effect).
* Tree: added scrollToDisplayLocation() method.
* ValidationQueue: reduced memory allocations to avoid unnecessary garbage collection.
* VectorHierarchicalCollection: Fixed issue that caused compilation to fail with classic Adobe Flex SDK.
@@ -85,22 +85,23 @@ a[href^="http://"], a[href^="https://"], a[href^="//"]
padding: 0 0 0 20px;
}
a[href^="http://feathersui.com/examples/"]
a[href*="//feathersui.com/examples/"]
{
background: transparent;
padding: 0;
}
a[href^="http://doc.starling-framework.org"],
a[href*="//doc.starling-framework.org"],
a[href^="../api-reference/"],
a[href^="../../api-reference/"],
a[href^="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/"]
a[href*="//help.adobe.com/en_US/FlashPlatform/reference/actionscript/"]
{
background: url(../images/book_open.png) center left no-repeat;
padding: 0 0 0 20px;
}
a[href^="http://wiki.starling-framework.org"]
a[href*="//wiki.starling-framework.org"],
a[href*="//manual.starling-framework.org"]
{
background: url(../images/starling.png) center left no-repeat;
padding: 0 0 0 20px;
@@ -110,7 +111,8 @@ a[href^="http://wiki.starling-framework.org"]
screen and (min--moz-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2)
{
a[href^="http://wiki.starling-framework.org"]
a[href*="//wiki.starling-framework.org"],
a[href*="//manual.starling-framework.org"]
{
background: url(../images/starling@2x.png) center left no-repeat;
background-size: 16px 16px;
@@ -5,9 +5,257 @@ author: Josh Tynjala
---
# Effects and animations for Feathers components
A Feathers component supports playing animations triggered by certain moments in its lifecycle, such as adding it to the display list, changing its size or position, or even changing its data. These are called *effects*. A number of built-in effects are available to quickly add a bit of life to your project.
Let's start by looking at a quick example of how to use an effect:
``` code
component.addedEffect = Fade.createFadeInEffect();
```
In the example above, we're using one of the built-in effects on the [`feathers.motion.Fade`](../api-reference/feathers/motion/Fade.html) class. When the component is added to the stage, the [`addedEffect`](../api-reference/feathers/core/FeathersControl.html#addedEffect) will play, and the component's `alpha` value will fade in from `0.0` to `1.0`.
Now, let's explore all of the built-in effects. Components support custom effects too, and we'll look at that later.
## Fade
The [`Fade`](../api-reference/feathers/motion/Fade.html) effect animates the opacity of the target component. Several different types of fade effects are available for maximum flexibility.
### Fade in
The component may fade in, animating the `alpha` property from `0.0` to `1.0`.
``` code
Fade.createFadeInEffect();
```
### Fade out
Alternatively, the component may fade out, animating the `alpha` property from `1.0` to `0.0`.
``` code
Fade.createFadeOutEffect();
```
### Fade to
A third option is to fade to a specific `alpha` value starting from the component's current `alpha` value.
``` code
Fade.createFadeToEffect(0.5);
```
### Fade from
Similarly, we can start from a custom `alpha` value and fade to the component's current `alpha` value.
``` code
Fade.createFadeFromEffect(0.0);
```
### Fade between
The final option is to fade between a custom starting `alpha` value and a custom ending `alpha` value.
``` code
Fade.createFadeBetweenEffect(1.0, 0.5);
```
## Iris
The [`Iris`](../api-reference/feathers/motion/Iris.html) effect adds a circular mask to the target component, and animates its radius to either reveal or hide the component.
``` code
Iris.createIrisOpenEffect();
Iris.createIrisCloseEffect();
```
## Move
The [`Move`](../api-reference/feathers/motion/Move.html) effect animates the `x` and `y` position of the target component.
### Move to
You may animate the component to a new position, starting from its current position:
``` code
Move.createMoveToEffect();
Move.createMoveXToEffect();
Move.createMoveYToEffect();
```
### Move from
You may animate the component from a specific position to its current position:
``` code
Move.createMoveFromEffect();
Move.createMoveXFromEffect();
Move.createMoveYFromEffect();
```
### Move by
You may animate the component's position by a specific offset, starting from its current position:
``` code
Move.createMoveByffect();
Move.createMoveXByEffect();
Move.createMoveYByEffect();
```
### Move on `x` or `y` property change
To animate a component's size any time that the `x` or `y` setters are called, pass the result of [`Move.createMoveEffect()`](../api-reference/feathers/motion/Move.html#createMoveEffect()) to the [`moveEffect`](../api-reference/feathers/core/FeathersControl.html#moveEffect) property:
``` code
component.moveEffect = Move.createMoveEffect();
```
## Parallel
A [`Parallel`](../api-reference/feathers/motion/Parallel.html) effect can play multiple effects simulataeously, ending when all of them have completed.
``` code
Parallel.createParallelEffect(
Fade.createFadeInEffect(),
Iris.createIrisOpenEffect()
);
```
## Resize
The [`Resize`](../api-reference/feathers/motion/Resize.html) effect animates the `width` and `height` values of the target component.
### Resize to
You may animate the component's size to new dimensions, starting from its current dimensions:
``` code
Resize.createResizeToEffect();
Resize.createResizeWidthToEffect();
Resize.createResizeHeightToEffect();
```
### Resize from
You may animate the component's size from custom dimensions to its current dimensions:
``` code
Resize.createResizeFromEffect();
Resize.createResizeWidthFromEffect();
Resize.createResizeHeightFromEffect();
```
### Resize by
You may animate the component's size by a specific offset, starting from its current dimensions:
``` code
Resize.createResizeByEffect();
Resize.createResizeWidthByEffect();
Resize.createResizeHeightByEffect();
```
### Resize on `width` or `height` property change
To animate a component's size any time that the `width` or `height` setters are called, pass the result of [`Resize.createResizeEffect()`](../api-reference/feathers/motion/Resize.html#createResizeEffect()) to the [`resizeEffect`](../api-reference/feathers/core/FeathersControl.html#resizeEffect) property:
``` code
component.resizeEffect = Resize.createResizeEffect();
```
## Sequence
A [`Sequence`](../api-reference/feathers/motion/Sequence.html) effect plays multiple effects one at a time, moving on to the next as each one completes.
``` code
Sequence.createSequenceEffect(
Fade.createFadeInEffect(),
Move.createMoveToEffect(100, 50)
);
```
## Wipe
With a [`Wipe`](../api-reference/feathers/motion/Wipe.html) effect, the target component is given a rectangular mask that is resized over time. The mask may be resized in one of four directions: up, down, right, or left.
A *wipe in* effect can show the target component:
``` code
Wipe.createWipeInLeftEffect();
Wipe.createWipeInRightEffect();
Wipe.createWipeInUpEffect();
Wipe.createWipeInDownEffect();
```
A *wipe out* effect can hide the target component:
``` code
Wipe.createWipeOutLeftEffect();
Wipe.createWipeOutRightEffect();
Wipe.createWipeOutUpEffect();
Wipe.createWipeOutDownEffect();
```
## Custom effects
Effect properties on Feathers components are simply typed as `Function`. Let's start by taking a look at the required function signature:
``` code
function( target:DisplayObject ):IEffectContext
```
An effect function should accept a single argument, the target of the effect. It should return an implementation of [`feathers.motion.effectClasses.IEffectContext`](../api-reference/feathers/motion/effectClasses/IEffectContext.html). The component uses this context to start, pause, and stop the effect, as needed. Typically, you'll want to animate something using [`starling.animation.Tween`](http://doc.starling-framework.org/current/starling/animation/Tween.html), so the return value is often an instance of [`feathers.motion.effectClasses.TweenEffectContext`](../api-reference/feathers/motion/effectClasses/TweenEffectContext.html). Let's take a look at an example that uses `Tween` and `TweenEffectContext` to create our first custom effect.
### A custom transition using `starling.animation.Tween`
Let's create a custom effect that's a simplified version of the built-in [`Fade.createFadeInEffect()`](../api-reference/feathers/motion/Fade.html#createFadeInEffect()). The target component's `alpha` property will fade in from `0.0` to `1.0`.
Let's start with a simple function that sets the initial conditions before the animation starts:
``` code
function( target:DisplayObject ):IEffectContext
{
target.alpha = 0.0;
//more code will go here
}
```
The target component will start completely hidden, so we should set its `alpha` property to `0.0`.
Next, we'll create a `Tween` that animates the `alpha` property on the target component:
``` code
var tween:Tween = new Tween( target, 1.0, Transitions.EASE_OUT );
tween.animate( "alpha", 1.0 );
```
As you can see, we animate the `alpha` property for a duration of one second, and we specify an easing function.
<aside class="info">For more information about Starling's `Tween` class, see [Animations](http://manual.starling-framework.org/en/#_animations) in the Starling Manual.</aside>
Finally, we need to pass our `Tween` instance to a `TweenEffectContext` to return from our function.
``` code
return new TweenEffectContext(target, tween);
```
That's it! When this effect is triggered, the component's alpha property will fade in.
### Full custom transition source code
``` code
function( target:DisplayObject ):IEffectContext
{
target.alpha = 0.0;
var tween:Tween = new Tween( target, 1.0, Transitions.EASE_OUT );
tween.fadeTo( 1.0 );
return new TweenEffectContext(target, tween);
}
```
<aside class="warn"><strong>Warning!</strong> The following documentation is incomplete. It will be finished soon!</aside>
## Related Links
@@ -1,9 +1,9 @@
---
title: Why do the Feathers component skins and font sizes appear very small?
title: Why do the Feathers component skins and font sizes appear very small when simulating a mobile device on my computer?
author: Josh Tynjala
---
# Why do the Feathers component skins and font sizes appear very small?
# Why do the Feathers component skins and font sizes appear very small when simulating a mobile device on my computer?
Unfortunately, while many IDEs provide a list of common mobile devices to simulate, some will only simulate the stage dimensions of these devices, but not the screen density (also referred to as DPI or PPI) or the name of the platform. In those cases, your computer's screen density (which is often very different from a phone or tablet) and your desktop platform (Windows or Mac instead of iOS or Android) will be reported during testing. This can make Feathers behave in unexpected ways, such as scaling components incorrectly.
Oops, something went wrong.

0 comments on commit f0bb301

Please sign in to comment.