Best Practices

From Frontal Wiki

Frontal, like HTML, JavaScript and CSS, is powerful and flexible enough to solve a problem in many ways. And like those other technologies, some of those solutions will be better than other solutions. In this article, we'll give some ideas about what makes one solution better than another. Adopting these strategies early in your project can avoid problems later.

1 Use Flash's Text Formatting Capabilities
2 Keep Your Style Sheets Clean
3 Use Built-In Functions Over Interactions
4 Enable onEnterFrame Interactions As Needed
5 Use Smaller Images
6 allow-smoothing Slows Things Down
7 Use "display: none;" to Ease Rendering Loads
8 Use brightness Instead of alpha
9 Use "good" Quality Instead of "best"
10 Set the Flash Window Mode to "direct"
11 Use the Default Blend Mode
12 All Visual Elements are div Tags

Use Flash's Text Formatting Capabilities

Adding text to Frontal is done with the 'text' tag. Each 'text' tag added to the Frontal document results in a TextField instance and a display object being added to the Stage. It also means the addition of an instance to the Frontal render tree. In other words, a lot of 'text' tags equals a lot of objects to render and maintain. So, it behooves us to simplify our Frontal document.

For example, here is a formatted page of text include a title, some introductory text and a bulleted list. (In this example, we're using separate div's with elliptical backgrounds to draw the individual bullets.) Run the following code sample to see.

<style><![CDATA[
    .bullet
        {
            background-color: black;
            width: 4px;
            height: 4px;
            margin-top: 8px;
            margin-right: 8px;
            margin-left: 8px;
            background-shape: ellipse;
            float: left;
            clear: left;
        }
    .li
        {
            float: left;
        }
]]></style>
<text style="font-size: 24px;">Welcome</text>
<text>We will cover:</text>
<div class="bullet" /><text class="li">When to Use Stainless Steel</text>
<div class="bullet" /><text class="li">The Elbow Technique</text>
<div class="bullet" /><text class="li">Dry Rubs</text>

To achieve this layout, we needed 9 Frontal elements, 8 of which are visual. We can simplify this greatly though if we take advantage of Flash's HTML rendering capabilities. That is, within a 'text'' tag, a limited version of HTML is supported. See the Flash documentation of its TextField class for more details. Using this capability, we can rewrite the first example like so:

<text style="condense-white: true; width: 100%;"><![CDATA[
<font size="24">Welcome</font><br />
We will cover:<br />
<li>When to Use Stainless Steel</li>
<li>The Elbow Technique</li>
<li>Dry Rubs</li>
]]></text>

This approach uses a single Frontal element and so will result in a sprier result. This is because every element in the Frontal document gets its own set of objects (both programmatic and visual) to handle it. As it takes time during rendering to create those objects and to maintain them, it behooves us to try to minimize the number of elements in the Frontal document. While for one of these objects, we may be talking about the user waiting a ten-thousandth of a second for it to be prepared, we have to remember that our Frontal document is rendered like a movie 30 times per second. This means we only get 30 thousandths of a second to do everything we want to do so every little bit can help.

Keep Your Style Sheets Clean

A selector in a style sheet amounts to a query on the Frontal document that must be run at initialization and then whenever the document changes. With many selectors and a large document, the time to do this can become an issue. Therefore, avoid duplicate selectors when possible. Also, re-use selectors. If you have two different selectors associated with the same declarations then see if there is a way to combine them into a single ruleset by, perhaps, using a style class.

Use Built-In Functions Over Interactions

Parsing and interpreting Frontal script will always be slower than running compiled ActionScript. Therefore, if there's a built-in feature that provides what you are using Frontal script to achieve then use the built-in feature. For example, instead of using the "onRollOver" interaction, see if you can use the ":hover" pseudo class. Also, try to use a one-time interaction to set a custom pseudo-class whose application is a built-in feature.

Enable onEnterFrame Interactions As Needed

onEnterFrame interactions are run with every frame. Sometimes this is necessary but not always. For example, here we move the image only when the mouse rolls over it. Therefore, we can remove the interaction when the mouse is not over the image.

