Create Sections And Navigation

From Frontal Wiki

Jump to: navigation, search

In the Create A Slideshow Of Images cookbook, we saw how the 'manager' tag was used to add a slide show to a Frontal document. Here we'll see how it can be used to add a menu. In this example we'll create a site with eight sections and a menu to navigate them.

We begin by adding a style sheet with several styles. This will tell the Frontal SWF that any changes made to a style should be animated with a tween rather than applied immediately: 

<style><![CDATA[
*
    {
        style-tween-ease: fl.transitions.easing.Regular.easeOut;
        style-tween-duration: 6;
        style-tween-use-secs: false;
    }

These style classes define the sections of our site and their colors: 

.section
    {
        width: 470px;
        height: 220px;
        padding: 40px;
        color: #ffffff;
        font-size: 24;
    }

This style class defines what a section of menu buttons looks like: 

.sectionButtons
    {
        float: left;
        width: 112px;
        padding: 4px;
        border-width: 1px;
        background-color: orange;
        margin-right: 4px;
    }

And finally, these styles determine what an individual button in the menu looks like under many different interaction states. 

.menuEntry
    {
         width: auto;
         height: 0px;
         alpha: 0;
     }
.menuEntry:link { color: #666666; }
.menuEntry:visited { color: #999999; }
.menuEntry:focus, .menuEntry:hover { color: #cccccc; underline: true; }
.menuEntry:active { color: red; }
.menuEntry:selected { color: black; underline: false; }
.menuEntry:selected, .menuEntry:siblingSelected, .menuEntry:parentSelected(1), .menuEntry:childSelected, .menuEntry:nephewSelected { alpha: 1; height: 18px; }
]]></style>

The following markup then defines our sectioned site's menu. Here we're laying out three columns of buttons and associating each button to a section in the site -- via the 'mrgId' and 'elemNdx' attributes: 

<div style="width: 100%;">
    <div class="sectionButtons">
        <text class="frMarker menuEntry" mgrId="mgr" elemNdx="Section One">Section 1</text>
        <text class="frMarker menuEntry" mgrId="mgr" elemNdx="Section One: Sub Section One" style="padding-left: 4px;">Section 1.1</text>
        <text class="frMarker menuEntry" mgrId="mgr" elemNdx="Section One: Sub Section Two" style="padding-left: 4px;">Section 1.2</text>
    </div>
    <div class="sectionButtons">
        <text class="frMarker menuEntry" mgrId="mgr" elemNdx="Section Three">Section 3</text>
    </div>
</div>

And here, we define the sections of our site. You should note the similarities between this example and the earlier slide show example in that we are using a 'manager' tag to group the sections of the site. We are also using 'transitioner' tags again, though this time we've defined a sliding transition rather than a fading one. 

<div style="layout: stack; left: 0px; top: 100px; width: 550px; height: 300px; overflow: hidden;">
    <manager id="mgr" style="hide-unselected: true; tween-container-init: true;">
        <transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="top" start="0" finish="300" duration="15" />
        <transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="top" start="-300" finish="0" duration="15" />
    </manager>
    <text name="Section One" class="section" style="background-color: blue;"><![CDATA[Section One]]></text>
    <text name="Section One: Sub Section One" class="section" style="background-color: orange;" parentElemNdx="Section One">
        <![CDATA[Section One: Sub Section One]]>
    </text>
    <text name="Section One: Sub Section Two" class="section" style="background-color: teal;" parentElemNdx="Section One">
        <![CDATA[Section One: Sub Section Two]]>
    </text>
    <text name="Section Three" class="section" style="background-color: green;"><![CDATA[Section Three]]></text>
</div>

The sections themselves are simple text nodes. We define their hierarchy (that is, the section / sub-section structure) using the special 'parentElemNdx' attribute that the manager knows how to interpret. For example, this is how we make the 'text' tag with the name "Section One: Sub Section One" a sub-section of the 'text' tag named "Section One."

Here's how the code looks all together (click the run button below it to see how it works): 

<style><![CDATA[
*
    {
        style-tween-ease: fl.transitions.easing.Regular.easeOut;
        style-tween-duration: 6;
        style-tween-use-secs: false;
    }
 
.section
    {
        width: 470px;
        height: 220px;
        padding: 40px;
        color: #ffffff;
        font-size: 24;
    }
 
.sectionButtons
    {
        float: left;
        width: 112px;
        padding: 4px;
        border-width: 1px;
        background-color: orange;
        margin-right: 4px;
    }
 
.menuEntry
    {
         width: auto;
         height: 0px;
         alpha: 0;
     }
.menuEntry:link { color: #666666; }
.menuEntry:visited { color: #999999; }
.menuEntry:focus, .menuEntry:hover { color: #cccccc; underline: true; }
.menuEntry:active { color: red; }
.menuEntry:selected { color: black; underline: false; }
.menuEntry:selected, .menuEntry:siblingSelected, .menuEntry:parentSelected(1), .menuEntry:childSelected, .menuEntry:nephewSelected { alpha: 1; height: 18px; }
]]></style>
 
<div style="width: 100%;">
    <div class="sectionButtons">
        <text class="frMarker menuEntry" mgrId="mgr" elemNdx="Section One">Section 1</text>
        <text class="frMarker menuEntry" mgrId="mgr" elemNdx="Section One: Sub Section One" style="padding-left: 4px;">Section 1.1</text>
        <text class="frMarker menuEntry" mgrId="mgr" elemNdx="Section One: Sub Section Two" style="padding-left: 4px;">Section 1.2</text>
    </div>
    <div class="sectionButtons">
        <text class="frMarker menuEntry" mgrId="mgr" elemNdx="Section Three">Section 3</text>
    </div>
</div>
 
<div style="layout: stack; left: 0px; top: 100px; width: 550px; height: 300px; overflow: hidden;">
    <manager id="mgr" style="hide-unselected: true; tween-container-init: true;">
        <transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="top" start="0" finish="300" duration="15" />
        <transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="top" start="-300" finish="0" duration="15" />
    </manager>
    <text name="Section One" class="section" style="background-color: blue;"><![CDATA[Section One]]></text>
    <text name="Section One: Sub Section One" class="section" style="background-color: orange;" parentElemNdx="Section One">
        <![CDATA[Section One: Sub Section One]]>
    </text>
    <text name="Section One: Sub Section Two" class="section" style="background-color: teal;" parentElemNdx="Section One">
        <![CDATA[Section One: Sub Section Two]]>
    </text>
    <text name="Section Three" class="section" style="background-color: green;"><![CDATA[Section Three]]></text>
</div>

Be sure to note that the look and behavior of your menu was completely defined in the Frontal document -- so it's completely customizable. For more details, see the section on the 'manager' tag.

Retrieved from "http://www.frontalcode.com/wiki/index.php/Create_Sections_And_Navigation"
Personal tools
Get Adobe Flash player