Tweening Styles

From Frontal Wiki

Tweening Styles with Style Sheets

When we apply a style to an element, any visual change it causes will be applied during the next render of the Frontal document. For example, here the background colors of the 'div' elements change when the mouse rolls over and rolls out of them.

<style><![CDATA[
    .test
        {
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
        }
    .test > div
        {
            margin: auto;
            width: 80px;
            height: 80px;
            background-color: palegoldenrod;
        }
    .test:hover           
        {
            background-color: palegoldenrod;
        }
    .test:hover > div
        {
            background-color: saddlebrown;
        }
]]></style>
<div class="test">
    <div />
</div>

As you can see, the change is immediate. With Frontal, we also have the ability to change styles over time using a "tween". To see this, add these styles to the ".test" ruleset:

    style-tween-ease: fl.transitions.easing.Strong.easeInOut;
    style-tween-duration: 10;
    style-tween-use-secs: false;

With the addition of these styles, we now see that the color change of the divs is smooth. This is because it is occurring over several frames -- 10 in this case.

Controlling the Style Tween

Whenever an element has the style-tween-duration style set to some positive number, then any changes to tweenable styles will cause that change to be effected over time, using a Flash Tween (see the Flash reference for details). In this case, the style change was from one background color to another.

What should be noted is that each element has a single tween to perform the changes and so there are circumstances where the process needs to be managed. For example, what if a style tween is already in action when we want to make another style change? To handle this scenario and others, there are a few methods provided to manage any ongoing style tween:

• stopStyleTween: Stop any current style tween.
• fforwardStyleTween: This fast forwards the current style tween (if there is one) immediately to its end.

These methods are available on all Frontal elements.

Note that when a style tween begins, styles like "20%" or "auto" are converted to numbers. Then during the tween, the given style is set to a number and not some intermediate percentage like "10%". When the tween finishes, the style is set to the original format that was the target of the style, like back to a percentage, for example. If we stop the style tween while it's in progress, however, the conversion back to the original format doesn't happen. So the stopStyleTween method, for example, will leave the style values at whatever value they currently are in the tween. This is usually not an issue though.

Tweenable Styles

Earlier we mentioned that only changes in "tweenable" styles would trigger the style tween. So what are tweenable styles? The general rule of thumb is that if the style can take a range of numbers as its value, then it's tweenable. So for example, alpha and blur are tweenable, but underline isn't.

But like with most rules, there are exceptions. Some styles, like style-tween-use-secs, are not tweenable, so check the styles reference to be sure.

Also, if a tweenable style doesn't currently have a tweenable value, then it won't trigger the tween. For example, the style background-color doesn't have a default value, so the first time it's set, no tween occurs because there's no value to tween from. See #Caveats Regarding Style Initialization for more details.

Manually Tweening Styles

When setting a style with "setStyle" or "sS", the style tween mechanism is bypassed. Therefore, two methods (available from any Frontal element) are provided to do this:

• prepStyleTween: This prepares the object to tween to a new set of styles.
• tweenStyles: Initiates the style tween that's in preparation, based on the last call to prepStyleTween.

After calling the prepStyleTween method, any calls to setStyle will not take effect immediately. Instead, their values will be saved as the target values for a style tween. Then, a call to tweenStyles will tween to the set of styles defined in this way. Note that there's a single style tween per object, and so calling prepStyleTween while a style tween is already running will replace the running tween.

Here's an example:

<style><![CDATA[
    .scale
        {
            style-tween-ease: fl.motion.easing.Bounce.easeOut;
            style-tween-duration: 60;
            style-tween-use-secs: false;
            width: 160px;
            height: 120px;
            movie-registration-x: 80px;
            movie-registration-y: 60px;
            margin: auto;
 
            @onRollOver { prepStyleTween ( ); sS ( "scale", 4   ); tweenStyles ( ); }
            @onRollOut  { prepStyleTween ( ); sS ( "scale", 1 ); tweenStyles ( ); }
        }
]]></style>
<img class="scale" src="assets/images/image_10.jpg" />

Caveats Regarding Style Initialization

As mentioned previously, it's not enough to have a tweenable style to trigger a style tween. The styles must also have tweenable values. For example, the style background-color doesn't have a default value, and so the first time it's set, no tween will occur. rotation, on the other hand, does have an initial value, and so the first time it's set as a style, a tween will occur.

Here's an example. Go to the result and you'll see a brown square rotating 70 degrees over 10 seconds.

<style><![CDATA[
    .test
        {
            style-tween-ease: fl.transitions.easing.Strong.easeInOut;
            style-tween-duration: 300;
            style-tween-use-secs: false;            
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            rotation: 70;
        }
]]></style>
<div class="test" />

If this is undesirable, and you'd like to prevent the initial rotation tween, then add an interaction like this to the ".test" ruleset:

@onFirstRender
    {
        fforwardStyleTween();
    }