<style><![CDATA[
    .mouseScroll
        {
            @onEnterFrame
                {
                    if ( ! dynamic.hasOwnProperty ( "over" ) )
                    {
                        // Remove this interaction if dynamic.over not set yet.
                        removeInteraction ( com.frontalcode.FrontalEvent.ENTER_FRAME, movie );
                        return;
                    }
 
                    if ( dynamic.over )
                    {
                        dynamic.targetX = scrollLeftMax * movie.mouseX / contentWidth;
                        dynamic.targetY = scrollTopMax * movie.mouseY / contentHeight;
                    }
 
                    scrollLeft += ( dynamic.targetX - scrollLeft ) / 10;
                    scrollTop += ( dynamic.targetY - scrollTop ) / 10;
 
                    if ( ! dynamic.over && Math.abs ( dynamic.targetX - scrollLeft ) < 0.5 && Math.abs ( dynamic.targetY - scrollTop ) < 0.5 )
                    {
                        scrollLeft = dynamic.targetX;
                        scrollTop = dynamic.targetY;
                        // The mouse is not over us and we've reach our target
                        // so remove the onEnterFrame interaction.
                        removeInteraction ( com.frontalcode.FrontalEvent.ENTER_FRAME, movie );
                    }
                }
            @onRollOver
                {
                    // The mouse is over us - enable our interaction.
                    dynamic.over = true;
                    applyInteraction ( com.frontalcode.FrontalEvent.ENTER_FRAME, movie );
                }
            @onRollOut
                {
                    // Mark that the mouse is no longer over us and so we may
                    // remove the onEnterFrame interaction.
                    dynamic.over = false;
                }
        }
]]></style>
<img class="mouseScroll" src="http://frontalcode.com/assets/images/image_8.jpg" style="overflow: hidden; resize-scale: none; margin: auto; width: 200px; height: 200px;" />

if ( dynamic.over )
                    {
                        dynamic.targetX = scrollLeftMax * movie.mouseX / contentWidth;
                        dynamic.targetY = scrollTopMax * movie.mouseY / contentHeight;
                    }
                    
                    scrollLeft += ( dynamic.targetX - scrollLeft ) / 10;
                    scrollTop += ( dynamic.targetY - scrollTop ) / 10;
                    
                    if ( ! dynamic.over && Math.abs ( dynamic.targetX - scrollLeft ) < 0.5 && Math.abs ( dynamic.targetY - scrollTop ) < 0.5 )
                    {
                        scrollLeft = dynamic.targetX;
                        scrollTop = dynamic.targetY;
                        // The mouse is not over us and we've reach our target
                        // so remove the onEnterFrame interaction.
                        removeInteraction ( com.frontalcode.FrontalEvent.ENTER_FRAME, movie );
                    }
                }
            @onRollOver
                {
                    // The mouse is over us - enable our interaction.
                    dynamic.over = true;
                    applyInteraction ( com.frontalcode.FrontalEvent.ENTER_FRAME, movie );
                }
            @onRollOut
                {
                    // Mark that the mouse is no longer over us and so we may
                    // remove the onEnterFrame interaction.
                    dynamic.over = false;
                }
        }
]]></style>
<img class="mouseScroll" src="http://frontalcode.com/assets/images/image_8.jpg" style="overflow: hidden; resize-scale: none; margin: auto; width: 200px; height: 200px;" />

Use Smaller Images

It is better to use smaller images than larger ones because they take less time to load and then any operations that need to act on the original image (like a scaling operation) will be faster.

allow-smoothing Slows Things Down

While this style is very powerful, it can really hurt a site's performance particularly if the image being smoothed is also being animated. In such situations, consider turning this style off at least during the transition.

Use "display: none;" to Ease Rendering Loads

When an element is positioned or moved off the stage or behind some other element, it may still be being rendered. This can slow things down. To remove it from the Flash display list and from Frontal's rendering list, set the display style to "none." When you need to see the element again, set display to "block."

Note that setting visibility to "hidden" will also remove the element from Flash's display list. It will not remove it from Frontal's rendering though and so will still have an effect on performance.

Use brightness Instead of alpha

When wanting to fade an image to white or black, we often reach to the alpha style out of habit. It would be better if we first considered if brightness could achieve the effect we desire because it's performance is better.

Use "good" Quality Instead of "best"

When embedding Flash into an HTML page, you can set the quality that Flash will render the movie at. (See the Flash documentation.) Of course we want "best" and that's usually where we start but the performance hit can be unacceptable. When it is, give "good" a try. Often times the only change you'll notice is the dramatic performance improvement.

Set the Flash Window Mode to "direct"

If your Flash content does not need to be overlapped by HTML then embedding Flash with the "wmode" set to "direct" can really speed things up.

Use the Default Blend Mode

The blend mode is set with the blend-mode style. The default value is "normal" but it is often the case - especially when layered objects are being faded - that "layer" is desired. Instead of setting this desired blend mode to the entire document, only apply it where it is needed to avoid a performance hit.

All Visual Elements are div Tags

It should be remembered that all visual elements like 'img' and 'text' are extensions of the 'div' element. So whereas this works:

    <div style="margin: auto;">
        <img src="http://frontalcode.com/assets/images/image_8.jpg" />
    </div>

this is better since it uses fewer visual elements:

    <img style="margin: auto;" src="http://frontalcode.com/assets/images/image_8.jpg" />